修改bug

pages/activity/lottery/index.vue

@@ -1,38 +1,17 @@
 <template>
   <div class="lottery-container">
-    <van-swipe
-      v-if="carousel.length"
-      :autoplay="3000"
-      class="lottery-swipe"
-      vertical
-      :show-indicators="false"
-    >
-      <van-swipe-item v-for="item in carousel" :key="item.mealId"
-        >有{{ item.count }}个用户 {{ ['', '抽奖', '购买'][item.type]
-        }}{{ item.title }}</van-swipe-item
-      >
+    <van-swipe v-if="carousel.length" :autoplay="3000" class="lottery-swipe" vertical :show-indicators="false">
+      <van-swipe-item v-for="item in carousel" :key="item.mealId">有{{ item.count }}个用户 {{ ['', '抽奖', '购买'][item.type]
+        }}{{ item.title }}</van-swipe-item>
     </van-swipe>
-    <img
-      class="w51h26"
-      src="~/assets/image/activity/lottery/rule.png"
-      alt=""
-      @click="
+    <img class="w51h26" src="~/assets/image/activity/lottery/rule.png" alt="" @click="
         showRule = true;
         makePoint('activity_购买协议');
-      "
-    />
+      " />
 
     <div class="sl">
-      <img
-        src="~/assets/image/activity/lottery/solgan.png"
-        alt=""
-        class="slogan"
-      />
-      <img
-        src="~/assets/image/activity/lottery/bannerTitle.png"
-        alt=""
-        class="bannerTitle"
-      />
+      <img src="~/assets/image/activity/lottery/solgan.png" alt="" class="slogan" />
+      <img src="~/assets/image/activity/lottery/bannerTitle.png" alt="" class="bannerTitle" />
     </div>
 
     <div class="roulette">
@@ -40,22 +19,9 @@
       <div class="gesture">
         <img src="~/assets/image/activity/lottery/gesture.gif" />
       </div>
-      <img
-        class="start-btn"
-        src="~/assets/image/activity/lottery/start-btn.png"
-        alt=""
-        @click="startRotation"
-      />
+      <img class="start-btn" src="~/assets/image/activity/lottery/start-btn.png" alt="" @click="startRotation" />
     </div>
-    <RoundTurntable
-      ref="roundTurntable"
-      :prize-data="prizeData"
-      :rotate-circle="rotateCircle"
-      :during-time="duringTime"
-      :turntable-style-option="turntableStyleOption"
-      class="turntable"
-      @endRotation="endRotation"
-    >
+    <RoundTurntable ref="roundTurntable" :prize-data="prizeData" :rotate-circle="rotateCircle" :during-time="duringTime" :turntable-style-option="turntableStyleOption" class="turntable" @endRotation="endRotation">
       <template slot="item" slot-scope="scope">
         <div class="turntable-name">
           <span class="fs15">￥</span>{{ scope.item.level }}
@@ -65,258 +31,102 @@
         </div>
       </template>
     </RoundTurntable>
-    <div class="num">剩余机会{{ num }}次</div>
-    <van-popup
-      v-model="showPay"
-      closeable
-      close-icon-position="top-right"
-      round
-      :close-on-click-overlay="false"
-      @closed="closed"
-    >
+    <van-popup v-model="showPay" style="background: transparent" :close-on-click-overlay="false">
+      <img v-if="luckDrawType===1" class="w219h26" src="~/assets/image/activity/lottery/15.9.png" alt="">
+      <img v-if="luckDrawType===2" class="w219h26" src="~/assets/image/activity/lottery/9.9.png" alt="">
       <div class="popup-view">
-        <div class="txt1">恭喜你获得{{ actualPrice }}年卡</div>
-        <div
-          :class="selMealId === mealId ? 'coupon-1 active' : 'coupon-1'"
-          @click="selMealId = mealId"
-        >
-          <img
-            v-if="selMealId === mealId"
-            class="coupon-select-icon"
-            src="~/assets/image/activity/lottery/select-icon.png"
-            alt=""
-          />
-          <img
-            v-else
-            class="coupon-select-icon"
-            src="~/assets/image/activity/lottery/unselect-icon.png"
-            alt=""
-          />
-          <div class="coupon-title">
-            <span class="txt2">{{ actualPrice }}</span
-            ><span>年卡会员</span>
+        <van-icon name="close" class="close" color="#939393"  @click="closed" />
+        <div class="meal-item">
+          <div :class="selMealId === mealId ? 'coupon-1 active' : 'coupon-1'" @click="selMealId = mealId">
+            <div class="coupon-title">
+              <span>￥</span><span class="txt2">{{ actualPrice }}</span>
+            </div>
+            <div class="txt4"> 1年使用权  每月30小时</div>
           </div>
-          <div class="txt4">12个月 30H/月 不使用不计时</div>
-          <img
-            class="w253h73"
-            src="~/assets/image/activity/lottery/coupon-1.png"
-            alt=""
-          />
-        </div>
-        <div class="fb">
-          <div
-            v-for="item in mealList"
-            :key="item.id"
-            :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'"
-            @click="
+          <div class="fb">
+            <div v-for="item in mealList" :key="item.id" :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'" @click="
               selMealId = item.id;
               makePoint(
                 item.day === 30 ? 'activity_38月卡' : 'activity_268年卡',
               );
-            "
-          >
-            <img
-              v-if="selMealId === item.id"
-              class="coupon-select-icon"
-              src="~/assets/image/activity/lottery/select-icon.png"
-              alt=""
-            />
-            <img
-              v-else
-              class="coupon-select-icon"
-              src="~/assets/image/activity/lottery/unselect-icon.png"
-              alt=""
-            />
-            <div class="coupon-title">
-              <span class="txt2">{{
+            ">
+              <div class="coupon-title">
+                <span>￥</span><span class="txt2">{{
                 item.originalPrice ? item.originalPrice : item.actualPrice
-              }}</span
-              ><span>元</span>
+              }}</span>
+              </div>
+              <div class="txt4">{{ item.day === 30 ? '月卡' : '年卡' }}</div>
             </div>
-            <div class="txt4">{{ item.day === 30 ? '月卡' : '年卡' }}</div>
-            <img
-              class="w111h73"
-              src="~/assets/image/activity/lottery/coupon-2.png"
-              alt=""
-            />
           </div>
         </div>
-        <div
-          v-for="item in paySupportType"
-          :key="item"
-          class="fnbc"
-          @click="
+        <van-grid :column-num="5" :border="false">
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon1.png')" text="包月" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon2.png')" text="游戏托管" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon3.png')" text="苹果玩安卓" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon4.png')" text="上班自由" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon5.png')" text="影音听歌" />
+        </van-grid>
+        <div v-for="item in paySupportType" :key="item" class="fnbc" @click="
             payType = item;
             makePoint(item === 'aliPay' ? 'activity_支付宝' : 'activity_微信');
-          "
-        >
+          ">
           <div v-if="item === 'aliPay'" class="fnc">
-            <van-icon
-              class="icon-pay"
-              :name="require('~/assets/image/activity/lottery/alipay.png')"
-            />
+            <van-icon class="icon-pay" :name="require('~/assets/image/activity/lottery/alipay.png')" />
             <span class="txt5">支付宝支付</span>
           </div>
           <div v-else class="fnc">
-            <van-icon
-              class="icon-pay"
-              :name="require('~/assets/image/activity/lottery/wx.png')"
-            />
+            <van-icon class="icon-pay" :name="require('~/assets/image/activity/lottery/wx.png')" />
             <span class="txt5">微信支付</span>
           </div>
-          <van-icon
-            :name="
+          <van-icon :name="
               payType === item
                 ? require('~/assets/image/activity/lottery/select-round-icon.png')
                 : require('~/assets/image/activity/lottery/unselect-round-icon.png')
-            "
-            size="24"
-          />
+            " size="24" />
         </div>
-        <img
-          class="w304h62"
-          src="~/assets/image/activity/lottery/pay-btn.png"
-          alt=""
-          @click="createOrder"
-        />
-        <div class="txt6">
-          开通前阅读并同意<a
-            @click="
+      </div>
+      <div class="buy-bar">
+        原价¥298
+        <div class="buy-bar-btn" @click="createOrder">
+          <div>立即购买</div>
+          <div>(节省¥{{298-actualPrice}})</div>
+        </div>
+      </div>
+      <div class="txt6">
+        <van-icon :name="checked?'checked':'circle'" color="#666666" @click="checked=!checked" class="check" />开通前阅读并同意<a @click="
               showRule = true;
               makePoint('activity_购买协议');
-            "
-            >购买协议</a
-          >
+              ">《购买协议》</a>
         </div>
-      </div>
     </van-popup>
-    <van-popup
-      v-model="show"
-      closeable
-      close-icon-position="top-right"
-      round
-      @closed="makePoint('activity_关闭弹窗')"
-    >
+    <van-popup v-model="show" style="background: transparent;" :close-on-click-overlay="false">
       <div class="popup-view popup-view-leave">
         <div class="txt1">确定离开吗</div>
-        <div class="txt6">
-          离开后您将失去{{ actualPrice }}年卡，24小时付款有效
-        </div>
-        <div
-          :class="selMealId === mealId ? 'coupon-1 active' : 'coupon-1'"
-          @click="selMealId = mealId"
-        >
-          <img
-            v-if="selMealId === mealId"
-            class="coupon-select-icon"
-            src="~/assets/image/activity/lottery/select-icon.png"
-            alt=""
-          />
-          <img
-            v-else
-            class="coupon-select-icon"
-            src="~/assets/image/activity/lottery/unselect-icon.png"
-            alt=""
-          />
-          <div class="coupon-title">
-            <span class="txt2">{{ actualPrice }}</span
-            ><span>年卡会员</span>
-          </div>
-          <div class="txt4">12个月 30H/月 不使用不计时</div>
-          <img
-            class="w253h73"
-            src="~/assets/image/activity/lottery/coupon-1.png"
-            alt=""
-          />
-        </div>
-        <div class="fb">
-          <div
-            v-for="item in mealList"
-            :key="item.id"
-            :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'"
-            @click="
-              selMealId = item.id;
-              makePoint(
-                item.day === 30 ? 'activity_38月卡' : 'activity_268年卡',
-              );
-            "
-          >
-            <img
-              v-if="selMealId === item.id"
-              class="coupon-select-icon"
-              src="~/assets/image/activity/lottery/select-icon.png"
-              alt=""
-            />
-            <img
-              v-else
-              class="coupon-select-icon"
-              src="~/assets/image/activity/lottery/unselect-icon.png"
-              alt=""
-            />
-            <div class="coupon-title">
-              <span class="txt2">{{
-                item.originalPrice ? item.originalPrice : item.actualPrice
-              }}</span
-              ><span>元</span>
-            </div>
-            <div class="txt4">{{ item.day === 30 ? '月卡' : '年卡' }}</div>
-            <img
-              class="w111h73"
-              src="~/assets/image/activity/lottery/coupon-2.png"
-              alt=""
-            />
-          </div>
-        </div>
-        <div
-          v-for="item in paySupportType"
-          :key="item"
-          class="fnbc"
-          @click="
-            payType = item;
-            makePoint(item === 'aliPay' ? 'activity_支付宝' : 'activity_微信');
-          "
-        >
-          <div v-if="item === 'aliPay'" class="fnc">
-            <van-icon
-              class="icon-pay"
-              :name="require('~/assets/image/activity/lottery/alipay.png')"
-            />
-            <span class="txt5">支付宝支付</span>
-          </div>
-          <div v-else class="fnc">
-            <van-icon
-              class="icon-pay"
-              :name="require('~/assets/image/activity/lottery/wx.png')"
-            />
-            <span class="txt5">微信支付</span>
-          </div>
-          <van-icon
-            :name="
-              payType === item
-                ? require('~/assets/image/activity/lottery/select-round-icon.png')
-                : require('~/assets/image/activity/lottery/unselect-round-icon.png')
-            "
-            size="24"
-          />
+        <div class="txt11">
+          离开后您将失去
         </div>
-        <div class="fnbc">
-          <div
-            class="btn-leave"
-            @click="
+        <img v-if="luckDrawType===1" class="w283h81" src="~/assets/image/activity/lottery/coupon-9.9.png" alt="">
+        <img v-if="luckDrawType===2" class="w283h81" src="~/assets/image/activity/lottery/coupon-15.9.png" alt="">
+        <van-grid :column-num="5" :border="false">
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon1.png')" text="包月" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon2.png')" text="游戏托管" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon3.png')" text="iOS玩安卓" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon4.png')" text="上班自由" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon7.png')" text="影音听歌" />
+        </van-grid>
+        <div class="fnbc1">
+          <div class="btn-leave" @click="
               show = false;
               makePoint('activity_狠心离开');
-            "
-          >
+            ">
             狠心离开
           </div>
           <div class="btn-pay" @click="createOrder">立即购买</div>
         </div>
       </div>
+      <van-icon name="close" class="close1" color="#939393"  @click="show=false;makePoint('activity_关闭弹窗')" />
     </van-popup>
-    <van-popup
-      v-model="showRule"
-      style="background: transparent; padding-top: 14px"
-    >
+    <van-popup v-model="showRule" style="background: transparent; padding-top: 14px">
       <div class="popup-view-rule">
         <div class="popup-view-rule-box">
           <div class="popup-view-rule-title">购买协议</div>
@@ -329,8 +139,7 @@
             <div class="txt8 mt5 fw500">1年使用权 每月30小时</div>
             <div class="txt9 mt5">按实际使用计时，星曜机型可用，立即生效</div>
             <div class="txt9 mt14">
-              <span class="txt7">有效时间：</span
-              >按实际使用云手机的时间计时，不使用不计时；每月30H，当月时长不跨月；
+              <span class="txt7">有效时间：</span>按实际使用云手机的时间计时，不使用不计时；每月30H，当月时长不跨月；
             </div>
             <div class="txt9"><span class="txt7">可用范围：</span>星曜机型</div>
             <div class="txt9"><span class="txt7">生效方式：</span>立即生效</div>
@@ -385,12 +194,7 @@
               2、时长使用顺序：优先使用年卡特惠包时长，年卡特惠包时长耗尽，自动使用时长包时长。<br />3、年卡特惠包合约到期后，如时长补充包仍有时长，年卡特惠包所属云手机可继续使用至时长用尽。
             </div>
           </div>
-          <img
-            class="w304h62"
-            src="~/assets/image/activity/lottery/buy-rule-icon.png"
-            alt=""
-            @click="showRule = false"
-          />
+          <img class="w304h62" src="~/assets/image/activity/lottery/buy-rule-icon.png" alt="" @click="showRule = false" />
         </div>
       </div>
     </van-popup>
@@ -410,6 +214,8 @@ export default {
   },
   data() {
     return {
+      checked: true,
+      luckDrawType: 0,
       showRule: false,
       show: false,
       showPay: false,
@@ -643,6 +449,7 @@ export default {
       );
       if (res.status === 0) {
         this.actualPrice = res.data.actualPrice;
+        this.luckDrawType = res.data.luckDrawType;
         if (res.data.luckDrawType === 1) {
           this.makePoint('activity_15.9年卡');
           if (Number(localStorage.getItem('year-15-9')) !== 2)
@@ -665,6 +472,9 @@ export default {
         this.phoneType = res.data.phoneType
         this.title = res.data.title
         this.prizeIndex = res.data.luckDrawType;
+        if (this.num === 0) {
+          this.showPay = true
+        }
       } else {
         Toast({
           message: res.msg,
@@ -740,12 +550,94 @@ export default {
         this.show = true;
         localStorage.setItem('year-9-9', 2);
       }
+      this.showPay = false
     },
   },
 };
 </script>
 
+<style>
+  .lottery-container .van-grid-item__content {
+    padding: 0 !important;
+  }
+</style>
 <style lang="scss" scoped>
+  .w283h81 {
+    width: 283px;
+    height: 81px;
+    display: block;
+    margin: 0 auto;
+  }
+  .close {
+    font-size: 30px;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .close1 {
+    font-size: 30px;
+    position: absolute;
+    bottom: 0px;
+    left: calc(50% - 15px);
+  }
+  .check {
+    font-size: 15px;
+    margin-right: 8.5px;
+    line-height: 10px;
+  }
+  .buy-bar-btn {
+    width: 184.5px;
+    height: 50px;
+    background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
+    border-radius: 10px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    & div:nth-child(1) {
+      text-align: center;
+      font-size: 18px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 24px;
+      margin-top: 5px;
+    }
+    & div:nth-child(2) {
+      text-align: center;
+      font-size: 12px;
+      color: #FFFFFF;
+      line-height: 24px;
+    }
+  }
+  .buy-bar {
+    width: 320px;
+    height: 40px;
+    line-height: 40px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    margin-top: 25px;
+    position: relative;
+    font-size: 15px;
+    text-decoration: line-through;
+    color: #666666;
+    padding-left: 28px;
+
+  }
+  .van-grid-item__text {
+    font-size: 11px;
+  }
+  .meal-item {
+    margin: 10px;
+    background: #F2F2F2;
+    border-radius: 5px;
+    padding: 7.5px;
+
+  }
+.w219h26 {
+  width: 219px;
+  height: 26px;
+  display: block;
+  margin: 0 auto 26.5px;
+}
 .sl {
   position: absolute;
   text-align: center;
@@ -770,8 +662,6 @@ export default {
 .fb {
   display: flex;
   justify-content: space-between;
-  width: 286px;
-  margin: 0 auto;
 }
 .fw500 {
   font-weight: 500;
@@ -880,9 +770,9 @@ export default {
   line-height: 20px;
 }
 .popup-view {
-  width: 324px;
-  padding: 20px 10px;
-  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  width: 320px;
+  border-radius: 10px;
   background: #ffffff;
   text-align: center;
 }
@@ -929,86 +819,45 @@ export default {
   padding: 0 16px;
 }
 .txt1 {
-  font-size: 18px;
+  font-size: 30px;
   font-weight: 600;
   color: #333333;
-  line-height: 25px;
+  line-height: 24px;
   text-align: center;
+  margin-top: 23.5px;
 }
 .coupon-1 {
-  width: 286px;
-  height: 106px;
+  width: 283px;
+  height: 81px;
+  background: linear-gradient(0deg, #979797 0%, #C8C8C8 98%);
+  border-radius: 6px;
   box-sizing: border-box;
-  margin: 11px auto 0;
-  position: relative;
-  border-radius: 13px;
-  border: 2px solid;
-  border-color: #e8e8e8;
-  box-sizing: border-box;
-  &::before,
-  &::after {
-    background-color: white;
-    border-radius: 50%;
-    content: '';
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    top: 43px;
-    z-index: 1;
-  }
-  &::before {
-    border-right: 2px solid;
-    border-color: #e8e8e8;
-    left: -12px;
-    border-radius: 0 10px 10px 0;
-  }
-
-  &::after {
-    border-left: 2px solid;
-    border-color: #e8e8e8;
-    right: -12px;
-    border-radius: 10px 0 0 10px;
-  }
 }
 .coupon-1.active,
 .coupon-2.active {
-  border-left: 2px solid;
-  border-color: #d96a57 !important;
-  &::before {
-    border-right: 2px solid;
-    border-color: #d96a57;
-  }
-
-  &::after {
-    border-left: 2px solid;
-    border-color: #d96a57;
-  }
+background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
 }
 .coupon-title {
-  color: #362113;
-  font-size: 12px;
+  color: #FFFFFF;
+  font-weight: 600;
+  font-size: 20px;
   text-align: center;
   z-index: 1;
-  position: absolute;
-  top: 23px;
+  margin-top: 15.5px;
   width: 100%;
 }
 .txt2 {
   font-weight: 600;
-  font-size: 24px;
+  font-size: 34px;
 }
 .txt3 {
   color: #db6857;
 }
 .txt4 {
-  position: absolute;
-  top: 68px;
-  width: 100%;
   text-align: center;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: #ffffff;
-  line-height: 20px;
   z-index: 1;
 }
 .coupon-select-icon {
@@ -1027,38 +876,24 @@ export default {
   left: 15px;
 }
 .coupon-2 {
-  width: 137px;
-  height: 106px;
-  box-sizing: border-box;
-  margin-top: 11px;
-  position: relative;
-  border-radius: 13px;
+  width: 138px;
+  height: 81px;
   box-sizing: border-box;
-  border: 2px solid;
-  border-color: #e8e8e8;
-  &::before,
-  &::after {
-    background-color: white;
-    border-radius: 50%;
-    content: '';
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    top: 43px;
+  margin-top: 7px;
+  border-radius: 5px;
+  background: linear-gradient(0deg, #979797 0%, #C8C8C8 98%);
+  & .coupon-title {
+    color: #FFFFFF;
+    font-weight: 600;
+    font-size: 15px;
+    text-align: center;
     z-index: 1;
+    margin-top: 22.5px;
+    width: 100%;
+    line-height: 24px;
   }
-  &::before {
-    border-right: 2px solid;
-    border-color: #e8e8e8;
-    left: -12px;
-    border-radius: 0 10px 10px 0;
-  }
-
-  &::after {
-    border-left: 2px solid;
-    border-color: #e8e8e8;
-    right: -12px;
-    border-radius: 10px 0 0 10px;
+  & .txt2 {
+    font-size: 15px;
   }
 }
 .w111h73 {
@@ -1088,51 +923,59 @@ export default {
   height: 50px;
   padding: 0 10px;
 }
+.fnbc1 {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 91px;
+  border-top: 1px dashed #333;
+}
 .w304h62 {
   width: 304px;
   height: 62px;
   margin: 0 auto;
 }
 .txt6 {
-  color: #333333;
-  font-size: 11px;
+  color: #666666;
+  font-size: 12px;
   line-height: 16px;
+  margin-top: 11px;
+  text-align: center;
   a {
-    color: #ff7656;
-    text-decoration: underline;
+    color: #F5E07E;
   }
 }
+.txt11 {
+  color: #666666;
+  font-size: 15px;
+  line-height: 2;
+  margin-top: 8px;
+  text-align: center;
+}
 .popup-view-leave {
-  background: linear-gradient(180deg, #ffffff 0%, #f7f1e3 100%);
+  margin-bottom: 70px;
 }
 .btn-leave {
-  width: 140px;
-  height: 48px;
-  background: linear-gradient(180deg, #ffdb94 0%, #ff9539 100%);
-  box-shadow: 0px 2px 7px 0px rgba(237, 76, 0, 0.17),
-    inset 0px -5px 0px 0px #ff7700;
-  border-radius: 24px;
-  font-size: 18px;
+  width: 106.5px;
+  height: 34px;
+  background: linear-gradient(0deg, #979797 0%, #C8C8C8 98%);
+  border-radius: 17px;
+  font-size: 16px;
   font-weight: 600;
   color: #ffffff;
   text-align: center;
-  line-height: 43px;
-  margin-top: 15px;
+  line-height: 34px;
 }
 .btn-pay {
-  width: 140px;
-  height: 48px;
-  background: linear-gradient(180deg, #ff9278 0%, #ff562f 100%);
-  box-shadow: 0px 2px 7px 0px rgba(237, 76, 0, 0.17),
-    inset 0px -5px 0px 0px #f62e00;
-  border-radius: 24px;
-  border-radius: 24px;
-  font-size: 18px;
+  width: 152px;
+  height: 40px;
+  background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
+  border-radius: 20px;
+  font-size: 20px;
   font-weight: 600;
   color: #ffffff;
   text-align: center;
-  line-height: 43px;
-  margin-top: 15px;
+  line-height: 40px;
 }
 .txt7 {
   font-size: 13px;