加入购物车的样式排版

后端开发-许程
1 parent be765a40
Showing 4 changed files with 59 additions and 20 deletions
app.wxss
pages/goods/goodsInfo/goodsInfo.js
pages/goods/goodsInfo/goodsInfo.wxml
pages/goods/goodsInfo/goodsInfo.wxss
@@ -73,7 +73,7 @@ button {
 .modal-close {
     position: absolute;
     right: 25rpx;
-    top: 25rpx;
+    top:40rpx;
 }
 .no-data {
     width: 100%;
@@ -456,7 +456,7 @@ Page({
           //-----商品详情---
           a.wxParse("content", "html", t.data.data.goods_content, ee, 6);
           e.wxParseAddFullImageUrl(ee, "content");
-
+         console.log("商品的名字是什么",t.data.data);
           ee.setData({
             data: t.data.data,
             sele_g: t.data.data,
@@ -323,9 +323,8 @@
                      </view>
                   </view>
                   <view class="fs20">地址:福建省泉州市鲤城区软件园4栋4层</view>
+                 </view>   
  
-
-                 </view>    
             </view>
  
         <!--许程 7.24暂时注释 -->
@@ -749,25 +748,46 @@
   <view bindtap="closeSpecModal" class="cover-layer"></view>
   <view class="spec-model">
     <view class="pding">
-      <icon bindtap="closeSpecModal" class="modal-close" color="gray" size="22" type="cancel"></icon>
+      <icon bindtap="closeSpecModal" class="modal-close" color="black" size="22" type="cancel"></icon>
       <view class="spec-goods">
-        <image class="wh100 spec-img" src="{{data.original_img}}" binderror="pop_err_img" data-errorimg="data.original_img"></image>
+        <image class="wh100 spec-img xc-distance-bottom" src="{{data.original_img}}" binderror="pop_err_img" data-errorimg="data.original_img"></image>
         <view class="spec-goods-info">
-          <!--<view class="spec-goods-name">{{data.goods_name}}</view>-->
-          <view class="spec-goods-price" wx:if="{{prom_price==null}}">￥ {{sele_g.shop_price}}</view>
-          <view class="spec-goods-price" wx:else>￥ {{prom_price}}</view>
-          <block wx:if="{{prom_type==0}}">
+          <view class="spec-goods-name ellipsis-1">{{data.goods_name}}</view>
+          <view class="flex ai_end xc-val-money">
+          <view class="spec-goods-price" wx:if="{{prom_price==null}}"><text class="fs20">￥</text>{{sele_g.shop_price}}</view>
+          <view class="spec-goods-price" wx:else><text class="fs20">￥</text>{{prom_price}}</view>
+         
+        </view>
+        <view class="fs32 xc-ash flex ai_end">
+         <view>库存:</view>
+         <view class="xc-store-count">{{data.store_count}}
+          </view>
+          </view>
+          <!-- <block wx:if="{{prom_type==0}}">
             <view class="spec-goods-stock">已售：{{sele_g.sales_sum}}</view>
             <view class="spec-goods-stock">可售：{{sele_g.store_count}}</view>
             <view class="spec-goods-stock">已选：{{sku_g[0].gg}}</view>
-          </block>
-          <block wx:if="{{prom_type==1}}">
+          </block> -->
+          <!-- <block wx:if="{{prom_type==1}}">
             <view class="spec-goods-stock" wx:if="{{prom_st>0}}">已售：{{prom_act.buy_num+prom_act.virtual}}</view>
             <view class="spec-goods-stock" wx:else >已售：{{prom_act.buy_num}}</view>
             <view class="spec-goods-stock">可售：{{prom_act.goods_num-prom_act.buy_num}}</view>
             <view class="spec-goods-stock">已选：{{sku_g[0].gg}}</view>
-          </block>
+          </block> -->
         </view>
+         <view  class="flex-space-between address ai_end xc-width ">
+                     <view class="flex ai_end">
+                       <text class="fs28 xc-black3 shop_name"> 泉州开源盛世</text>
+                         <view class="distance fs20 xc-ash">
+                          距离:3754m
+                          </view>
+                     </view>
+                    <view class="red-co fs28" bindtap="choice_store">
+                         更多门店
+                         <text class="right-arrow"></text>
+                    </view>
+                  </view>
+                  <view class="fs20 xc-ash xc-distance-top">地址:福建省泉州市鲤城区软件园4栋4层</view>
       </view>
       <!----商品的属性项目---->
       <view hidden="{{ismend==1}}" class="spec-name">商品属性</view>
@@ -839,7 +859,7 @@
       <view class="spec-goods">
         <image class="wh100 spec-img" src="{{data.original_img}}"  binderror="pop_err_img"  data-errorimg="data.original_img"></image>
         <view class="spec-goods-info">
-          <!--<view class="spec-goods-name">{{data.goods_name}}</view>-->
+          <!-- <view class="spec-goods-name ellipsis-1">{{data.goods_name}}</view> -->
           <view class="spec-goods-price" wx:if="{{is_normal==1}}">￥ {{sele_g.shop_price}}</view>
           <view class="spec-goods-price" wx:else>￥ {{prom_price}}</view>
  
@@ -517,24 +517,23 @@ border-radius: 0 56rpx 55rpx 0;
     /* padding: 0 30rpx; */
     font-size: 32rpx;
     box-sizing: border-box;
+    border-radius: 20rpx;
  
 }
  
 .spec-model .pding{padding: 0 30rpx;}
  
 .spec-goods {
-    padding: 15rpx 0 10rpx;
+    padding: 30rpx 0 20rpx;
     float: left;
     width: 100%;
-    border-bottom: 1px solid #f8f8f8;
+    border-bottom:2rpx solid #eee;
 }
  
 .spec-img {
     float: left;
     height: 186rpx;
     width: 186rpx;
-    position: relative;
-    top:-40rpx;
      border: 4rpx solid #eee
 }
  
@@ -554,7 +553,7 @@ border-radius: 0 56rpx 55rpx 0;
 }
  
 .spec-goods-price {
-    color: #ec5151;
+    color: #d60021;
     font-size: 33rpx;
     font-weight: bold;
 }
@@ -946,7 +945,6 @@ left:31rpx;}
         border-right: 2rpx solid #d70026;
         transform: rotate(45deg);display:inline-block;
         margin-bottom:3rpx;
-
 }
 /* 顶部边框 */
 .topframe{
@@ -2435,4 +2433,25 @@ transform: rotate(45deg);
 display: inline-block;
 width: 20rpx;
 height: 20rpx;
+}
+.xc-val-money{
+  height:80rpx;
+}
+.xc-store-count{
+height: 40rpx;
+}
+.xc-distance-bottom{
+ margin-bottom: 40rpx;
+}
+.xc-distance-top{
+margin-top: 10rpx;
+}
+.xc-width{
+  width: 100%;
+}
+.right-arrow{ width: 15rpx; height:15rpx;
+        border-top: 2rpx solid #d70026;
+        border-right: 2rpx solid #d70026;
+        transform: rotate(45deg);display:inline-block;
+        margin-bottom:3rpx;
 }
 \ No newline at end of file