1065 lines
26 KiB
Vue
1065 lines
26 KiB
Vue
<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> |