style(微信小程序): 更新首页优惠券的样式 :art: (#520)

litemall-wx/pages/index/index.wxml

@@ -1,198 +1,198 @@
-<!--index.wxml-->
+<!-- index.wxml -->
 <view class="container">
-<view class="search">
-    <navigator url="/pages/search/search" class="input">
-      <van-icon name="search"/>
-      <text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
-    </navigator>
-  </view>
-  <swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
-    <swiper-item wx:for="{{banner}}" wx:key="id">
-      <block wx:if="{{item.link>0}}">
-        <navigator url="/pages/goods/goods?id={{item.link}}">
-        <image src="{{item.url}}" background-size="cover"></image>
+    <view class="search">
+        <navigator url="/pages/search/search" class="input">
+            <van-icon name="search" />
+            <text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
         </navigator>
-      </block>
-      <block wx:else>
-        <image src="{{item.url}}" background-size="cover"></image>
-      </block>
-    </swiper-item>
-  </swiper>
-  <view class="m-menu">
-    <navigator class="item" url="/pages/category/category?id={{item.id}}" wx:for="{{channel}}" wx:key="id">
-      <image src="{{item.iconUrl}}" background-size="cover"></image>
-      <text>{{item.name}}</text>
-    </navigator>
-  </view>
-
-  <view class="a-section a-coupon" wx:if="{{coupon.length > 0}}">
-    <view class="h">
-      <view class="title">
-        <view>
-          <navigator url="/pages/coupon/coupon">
-            <text class="txt">优惠券</text>
-          </navigator>
-        </view>
-      </view>
     </view>
-    <view wx:if="{{coupon.length>0}}" class="b">
-      <view class="item" wx:for="{{coupon}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="getCoupon" data-index="{{item.id}}">
-        <view class="tag">{{item.tag}}</view>
-        <view class="content">
-          <view class="left">
-            <view class="discount">{{item.discount}}元</view>
-            <view class="min"> 满{{item.min}}元使用</view>
-          </view>
-          <view class="right">
-            <view class="name">{{item.name}}</view>
-            <view class="desc">{{item.desc}}</view>
-            <view class="time" wx:if="{{item.days != 0}}">有效期：{{item.days}}天</view>
-            <view class="time" wx:else> 有效期：{{item.startTime}} - {{item.endTime}}</view>
-          </view>
-        </view>
-      </view>
+    <swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+        <swiper-item wx:for="{{banner}}" wx:key="id">
+            <block wx:if="{{item.link>0}}">
+                <navigator url="/pages/goods/goods?id={{item.link}}">
+                    <image src="{{item.url}}" background-size="cover"></image>
+                </navigator>
+            </block>
+            <block wx:else>
+                <image src="{{item.url}}" background-size="cover"></image>
+            </block>
+        </swiper-item>
+    </swiper>
+    <view class="m-menu">
+        <navigator class="item" url="/pages/category/category?id={{item.id}}" wx:for="{{channel}}" wx:key="id">
+            <image src="{{item.iconUrl}}" background-size="cover"></image>
+            <text>{{item.name}}</text>
+        </navigator>
     </view>
-  </view>
-
-  <view class="a-section a-groupon" wx:if="{{groupons.length > 0}}">
-    <view class="h">
-      <view class="title">
-        <view>
-          <navigator url="/pages/groupon/grouponList/grouponList">
-            <text class="txt">团购专区</text>
-          </navigator>
+    <view class="a-section a-coupon" wx:if="{{coupon.length > 0}}">
+        <view class="h">
+            <view class="title">
+                <view>
+                    <navigator url="/pages/coupon/coupon">
+                        <text class="txt">优惠券</text>
+                    </navigator>
+                </view>
+            </view>
         </view>
-      </view>
-    </view>
-    <view class="b">
-      <view class="item" wx:for="{{groupons}}" wx:for-index="index" wx:for-item="item" wx:key="id">
-        <navigator url="/pages/goods/goods?id={{item.id}}">
-          <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-          <view class="right">
-            <view class="text">
-              <view class="header">
-                <text class="name">{{item.name}}</text>
-                <van-tag type="primary">{{item.grouponMember}}人成团</van-tag>
-              </view>
-              <view class="expire">
-                <van-tag round type="warning">有效期至 {{item.expireTime}}</van-tag>
-              </view>
-              <text class="desc">{{item.brief}}</text>
-              <view class="price">
-                <view class="counterPrice">现价：￥{{item.retailPrice}}</view>
-                <view class="retailPrice">团购价：￥{{item.grouponPrice}}</view>
-              </view>
+        <view wx:if="{{coupon.length>0}}" class="b">
+            <view class="coupon_item" wx:for="{{coupon}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="getCoupon" data-index="{{item.id}}">
+                <view class="coupon_price">
+                    <view>
+                        <!-- <view class="tag"></view> -->
+                        <view class="price">{{item.discount}}元</view>
+                        <view class="p">满{{item.min}}元使用</view>
+                    </view>
+                </view>
+                <view class="coupon_msg">
+                    <view class="coupon_condition">
+                        <view class="coupon_tag">
+                            <view class="coupon_tag_text">{{item.tag}}</view>
+                        </view>
+                        <view class="text">{{item.name}}</view>
+                    </view>
+                    <view class="coupon_instruction">{{item.desc}}</view>
+                    <view class="coupon_date" wx:if="{{item.days != 0}}">{{item.days}}天</view>
+                    <view class="coupon_date" wx:else>{{item.startTime}} - {{item.endTime}}</view>
+                </view>
             </view>
-          </view>
-        </navigator>
-      </view>
-    </view>
-  </view>
-
-  <view class="a-section a-brand">
-    <view class="h">
-      <navigator url="../brand/brand">
-        <text class="txt">品牌制造商直供</text>
-      </navigator>
+        </view>
     </view>
-    <view class="b">
-      <view class="item item-1" wx:for="{{brands}}" wx:key="id">
-        <navigator url="/pages/brandDetail/brandDetail?id={{item.id}}">
-          <view class="wrap">
-            <image class="img" src="{{item.picUrl}}" mode="aspectFill"></image>
-            <view class="mt">
-              <text class="brand">{{item.name}}</text>
-              <text class="price">{{item.floorPrice}}</text>
-              <text class="unit">元起</text>
+    <view class="a-section a-groupon" wx:if="{{groupons.length > 0}}">
+        <view class="h">
+            <view class="title">
+                <view>
+                    <navigator url="/pages/groupon/grouponList/grouponList">
+                        <text class="txt">团购专区</text>
+                    </navigator>
+                </view>
             </view>
-          </view>
-        </navigator>
-      </view>
-    </view>
-  </view>
-  <view class="a-section a-new" wx:if="{{newGoods.length > 0}}">
-    <view class="h">
-      <view>
-        <navigator url="../newGoods/newGoods">
-          <text class="txt">周一周四 · 新品首发</text>
-        </navigator>
-      </view>
-    </view>
-    <view class="b">
-      <view class="item" wx:for="{{newGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
-        <navigator url="../goods/goods?id={{item.id}}">
-          <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-          <text class="name">{{item.name}}</text>
-          <text class="price">￥{{item.retailPrice}}</text>
-        </navigator>
-      </view>
-    </view>
-  </view>
-
-  <view class="a-section a-popular" wx:if="{{hotGoods.length > 0}}">
-    <view class="h">
-      <view>
-        <navigator url="../hotGoods/hotGoods">
-          <text class="txt">人气推荐</text>
-        </navigator>
-      </view>
+        </view>
+        <view class="b">
+            <view class="item" wx:for="{{groupons}}" wx:for-index="index" wx:for-item="item" wx:key="id">
+                <navigator url="/pages/goods/goods?id={{item.id}}">
+                    <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+                    <view class="right">
+                        <view class="text">
+                            <view class="header">
+                                <text class="name">{{item.name}}</text>
+                                <van-tag type="primary">{{item.grouponMember}}人成团</van-tag>
+                            </view>
+                            <view class="expire">
+                                <van-tag round type="warning">有效期至 {{item.expireTime}}</van-tag>
+                            </view>
+                            <text class="desc">{{item.brief}}</text>
+                            <view class="price">
+                                <view class="counterPrice">现价：￥{{item.retailPrice}}</view>
+                                <view class="retailPrice">团购价：￥{{item.grouponPrice}}</view>
+                            </view>
+                        </view>
+                    </view>
+                </navigator>
+            </view>
+        </view>
     </view>
-    <view class="b">
-      <view class="item" wx:for="{{hotGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
-        <navigator url="/pages/goods/goods?id={{item.id}}">
-          <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-          <view class="right">
-            <view class="text">
-              <text class="name">{{item.name}}</text>
-              <text class="desc">{{item.brief}}</text>
-              <text class="price">￥{{item.retailPrice}}</text>
+    <view class="a-section a-brand">
+        <view class="h">
+            <navigator url="../brand/brand">
+                <text class="txt">品牌制造商直供</text>
+            </navigator>
+        </view>
+        <view class="b">
+            <view class="item item-1" wx:for="{{brands}}" wx:key="id">
+                <navigator url="/pages/brandDetail/brandDetail?id={{item.id}}">
+                    <view class="wrap">
+                        <image class="img" src="{{item.picUrl}}" mode="aspectFill"></image>
+                        <view class="mt">
+                            <text class="brand">{{item.name}}</text>
+                            <text class="price">{{item.floorPrice}}</text>
+                            <text class="unit">元起</text>
+                        </view>
+                    </view>
+                </navigator>
             </view>
-          </view>
-        </navigator>
-      </view>
+        </view>
     </view>
-  </view>
-
-  <view class="a-section a-topic" wx:if="topics.length > 0" hidden="{{topics.length <= 0}}">
-    <view class="h">
-      <view>
-        <navigator url="/pages/topic/topic">
-          <text class="txt">专题精选</text>
-        </navigator>
-      </view>
+    <view class="a-section a-new" wx:if="{{newGoods.length > 0}}">
+        <view class="h">
+            <view>
+                <navigator url="../newGoods/newGoods">
+                    <text class="txt">周一周四 · 新品首发</text>
+                </navigator>
+            </view>
+        </view>
+        <view class="b">
+            <view class="item" wx:for="{{newGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
+                <navigator url="../goods/goods?id={{item.id}}">
+                    <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+                    <text class="name">{{item.name}}</text>
+                    <text class="price">￥{{item.retailPrice}}</text>
+                </navigator>
+            </view>
+        </view>
     </view>
-    <view class="b">
-      <scroll-view scroll-x class="list">
-        <view class="item" wx:for="{{topics}}" wx:for-index="index" wx:for-item="item" wx:key="id">
-          <navigator url="../topicDetail/topicDetail?id={{item.id}}">
-            <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-            <view class="np">
-              <text class="name">{{item.title}}</text>
-              <text class="price">￥{{item.price}}元起</text>
+    <view class="a-section a-popular" wx:if="{{hotGoods.length > 0}}">
+        <view class="h">
+            <view>
+                <navigator url="../hotGoods/hotGoods">
+                    <text class="txt">人气推荐</text>
+                </navigator>
+            </view>
+        </view>
+        <view class="b">
+            <view class="item" wx:for="{{hotGoods}}" wx:for-index="index" wx:for-item="item" wx:key="id">
+                <navigator url="/pages/goods/goods?id={{item.id}}">
+                    <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+                    <view class="right">
+                        <view class="text">
+                            <text class="name">{{item.name}}</text>
+                            <text class="desc">{{item.brief}}</text>
+                            <text class="price">￥{{item.retailPrice}}</text>
+                        </view>
+                    </view>
+                </navigator>
             </view>
-            <text class="desc">{{item.subtitle}}</text>
-          </navigator>
         </view>
-      </scroll-view>
     </view>
-  </view>
-  <view class="good-grid" wx:for="{{floorGoods}}" wx:key="id">
-    <view class="h" wx:if="{{item.goodsList.length>0}}">
-      <text>{{item.name}}</text>
+    <view class="a-section a-topic" wx:if="topics.length > 0" hidden="{{topics.length <= 0}}">
+        <view class="h">
+            <view>
+                <navigator url="/pages/topic/topic">
+                    <text class="txt">专题精选</text>
+                </navigator>
+            </view>
+        </view>
+        <view class="b">
+            <scroll-view scroll-x class="list">
+                <view class="item" wx:for="{{topics}}" wx:for-index="index" wx:for-item="item" wx:key="id">
+                    <navigator url="../topicDetail/topicDetail?id={{item.id}}">
+                        <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+                        <view class="np">
+                            <text class="name">{{item.title}}</text>
+                            <text class="price">￥{{item.price}}元起</text>
+                        </view>
+                        <text class="desc">{{item.subtitle}}</text>
+                    </navigator>
+                </view>
+            </scroll-view>
+        </view>
     </view>
-    <view class="b">
-      <block wx:for="{{item.goodsList}}" wx:for-index="iindex" wx:for-item="iitem" wx:key="id">
-        <view class="item {{iindex % 2 == 0 ? '' : 'item-b'}}">
-          <navigator url="../goods/goods?id={{iitem.id}}" class="a">
-            <image class="img" src="{{iitem.picUrl}}" background-size="cover"></image>
-            <text class="name">{{iitem.name}}</text>
-            <text class="price">￥{{iitem.retailPrice}}</text>
-          </navigator>
+    <view class="good-grid" wx:for="{{floorGoods}}" wx:key="id">
+        <view class="h" wx:if="{{item.goodsList.length>0}}">
+            <text>{{item.name}}</text>
         </view>
-      </block>
+        <view class="b">
+            <block wx:for="{{item.goodsList}}" wx:for-index="iindex" wx:for-item="iitem" wx:key="id">
+                <view class="item {{iindex % 2 == 0 ? '' : 'item-b'}}">
+                    <navigator url="../goods/goods?id={{iitem.id}}" class="a">
+                        <image class="img" src="{{iitem.picUrl}}" background-size="cover"></image>
+                        <text class="name">{{iitem.name}}</text>
+                        <text class="price">￥{{iitem.retailPrice}}</text>
+                    </navigator>
+                </view>
+            </block>
+        </view>
+        <navigator url="/pages/category/category?id={{item.id}}" class="t" wx:if="{{item.goodsList.length>0}}">
+            <view class="txt">{{'更多'+item.name+'好物 >'}}</view>
+        </navigator>
     </view>
-    <navigator url="/pages/category/category?id={{item.id}}" class="t" wx:if="{{item.goodsList.length>0}}">
-      <view class="txt">{{'更多'+item.name+'好物 >'}}</view>
-    </navigator>
-  </view>
 </view>

litemall-wx/pages/index/index.wxss

@@ -127,73 +127,6 @@
   overflow: hidden;
 }
 
-.a-coupon .b .item {
-  position: relative;
-  height: 200rpx;
-  width: 700rpx;
-  background: linear-gradient(to right, #cfa568, #e3bf79);
-  margin-bottom: 10rpx;
-  margin-left: 30rpx;
-  margin-right: 30rpx;
-  padding-top: 30rpx;
-}
-
-.a-coupon .b .tag {
-  height: 32rpx;
-  background: #a48143;
-  padding-left: 16rpx;
-  padding-right: 16rpx;
-  position: absolute;
-  left: 20rpx;
-  color: #fff;
-  top: 20rpx;
-  font-size: 20rpx;
-  text-align: center;
-  line-height: 32rpx;
-}
-
-.a-coupon .b .content {
-  margin-top: 24rpx;
-  margin-left: 40rpx;
-  display: flex;
-  margin-right: 40rpx;
-  flex-direction: row;
-}
-
-.a-coupon .b .content .left {
-  flex: 1;
-}
-
-.a-coupon .b .discount {
-  font-size: 50rpx;
-  color: #b4282d;
-}
-
-.a-coupon .b .min {
-  color: #fff;
-}
-
-.a-coupon .b .content .right {
-  width: 400rpx;
-}
-
-.a-coupon .b .name {
-  font-size: 44rpx;
-  color: #fff;
-  margin-bottom: 14rpx;
-}
-
-.a-coupon .b .desc {
-  font-size: 24rpx;
-  color: #fff;
-}
-
-.a-coupon .b .time {
-  font-size: 24rpx;
-  color: #fff;
-  line-height: 30rpx;
-}
-
 .a-groupon {
   width: 750rpx;
   height: auto;
@@ -234,11 +167,13 @@
 }
 
 .a-groupon .b .name {
-  float: left;
-  display: block;
-  color: #333;
-  line-height: 50rpx;
-  font-size: 30rpx;
+    float: left;
+    display: block;
+    color: #333;
+    line-height: 50rpx;
+    font-size: 30rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .a-groupon .b .desc {
@@ -532,4 +467,99 @@
   color: #666;
   padding-left: 10rpx;
   font-size: 30rpx;
-}
+}
+
+/* 优惠券 */
+.coupon_item {
+    position: relative;
+    /* background: linear-gradient(to right, #cfa568, #e3bf79); */
+    background: linear-gradient(136deg,#fdda96 0,#e3ad61 100%);
+    margin: 0 .5rem;
+    margin-bottom: .75rem;
+    display: flex;
+    border-radius: .3rem;
+}
+.coupon_item view {
+    color: #fff;
+}
+
+.coupon_price {
+    display: flex;
+    position: relative;
+    width: 6rem;
+    font-size: .7rem;
+    text-align: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border-radius: .2rem;
+    -webkit-box-shadow: 0 0.1rem 0.4rem 0 rgb(0 0 0 / 5%);
+    box-shadow: 0 0.1rem 0.4rem 0 rgb(0 0 0 / 5%);
+    background: linear-gradient(136deg,#ff8787 0,#fb3636 100%);
+}
+.coupon_price .price{
+    line-height: 1;
+    font-size: 1.8rem;
+}
+.coupon_price .p{
+    margin-top: .25rem;
+    font-size: .6rem;
+    line-height: 1;
+}
+.coupon_msg{
+    flex: 1;
+    overflow: hidden;
+    padding: .3rem 0 0 .35rem;
+}
+.coupon_condition{
+    min-height: 1.8rem;
+    line-height: .95rem;
+    font-size: .6rem;
+    padding-right: .6rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.coupon_condition .text{
+    font-size: 0.8rem;
+    vertical-align: middle;
+    display: inline;
+    user-select: none;
+    white-space: pre-wrap;
+}
+.coupon_tag{
+    display: inline-block;
+    height: .7rem;
+    color: #fff;
+    line-height: .7rem;
+    text-align: center;
+    padding: 0 .25rem;
+    border-radius: .35rem;
+    margin-right: .25rem;
+    border-color: #fe5b5b;
+    background-color: #fe5b5b;
+}
+.coupon_tag_text{
+    font-size: .5rem;
+}
+.coupon_instruction{
+    min-width: 7.5rem;
+    height: .95rem;
+    line-height: .95rem;
+    padding-right: .6rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.coupon_date{
+    font-size: .65rem;
+    /* line-height: .5rem; */
+    padding: .5rem 0;
+    padding-right: .5rem;
+    width: 100%;
+}