-
-
![]()
-
+
-
![]()
+
+
![]()
+
*长按保存海报
@@ -256,187 +147,91 @@ const hideShare = () => {
.result-bg {
@include pos(750px, 1624px, 0px, 50%);
+ @include bg_pos("result/bg.jpg");
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;
+ .created-tips{
+ @include pos(316px, 91px, -54px, 267px);
+ @include bg_pos("result/tips.png");
}
- .page-theme-2 {
- color: #fb7700;
- animation: color 1s;
+ .larnten-1{
+ // @include pos(609px, 878px, -54px, 267px);
+ // @include bg_pos("result/larnten-1.png");
}
- .page-theme-3 {
- color: #4172d8;
- animation: color 1s;
+ .blessing-1-1{
+ @include pos(86px, 565px, 119px, 409px);
+ @include bg_pos("result/blessing-text-1-1.png");
+ }
+ .blessing-1-2{
+ @include pos(82px, 561px, 214px, 409px);
+ @include bg_pos("result/blessing-text-1-2.png");
}
- .page-theme-4 {
- color: #eb5c37;
- animation: color 1s;
+ .blessing-2-1{
+ @include pos(86px, 563px, 119px, 409px);
+ @include bg_pos("result/blessing-text-2-1.png");
+ }
+ .blessing-2-2{
+ @include pos(88px, 565px, 214px, 409px);
+ @include bg_pos("result/blessing-text-2-2.png");
}
- .mbti-title {
- @include pos(600px, 120px, 90px, 418px);
- font-size: 80px;
- 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;
- font-weight: bolder;
- transform: rotate(-4deg);
- display: flex;
-
+ .blessing-3-1{
+ @include pos(86px, 568px, 119px, 409px);
+ @include bg_pos("result/blessing-text-3-1.png");
+ }
+ .blessing-3-2{
+ @include pos(87px, 563px, 214px, 409px);
+ @include bg_pos("result/blessing-text-3-2.png");
}
- .mbti-des-box {
- @include pos(557px, 90px, 110px, 547px);
- display: flex;
- flex-direction: column;
- justify-content: space-around;
-
- .des {
- color: #af6f49;
- font-size: 30px;
- transform: rotate(-4deg);
- }
+ .result-product{
+ @include pos(659px, 159px, 45px, 1004px);
+ }
+ .product-1{
+ @include bg_pos("result/product-1.png");
+ }
+ .product-2{
+ @include bg_pos("result/product-2.png");
+ }
+ .product-3{
+ @include bg_pos("result/product-3.png");
}
- .mbti-blessings-box {
- @include pos(500px, 160px, 130px, 715px);
- display: flex;
- flex-direction: column;
- justify-content: space-around;
-
- .blessings {
- font-size: 50px;
- transform: rotate(-4deg);
- text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
- }
-
- .isfj-blessings {
- font-size: 40px;
- }
+ .result-tips{
+ @include pos(645px, 71px, 52px, 1195px);
+ @include bg_pos("result/text.png");
}
- .mbti-product {
- @include pos(630px, 140px, 134px, 948px);
-
- .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%);
- }
- }
+ .create-poster{
+ @include pos(237px, 80px, 257px, 1302px);
+ @include bg_pos("result/create-btn.png");
}
- .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 {
@include fixed();
@include flexCen();
- background-color: rgba($color: #000000, $alpha: 0.54);
+ background-color: rgba($color: #000000, $alpha: 0.6);
visibility: hidden;
.cls-btn-box {
- width: 495px;
+ width: 617px;
display: flex;
justify-content: flex-end;
.cls-btn {
- @include box(41px, 41px);
+ @include box(49px, 49px);
@include bg_pos("result/cls-btn.png");
margin-right: -20px;
}
@@ -451,14 +246,26 @@ const hideShare = () => {
}
.poster-box {
- @include box(495px, 990px);
+ @include box(617px, 881px);
margin-top: 20px;
overflow: hidden;
- border: 2px solid #dbbb90;
- border-radius: 20px;
- #poster {
+ .poster {
@include box(100%, 100%);
+ overflow: hidden;
+ #posterSrc{
+ @include box(100%, 100%);
+ opacity: 0;
+ }
+ }
+ .poster-1{
+ @include bg_pos("result/preveiw-1.png");
+ }
+ .poster-2{
+ @include bg_pos("result/preveiw-2.png");
+ }
+ .poster-3{
+ @include bg_pos("result/preveiw-3.png");
}
}
diff --git a/src/data/imgList.js b/src/data/imgList.js
index 5f3aa61..bfb0d93 100644
--- a/src/data/imgList.js
+++ b/src/data/imgList.js
@@ -6,70 +6,67 @@ const load = [
const page = [
+ 'index/prize-btn.png',
+ 'index/cloud.png',
+ 'index/firework.png',
+ 'index/rule-btn.png',
+ 'index/start-btn.png',
+ 'index/fan-3.png',
+ 'index/title.png',
+ 'index/fan-4.png',
+ 'index/pet-icon.png',
+ 'index/fan-2.png',
+ 'index/fan-1.png',
+ 'index/windows.png',
+ 'index/bottom-bg.png',
+ 'index/bg.jpg',
+
'prize/tips.png',
- 'prize/star.png',
'prize/cls-btn.png',
'prize/copy-btn.png',
- 'prize/draw-box.png',
'prize/draw-text.png',
'prize/light.png',
+ 'prize/draw-box.png',
'prize/myPrize-box.png',
'prize/no-prize.png',
- 'music-on.png',
- 'music-off.png',
- 'orientation-icon.png',
- 'share.jpg',
- 'index/title.png',
- 'index/start-btn.png',
- 'index/rule-btn.png',
- 'index/prize-btn.png',
- 'index/bg.jpg',
- 'qa/showResult-btn.png',
- 'qa/question.png',
- 'qa/prev-btn.png',
- 'qa/answer-box-2.png',
- 'qa/answer-box-1.png',
- 'result/theme-4.png',
- 'result/theme-3.png',
- 'result/theme-2.png',
- 'result/theme-1.png',
- 'result/share-tips.svg',
- 'result/select-tips.png',
- 'result/product-1.png',
- 'result/select-arrow.png',
- 'result/poster-bg-4.jpg',
- 'result/poster-bg-3.jpg',
- 'result/poster-bg-2.jpg',
- 'result/poster-bg-1.jpg',
- 'result/go-share-btn.png',
- 'result/go-draw-btn.png',
- 'result/create-btn.png',
- 'result/bg-4.jpg',
- 'result/cls-btn.png',
- 'result/bg-2.jpg',
- 'result/bg-3.jpg',
- 'result/bg-1.jpg',
- 'rule/rule-box.png',
- 'rule/cls-btn.png',
- 'rule/caidai.png',
- 'rule/arrow.png',
+ 'prize/star.png',
+
+ 'qa/gold-icon.png',
+ 'qa/question-box.png',
+ 'qa/lantern-icon.png',
+ 'qa/gold-icon-2.png',
+ 'qa/bg.jpg',
+ 'qa/bottom-bg.png',
+
+ 'result/share-tips.svg',
+ 'result/cls-btn.png',
+ 'result/create-btn.png',
+ 'result/go-draw-btn.png',
+ 'result/go-share-btn.png',
+ 'result/blessing-text-1-2.png',
+ 'result/tips.png',
+ 'result/product-2.png',
+ 'result/blessing-text-3-1.png',
+ 'result/blessing-text-1-1.png',
+ 'result/blessing-text-2-1.png',
+ 'result/product-3.png',
+ 'result/blessing-text-3-2.png',
+ 'result/blessing-text-2-2.png',
+ 'result/product-1.png',
+ 'result/text.png',
+ 'result/larnten-1.png',
+ 'result/larnten-3.png',
+ 'result/larnten-2.png',
+ 'result/preveiw-1.png',
+ 'result/preveiw-2.png',
+ 'result/preveiw-3.png',
+ 'result/bg.jpg',
+ 'result/poster.jpg',
+ 'rule/cls-btn.png',
+ 'rule/icon.png',
+ 'rule/arrow.png',
+ 'rule/rule-box.png',
- 'result/product/INFP.png',
- 'result/product/INFJ.png',
- 'result/product/ESFP.png',
- 'result/product/ENFP.png',
- 'result/product/ESTJ.png',
- 'result/product/ISFJ.png',
- 'result/product/ENTJ.png',
- 'result/product/ENFJ.png',
- 'result/product/ESFJ.png',
- 'result/product/ISTP.png',
- 'result/product/ESTP.png',
- 'result/product/ISFP.png',
- 'result/product/INTJ.png',
- 'result/product/ISTJ.png',
- 'result/product/ENTP.png',
- 'result/product/INTP.png',
]
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index bbd591f..d051397 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -83,7 +83,7 @@ const drawFn = (item) => {
}
};
-const showResult = ref(true);
+const showResult = ref(false);
const resultFn = (item) => {
if (item.action == "hide") {
showResult.value = false;
@@ -211,7 +211,7 @@ onMounted(() => {
});
}
} else {
- // showLoad.value = true;
+ showLoad.value = true;
createBGM();
}
});
@@ -225,7 +225,7 @@ const playMusic = () => {