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

完成逻辑

Browse Source
This commit is contained in:
Andy Leong
2024-02-06 03:07:56 +08:00
parent 67c8521b18
commit 48f8c0aa95
60 changed files with 69 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Index.vue
View File

@@ -139,7 +139,7 @@ const showVC = () => {
.index-cloud{
pointer-events: none;
@include pos(88px, 46px, 621px, 269px);
@include pos(88px, 46px, 621px, 253px);
@include bg_pos("index/cloud.png");
}
@@ -151,19 +151,19 @@ const showVC = () => {
.index-windows{
pointer-events: none;
@include pos(743px, 744px, 4px, 440px);
@include pos(737px, 744px, 6.5px, 440px);
@include bg_pos("index/windows.png");
}
.index-pet{
pointer-events: none;
@include pos(234px, 421px, 353px, 614px);
@include pos(234px, 386px, 353px, 614px);
@include bg_pos("index/pet-icon.png");
}
.index-title {
// pointer-events: none;
@include pos(603px, 167px, 75px, 247px);
@include pos(621px, 98px, 44px, 309px);
@include bg_pos("index/title.png");
}

61
src/components/Result.vue
View File

@@ -6,13 +6,19 @@ import { mbtiList } from "@/data";
import { posterCreate } from "@/plugins";
import { Toast } from "vant";
import QRCode from "qrcode";
import { reactive } from "vue";
// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
const posterId = ref(userStore.posterId); //海报背景id：1～4
const posterImgList = reactive([
new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
])
// 生成二维码逻辑
const eqcodePic = ref();
@@ -48,14 +54,14 @@ const createPoster = (event) => {
// 背景
{
name: "bg",
src: new URL(`../assets/images/result/poster.jpg`, import.meta.url).href,
src: posterImgList[posterId.value-1],
pos: { w: 750, h: 1334, x: 0, y: 0 },
},
// 二维码
{
name: "eqcode",
src: eqcodePic.value,
pos: { w: 140, h: 140, x: 66, y: 1070 },
pos: { w: 164, h: 164, x: 159, y: 1122 },
},
],
);
@@ -103,7 +109,7 @@ const hideShare = () => {
<div class="ResultPage" @touchmove.prevent>
<div class="result-bg"></div>
<div class="result-container">
<div class="created-tips"></div>
<div class="result-larnten-box" :class="'larnten-box-'+posterId"></div>
<div class="result-larnten" :class="'larnten-'+posterId"></div>
<!-- 新年祝福语 -->
<div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
@@ -156,45 +162,64 @@ const hideShare = () => {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
.created-tips{
@include pos(316px, 91px, -54px, 267px);
@include bg_pos("result/tips.png");
.larnten-box-1{
@include pos(437px, 809px, 283px, 181px);
@include bg_pos("result/larnten-box-1.png");
}
.larnten-box-2{
@include pos(423px, 790px, 304px, 178px);
@include bg_pos("result/larnten-box-2.png");
}
.larnten-box-3{
@include pos(447px, 807px, 280px, 170px);
@include bg_pos("result/larnten-box-3.png");
}
.larnten-1{
// @include pos(609px, 878px, -54px, 267px);
// @include bg_pos("result/larnten-1.png");
@include pos(397px, 787px, 315px, 297px);
@include bg_pos("result/larnten-1.png");
}
.larnten-2{
@include pos(444px, 771px, 306px, 302px);
@include bg_pos("result/larnten-2.png");
}
.larnten-3{
@include pos(472px, 789px, 278px, 285px);
@include bg_pos("result/larnten-3.png");
}
.blessing-1-1{
@include pos(86px, 565px, 119px, 409px);
@include pos(86px, 565px, 70px, 347px);
@include bg_pos("result/blessing-text-1-1.png");
}
.blessing-1-2{
@include pos(82px, 561px, 214px, 409px);
@include pos(82px, 561px, 165px, 347px);
@include bg_pos("result/blessing-text-1-2.png");
}
.blessing-2-1{
@include pos(86px, 563px, 119px, 409px);
@include pos(86px, 563px, 70px, 347px);
@include bg_pos("result/blessing-text-2-1.png");
}
.blessing-2-2{
@include pos(88px, 565px, 214px, 409px);
@include pos(88px, 565px, 165px, 347px);
@include bg_pos("result/blessing-text-2-2.png");
}
.blessing-3-1{
@include pos(86px, 568px, 119px, 409px);
@include pos(86px, 568px, 70px, 347px);
@include bg_pos("result/blessing-text-3-1.png");
}
.blessing-3-2{
@include pos(87px, 563px, 214px, 409px);
@include pos(87px, 563px, 165px, 347px);
@include bg_pos("result/blessing-text-3-2.png");
}
.result-product{
@include pos(659px, 159px, 45px, 1004px);
@include pos(619px, 138px, 65px, 1015px);
}
.product-1{
@include bg_pos("result/product-1.png");
@@ -207,12 +232,12 @@ const hideShare = () => {
}
.result-tips{
@include pos(645px, 71px, 52px, 1195px);
@include pos(645px, 71px, 52px, 1183px);
@include bg_pos("result/text.png");
}
.create-poster{
@include pos(237px, 80px, 257px, 1302px);
@include pos(237px, 80px, 257px, 1284px);
@include bg_pos("result/create-btn.png");
}