feat 修改加入购物车规格选择样式

pages/goods/goods.js

@@ -212,53 +212,40 @@ Page({
   switchAttrPop: function () {
     if (this.data.openAttr == false) {
       this.setData({
-        openAttr: !this.data.openAttr,
-        collectBackImage: "/static/images/detail_back.png"
+        openAttr: !this.data.openAttr
       });
     }
   },
-  closeAttrOrCollect: function () {
+  closeAttr: function () {
+    this.setData({
+      openAttr: false,
+    });
+  },
+  addCannelCollect: function () {
     let that = this;
-    if (this.data.openAttr) {
-      this.setData({
-        openAttr: false,
-      });
-      if (that.data.userHasCollect == 1) {
-        that.setData({
-          'collectBackImage': that.data.hasCollectImage
-        });
-      } else {
-        that.setData({
-          'collectBackImage': that.data.noCollectImage
-        });
-      }
-    } else {
-      //添加或是取消收藏
-      util.request(api.CollectAddOrDelete, { typeId: 0, valueId: this.data.id }, "POST")
-        .then(function (res) {
-          let _res = res;
-          if (_res.errno == 0) {
-            if ( _res.data.type == 'add') {
-              that.setData({
-                'collectBackImage': that.data.hasCollectImage
-              });
-            } else {
-              that.setData({
-                'collectBackImage': that.data.noCollectImage
-              });
-            }
-
+    //添加或是取消收藏
+    util.request(api.CollectAddOrDelete, { typeId: 0, valueId: this.data.id }, "POST")
+      .then(function (res) {
+        let _res = res;
+        if (_res.errno == 0) {
+          if (_res.data.type == 'add') {
+            that.setData({
+              'collectBackImage': that.data.hasCollectImage
+            });
           } else {
-            wx.showToast({
-              image: '/static/images/icon_error.png',
-              title: _res.errmsg,
-              mask: true
+            that.setData({
+              'collectBackImage': that.data.noCollectImage
             });
           }
 
-        });
-    }
-
+        } else {
+          wx.showToast({
+            image: '/static/images/icon_error.png',
+            title: _res.errmsg,
+            mask: true
+          });
+        }
+      });
   },
   openCartPage: function () {
     wx.switchTab({
@@ -267,11 +254,10 @@ Page({
   },
   addToCart: function () {
     var that = this;
-    if (this.data.openAttr == false) {
+    if (this.data.openAttr === false) {
       //打开规格选择窗口
       this.setData({
-        openAttr: !this.data.openAttr,
-        collectBackImage: "/static/images/detail_back.png"
+        openAttr: !this.data.openAttr
       });
     } else {
 
@@ -305,15 +291,6 @@ Page({
               openAttr: !that.data.openAttr,
               cartGoodsCount: _res.data.cartTotal.goodsCount
             });
-            if (that.data.userHasCollect == 1) {
-              that.setData({
-                'collectBackImage': that.data.hasCollectImage
-              });
-            } else {
-              that.setData({
-                'collectBackImage': that.data.noCollectImage
-              });
-            }
           } else {
             wx.showToast({
               image: '/static/images/icon_error.png',

pages/goods/goods.wxml

@@ -1,32 +1,31 @@
-<scroll-view class="container" scroll-y="true">
-  <view wx:if="{{!openAttr}}">
-    <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
-      <swiper-item wx:for="{{gallery}}" wx:key="{{item.id}}">
-        <image src="{{item.img_url}}" background-size="cover"></image>
-      </swiper-item>
-    </swiper>
-    <view class="service-policy">
-      <view class="item">30天无忧退货</view>
-      <view class="item">48小时快速退款</view>
-      <view class="item">满88元免邮费</view>
-    </view>
-    <view class="goods-info">
-      <view class="c">
-        <text class="name">{{goods.name}}</text>
-        <text class="desc">{{goods.goods_brief}}</text>
-        <text class="price">￥{{goods.retail_price}}</text>
-        <view class="brand" wx:if="{{brand.name}}">
-          <navigator url="../brandDetail/brandDetail?id={{brand.brandId}}">
-            <text>{{brand.name}}</text>
-          </navigator>
-        </view>
+<view class="container">
+  <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+    <swiper-item wx:for="{{gallery}}" wx:key="{{item.id}}">
+      <image src="{{item.img_url}}" background-size="cover"></image>
+    </swiper-item>
+  </swiper>
+  <view class="service-policy">
+    <view class="item">30天无忧退货</view>
+    <view class="item">48小时快速退款</view>
+    <view class="item">满88元免邮费</view>
+  </view>
+  <view class="goods-info">
+    <view class="c">
+      <text class="name">{{goods.name}}</text>
+      <text class="desc">{{goods.goods_brief}}</text>
+      <text class="price">￥{{goods.retail_price}}</text>
+      <view class="brand" wx:if="{{brand.name}}">
+        <navigator url="../brandDetail/brandDetail?id={{brand.brandId}}">
+          <text>{{brand.name}}</text>
+        </navigator>
       </view>
     </view>
-    <view class="section-nav section-attr" bindtap="switchAttrPop">
-      <view class="t">请选择规格数量</view>
-      <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
-    </view>
-    <!--<view class="section-nav section-act">
+  </view>
+  <view class="section-nav section-attr" bindtap="switchAttrPop">
+    <view class="t">请选择规格数量</view>
+    <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
+  </view>
+  <!--<view class="section-nav section-act">
       <view class="t">
         <view class="label">1个促销:</view>
         <view class="tag">万圣趴</view>
@@ -34,86 +33,89 @@
       </view>
       <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
     </view>-->
-    <view class="comments" wx:if="{{comment.count > 0}}">
-      <view class="h">
-        <navigator url="../comment/comment?valueId={{goods.id}}&typeId=0">
-          <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
-          <text class="i">查看全部</text>
-        </navigator>
-      </view>
-      <view class="b">
-        <view class="item">
-          <view class="info">
-            <view class="user">
-              <image src="{{comment.data.avatar}}"></image>
-              <text>{{comment.data.nickname}}</text>
-            </view>
-            <view class="time">{{comment.data.add_time}}</view>
-          </view>
-          <view class="content">
-            {{comment.data.content}}
-          </view>
-          <view class="imgs" wx:if="{{comment.data.pic_list.length > 0}}">
-            <image class="img"  wx:for="{{comment.data.pic_list}}" wx:key="{{item.id}}" src="{{item.pic_url}}"></image>
+  <view class="comments" wx:if="{{comment.count > 0}}">
+    <view class="h">
+      <navigator url="../comment/comment?valueId={{goods.id}}&typeId=0">
+        <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
+        <text class="i">查看全部</text>
+      </navigator>
+    </view>
+    <view class="b">
+      <view class="item">
+        <view class="info">
+          <view class="user">
+            <image src="{{comment.data.avatar}}"></image>
+            <text>{{comment.data.nickname}}</text>
           </view>
-          <!-- <view class="spec">白色 2件</view> -->
+          <view class="time">{{comment.data.add_time}}</view>
+        </view>
+        <view class="content">
+          {{comment.data.content}}
         </view>
+        <view class="imgs" wx:if="{{comment.data.pic_list.length > 0}}">
+          <image class="img" wx:for="{{comment.data.pic_list}}" wx:key="{{item.id}}" src="{{item.pic_url}}"></image>
+        </view>
+        <!-- <view class="spec">白色 2件</view> -->
       </view>
     </view>
-    <view class="goods-attr">
-      <view class="t">商品参数</view>
-      <view class="l">
-        <view class="item" wx:for="{{attribute}}" wx:key="{{item.name}}">
-          <text class="left">{{item.name}}</text>
-          <text class="right">{{item.value}}</text>
-        </view>
+  </view>
+  <view class="goods-attr">
+    <view class="t">商品参数</view>
+    <view class="l">
+      <view class="item" wx:for="{{attribute}}" wx:key="{{item.name}}">
+        <text class="left">{{item.name}}</text>
+        <text class="right">{{item.value}}</text>
       </view>
     </view>
+  </view>
 
-    <view class="detail">
-      <import src="../../lib/wxParse/wxParse.wxml" />
-      <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
-    </view>
+  <view class="detail">
+    <import src="../../lib/wxParse/wxParse.wxml" />
+    <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
+  </view>
 
 
-    <view class="common-problem">
-      <view class="h">
-        <view class="line"></view>
-        <text class="title">常见问题</text>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{issueList}}" wx:key="{{item.id}}">
-          <view class="question-box">
-            <text class="spot"></text>
-            <text class="question">{{item.question}}</text>
-          </view>
-          <view class="answer">
-            {{item.answer}}
-          </view>
+  <view class="common-problem">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">常见问题</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{issueList}}" wx:key="{{item.id}}">
+        <view class="question-box">
+          <text class="spot"></text>
+          <text class="question">{{item.question}}</text>
+        </view>
+        <view class="answer">
+          {{item.answer}}
         </view>
       </view>
     </view>
+  </view>
 
-    <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
-      <view class="h">
-        <view class="line"></view>
-        <text class="title">大家都在看</text>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{relatedGoods}}" wx:key="{{item.id}}">
-          <navigator url="/pages/goods/goods?id={{item.id}}">
-            <image class="img" src="{{item.list_pic_url}}" background-size="cover"></image>
-            <text class="name">{{item.name}}</text>
-            <text class="price">￥{{item.retail_price}}</text>
-          </navigator>
-        </view>
+  <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">大家都在看</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{relatedGoods}}" wx:key="{{item.id}}">
+        <navigator url="/pages/goods/goods?id={{item.id}}">
+          <image class="img" src="{{item.list_pic_url}}" background-size="cover"></image>
+          <text class="name">{{item.name}}</text>
+          <text class="price">￥{{item.retail_price}}</text>
+        </navigator>
       </view>
     </view>
-
   </view>
-  <view wx:if="{{openAttr}}" class="attr-pop">
+</view>
+<view class="attr-pop-box" hidden="{{!openAttr}}">
+  <view class="attr-pop">
+    <view class="close" bindtap="closeAttr">
+      <image class="icon" src="/static/images/icon_close.png"></image>
+    </view>
     <view class="img-info">
-      <image class="img" src="http://ac-3yr0g9cz.clouddn.com/6e5176bd6545b72e130a.png"></image>
+      <image class="img" src="{{gallery[0].img_url}}"></image>
       <view class="info">
         <view class="c">
           <view class="p">价格：￥{{goods.retail_price}}</view>
@@ -139,18 +141,17 @@
       </view>
     </view>
   </view>
-  <view class="bottom-btn">
-    <view class="l l-collect {{ openAttr ? 'back' : ''}}" bindtap="closeAttrOrCollect">
-      <image class="icon" src="{{ collectBackImage }}"></image>
-    </view>
-    <view class="l l-cart">
-      <view class="box">
-        <text class="cart-count">{{cartGoodsCount}}</text>
-        <image bindtap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
-
-      </view>
+</view>
+<view class="bottom-btn">
+  <view class="l l-collect" bindtap="addCannelCollect">
+    <image class="icon" src="{{ collectBackImage }}"></image>
+  </view>
+  <view class="l l-cart">
+    <view class="box">
+      <text class="cart-count">{{cartGoodsCount}}</text>
+      <image bindtap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
     </view>
-    <view class="c">立即购买</view>
-    <view class="r" bindtap="addToCart">加入购物车</view>
   </view>
-</scroll-view>
+  <view class="c">立即购买</view>
+  <view class="r" bindtap="addToCart">加入购物车</view>
+</view>

pages/goods/goods.wxss

@@ -1,397 +1,393 @@
-.container{
-    margin-bottom: 100rpx;
+.container {
+  margin-bottom: 100rpx;
 }
-.goodsimgs{
+
+.goodsimgs {
   width: 750rpx;
   height: 750rpx;
 }
 
-.goodsimgs image{
+.goodsimgs image {
   width: 750rpx;
   height: 750rpx;
 }
 
-.service-policy{
-    width: 750rpx;
-    height: 73rpx;
-    background: #f4f4f4;
-    padding: 0 31.25rpx;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: space-between;
+.service-policy {
+  width: 750rpx;
+  height: 73rpx;
+  background: #f4f4f4;
+  padding: 0 31.25rpx;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.service-policy .item {
+  background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
+  background-size: 10rpx;
+  padding-left: 15rpx;
+  display: flex;
+  align-items: center;
+  font-size: 25rpx;
+  color: #666;
+}
+
+.goods-info {
+  width: 750rpx;
+  height: 306rpx;
+  overflow: hidden;
+  background: #fff;
 }
 
-.service-policy .item{
-    background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
-    background-size: 10rpx;
-    padding-left: 15rpx;
-    display: flex;
-    align-items: center;
-    font-size: 25rpx;
-    color: #666;
-}
-
-.goods-info{
-    width: 750rpx;
-    height: 306rpx;
-    overflow: hidden;
-    background: #fff;
+.goods-info .c {
+  display: block;
+  width: 718.75rpx;
+  height: 100%;
+  margin-left: 31.25rpx;
+  padding: 38rpx 31.25rpx 38rpx 0;
+  border-bottom: 1px solid #f4f4f4;
 }
 
-.goods-info .c{
-    display: block;
-    width: 718.75rpx;
-    height: 100%;
-    margin-left: 31.25rpx;
-    padding: 38rpx 31.25rpx 38rpx 0;
-    border-bottom: 1px solid #f4f4f4;
-}
-
-.goods-info .c text{
-    display: block;
-    width: 687.5rpx;
-    text-align: center;
-}
-
-.goods-info .name{
-    height: 41rpx;
-    margin-bottom: 5.208rpx;
-    font-size: 41rpx;
-    line-height: 41rpx;
-}
-
-.goods-info .desc{
-    height: 43rpx;
-    margin-bottom: 41rpx;
-    font-size: 24rpx;
-    line-height: 36rpx;
-    color: #999;
-}
-
-
-.goods-info .price{
-    height: 35rpx;
-    font-size: 35rpx;
-    line-height: 35rpx;
-    color: #b4282d;
-}
-
-.goods-info .brand{
-    margin-top: 23rpx;
-    min-height: 40rpx;
-    text-align: center;
-}
-
-.goods-info .brand text{
-    display: inline-block;
-    width: auto;
-    padding: 2px 30rpx 2px 10.5rpx;
-    line-height: 35.5rpx;
-    border: 1px solid #f48f18;
-    font-size: 25rpx;
-    color: #f48f18;
-    border-radius: 4px;
-    background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
-    background-size: 10.75rpx 18.75rpx;
-}
-
-.section-nav{
-    width: 750rpx;
-    height: 108rpx;
-    background: #fff;
-    margin-bottom: 20rpx;
-}
-
-.section-nav .t{
-    float: left;
-    width: 600rpx;
-    height: 108rpx;
-    line-height: 108rpx;
-    font-size: 29rpx;
-    color: #333;
-    margin-left: 31.25rpx;
-}
-
-.section-nav .i{
-    float: right;
-    width: 52rpx;
-    height: 52rpx;
-    margin-right: 16rpx;
-    margin-top: 28rpx;
+.goods-info .c text {
+  display: block;
+  width: 687.5rpx;
+  text-align: center;
 }
 
-.section-act .t{
-    float: left;
-    display: flex;
-    align-items: center;
-    width: 600rpx;
-    height: 108rpx;
-    overflow: hidden;
-    line-height: 108rpx;
-    font-size: 29rpx;
-    color: #999;
-    margin-left: 31.25rpx;
-}
-
-.section-act .label{
-    color: #999;
+.goods-info .name {
+  height: 41rpx;
+  margin-bottom: 5.208rpx;
+  font-size: 41rpx;
+  line-height: 41rpx;
 }
 
-.section-act .tag{
-    display: flex;
-    align-items: center;
-    padding:0 10rpx;
-    border-radius: 3px;
-    height: 37rpx;
-    width: auto;
-    color: #f48f18;
-    overflow: hidden;
-    border: 1px solid #f48f18;
-    font-size: 25rpx;
-    margin:0 10rpx;
-}
-
-.section-act .text{
-    display: flex;
-    align-items: center;
-    height: 37rpx;
-    width: auto;
-    overflow: hidden;
-    color: #f48f18;
-    font-size: 29rpx;
-}
-
-.comments{
-    width: 100%;
-    height: auto;
-    padding-left:30rpx;
-    background: #fff;
-    margin: 20rpx 0;
+.goods-info .desc {
+  height: 43rpx;
+  margin-bottom: 41rpx;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  color: #999;
 }
 
-.comments .h{
-    height: 102.5rpx;
-    line-height: 100.5rpx;
-    width: 718.75rpx;
-    padding-right: 16rpx;
-    border-bottom: 1px solid #d9d9d9;
-}
-
-.comments .h .t{
-    display: block;
-    float: left;
-    width: 50%;
-    font-size: 38.5rpx;
-    color: #333;
-}
-
-.comments .h .i{
-    display: block;
-    float: right;
-    width: 164rpx;
-    height: 100.5rpx;
-    line-height: 100.5rpx;
-    background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
-    background-size: 52rpx;
+.goods-info .price {
+  height: 35rpx;
+  font-size: 35rpx;
+  line-height: 35rpx;
+  color: #b4282d;
 }
 
-.comments .b{
-    height: auto;
-    width: 720rpx;
+.goods-info .brand {
+  margin-top: 23rpx;
+  min-height: 40rpx;
+  text-align: center;
 }
 
-.comments .item{
-    height: auto;
-    width: 720rpx;
-    overflow: hidden;
+.goods-info .brand text {
+  display: inline-block;
+  width: auto;
+  padding: 2px 30rpx 2px 10.5rpx;
+  line-height: 35.5rpx;
+  border: 1px solid #f48f18;
+  font-size: 25rpx;
+  color: #f48f18;
+  border-radius: 4px;
+  background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
+  background-size: 10.75rpx 18.75rpx;
 }
 
-.comments .info{
-    height: 127rpx;
-    width: 100%;
-    padding: 33rpx 0 27rpx 0;
+.section-nav {
+  width: 750rpx;
+  height: 108rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
 }
 
-.comments .user{
-    float: left;
-    width: auto;
-    height: 67rpx;
-    line-height: 67rpx;
-    font-size: 0;
+.section-nav .t {
+  float: left;
+  width: 600rpx;
+  height: 108rpx;
+  line-height: 108rpx;
+  font-size: 29rpx;
+  color: #333;
+  margin-left: 31.25rpx;
 }
-
-.comments .user image{
-    float: left;
-    width: 67rpx;
-    height: 67rpx;
-    margin-right: 17rpx;
-    border-radius: 50%;
+
+.section-nav .i {
+  float: right;
+  width: 52rpx;
+  height: 52rpx;
+  margin-right: 16rpx;
+  margin-top: 28rpx;
 }
 
-.comments .user text{
-    display: inline-block;
-    width: auto;
-    height: 66rpx;
-    overflow: hidden;
-    font-size: 29rpx;
-    line-height: 66rpx;
+.section-act .t {
+  float: left;
+  display: flex;
+  align-items: center;
+  width: 600rpx;
+  height: 108rpx;
+  overflow: hidden;
+  line-height: 108rpx;
+  font-size: 29rpx;
+  color: #999;
+  margin-left: 31.25rpx;
 }
 
-.comments .time{
-    display: block;
-    float: right;
-    width: auto;
-    height: 67rpx;
-    line-height: 67rpx;
-    color: #7f7f7f;
-    font-size: 25rpx;
-    margin-right: 30rpx;
+.section-act .label {
+  color: #999;
 }
 
-.comments .content{
-    width: 720rpx;
-    padding-right: 30rpx;
-    line-height: 45.8rpx;
-    font-size: 29rpx;
-    margin-bottom: 24rpx;
+.section-act .tag {
+  display: flex;
+  align-items: center;
+  padding: 0 10rpx;
+  border-radius: 3px;
+  height: 37rpx;
+  width: auto;
+  color: #f48f18;
+  overflow: hidden;
+  border: 1px solid #f48f18;
+  font-size: 25rpx;
+  margin: 0 10rpx;
 }
 
-.comments .imgs{
-    width: 720rpx;
-    height: auto;
-    margin-bottom: 25rpx;
+.section-act .text {
+  display: flex;
+  align-items: center;
+  height: 37rpx;
+  width: auto;
+  overflow: hidden;
+  color: #f48f18;
+  font-size: 29rpx;
 }
 
-.comments .imgs .img{
-    height: 150rpx;
-    width: 150rpx;
-    margin-right: 28rpx;
+.comments {
+  width: 100%;
+  height: auto;
+  padding-left: 30rpx;
+  background: #fff;
+  margin: 20rpx 0;
 }
 
+.comments .h {
+  height: 102.5rpx;
+  line-height: 100.5rpx;
+  width: 718.75rpx;
+  padding-right: 16rpx;
+  border-bottom: 1px solid #d9d9d9;
+}
 
-.comments .spec{
-    width: 720rpx;
-    padding-right: 30rpx;
-    line-height: 30rpx;
-    font-size: 24rpx;
-    color: #999;
-    margin-bottom: 30rpx;
+.comments .h .t {
+  display: block;
+  float: left;
+  width: 50%;
+  font-size: 38.5rpx;
+  color: #333;
 }
 
+.comments .h .i {
+  display: block;
+  float: right;
+  width: 164rpx;
+  height: 100.5rpx;
+  line-height: 100.5rpx;
+  background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
+  background-size: 52rpx;
+}
 
-.goods-attr{
-    width: 750rpx;
-    height: auto;
-    overflow: hidden;
-    padding: 0 31.25rpx 25rpx 31.25rpx;
-    background: #fff;
+.comments .b {
+  height: auto;
+  width: 720rpx;
 }
 
-.goods-attr .t{
-    width: 687.5rpx;
-    height: 104rpx;
-    line-height: 104rpx;
-    font-size: 38.5rpx;
+.comments .item {
+  height: auto;
+  width: 720rpx;
+  overflow: hidden;
 }
 
-.goods-attr .item{
-    width: 687.5rpx;
-    height: 68rpx;
-    padding: 11rpx 20rpx;
-    margin-bottom: 11rpx;
-    background: #f7f7f7;
-    font-size: 38.5rpx;
+.comments .info {
+  height: 127rpx;
+  width: 100%;
+  padding: 33rpx 0 27rpx 0;
 }
 
-.goods-attr .left{
-    float: left;
-    font-size: 25rpx;
-    width: 134rpx;
-    height: 45rpx;
-    line-height: 45rpx;
-    overflow: hidden;
-    color: #999;
+.comments .user {
+  float: left;
+  width: auto;
+  height: 67rpx;
+  line-height: 67rpx;
+  font-size: 0;
 }
 
-.goods-attr .right{
-    float: left;
-    font-size: 36.5rpx;
-    margin-left: 20rpx;
-    width: 480rpx;
-    height: 45rpx;
-    line-height: 45rpx;
-    overflow: hidden;
-    color: #333;
+.comments .user image {
+  float: left;
+  width: 67rpx;
+  height: 67rpx;
+  margin-right: 17rpx;
+  border-radius: 50%;
 }
 
-.detail{
-    width: 750rpx;
-    height: auto;
-    overflow: hidden;
+.comments .user text {
+  display: inline-block;
+  width: auto;
+  height: 66rpx;
+  overflow: hidden;
+  font-size: 29rpx;
+  line-height: 66rpx;
 }
 
-.detail image{
-    width: 750rpx;
-    display: block;
+.comments .time {
+  display: block;
+  float: right;
+  width: auto;
+  height: 67rpx;
+  line-height: 67rpx;
+  color: #7f7f7f;
+  font-size: 25rpx;
+  margin-right: 30rpx;
 }
 
+.comments .content {
+  width: 720rpx;
+  padding-right: 30rpx;
+  line-height: 45.8rpx;
+  font-size: 29rpx;
+  margin-bottom: 24rpx;
+}
 
-.common-problem{
-    width: 750rpx;
-    height: auto;
-    overflow: hidden;
+.comments .imgs {
+  width: 720rpx;
+  height: auto;
+  margin-bottom: 25rpx;
 }
 
-.common-problem .h{
-    position: relative;
-    height: 145.5rpx;
-    width: 750rpx;
-    padding: 56.25rpx 0;
-    background: #fff;
-    text-align: center;
+.comments .imgs .img {
+  height: 150rpx;
+  width: 150rpx;
+  margin-right: 28rpx;
 }
 
-.common-problem .h .line{
-    display: inline-block;
-    position: absolute;
-    top: 72rpx;
-    left: 0;
-    z-index: 2;
-    height: 1px;
-    margin-left: 225rpx;
-    width: 300rpx;
-    background: #ccc;
+.comments .spec {
+  width: 720rpx;
+  padding-right: 30rpx;
+  line-height: 30rpx;
+  font-size: 24rpx;
+  color: #999;
+  margin-bottom: 30rpx;
 }
 
-.common-problem .h .title{
-    display: inline-block;
-    position: absolute;
-    top: 56.125rpx;
-    left: 0;
-    z-index: 3;
-    height: 33rpx;
-    margin-left: 285rpx;
-    width: 180rpx;
-    background: #fff;
+.goods-attr {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+  padding: 0 31.25rpx 25rpx 31.25rpx;
+  background: #fff;
+}
+
+.goods-attr .t {
+  width: 687.5rpx;
+  height: 104rpx;
+  line-height: 104rpx;
+  font-size: 38.5rpx;
 }
 
-.common-problem .b{
+.goods-attr .item {
+  width: 687.5rpx;
+  height: 68rpx;
+  padding: 11rpx 20rpx;
+  margin-bottom: 11rpx;
+  background: #f7f7f7;
+  font-size: 38.5rpx;
+}
+
+.goods-attr .left {
+  float: left;
+  font-size: 25rpx;
+  width: 134rpx;
+  height: 45rpx;
+  line-height: 45rpx;
+  overflow: hidden;
+  color: #999;
+}
+
+.goods-attr .right {
+  float: left;
+  font-size: 36.5rpx;
+  margin-left: 20rpx;
+  width: 480rpx;
+  height: 45rpx;
+  line-height: 45rpx;
+  overflow: hidden;
+  color: #333;
+}
+
+.detail {
   width: 750rpx;
   height: auto;
   overflow: hidden;
-  padding: 0rpx 30rpx;
+}
+
+.detail image {
+  width: 750rpx;
+  display: block;
+}
+
+.common-problem {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+}
+
+.common-problem .h {
+  position: relative;
+  height: 145.5rpx;
+  width: 750rpx;
+  padding: 56.25rpx 0;
   background: #fff;
+  text-align: center;
+}
 
+.common-problem .h .line {
+  display: inline-block;
+  position: absolute;
+  top: 72rpx;
+  left: 0;
+  z-index: 2;
+  height: 1px;
+  margin-left: 225rpx;
+  width: 300rpx;
+  background: #ccc;
+}
+
+.common-problem .h .title {
+  display: inline-block;
+  position: absolute;
+  top: 56.125rpx;
+  left: 0;
+  z-index: 3;
+  height: 33rpx;
+  margin-left: 285rpx;
+  width: 180rpx;
+  background: #fff;
 }
 
-.common-problem .item{
+.common-problem .b {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+  padding: 0rpx 30rpx;
+  background: #fff;
+}
+
+.common-problem .item {
   height: auto;
   overflow: hidden;
   padding-bottom: 25rpx;
 }
 
-.common-problem .question-box .spot{
+.common-problem .question-box .spot {
   float: left;
   display: block;
   height: 8rpx;
@@ -401,7 +397,7 @@
   margin-top: 11rpx;
 }
 
-.common-problem .question-box .question{
+.common-problem .question-box .question {
   float: left;
   line-height: 30rpx;
   padding-left: 8rpx;
@@ -411,61 +407,60 @@
   color: #303030;
 }
 
-.common-problem .answer{
+.common-problem .answer {
   line-height: 36rpx;
   padding-left: 16rpx;
   font-size: 26rpx;
   color: #787878;
 }
 
-
-.related-goods{
-    width: 750rpx;
-    height: auto;
-    overflow: hidden;
-}
-
-.related-goods .h{
-    position: relative;
-    height: 145.5rpx;
-    width: 750rpx;
-    padding: 56.25rpx 0;
-    background: #fff;
-    text-align: center;
-    border-bottom: 1px solid #f4f4f4;
+.related-goods {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
 }
 
-.related-goods .h .line{
-    display: inline-block;
-    position: absolute;
-    top: 72rpx;
-    left: 0;
-    z-index: 2;
-    height: 1px;
-    margin-left: 225rpx;
-    width: 300rpx;
-    background: #ccc;
+.related-goods .h {
+  position: relative;
+  height: 145.5rpx;
+  width: 750rpx;
+  padding: 56.25rpx 0;
+  background: #fff;
+  text-align: center;
+  border-bottom: 1px solid #f4f4f4;
 }
 
-.related-goods .h .title{
-    display: inline-block;
-    position: absolute;
-    top: 56.125rpx;
-    left: 0;
-    z-index: 3;
-    height: 33rpx;
-    margin-left: 285rpx;
-    width: 180rpx;
-    background: #fff;
+.related-goods .h .line {
+  display: inline-block;
+  position: absolute;
+  top: 72rpx;
+  left: 0;
+  z-index: 2;
+  height: 1px;
+  margin-left: 225rpx;
+  width: 300rpx;
+  background: #ccc;
+}
+
+.related-goods .h .title {
+  display: inline-block;
+  position: absolute;
+  top: 56.125rpx;
+  left: 0;
+  z-index: 3;
+  height: 33rpx;
+  margin-left: 285rpx;
+  width: 180rpx;
+  background: #fff;
 }
 
-.related-goods .b{
+.related-goods .b {
   width: 750rpx;
   height: auto;
   overflow: hidden;
 }
 
-.related-goods .b .item{
+.related-goods .b .item {
   float: left;
   background: #fff;
   width: 375rpx;
@@ -477,12 +472,12 @@
   border-bottom: 1px solid #f4f4f4;
 }
 
-.related-goods .item .img{
+.related-goods .item .img {
   width: 311.45rpx;
   height: 311.45rpx;
 }
 
-.related-goods .item .name{
+.related-goods .item .name {
   display: block;
   width: 311.45rpx;
   height: 35rpx;
@@ -493,7 +488,7 @@
   color: #333;
 }
 
-.related-goods .item .price{
+.related-goods .item .price {
   display: block;
   width: 311.45rpx;
   height: 30rpx;
@@ -502,211 +497,230 @@
   color: #b4282d;
 }
 
-.bottom-btn{
-    position: fixed;
-    left:0;
-    bottom:0;
-    z-index: 10;
-    width: 750rpx;
-    height: 100rpx;
-    display: flex;
-    background: #fff;
+.bottom-btn {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  width: 750rpx;
+  height: 100rpx;
+  display: flex;
+  background: #fff;
 }
 
-.bottom-btn .l{
-    float: left;
-    height: 100rpx;
-    width: 162rpx;
-    border: 1px solid #f4f4f4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
+.bottom-btn .l {
+  float: left;
+  height: 100rpx;
+  width: 162rpx;
+  border: 1px solid #f4f4f4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.bottom-btn .l.l-collect{
-    border-right: none;
-    border-left: none;
-    text-align: center;
+.bottom-btn .l.l-collect {
+  border-right: none;
+  border-left: none;
+  text-align: center;
 }
 
-
-.bottom-btn .l.l-cart .box{
-    position: relative;
-    height: 60rpx;
-    width: 60rpx;
+.bottom-btn .l.l-cart .box {
+  position: relative;
+  height: 60rpx;
+  width: 60rpx;
 }
 
-.bottom-btn .l.l-cart .cart-count{
-    height: 28rpx;
-    width: 28rpx;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    right:0;
-    background: #b4282d;
-    text-align: center;
-    font-size: 18rpx;
-    color: #fff;
-    line-height: 28rpx;
-    border-radius: 50%;
-
+.bottom-btn .l.l-cart .cart-count {
+  height: 28rpx;
+  width: 28rpx;
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #b4282d;
+  text-align: center;
+  font-size: 18rpx;
+  color: #fff;
+  line-height: 28rpx;
+  border-radius: 50%;
 }
 
-.bottom-btn .l.l-cart .icon{
-  
-    position: absolute;
-    top: 10rpx;
-    left:0;
-    
+.bottom-btn .l.l-cart .icon {
+  position: absolute;
+  top: 10rpx;
+  left: 0;
 }
 
-
-.bottom-btn .l .icon{
-    display: block;
-    height: 44rpx;
-    width: 44rpx;
+.bottom-btn .l .icon {
+  display: block;
+  height: 44rpx;
+  width: 44rpx;
 }
 
-
-.bottom-btn .c{
-    float: left;
-    height: 100rpx;
-    line-height: 96rpx;
-    flex: 1;
-    text-align: center;
-    color: #333;
-    border-top: 1px solid #f4f4f4;
-    border-bottom: 1px solid #f4f4f4;
+.bottom-btn .c {
+  float: left;
+  height: 100rpx;
+  line-height: 96rpx;
+  flex: 1;
+  text-align: center;
+  color: #333;
+  border-top: 1px solid #f4f4f4;
+  border-bottom: 1px solid #f4f4f4;
 }
 
-.bottom-btn .r{
-    border:1px solid #b4282d;
-    background: #b4282d;
-    float: left;
-    height: 100rpx;
-    line-height: 96rpx;
-    flex: 1;
-    text-align: center;
-    color: #fff;
+.bottom-btn .r {
+  border: 1px solid #b4282d;
+  background: #b4282d;
+  float: left;
+  height: 100rpx;
+  line-height: 96rpx;
+  flex: 1;
+  text-align: center;
+  color: #fff;
 }
 @import "../../lib/wxParse/wxParse.wxss";
 
-.attr-pop{
-    width: 100%;
-    height: 100%;
-    padding: 31.25rpx;
-    background: #fff;
+.attr-pop-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: rgba(0, 0, 0, .5);
+  z-index: 8;
+  bottom: 0;
+  /* display: none; */
 }
 
-.attr-pop .img-info{
-    width: 687.5rpx;
-    height: 177rpx;
-    overflow: hidden;
-    margin-bottom: 41.5rpx;
+.attr-pop {
+  width: 100%;
+  height: auto;
+  max-height: 780rpx;
+  padding: 31.25rpx;
+  background: #fff;
+  position: fixed;
+  z-index: 9;
+  bottom: 100rpx;
 }
 
-.attr-pop .img{
-    float: left;
-    height: 177rpx;
-    width: 177rpx;
-    background: #f4f4f4;
-    margin-right: 31.25rpx;
+.attr-pop .close {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  right: 31.25rpx;
+  overflow: hidden;
+  top: 31.25rpx;
 }
 
-.attr-pop .info{
-    float: left;
-    height: 177rpx;
-    display: flex;
-    align-items: center;
+.attr-pop .close .icon {
+  width: 48rpx;
+  height: 48rpx;
 }
 
-.attr-pop .p{
-    font-size: 33rpx;
-    color: #333;
-    height: 33rpx;
-    line-height: 33rpx;
-    margin-bottom: 10rpx;
+.attr-pop .img-info {
+  width: 687.5rpx;
+  height: 177rpx;
+  overflow: hidden;
+  margin-bottom: 41.5rpx;
 }
 
-.attr-pop .a{
-    font-size: 29rpx;
-    color: #333;
-    height: 40rpx;
-    line-height: 40rpx;
+.attr-pop .img {
+  float: left;
+  height: 177rpx;
+  width: 177rpx;
+  background: #f4f4f4;
+  margin-right: 31.25rpx;
 }
 
-.spec-con{
-    width: 100%;
-    height: auto;
-    overflow: hidden;
+.attr-pop .info {
+  float: left;
+  height: 177rpx;
+  display: flex;
+  align-items: center;
 }
 
-.spec-con .name{
-    height: 32rpx;
-    margin-bottom: 22rpx;
-    font-size: 29rpx;
-    color: #333;
+.attr-pop .p {
+  font-size: 33rpx;
+  color: #333;
+  height: 33rpx;
+  line-height: 33rpx;
+  margin-bottom: 10rpx;
 }
 
-.spec-con .values{
-    height: auto;
-    margin-bottom: 31.25rpx;
-    font-size: 0;
+.attr-pop .a {
+  font-size: 29rpx;
+  color: #333;
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.spec-con {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
 }
 
-.spec-con .value{
-    display: inline-block;
-    height: 62rpx;
-    padding: 0 35rpx;
-    line-height: 56rpx;
-    text-align: center;
-    margin-right: 25rpx;
-    margin-bottom: 16.5rpx;
-    border: 1px solid #333;
-    font-size: 25rpx;
-    color: #333;
+.spec-con .name {
+  height: 32rpx;
+  margin-bottom: 22rpx;
+  font-size: 29rpx;
+  color: #333;
 }
 
-.spec-con .value.disable{
-    border: 1px solid #ccc;
-    color: #ccc;
+.spec-con .values {
+  height: auto;
+  margin-bottom: 31.25rpx;
+  font-size: 0;
 }
 
-.spec-con .value.selected{
-    border: 1px solid #b4282d;
-    color: #b4282d;
+.spec-con .value {
+  display: inline-block;
+  height: 62rpx;
+  padding: 0 35rpx;
+  line-height: 56rpx;
+  text-align: center;
+  margin-right: 25rpx;
+  margin-bottom: 16.5rpx;
+  border: 1px solid #333;
+  font-size: 25rpx;
+  color: #333;
 }
 
-.number-item .selnum{
-    width: 322rpx;
-    height: 71rpx;
-    border: 1px solid #ccc;
-    display: flex;
+.spec-con .value.disable {
+  border: 1px solid #ccc;
+  color: #ccc;
 }
 
-.number-item .cut{
-    width: 93.75rpx;
-    height: 100%;
-    text-align: center;
-    line-height: 65rpx;
+.spec-con .value.selected {
+  border: 1px solid #b4282d;
+  color: #b4282d;
 }
 
-.number-item .number{
-    flex: 1;
-    height: 100%;
-    text-align: center;
-    line-height: 68.75rpx;
-    border-left: 1px solid #ccc;
-    border-right: 1px solid #ccc;
-    float: left;
+.number-item .selnum {
+  width: 322rpx;
+  height: 71rpx;
+  border: 1px solid #ccc;
+  display: flex;
 }
 
-.number-item .add{
-    width: 93.75rpx;
-    height: 100%;
-    text-align: center;
-    line-height: 65rpx;
+.number-item .cut {
+  width: 93.75rpx;
+  height: 100%;
+  text-align: center;
+  line-height: 65rpx;
 }
 
+.number-item .number {
+  flex: 1;
+  height: 100%;
+  text-align: center;
+  line-height: 68.75rpx;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  float: left;
+}
 
+.number-item .add {
+  width: 93.75rpx;
+  height: 100%;
+  text-align: center;
+  line-height: 65rpx;
+}