Commit 9e1c897a22714cb8899ea007bc8799f106147aec

Authored by taiyuan
1 parent d3875c47

商城界面优化

app.wxss
... ... @@ -125,6 +125,10 @@
125 125 color: #c7c7c7;
126 126 }
127 127  
  128 +.c-7b {
  129 + color: #7b7b7b;
  130 +}
  131 +
128 132 .c-d {
129 133 color: #ddd;
130 134 }
... ... @@ -137,7 +141,7 @@
137 141 color: #555;
138 142 }
139 143  
140   -.c7b {
  144 +.c-7b {
141 145 color: #7b7b7b;
142 146 }
143 147  
... ...
components/goods_list/goods_list.wxml
... ... @@ -13,7 +13,7 @@
13 13 <view class="goods_name ellipsis-2 fs28">{{item.goods_name}}</view>
14 14 <!-- 判断是否有活动价 -->
15 15 <block wx:if="{{item.prom_price>0 || item.prom_integral>0}}">
16   - <view class="flex ai_c pdt10">
  16 + <view class="pdt10">
17 17 <view class="money flex xc-wc" >
18 18 <text wx:if="{{item.prom_integral}}"><text class="fs35" style="font-weight: bold;">{{item.prom_integral}}</text>积分</text>
19 19 <text wx:if="{{item.prom_integral && item.prom_price}}">+</text>
... ... @@ -122,7 +122,7 @@
122 122 </block>
123 123 </block>
124 124 <!-- 商品压根就没有等级价 -->
125   - <view class="flex ai_c pdt10" wx:else>
  125 + <view class="pdt10" wx:else>
126 126 <view class="money flex">
127 127 <!-- 办卡价 -->
128 128 <view class="flex xc-wc">
... ...
pages/goods/goodsInfo/goodsInfo.wxml
... ... @@ -122,7 +122,7 @@
122 122 </view>
123 123 </view>
124 124  
125   - <view class="pt_fir">
  125 + <view class="pt_fir pd20">
126 126 <!----显示团类型和团价格---->
127 127 <view class="pt_fir_title ">
128 128 <!-- 许程 商家团主页 -->
... ... @@ -131,9 +131,10 @@
131 131 {{data.goods_name}}
132 132 </view>
133 133  
134   - <view class="xc-share-frame-jieti flex" bindtap="saveImageToPhotosAlbum" style="top:0">
135   - <image class="share-frame" src="{{iurl}}/miniapp/images/share.png"></image>
136   - <view class="share-font">分享</view>
  134 + <!-- 这个是分享按钮 -->
  135 + <view class="xc-share-frame t-c" bindtap="saveImageToPhotosAlbum">
  136 + <view class="iconfont icon-share fs60"></view>
  137 + <view class="fs22 c-7b">分享</view>
137 138 </view>
138 139 </view>
139 140 </view>
... ... @@ -155,25 +156,29 @@
155 156 </view>
156 157  
157 158 <!----------正有多少人在开团---------->
158   - <view class="pt_fir se2" wx:if="{{teamgroup}}">
  159 + <view class="pt_fir se2 bdt16" wx:if="{{teamgroup}}">
159 160 <view class="xc-partner-frame">
160   - <view class="zzk-1" bindtap="go_t_more">以下小伙伴正在拼单,可直接参与
161   - <view class="ckgd flex">查看详细
  161 + <view class="zzk-1 flex jc_sb" bindtap="go_t_more">
  162 + <view class="pdl10">以下小伙伴正在拼单,可直接参与</view>
  163 + <view class="ckgd flex ai_c">查看详细
162 164 <view class="bg_right arrow-one"></view>
163 165 </view>
164 166 </view>
165 167 </view>
166   - <view class='group' wx:for="{{teamgroup}}" wx:for-index="t_ind" wx:key="teamgroup" style='padding-left:28rpx;'>
  168 + <view class='group' wx:for="{{teamgroup}}" wx:for-index="t_ind" wx:key="teamgroup">
167 169 <view class='group-list' bindtap="go_cj_team" data-ind="{{t_ind}}">
168   - <!--//选项框头像-->
169   - <view class='gtou'>
170   - <image src='{{item.user.head_pic}}'></image>
171   - </view>
172   - <!--//等你来拼-->
173   - <view class='gdn ellipsis-1'>{{item.user.nickname}}</view>
  170 + <!-- <view class="flex ai_c"> -->
  171 + <!--//选项框头像-->
  172 + <view class='gtou'>
  173 + <image src='{{item.user.head_pic}}'></image>
  174 + </view>
  175 + <!--//等你来拼-->
  176 + <view class='gdn ellipsis-1'>{{item.user.nickname}}</view>
  177 + <!-- </view> -->
  178 +
174 179 <!--//还差几人,剩余时间-->
175 180 <view class="rel">
176   - <view class='ghaicha ellipsis-2 abs'>
  181 + <view class='ghaicha ellipsis-2'>
177 182 <text class='gred' wx:if="{{prom_act.max_ct_num >0}}"><text class="flex" wx:if="{{prom_act.max_ct_num - item.open_num>0}}">还差<text class="word-color">{{prom_act.max_ct_num - item.open_num}}</text>人享最低优惠</text><text wx:else>您已经享最低优惠</text></text>
178 183 <text class='gred' wx:else>还差<text style='color:#ff2753'>{{prom_act.ct_num - item.open_num}}</text>人成团 </text>
179 184 <view class="t_show">
... ... @@ -189,7 +194,7 @@
189 194 <view class='cjt t-c'>
190 195 去参团
191 196 </view>
192   - <view class="clear"></view>
  197 + <!-- <view class="clear"></view> -->
193 198 </view>
194 199 </view>
195 200 </view>
... ... @@ -1096,7 +1101,7 @@
1096 1101  
1097 1102 <!--商品的属性项目-->
1098 1103 <view class="xc-goods-attribute">
1099   - <view hidden="{{ismend==1}}" class="spec-name">商品属性</view>
  1104 + <view hidden="{{ismend==1}}" class="spec-name">商品规格</view>
1100 1105 <view hidden="{{ismend==1}}" style="max-height: 120rpx;overflow-y: auto;">
1101 1106 <view class="spec_bt {{gid==item.goods_id?'act':''}}" bindtap="sele_spec" data-gid='{{item.goods_id}}' wx:for="{{sku_g}}" wx:key="sku_g">
1102 1107 {{item.gg}}
... ... @@ -1108,7 +1113,7 @@
1108 1113 <view class="b_num">
1109 1114 <view>购买数量</view>
1110 1115 <view class="count">
1111   - <view bindtap="subCartNum" class="sub">-</view>
  1116 + <view bindtap="{{goodsInputNum <= 1 ? '':'subCartNum'}}" class="sub {{goodsInputNum <= 1 ? 'active':''}}">-</view>
1112 1117 <input bindblur="inputCartNum" type="number" value="{{goodsInputNum}}"></input>
1113 1118 <view bindtap="addCartNum" class="add">+</view>
1114 1119 </view>
... ...
pages/goods/goodsInfo/goodsInfo.wxss
1 1 @import "../../../utils/wxParse/wxParse.wxss";
2   -.container { margin-bottom: 100rpx; overflow: hidden;}
  2 +.container { margin-bottom: 100rpx; overflow: hidden;padding-top: 40rpx;}
3 3 image {
4 4 vertical-align: top;
5 5 }
... ... @@ -9,6 +9,9 @@ image {
9 9 display: flex;
10 10 justify-content: center;
11 11 width: 100%;
  12 + position: fixed;
  13 + top: 0;
  14 + z-index: 999;
12 15 /* height: 80rpx; */
13 16 /* margin-bottom: 20rpx; */
14 17 background-color: #fff;
... ... @@ -30,12 +33,14 @@ image {
30 33 display: flex;
31 34 justify-content: center;
32 35 width: 100%;
  36 + font-size: 26rpx;
33 37 }
34 38 .type-item-on {
35 39 color: #F95D74;
36 40 font-weight: bold;
37 41 /* border-bottom: 4rpx solid #F95D74; */
38 42 position: relative;
  43 + font-size: 30rpx;
39 44 }
40 45 .type-item-on:after {
41 46 content: '';
... ... @@ -555,11 +560,11 @@ border-radius: 0 56rpx 55rpx 0;
555 560 /* padding: 0 30rpx; */
556 561 font-size: 32rpx;
557 562 box-sizing: border-box;
558   - border-radius: 20rpx;
559   - height: 72%;
  563 + border-radius: 20rpx 20rpx 0 0;
  564 + /* height: 72%; */
560 565 }
561 566  
562   -.spec-model .pding{padding: 0 30rpx;}
  567 +.spec-model .pding{padding: 0 20rpx;}
563 568  
564 569 .spec-goods {
565 570 padding: 30rpx 0 20rpx;
... ... @@ -612,10 +617,13 @@ border-radius: 0 56rpx 55rpx 0;
612 617 .quhuo{font-size: 30rpx; color: #000}
613 618 .b_num{
614 619 display: flex;font-size: 30rpx; color: #333;
  620 + justify-content: space-between;
  621 + align-items: center;
  622 + padding: 20rpx 0;
615 623 }
616 624  
617 625 .count {
618   - position: fixed;
  626 + /* position: fixed; */
619 627 display: flex;
620 628 height: 50rpx;
621 629 border: 1rpx solid #000;
... ... @@ -638,6 +646,10 @@ border-radius: 0 56rpx 55rpx 0;
638 646 .sub {
639 647 border-right: 1px solid #000;
640 648 }
  649 +.sub.active {
  650 + /* background-color: #ddd; */
  651 + color: #ccc;
  652 +}
641 653  
642 654 .add {
643 655 border-left: 1px solid #000;
... ... @@ -662,14 +674,15 @@ border-radius: 0 56rpx 55rpx 0;
662 674 }
663 675  
664 676 .spec-cart-btns {
665   - width: 92%;
  677 + /* width: 92%; */
666 678 line-height: 70rpx;
667   - margin: 0rpx auto;
668   - margin-top: 160rpx;
669   - border-radius: 20rpx;
670   -position: fixed;
671   -bottom: 50rpx;
672   -left: 4%;
  679 + /* margin: 0rpx auto;
  680 + margin-top: 160rpx; */
  681 + /* border-radius: 20rpx; */
  682 +/* position: fixed; */
  683 +/* bottom: 50rpx; */
  684 +/* left: 4%; */
  685 + padding: 20rpx;
673 686 }
674 687  
675 688 .spec-cart-btn {
... ... @@ -763,8 +776,8 @@ left:31rpx;}
763 776 /*------拼单------*/
764 777 .pt_view{ text-align: center; width: 100%; height: 100rpx; line-height: 100rpx; font-size: 26rpx}
765 778 .pt_view .secondkill-img{width: 100%;height: 100%;}
766   -.pt_fir{ background: #fff;margin-bottom: 10rpx; }
767   -.pt_fir .pt_fir_title{display: flex; align-items: center; margin-left: 10rpx; margin-top: 20rpx; font-size: 28rpx; position: relative;}
  779 +.pt_fir{ background: #fff;/* margin-bottom: 10rpx; */}
  780 +.pt_fir .pt_fir_title{display: flex; align-items: center; /* margin-left: 10rpx; margin-top: 20rpx; */ font-size: 28rpx; position: relative;}
768 781 .pt_fir .pt_fir_title .kt_type{ color: #fff;background:#e9030d; width: 100rpx; line-height: 40rpx; border-radius: 6rpx; margin: 0 10rpx;
769 782 height: 40rpx; font-size: 24rpx; text-align: center;}
770 783 .pt_fir .pt_fir_title .price{color: #e9030d;font-size: 26rpx;}
... ... @@ -786,7 +799,7 @@ left:31rpx;}
786 799 .t_gz{padding: 10rpx 20rpx; font-size:28rpx }
787 800  
788 801 .pt_fir.se1{height: auto; margin: 0}
789   -.pt_fir.se2{height: auto; margin: 0;border-top:6rpx solid #eeeeee;border-bottom:2rpx solid #eeeeee;}
  802 +.pt_fir.se2{height: auto; margin: 0;/* border-top:6rpx solid #eeeeee;border-bottom:2rpx solid #eeeeee; */}
790 803  
791 804 .pt_hb{height:78rpx; line-height: 75rpx; position: relative; font-size: 32rpx;overflow: hidden;width:695rpx;margin-left:28rpx;
792 805 border-bottom: 1rpx solid #E5E5E5 }
... ... @@ -808,14 +821,14 @@ left:31rpx;}
808 821 .pt_fir .pt_fir_title.no-mar-b{margin-bottom: 0;padding-bottom: 10rpx; margin-left: 20rpx}
809 822 .pt_fir .pt_fir_title.boder-1{border-bottom: 1rpx #e7e7e7 solid}
810 823  
811   -.jie_price{padding: 10rpx 30rpx;}
  824 +.jie_price{/* padding: 10rpx 30rpx; */}
812 825 .jie_price_title{font-size: 30rpx; color: #a26270; margin-bottom: 10rpx}
813 826 .price_list{display: flex; width: 100%;}
814 827 .price_item{width: 25%;font-size: 28rpx; color: #4c336c}
815 828  
816   -.pt_fir.se2 .zzk-1{margin-top: 23rpx; font-size: 30rpx;position: relative; margin-bottom: 30rpx; border-left:4rpx solid red;margin-left:14rpx;height:30rpx;line-height:30rpx;padding-left:5rpx;}
817   -.ckgd{position: absolute;top:0;right:57rpx; color:#d70025; font-size: 32rpx;}
818   -.ckgd .arrow-one{width:18rpx;height:18rpx;border-color:#da0b31;margin-top:5rpx;}
  829 +.pt_fir.se2 .zzk-1{/* margin-top: 23rpx; */ font-size: 30rpx;position: relative; /* margin-bottom: 30rpx; */ border-left:4rpx solid red;/* margin-left:14rpx; */height:30rpx;line-height:30rpx;/* padding-left:5rpx; */}
  830 +.ckgd{/* position: absolute;top:0;right:57rpx; */ color:#d70025; font-size: 26rpx;}
  831 +.ckgd .arrow-one{width:14rpx;height:14rpx;border-color:#da0b31;/* margin-top:5rpx; */ margin:auto;}
819 832 .bview{
820 833 position: fixed; top:0; left:0; width: 100%; height: 100%;
821 834 background-color: rgba(0, 0, 0, 0.5);
... ... @@ -842,65 +855,71 @@ left:31rpx;}
842 855  
843 856 /*---多少人参加团--*/
844 857 .group {
845   - padding-top:25rpx;
846   - width: 91%;
847   - min-height: 92rpx;
848   - border-bottom:2rpx solid #eee;
849   - padding-bottom:25rpx;
  858 + padding-top:20rpx;
  859 + padding-bottom:20rpx;
  860 + width: 100%;
  861 + /* min-height: 92rpx; */
  862 + border-bottom: 2rpx solid #ebedf0;
850 863  
851 864 }
852 865  
853 866 .group .group-list {
854   -
855   - height: 90rpx;
856   - padding: 0 130rpx 0 100rpx;
857   - width: 470rpx;
  867 + display: flex;
  868 + align-items: center;
  869 + justify-content: space-around;
  870 + /* height: 90rpx; */
  871 + /* padding: 0 130rpx 0 100rpx; */
  872 + /* width: 470rpx;
858 873  
859   - position: absolute;
  874 + position: absolute; */
860 875 }
861 876  
862 877 .group .group-list .gtou {
863   - width: 80rpx;
864   - height: 80rpx;
865   - float: left;
  878 + width: 70rpx;
  879 + height: 70rpx;
  880 + /* float: left;
866 881 position: relative;
867 882 top: 6rpx;
868   - left: -96rpx;
  883 + left: -96rpx; */
869 884 }
870 885  
871 886 .group .group-list .gtou image {
872   - width: 80rpx;
873   - height: 80rpx;
874   - border-radius: 200rpx;
875   - background-color: green;
  887 + display: block;
  888 + width: 100%;
  889 + height: 100%;
  890 + border-radius: 50%;
  891 + background-color: #f0f0f0;
876 892 }
877 893  
878 894 .group .group-list .gdn {
879   - float: left;
  895 + width: 140rpx;
  896 + text-align: center;
  897 + /* float: left; */
880 898 font-size: 26rpx;
881   - line-height: 48rpx;
  899 + /* padding-left: 20rpx; */
  900 + /* line-height: 48rpx;
882 901 height: 48rpx;
883 902 width: 168rpx;
884 903 position: relative;
885 904 left: -80rpx;
886   - top:20rpx;
887   - font-weight:600;
  905 + top:20rpx; */
  906 + font-weight:bold;
888 907 }
889 908  
890 909 .group .group-list .ghaicha {
891   - width:300rpx;
  910 + /* width:300rpx; */
892 911 font-size: 27rpx;
893   - margin-left:180rpx;
  912 + /* margin-left:180rpx;
894 913 top:13rpx;
895   - left:-3rpx;
896   - font-weight:600;
  914 + left:-3rpx; */
  915 + font-weight: bold;
897 916  
898 917  
899 918 }
900 919  
901 920 .group .group-list .ghaicha .gred {
902   - height: 48rpx;
903   - width: 300rpx;
  921 + /* height: 48rpx;
  922 + width: 300rpx; */
904 923 }
905 924  
906 925 .gsj {
... ... @@ -911,9 +930,9 @@ left:31rpx;}
911 930 .group .group-list .cjt {
912 931 height:42rpx;
913 932 width: 137rpx;
914   - position: absolute;
  933 + /* position: absolute;
915 934 right: 4rpx;
916   - top:25rpx;
  935 + top:25rpx; */
917 936 line-height: 42rpx;
918 937 font-size: 24rpx;
919 938 color: #fff;
... ... @@ -926,7 +945,7 @@ left:31rpx;}
926 945 .gbody {
927 946 background-color: white;
928 947 }
929   -.t_show{overflow: hidden; display: flex; width: 300rpx; color: #292929; line-height: 36rpx;font-size:26rpx;
  948 +.t_show{/* overflow: hidden; */ display: flex; /* width: 300rpx; */ color: #292929; /* line-height: 36rpx; */font-size:26rpx;
930 949 }
931 950 .join-cart>view.set_width {
932 951 width:58%;
... ... @@ -984,7 +1003,7 @@ left:31rpx;}
984 1003 .bz_view{ /* height:100rpx; padding: 0 34rpx 0 13rpx; */ color: #333; font-size: 28rpx; padding: 20rpx;
985 1004 /* border-bottom: 3rpx solid #eee; */
986 1005 /* border-top: 3rpx solid #eee; */}
987   - .bz_view view{ width: 460rpx; max-height: 70rpx; overflow: hidden;}
  1006 + .bz_view view{ width: 460rpx; /* max-height: 70rpx; */ overflow: hidden;}
988 1007  
989 1008 .bb_view{ display: flex;align-items: center;justify-content: space-between; padding: 20rpx; color: #333;
990 1009 font-size: 30rpx; /* height: 104rpx; line-height: 104rpx; overflow: hidden; padding-right:26rpx */ }
... ... @@ -1997,11 +2016,11 @@ xc-ensure-div{
1997 2016 }
1998 2017  
1999 2018 .xc-video{
2000   - width:100rpx;
2001   - height: 50rpx;
2002   - line-height: 50rpx;
  2019 + /* width:100rpx; */
  2020 + /* height: 50rpx;
  2021 + line-height: 50rpx; */
2003 2022 text-align: center;
2004   - margin-left:-30rpx;
  2023 + /* margin-left:-30rpx; */
2005 2024  
2006 2025  
2007 2026 }
... ... @@ -2324,8 +2343,9 @@ margin-top:5rpx;
2324 2343 .xc-partner-frame{
2325 2344 border-bottom:2rpx solid #eee;
2326 2345 width:100%;
2327   -padding:0 20rpx;
2328   -height:56rpx;
  2346 +padding:20rpx;
  2347 +/* height:56rpx; */
  2348 +box-sizing: border-box;
2329 2349 }
2330 2350 .xc-person-number{
2331 2351 width:120rpx;
... ... @@ -2569,8 +2589,8 @@ margin-top: 10rpx;
2569 2589 }
2570 2590 .xc-goods-attribute{
2571 2591 border-bottom: 1px solid #eee;
2572   -padding-bottom: 15px;
2573   -margin-bottom:40rpx;
  2592 +padding-bottom: 20rpx;
  2593 +/* margin-bottom:40rpx; */
2574 2594 }
2575 2595 .xc-val-fream{
2576 2596 width: 105rpx;
... ... @@ -2597,11 +2617,11 @@ border-radius: 55rpx;
2597 2617 .s_btn{ margin-top: 25rpx; }
2598 2618 /* 美妆价的样式 */
2599 2619 .beauty-makeup-frame{
2600   - width: 101.5%;
2601   - margin: auto;
  2620 + /* width: 101.5%;
  2621 + margin: auto; */
2602 2622 height: 120rpx;
2603 2623 border-radius: 15rpx;
2604   - margin-top: 18px;
  2624 + margin-top: 10px;
2605 2625  
2606 2626 }
2607 2627 .beauty-makeup-frame .left{
... ... @@ -2609,7 +2629,7 @@ border-radius: 55rpx;
2609 2629 height: 100%;
2610 2630 background:#f7f7f7;
2611 2631 border-radius: 20rpx 0rpx 0rpx 20rpx;
2612   - padding-left: 20rpx;
  2632 + padding: 0 10rpx;
2613 2633 }
2614 2634 .card-frame{
2615 2635 margin-top: 0rpx; padding-right: 23rpx;
... ... @@ -2627,13 +2647,13 @@ border-radius: 55rpx;
2627 2647 }
2628 2648 .grade-card-frame{
2629 2649  
2630   - height:45rpx ;
  2650 + /* height:45rpx ; */
2631 2651 background: #3c300a;
2632 2652 border-radius: 20rpx;
2633   - margin-top: 10px;
2634   - margin-left: 7rpx;
  2653 + /* margin-top: 10px;
  2654 + margin-left: 7rpx; */
2635 2655 justify-content: center;
2636   - padding: 0 15rpx;
  2656 + padding: 4rpx 12rpx;
2637 2657 }
2638 2658 .grade-card-frame .img{
2639 2659 width: 24rpx;
... ...