初始化2025元宵节活动

src/api/index.js

@@ -2,7 +2,7 @@ import http from './http'
 
 // 获取code
 export function authorize(data, authorization) {
-    return http.post("/h5/oauth/authorize",
+    return http.post("/h5/Oauth/authorize",
         data,
         true,
     );
@@ -10,7 +10,7 @@ export function authorize(data, authorization) {
 
 // 获取用户信息
 export function getUserInfo(data, authorization) {
-    return http.post("/h5/oauth/getUserInfo",
+    return http.post("/h5/Oauth/getUserInfo",
         data,
         true,
     );
@@ -54,7 +54,7 @@ export function exchangePrize(data, authorization) {
 
 // 分享接口
 export function getShareConfig(data, authorization) {
-    return http.post("/h5/oauth/getShareConfig",
+    return http.post("/h5/Oauth/getShareConfig",
         data,
         true,
     );

src/components/Draw.vue

@@ -85,20 +85,6 @@ const drawFn = (event) => {
             }, 1000);
           }
         }
-      }).catch(error =>{
-        console.log('eroor', error);
-            hasPrize.value = false; // true 中奖 || false 未中奖
-            userStore.updateDraw();
-            setTimeout(() => {
-              Toast.clear();
-              showResult.value = true;
-              gsap.from(".result-container", {
-                duration: 0.5,
-                scale: 0.7,
-                autoAlpha: 0,
-              });
-              gsap.killTweensOf(".draw-light,.draw");
-            }, 1000);
       })
     } else {
       Toast('今日抽奖次数已用完！')
@@ -164,15 +150,9 @@ onMounted(() => {
       <div class="draw-has" v-show="hasPrize">
         <div class="money">¥{{ money }}元</div>
         <div class="code-box">
-          <div class="code">兑奖码：{{ code }}</div>
+          <div class="code">{{ code }}</div>
           <div class="copy-btn" @click="copyFn($event)"></div>
         </div>
-        <div class="code-tips">
-          <div>兑奖流程：前往微信搜索【平安理财服务号】</div>
-          <div>公众号发送“清凉一夏”获取兑换链接，</div>
-          <div>输入兑换码兑换奖品。</div>
-          <div class="code-tips-text">（兑换码可在主页面“奖品”再次查看并复制）</div>
-        </div>
         <div class="cls-btn" @click="hide($event)"></div>
       </div>
       <!-- 没有奖品 -->
@@ -235,8 +215,7 @@ onMounted(() => {
     position: relative;
     @include box(665px, 731px);
     @include bg_pos("prize/myPrize-box.png");
-    position: relative;
-    left: 30px;
+
     .money {
       @include pos(370px, 81px, 139px, 239px);
       display: flex;
@@ -249,7 +228,7 @@ onMounted(() => {
     }
 
     .code-box {
-      @include pos(390px, 52px, 100px, 508px);
+      @include pos(312px, 52px, 197px, 508px);
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -263,27 +242,12 @@ onMounted(() => {
 
       .copy-btn {
         @include box(77px, 39px);
-        @include bg_pos("prize/copy-btn2.png");
-      }
-    }
-
-    .code-tips{
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      @include pos(410px, 120px, 100px, 560px);
-      // background: rgba($color: #000000, $alpha: .7);
-      font-size: 20px;
-        font-weight: 700;
-        color: #fff6cc;
-      .code-tips-text{
-        font-size: 17px;
-        text-align: center;
+        @include bg_pos("prize/copy-btn.png");
       }
     }
 
     .cls-btn {
-      @include pos(43px, 43px, 517px, 114px);
+      @include pos(82px, 82px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");
     }
   }

src/components/Index.vue

@@ -3,8 +3,6 @@ import { Toast } from "vant";
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
 import { useMainStore } from "@/store";
-import Preloader from "@/plugins/Preloader";
-import { pageQAImg } from "@/data/imgList";
 
 const emit = defineEmits(["IndexPage"]);
 const userStore = useMainStore();
@@ -35,13 +33,18 @@ const showRule = (event) => {
   });
 };
 
+
 onMounted(() => {
-  gsap.from(
-    ".index-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1",
-    { duration: 1, scale: 1.2, autoAlpha: 0 }
-  );
-  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 });
-  gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0 });
+  gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
+  gsap.from(".index-bottom-bg", { duration: 1, y: 100,  });
+  gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0,  });
+  gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5  });
+  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1  });
+  gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
+  gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
+  gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
+  gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
+  gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0,delay:0.75 });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
   gsap.from(".index-prize-btn", {
     duration: 1,
@@ -60,62 +63,20 @@ onMounted(() => {
     scale: 0.4,
     autoAlpha: 0,
     delay: 0.5,
-    onComplete: () => {
-      gsap.to(".index-start-btn", {
-        duration: 1,
-        scale: "0.9",
-        repeat: -1,
-        yoyo: true,
-        ease: "bounce.in",
-      });
-      gsap.to(".index-cloud-1", {
-        duration: 2,
-        x: -30,
-        repeat: -1,
-        yoyo: true,
-        ease: "none",
-      });
-      gsap.to(".index-cloud-2", {
-        duration: 2,
-        x: 30,
-        repeat: -1,
-        yoyo: true,
-        ease: "none",
-      });
-      gsap.to(".index-tree-1", {
-        duration: 2,
-        y: 10,
-        repeat: -1,
-        yoyo: true,
-        ease: "none",
-      });
-      gsap.to(".index-title", {
-        duration: 2.5,
-        y: -20,
-        repeat: -1,
-        yoyo: true,
-        ease: "none",
-      });
-      gsap.to(".index-sub-title", {
-        duration: 3,
-        x: 10,
-        repeat: -1,
-        yoyo: true,
-        ease: "none",
-      });
-
-      // 开始加载答题页面资源
-      Preloader({
-        name: "加载答题页资源",
-        imgs: pageQAImg,
-        callback: (progress) => {
-          // console.log("进度：", progress);
-        },
-      }).then((res) => {
-        console.log("done!");
-      });
-    },
+    onComplete:()=>{
+      // gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
+    }
   });
+
+
+
+
+
 });
 
 const vcNum = ref(false);
@@ -131,29 +92,25 @@ const showVC = () => {
   <div class="IndexPage" @touchmove.prevent>
     <div class="index-bg"></div>
     <div class="index-container">
-      <div class="index-cloud-1"></div>
-      <div class="index-cloud-2"></div>
-      <div class="index-tree-1"></div>
-      <div class="index-island"></div>
+      <div class="index-fan-1"></div>
+      <div class="index-fan-2"></div>
+      <div class="index-fan-3"></div>
+      <div class="index-fan-4"></div>
       <div class="index-logo"></div>
+      <div class="index-bottom-bg"></div>
+      <!-- <div class="index-cloud"></div> -->
+      <div class="index-firework"></div>
+      <div class="index-windows"></div>
+      <div class="index-pet"></div>
       <div class="index-title" @click="showVC"></div>
-      <div class="index-sub-title"></div>
       <div class="index-rule-btn" @click="showRule($event)"></div>
-      <!-- v-if="userStore.hasPrize" -->
-      <div class="index-prize-btn" @click="showMyPrize($event)"></div>
+      <div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
       <div class="index-start-btn" @click="start"></div>
       <div class="index-agreement">
-        <div class="agreement">
-          风险提示:
-          本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
-            class="b"
-            >本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
-          >以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
-            class="b"
-            >理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
-          ><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
-          >金融消费者不得利用金融产品和服务从事违法活动。
-        </div>
+        风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
+          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
+          class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
       </div>
     </div>
   </div>
@@ -163,7 +120,7 @@ const showVC = () => {
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
   overflow: hidden;
-  background: linear-gradient(135deg, #90dcff, #51b7ff);
+  background: linear-gradient(135deg, #a11b15, #f80c00);
 
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
@@ -175,90 +132,107 @@ const showVC = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
 
-    // .index-logo{
-    //   pointer-events: none;
-    //   @include pos(632px, 94px, 59px, 267px);
-    //   @include bg_pos("index/logo.png");
-    // }
+    .index-bottom-bg{
+      pointer-events: none;
+      @include pos(750px, 549px, 0px, 1075px);
+      @include bg_pos("index/bottom-bg.png");
+    }
+
+    .index-fan-1{
+      pointer-events: none;
+      @include pos(235px, 574px, 0px, 60px);
+      @include bg_pos("index/fan-1.png");
+    }
+    .index-fan-2{
+      pointer-events: none;
+      @include pos(316px, 317px, -205px, 405px);
+      @include bg_pos("index/fan-2.png");
+    }
+    .index-logo{
+      pointer-events: none;
+      @include pos(632px, 94px, 59px, 180px);
+      @include bg_pos("index/logo.png");
+    }
+    .index-fan-3{
+      pointer-events: none;
+      @include pos(370px, 334px, 545px, 910px);
+      @include bg_pos("index/fan-3.png");
+    }
+    .index-fan-4{
+      pointer-events: none;
+      @include pos(350px, 205px, 494px, 1011px);
+      @include bg_pos("index/fan-4.png");
+    }
+
+    .index-cloud{
+      pointer-events: none;
+      @include pos(88px, 46px, 621px, 253px);
+      @include bg_pos("index/cloud.png");
+    }
+
+    .index-firework{
+      pointer-events: none;
+      @include pos(120px, 120px, 651px, 474px);
+      @include bg_pos("index/firework.png");
+    }
+
+    .index-windows{
+      pointer-events: none;
+      @include pos(743px, 744px, 3px, 440px);
+      @include bg_pos("index/windows.png");
+    }
+
+    .index-pet{
+      pointer-events: none;
+      @include pos(234px, 386px, 353px, 614px);
+      @include bg_pos("index/pet-icon.png");
+    }
 
     .index-title {
       // pointer-events: none;
-      @include pos(633px, 253px, 46px, 254px);
+      @include pos(631px, 115px, 57px, 291px);
       @include bg_pos("index/title.png");
     }
 
-    .index-island {
-      pointer-events: none;
-      @include pos(714px, 867px, 15px, 542px);
-      @include bg_pos("index/island.png");
-    }
-
-    .index-cloud-1 {
-      pointer-events: none;
-      @include pos(210px, 147px, -15px, 535px);
-      @include bg_pos("index/cloud-1.png");
-    }
-
-    .index-cloud-2 {
-      pointer-events: none;
-      @include pos(151px, 172px, 656px, 486px);
-      @include bg_pos("index/cloud-2.png");
-    }
-
-    .index-tree-1 {
-      pointer-events: none;
-      @include pos(228px, 199px, -45px, 492px);
-      @include bg_pos("index/tree-1.png");
-    }
-
-    .index-sub-title {
-      pointer-events: none;
-      @include pos(423px, 87px, 170px, 486px);
-      @include bg_pos("index/sub-title.png");
-    }
-
     .index-rule-btn {
-      @include pos(193px, 50px, 612px, 553px);
+      @include pos(184px, 49px, -37px, 506px);
       @include bg_pos("index/rule-btn.png");
     }
 
     .index-prize-btn {
-      @include pos(184px, 49px, 612px, 615px);
+      @include pos(184px, 49px, -37px, 575px);
       @include bg_pos("index/prize-btn.png");
     }
 
     .index-start-btn {
-      @include pos(423px, 152px, 156px, 1025px);
+      @include pos(319px, 93px, 241px, 1169px);
       @include bg_pos("index/start-btn.png");
     }
 
     .index-agreement {
       font-family: "HarmonyOS_Sans_SC_Regular";
       pointer-events: none;
-      @include pos(736px, 182px, 7px, 1230px);
+      @include pos(736px, 182px, 7px, 1258px);
+      // background: rgba($color: #f49e6a, $alpha: 0.55);
+      font-size: 14px;
+      text-align: justify;
+      letter-spacing: 0.1px;
+      color: #ff8c84;
+      padding: 10px;
+      box-sizing: border-box;
+      border-radius: 10px;
+      line-height: 20px;
 
-      .agreement {
-        background-color: rgba(255, 255, 255, 0.75);
+      .b {
+        font-weight: 700;
+      }
 
-        font-size: 14px;
-        text-align: justify;
-        letter-spacing: 0.1px;
-        color: #124284;
-        padding: 10px;
-        box-sizing: border-box;
-        border-radius: 2px;
-        line-height: 20px;
-
-        .b {
-          font-weight: 700;
-        }
-
-        .orange {
-          color: #f5430c;
-          font-weight: 700;
-        }
+      .orange {
+        color: #fdf9de;
+        font-weight: 700;
       }
     }
+
   }
 }
 </style>

src/components/Loading.vue

@@ -13,6 +13,7 @@ const userStore = useMainStore();
 const loadNum = ref(0);
 
 onMounted(() => {
+
   Preloader({
     name: "加载页资源",
     imgs: loadImg,
@@ -24,7 +25,6 @@ onMounted(() => {
       duration: 0.2,
       autoAlpha: 1,
       onComplete: () => {
-        // 非本地环境
         if (import.meta.env.VITE_MODE != "dev") {
           getMyPrize({}, userStore.token).then((res) => {
             if (res.code == 0) {
@@ -36,6 +36,7 @@ onMounted(() => {
             }
           });
         }
+
         Preloader({
           name: "内页资源",
           imgs: pageImg,
@@ -46,6 +47,7 @@ onMounted(() => {
           },
         }).then((res) => {
           console.log("加载完成");
+
           gsap.to(".LoadPage", {
             duration: 1,
             autoAlpha: 0,
@@ -64,11 +66,9 @@ onMounted(() => {
   <div class="LoadPage" @touchmove.prevent>
     <div class="load-bg"></div>
     <div class="load-container">
-      <div class="load-icon"></div>
+    <div class="load-icon"></div>
       <div class="load-box">
-        <div class="bar">
-          <div class="bar-icon"></div>
-        </div>
+        <div class="bar"></div>
       </div>
       <div class="load-num">{{ loadNum }}%</div>
     </div>
@@ -93,45 +93,40 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .load-icon {
-      @include pos(83px, 101px, 325px, 370px);
+    .load-icon{
+      @include pos(101px, 55px, 325px, 370px);
       @include bg_pos("load/icon.png");
     }
 
     .load-box {
-      @include pos(576px, 36px, 87px, 500px);
+      @include pos(512px, 35px, 119px, 450px);
+      border-style: solid;
+      border-width: 2px;
+      border-color: #e17c4d;
       border-radius: 20px;
-      overflow: hidden;
-      padding: 4.5px;
-      @include bg_pos("load/bar-box.png");
+      padding: 2px;
 
       .bar {
-        @include box(0%, 27px);
-        position: relative;
-        @include bg_pos("load/bar.png");
-        background-size: 551px 27px;
-        .bar-icon {
-          @include box(35px, 36px);
-          position: absolute;
-          top: -4.5px;
-          left: 95%;
-          @include bg_pos("load/bar-icon.png");
-        }
+        @include box(0%, 26px);
+        border-radius: 20px;
+        background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
+        background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
+
       }
     }
 
     .load-num {
-      @include pos(750px, 50px, 0px, 570px);
+      @include pos(750px, 50px, 0px, 511px);
       text-align: center;
       font-size: 38px;
-      color: rgb(255, 255, 255);
+      color: #ffaf5e;
       line-height: 40px;
       font-weight: 700;
-      background: linear-gradient(to right, #dadada, #ffffff);
+      background: linear-gradient(to right, #f2733a, #ffd667);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      text-shadow: 0.9px 3.897px 0px rgba(44, 182, 255, 0.004);
+      // letter-spacing: 2px;
     }
 
     .btn {

src/components/MyPrize.vue

@@ -2,28 +2,27 @@
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
 import { Toast } from "vant";
-import useClipboard from "vue-clipboard3";
+import useClipboard from 'vue-clipboard3'
 import { useMainStore } from "@/store";
 import { onMounted } from "vue";
 
 // 页面配置初始化
 const emit = defineEmits(["MyPrizePage"]);
 const userStore = useMainStore();
-const { toClipboard } = useClipboard();
+const { toClipboard } = useClipboard()
 
 const money = ref(userStore.prizeMoney);
 const code = ref(userStore.prizeCode);
-const hasPrize = ref(userStore.hasPrize);
-
 
 const copyFn = (event) => {
   let e = event.target;
-  toClipboard(code.value);
+  toClipboard(code.value)
   debounceTap(e, () => {
     Toast(`复制成功：${code.value}`);
   });
 };
 
+
 const hide = (event) => {
   let e = event.target;
   debounceTap(e, () => {
@@ -48,22 +47,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="MyPrizePage" @touchmove.prevent>
+  <div class="MyPrizePage">
     <div class="myPrize-container">
-      <div v-if="hasPrize" class="myPrize-has-prize">
-        <div class="myPrize-icon"></div>
-        <div class="myPrize-money">已获得¥{{ money }}元现金红包</div>
-        <div class="myPrize-code-box">
-          <div class="code">兑换码：{{ code }}</div>
-          <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
-        </div>
-        <div class="myPrize-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。</div>
-      </div>
-      <div v-else class="myPrize-no-prize">
-        暂无中奖记录
+      <div class="myPrize-money">¥{{ money }}元</div>
+      <div class="myPrize-code-box">
+        <div class="code">{{ code }}</div>
+        <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
       </div>
+      <div class="myPrize-cls-btn" @click="hide($event)"></div>
     </div>
-    <div class="myPrize-cls-btn" @click="hide($event)"></div>
   </div>
 </template>  
 
@@ -75,76 +67,43 @@ onMounted(() => {
 
   .myPrize-container {
     position: relative;
-    @include box(683px, 585px);
-    @include bg_pos("prize/prize-box.png");
+    @include box(665px, 731px);
+    @include bg_pos("prize/myPrize-box.png");
 
-    .myPrize-has-prize {
-      @include pos(683px, 485px, 0px, 130px);
+    .myPrize-money {
+      @include pos(370px, 81px, 139px, 239px);
       display: flex;
-      flex-direction: column;
-      // justify-content: space-around;
+      justify-content: center;
       align-items: center;
-      color: #0070d9;
+      color: #e95b46;
+      font-weight: 700;
+      font-size: 58px;
+      letter-spacing: 4px;
+    }
 
-      .myPrize-icon {
-        @include box(204px, 214px);
-        @include bg_pos("prize/lucky-bag.png");
-        margin: 20px auto;
-      }
+    .myPrize-code-box {
+      @include pos(312px, 52px, 197px, 508px);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
 
-      .myPrize-money {
-        align-items: center;        
+      .code {
+        font-size: 25px;
         font-weight: 700;
-        font-size: 28px;
-        letter-spacing: 2px;
+        margin-right: 10px;
+        color: #fff6cc;
       }
 
-      .myPrize-code-box {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 70%;
-
-        .code {
-          font-size: 20px;
-          font-weight: 700;
-          margin-right: 10px;
-          color: #0070d9;
-        }
-
-        .myPrize-copy-btn {
-          @include box(52px, 25px);
-          @include bg_pos("prize/copy-btn.png");
-        }
-      }
-
-      .myPrize-tips{
-        width: 70%;
-        font-size: 20px;
-        line-height: 27px;
-        // padding: 0px 100px;
-
+      .myPrize-copy-btn {
+        @include box(77px, 39px);
+        @include bg_pos("prize/copy-btn.png");
       }
     }
 
-    .myPrize-no-prize{
-      @include pos(683px, 485px, 0px, 130px);
-      display: flex;
-      flex-direction: column;
-      // justify-content: space-around;
-      align-items: center;
-      color: #6b6b6b;
-      font-size: 50px;
-      line-height: 400px;
-      pointer-events: none;
-    }
-
-    
-  }
-  .myPrize-cls-btn {
-      @include box(43px, 43px);
+    .myPrize-cls-btn {
+      @include pos(82px, 82px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");
-      margin-top: 50px;
     }
+  }
 }
 </style>