@conecli/cone-render 0.8.11-beta.0 → 0.8.12

package/dist/open/index.ts

@@ -1 +1 @@
-import '../sass/base.scss';
+import taroJdBaseInfo from '../common'

package/dist/sass/app.h5.scss

@@ -0,0 +1,606 @@
+
+@import '~normalize.css';
+@import './base';
+
+
+html {
+	
+	//font-size: 32PX;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	-moz-text-size-adjust: 100%;
+	width: 100%; // 安卓webview需要撑开
+	min-height: 100px;
+	//height: 100%;
+}
+
+body {
+	width: 100%; // 安卓webview需要撑开
+	//height: 100%;
+	min-height: 100px; // 最小高度在安卓webview中必须存在
+	
+	font-family: 'Microsoft YaHei', PingFangSC, Helvetica, 'Droid Sans', Arial,
+		sans-serif !important;
+	background-color: #f2f2f2;
+	//解决taro转换h5后默认body行高1.6
+	line-height: 1.15;
+	// 解决某些情况下完全不相关的元素也跟着抖动闪烁  ----- 无法解决，还会引起app里面click事件点击无效 ，需删除
+	//transform: translate3d(0, 0, 0);
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	margin: 0;
+	padding: 0;
+	
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	-webkit-tap-highlight-color: transparent; 
+	
+	outline: none;
+	//font-weight: normal;
+	// 该属性会额外引起safari等ios浏览器偶发卡顿，ios13也默认支持回弹效果，所以移除该属性 https://www.cnblogs.com/xiahj/p/8036419.html
+	//-webkit-overflow-scrolling: touch;
+	//对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。antialiased：抗锯齿很好
+	-webkit-font-smoothing: antialiased;
+}
+
+
+.ban-show-menu {
+	-webkit-touch-callout: none;
+}
+
+
+.user-ban-select {
+	user-select: none;
+}
+
+.user-can-select {
+	user-select: auto;
+}
+
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+}
+
+
+input,
+button,
+select,
+textarea,
+a {
+	-webkit-appearance: none !important;
+}
+
+a,
+a:active {
+	outline: none;
+	text-decoration: none;
+}
+
+textarea {
+	resize: none;
+}
+
+input,
+button,
+textarea,
+a {
+	border: none;
+}
+
+.clearFix {
+	zoom: 1;
+	display: block;
+	_height: 1px;
+}
+
+.clearFix:after {
+	content: '.';
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+
+
+img {
+	pointer-events: none;
+	
+	//transform: perspective(1px) translate3d(0, 0, 0);
+	//-webkit-backface-visibility: hidden; 
+	//-webkit-transform-style: preserve-3d; 
+}
+
+.clearFlow {
+	overflow: hidden;
+	*zoom: 1;
+}
+
+
+ul li {
+	list-style-type: none;
+}
+
+.ul-li-float li {
+	float: left;
+}
+
+
+.opacity-0 {
+	opacity: 0;
+	filter: alpha(opacity=0);
+	*zoom: 1;
+}
+
+.opacity-20 {
+	opacity: 0.2;
+	filter: alpha(opacity=20);
+	*zoom: 1;
+}
+
+.opacity-50 {
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	*zoom: 1;
+}
+
+.opacity-60 {
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+	*zoom: 1;
+}
+
+.opacity-80 {
+	opacity: 0.8;
+	filter: alpha(opacity=80);
+	*zoom: 1;
+}
+
+.opacity-100 {
+	opacity: 1;
+	filter: alpha(opacity=100);
+	*zoom: 1;
+}
+
+
+.d-half-1px-line::after {
+  border-width: 0;
+  border-radius: 0;
+  border-bottom-width: 1PX;
+}
+
+.d-ios-force-border-radius {
+	transform: translateZ(0);
+	mask-image: radial-gradient(circle, white 100%, black 100%);
+}
+//反写taro转小程序样式
+.hydrated {
+	visibility: visible;
+}
+
+// 视频封面全屏铺满
+video {
+	object-fit: cover;
+}
+
+.d-video-forbid-fullscreen-button {
+	&::-webkit-media-controls-fullscreen-button {
+		display: none !important;
+	}
+}
+
+taro-view-core,
+taro-image-core,
+taro-text-core,
+taro-video-core {
+	
+	outline: none;
+	//font-weight: normal;
+	-webkit-overflow-scrolling: touch;
+	//对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。antialiased：抗锯齿很好
+	-webkit-font-smoothing: antialiased;
+}
+
+//解决小程序图片宽度320高度默认240的问题
+taro-image-core {
+	display: block;
+	width: 100%;
+	height: auto;
+	
+	//transform: translate3d(0, 0, 0) perspective(1px);
+	//-webkit-backface-visibility: hidden; 
+	//-webkit-transform-style: preserve-3d; 
+}
+
+// 解决多行省略的时候可能无法展示的问题
+taro-text-core {
+	white-space: normal;
+}
+
+taro-video-core {
+	video {
+		object-fit: cover !important;
+	}
+
+	//标签选择不生效
+	taro-video-control {
+		background-color: transparent;
+	}
+
+	.taro-video-bar {
+		background-color: transparent;
+	}
+}
+
+.weui-icon-info {
+	&:before {
+		content: '';
+	}
+}
+.taro-checkbox_checked {
+	display: inline-block;
+	top: 0;
+	margin: -2px 10px 0 0;
+	width: 32px;
+	height: 32px;
+	font-size: 36px;
+	color: #333;
+	vertical-align: middle;
+	border-color: rgba(209, 209, 209, 0.8);
+	&:checked:before {
+		color: #e93b3d;
+	}
+}
+taro-radio-core {
+	&.weui-cells_checkbox {
+		.weui-check + .weui-icon-checked {
+			vertical-align: middle;
+			&:before {
+				margin-top: -4px;
+				font-size: 36px;
+				vertical-align: middle;
+			}
+		}
+		.weui-check:checked + .weui-icon-checked {
+			&:before {
+				color: #e93b3d;
+			}
+		}
+	}
+}
+
+
+.taro__toast {
+	transition: none !important;
+
+	div:last-child {
+		//background: transparent !important;
+
+		p {
+			&:first-child {
+				width: 80px !important;
+				height: 80px !important;
+			}
+
+			&:last-child {
+				margin-top: 8px !important;
+				font-size: 28px !important;
+			}
+		}
+	}
+}
+
+.d-shop-loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 100;
+
+	.d-loading-content {
+		text-align: center;
+	}
+	span {
+		display: inline-block;
+		width: 100px;
+		height: 100px;
+		background: url('https://img13.360buyimg.com/imagetools/jfs/t1/151010/32/14284/30214/5ff66791Ea1bc6cc6/698c0772b377aef5.png')
+			no-repeat center center / 72px 72px;
+	}
+	.d-shop-text {
+		font-size: 24px;
+		color: #232325;
+	}
+}
+
+//
+//.Yep-mask {
+//	position: fixed;
+//	z-index: 222;
+//	top: 0;
+//	right: 0;
+//	left: 0;
+//	bottom: 0;
+//	background: rgba(0, 0, 0, 0.65);
+//	height: 100%;
+//}
+//
+//.Yep-mask_transparent {
+//	position: fixed;
+//	z-index: 222;
+//	top: 0;
+//	right: 0;
+//	left: 0;
+//	bottom: 0;
+//	height: 100%;
+//}
+//
+//.Yep-popup {
+//	position: fixed;
+//	left: 0;
+//	right: 0;
+//	top: 0;
+//	bottom: 0;
+//	width: 100%;
+//	z-index: 222;
+//	overflow: auto;
+//	outline: 0;
+//}
+//
+//.Yep-dialog {
+//	position: relative;
+//
+//	&-transparent {
+//		width: 540px;
+//	}
+//
+//	&-content {
+//		position: relative;
+//		background-color: #ffffff;
+//		border: 0;
+//		text-align: center;
+//		height: 100%;
+//		overflow: hidden;
+//	}
+//
+//	&-transparent &-content {
+//		border-radius: 18px;
+//		padding-top: 30px;
+//	}
+//
+//	&-header {
+//		padding: 12px 30px 30px;
+//	}
+//
+//	&-title {
+//		margin: 0;
+//		font-size: 36px;
+//		line-height: 1;
+//		color: #000;
+//		text-align: center;
+//	}
+//
+//	&-body {
+//		font-size: 32px;
+//		color: #888;
+//		height: 100%;
+//		line-height: 1.5;
+//		overflow: auto;
+//	}
+//
+//	
+//	&-transparent &-content &-header + &-body {
+//		padding: 0 30px 30px;
+//	}
+//
+//	&-transparent &-content &-body {
+//		padding: 28px 30px 58px;
+//	}
+//
+//	&-wrap {
+//		display: flex;
+//		align-items: center;
+//		justify-content: center;
+//		position: fixed;
+//		top: 0;
+//		left: 0;
+//		bottom: 0;
+//		right: 0;
+//		z-index: 222;
+//	}
+//
+//	&-button-group-h {
+//		display: flex;
+//	}
+//
+//	&-button-group-h &-button {
+//		position: relative;
+//		flex: 1;
+//		box-sizing: border-box;
+//		text-align: center;
+//		text-decoration: none;
+//		outline: none;
+//		background-color: #2a83e1;
+//		color: #ffffff;
+//		font-size: 36px;
+//		height: 88px;
+//		line-height: 88px;
+//		display: block;
+//		width: auto;
+//		overflow: hidden;
+//		text-overflow: ellipsis;
+//		white-space: nowrap;
+//
+//		&:after {
+//			content: '';
+//			display: block;
+//			position: absolute;
+//			width: 100%;
+//			left: 0;
+//			top: 0;
+//			height: 1px;
+//			background-color: #dadada;
+//			-webkit-transform: scaleY(0.5);
+//			transform: scaleY(0.5);
+//			pointer-events: none;
+//		}
+//	}
+//
+//	&-button:first-child {
+//		background-color: #ffffff;
+//		color: #000000;
+//	}
+//}
+
+.fade-enter {
+	opacity: 0.01;
+}
+
+.fade-enter-active {
+	opacity: 1;
+	transition: all 300ms ease-out;
+}
+
+.fade-exit {
+	opacity: 1;
+}
+
+.fade-exit-active {
+	opacity: 0.01;
+	transition: all 300ms ease-out;
+}
+
+.zoom-enter {
+	opacity: 0.01;
+	transform: scale(0);
+}
+
+.zoom-enter-active {
+	opacity: 1;
+	transform: scale(1);
+	transition: all 300ms ease-out;
+}
+
+.zoom-exit {
+	opacity: 1;
+	transform: scale(1);
+}
+
+.zoom-exit-active {
+	opacity: 0.01;
+	transform: scale(0);
+	transition: all 300ms ease-out;
+}
+
+.slide-up-enter {
+	transform: translateY(100%);
+}
+
+.slide-up-enter-active {
+	transform: translateY(0%);
+	transition: all 300ms ease-out;
+}
+
+.slide-up-exit {
+	transform: translateY(0%);
+}
+
+.slide-up-exit-active {
+	transform: translateY(100%);
+	transition: all 300ms ease-in;
+}
+
+.slide-down-enter {
+	transform: translateY(-100%);
+}
+
+.slide-down-enter-active {
+	transform: translateY(0%);
+	transition: all 300ms ease-out;
+}
+
+.slide-down-exit {
+	transform: translateY(0%);
+}
+
+.slide-down-exit-active {
+	transform: translateY(-100%);
+	transition: all 300ms ease-in;
+}
+
+.slide-right-enter {
+	transform: translateX(100%);
+}
+
+.slide-right-enter-active {
+	transform: translateX(0%);
+	transition: all 300ms ease-out;
+}
+
+.slide-right-exit {
+	transform: translateX(0%);
+}
+
+.slide-right-exit-active {
+	transform: translateX(100%);
+	transition: all 300ms ease-in;
+}
+
+.slide-left-enter {
+	transform: translateX(-100%);
+}
+
+.slide-left-enter-active {
+	transform: translateX(0%);
+	transition: all 300ms ease-out;
+}
+
+.slide-left-exit {
+	transform: translateX(0%);
+}
+
+.slide-left-exit-active {
+	transform: translateX(-100%);
+	transition: all 300ms ease-in;
+}
+
+

package/dist/sass/app.scss

@@ -0,0 +1,21 @@
+
+page {
+	
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	-webkit-tap-highlight-color: transparent; 
+	outline: none;
+	// 京购小程序app有默认行高，这里反写回来，防止影响 和 h5保持一致
+	line-height: 1.15 !important;
+	background: #f2f2f2;
+	// 购物小程序在app.css中全局给page顶部加了一条边，可以使用以下方式覆盖：
+	&::before {
+		border-bottom: none;
+	}
+}
+@import './base';
+
+image {
+	display: block;
+	width: 100%;
+	height: 100%;
+}

package/dist/sass/base.scss

@@ -1,4 +1,53 @@
 
+ @font-face {
+	font-family: 'JDZhengHT-Bold';
+	//src: url(https://storage.360buyimg.com/jshopstorage/JDZhengHT-Bold.ttf) format('truetype');
+	src: url('https://wq.360buyimg.com/data/ppms/others/JDZH_Bold.ttf')
+		format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'JDZhengHT-Light';
+	//src: url(https://storage.360buyimg.com/jshopstorage/JDZhengHT-Light.ttf) format('truetype');
+	src: url('https://wq.360buyimg.com/data/ppms/others/JDZH_Light.ttf')
+		format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'JDZhengHT-Regular';
+	//src: url(https://storage.360buyimg.com/jshopstorage/JDZhengHT-Regular.ttf) format('truetype');
+	src: url('https://wq.360buyimg.com/data/ppms/others/JDZH_Regular.ttf')
+		format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'JDZhengHT-EN-Bold';
+	src: url('https://wq.360buyimg.com/data/ppms/others/JDZhengHei_01_Bold.ttf')
+		format('truetype');
+}
+
+.font-jdzht {
+	font-family: 'JDZhengHT-Regular';
+}
+
+.font-jdzht-bold {
+	font-family: 'JDZhengHT-Bold';
+}
+
+.font-jdzht-en-bold {
+	font-family: 'JDZhengHT-EN-Bold';
+}
+
+.font-jdzht-light {
+	font-family: 'JDZhengHT-Light';
+}
+
 
 .border-box {
 	box-sizing: border-box;
@@ -204,6 +253,24 @@
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: clip;
+	//display: -webkit-box;
+	//overflow: hidden;
+	//word-break: break-all;
+	//text-overflow: ellipsis;
+	//-webkit-line-clamp: 1;
+	//
+	//-webkit-box-orient: inherit;
+}
+
+.text-ellipsis-1-no-omit {
+	display: -webkit-box;
+	overflow: hidden;
+	word-break: break-all;
+	text-overflow: ellipsis;
+	-webkit-line-clamp: 1;
+	
+	// -webkit-box-orient: inherit;
+	-webkit-box-orient: vertical;
 }
 
 .text-ellipsis-2-no-omit {

package/dist/utils/MQ.ts

@@ -1 +1 @@
-interface Message {
    callback:Function
    time: number
    messages: Message[]
    timerId: number
    timeGap: number
    mqDelay: number
    constructor() {
        this.messages = []
        this.timerId = 0
        this.timeGap = 17 
        this.mqDelay = 50 
    }
    
    static getInstance() {
        if (window.top._mq == null) {
            window.top._mq = new MQ()
        }
        return window.top._mq
    }
    onTimer() {
        const nowTime = Date.now()
        let leftMsgList:Message[] = []
        const msgList = this.messages.filter((item:Message)=>{
            if(nowTime - item.time >= this.mqDelay){
                return true
            }
            else{
                leftMsgList.push(item)
                return false
            }
        })
        msgList.forEach((msg)=>{
            msg.callback()
        })
        this.messages = leftMsgList
        if(this.messages.length>0){
            this.timerId = 0
            this.starTimer()
        }
        else{
            this.stopTimer()
        }
    }
    starTimer() {
        if(this.timerId== 0){
            this.timerId = setTimeout(()=>{
                this.onTimer()
            }, this.timeGap)
        }
    }
    stopTimer() {
        if(this.timerId>0){
            clearTimeout(this.timerId)
        }
        this.timerId = 0
    }
    
    addCallBack(callback: Function) {
        if(callback){
            const msg: Message = {
                callback,
                time: Date.now()
            }
            this.messages.push(msg)
            this.starTimer()
        }
    }
    clear() {
        this.messages = []
        this.stopTimer()
    }
+interface Message {
    callback:Function
    time: number
    messages: Message[]
    timerId: number
    timeGap: number
    mqDelay: number
    constructor() {
        this.messages = []
        this.timerId = 0
        this.timeGap = 17 
        this.mqDelay = 50 
    }
    
    static getInstance() {
            _mq = new MQ()
        }
        return _mq
    }
    onTimer() {
        const nowTime = Date.now()
        let leftMsgList:Message[] = []
        const msgList = this.messages.filter((item:Message)=>{
            if(nowTime - item.time >= this.mqDelay){
                return true
            }
            else{
                leftMsgList.push(item)
                return false
            }
        })
        msgList.forEach((msg)=>{
            msg.callback()
        })
        this.messages = leftMsgList
        if(this.messages.length>0){
            this.timerId = 0
            this.starTimer()
        }
        else{
            this.stopTimer()
        }
    }
    starTimer() {
        if(this.timerId== 0){
            this.timerId = setTimeout(()=>{
                this.onTimer()
            }, this.timeGap)
        }
    }
    stopTimer() {
        if(this.timerId>0){
            clearTimeout(this.timerId)
        }
        this.timerId = 0
    }
    
    addCallBack(callback: Function) {
        if(callback){
            const msg: Message = {
                callback,
                time: Date.now()
            }
            this.messages.push(msg)
            this.starTimer()
        }
    }
    clear() {
        this.messages = []
        this.stopTimer()
    }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conecli/cone-render",
-  "version": "0.8.11-beta.0",
+  "version": "0.8.12",
   "private": false,
   "main": "dist/open/index.ts",
   "files": [
@@ -52,6 +52,7 @@
     "@tarojs/runtime": "3.4.3",
     "@tarojs/taro": "3.4.3",
     "art-template": "^4.13.2",
+    "normalize.css": "^8.0.1",
     "raf": "^3.4.1",
     "react": "^17.0.0",
     "react-content-loader": "^6.2.0",