Parcourir la source

优惠券页面调整

kk.shi il y a 3 ans
Parent
commit
164c3b661f
2 fichiers modifiés avec 142 ajouts et 6 suppressions
  1. 18 5
      pages/signIn/record/record.wxml
  2. 124 1
      pages/signIn/record/record.wxss

+ 18 - 5
pages/signIn/record/record.wxml

@@ -24,12 +24,25 @@
   <!-- 使用内容 -->
   <view class="content">
     <!-- 主要内容 -->
-    <view class="check-in-content">
+    <view class="check-in-content flex-column">
       <!-- 优惠券内容 -->
-      <view class="coupon">
-        <view class="coupon_left"></view>
-        <view class="coupon_center"></view>
-        <view class="coupon_right"></view>
+      <view class="coupon flex-row">
+        <view class="coupon-left flex-row">
+          <view class="coupon-left-symbol">¥</view>
+          <view class="coupon-left-num">1.09</view>
+        </view>
+        <view class="coupon-center flex-column">
+          <view class="coupon-center-upper">圣诞活动代金券</view>
+          <view class="coupon-center-bm flex-row">
+            <view class="coupon-center-block1"></view>
+            <view class="coupon-center-middle">满199使用</view>
+            <view class="coupon-center-block2"></view>
+          </view>
+          <view class="coupon-center-lower">2021.10.10-2022.01.02</view>
+        </view>
+        <view class="coupon-right">
+          <view class="coupon-right-usenow"></view>
+        </view>
       </view>
       <!-- 获得明细 -->
       <view></view>

+ 124 - 1
pages/signIn/record/record.wxss

@@ -69,4 +69,127 @@
   background: #BF2637;
   border-radius: 2px;
   margin-top: 10px;
-}
+}
+
+.content{
+  width: 100%;
+  height: auto;
+  background: #F3F3F3;
+}
+
+.check-in-content{
+  width: 100%;
+  height: auto;
+  background: #FFFFFF;
+  margin-top: 4px;
+}
+
+.coupon{
+  width: 708rpx;
+  height: 220rpx;
+  background-image: url(https://dy.shpr.top/luckDraw/cash_coupon.png);
+  background-size: 100% 100%;
+  margin-top: 30rpx;
+  justify-content: left !important;
+}
+
+.coupon-left{
+  width: 110px;
+  height: 100%;
+  text-align: center;
+  align-items: flex-end;
+}
+
+.coupon-center{
+  width: 164px;
+  height: 100%;
+  align-items: flex-start !important;
+  justify-content: space-between;
+}
+
+.coupon-right{
+  width: 98px;
+  height: 100%;
+}
+
+.coupon-left-symbol{
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 40px;
+}
+
+.coupon-left-num{
+  font-size: 59px;
+  font-family: Impact;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 71px;
+}
+
+.coupon-left-symbol,.coupon-left-num{
+  margin-bottom: 8px;
+}
+
+.coupon-center-upper,.coupon-center-bm,.coupon-center-lower{
+  margin-left: 18px;
+}
+.coupon-center-upper{
+  width: 140px;
+  height: 20px;
+  font-size: 20px;
+  font-weight: 500;
+  color: #443E5B;
+  line-height: 19px;
+  margin-top: 24px;
+  overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.coupon-center-middle{
+  width: 63px;
+  height: 15px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 16px;
+  overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.coupon-center-lower{
+  width: 146px;
+  height: 15px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 16px;
+  margin-bottom: 11px;
+}
+
+.coupon-right-usenow{
+  width: 81px;
+  height: 28px;
+  background-image: url(https://dy.shpr.top/luckDraw/cash_use_now.png);
+  background-size: 100% 100%;
+  margin-top: 47px;
+  margin-left: -10px;
+}
+
+.coupon-center-bm{
+  width: 100px;
+  height: 15px;
+}
+
+.coupon-center-block1,.coupon-center-block2{
+  width: 5px;
+  height: 5px;
+  background: #443E5B;
+  transform:rotate(45deg);
+  margin: 0 10rpx;
+}
+
+