修改活动规则及海报兼容样式
This commit is contained in:
Andy Leong
parent
687cec78bb
commit
f5ff9e469d
Binary file not shown.
@ -13,10 +13,10 @@ const emit = defineEmits(["ResultPage"]);
|
|||||||
const userStore = useMainStore();
|
const userStore = useMainStore();
|
||||||
let bgId = ref(1); //海报背景id：1～4
|
let bgId = ref(1); //海报背景id：1～4
|
||||||
const bgPic = computed(() => {
|
const bgPic = computed(() => {
|
||||||
return new URL(
|
return new URL(
|
||||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
`../assets/images/result/bg-${bgId.value}.jpg`,
|
||||||
import.meta.url
|
import.meta.url
|
||||||
).href;
|
).href;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 主题配色
|
// 主题配色
|
||||||
@ -24,521 +24,521 @@ const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]);
|
|||||||
const mbti = ref(userStore.MBTI);
|
const mbti = ref(userStore.MBTI);
|
||||||
const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value));
|
const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value));
|
||||||
const posterBg = reactive([
|
const posterBg = reactive([
|
||||||
new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href,
|
new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href,
|
||||||
new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href,
|
new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href,
|
||||||
new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href,
|
new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href,
|
||||||
new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href,
|
new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// console.log("mbtiList", mbtiList.length);
|
// console.log("mbtiList", mbtiList.length);
|
||||||
|
|
||||||
const changBg = (event, number) => {
|
const changBg = (event, number) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
if (number == bgId.value) return;
|
if (number == bgId.value) return;
|
||||||
bgId.value = number;
|
bgId.value = number;
|
||||||
debounceTap(
|
debounceTap(
|
||||||
e,
|
e,
|
||||||
() => {
|
() => {
|
||||||
// console.log("bgId", bgId.value);
|
// console.log("bgId", bgId.value);
|
||||||
},
|
},
|
||||||
0.3
|
0.3
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// With async/await
|
// With async/await
|
||||||
const eqcodePic = ref();
|
const eqcodePic = ref();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let eqCodeUrl = import.meta.env.VITE_URL;
|
let eqCodeUrl = import.meta.env.VITE_URL;
|
||||||
console.log("url:", eqCodeUrl);
|
console.log("url:", eqCodeUrl);
|
||||||
QRCode.toDataURL(eqCodeUrl)
|
QRCode.toDataURL(eqCodeUrl)
|
||||||
.then((url) => {
|
.then((url) => {
|
||||||
eqcodePic.value = url;
|
eqcodePic.value = url;
|
||||||
// console.log("eq", eqcodePic.value);
|
// console.log("eq", eqcodePic.value);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
});
|
});
|
||||||
|
|
||||||
gsap.from(".result-bg", {
|
gsap.from(".result-bg", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
scale: 1.2,
|
scale: 1.2,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
});
|
});
|
||||||
gsap.from(".mbti-title", {
|
gsap.from(".mbti-title", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
x: 100,
|
x: 100,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
delay: 0.3,
|
delay: 0.3,
|
||||||
});
|
});
|
||||||
gsap.from(".des", {
|
gsap.from(".des", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
x: 100,
|
x: 100,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
stagger: 0.3,
|
stagger: 0.3,
|
||||||
delay: 0.5,
|
delay: 0.5,
|
||||||
});
|
});
|
||||||
gsap.from(".blessings", {
|
gsap.from(".blessings", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
x: 100,
|
x: 100,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
stagger: 0.2,
|
stagger: 0.2,
|
||||||
delay: 0.6,
|
delay: 0.6,
|
||||||
});
|
});
|
||||||
gsap.from(".product", {
|
gsap.from(".product", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
x: 100,
|
x: 100,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
delay: 0.9,
|
delay: 0.9,
|
||||||
});
|
});
|
||||||
gsap.from(".produc-img", {
|
gsap.from(".produc-img", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
x: 100,
|
x: 100,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
delay: 1.2,
|
delay: 1.2,
|
||||||
});
|
});
|
||||||
gsap.from(".theme-tab", {
|
gsap.from(".theme-tab", {
|
||||||
duration: 0.7,
|
duration: 0.7,
|
||||||
x: 100,
|
x: 100,
|
||||||
autoAlpha: 0,
|
autoAlpha: 0,
|
||||||
stagger: 0.3,
|
stagger: 0.3,
|
||||||
delay: 1.4,
|
delay: 1.4,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const createPoster = (event) => {
|
const createPoster = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
// 海报生成
|
// 海报生成
|
||||||
posterCreate(
|
posterCreate(
|
||||||
{ width: 750, height: 1500 }, //海报尺寸
|
{ width: 750, height: 1500 }, //海报尺寸
|
||||||
// 海报素材，按顺序依次渲染
|
// 海报素材，按顺序依次渲染
|
||||||
[
|
[
|
||||||
// 背景
|
// 背景
|
||||||
{
|
{
|
||||||
name: "bg",
|
name: "bg",
|
||||||
src: posterBg[bgId.value - 1],
|
src: posterBg[bgId.value - 1],
|
||||||
pos: { w: 750, h: 1500, x: 0, y: 0 },
|
pos: { w: 750, h: 1500, x: 0, y: 0 },
|
||||||
},
|
},
|
||||||
// 产品
|
// 产品
|
||||||
{
|
{
|
||||||
name: "product",
|
name: "product",
|
||||||
src: mbtiObj.value.productPic,
|
src: mbtiObj.value.productPic,
|
||||||
pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: mbtiObj.value.type =='INFP'? 900 : 921 },
|
pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: mbtiObj.value.type == 'INFP' ? 900 : 921 },
|
||||||
},
|
},
|
||||||
// 二维码
|
// 二维码
|
||||||
{
|
{
|
||||||
name: "eqcode",
|
name: "eqcode",
|
||||||
src: eqcodePic.value,
|
src: eqcodePic.value,
|
||||||
pos: { w: 140, h: 140, x: bgId.value == 3 ? 75 : 66, y: 1070 },
|
pos: { w: 140, h: 140, x: bgId.value == 3 ? 75 : 66, y: 1070 },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 字体素材
|
// 字体素材
|
||||||
[
|
[
|
||||||
// mbti title及职业
|
// mbti title及职业
|
||||||
{
|
{
|
||||||
content: mbtiObj.value.type + " " + mbtiObj.value.job,
|
content: mbtiObj.value.type + " " + mbtiObj.value.job,
|
||||||
style: {
|
style: {
|
||||||
font: "normal 80px HYYakuHei",
|
font: "normal 80px HYYakuHei",
|
||||||
pos: { x: 70, y: 340 },
|
pos: { x: 70, y: 340 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// mbti 描述
|
// mbti 描述
|
||||||
{
|
{
|
||||||
content: mbtiObj.value.des[0],
|
content: mbtiObj.value.des[0],
|
||||||
style: {
|
style: {
|
||||||
font: "normal 30px fzzy",
|
font: "normal 30px fzzy",
|
||||||
color: "#af6f49",
|
color: "#af6f49",
|
||||||
pos: { x: 70, y: 470 },
|
pos: { x: 70, y: 470 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: mbtiObj.value.des[1],
|
content: mbtiObj.value.des[1],
|
||||||
style: {
|
style: {
|
||||||
font: "normal 30px fzzy",
|
font: "normal 30px fzzy",
|
||||||
color: "#af6f49",
|
color: "#af6f49",
|
||||||
pos: { x: 70, y: 520 },
|
pos: { x: 70, y: 520 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 新年寄语
|
// 新年寄语
|
||||||
{
|
{
|
||||||
content: mbtiObj.value.blessings[0],
|
content: mbtiObj.value.blessings[0],
|
||||||
style: {
|
style: {
|
||||||
font: "normal 50px fzcy",
|
font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy",
|
||||||
pos: { x: 70, y: 650 },
|
pos: { x: 70, y: 650 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
content: mbtiObj.value.blessings[1],
|
content: mbtiObj.value.blessings[1],
|
||||||
style: {
|
style: {
|
||||||
font: "normal 50px fzcy",
|
font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy",
|
||||||
pos: { x: 70, y: 725 },
|
pos: { x: 70, y: 725 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 产品
|
// 产品
|
||||||
{
|
{
|
||||||
content: mbtiObj.value.product,
|
content: mbtiObj.value.product,
|
||||||
style: {
|
style: {
|
||||||
font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy",
|
font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy",
|
||||||
pos: { x: 70, y: 876 },
|
pos: { x: 70, y: 876 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 主题配色
|
// 主题配色
|
||||||
theme[bgId.value - 1]
|
theme[bgId.value - 1]
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const goDraw = (event) => {
|
const goDraw = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
if (userStore.hasDraw) {
|
if (userStore.hasDraw) {
|
||||||
emit("ResultPage", { action: "showDraw" });
|
emit("ResultPage", { action: "showDraw" });
|
||||||
} else {
|
} else {
|
||||||
Toast("今日暂无抽奖机会");
|
Toast("今日暂无抽奖机会");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const hidePop = (event) => {
|
const hidePop = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
|
gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const goShare = (event) => {
|
const goShare = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const hideShare = () => {
|
const hideShare = () => {
|
||||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="ResultPage" @touchmove.prevent>
|
<div class="ResultPage" @touchmove.prevent>
|
||||||
<div class="result-bg">
|
<div class="result-bg">
|
||||||
<img :src="bgPic" alt="" srcset="" />
|
<img :src="bgPic" alt="" srcset="" />
|
||||||
</div>
|
|
||||||
<div class="result-container">
|
|
||||||
<div :class="'page-theme-' + bgId">
|
|
||||||
<div class="mbti-title">
|
|
||||||
<span>{{ mbtiObj.type }} {{ mbtiObj.job }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mbti-des-box">
|
<div class="result-container">
|
||||||
<div class="des" v-for="item in mbtiObj.des">{{ item }}</div>
|
<div :class="'page-theme-' + bgId">
|
||||||
|
<div class="mbti-title">
|
||||||
|
<span>{{ mbtiObj.type }} {{ mbtiObj.job }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="mbti-des-box">
|
||||||
|
<div class="des" v-for="item in mbtiObj.des">{{ item }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="mbti-blessings-box">
|
||||||
|
<div class="blessings" v-for="item in mbtiObj.blessings"
|
||||||
|
:class="mbtiObj.type == 'ISFJ' && 'isfj-blessings'">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mbti-product">
|
||||||
|
<div class="product" :class="mbtiObj.type == 'ISTJ' || mbtiObj.type == 'INTJ' ? 'adptFont' : ''">{{
|
||||||
|
mbtiObj.product }}</div>
|
||||||
|
<div class="produc-img" :style="{
|
||||||
|
width: mbtiObj.picPos.w + 'px',
|
||||||
|
height: mbtiObj.picPos.h + 'px',
|
||||||
|
marginTop: mbtiObj.type == 'INFP' && '0px'
|
||||||
|
}">
|
||||||
|
<img :src="mbtiObj.productPic" alt="" srcset="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="theme-tab">
|
||||||
|
<div class="theme-select-tips"></div>
|
||||||
|
<div class="theme-list">
|
||||||
|
<div class="theme-li-border" :class="{ active: bgId == item }" v-for="item in 4"
|
||||||
|
@click="changBg($event, item)">
|
||||||
|
<div class="theme-li" :class="'theme-li-' + item"></div>
|
||||||
|
<div class="selected" v-show="bgId == item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="create-btn" @click="createPoster($event)"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mbti-blessings-box">
|
</div>
|
||||||
<div class="blessings" v-for="item in mbtiObj.blessings">
|
<!-- 海报弹窗 -->
|
||||||
{{ item }}
|
<div class="posterPop" @touchmove.prevent>
|
||||||
</div>
|
<div class="cls-btn-box">
|
||||||
|
<div class="cls-btn" @click="hidePop($event)"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mbti-product">
|
<div class="poster-box">
|
||||||
<div class="product"
|
<img id="poster" />
|
||||||
:class="mbtiObj.type == 'ISTJ' || mbtiObj.type == 'INTJ' ? 'adptFont' : ''"
|
|
||||||
>{{ mbtiObj.product }}</div>
|
|
||||||
<div class="produc-img"
|
|
||||||
:style="{
|
|
||||||
width:mbtiObj.picPos.w+'px',
|
|
||||||
height:mbtiObj.picPos.h+'px',
|
|
||||||
marginTop: mbtiObj.type =='INFP' && '0px'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<img :src="mbtiObj.productPic" alt="" srcset="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="save-tips">*长按保存海报</div>
|
||||||
<div class="theme-tab">
|
<div class="btn-box">
|
||||||
<div class="theme-select-tips"></div>
|
<div class="go-draw" @click="goDraw($event)"></div>
|
||||||
<div class="theme-list">
|
<div class="go-share" @click="goShare($event)"></div>
|
||||||
<div
|
|
||||||
class="theme-li-border"
|
|
||||||
:class="{ active: bgId == item }"
|
|
||||||
v-for="item in 4"
|
|
||||||
@click="changBg($event, item)"
|
|
||||||
>
|
|
||||||
<div class="theme-li" :class="'theme-li-' + item"></div>
|
|
||||||
<div class="selected" v-show="bgId == item"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="create-btn" @click="createPoster($event)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- 分享提示 -->
|
||||||
<!-- 海报弹窗 -->
|
<div class="sharePop" @click="hideShare">
|
||||||
<div class="posterPop" @touchmove.prevent>
|
<div class="tips-pic"></div>
|
||||||
<div class="cls-btn-box">
|
<div class="tips-text">点击右上角分享给你的好友！</div>
|
||||||
<div class="cls-btn" @click="hidePop($event)"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="poster-box">
|
|
||||||
<img id="poster" />
|
|
||||||
</div>
|
|
||||||
<div class="save-tips">*长按保存海报</div>
|
|
||||||
<div class="btn-box">
|
|
||||||
<div class="go-draw" @click="goDraw($event)"></div>
|
|
||||||
<div class="go-share" @click="goShare($event)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 分享提示 -->
|
|
||||||
<div class="sharePop" @click="hideShare">
|
|
||||||
<div class="tips-pic"></div>
|
|
||||||
<div class="tips-text">点击右上角分享给你的好友！</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.ResultPage {
|
.ResultPage {
|
||||||
@include fixed();
|
@include fixed();
|
||||||
background-color: azure;
|
background-color: azure;
|
||||||
|
|
||||||
.result-bg {
|
|
||||||
@include pos(750px, 1624px, 0px, 50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
img {
|
|
||||||
@include box(100%, 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-container {
|
|
||||||
@include pos(750px, 1624px, 0px, 50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
.page-theme-1 {
|
|
||||||
color: #d3473a;
|
|
||||||
animation: color 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-theme-2 {
|
|
||||||
color: #fb7700;
|
|
||||||
animation: color 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-theme-3 {
|
|
||||||
color: #4172d8;
|
|
||||||
animation: color 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-theme-4 {
|
|
||||||
color: #eb5c37;
|
|
||||||
animation: color 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-title {
|
|
||||||
@include pos(600px, 120px, 90px, 418px);
|
|
||||||
font-size: 80px;
|
|
||||||
font-family: "HYYaKuHei";
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
|
|
||||||
text-stroke: 1px #ffffff;
|
|
||||||
-webkit-text-stroke: 1px #ffffff;
|
|
||||||
// -webkit-transform: matrix(2.63538838101382, -0.15627262233171, 0.15650043026188, 2.63155221026798, 0, 0);
|
|
||||||
font-weight: bolder;
|
|
||||||
transform: rotate(-4deg);
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
span {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-des-box {
|
|
||||||
@include pos(557px, 90px, 110px, 547px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
font-family: "fzzy";
|
|
||||||
|
|
||||||
.des {
|
|
||||||
color: #af6f49;
|
|
||||||
font-size: 30px;
|
|
||||||
transform: rotate(-4deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-blessings-box {
|
|
||||||
@include pos(500px, 140px, 130px, 720px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-family: "fzcy";
|
|
||||||
|
|
||||||
.blessings {
|
|
||||||
font-size: 50px;
|
|
||||||
transform: rotate(-4deg);
|
|
||||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-product {
|
|
||||||
@include pos(630px, 140px, 134px, 948px);
|
|
||||||
font-family: "fzcy";
|
|
||||||
|
|
||||||
.product {
|
|
||||||
font-size: 45px;
|
|
||||||
transform: rotate(-4deg);
|
|
||||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
|
||||||
}
|
|
||||||
|
|
||||||
.adptFont{
|
|
||||||
font-style: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.produc-img {
|
|
||||||
// @include box(469px, 102px);
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 15px;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
|
|
||||||
|
.result-bg {
|
||||||
|
@include pos(750px, 1624px, 0px, 50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
// width: 100%;
|
@include box(100%, 100%);
|
||||||
height: 100%;
|
|
||||||
@include box(50%,50%);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-tab {
|
.result-container {
|
||||||
@include pos(487px, 240px, 161px, 1108px);
|
@include pos(750px, 1624px, 0px, 50%);
|
||||||
transform: rotate(-3deg);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.theme-select-tips {
|
.page-theme-1 {
|
||||||
@include pos(250px, 21px, 118.5px, 0px);
|
color: #d3473a;
|
||||||
@include bg_pos("result/select-tips.png");
|
animation: color 1s;
|
||||||
}
|
|
||||||
|
|
||||||
.theme-list {
|
|
||||||
@include pos(483px, 116px, 2.5px, 36px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.theme-li-border {
|
|
||||||
// @include box(97px, 98px);
|
|
||||||
|
|
||||||
.theme-li {
|
|
||||||
@include box(97px, 98px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.page-theme-2 {
|
||||||
@include box(115px, 116px);
|
color: #fb7700;
|
||||||
|
animation: color 1s;
|
||||||
position: relative;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 8px;
|
|
||||||
border-color: rgb(255, 70, 76);
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-li-1 {
|
.page-theme-3 {
|
||||||
@include bg_pos("result/theme-1.png");
|
color: #4172d8;
|
||||||
|
animation: color 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-li-2 {
|
.page-theme-4 {
|
||||||
@include bg_pos("result/theme-2.png");
|
color: #eb5c37;
|
||||||
|
animation: color 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-li-3 {
|
.mbti-title {
|
||||||
@include bg_pos("result/theme-3.png");
|
@include pos(600px, 120px, 90px, 418px);
|
||||||
|
font-size: 80px;
|
||||||
|
font-family: "HYYaKuHei";
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
|
||||||
|
text-stroke: 1px #ffffff;
|
||||||
|
-webkit-text-stroke: 1px #ffffff;
|
||||||
|
// -webkit-transform: matrix(2.63538838101382, -0.15627262233171, 0.15650043026188, 2.63155221026798, 0, 0);
|
||||||
|
font-weight: bolder;
|
||||||
|
transform: rotate(-4deg);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
span {}
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-li-4 {
|
.mbti-des-box {
|
||||||
@include bg_pos("result/theme-4.png");
|
@include pos(557px, 90px, 110px, 547px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-family: "fzzy";
|
||||||
|
|
||||||
|
.des {
|
||||||
|
color: #af6f49;
|
||||||
|
font-size: 30px;
|
||||||
|
transform: rotate(-4deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.mbti-blessings-box {
|
||||||
@include bg_pos("result/select-arrow.png");
|
@include pos(500px, 160px, 130px, 715px);
|
||||||
@include pos(15px, 8px, 45px, 110px);
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
}
|
justify-content: space-around;
|
||||||
|
font-family: "fzcy";
|
||||||
|
|
||||||
.create-btn {
|
.blessings {
|
||||||
@include pos(258px, 69px, 126px, 165px);
|
font-size: 50px;
|
||||||
@include bg_pos("result/create-btn.png");
|
transform: rotate(-4deg);
|
||||||
}
|
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||||
|
}
|
||||||
|
|
||||||
|
.isfj-blessings {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbti-product {
|
||||||
|
@include pos(630px, 140px, 134px, 948px);
|
||||||
|
font-family: "fzcy";
|
||||||
|
|
||||||
|
.product {
|
||||||
|
font-size: 45px;
|
||||||
|
transform: rotate(-4deg);
|
||||||
|
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||||
|
}
|
||||||
|
|
||||||
|
.adptFont {
|
||||||
|
font-style: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.produc-img {
|
||||||
|
// @include box(469px, 102px);
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
// width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include box(50%, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-tab {
|
||||||
|
@include pos(487px, 240px, 161px, 1108px);
|
||||||
|
transform: rotate(-3deg);
|
||||||
|
|
||||||
|
.theme-select-tips {
|
||||||
|
@include pos(250px, 21px, 118.5px, 0px);
|
||||||
|
@include bg_pos("result/select-tips.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-list {
|
||||||
|
@include pos(483px, 116px, 2.5px, 36px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.theme-li-border {
|
||||||
|
// @include box(97px, 98px);
|
||||||
|
|
||||||
|
.theme-li {
|
||||||
|
@include box(97px, 98px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
@include box(115px, 116px);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 8px;
|
||||||
|
border-color: rgb(255, 70, 76);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-li-1 {
|
||||||
|
@include bg_pos("result/theme-1.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-li-2 {
|
||||||
|
@include bg_pos("result/theme-2.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-li-3 {
|
||||||
|
@include bg_pos("result/theme-3.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-li-4 {
|
||||||
|
@include bg_pos("result/theme-4.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
@include bg_pos("result/select-arrow.png");
|
||||||
|
@include pos(15px, 8px, 45px, 110px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-btn {
|
||||||
|
@include pos(258px, 69px, 126px, 165px);
|
||||||
|
@include bg_pos("result/create-btn.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterPop {
|
.posterPop {
|
||||||
@include fixed();
|
@include fixed();
|
||||||
@include flexCen();
|
@include flexCen();
|
||||||
background-color: rgba($color: #000000, $alpha: 0.54);
|
background-color: rgba($color: #000000, $alpha: 0.54);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
.cls-btn-box {
|
.cls-btn-box {
|
||||||
width: 495px;
|
width: 495px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
.cls-btn {
|
|
||||||
@include box(41px, 41px);
|
|
||||||
@include bg_pos("result/cls-btn.png");
|
|
||||||
margin-right: -20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-tips {
|
.cls-btn {
|
||||||
font-size: 20px;
|
@include box(41px, 41px);
|
||||||
font-family: "fzcy";
|
@include bg_pos("result/cls-btn.png");
|
||||||
line-height: 20px;
|
margin-right: -20px;
|
||||||
margin-top: 20px;
|
}
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-box {
|
|
||||||
@include box(495px, 990px);
|
|
||||||
margin-top: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 2px solid #dbbb90;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
#poster {
|
|
||||||
@include box(100%, 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
@include box(489px, 76px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.go-draw {
|
|
||||||
@include box(226px, 76px);
|
|
||||||
@include bg_pos("result/go-draw-btn.png");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.go-share {
|
.save-tips {
|
||||||
@include box(226px, 76px);
|
font-size: 20px;
|
||||||
@include bg_pos("result/go-share-btn.png");
|
font-family: "fzcy";
|
||||||
|
line-height: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-box {
|
||||||
|
@include box(495px, 990px);
|
||||||
|
margin-top: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid #dbbb90;
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
#poster {
|
||||||
|
@include box(100%, 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
@include box(489px, 76px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.go-draw {
|
||||||
|
@include box(226px, 76px);
|
||||||
|
@include bg_pos("result/go-draw-btn.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.go-share {
|
||||||
|
@include box(226px, 76px);
|
||||||
|
@include bg_pos("result/go-share-btn.png");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sharePop {
|
.sharePop {
|
||||||
@include fixed();
|
@include fixed();
|
||||||
background-color: rgba($color: #000000, $alpha: 0.54);
|
background-color: rgba($color: #000000, $alpha: 0.54);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
.tips-pic {
|
|
||||||
@include pos(100px, 100px, 600px, 100px);
|
|
||||||
@include bg_pos("result/share-tips.svg");
|
|
||||||
stroke: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-text {
|
.tips-pic {
|
||||||
font-family: "fzcy";
|
@include pos(100px, 100px, 600px, 100px);
|
||||||
font-size: 25px;
|
@include bg_pos("result/share-tips.svg");
|
||||||
@include pos(750px, 100px, 0px, 220px);
|
stroke: #ffffff;
|
||||||
color: #ffffff;
|
}
|
||||||
text-align: right;
|
|
||||||
}
|
.tips-text {
|
||||||
|
font-family: "fzcy";
|
||||||
|
font-size: 25px;
|
||||||
|
@include pos(750px, 100px, 0px, 220px);
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -6,130 +6,126 @@ import gsap from "gsap";
|
|||||||
const emit = defineEmits(["RulePage"]);
|
const emit = defineEmits(["RulePage"]);
|
||||||
|
|
||||||
const hide = (event) => {
|
const hide = (event) => {
|
||||||
debounceTap(event.target, () => {
|
debounceTap(event.target, () => {
|
||||||
emit("RulePage", { action: "hide" });
|
emit("RulePage", { action: "hide" });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
|
gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
|
||||||
gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
|
gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="RulePage">
|
<div class="RulePage">
|
||||||
<div class="rule-container">
|
<div class="rule-container">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="rule-content">
|
<div class="rule-content">
|
||||||
<div class="rule-text-area">
|
<div class="rule-text-area">
|
||||||
<div class="part">
|
<div class="part">
|
||||||
<div>【活动时间】：2024年2月5日——2月8日</div>
|
<div>【活动时间】：2024年2月5日——2月9日</div>
|
||||||
<div>【活动奖励】：0.5-8.88元微信红包</div>
|
<div>【活动奖励】：0.5-8.88元微信红包</div>
|
||||||
|
</div>
|
||||||
|
<div class="part">
|
||||||
|
<div>【活动攻略】：</div>
|
||||||
|
<div>
|
||||||
|
1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
|
||||||
|
</div>
|
||||||
|
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
|
||||||
|
</div>
|
||||||
|
<div class="part">
|
||||||
|
<div>【领奖说明】：</div>
|
||||||
|
<div>
|
||||||
|
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
|
||||||
|
</div>
|
||||||
|
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
|
||||||
|
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
|
||||||
|
<div class="part">其他：</div>
|
||||||
|
<div>
|
||||||
|
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
|
||||||
|
</div>
|
||||||
|
<div class="part">说明：</div>
|
||||||
|
<div>本活动最终解释权归平安理财所有</div>
|
||||||
|
<div class="part">【活动攻略】：</div>
|
||||||
|
<div>
|
||||||
|
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(1)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(2)同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-cls-btn" @click="hide($event)"></div>
|
||||||
|
<div class="rule-arrow"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="part">
|
<div class="rule-caidai"></div>
|
||||||
<div>【活动攻略】：</div>
|
|
||||||
<div>
|
|
||||||
1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
|
|
||||||
</div>
|
|
||||||
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
|
|
||||||
</div>
|
|
||||||
<div class="part">
|
|
||||||
<div>【领奖说明】：</div>
|
|
||||||
<div>
|
|
||||||
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码。
|
|
||||||
</div>
|
|
||||||
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
|
|
||||||
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
|
|
||||||
<div>其他：</div>
|
|
||||||
<div>
|
|
||||||
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
|
|
||||||
</div>
|
|
||||||
<div>说明：</div>
|
|
||||||
<div>
|
|
||||||
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(1)
|
|
||||||
以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(2)
|
|
||||||
同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等)
|
|
||||||
单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(3)
|
|
||||||
有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="part">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rule-cls-btn" @click="hide($event)"></div>
|
|
||||||
<div class="rule-arrow"></div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-caidai"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.RulePage {
|
.RulePage {
|
||||||
@include fixed();
|
@include fixed();
|
||||||
@include flexCen();
|
@include flexCen();
|
||||||
background-color: rgba($color: #000000, $alpha: 0.7);
|
background-color: rgba($color: #000000, $alpha: 0.7);
|
||||||
|
|
||||||
.rule-container {
|
.rule-container {
|
||||||
position: relative;
|
|
||||||
@include box(492px, 712px);
|
|
||||||
|
|
||||||
.content {
|
|
||||||
.rule-content {
|
|
||||||
@include box(490px, 709px);
|
|
||||||
@include bg_pos("rule/rule-box.png");
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@include box(492px, 712px);
|
||||||
|
|
||||||
.rule-text-area {
|
.content {
|
||||||
@include pos(405px, 523px, 41px, 101px);
|
.rule-content {
|
||||||
// background-color: #000000;
|
@include box(490px, 709px);
|
||||||
overflow: hidden;
|
@include bg_pos("rule/rule-box.png");
|
||||||
overflow-y: scroll;
|
position: relative;
|
||||||
|
|
||||||
.part {
|
.rule-text-area {
|
||||||
font-family: "fzcy";
|
@include pos(405px, 523px, 41px, 101px);
|
||||||
color: #ac4d31;
|
// background-color: #000000;
|
||||||
font-size: 20px;
|
overflow: hidden;
|
||||||
line-height: 30px;
|
overflow-y: scroll;
|
||||||
margin-top: 30px;
|
|
||||||
text-align: justify;
|
.part {
|
||||||
padding: 0 10px;
|
font-family: "fzcy";
|
||||||
}
|
color: #ac4d31;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-arrow {
|
||||||
|
@include pos(38px, 23px, 224px, 641px);
|
||||||
|
@include bg_pos("rule/arrow.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-cls-btn {
|
||||||
|
@include pos(48px, 48px, 441px, -76px);
|
||||||
|
@include bg_pos("rule/cls-btn.png");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.rule-arrow {
|
.rule-caidai {
|
||||||
@include pos(38px, 23px, 224px, 641px);
|
@include pos(135px, 185px, 357px, 557px);
|
||||||
@include bg_pos("rule/arrow.png");
|
@include bg_pos("rule/caidai.png");
|
||||||
}
|
pointer-events: none;
|
||||||
|
}
|
||||||
.rule-cls-btn {
|
|
||||||
@include pos(48px, 48px, 441px, -76px);
|
|
||||||
@include bg_pos("rule/cls-btn.png");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-caidai {
|
|
||||||
@include pos(135px, 185px, 357px, 557px);
|
|
||||||
@include bg_pos("rule/caidai.png");
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", {
|
|||||||
return {
|
return {
|
||||||
hasDraw: true, //是否有抽奖机会
|
hasDraw: true, //是否有抽奖机会
|
||||||
token: '',
|
token: '',
|
||||||
MBTI: 'ISTJ', //测试结果
|
MBTI: 'ESFJ', //测试结果
|
||||||
hasPrize: false, //是否有奖品
|
hasPrize: false, //是否有奖品
|
||||||
prizeCode: 'oggSVMbeLgSK', //兑换码
|
prizeCode: 'oggSVMbeLgSK', //兑换码
|
||||||
prizeMoney: '8.88', //金额
|
prizeMoney: '8.88', //金额
|
||||||
@ -31,7 +31,7 @@ export const useMainStore = defineStore("counter", {
|
|||||||
this.MBTI = type
|
this.MBTI = type
|
||||||
},
|
},
|
||||||
updateDrawKey(data) {
|
updateDrawKey(data) {
|
||||||
console.log('保存结果:',data);
|
console.log('保存结果:', data);
|
||||||
this.drawKey = data.subKey
|
this.drawKey = data.subKey
|
||||||
this.hasDraw = data.drawFlag
|
this.hasDraw = data.drawFlag
|
||||||
},
|
},
|
||||||
|
|||||||
44
字体压缩.txt
44
字体压缩.txt
@ -44,7 +44,49 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
点击右上角分享给你的好友！*长按保存海报
|
点击右上角分享给你的好友！*长按保存海报
|
||||||
|
<div class="part">
|
||||||
|
<div>【活动时间】：2024年2月5日——2月9日</div>
|
||||||
|
<div>【活动奖励】：0.5-8.88元微信红包</div>
|
||||||
|
</div>
|
||||||
|
<div class="part">
|
||||||
|
<div>【活动攻略】：</div>
|
||||||
|
<div>
|
||||||
|
1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
|
||||||
|
</div>
|
||||||
|
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
|
||||||
|
</div>
|
||||||
|
<div class="part">
|
||||||
|
<div>【领奖说明】：</div>
|
||||||
|
<div>
|
||||||
|
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
|
||||||
|
</div>
|
||||||
|
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
|
||||||
|
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
|
||||||
|
<div>其他：</div>
|
||||||
|
<div>
|
||||||
|
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
|
||||||
|
</div>
|
||||||
|
<div>说明：</div>
|
||||||
|
<div>本活动最终解释权归平安理财所有</div>
|
||||||
|
<div>【活动攻略】：</div>
|
||||||
|
<div>
|
||||||
|
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(1)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(2)同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
|
||||||
|
</div>
|
||||||
|
|
||||||
2、AlimamaShuHeiTi
|
2、AlimamaShuHeiTi
|
||||||
id: 1,
|
id: 1,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user