From c02ef34e4585d7d6f532c2bf6d3e4951982f68d8 Mon Sep 17 00:00:00 2001
From: tcubic <123456>
Date: Mon, 1 Aug 2022 17:56:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E9=9C=80=E8=A6=81=E6=8B=9B=E5=95=86?=
 =?UTF-8?q?=E8=AF=81=E5=88=B8=E4=BA=8C=E6=AD=A5=E6=8E=88=E6=9D=83=EF=BC=8C?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E5=85=A5=E5=8F=A3=E4=BC=9A=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E6=8E=88=E6=9D=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Index.vue | 979 +++++++++++++++++++--------------------
 1 file changed, 474 insertions(+), 505 deletions(-)

diff --git a/src/components/Index.vue b/src/components/Index.vue
index cd852d3..1266f5a 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,582 +1,551 @@
 <template>
-    <div class="indexPage">
-        <div class="indexCon">
-            <div class="logo"></div>
-            <div class="title_main"></div>
-            <div class="cloud_left_1"></div>
-            <div class="cloud_right_1"></div>
-            <div class="luckybag_left"></div>
-            <div class="luckybag_right"></div>
-            <div class="icon_left_1"></div>
-            <div class="lucky_bag"></div>
-            <div class="lucky_bag_2">
-                <div class="prize_num">{{ prizeResult }}<span>元</span></div>
-            </div>
-            <div class="notice">
-                <span class="icon"><img src="../assets/img/laba.png" alt="" srcset=""></span>
-                <span class="num">活动已有{{ participantNum }}人参与</span>
-            </div>
-            <div class="cloud_left_2"></div>
-            <div class="icon_left_2"></div>
-            <div class="cloud_right_2"></div>
-            <!-- 大转盘 -->
-            <div class="zhuanpan">
-                <!-- <div class="liwu">
+  <div class="indexPage">
+    <div class="indexCon">
+      <div class="logo"></div>
+      <div class="title_main"></div>
+      <div class="cloud_left_1"></div>
+      <div class="cloud_right_1"></div>
+      <div class="luckybag_left"></div>
+      <div class="luckybag_right"></div>
+      <div class="icon_left_1"></div>
+      <div class="lucky_bag"></div>
+      <div class="lucky_bag_2">
+        <div class="prize_num">{{ prizeResult }}<span>元</span></div>
+      </div>
+      <div class="notice">
+        <span class="icon"
+          ><img src="../assets/img/laba.png" alt="" srcset=""
+        /></span>
+        <span class="num">活动已有{{ participantNum }}人参与</span>
+      </div>
+      <div class="cloud_left_2"></div>
+      <div class="icon_left_2"></div>
+      <div class="cloud_right_2"></div>
+      <!-- 大转盘 -->
+      <div class="zhuanpan">
+        <!-- <div class="liwu">
                     <div>1.99</div>
                     <div>2.99</div>
                     <div>3.99</div>
                     <div>4.99</div>
                     <div>5.99</div>
                 </div> -->
-            </div>
-            <div class="icon_right_2"></div>
-            <div class="icon_right_3"></div>
-            <div class="cloud_left_3"></div>
-            <div class="cloud_right_3"></div>
-            <div class="icon_right_1"></div>
-            <div class="select_box"></div>
-            <div class="draw_btn" @click=drawBtn></div>
-            <div class="rule_btn" @click="showRluesBtn"></div>
-            <div class="prize_btn" @click="showMyPrizePop"></div>
-            <div class="rule_btn_text"></div>
-            <div class="prize_btn_text"></div>
-            <div class="caidai"></div>
-        </div>
-        <!-- 活动列表 -->
-        <div class="activityCon">
-            <div class="activity_box">
-                <div class="activity_title"><img src="../assets/img/activity_title.png" alt=""></div>
-                <div class="activity_list">
-                    <div class="activity_li" v-for="(item,index) in activityList" :key="index"
-                        :style="{ 'background-image': 'url(' + item.banner + ')' }" v-show="item.show">
-                        <div class="btn" :style="{ 'background-image': 'url(' + item.btnImg + ')' }"
-                            @click="activityBtn(item)"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="cloud_bottom"></div>
-        </div>
-
-        <!-- 活动规则弹窗 -->
-        <Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
-        <!-- 我的奖品弹窗 -->
-        <MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
-        <!-- 添加专属服务人员企微弹窗 -->
-        <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
-
-        <LuckyWheel v-if="false" />
-
-
-
+      </div>
+      <div class="icon_right_2"></div>
+      <div class="icon_right_3"></div>
+      <div class="cloud_left_3"></div>
+      <div class="cloud_right_3"></div>
+      <div class="icon_right_1"></div>
+      <div class="select_box"></div>
+      <div class="draw_btn" @click="drawBtn"></div>
+      <div class="rule_btn" @click="showRluesBtn"></div>
+      <div class="prize_btn" @click="showMyPrizePop"></div>
+      <div class="rule_btn_text"></div>
+      <div class="prize_btn_text"></div>
+      <div class="caidai"></div>
     </div>
+    <!-- 活动列表 -->
+    <div class="activityCon">
+      <div class="activity_box">
+        <div class="activity_title">
+          <img src="../assets/img/activity_title.png" alt="" />
+        </div>
+        <div class="activity_list">
+          <div
+            class="activity_li"
+            v-for="(item, index) in activityList"
+            :key="index"
+            :style="{ 'background-image': 'url(' + item.banner + ')' }"
+            v-show="item.show"
+          >
+            <div
+              class="btn"
+              :style="{ 'background-image': 'url(' + item.btnImg + ')' }"
+              @click="activityBtn(item)"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="cloud_bottom"></div>
+    </div>
+
+    <!-- 活动规则弹窗 -->
+    <Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
+    <!-- 我的奖品弹窗 -->
+    <MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
+    <!-- 添加专属服务人员企微弹窗 -->
+    <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
+
+    <LuckyWheel v-if="false" />
+  </div>
 </template>
 
 <script setup>
-import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs, getCurrentInstance, computed } from 'vue'
+import {
+  onBeforeMount,
+  onMounted,
+  defineEmits,
+  defineProps,
+  reactive,
+  ref,
+  toRefs,
+  getCurrentInstance,
+  computed,
+} from "vue";
 import gsap from "gsap";
-import axios from 'axios'
-import { Toast, Dialog } from 'vant';
+import axios from "axios";
+import { Toast, Dialog } from "vant";
 import { useStore } from "vuex";
 // import { get_authorize, get_jssdk } from '@/api/authorize-api'
-import service from "@/api/httpServe"
-import qs from 'qs'
-import h5plugin from '@/utils/plugin'
-import Rules from '@/components/Rules'
-import MyPrize from '@/components/MyPrize'
-import ServiceList from '@/components/ServiceList'
-import LuckyWheel from '@/components/LuckyWheel'
-
-
-
+import service from "@/api/httpServe";
+import qs from "qs";
+import h5plugin from "@/utils/plugin";
+import Rules from "@/components/Rules";
+import MyPrize from "@/components/MyPrize";
+import ServiceList from "@/components/ServiceList";
+import LuckyWheel from "@/components/LuckyWheel";
 
 // 初始化
 const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
-const store = useStore()  //初始化vuex
-const { proxy } = getCurrentInstance();  //初始化全局方法：plugin工具箱
-
+const store = useStore(); //初始化vuex
+const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱
 
 // 活动信息
-const participantNum = ref(store.state.userAccount.participantNum)  // 活动参与人数prizeResult
-const prizeResult = ref(store.state.userAccount.prizeResult)  // 中奖金额
-
+const participantNum = ref(store.state.userAccount.participantNum); // 活动参与人数prizeResult
+const prizeResult = ref(store.state.userAccount.prizeResult); // 中奖金额
 
 // 页面控制
-const showRulesPop = ref(false)
-const showMyPrize = ref(false)
-const showServicePop = ref(false)
-
-
+const showRulesPop = ref(false);
+const showMyPrize = ref(false);
+const showServicePop = ref(false);
 
 // 活动列表
 const activityList = reactive([
-    {
-        id: 1,
-        show: true,
-        banner: require('../assets/img/activity_1.png'),
-        btnImg: require('../assets/img/li_btn_1.png'),
-    },
-    {
-        id: 2,
-        show: true,
-        banner: require('../assets/img/activity_2.png'),
-        btnImg: require('../assets/img/li_btn_2.png'),
-    },
-    {
-        id: 3,
-        show: true,
-        banner: require('../assets/img/activity_3.png'),
-        btnImg: require('../assets/img/li_btn_3.png'),
-    },
-    {
-        id: 4,
-        show: true,
-        banner: require('../assets/img/activity_4.png'),
-        btnImg: require('../assets/img/li_btn_4.png'),
-    },
-    {
-        id: 5,
-        show: true,
-        banner: require('../assets/img/activity_5.png'),
-        btnImg: require('../assets/img/li_btn_5.png'),
-    },
-])
-
-
+  {
+    id: 1,
+    show: true,
+    banner: require("../assets/img/activity_1.png"),
+    btnImg: require("../assets/img/li_btn_1.png"),
+  },
+  {
+    id: 2,
+    show: true,
+    banner: require("../assets/img/activity_2.png"),
+    btnImg: require("../assets/img/li_btn_2.png"),
+  },
+  {
+    id: 3,
+    show: true,
+    banner: require("../assets/img/activity_3.png"),
+    btnImg: require("../assets/img/li_btn_3.png"),
+  },
+  {
+    id: 4,
+    show: true,
+    banner: require("../assets/img/activity_4.png"),
+    btnImg: require("../assets/img/li_btn_4.png"),
+  },
+  {
+    id: 5,
+    show: true,
+    banner: require("../assets/img/activity_5.png"),
+    btnImg: require("../assets/img/li_btn_5.png"),
+  },
+]);
 
 // 页面挂载前
-onBeforeMount(() => {
-
-})
-
-
+onBeforeMount(() => {});
 
 // 页面挂载后
-onMounted(() => { })
+onMounted(() => {});
 
 const btn = () => {
-    // Toast('项目开发中');
-    emit('indexPage', 'hello')
+  // Toast('项目开发中');
+  emit("indexPage", "hello");
 
+  Dialog.alert({
+    title: "招商证券88司庆活动",
+    message: "项目开发中",
+    confirmButtonText: "确定",
+    showCancelButton: true,
+  })
+    .then((e) => {
+      // 更新openid
+      store.commit({ type: "updateOpenid", openid: "openid110" });
 
-    Dialog.alert({
-        title: '招商证券88司庆活动',
-        message: '项目开发中',
-        confirmButtonText: '确定',
-        showCancelButton: true,
-    }).then((e) => {
-
-        // 更新openid
-        store.commit({ type: 'updateOpenid', openid: 'openid110' })
-
-
-        console.log(e, store.state.userAccount);
-    }).catch((e) => {
-        console.log(e);
+      console.log(e, store.state.userAccount);
+    })
+    .catch((e) => {
+      console.log(e);
     });
-}
-
+};
 
 // 抽奖按钮
-const drawBtn = ()=>{
-    console.log("抽奖：");
-//   console.log("授权：",getAuthorize(1));
-// let href = window.location.href;
-//     let h_idx = window.location.href.indexOf("#");
-//     let out_href = href.slice(0, h_idx);
+const drawBtn = () => {
+  console.log("抽奖：");
+  //   console.log("授权：",getAuthorize(1));
+  // let href = window.location.href;
+  //     let h_idx = window.location.href.indexOf("#");
+  //     let out_href = href.slice(0, h_idx);
 
-//   service.get(process.env.VUE_APP_ZS_DOMAIN + '/wxauth/official/account/authorize',{params:{
-//     redirectUrl: out_href,
-//     scope: 1,
-//   }}).then((res) => {
+  //   service.get(process.env.VUE_APP_ZS_DOMAIN + '/wxauth/official/account/authorize',{params:{
+  //     redirectUrl: out_href,
+  //     scope: 1,
+  //   }}).then((res) => {
 
-//     console.log("招商授权结果：",res);
-//   })
-
-            if (h5plugin.getQueryString("forceauth")) {
-                // H5P.getSetCookie('authState',1,{expires:0.5})
-                console.log('yes-forceauth');
-                getAuthorize(0);
-            } else {
-                // H5P.getSetCookie('authState',1,{expires:0.5})
-                console.log('no-forceauth');
-                getAuthorize(1);
-            }
-
-}
+  //     console.log("招商授权结果：",res);
+  //   })
 
+  if (h5plugin.getQueryString("forceauth")) {
+    // H5P.getSetCookie('authState',1,{expires:0.5})
+    console.log("yes-forceauth");
+    getAuthorize(0);
+  } else {
+    // H5P.getSetCookie('authState',1,{expires:0.5})
+    console.log("no-forceauth");
+    getAuthorize(1);
+  }
+};
 
 // 活动点击
 const activityBtn = (item) => {
-    console.log(item.id);
-
-    if (item.id == 1) {
-        showServicePop.value = true
-
-    }
-}
+  console.log(item.id);
 
+  if (item.id == 1) {
+    showServicePop.value = true;
+  }
+};
 
 // 活动规则弹窗
 const showRluesBtn = () => {
-    showRulesPop.value = true
-}
+  showRulesPop.value = true;
+};
 const hideRulesPop = () => {
-    showRulesPop.value = false
-}
+  showRulesPop.value = false;
+};
 
 // 我的奖品页面
 const showMyPrizePop = () => {
-    showMyPrize.value = true
-}
+  showMyPrize.value = true;
+};
 const myPrizePop = () => {
-    showMyPrize.value = false
-}
+  showMyPrize.value = false;
+};
 
 // 企微弹窗
 const hideServicePop = () => {
-    showServicePop.value = false
-}
-
+  showServicePop.value = false;
+};
 
 // 招商证券授权
-const getAuthorize = (scopeState)=> {
-
-    let href = window.location.href;
-    let h_idx = window.location.href.indexOf("#");
-    let out_href = href.slice(0, h_idx);
-    // return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
-    window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${(out_href)}&scope=${scopeState}`
-}
-
-
+const getAuthorize = (scopeState) => {
+  let href = window.location.href;
+  let h_idx = window.location.href.indexOf("#");
+  let out_href = href.slice(0, h_idx);
+  // return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
+  window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
+};
 </script>
 
 <style lang="scss" scoped>
 .indexPage {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  overflow-y: scroll;
+
+  .indexCon {
+    // @include pos(100%, 1090px, 0, 0);
     width: 100%;
-    height: 100%;
-    position: fixed;
+    height: 1090px;
+    position: relative;
     top: 0;
     left: 0;
-    bottom: 0;
-    right: 0;
-    overflow: hidden;
-    overflow-y: scroll;
-
-
-    .indexCon {
-        // @include pos(100%, 1090px, 0, 0);
-        width: 100%;
-        height: 1090px;
-        position: relative;
-        top: 0;
-        left: 0;
-        @include bg_pos('../assets/img/top_bg.jpg');
-        // overflow: hidden;
-
-        .logo {
-            @include pos(241px, 36px, 31px, 41px);
-            @include bg_pos('../assets/img/logo.png');
-            pointer-events: none;
-
-        }
-
-        .notice {
-            @include pos(350px, 48px, 200px, 592px);
-            @include bg_pos('../assets/img/notice_box.png');
-            pointer-events: none;
-            align-self: center;
-            justify-content: center;
-
-            display: flex;
-            font-size: 20px;
-
-            .icon {
-                width: 26px;
-                height: 48px;
-                // @include bg_pos('../assets/img/laba.png');
-
-                line-height: 54px;
-
-                img {
-                    width: 26px;
-                    height: 25px;
-                }
-            }
-
-            .num {
-                height: 48px;
-                line-height: 48px;
-            }
-        }
-
-        .title_main {
-            @include pos(547px, 221px, 107px, 108px);
-            @include bg_pos('../assets/img/title_main.png');
-            pointer-events: none;
-        }
-
-        .caidai {
-            @include pos(641px, 503px, 47px, 79px);
-            @include bg_pos('../assets/img/caidai.png');
-            pointer-events: none;
-        }
-
-        .luckybag_left {
-            @include pos(144px, 138px, 0px, 551px);
-            @include bg_pos('../assets/img/luckybag_left.png');
-            pointer-events: none;
-        }
-
-        .luckybag_right {
-            @include pos(118px, 110px, 615px, 503px);
-            @include bg_pos('../assets/img/luckybag_right_2.png');
-            pointer-events: none;
-        }
-
-        .icon_left_1 {
-            @include pos(54px, 52px, 104px, 605px);
-            @include bg_pos('../assets/img/icon_left_1.png');
-            pointer-events: none;
-        }
-
-        .icon_left_2 {
-            @include pos(63px, 61px, 11px, 652px);
-            @include bg_pos('../assets/img/icon_left_2.png');
-            pointer-events: none;
-        }
-
-        .icon_right_1 {
-            @include pos(81px, 80px, 556px, 400px);
-            @include bg_pos('../assets/img/icon_right_1.png');
-            pointer-events: none;
-        }
-
-        .icon_right_2 {
-            @include pos(70px, 65px, 567px, 573px);
-            @include bg_pos('../assets/img/icon_right_2.png');
-            pointer-events: none;
-        }
-
-        .icon_right_3 {
-            @include pos(103px, 108px, 633px, 600px);
-            @include bg_pos('../assets/img/luckybag_right.png');
-            pointer-events: none;
-        }
-
-
-        .cloud_left_1 {
-            @include pos(214px, 147px, 0px, 523px);
-            @include bg_pos('../assets/img/cloud_left_1.png');
-            pointer-events: none;
-        }
-
-        .cloud_left_2 {
-            @include pos(375px, 176px, 0px, 616px);
-            @include bg_pos('../assets/img/cloud_left_2.png');
-            pointer-events: none;
-        }
-
-        .cloud_left_3 {
-            @include pos(151px, 136px, 0px, 645px);
-            @include bg_pos('../assets/img/cloud_left_3.png');
-            pointer-events: none;
-        }
-
-        .cloud_right_1 {
-            @include pos(270px, 215px, 480px, 477px);
-            @include bg_pos('../assets/img/cloud_right_1.png');
-            pointer-events: none;
-        }
-
-        .cloud_right_2 {
-            @include pos(375px, 202px, 375px, 595px);
-            @include bg_pos('../assets/img/cloud_right_2.png');
-            pointer-events: none;
-        }
-
-        .cloud_right_3 {
-            @include pos(113px, 108px, 639px, 686px);
-            @include bg_pos('../assets/img/cloud_right_3.png');
-            pointer-events: none;
-        }
-
-        .lucky_bag {
-            @include pos(308px, 355px, 227px, 356px);
-            @include bg_pos('../assets/img/luckybag.png');
-            pointer-events: none;
-            visibility: hidden;
-        }
-
-        .lucky_bag_2 {
-            @include pos(330px, 345px, 210px, 348px);
-            @include bg_pos('../assets/img/luckybag_2.png');
-            pointer-events: none;
-
-            // display: flex;
-
-
-            .prize_num {
-                @include pos(330px, 50px, 0px, 79px);
-                font-weight: 700;
-                font-size: 59px;
-                color: #ff480e;
-                text-align: center;
-
-                span {
-                    color: #ca2f0a;
-                    font-size: 24px;
-                    font-weight: 700;
-
-                }
-
-
-            }
-        }
-
-
-        .select_box {
-            @include pos(270px, 325px, 239px, 666px);
-            @include bg_pos('../assets/img/select_box.png');
-            pointer-events: none;
-        }
-
-        .draw_btn {
-            @include pos(216px, 252px, 273px, 810px);
-            @include bg_pos('../assets/img/draw_btn.png');
-        }
-
-        .rule_btn {
-            @include pos(137px, 153px, 75px, 883px);
-            @include bg_pos('../assets/img/rule_btn.png');
-        }
-
-        .rule_btn_text {
-            @include pos(98px, 26px, 92px, 1035px);
-            @include bg_pos('../assets/img/rule_btn_text.png');
-        }
-
-        .prize_btn {
-            @include pos(137px, 153px, 541px, 883px);
-            @include bg_pos('../assets/img/prize_btn.png');
-        }
-
-        .prize_btn_text {
-            @include pos(98px, 26px, 558px, 1035px);
-            @include bg_pos('../assets/img/prize_btn_text.png');
-        }
-
-        .zhuanpan {
-            @include pos(750px, 465px, 0px, 657px);
-            @include bg_pos('../assets/img/zhuanpan.png');
-            pointer-events: none;
-            overflow: hidden;
-
-            .liwu {
-                @include pos(750px, 465px, 0px, 40px);
-                display: flex;
-                border-radius: 50%;
-                // background-color: rgb(255, 0, 0);
-                // width: 1146px;
-                // height: 812px;
-
-                div {
-                    border: 2px solid #000;
-                    width: 20%;
-                    height: 110px;
-                    font-size: 36px;
-                    font-weight: 700;
-                    color: #fc4638;
-                    text-align: center;
-                    line-height: 110px;
-                    border-radius: 50%;
-                    transform: rotate(30deg);
-
-                }
-
-            }
-        }
-
-
+    @include bg_pos("../assets/img/top_bg.jpg");
+    // overflow: hidden;
 
+    .logo {
+      @include pos(241px, 36px, 31px, 41px);
+      @include bg_pos("../assets/img/logo.png");
+      pointer-events: none;
     }
 
-    .activityCon {
+    .notice {
+      @include pos(350px, 48px, 200px, 592px);
+      @include bg_pos("../assets/img/notice_box.png");
+      pointer-events: none;
+      align-self: center;
+      justify-content: center;
 
-        width: 750px;
-        @include bg_pos('../assets/img/activity_bg.jpg');
+      display: flex;
+      font-size: 20px;
 
-        .activity_box {
-            width: 700px;
-            // height: 100%;
-            margin: 0 auto;
-            margin-top: 30px;
-            @include bg_pos('../assets/img/activity_box.png');
-            box-sizing: border-box;
-
-            .activity_title {
-                width: 633px;
-                height: 120px;
-                margin: 0 auto;
-                // margin-top: 55px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                img {
-                    width: 633px;
-                    height: 29px;
-                }
-
-                // @include bg_pos('../assets/img/activity_title.png');
-            }
-
-            .activity_list {
-                width: 633px;
-                margin: 0 auto;
-                display: flex;
-                flex-direction: column;
-                margin-top: 20px;
-
-                .activity_li {
-                    width: 633px;
-                    height: 166px;
-                    margin-bottom: 30px;
-                    background-size: 100%;
-                    position: relative;
-
-                    .btn {
-                        width: 121px;
-                        height: 121px;
-                        position: absolute;
-                        top: 16px;
-                        left: 479px;
-                        background-size: 100%;
-
-                    }
-
-
-                }
-
-
-
-
-            }
-
-        }
-
-        .cloud_bottom {
-            width: 750px;
-            height: 255px;
-            margin-top: -160px;
-            @include bg_pos('../assets/img/cloud_bottom.png');
+      .icon {
+        width: 26px;
+        height: 48px;
+        // @include bg_pos('../assets/img/laba.png');
 
+        line-height: 54px;
 
+        img {
+          width: 26px;
+          height: 25px;
         }
+      }
 
+      .num {
+        height: 48px;
+        line-height: 48px;
+      }
     }
 
+    .title_main {
+      @include pos(547px, 221px, 107px, 108px);
+      @include bg_pos("../assets/img/title_main.png");
+      pointer-events: none;
+    }
 
+    .caidai {
+      @include pos(641px, 503px, 47px, 79px);
+      @include bg_pos("../assets/img/caidai.png");
+      pointer-events: none;
+    }
+
+    .luckybag_left {
+      @include pos(144px, 138px, 0px, 551px);
+      @include bg_pos("../assets/img/luckybag_left.png");
+      pointer-events: none;
+    }
+
+    .luckybag_right {
+      @include pos(118px, 110px, 615px, 503px);
+      @include bg_pos("../assets/img/luckybag_right_2.png");
+      pointer-events: none;
+    }
+
+    .icon_left_1 {
+      @include pos(54px, 52px, 104px, 605px);
+      @include bg_pos("../assets/img/icon_left_1.png");
+      pointer-events: none;
+    }
+
+    .icon_left_2 {
+      @include pos(63px, 61px, 11px, 652px);
+      @include bg_pos("../assets/img/icon_left_2.png");
+      pointer-events: none;
+    }
+
+    .icon_right_1 {
+      @include pos(81px, 80px, 556px, 400px);
+      @include bg_pos("../assets/img/icon_right_1.png");
+      pointer-events: none;
+    }
+
+    .icon_right_2 {
+      @include pos(70px, 65px, 567px, 573px);
+      @include bg_pos("../assets/img/icon_right_2.png");
+      pointer-events: none;
+    }
+
+    .icon_right_3 {
+      @include pos(103px, 108px, 633px, 600px);
+      @include bg_pos("../assets/img/luckybag_right.png");
+      pointer-events: none;
+    }
+
+    .cloud_left_1 {
+      @include pos(214px, 147px, 0px, 523px);
+      @include bg_pos("../assets/img/cloud_left_1.png");
+      pointer-events: none;
+    }
+
+    .cloud_left_2 {
+      @include pos(375px, 176px, 0px, 616px);
+      @include bg_pos("../assets/img/cloud_left_2.png");
+      pointer-events: none;
+    }
+
+    .cloud_left_3 {
+      @include pos(151px, 136px, 0px, 645px);
+      @include bg_pos("../assets/img/cloud_left_3.png");
+      pointer-events: none;
+    }
+
+    .cloud_right_1 {
+      @include pos(270px, 215px, 480px, 477px);
+      @include bg_pos("../assets/img/cloud_right_1.png");
+      pointer-events: none;
+    }
+
+    .cloud_right_2 {
+      @include pos(375px, 202px, 375px, 595px);
+      @include bg_pos("../assets/img/cloud_right_2.png");
+      pointer-events: none;
+    }
+
+    .cloud_right_3 {
+      @include pos(113px, 108px, 639px, 686px);
+      @include bg_pos("../assets/img/cloud_right_3.png");
+      pointer-events: none;
+    }
+
+    .lucky_bag {
+      @include pos(308px, 355px, 227px, 356px);
+      @include bg_pos("../assets/img/luckybag.png");
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    .lucky_bag_2 {
+      @include pos(330px, 345px, 210px, 348px);
+      @include bg_pos("../assets/img/luckybag_2.png");
+      pointer-events: none;
+
+      // display: flex;
+
+      .prize_num {
+        @include pos(330px, 50px, 0px, 79px);
+        font-weight: 700;
+        font-size: 59px;
+        color: #ff480e;
+        text-align: center;
+
+        span {
+          color: #ca2f0a;
+          font-size: 24px;
+          font-weight: 700;
+        }
+      }
+    }
+
+    .select_box {
+      @include pos(270px, 325px, 239px, 666px);
+      @include bg_pos("../assets/img/select_box.png");
+      pointer-events: none;
+    }
+
+    .draw_btn {
+      @include pos(216px, 252px, 273px, 810px);
+      @include bg_pos("../assets/img/draw_btn.png");
+    }
+
+    .rule_btn {
+      @include pos(137px, 153px, 75px, 883px);
+      @include bg_pos("../assets/img/rule_btn.png");
+    }
+
+    .rule_btn_text {
+      @include pos(98px, 26px, 92px, 1035px);
+      @include bg_pos("../assets/img/rule_btn_text.png");
+    }
+
+    .prize_btn {
+      @include pos(137px, 153px, 541px, 883px);
+      @include bg_pos("../assets/img/prize_btn.png");
+    }
+
+    .prize_btn_text {
+      @include pos(98px, 26px, 558px, 1035px);
+      @include bg_pos("../assets/img/prize_btn_text.png");
+    }
+
+    .zhuanpan {
+      @include pos(750px, 465px, 0px, 657px);
+      @include bg_pos("../assets/img/zhuanpan.png");
+      pointer-events: none;
+      overflow: hidden;
+
+      .liwu {
+        @include pos(750px, 465px, 0px, 40px);
+        display: flex;
+        border-radius: 50%;
+        // background-color: rgb(255, 0, 0);
+        // width: 1146px;
+        // height: 812px;
+
+        div {
+          border: 2px solid #000;
+          width: 20%;
+          height: 110px;
+          font-size: 36px;
+          font-weight: 700;
+          color: #fc4638;
+          text-align: center;
+          line-height: 110px;
+          border-radius: 50%;
+          transform: rotate(30deg);
+        }
+      }
+    }
+  }
+
+  .activityCon {
+    width: 750px;
+    @include bg_pos("../assets/img/activity_bg.jpg");
+
+    .activity_box {
+      width: 700px;
+      // height: 100%;
+      margin: 0 auto;
+      margin-top: 30px;
+      @include bg_pos("../assets/img/activity_box.png");
+      box-sizing: border-box;
+
+      .activity_title {
+        width: 633px;
+        height: 120px;
+        margin: 0 auto;
+        // margin-top: 55px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 633px;
+          height: 29px;
+        }
+
+        // @include bg_pos('../assets/img/activity_title.png');
+      }
+
+      .activity_list {
+        width: 633px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        margin-top: 20px;
+
+        .activity_li {
+          width: 633px;
+          height: 166px;
+          margin-bottom: 30px;
+          background-size: 100%;
+          position: relative;
+
+          .btn {
+            width: 121px;
+            height: 121px;
+            position: absolute;
+            top: 16px;
+            left: 479px;
+            background-size: 100%;
+          }
+        }
+      }
+    }
+
+    .cloud_bottom {
+      width: 750px;
+      height: 255px;
+      margin-top: -160px;
+      @include bg_pos("../assets/img/cloud_bottom.png");
+    }
+  }
 }
 </style>
\ No newline at end of file