整合

src/components/Result.vue

@@ -16,17 +16,11 @@ console.log('海报id', posterId.value);
 
 
 const posterImgList = reactive([
-    new URL(`../assets/images/poster/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-2.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-3.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-4.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-5.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-6.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-7.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-8.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-9.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-10.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-11.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+
 ])
 
 // 生成二维码逻辑
@@ -56,10 +50,10 @@ const executeTasks = async () => {
     if (posterImgList[posterId.value - 1] && eqcodePic.value) {
 
         posterCreate(
-            { width: 750, height: 1334 },
+            { width: 750, height: 2106 },
             [
-                { name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 1334, x: 0, y: 0 } },
-                { name: "eqcode", src: eqcodePic.value, pos: { w: 194, h: 194, x: 514, y: 1098 } },
+                { name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 2106, x: 0, y: 0 } },
+                { name: "eqcode", src: eqcodePic.value, pos: { w: 178, h: 178, x: 532, y: 1887 } },
             ]
         );
     } else {
@@ -219,21 +213,25 @@ const posterCreate = (option, imageArr) => {
 </script>
 
 <template>
-    <!-- 海报弹窗 -->
     <div class="posterPop" @touchmove.prevent>
-        <div class="cls-btn-box">
-            <div class="cls-btn" @click="hidePop($event)"></div>
-        </div>
-        <div class="poster-box">
-            <div class="poster" :class="'poster-' + posterId">
-                <img id="posterSrc" src="" alt="" srcset="">
+        <div class="poster-bg"></div>
+        <div class="poster-container">
+            <div class="cls-btn-box">
+                <div class="cls-btn" @click="hidePop($event)"></div>
+            </div>
+            <div class="poster-box">
+                <div class="poster" :class="'poster-' + posterId">
+                    <img id="posterSrc" src="" alt="" srcset="">
+                </div>
+                <!-- <div class="poster-cls-btn"></div> -->
+            </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="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">
@@ -244,182 +242,99 @@ const posterCreate = (option, imageArr) => {
 
 
 <style lang="scss" scoped>
-.ResultPage {
-    @include fixed();
-    visibility: hidden;
-
-    .result-bg {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-        background-color: rgba($color: #000000, $alpha: 0.6);
-    }
-
-    .result-container {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-
-
-
-        .result-product {
-            @include pos(619px, 138px, 65px, 1015px);
-        }
-
-        .product-1 {
-            @include bg_pos("poster/card-1.png");
-        }
-
-        .product-2 {
-            @include bg_pos("poster/card-2.png");
-        }
-
-        .product-3 {
-            @include bg_pos("poster/card-3.png");
-        }
-
-        .product-4 {
-            @include bg_pos("poster/card-4.png");
-        }
-
-        .product-5 {
-            @include bg_pos("poster/card-5.png");
-        }
-
-        .product-6 {
-            @include bg_pos("poster/card-6.png");
-        }
-
-        .product-7 {
-            @include bg_pos("poster/card-7.png");
-        }
-
-        .product-8 {
-            @include bg_pos("poster/card-8.png");
-        }
-
-        .product-9 {
-            @include bg_pos("poster/card-9.png");
-        }
-
-        .product-10 {
-            @include bg_pos("poster/card-10.png");
-        }
-
-        .product-11 {
-            @include bg_pos("poster/card-11.png");
-        }
-
-
-
-        .create-poster {
-            @include pos(237px, 80px, 257px, 1284px);
-            @include bg_pos("result/create-btn.png");
-        }
-
-    }
-}
-
 .posterPop {
-    @include fixed();
-    @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.6);
+    @include pos(100%, 1624px, 0px, 0px);
+    overflow: hidden;
+    background: linear-gradient(135deg, #d6d1ca, #e5dccf);
     visibility: hidden;
 
-    .cls-btn-box {
-        width: 617px;
-        display: flex;
-        justify-content: flex-end;
-
-        .cls-btn {
-            @include box(49px, 49px);
-            @include bg_pos("question-list/cls-btn.png");
-            margin-right: -20px;
-        }
+    .poster-bg {
+        @include pos(750px, 1624px, 0px, 0px);
+        // transform: translateY(-50%);
+        @include bg_pos("index/bg.jpg");
     }
 
-    .save-tips {
-        font-size: 20px;
-        line-height: 20px;
-        margin-top: 20px;
-        color: #fff;
-        letter-spacing: 2px;
-    }
+    .poster-container {
+        @include pos(750px, 1624px, 0px, 0px);
+        // transform: translateY(-50%);
+        @include flexCen();
+        background-color: rgba($color: #000000, $alpha: 0.3);
 
-    .poster-box {
-        @include box(617px, 881px);
-        margin-top: 20px;
-        overflow: hidden;
+        .cls-btn-box {
+            width: 617px;
+            display: flex;
+            justify-content: flex-end;
 
-        .poster {
-            @include box(100%, 100%);
-            overflow: hidden;
-
-            #posterSrc {
-                @include box(100%, 100%);
-                opacity: 0;
+            .cls-btn {
+                @include box(49px, 49px);
+                @include bg_pos("question-list/cls-btn.png");
+                margin-right: -20px;
             }
         }
 
-        .poster-1 {
-            @include bg_pos("poster/card-1.png");
+        .save-tips {
+            font-size: 20px;
+            line-height: 20px;
+            margin-top: 20px;
+            color: #9e4b00;
+            letter-spacing: 2px;
         }
 
-        .poster-2 {
-            @include bg_pos("poster/card-2.png");
+        .poster-box {
+            @include box(713px, 995px);
+            margin-top: 20px;
+            overflow: hidden;
+            position: relative;
+            
+            .poster-cls-btn{
+                @include pos(53px, 53px,660px,10px);
+                @include bg_pos("result/cls-btn.png");
+            }
+
+            .poster {
+                @include box(100%, 100%);
+                overflow: hidden;
+
+                #posterSrc {
+                    @include box(100%, 100%);
+                    opacity: 0;
+                }
+            }
+
+            .poster-1 {
+                @include bg_pos("result/card-1.png");
+            }
+
+            .poster-2 {
+                @include bg_pos("result/card-1.png");
+            }
+
+            .poster-3 {
+                @include bg_pos("result/card-1.png");
+            }
+
         }
 
-        .poster-3 {
-            @include bg_pos("poster/card-3.png");
-        }
+        .btn-box {
+            @include box(550px, 99px);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 20px;
 
-        .poster-4 {
-            @include bg_pos("poster/card-4.png");
-        }
+            .go-draw {
+                @include box(264px, 99px);
+                @include bg_pos("result/go-draw-btn.png");
+            }
 
-        .poster-5 {
-            @include bg_pos("poster/card-5.png");
-        }
-
-        .poster-6 {
-            @include bg_pos("poster/card-6.png");
-        }
-
-        .poster-7 {
-            @include bg_pos("poster/card-7.png");
-        }
-
-        .poster-8 {
-            @include bg_pos("poster/card-8.png");
-        }
-
-        .poster-9 {
-            @include bg_pos("poster/card-9.png");
-        }
-
-        .poster-10 {
-            @include bg_pos("poster/card-10.png");
-        }
-
-        .poster-11 {
-            @include bg_pos("poster/card-11.png");
+            .go-share {
+                @include box(274px, 95px);
+                @include bg_pos("result/go-share-btn.png");
+            }
         }
     }
 
-    .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 {
@@ -428,14 +343,14 @@ const posterCreate = (option, imageArr) => {
     visibility: hidden;
 
     .tips-pic {
-        @include pos(100px, 100px, 600px, 100px);
+        @include pos(100px, 100px, 600px, 140px);
         @include bg_pos("result/share-tips.svg");
         stroke: #ffffff;
     }
 
     .tips-text {
         font-size: 25px;
-        @include pos(750px, 100px, 0px, 220px);
+        @include pos(750px, 100px, 0px, 260px);
         color: #ffffff;
         text-align: right;
     }