签到弹性布局

pages/signIn/record/record.wxml

@@ -1,97 +1,43 @@
 <!--pages/signIn/record/record.wxml-->
-<view class="perCenter">
-<!-- 个人中心视图 -->
-    <view class="head-bg" catchtap="turnPrize">
-       <image class="image_bg" src="/images/signIn/per_head.png" />
-       <view class="numCount" >4</view>
-       <view class="explain" >请在优惠券有效期内尽快使用</view>
-       <button class="sign-in-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >登录</button>
-       <view class="sign-in-pro-nickname" wx:if="{{isLogin}}">{{phone.toHide(mobileTop)}}</view>
+<view class="record flex-column">
+  <!-- 首部信息 -->
+  <view class="head flex-column">
+    <view class="head_num">4</view>
+    <view class="head_text">请在优惠券有效期内尽快使用</view>
+  </view>
+  <!-- 中部说明 -->
+  <view class="explain flex-row">
+    <view class="explain-left flex-column">
+      <view class="explain-discount">我的优惠</view>
+      <view class="explain-column"></view>
     </view>
-    <view class="sign-in-pro-cp">
-      <!-- 我的优惠 -->
-      <view class="sign-in-coupon" catchtap="getDiscount">
-        <view class="sign-in-cn"></view>
-        <view class="sign-in-cz">我的优惠</view>
-        <view class="sign-in-cjh"><view class="sign-in-cj"></view></view>
-      </view>
-      <!-- 获得明细 -->
-      <view class="sign-in-detail" catchtap="getDetailed">
-        <view class="sign-in-pn"></view>
-        <view class="sign-in-pz">获得明细</view>
-        <view class="sign-in-cjh"><view class="sign-in-cj"></view></view>
-      </view>
-      <!-- 使用/失效 -->
-      <view class="sign-in-usefail" catchtap="getUseFail">
-        <view class="sign-in-pn"></view>
-        <view class="sign-in-pz">使用/失效</view>
-        <view class="sign-in-cjh"><view class="sign-in-cj"></view></view>
-      </view>
+    <view class="explain-center flex-column">
+      <view class="explain-detailed">获取明细</view>
+      <view class="explain-column"></view>
     </view>
-    
-    <view id="couponZD" class="sign-in-theme" hidden="true">
-      <!-- 折扣券 -->
-      <view class="sign-in-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" >
-        <view class="sign-in-words">
-          <view class="sign-in-discount1">
-            <view class="sign-in-zkz4" wx:if="{{item.couponType == 'D'}}">{{item.formatDiscount ?item.formatDiscount:0}}</view>
-            <view class="sign-in-zkz5" wx:if="{{item.couponType == 'D'}}">折</view>
-
-            <view class="sign-in-djz4" wx:if="{{item.couponType == 'C'}}">￥</view>
-            <view class="sign-in-djz5" wx:if="{{item.couponType == 'C'}}">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
-          </view>
-          <view class="sign-in-discount2">
-            <view class="sign-in-zkz1">{{item.goodsName}}</view>
-           <view class="sign-in-mj">
-            <view class="sign-in-zkz21"></view>
-            <view class="sign-in-zkz2" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
-            <view class="sign-in-zkz2" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}使用</view>
-            <view class="sign-in-zkz22"></view>
-           </view>
-            <view class="sign-in-zkz3">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
-          </view>
-        </view>
-        <image wx:if="{{item.couponType == 'D'}}" class="image_zk" src="/images/signIn/coupon1.png" />
-        <image wx:if="{{item.couponType == 'D'}}" class="image_zk_un" src="/images/signIn/coupon_use_now.png" />
-
-        <image wx:if="{{item.couponType == 'C'}}" class="image_zk" src="/images/signIn/cash_coupon.png" />
-        <image wx:if="{{item.couponType == 'C'}}" class="image_zk_un" src="/images/signIn/cc_use_now.png" />
-        <navigator class="_btn _exchange" 
-            target = "miniProgram" 
-            app-id="wxd92a2d29f8022f40"
-            path="page/index/index"
-            open-type='navigate'> 
-            </navigator>
-      </view>
-      
-      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
-      <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
+    <view class="explain-right flex-column">
+      <view class="explain-utility">使用/失效</view>
+      <view class="explain-column"></view>
     </view>
+  </view>
 
-    <view id="prize" class="sign-in-theme" hidden="{{hidden2}}">
-      <!-- 获得明细 -->
-      <view class="sign-in-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" wx:if="{{item.goodsType == 2}}">
-        <view class="sign-in-wordsj">
-          <view class="sign-in-discount1j">
-           
-            <image class="sign-in-zkzj" src="/images/sign-in/prize.png" />
-          </view>
-          <view class="sign-in-discount2">
-            <view class="sign-in-zkz1j">{{item.goodsName}}</view>
-            <view class="sign-in-zkz3j">奖品参数</view>
-          </view>
-        </view>
-        <image class="image_zk_unj" src="/images/sign-in/choice.png" />
-        <navigator class="_btn _exchange" 
-            target = "miniProgram" 
-            app-id="wxd92a2d29f8022f40"
-            path="page/index/index"
-            open-type='navigate'> 
-            </navigator>
+  <!-- 使用内容 -->
+  <view class="content">
+    <!-- 主要内容 -->
+    <view class="check-in-content">
+      <!-- 优惠券内容 -->
+      <view class="coupon">
+        <view class="coupon_left"></view>
+        <view class="coupon_center"></view>
+        <view class="coupon_right"></view>
       </view>
-      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可领取奖品 ————</view>
-      <view class="no_result" wx:if="{{noMore}}">———— 更多奖品 | 敬请期待 ————</view>
+      <!-- 获得明细 -->
+      <view></view>
+      <!-- 使用/失效 -->
+      <view></view>
+      <view></view>  
     </view>
+  </view>
 </view>
 
 <!-- 使用wxs 手机号码中间四位显示为*号 -->

pages/signIn/record/record.wxss

@@ -1,332 +1,72 @@
 /* pages/signIn/record/record.wxss */
-.personal{
+.record{
   width: 750rpx;
   height: auto;
   padding-bottom: 119rpx;
+  
 }
 
-.head-bg{
-  width: 750rpx;
-  height: 464rpx;
+/* 垂直方向布局，水平居中 **/
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: left;
 }
-.image_bg{
+
+/* 水平方向布局，垂直居中 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.head{
   width: 750rpx;
   height: 464rpx;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
+  background-image: url(https://dy.shpr.top/luckDraw/per_head.png);
+  background-size: 100% 100%;
 }
 
-.numCount{
-  width: 100%;
-  height: 150rpx;
-  position: relative;
+.head_num{
   font-size: 136rpx;
   font-family: Source Han Sans CN;
   font-weight: 500;
   color: #FEFEFE;
-  z-index: 2;
-  text-align: center;
-  top: 120rpx;
+  margin-top: 120rpx;
 }
 
-.explain{
-  width: 100%;
-  height: 60rpx;
-  position: relative;
+.head_text{
   font-size: 32rpx;
   font-family: Source Han Sans CN;
   font-weight: 400;
   color: #FEFEFE;
-  z-index: 2;
-  text-align: center;
-  top: 160rpx;
 }
 
-.sign-in-pro-nickname{
-  width: 750rpx;
-  height: 50rpx;
-  font-size: 40rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
-  color: #FEFEFE;
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  top: 150rpx;
-}
-
-.sign-in-pro-cp{
+.explain{
   width: 750rpx;
   height: 120rpx;
+  justify-content: space-between !important;
 }
 
-.sign-in-coupon,.sign-in-usefail{
-  display: inline-block;
-  width: 35%;
-  height: 100%;
-}
-
-.sign-in-detail{
-  display: inline-block;
-  width: 30%;
-  height: 100%;
-}
-
-.sign-in-cn,.sign-in-cz,.sign-in-pn,.sign-in-pz,.sign-in-cjh{
+.explain-left,.explain-center,.explain-right{
+  width: 250rpx;
   text-align: center;
 }
-.sign-in-cn,.sign-in-pn{
-  margin-top: 30rpx;
-  font-size: 36rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
-  color: #BF2637;
-}
-.sign-in-cz,.sign-in-pz{
+
+.explain-discount,.explain-detailed,.explain-utility{
   font-size: 32rpx;
   font-family: Source Han Sans CN;
   font-weight: 400;
   color: #303030;
 }
-.sign-in-cj{
-  width: 78rpx;
-  height: 6rpx;
-  background: #BF2637;
-  border-radius: 4rpx;
-  margin: 10rpx auto;
-}
 
-.sign-in-content{
-  width: 708rpx;
-  height: 220rpx;
-  position: relative;
-  margin: 0 auto 20rpx;
-}
-.image_zk{
-  width: 708rpx;
-  height: 220rpx;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 0;
-}
-
-.image_zk_un{
-  display: inline-block;
-  width: 162rpx;
-  height: 56rpx;
-  position:absolute;
-  z-index: 3;
-  bottom: 70rpx;
-  right: 26rpx;
-}
 
-.image_zk_unj{
-  display: inline-block;
-  width: 162rpx;
-  height: 56rpx;
-  position:absolute;
-  z-index: 2;
-  bottom: 70rpx;
-  right: 26rpx;
-}
-._btn {
-  display: inline-block;
-  width: 162rpx;
-  height: 56rpx;
-  position:absolute;
-  z-index: 3;
-  bottom: 70rpx;
-  right: 26rpx;
-}
-
-.sign-in-discount1,.sign-in-discount2,.sign-in-zkz21,.sign-in-zkz22,.sign-in-zkz2{
-  display: inline-block;
-}
-
-.sign-in-zkz4,.sign-in-zkz5,.sign-in-djz4,.sign-in-djz5{
-  display: inline;
-}
-
-.sign-in-discountj,.sign-in-zkzj{
-  display: inline-block;
-}
-.sign-in-words{
-  position:relative;
-  z-index: 2;
-  width: 708rpx;
-  height: 220rpx;
-  display: flex;
-  flex-direction: row;
-}
-
-.sign-in-wordsj{
-  position:relative;
-  z-index: 2;
-  width: 708rpx;
-  height: 220rpx;
-  display: flex;
-  flex-direction: row;
-  background: #FFFFFF;
-  border: 0.5rpx solid #FF7A03;
-  box-shadow: 0rpx 0rpx 50rpx 8rpx rgba(127, 127, 127, 0.09);
-  border-radius: 20rpx;
-}
-
-.sign-in-discount1{
-  width: 208rpx;
-  height: 100%;
-  text-align: center;
-  line-height: 220rpx;
-}
-.sign-in-discount1j{
-  width: 214rpx;
-  height: 220rpx;
-  background: #FFE9B0;
-  border: 0rpx solid #FF7A03;
-  border-radius: 20rpx 0 0 20rpx;
-  text-align: center;
-}
-.sign-in-discount1 view:nth-child(1) {
-  position: relative;
-  top: 60rpx;
-}
-
-.sign-in-discountj view:nth-child(1) {
-  position: relative;
-  top: 40rpx;
-}
-
-.sign-in-discount1 view:nth-child(2) {
-  position: relative;
-  top: 60rpx;
-}
-
-.sign-in-discount2{
-  width: 500rpx;
-  height: 100%;
-}
-
-.sign-in-zkz4 {
-  font-size: 100rpx;
-  font-family: Impact;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 142rpx;
-}
-
-.sign-in-djz5{
-  font-size: 90rpx;
-  font-family: Impact;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 142rpx;
-}
-
-.sign-in-zkzj{
-  width: 134rpx;
-  height: 106rpx;
-  position: relative;
-  top: 55rpx;
-}
-
-.sign-in-zkz5,.sign-in-djz4{
-  font-size: 40rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 48rpx;
-}
-
-.sign-in-zkz1{
-  font-size: 40rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
-  color: #443E5B;
-  line-height: 32rpx;
-  margin-top: 48rpx;
-  margin-left: 48rpx;
-}
-
-.sign-in-zkz1j{
-  font-size: 40rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
-  color: #443E5B;
-  line-height: 40rpx;
-  margin-top: 48rpx;
-  margin-left: 48rpx;
-}
-
-.sign-in-mj{
-  margin-left: 48rpx;
-  margin-top: 20rpx;
-  margin-bottom: 20rpx;
-}
-.sign-in-zkz2{
-  font-size: 26rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 32rpx;
-}
-.sign-in-zkz21,.sign-in-zkz22{
-  width: 14rpx;
-  height: 14rpx;
-  background: #443E5B;
-  transform:rotate(45deg);
-  margin: 0 10rpx;
-}
-.sign-in-zkz3{
-  font-size: 26rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 32rpx;
-  margin-left: 48rpx;
-}
-
-.sign-in-zkz3j{
-  font-size: 26rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 32rpx;
-  line-height: 32rpx;
-  margin-left: 48rpx;
-  margin-top: 30rpx;
-}
-
-.no_result {
-  font-size: 24rpx;
-  color: #B1B1B1;
-  text-align: center;
-  line-height: 100rpx;
-  font-weight: 1000;
-}
-
-.sign-in-isLogin{
-  background-color: transparent;
-  width: 750rpx;
-  height: 70rpx;
-  font-size: 40rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
-  color: #FEFEFE;
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  top: 120rpx;
-}
-
-.btns {
-  height: 96rpx;
-  width: 100%;
-  position: absolute;
-  top: 651rpx;
-  display: flex;
-  justify-content:center;
-  z-index: 3;
+.explain-column{
+  width: 39px;
+  height: 3px;
+  background: #BF2637;
+  border-radius: 2px;
+  margin-top: 10px;
 }