商品详情页修改

@@ -6,20 +6,20 @@
     <view class='topContainer'>
         <product-banner image-list="{{productImages}}" product-name="{{productName}}"></product-banner>
     </view>
-    <view class="price-seperator"></view>
-    <view class="goodPrice">
-        <text class="realPrice">{{salesPrice != '0' ? salesPrice : marketPrice}}</text>
+    <view class="price-separator"></view>
+    <view class="good-price">
+        <text class="real-price">{{salesPrice != '0' ? salesPrice : marketPrice}}</text>
         <text class="price" wx:if="{{salesPrice != '0'}}">{{marketPrice}}</text>
-        <view class="goodShare">
-            <image class="shareIcon" src="../../../static/images/share-ic-dark@2x.png" bindtap="share"></image>
-            <button bindtap="share" class="shareButton"></button>
+        <view class="good-share">
+            <image class="share-icon" src="../../../static/images/share-ic-dark@2x.png" bindtap="share"></image>
+            <button bindtap="share" class="share-button"></button>
         </view>
     </view>
     <view class="gap"></view>
     <!-- 支持的服务 -->
-    <view class="supportService"
+    <view class="support-service"
           style="display: {{productSupportServiceList.length>0?'block':'none'}} ;flex-direction: row; display: flex;">
-        <view class="supportService-item" wx:for="{{productSupportServiceList}}" wx:key="supportService">
+        <view class="support-service-item" wx:for="{{productSupportServiceList}}" wx:key="support-service">
             <text wx:if="{{item.flag == 1}}" class="iconfont icon-duihao-fill"></text>
             <text wx:else class="iconfont icon-warn-fill unsupport-icon"></text>
             <text class="support-service-title">{{item.title}}</text>
@@ -35,7 +35,7 @@
     </view>
     
     <view class="gap"></view>
-    <view class="goodsInfo" style="display:{{productDesc.length>0?'block':'none'}}">
+    <view class="goods-info" style="display:{{productDesc.length>0?'block':'none'}}">
         <view class="module-title">
             <text class="text">商品信息 <text class="sub-text">DESCRIPTION</text></text>
         </view>
@@ -45,11 +45,11 @@
                 <view class="td">{{productDesc[index*2+1]}}</view>
             </view>
         </view>
-        <view wx:if="{{productPhrare}}" class="goodsInfoPhrare">
-            <text class="lightGrayFont">{{productPhrare}}</text>
+        <view wx:if="{{productPhrare}}" class="goods-info-phrare">
+            <text class="light-gray-font">{{productPhrare}}</text>
         </view>
     </view>
-    <view class="goodsInfo" style="display:{{productSizeContent.length>0?'block':'none'}}">
+    <view class="goods-info" style="display:{{productSizeContent.length>0?'block':'none'}}">
         <view class="module-title">
             <text class="text">尺码信息 <text class="sub-text">INFORMATION</text></text>
         </view>
@@ -63,30 +63,30 @@
         </scroll-view>
     </view>
 
-    <view class="goodsInfo" style="display:{{productMeasurementImage?'block':'none'}}">
+    <view class="goods-info" style="display:{{productMeasurementImage?'block':'none'}}">
         <view class="module-title">
             <text class="text">测量信息 <text class="sub-text">DESCRIPTION</text></text>
         </view>
         <image src="{{productMeasurementImage}}" mode="widthFix"></image>
     </view>
-    <view class="goodsInfo" style="display:{{productMaterialList[0].remark?'block':'none'}}">
+    <view class="goods-info" style="display:{{productMaterialList[0].remark?'block':'none'}}">
         <view class="module-title">
             <text class="text">商品材质 <text class="sub-text">DESCRIPTION</text></text>
         </view>
-        <view class="goodsInfoDescription">
-            <text class="lightGrayFont">{{productMaterialList[0].remark}}</text>
+        <view class="info-description">
+            <text class="light-gray-font">{{productMaterialList[0].remark}}</text>
         </view>
-        <view class="goodsTexture" wx:for="{{productWashTipsBoList}}" wx:key="unique">
+        <view class="goods-texture" wx:for="{{productWashTipsBoList}}" wx:key="unique">
             <view class="texture">
                 <image class="img" src= "{{item.img}}" mode="widthFix"/>
                 <view class="desc">
-                    <text class="lightGrayFont">{{item.caption}}</text>
+                    <text class="light-gray-font">{{item.caption}}</text>
                 </view>
             </view>
         </view>
     </view>
 
-    <view class="goodsInfo img" style="display:{{productIntroImageList.length>0?'block':'none'}}">
+    <view class="goods-info img" style="display:{{productIntroImageList.length>0?'block':'none'}}">
         <view class="module-title">
             <text class="text">商品详情 <text class="sub-text">DESCRIPTION</text></text>
         </view>
@@ -96,9 +96,9 @@
     </view>
     <block wx:if="{{shopRecList.length}}">
         <view class="gap"></view>
-        <view class='titleContainer'>
-            <view class='titleLine'></view>
-            <view class='titleDesc'> 店铺推荐商品</view>
+        <view class='title-container'>
+            <view class='title-line'></view>
+            <view class='title-desc'> 店铺推荐商品</view>
         </view>
         <view class="product-list shop-rec">
             <product-list list="{{shopRecList}}"></product-list>
@@ -106,9 +106,9 @@
     </block>
     <block wx:if="{{preferList.length}}">
         <view class="gap"></view>
-        <view class='titleContainer'>
-            <view class='titleLine'></view>
-            <view class='titleDesc'> 你可能喜欢</view>
+        <view class='title-container'>
+            <view class='title-line'></view>
+            <view class='title-desc'> 你可能喜欢</view>
         </view>
         <view class="product-list prefer">
             <product-list list="{{preferList}}"></product-list>

-/* stylelint-disable */
 @import "./picker/picker.wxss";
 
 .detail-container {
   padding-bottom: 100rpx;
 }
 
-.swiper-box{
-  width:100%;
-  height:800rpx;
-}
-
-.swiper-box .slide-image{
-  width:100%;
-  height:100%;
-  display: inline-block;
-  overflow: hidden;
-}
-
-.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
-  margin-bottom: 110rpx;
-  padding-left: 15rpx;
-  padding-right: 10rpx;
-  padding-top: 5rpx;
-  padding-bottom: 5rpx;
-  border-radius: 40rpx;
-  background-color: rgba(0,0,0,0.2);
-}
-
-.swiper-box .wx-swiper-dot{
-  width:10rpx;
-  display: inline-flex;
-  height: 10rpx;
-  margin-left: -5rpx;
-  justify-content:space-between;
-}
-
-.goodTitle{
-  /* width: 100%; */
-  position: absolute;
-  bottom: 0rpx;
-  right: 0rpx;
-  left: 0rpx;
-  background: rgba(0,0,0,0.8);
-  align-items: center;
-  padding: 15rpx 30rpx;
-  min-height: 50rpx;
-}
-
-.goodTitle .title{
-  font-size: 28rpx;
-  color: white;
-}
-
-.advanceTitleView{
-  display: flex;
-  margin: 15rpx;
-  width: 100%;
-  height: 45rpx;
-  align-items: center;
-}
-
-.advanceTitleView .advanceTitle{
-  font-size: 28rpx;
-  color: #000;
-  text-align: left;
-  padding-left: 15rpx;
-  white-space: nowrap;
-  text-overflow:ellipsis;
-  overflow: hidden;
-}
-
-.advanceTimeView{
-  margin: 15rpx;
-  display: flex;
-  width: 100%;
-  height: 65rpx;
-  align-items: center;
-}
-
-.advanceTimeView .advanceTime{
-  font-size: 28rpx;
-  color: #000;
-  text-align: left;
-  padding-left: 15rpx;
-}
-
-
-.goodPrice{
+.good-price {
   margin: 15rpx;
   height: 70rpx;
   display: flex;
-  flex-direction:row;
+  flex-direction: row;
 }
 
-.goodPrice .realPrice{
-  font-family: PingFang-SC-Medium;
+.good-price .real-price {
+  font-family: PingFang-SC-Medium, sans-serif;
   letter-spacing: -0.44rpx;
   color: #d0021b;
   line-height: 70rpx;
@@ -104,7 +22,7 @@
   font-weight: bold;
 }
 
-.goodPrice .price{
+.good-price .price {
   margin-left: 0rpx;
   color: #b0b0b0;
   padding-left: 20rpx;
@@ -114,27 +32,23 @@
   padding-top: 3rpx;
 }
 
-.normalPrice{
-  padding-left: 15rpx;
-}
-
-.goodShare{
-  flex:4;
+.good-share {
+  flex: 4;
   line-height: 70rpx;
   text-align: right;
   display: flex;
-  flex-direction:row;
+  flex-direction: row;
   justify-content: flex-end;
 }
 
-.shareIcon{
+.share-icon {
   padding-top: 15rpx;
-  width:42rpx;
-  height:42rpx;
+  width: 42rpx;
+  height: 42rpx;
   margin-right: 20rpx;
 }
 
-.shareButton{
+.share-button {
   background-color: red;
   margin-right: 35rpx;
   width: 100rpx;
@@ -144,34 +58,34 @@
   top: 830rpx;
 }
 
-.vip-price-item{
+.vip-price-item {
   display: flex;
   flex-direction: row;
   flex: 1;
   padding-left: 15rpx;
 }
 
-.vip-price-image{
+.vip-price-image {
   width: 50rpx;
   height: 30rpx;
   align-items: center;
 }
 
-.vip-price-title{
+.vip-price-title {
   color: #b0b0b0;
   padding-left: 20rpx;
   font-size: 28rpx;
   align-items: center;
 }
 
-.promotion{
+.promotion {
   vertical-align: center;
   padding-left: 30rpx;
   display: flex;
   align-items: center;
 }
 
-.promotion-item{
+.promotion-item {
   vertical-align: center;
   display: flex;
   flex-direction: row;
@@ -181,7 +95,7 @@
   width: 100%;
 }
 
-.promotion-title{
+.promotion-title {
   color: #444;
   font-size: 14px;
   padding-left: 10rpx;
@@ -190,9 +104,9 @@
   align-items: center;
 }
 
-.promotion-item-left{
-  padding-left:10rpx;
-  padding-right:10rpx;
+.promotion-item-left {
+  padding-left: 10rpx;
+  padding-right: 10rpx;
   color: #ff575c;
   font-size: 25rpx;
   height: 32rpx;
@@ -201,7 +115,7 @@
   align-items: center;
 }
 
-.promotion-item-border{
+.promotion-item-border {
   height: 14px;
   border-radius: 5rpx;
   border: solid 2rpx #ff575c;
@@ -211,7 +125,7 @@
   align-items: center;
 }
 
-.promotion-title-item{
+.promotion-title-item {
   color: #ff575c;
   font-size: 9px;
   line-height: 12px;
@@ -220,21 +134,21 @@
   justify-content: center;
 }
 
-.promotion-item-seperator{
-  height:1rpx;
+.promotion-item-seperator {
+  height: 1rpx;
   transform: scaleY(0.5);
-  background:#e0e0e0;
-  width:100%;
-  padding-left:20rpx;
+  background-color: #e0e0e0;
+  width: 100%;
+  padding-left: 20rpx;
 }
 
-.promotion-detail{
+.promotion-detail {
   flex-direction: row;
   display: flex;
   padding-top: 20rpx;
 }
 
-.promotion-tips-title{
+.promotion-tips-title {
   color: #b0b0b0;
   font-size: 25rpx;
   vertical-align: center;
@@ -246,66 +160,66 @@
   width: 100%;
 }
 
-.promotion-detail-title{
+.promotion-detail-title {
   color: #444;
   font-size: 12px;
   padding-left: 10rpx;
   padding-right: 15rpx;
 }
 
-.promotion-detail-date{
+.promotion-detail-date {
   color: #b0b0b0;
   font-size: 9px;
   padding-bottom: 20rpx;
   margin-left: 10rpx;
 }
 
-.promotion-seperator{
+.promotion-seperator {
   margin-top: 20rpx;
   margin-bottom: 20rpx;
   padding-left: 100rpx;
-  height:10rpx;
-  background:rgb(238, 238, 238);
+  height: 10rpx;
+  background: rgb(238, 238, 238);
 }
 
-.support-service-image{
+.support-service-image {
   width: 30rpx;
   height: 30rpx;
 }
 
-.supportService{
+.support-service {
   flex-wrap: wrap;
   height: 44px;
 }
 
-.supportService-item{
+.support-service-item {
   display: flex;
   align-items: center;
   flex-direction: row;
 }
 
-.supportService-item .iconfont {
+.support-service-item .iconfont {
   color: #fb686e;
   font-size: 32rpx;
   margin-left: 60rpx;
   margin-right: 2rpx;
 }
 
-.supportService-item .iconfont:first-child {
+.support-service-item .iconfont:first-child {
   margin-left: 30rpx;
 }
 
-.supportService-item .unsupport-icon {
+.support-service-item .unsupport-icon {
   color: #b0b0b0;
 }
 
-.support-service-title{
+.support-service-title {
   color: #444;
   font-size: 12px;
   padding-left: 5px;
 }
 
-.support-service-arrow{
+.support-service-arrow {
   width: 20rpx;
   height: 12rpx;
   margin-right: 20rpx;
@@ -323,7 +237,7 @@
   font-size: 32rpx;
   margin-left: 20rpx;
   line-height: 60rpx;
-  vertical-align:top;
+  vertical-align: top;
 }
 
 .row-shop-brief .shop-nav {
@@ -334,7 +248,7 @@
   font-size: 28rpx;
   margin-left: 20rpx;
   line-height: 60rpx;
-  vertical-align:top;
+  vertical-align: top;
 }
 
 .row-shop-brief .shop-nav-arrow {
@@ -345,7 +259,7 @@
   font-size: 40rpx;
   line-height: 60rpx;
   margin-right: -10rpx;
-  vertical-align:top;
+  vertical-align: top;
 }
 
 .row-shop-brief .shop-icon {
@@ -353,69 +267,35 @@
   height: 60rpx;
 }
 
-.goodsInfo{
+.goods-info {
   margin: 0 30rpx;
 }
 
-.title{
+.title {
   font-size: 30rpx;
   font-weight: bold;
   color: #444;
 }
 
-.phoneBtnTitle{
-  font-size: 30rpx;
-  font-weight: bold;
-  color: white;
-}
-
-.subtitle{
-  padding: 10rpx;
-  font-size: 25rpx;
-  color: #444;
-}
-
-.tipView{
-  width:100%;
-  height:30rpx;
-  background:rgb(238, 238, 238);
-  text-align: center;
-  justify-content: center;
-}
-
-.tipText{
-  line-height: 100rpx;
-  font-size: 25rpx;
-  color: lightgrey;
-}
-
-.seperator {
-  width:100%;
-  height:1rpx;
-  transform: scaleY(0.5);
-  background:#e0e0e0;
-  margin: 15rpx 0 15rpx 0;
-}
-
-.price-seperator {
-  width:100%;
-  height:1rpx;
-  background:#e0e0e0;
+.price-separator {
+  width: 100%;
+  height: 1rpx;
+  background-color: #e0e0e0;
   transform: scaleY(0.5);
 }
 
-.gap{
-  width:100%;
-  height:20rpx;
-  background:#f0f0f0;
+.gap {
+  width: 100%;
+  height: 20rpx;
+  background-color: #f0f0f0;
 }
 
-.service-image{
+.service-image {
   margin: 20rpx;
 }
 
 .table {
-  border:1px solid #fff;
+  border: 1px solid #fff;
   border-right: 0;
   border-bottom: 0;
   width: 100%;
@@ -428,27 +308,28 @@
   justify-content: space-between;
 }
 
-.tr .td,.th {
+.tr .td,
+.th {
   padding: 10px;
   border-bottom: 1px solid #fff;
   border-right: 1px solid #fff;
   text-align: left;
   font-size: 25rpx;
-  width:100%
+  width: 100%;
 }
 
-.th{
+.th {
   display: flex;
   font-weight: 400;
   background-color: #f0f0f0;
   justify-content: space-between;
 }
 
-.goodsInfoDescription{
-  padding:0 20rpx 20rpx
+.info-description {
+  padding: 0 20rpx 20rpx;
 }
 
-.goodsInfoPhrare {
+.goods-info-phrare {
   background-color: #f0f0f0;
   padding-top: 10rpx;
   padding-bottom: 10rpx;
@@ -456,41 +337,33 @@
   padding-right: 10rpx;
 }
 
-.goodsTexture {
+.goods-texture {
   display: inline-block;
 }
 
-.goodsTexture .texture{
+.goods-texture .texture {
   white-space: wrap;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0 20rpx 20rpx 20rpx;
-
 }
 
-.goodsTexture .texture .img{
+.goods-texture .texture .img {
   width: 50rpx;
   height: 50rpx;
 }
 
-.goodsTexture .texture .desc{
+.goods-texture .texture .desc {
   width: 100rpx;
 }
 
-.largeGrayFont{
-  font-size: 34rpx;
-  color: #444
-}
-
-.lightGrayFont{
+.light-gray-font {
   font-size: 24rpx;
-  color: #444
+  color: #444;
 }
 
-
-
-.button{
+.button {
   position: fixed;
   width: 100%;
   height: 100rpx;
@@ -549,7 +422,7 @@
 }
 
 .fixed-bottom-actions .txt-action.add {
-  background-color: #444444;
+  background-color: #444;
 }
 
 .fixed-bottom-actions .txt-action.add .add-btn {
@@ -561,7 +434,7 @@
 }
 
 .fixed-bottom-actions .txt-action.buy {
-  margin-left:3rpx;
+  margin-left: 3rpx;
   background-color: #d0021b;
 }
 
@@ -574,7 +447,7 @@
 }
 
 .fixed-bottom-actions .txt-action.disabled {
-  background-color: #999999;
+  background-color: #999;
 }
 
 .fixed-bottom-actions .invalid-tip {
@@ -601,33 +474,30 @@
   left: 0;
   right: 0;
   height: 70rpx;
-  color: #ffffff;
+  color: #fff;
   font-size: 28rpx;
   text-align: center;
   line-height: 70rpx;
 }
 
-.shoppint-like-icon{
+.shoppint-like-icon {
   position: relative;
   width: 44rpx;
   background-color: #fff;
   vertical-align: center;
   justify-content: center;
   text-align: center;
-  padding-right: 28rpx
+  padding-right: 28rpx;
 }
 
-
-.not-for-sale{
+.not-for-sale {
   flex: 1;
   vertical-align: center;
   justify-content: center;
   text-align: center;
 }
 
-
-
-.bottom-title{
+.bottom-title {
   color: white;
   font-size: 34rpx;
   width: 100%;
@@ -637,7 +507,7 @@
   line-height: 100rpx;
 }
 
-.button .title{
+.button .title {
   position: absolute;
   color: white;
   font-size: 34rpx;
@@ -648,182 +518,6 @@
   bottom: 0;
 }
 
-.evaluateTitle {
-  font-family: PingFang-SC-Regular;
-  font-size: 28rpx;
-  color: #444;
-}
-
-.cellLine {
-  height: 1rpx;
-  transform: scaleY(0.5);
-  background-color: #e0e0e0;
-}
-
-.evaluateLis-item-view {
-  padding: 20rpx 30rpx;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex: 1
-}
-
-.evaluateLis-item-head {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1
-}
-
-.evaluateLis-item-ico {
-  width: 60rpx;
-  height: 60rpx;
-  border-radius:50%
-}
-
-.evaluateLis-item-name {
-  font-family: PingFang-SC-Medium;
-  font-size: 28rpx;
-  color: #444;
-  letter-spacing: -0.34px;
-  margin-left: 20rpx
-}
-
-.evaluateLis-item-level {
-  width: 58rpx;
-  height: 38rpx;
-  margin-left: 10rpx
-}
-
-.evaluateLis-item-head-right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.evaluateLis-item-start {
-  width: 26rpx;
-  height: 26rpx;
-  margin-right: 4rpx;
-}
-
-.evaluateLis-item-size{
-  font-family: PingFang-SC-Semibold;
-  font-size: 24rpx;
-  color: #444;
-  letter-spacing: -0.29px;
-  margin-left: 6rpx;
-}
-
-.evaluateLis-item-content-view{
-  margin: 0rpx 30rpx;
-  display: flex;
-  align-items: center;
-}
-
-.evaluateLis-item-content{
-  font-family: PingFang-SC-Regular;
-  font-size: 28rpx;
-  color: #444;
-  letter-spacing: -0.34px;
-  line-height: 44rpx;
-}
-
-.evaluateLis-item-img-view{
-  margin:0rpx 30rpx;
-  display: flex;
-  align-items: center;
-}
-
-.evaluateLis-item-img{
-  width: 164rpx;
-  height: 164rpx;
-  margin-top: 20rpx;
-}
-
-.evaluateLis-item-time-view{
-  margin: 26rpx 30rpx 0rpx;
-  display: flex;
-  align-items: center;
-}
-
-.evaluateLis-item-time{
-  font-family: PingFang-SC-Regular;
-  font-size: 24rpx;
-  color: #b0b0b0;
-  letter-spacing: -0.29px;
-  margin-right:10rpx;
-}
-
-.evaluateLis-more-view {
-  padding: 40rpx;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center
-}
-
-.evaluateLis-more {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background: #f0f0f0;
-  border-radius: 31px;
-  padding: 10rpx 30rpx
-}
-
-.evaluateLis-title-more {
-  font-family: PingFang-SC-Regular;
-  font-size: 28rpx;
-  color: #444;
-}
-
-.evaluateLis-arrow-more {
-  width: 16rpx;
-  height: 26rpx;
-  margin-left: 4rpx
-}
-
-.shopRecommond {
-  margin: 30rpx 0rpx 60rpx 0rpx;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: white;
-}
-
-.blackVerticalLine {
-  background: #444;
-  width: 3px;
-  height: 15px;
-  margin-left: 36rpx;
-  margin-right: 20rpx;
-}
-
-.blackLineTitleContainer {
-  display: flex;
-  flex-direction: row;
-  height: 22px;
-  margin-top: 11px;
-  align-items: center;
-}
-
-.blackLineRightTitle {
-  font-size: 16px;
-  color: #444;
-  font-weight: bold;
-  line-height: 20rpx;
-}
-
-.blackLineSeperator {
-  width:100%;
-  height:1rpx;
-  background: #e0e0e0;
-  margin-top: 11px;
-  transform: scaleY(0.5);
-}
-
 .bottom-action {
   position: fixed;
   bottom: 0;
@@ -854,8 +548,8 @@
 }
 
 .module-title .text {
+  font-family: PingFang-SC-Medium, sans-serif;
   position: relative;
-  font-family: PingFang-SC-Medium;
   font-size: 28rpx;
   color: #444;
   letter-spacing: -0.33rpx;
@@ -880,38 +574,37 @@
   content: "";
   height: 2rpx;
   width: 100rpx;
-  background-color: #444;                               
+  background-color: #444;
 }
 
-
 .module-title .sub-text {
-  font-family: PingFang-SC-Medium;
+  font-family: PingFang-SC-Medium, sans-serif;
   font-size: 18rpx;
   color: #000;
   letter-spacing: -0.33px;
   line-height: 20rpx;
 }
 
-.titleContainer{
+.title-container {
   background-color: white;
   border-bottom: 0.5rpx solid #e0e0e0;
   display: flex;
   flex-direction: row;
   height: 80rpx;
-  align-items:center;
+  align-items: center;
 }
 
-.titleLine{
+.title-line {
   width: 4rpx;
   height: 30rpx;
   background-color: #444;
   margin-left: 30rpx;
 }
 
-.titleDesc{
+.title-desc {
   flex: 1;
   text-align: left;
-  font-family: PingFang SC;
+  font-family: PingFang SC, sans-serif;
   font-size: 30rpx;
   margin-left: 16rpx;
   color: #222;
@@ -922,14 +615,12 @@
   margin-bottom: 30rpx;
 }
 
-.goodsInfo.img {
+.goods-info.img {
   font-size: 0;
 }
 
-
 .product-list.shop-rec {
   padding-bottom: 60rpx;
-
 }
 
 .product-list.prefer {