个人中心页面重构

pages/luckDraw/profile.js

@@ -16,6 +16,8 @@ Page({
         isLogin: false,
         hidden1: false,
         hidden2: false,
+        noCoupon: false,
+        noPrize: false,
         mobileTop: 'TONY WU',
         couponNum: 0,
         productNum: 0,
@@ -37,6 +39,8 @@ Page({
             this.setData({
                 hidden1: false,
                 hidden2: true,
+                noCoupon: true,
+                noPrize: false,
             })
             this.getUserPrizeList();
         }
@@ -172,7 +176,9 @@ Page({
             page: 1,
             goodsType: 1,
             noMore: false,
-            noResult: false
+            noResult: false,
+            noCoupon: true,
+            noPrize: false,
         })
         this.data.goodsItemList = [];
         this.getUserPrizeList()
@@ -185,7 +191,9 @@ Page({
             page: 1,
             goodsType: 3,
             noMore: false,
-            noResult: false
+            noResult: false,
+            noCoupon: false,
+            noPrize: true,
         })
         this.data.goodsItemList = [];
         this.getUserPrizeList()
@@ -205,6 +213,8 @@ Page({
                 mobileTop: getMobileCache(),
                 hidden1: false,
                 hidden2: true,
+                noCoupon: true,
+                noPrize: false,
             })
             this.getUserPrizeList()
         })

pages/luckDraw/profile.json

@@ -1,5 +1,5 @@
 {
-  "navigationBarTitleText": "我的卡券",
+  "navigationBarTitleText": "个人中心",
   "usingComponents": {
     "tab-bar": "./components/tabbar"
   }

pages/luckDraw/profile.wxml

@@ -1,123 +1,86 @@
 <!--pages/luckDraw/profile.wxml-->
-<view class="personal">
-<!-- 个人中心视图 -->
-    <view class="head-bg" catchtap="turnPrize">
-       <image class="image_bg" src="/images/luck-draw/per_head.png" />
-       <!-- 获取用户头像 -->
-       <view wx:if="{{isLogin}}" class="image_portrait"><open-data type="userAvatarUrl"></open-data></view>
-       <image wx:if="{{!isLogin}}" class="image_portrait" src="/images/luck-draw/portrait.png" />
-       <button class="luck-draw-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >登录</button>
-       <view class="luck-draw-pro-nickname" wx:if="{{isLogin}}">{{phone.toHide(mobileTop)}}</view>
-    </view>
-    <view class="luck-draw-pro-cp">
-      <!-- 优惠券 -->
-      <view class="luck-draw-coupon" catchtap="getProfile">
-        <view class="luck-draw-cn">{{couponNum}}</view>
-        <view class="luck-draw-cz">优惠券</view>
-        <view wx:if="{{goodsType == 1}}" class="luck-draw-cjh"><view class="luck-draw-cj"></view></view>
-      </view>
-      <!-- 奖品 -->
-      <view class="luck-draw-prize" catchtap="getPrize">
-        <view class="luck-draw-pn">{{thirdPrizeNum}}</view>
-        <view class="luck-draw-pz">奖品</view>
-        <view wx:if="{{goodsType == 3}}" class="luck-draw-cjh"><view class="luck-draw-cj"></view></view>
+<!-- 首部信息 -->
+<view class="head flex-column">
+  <image wx:if="{{!isLogin}}" class="head_portrait" src="/images/welfareMall/head-portrait.png" />
+  <!-- 获取用户头像 -->
+  <open-data wx:if="{{isLogin}}" class="head_portrait" type="userAvatarUrl"></open-data>
+  <view class="head_text" wx:if="{{isLogin}}">{{phone.toHide(mobileTop)}}</view>
+  <button class="sigin-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录</button>
+</view>
+<!-- 中部说明 -->
+<view class="explain flex-row">
+  <view class="explain-left flex-column" catchtap="{{isLogin?'getProfile':''}}">
+    <view class="explain-text">{{couponNum}}</view>
+    <view class="explain-discount">优惠券</view>
+    <view class="{{noCoupon?'explain-column':'explain-columnNo'}}"></view>
+  </view>
+  <view class="explain-right flex-column" catchtap="{{isLogin?'getPrize':''}}">
+    <view class="explain-text">{{thirdPrizeNum}}</view>
+    <view class="explain-utility">奖品</view>
+    <view class="{{noPrize?'explain-column':'explain-columnNo'}}"></view>
+  </view>
+</view>
+<!-- 主要内容 -->
+<view class="check-in-content flex-column">
+  <!-- 优惠券内容 -->
+  <view hidden="{{hidden1}}">
+    <view wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" class="{{item.couponType == 'C'?'coupon flex-row':'coupon2 flex-row'}}">
+      <view class="coupon-left flex-row">
+        <!-- 代金券 -->
+        <view class="coupon-left-symbol" wx:if="{{item.couponType == 'C'}}">￥</view>
+        <view class="{{item.formatReduceCost.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.couponType == 'C'}}">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
+        <!-- 折扣券 -->
+        <view class="{{item.formatDiscount.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.couponType == 'D'}}">{{item.formatDiscount ?item.formatDiscount:0}}</view>
+        <view class="coupon-left-symbol" wx:if="{{item.couponType == 'D'}}" style="font-size: 16px;">折</view>
       </view>
-    </view>
-    <view id="couponZD" class="luck-draw-theme" hidden="{{hidden1}}">
-      <!-- 折扣券 -->
-      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" >
-        <view class="luck-draw-words">
-          <view class="luck-draw-discount1">
-            <view class="{{item.formatDiscoun.length > 3?'luck-draw-zkz4c':'luck-draw-zkz4'}}" wx:if="{{item.couponType == 'D'}}">{{item.formatDiscount ?item.formatDiscount:0}}</view>
-            <view class="{{item.formatDiscoun.length > 3?'luck-draw-zkz5c':'luck-draw-zkz5'}}" wx:if="{{item.couponType == 'D'}}">折</view>
-
-            <view class="luck-draw-djz4" wx:if="{{item.couponType == 'C'}}">￥</view>
-            <view class="{{item.formatReduceCost.length > 3 ?'luck-draw-djz5c':'luck-draw-djz5'}}" wx:if="{{item.couponType == 'C'}}">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
-          </view>
-          <view class="luck-draw-discount2">
-            <view class="luck-draw-zkz1">{{item.goodsName}}</view>
-           <view class="luck-draw-mj">
-            <view class="luck-draw-zkz21"></view>
-            <view class="luck-draw-zkz2" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
-            <view class="luck-draw-zkz2" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}元使用</view>
-            <view class="luck-draw-zkz22"></view>
-           </view>
-            <view class="luck-draw-zkz3">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
-          </view>
+      <view class="coupon-center flex-column">
+        <view class="coupon-center-upper over-ellipsis">{{item.couponTitle}}</view>
+        <view class="coupon-center-bm flex-row">
+          <view class="coupon-center-block1"></view>
+          <view class="coupon-center-middle" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
+          <view class="coupon-center-middle" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}使用</view>
+          <view class="coupon-center-block2"></view>
         </view>
-        <image wx:if="{{item.couponType == 'D'}}" class="image_zk" src="/images/luck-draw/coupon1.png" />
-        <image wx:if="{{item.couponType == 'D'}}" class="image_zk_un" src="/images/luck-draw/coupon_use_now.png" />
-
-        <image wx:if="{{item.couponType == 'C'}}" class="image_zk" src="/images/luck-draw/cash_coupon.png" />
-        <image wx:if="{{item.couponType == 'C'}}" class="image_zk_un" src="/images/luck-draw/cc_use_now.png" />
-        <navigator class="_btn _exchange" 
-            target = "miniProgram" 
-            app-id="wxd92a2d29f8022f40"
-            path="pages/index/index"
-            extra-data="{foo: 'bar'}"
-            open-type='navigate'> 
-            </navigator>
+        <view class="coupon-center-lower">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
       </view>
-      <!-- 代金券 
-      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" wx:if="{{item.couponType == 'C' && item.goodsType == 1}}">
-        <image class="image_zk" src="/images/luck-draw/cash_coupon.png" />
-        <image class="image_zk_un" src="/images/luck-draw/cc_use_now.png" />
-            <navigator class="_btn _exchange" 
-            target = "miniProgram" 
-            app-id="wxd92a2d29f8022f40"
-            path="page/index/index"
-            open-type='navigate'> 
-            </navigator>
-        <view class="luck-draw-words">
-          <view class="luck-draw-discount1">
-            <view class="luck-draw-djz4">￥</view>
-            <view class="luck-draw-djz5">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
-          </view>
-          <view class="luck-draw-discount2">
-            <view class="luck-draw-zkz1">{{item.goodsName}}</view>
-           <view class="luck-draw-mj">
-            <view class="luck-draw-zkz21"></view>
-            <view class="luck-draw-zkz2" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
-            <view class="luck-draw-zkz2" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}使用</view>
-            <view class="luck-draw-zkz22"></view>
-           </view>
-            <view class="luck-draw-zkz3">{{item.couponBeginTimestamp ?item.couponBeginTimestamp:0}}-{{item.couponEndTimestamp ?item.couponEndTimestamp:0}}</view>
-          </view>
+      <view class="coupon-right">
+        <view class="{{item.couponType == 'C'?'coupon-right-usenow flex-row':'coupon-right-usenow2 flex-row'}}">
+          <navigator class="btn_exchange" target="miniProgram" app-id="wxd92a2d29f8022f40" path="page/index/index" open-type='navigate'>
+          </navigator>
         </view>
-      </view> -->
-      
-      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
-      <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
+      </view>
     </view>
+    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
+    <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
+  </view>
 
-    <view id="prize" class="luck-draw-theme" hidden="{{hidden2}}">
-      <!-- 奖品 -->
-      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" wx:if="{{item.goodsType == 3}}">
-        <view class="luck-draw-wordsj">
-          <view class="luck-draw-discount1j">
-           
-            <image class="luck-draw-zkzj" src="{{item.fullGoodsSmallImage}}" />
-          </view>
-          <view class="luck-draw-discount2">
-            <view class="luck-draw-zkz1j over-ellipsis">{{item.goodsName}}</view>
-            <view class="luck-draw-zkz3j over-ellipsis-two">{{item.hitDesc}}</view>
-          </view>
+  <!-- 奖品 -->
+  <view hidden="{{hidden2}}">
+    <view class="prize-content flex-row" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}">
+      <view class="prize-img flex-column">
+        <image class="prize-img-small" src="{{item.fullGoodsSmallImage}}" />
+      </view>
+      <view class="prize-text">
+        <view class="prize-text-top over-ellipsis">{{item.goodsName}}</view>
+        <view class="prize-text-buttom over-ellipsis-two">{{item.hitDesc}}</view>
+      </view>
+      <view class="prize-jump flex-row">
+        <view class="btn_exchange" data-src="{{item.fullGoodsBigImage}}" catchtap="toLookHitPhoto">
         </view>
-        <image class="image_zk_unj" src="/images/luck-draw/coupon_use_now.png" />
-        <view data-src="{{item.fullGoodsBigImage}}" catchtap="toLookHitPhoto" class="_btn _exchange"></view>
       </view>
-      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可领取奖品 ————</view>
-      <view class="no_result" wx:if="{{noMore}}">———— 更多奖品 | 敬请期待 ————</view>
     </view>
+    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可领取奖品 ————</view>
+    <view class="no_result" wx:if="{{noMore}}">———— 更多奖品 | 敬请期待 ————</view>
+  </view>
 </view>
 
 <!-- 使用wxs 手机号码中间四位显示为*号 -->
 <wxs module="phone">
-var toHide = function(array) {
-  var mphone = array.substring(0, 3) + '****' + array.substring(7);
-  return mphone;
-}
-module.exports.toHide = toHide;
+  var toHide = function (array) {
+    var mphone = array.substring(0, 3) + '****' + array.substring(7);
+    return mphone;
+  }
+  module.exports.toHide = toHide;
 </wxs>
 <!-- 底部导航 -->
-<!-- <tab-bar /> -->
+<!-- <tab-bar /> -->

pages/luckDraw/profile.wxss

@@ -1,334 +1,307 @@
 /* pages/luckDraw/profile.wxss */
-.personal{
-  width: 750rpx;
-  height: auto;
-  padding-bottom: 119rpx;
+
+/* 垂直方向布局，水平居中 **/
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: left;
 }
 
-.head-bg{
-  width: 750rpx;
-  height: 464rpx;
+/* 水平方向布局，垂直居中 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
 }
-.image_bg{
+
+.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%;
 }
 
-.image_portrait{
+.head_portrait{
   width: 140rpx;
   height: 144rpx;
-  position: relative;
-  z-index: 2;
-  left: 304rpx;
-  top: 170rpx;
   border-radius: 50%;
   overflow :  hidden ;
+  margin-top: 120rpx;
 }
 
-.luck-draw-pro-nickname{
-  width: 750rpx;
-  height: 50rpx;
+.head_text{
   font-size: 40rpx;
   font-family: Source Han Sans CN;
-  font-weight: 500;
+  font-weight: 400;
   color: #FEFEFE;
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  top: 180rpx;
+  margin-top: 40rpx;
+}
+
+.sigin-isLogin{
+  color: #FEFEFE;
+  font-weight: 400;
+  background-color: transparent;
+  border-style: none;
 }
 
-.luck-draw-pro-cp{
+.explain{
   width: 750rpx;
-  height: 180rpx;
+  height: 160rpx;
+  justify-content: space-between !important;
 }
 
-.luck-draw-coupon,.luck-draw-prize{
-  display: inline-block;
+.explain-left,.explain-center,.explain-right{
   width: 50%;
-  height: 100%;
-}
-.luck-draw-cn,.luck-draw-cz,.luck-draw-pn,.luck-draw-pz,.luck-draw-cjh{
   text-align: center;
 }
-.luck-draw-cn,.luck-draw-pn{
-  margin-top: 30rpx;
-  font-size: 36rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
+
+.explain-text{
+  font-size: 18px;
+  font-weight: 600;
   color: #BF2637;
 }
-.luck-draw-cz,.luck-draw-pz{
+
+.explain-discount,.explain-utility{
   font-size: 32rpx;
-  font-family: Source Han Sans CN;
   font-weight: 400;
   color: #303030;
 }
-.luck-draw-cj{
-  width: 78rpx;
-  height: 6rpx;
-  background: #BF2637;
-  border-radius: 4rpx;
-  margin: 10rpx auto;
-}
 
-.luck-draw-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;
+.explain-column{
+  width: 39px;
+  height: 3px;
+  background: #BF2637;
+  border-radius: 2px;
+  margin-top: 10px;
 }
 
-.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;
+.explain-columnNo{
+  width: 39px;
+  height: 3px;
+  border-radius: 2px;
+  margin-top: 10px;
 }
 
-.luck-draw-discount1,.luck-draw-discount2,.luck-draw-zkz21,.luck-draw-zkz22,.luck-draw-zkz2{
-  display: inline-block;
+.content{
+  width: 100%;
+  height: auto;
 }
 
-.luck-draw-zkz4, .luck-draw-zkz5, .luck-draw-djz4,.luck-draw-djz5,.luck-draw-zkz4c, .luck-draw-zkz5c, .luck-draw-djz4c,.luck-draw-djz5c {
-  display: inline;
+.check-in-content{
+  width: 100%;
+  height: auto;
+  background: #FFFFFF;
+  margin-top: 4px;
 }
 
-.luck-draw-discountj,.luck-draw-zkzj{
-  display: inline-block;
-}
-.luck-draw-words{
-  position:relative;
-  z-index: 2;
+.coupon{
   width: 708rpx;
   height: 220rpx;
-  display: flex;
-  flex-direction: row;
+  background-image: url(https://dy.shpr.top/luckDraw/cash_coupon.png);
+  background-size: 100% 100%;
+  margin-bottom: 30rpx;
+  justify-content: left !important;
 }
 
-.luck-draw-wordsj{
-  position:relative;
-  z-index: 2;
+.coupon2{
   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;
+  background-image: url(https://dy.shpr.top/luckDraw/coupon.png);
+  background-size: 100% 100%;
+  margin-top: 30rpx;
+  justify-content: left !important;
 }
 
-.luck-draw-discount1{
-  width: 208rpx;
+.coupon-left{
+  width: 220rpx;
   height: 100%;
   text-align: center;
-  line-height: 220rpx;
-}
-.luck-draw-discount1j{
-  width: 214rpx;
-  height: 220rpx;
-  background: #FFE9B0;
-  border: 0rpx solid #FF7A03;
-  border-radius: 20rpx 0 0 20rpx;
-  text-align: center;
-}
-.luck-draw-discount1 view:nth-child(1) {
-  position: relative;
-  top: 60rpx;
-}
-
-.luck-draw-discountj view:nth-child(1) {
-  position: relative;
-  top: 40rpx;
+  align-items: flex-end;
 }
 
-.luck-draw-discount1 view:nth-child(2) {
-  position: relative;
-  top: 60rpx;
+.coupon-center{
+  width: 350rpx;
+  height: 100%;
+  align-items: flex-start !important;
+  justify-content: space-between;
 }
 
-.luck-draw-discount2{
-  width: 500rpx;
+.coupon-right{
+  width: 180rpx;
   height: 100%;
 }
 
-.luck-draw-zkz4 {
-  font-size: 90rpx;
-  font-family: Impact;
+.coupon-left-symbol{
+  font-size: 20px;
+  font-family: Microsoft YaHei;
   font-weight: 400;
   color: #443E5B;
-  line-height: 142rpx;
+  line-height: 40px;
 }
 
-.luck-draw-zkz4c {
-  font-size: 70rpx;
+.coupon-left-num{
+  font-size: 59px;
   font-family: Impact;
   font-weight: 400;
   color: #443E5B;
-  line-height: 142rpx;
+  line-height: 71px;
 }
 
-.luck-draw-djz5{
-  font-size: 90rpx;
+.coupon-left-numSmall{
+  font-size: 36px;
   font-family: Impact;
   font-weight: 400;
   color: #443E5B;
-  line-height: 142rpx;
+  line-height: 71px;
 }
 
-.luck-draw-djz5c{
-  font-size: 70rpx;
-  font-family: Impact;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 142rpx;
-}
+.coupon-left-symbol{
+  margin-bottom: 10rpx;
+} 
 
-.luck-draw-zkzj{
-  width: 100%;
-  height: 100%;
-  /* position: relative;
-  top: 55rpx; */
+.coupon-center-upper,.coupon-center-bm,.coupon-center-lower{
+  margin-left: 18px;
 }
-
-.luck-draw-zkz5,.luck-draw-djz4{
-  font-size: 40rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
+.coupon-center-upper{
+  width: 140px;
+  height: 20px;
+  font-size: 20px;
+  font-weight: 500;
   color: #443E5B;
-  line-height: 48rpx;
+  line-height: 19px;
+  margin-top: 24px;
+  overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
-.luck-draw-zkz5c,.luck-draw-djz4c{
-  font-size: 30rpx;
-  font-family: Microsoft YaHei;
+.coupon-center-middle{
+  height: 15px;
+  font-size: 13px;
   font-weight: 400;
   color: #443E5B;
-  line-height: 48rpx;
+  line-height: 16px;
 }
 
-.luck-draw-zkz1{
-  font-size: 40rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
+.coupon-center-lower{
+  width: 146px;
+  height: 15px;
+  font-size: 13px;
+  font-weight: 400;
   color: #443E5B;
-  line-height: 32rpx;
-  margin-top: 48rpx;
-  margin-left: 48rpx;
+  line-height: 16px;
+  margin-bottom: 11px;
 }
 
-.luck-draw-zkz1j{
-  font-size: 40rpx;
-  font-family: Source Han Sans CN;
-  font-weight: 500;
-  color: #443E5B;
-  line-height: 40rpx;
-  margin-top: 48rpx;
-  margin-left: 48rpx;
+.coupon-right-usenow{
+  width: 162rpx;
+  height: 56rpx;
+  background-image: url(https://dy.shpr.top/luckDraw/cash_use_now.png);
+  background-size: 100% 100%;
+  margin-top: 94rpx;
+  margin-left: -10rpx;
 }
 
-.luck-draw-mj{
-  margin-left: 48rpx;
-  margin-top: 20rpx;
-  margin-bottom: 20rpx;
+.coupon-right-usenow2{
+  width: 162rpx;
+  height: 56rpx;
+  background-image: url(https://dy.shpr.top/luckDraw/coupon_use_now.png);
+  background-size: 100% 100%;
+  margin-top: 94rpx;
+  margin-left: -10rpx;
 }
-.luck-draw-zkz2{
-  font-size: 26rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 32rpx;
+
+.coupon-center-bm{
+  height: 15px;
+  justify-content: flex-start;
 }
-.luck-draw-zkz21,.luck-draw-zkz22{
-  width: 14rpx;
-  height: 14rpx;
+
+.coupon-center-block1,.coupon-center-block2{
+  width: 5px;
+  height: 5px;
   background: #443E5B;
   transform:rotate(45deg);
   margin: 0 10rpx;
 }
-.luck-draw-zkz3{
-  font-size: 26rpx;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 32rpx;
-  margin-left: 48rpx;
-}
 
-.luck-draw-zkz3j{
-  font-size: 26rpx;
-  width: 130px;
-  font-weight: 400;
-  color: #443E5B;
-  line-height: 32rpx;
-  line-height: 32rpx;
-  margin-left: 48rpx;
-  margin-top: 30rpx;
+.btn_exchange{
+  width: 100%;
+  height: 100%;
 }
 
 .no_result {
   font-size: 24rpx;
   color: #B1B1B1;
-  text-align: center;
   line-height: 100rpx;
   font-weight: 1000;
-}
-
-.luck-draw-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: 180rpx;
 }
 
-.btns {
-  height: 96rpx;
+.detailed{
   width: 100%;
-  position: absolute;
-  top: 651rpx;
-  display: flex;
-  justify-content:center;
-  z-index: 3;
-}
+  height: auto;
+  background: #F3F3F3;
+}
+
+.prize-content{
+  width: 708rpx;
+  height: 220rpx;
+  background: #FFFFFF;
+  border: 1px solid #FF7A03;
+  box-shadow: 0px 0px 50px 8px rgba(127, 127, 127, 0.09);
+  border-radius: 20rpx;
+  margin-bottom: 30rpx;
+  justify-content: space-between;
+}
+
+.prize-img{
+  width: 214rpx;
+  height: 220rpx;
+  background: #FFE9B0;
+  border: 1px solid #FF7A03;
+  border-radius: 20rpx;
+}
+
+.prize-img-small{
+  width: 268rpx;
+  height: 212rpx;
+}
+
+.prize-text{
+  width: 300rpx;
+}
+
+.prize-text-top,.prize-text-buttom{
+  padding-left: 42rpx;
+}
+
+.prize-text-top{
+  width: 280rpx;
+  height: 38rpx;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #443E5B;
+  line-height: 36rpx;
+}
+
+.prize-text-buttom{
+  font-size: 28rpx;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 32rpx;
+  margin-top: 26rpx;
+}
+
+.prize-jump{
+  width: 162rpx;
+  height: 56rpx;
+  background-image: url(https://dy.shpr.top/luckDraw/coupon_use_now.png);
+  background-size: 100% 100%;
+  margin-right: 10rpx;
+  margin-top: 20rpx;
+}
+