liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成所有切图

Browse Source
This commit is contained in:
梁泽军
2025-05-21 10:42:37 +08:00
parent 749a61f00b
commit e340bc89c6
48 changed files with 66 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Draw.vue
View File

@@ -156,7 +156,7 @@ onMounted(() => {
<span class="code">{{ code }}</span>
<span class="copy-btn" @click="copyFn($event)"></span>
</div>
<div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
<div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品</div>
<div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
<div class="cls-btn" @click="hide($event)"></div>
</div>

3
src/components/Index.vue
View File

@@ -38,7 +38,6 @@ onMounted(() => {
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
gsap.from(".index-time", { duration: 1, x: 40, autoAlpha: 0, delay: 1 });
gsap.from(".index-text", { duration: 1, scale: 2, autoAlpha: 0, delay: 1 });
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0, delay: 1.3 });
gsap.from(".index-prize-btn", {
@@ -124,7 +123,7 @@ const showVC = () => {
.index-title {
// pointer-events: none;
@include pos(593px, 155px, 85px, 387px);
@include pos(593px, 156px, 85px, 387px);
@include bg_pos("index/title.png");
}

21
src/components/MyPrize.vue
View File

@@ -2,27 +2,26 @@
import { debounceTap } from "@/plugins";
import gsap from "gsap";
import { Toast } from "vant";
import useClipboard from 'vue-clipboard3'
import useClipboard from "vue-clipboard3";
import { useMainStore } from "@/store";
import { onMounted } from "vue";
// 页面配置初始化
const emit = defineEmits(["MyPrizePage"]);
const userStore = useMainStore();
const { toClipboard } = useClipboard()
const { toClipboard } = useClipboard();
const money = ref(userStore.prizeMoney);
const code = ref(userStore.prizeCode);
const copyFn = (event) => {
let e = event.target;
toClipboard(code.value)
toClipboard(code.value);
debounceTap(e, () => {
Toast(`复制成功：${code.value}`);
});
};
const hide = (event) => {
let e = event.target;
debounceTap(e, () => {
@@ -57,8 +56,12 @@ onMounted(() => {
<div class="code">{{ code }}</div>
<div class="myPrize-copy-btn" @click="copyFn($event)"></div>
</div>
<div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
<div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
<div class="exchange-tips">
兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品
</div>
<div class="exchnage-tips2">
（兑换码可在主页面“我的奖品” 再次查看并复制）
</div>
<div class="myPrize-cls-btn" @click="hide($event)"></div>
</div>
</div>
@@ -93,7 +96,6 @@ onMounted(() => {
letter-spacing: 0;
// background-color: aqua;
@include flexCen();
}
.myPrize-money {
@@ -117,13 +119,11 @@ onMounted(() => {
font-weight: 700;
color: #fff6cc;
span {
// height: 77px;
line-height: 65px;
}
.code {
font-size: 25px;
font-weight: 700;
@@ -162,11 +162,10 @@ onMounted(() => {
// background-color: aqua;
}
.myPrize-cls-btn {
@include pos(82px, 82px, 517px, 114px);
@include bg_pos("prize/cls-btn.png");
}
}
}
</style>
</style>

3
src/components/Question.vue
View File

@@ -122,7 +122,7 @@ const getClass = (item) => {
<div class="question-serial">
<div>
<div class="serial-icon"></div>
<div class="serial-text">第{{ currentId + 1 }}题</div>
<div class="serial-text">{{ ['题目一','题目二','题目三','题目四'][currentId] }}</div>
</div>
<div class="serial-num">{{ currentId+1 }}/{{ questionList.length }}</div>
</div>
@@ -235,6 +235,7 @@ const getClass = (item) => {
color: transparent;
-webkit-text-stroke: 3px #ffffff; /* 控制描边粗细和颜色 */
text-stroke: 3px #ffffff;
opacity: 0.5;
}
}

13
src/components/Result.vue
View File

@@ -56,9 +56,9 @@ const showPoster = () => {
duration: 0.3,
autoAlpha: 1,
});
gsap.from(".cls-btn-box", {
gsap.from(".poster-title", {
duration: 0.7,
scale: 1.2,
scale: 0.3,
autoAlpha: 0,
});
gsap.from(".poster-box", {
@@ -216,6 +216,7 @@ const posterCreate = (option, imageArr) => {
<div class="posterPop" @touchmove.prevent>
<div class="poster-bg"></div>
<div class="poster-container">
<div class="poster-title"></div>
<div class="poster-box">
<div class="poster">
<img id="posterSrc" src="" alt="" srcset="" />
@@ -251,14 +252,12 @@ const posterCreate = (option, imageArr) => {
.poster-container {
@include pos(750px, 1624px, 0px, 0px);
// transform: translateY(-50%);
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.3);
.cls-btn-box {
width: 617px;
display: flex;
justify-content: flex-end;
.poster-title {
@include box(592px, 156px);
@include bg_pos("index/title.png");
}
.save-tips {

14
src/components/Rule.vue
View File

@@ -33,13 +33,13 @@ onMounted(() => {
<div class="rule-text-area wrapper">
<div>
<div class="part">
<div>活动时间：2025年4月27日——4月30日</div>
<div>活动时间：2025年5月28日——5月31日</div>
<div>活动奖励：微信红包</div>
</div>
<div class="part">
<div>活动攻略：</div>
<div>
1、【打卡理想假期，五一好礼等你】活动共设计5道题目，首页进入后左右滑动选择您想打卡的地点，点击进行答题，答对后即可获取专属打卡海报，并参与抽奖；答错时将跳转回选择打卡地点的页面，重新答题。
1、【龙舟争渡 稳健为先——端午赛龙舟中的投资哲学】活动共设计4道题目，首页进入后点击进行答题，全部答对即可获取专属赛龙舟海报，并参与抽奖；答错时刷新即可重新回答本题。
</div>
<div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
</div>
@@ -47,7 +47,7 @@ onMounted(() => {
<div>领奖说明：</div>
<div>
1、中奖后在中奖页面复制兑换码，前往<span
class="blod">[平安理财服务号]</span>消息框输入“五一快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
class="blod">[平安理财服务号]</span>消息框输入“端午安康”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
内查看兑换码；
</div>
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
@@ -98,12 +98,12 @@ onMounted(() => {
.rule-container {
position: relative;
@include box(685px, 876px);
@include box(708px, 880px);
overflow: hidden;
.content {
.rule-content {
@include box(685px, 876px);
@include box(708px, 880px);
@include bg_pos("rule/rule-box.png");
position: relative;
overflow: hidden;
@@ -122,7 +122,7 @@ onMounted(() => {
margin-top: 30px;
text-align: justify;
padding: 0 10px;
font-family: 'FZZY_Regular';
font-family: 'HarmonyOS_Sans_SC_Regular';
}
.blod {
@@ -151,7 +151,7 @@ onMounted(() => {
}
.rule-icon {
@include pos(97px, 120px, 561px, 25px);
@include pos(121px, 104px, 501px, 25px);
@include bg_pos("rule/icon.png");
pointer-events: none;
}