<template>
  <div class="indexPage">
    <div class="indexCon">
      <div class="logo" @click="deleteData"></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" v-if="!gameOver"></div>
      <div class="lucky_bag_2" v-if="gameOver">
        <div class="no_prize_text" v-if="drawAmount == 0"></div>
        <div class="prize_text" v-if="drawAmount != 0"></div>
        <div class="prize_num" v-if="drawAmount != 0">
          {{ drawAmount }}<span>元</span>
        </div>
      </div>
      <div class="notice">
        <span class="icon"
          ><img src="../assets/img/laba.png" alt="" srcset=""
        /></span>
        <span class="num"
          >活动已有{{ store.state.userAccount.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>
      <LuckyWheel v-if="true" ref="LuckyWheelCon" @luckyWheel="luckyWheelFn" />
      <!-- <div class="LuckyWheel_zz"></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"
        :class="isDraw ? 'is_draw' : ''"
        @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" />
    <!-- 抽奖结果弹窗 -->
    <Draw v-if="showDrawCon" @drawCon="drawConFn" :prizeMsg="prizeMsg" />
  </div>

  <!-- 如果添加过企微，进入页面后弹窗显示中奖结果，未中奖的不显示 -->、
  <div class="serviceLuckyPop">
    <div class="serviceLuckyPop_container">
      <!-- 企微中奖弹窗 -->
      <div class="serviceLuckyPop_box" v-if="serviceLuckyPopBox">
        <div class="money">{{ serviceLuckyMsg.money }}</div>
        <div class="get_luckybag" @click="getServiceLucky"></div>
      </div>

      <!-- 领奖弹窗 -->
      <div class="serviceLuckyPop_get_box" v-if="!serviceLuckyPopBox">
        <div class="go_index_btn" @click="hideServiceLuckyPop"></div>
      </div>

      <div class="cls_btn" @click="hideServiceLuckyPop"></div>
    </div>
  </div>
</template>

<script setup>
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 { useStore } from "vuex";
// import { get_authorize, get_jssdk } from '@/api/authorize-api'
import service from "@/api/httpServe";
import qs from "qs";
import wx from "@/utils/wx-jssdk.1.6.0.js";
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 Draw from "@/components/Draw";

// 初始化
const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore(); //初始化vuex
const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱

// 活动信息
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 gameOver = ref(false);
const drawType = ref(1);
const isDraw = ref(false);
const LuckyWheelCon = ref(null);
const showDrawCon = ref(false); //抽奖结果弹窗组件
const drawAmount = ref(""); //显示的红包金额
const prizeMsg = reactive({
  amount: 0,
  id: 1,
});
const serviceLuckyPopBox = ref(true);

// 企微红包弹窗金额
const isGetedServiceLucky = ref(false);
const serviceLuckyMsg = reactive({
  money: 0,
  id: 1,
});

const hideServiceLuckyPop = () => {
  gsap.to(".serviceLuckyPop", { duration: 0.5, autoAlpha: 0 });
 
};

// 点击领取企微红包
const getServiceLucky = () => {
  if (
    store.state.userAccount.nkh == "" ||
    store.state.userAccount.nkh == undefined
  ) {
    // Toast("牛卡号为空，先绑定牛卡号");
    Dialog.confirm({
      title: "温馨提示",
      message: "请先绑定牛卡号",
      confirmButtonText: "前往绑定",
    })
      .then(() => {
        wx.miniProgram.navigateTo({
          url: "/subs/bind/pages/login/login?source=zszq",
        });
      })
      .catch(() => {
        // on cancel
      });
  } else {
    // 有牛卡号的话领取
    console.log("getServiceLucky:", serviceLuckyMsg);
    redpacket(serviceLuckyMsg.id);
  }
};

// 领取红包接口
const redpacket = (prizeId) => {
  let redpacketId = prizeId;
  service
    .post(
      process.env.VUE_APP_API +
        "/cms-activity/cms88/redpacket/receive/" +
        redpacketId,
      {}
    )
    .then((res) => {
      console.log("领取红包结果", res);
      let data = res.data;
      if (data.code == 0) {
        serviceLuckyPopBox.value = false;
        getMyPrizeRecored(); // 更新我的奖品列表
      } else {
        Toast(data.msg);
      }
    });
};

// 活动列表
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: store.state.userAccount.isBirthMon,
    // show: 1,
    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: 6,
    show: true,
    banner: require("../assets/img/activity_6.png"),
    btnImg: require("../assets/img/li_btn_6.png"),
  },
]);

// 页面挂载前
onBeforeMount(() => {
  // 判断参与活动红包是否领取
  let arr = store.state.userAccount.prizeList;
  arr.forEach((element) => {
    if (element.type == 1) {
      isDraw.value = true;
      gameOver.value = true;
      drawAmount.value = element.amount;
    }

    // 判断红包记录里面是否存在企微红包
    if (element.type == 2) {
      isGetedServiceLucky.value = true;
    }
  });
});

// 入场动画
const animationIndex = () => {
  gsap.from(".title_main", { duration: 0.5, scale: 0 });
  gsap.from(".indexCon", { duration: 0.5, autoAlpha: 0 });

  gsap.from(".cloud_left_1,.cloud_left_2,.cloud_left_3", {
    duration: 0.5,
    x: -200,
    delay: 0.5,
  });
  gsap.from(".cloud_right_1,.cloud_right_2", {
    duration: 0.5,
    x: 200,
    delay: 0.5,
  });
  gsap.from(".lucky_bag_2,.lucky_bag,.notice", {
    duration: 0.5,
    y: -200,
    autoAlpha: 0,
  });
  gsap.from(".LuckyWheelCon", { duration: 0.5, autoAlpha: 0, delay: 1 });
  gsap.from(".activity_li", {
    duration: 1,
    autoAlpha: 0,
    y: 150,
    stagger: 0.1,
  });

  gsap.from(
    ".activityCon,.zhuanpan,.select_box,.draw_btn,.rule_btn,.rule_btn_text,.prize_btn,.prize_btn_text",
    {
      duration: 0.5,
      y: 200,
      autoAlpha: 0,
      onComplete: () => {
        gsap.from(".icon_right_3", {
          duration: 1,
          rotation: -10,
          scale: 1.1,
          repeat: -1,
          yoyo: true,
        });
        gsap.from(".luckybag_left", {
          duration: 0.75,
          rotation: 10,
          scale: 1.2,
          repeat: -1,
          yoyo: true,
          ease: "Bounce.easeIn",
        });
        gsap.from(".luckybag_right", {
          duration: 1,
          rotation: -10,
          scale: 1.2,
          repeat: -1,
          yoyo: true,
          ease: "Bounce.easeInOut",
        });
        gsap.to(".title_main", {
          duration: 2,
          y: -10,
          scale: 1.05,
          repeat: -1,
          yoyo: true,
        });
      },
    }
  );
};

// 页面挂载后
onMounted(() => {
  // 挂载后执行入场动画
  animationIndex();

  // 埋点
  addPoint();

  // 如果添加了企微,直接调抽奖结果,中奖了就弹窗,未中奖的话不弹窗
  if (
    store.state.userAccount.isAddCustomer == 1 &&
    !isGetedServiceLucky.value
  ) {
    getluckyBag2(2);
  }

  if (!isDraw.value) {
    gsap.to(".draw_btn", {
      duration: 0.5,
      scale: 1.1,
      repeat: -1,
      yoyo: true,
      ease: "Bounce.easeIn",
    });
  }
});

// 抽奖按钮
const drawBtn = () => {
  if (!isDraw.value) {
    // LuckyWheelCon.value.showDrawAni(3, true)
    gsap.killTweensOf(".draw_btn");
    getluckyBag(1); //大转盘抽奖：传参数1
  } else {
    Toast("您已经抽过奖");
  }
};

// 大转盘结束后的处理事件
const luckyWheelFn = () => {
  console.log("game over");
  showDrawCon.value = true;
  gameOver.value = true;
};

// 活动点击
const activityBtn = (item) => {
  console.log(item.id);

  if (item.id == 1) {
    showServicePop.value = true;
  }

  if (item.id == 2) {
    console.log("新客专享页面");
    // let url = "/subs/financial/pages/index/index";
    wx.miniProgram.navigateTo({
      url: "/subs/financial/pages/index/index",
    });
  }

  if (item.id == 3) {
    console.log("生日专享页面");
    window.location.href =
      "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_MxCbQgYb";
  }

  if (item.id == 4) {
    console.log("牛牛杯");
    window.location.href =
      "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_uD5KUL2d";
  }

  if (item.id == 5) {
    console.log("财富微课堂");
    // window.location.href='/subs/activity/pages/classroom/classroom'
    wx.miniProgram.navigateTo({
      url: "/subs/activity/pages/classroom/classroom",
    });
  }

  if (item.id == 6) {
    console.log("财富日报");
    wx.miniProgram.navigateTo({
      url: "/subs/wealthpaper/wealthpaper",
    });
  }
};

// 活动规则弹窗
const showRluesBtn = () => {
  showRulesPop.value = true;
};
const hideRulesPop = () => {
  showRulesPop.value = false;
};

// 我的奖品页面
const showMyPrizePop = () => {
  showMyPrize.value = true;
};

// 关闭我的奖品中心弹窗
const myPrizePop = () => {
  showMyPrize.value = false;
};

// 关闭抽奖弹窗
const drawConFn = () => {
  showDrawCon.value = false;
};

// 企微弹窗
const hideServicePop = () => {
  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 gerCardId = (carid) => {
  service
    .get(process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid)
    .then((res) => {
      console.log("企微二维码：", res.data.data);
      store.commit({
        type: "updateeEqcodeImg",
        eqcodeImg: res.data.data,
      });
    });
};

// 获取绑定的资金账号
const getInfo = () => {
  service
    .post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
    .then((res) => {
      console.log("资金账号：", res);
    });
};

// 我的红包记录
const getMyPrizeRecored = () => {
  service
    .post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
    .then((res) => {
      console.log("红包记录：", res.data);

      store.commit({
        type: "updatePrizeList",
        prizeList: res.data.data,
      });
    });
};

// 查询是否添加了企微： isInActivityDate 0否 1是
const getIsAddService = () => {
  let isInActivityDate = 0;
  service
    .post(
      process.env.VUE_APP_API +
        "/cms-activity/cms88/qywx/isadded/" +
        isInActivityDate,
      {}
    )
    .then((res) => {
      console.log("是否添加了企微", res);
    });
};

// 抽取红包 type为红包类型 1为参与红包 2为加企微
const getluckyBag = (id) => {
  let type = id;
  drawType.value = id;
  service
    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
      xglOpenId: store.state.userAccount.xglOpenId,
      redpacketType: type,
    })
    .then((res) => {
      console.log("抽取红包结果：", res);
      if (res.data.code == 0) {
        isDraw.value = true;
        let prizeNum = res.data.data.amount;
        drawAmount.value = res.data.data.amount;
        prizeMsg.amount = res.data.data.amount;
        prizeMsg.id = res.data.data.id;
        gsap.set(".LuckyWheel_zz", { autoAlpha: 0 });

        // 大转盘正常抽奖
        if (prizeNum == 0) {
          // 谢谢参与
          LuckyWheelCon.value.showDrawAni(5, true);
        }
        if (prizeNum == 1.08) {
          // 1.88元
          LuckyWheelCon.value.showDrawAni(1, true);
        }
        if (prizeNum == 2.68) {
          // 2.68元
          LuckyWheelCon.value.showDrawAni(2, true);
        }
        if (prizeNum == 6.66) {
          // 6.66元
          LuckyWheelCon.value.showDrawAni(3, true);
        }
        if (prizeNum == 8.88) {
          // 6.66元
          LuckyWheelCon.value.showDrawAni(4, true);
        }

        getMyPrizeRecored(); // 更新我的奖品列表
      } else {
        Toast(res.data.msg);
      }
    });
};

const getluckyBag2 = (id) => {
  let type = id;
  service
    .post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
      xglOpenId: store.state.userAccount.xglOpenId,
      redpacketType: type,
    })
    .then((res) => {
      console.log("抽取红包结果2：", res);
      if (res.data.code == 0) {
        // 如果中奖就弹窗
        if (res.data.data.amount != 0) {
          serviceLuckyMsg.money = res.data.data.amount;
          serviceLuckyMsg.id = res.data.data.id;
          console.log("企微中奖");
          gsap.to(".serviceLuckyPop", { duration: 0.5, autoAlpha: 1 });
          gsap.from(".serviceLuckyPop_box", {
            duration: 0.5,
            autoAlpha: 0,
            scale: 0,
          });
          gsap.from(".cls_btn", {
            duration: 0.5,
            autoAlpha: 0,
            y: 50,
            delay:0.5
          });
        } else {
          console.log("企微不中奖");
        }

        getMyPrizeRecored(); // 更新我的奖品列表
      } else {
        Toast(res.data.msg);
      }
    });
};

// 活动参与人数
const getActivityNum = () => {
  service
    .post(process.env.VUE_APP_API + "/cms-activity/cms88/user/count/")
    .then((res) => {
      console.log(res.data.data);

      store.commit({
        type: "updateParticipantNum",
        participantNum: res.data.data,
      });
    });
};

// 是否在活动期间生日
const getBrithday = () => {
  service
    .post(
      process.env.VUE_APP_API + "/cms-activity/cms88/user/isin/birthday",
      {}
    )
    .then((res) => {
      console.log(res);
    });
};

// 埋点接口
const addPoint = () => {
  service
    .post(
      process.env.VUE_APP_API + "/action/application/action/event/user/brows",
      {
        actionType: 24,
        actionId: 20220805,
        cardId: store.state.userAccount.cardId,
      }
    )
    .then((res) => {
      console.log("埋点成功：", res);
    });
};

const deleteNum = ref(0);
// 清数据接口
const deleteData = (type) => {
  deleteNum.value++;
  if (deleteNum.value == 3) {
    let type = 0;
    service
      .post(
        process.env.VUE_APP_API +
          "/cms-activity/cms88/redpacket/delete/" +
          type,
        {}
      )
      .then((res) => {
        console.log("数据已清空", res);
        deleteNum.value = 0;
      });
  }
};
</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;
  background: #ffd195;

  .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;
    }

    .LuckyWheel_zz {
      @include pos(750px, 496px, 0px, 657px);
      @include bg_pos("../assets/img/zz.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;

      .no_prize_text {
        @include pos(221px, 59px, 55px, 55px);
        @include bg_pos("../assets/img/no_prize_text.png");
        pointer-events: none;
      }

      .prize_text {
        @include pos(172px, 23px, 80px, 37px);
        @include bg_pos("../assets/img/prize_text.png");
        pointer-events: none;
      }

      .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");
    }

    .is_draw {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    .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: 132px;
      margin-top: 0px;
      @include bg_pos("../assets/img/cloud_bottom.png");
    }
  }
}

.serviceLuckyPop {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.7);
  visibility: hidden;

  .serviceLuckyPop_container {
    width: 750px;
    height: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .serviceLuckyPop_box {
      @include box(530px, 594px);
      @include bg_pos("../assets/img/pop/service_pop_1.png");
      position: relative;

      .money {
        @include pos(90px, 45px, 198px, 150px);

        text-align: center;
        line-height: 45px;
        color: #ca2f0a;
        font-weight: 700;
      }

      .get_luckybag {
        @include pos(274px, 92px, 139px, 389px);
        @include bg_pos("../assets/img/pop/get_luckyBag_btn.png");
      }
    }

    .cls_btn {
      @include box(72px, 72px);
      @include bg_pos("../assets/img/pop/cls_btn.png");
      margin-top: 50px;
    }
  }

  .serviceLuckyPop_get_box {
    @include box(530px, 594px);
    @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
    position: relative;
    .go_index_btn {
      @include pos(394px, 92px, 79px, 389px);
      @include bg_pos("../assets/img/pop/to_index_btn.png");
    }
  }
}
</style>