@conecli/cone-render 0.9.1-shop2.4 → 0.9.1-shop2.40

package/dist/sass/app.h5.scss

@@ -5,28 +5,27 @@
 
 
 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%;
+  
+  //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);
+  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,
@@ -67,38 +66,38 @@ 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;
+  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;
+  -webkit-touch-callout: none;
 }
 
 
 .user-ban-select {
-	user-select: none;
+  user-select: none;
 }
 
 .user-can-select {
-	user-select: auto;
+  user-select: auto;
 }
 
 
 input[type='number']::-webkit-outer-spin-button,
 input[type='number']::-webkit-inner-spin-button {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 
@@ -107,98 +106,103 @@ button,
 select,
 textarea,
 a {
-	-webkit-appearance: none !important;
+  -webkit-appearance: none !important;
 }
 
 a,
 a:active {
-	outline: none;
-	text-decoration: none;
+  outline: none;
+  text-decoration: none;
 }
 
 textarea {
-	resize: none;
+  resize: none;
 }
 
 input,
 button,
 textarea,
 a {
-	border: none;
+  border: none;
 }
 
 .clearFix {
-	zoom: 1;
-	display: block;
-	_height: 1px;
+  zoom: 1;
+  display: block;
+  _height: 1px;
 }
 
 .clearFix:after {
-	content: '.';
-	display: block;
-	height: 0;
-	clear: both;
-	visibility: hidden;
+  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; 
+  pointer-events: none;
+  
+  //transform: perspective(1px) translate3d(0, 0, 0);
+  //-webkit-backface-visibility: hidden; 
+  //-webkit-transform-style: preserve-3d; 
+  // 图片加载过慢，在可视化区域等可能导致线出现裂图，然后加载正常url，这里如果是没有src就隐藏
+  &[src=''],
+  &:not([src]) {
+    opacity: 0;
+  }
 }
 
 .clearFlow {
-	overflow: hidden;
-	*zoom: 1;
+  overflow: hidden;
+  *zoom: 1;
 }
 
 
 ul li {
-	list-style-type: none;
+  list-style-type: none;
 }
 
 .ul-li-float li {
-	float: left;
+  float: left;
 }
 
 
 .opacity-0 {
-	opacity: 0;
-	filter: alpha(opacity=0);
-	*zoom: 1;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  *zoom: 1;
 }
 
 .opacity-20 {
-	opacity: 0.2;
-	filter: alpha(opacity=20);
-	*zoom: 1;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+  *zoom: 1;
 }
 
 .opacity-50 {
-	opacity: 0.5;
-	filter: alpha(opacity=50);
-	*zoom: 1;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  *zoom: 1;
 }
 
 .opacity-60 {
-	opacity: 0.6;
-	filter: alpha(opacity=60);
-	*zoom: 1;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  *zoom: 1;
 }
 
 .opacity-80 {
-	opacity: 0.8;
-	filter: alpha(opacity=80);
-	*zoom: 1;
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+  *zoom: 1;
 }
 
 .opacity-100 {
-	opacity: 1;
-	filter: alpha(opacity=100);
-	*zoom: 1;
+  opacity: 1;
+  filter: alpha(opacity=100);
+  *zoom: 1;
 }
 
 
@@ -209,260 +213,303 @@ ul li {
 }
 
 .d-ios-force-border-radius {
-	transform: translateZ(0);
-	mask-image: radial-gradient(circle, white 100%, black 100%);
+  transform: translateZ(0);
+  mask-image: radial-gradient(circle, white 100%, black 100%);
 }
 //反写taro转小程序样式
 .hydrated {
-	visibility: visible;
+  visibility: visible;
 }
 
 // 视频封面全屏铺满
 video {
-	object-fit: cover;
+  object-fit: cover;
 }
 
 .d-video-forbid-fullscreen-button {
-	&::-webkit-media-controls-fullscreen-button {
-		display: none !important;
-	}
+  &::-webkit-media-controls-fullscreen-button {
+    display: none !important;
+  }
+}
+
+// tarojs会在运行时动态给页面写入这个样式，但是动态写入可能导致在写入之前，有些依赖于 taro-view-core 块行为的逻辑出现异常，比如获取一个view的宽度，block情况下应该是有宽度的，但可能会出现获取到的宽度值是0。所以改成样式表里就直接定义好
+taro-view-core {
+  display: block;
 }
 
 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;
+  
+  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; 
+  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;
+  white-space: normal;
 }
 
 taro-video-core {
-	video {
-		object-fit: cover !important;
-	}
+  video {
+    object-fit: cover !important;
+  }
 
-	//标签选择不生效
-	taro-video-control {
-		background-color: transparent;
-	}
+  //标签选择不生效
+  taro-video-control {
+    background-color: transparent;
+  }
 
-	.taro-video-bar {
-		background-color: transparent;
-	}
+  .taro-video-bar {
+    background-color: transparent;
+  }
 }
 
 .weui-icon-info {
-	&:before {
-		content: '';
-	}
+  &: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;
-	}
+  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;
-			}
-		}
-	}
+  &.weui-cells_checkbox {
+    .weui-check + .weui-icon-checked {
+      vertical-align: middle;
+      &:before {
+        content: '';
+        width: 32px;
+        height: 32px;
+        margin-left: 0;
+        margin-top: -4px;
+        border: 2px solid #909090;
+        //color: #909090;
+        //background: url("https://img12.360buyimg.com/imagetools/jfs/t1/206105/34/32968/504/64d35614F8cedb83b/d5953c21e17d17ae.png") no-repeat 0 0 / cover;
+        border-radius: 50%;
+        box-sizing: border-box;
+        vertical-align: middle;
+      }
+    }
+    .weui-check:checked + .weui-icon-checked {
+      &:before {
+        content: '';
+        border: none;
+        background: url('https://img12.360buyimg.com/imagetools/jfs/t1/190964/36/36148/636/64d35614Fd3f012fd/28a6f01faddaedbb.png')
+          no-repeat 0 0 / cover;
+      }
+    }
+  }
+}
+taro-checkbox-core {
+  .taro-checkbox_checked {
+    border: 2px solid #909090;
+    //background: url("https://img12.360buyimg.com/imagetools/jfs/t1/206105/34/32968/504/64d35614F8cedb83b/d5953c21e17d17ae.png") no-repeat 0 0 / cover;
+    border-radius: 50%;
+    box-sizing: border-box;
+    &:checked {
+      border: none;
+      background: url('https://img12.360buyimg.com/imagetools/jfs/t1/190964/36/36148/636/64d35614Fd3f012fd/28a6f01faddaedbb.png')
+        no-repeat 0 0 / cover;
+      &:before {
+        content: none;
+      }
+    }
+  }
+}
+.weui-picker {
+  font-size: 30px;
+  .weui-picker__hd {
+    font-size: 32px;
+  }
+  .weui-picker__action {
+    color: #fa2c19;
+    &:first-child {
+      color: #1a1a1a;
+    }
+  }
 }
 
-
 .taro__toast {
-	transition: none !important;
+  transition: none !important;
 
-	div:last-child {
-		//background: transparent !important;
+  div:last-child {
+    //background: transparent !important;
 
-		p {
-			&:first-child {
-				width: 80px !important;
-				height: 80px !important;
-			}
+    p {
+      &:first-child {
+        width: 80px !important;
+        height: 80px !important;
+      }
 
-			&:last-child {
-				margin-top: 8px !important;
-				font-size: 28px !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;
-	}
+  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;
+  }
 }
 
 .fade-enter {
-	opacity: 0.01;
+  opacity: 0.01;
 }
 
 .fade-enter-active {
-	opacity: 1;
-	transition: all 300ms ease-out;
+  opacity: 1;
+  transition: all 300ms ease-out;
 }
 
 .fade-exit {
-	opacity: 1;
+  opacity: 1;
 }
 
 .fade-exit-active {
-	opacity: 0.01;
-	transition: all 300ms ease-out;
+  opacity: 0.01;
+  transition: all 300ms ease-out;
 }
 
 .zoom-enter {
-	opacity: 0.01;
-	transform: scale(0);
+  opacity: 0.01;
+  transform: scale(0);
 }
 
 .zoom-enter-active {
-	opacity: 1;
-	transform: scale(1);
-	transition: all 300ms ease-out;
+  opacity: 1;
+  transform: scale(1);
+  transition: all 300ms ease-out;
 }
 
 .zoom-exit {
-	opacity: 1;
-	transform: scale(1);
+  opacity: 1;
+  transform: scale(1);
 }
 
 .zoom-exit-active {
-	opacity: 0.01;
-	transform: scale(0);
-	transition: all 300ms ease-out;
+  opacity: 0.01;
+  transform: scale(0);
+  transition: all 300ms ease-out;
 }
 
 .slide-up-enter {
-	transform: translateY(100%);
+  transform: translateY(100%);
 }
 
 .slide-up-enter-active {
-	transform: translateY(0%);
-	transition: all 300ms ease-out;
+  transform: translateY(0%);
+  transition: all 300ms ease-out;
 }
 
 .slide-up-exit {
-	transform: translateY(0%);
+  transform: translateY(0%);
 }
 
 .slide-up-exit-active {
-	transform: translateY(100%);
-	transition: all 300ms ease-in;
+  transform: translateY(100%);
+  transition: all 300ms ease-in;
 }
 
 .slide-down-enter {
-	transform: translateY(-100%);
+  transform: translateY(-100%);
 }
 
 .slide-down-enter-active {
-	transform: translateY(0%);
-	transition: all 300ms ease-out;
+  transform: translateY(0%);
+  transition: all 300ms ease-out;
 }
 
 .slide-down-exit {
-	transform: translateY(0%);
+  transform: translateY(0%);
 }
 
 .slide-down-exit-active {
-	transform: translateY(-100%);
-	transition: all 300ms ease-in;
+  transform: translateY(-100%);
+  transition: all 300ms ease-in;
 }
 
 .slide-right-enter {
-	transform: translateX(100%);
+  transform: translateX(100%);
 }
 
 .slide-right-enter-active {
-	transform: translateX(0%);
-	transition: all 300ms ease-out;
+  transform: translateX(0%);
+  transition: all 300ms ease-out;
 }
 
 .slide-right-exit {
-	transform: translateX(0%);
+  transform: translateX(0%);
 }
 
 .slide-right-exit-active {
-	transform: translateX(100%);
-	transition: all 300ms ease-in;
+  transform: translateX(100%);
+  transition: all 300ms ease-in;
 }
 
 .slide-left-enter {
-	transform: translateX(-100%);
+  transform: translateX(-100%);
 }
 
 .slide-left-enter-active {
-	transform: translateX(0%);
-	transition: all 300ms ease-out;
+  transform: translateX(0%);
+  transition: all 300ms ease-out;
 }
 
 .slide-left-exit {
-	transform: translateX(0%);
+  transform: translateX(0%);
 }
 
 .slide-left-exit-active {
-	transform: translateX(-100%);
-	transition: all 300ms ease-in;
+  transform: translateX(-100%);
+  transition: all 300ms ease-in;
 }
 
 
@@ -473,3 +520,18 @@ taro-radio-core {
   //image-rendering: crisp-edges;
   //-ms-interpolation-mode: nearest-neighbor;
 }
+
+@media screen and (orientation: landscape) {
+  // not 在chrome88之后才支持，因此暂时不用此方式
+  .d-shop-pad {
+    &.d-shop-pad-render-center {
+      //width: 100vh;
+      width: var(--screen-min-width, 100vh);
+      margin: 0 auto;
+    }
+    .d-pad-part-render-center{
+      width: var(--screen-min-width, 100vh);
+      margin: 0 auto;
+    }
+  }
+}