Sat Mar 22 21:16:00 CST 2025 inscode

index.html

@@ -43,7 +43,7 @@
         </div>
         <section v-scope="SectionBaseTemplate({})" @vue:mounted="mounted" class="section-row">
             <div class="section-wrapper">
-                dddd
+                💓 💖
             </div>
         </section>
         <section class="section-row">
@@ -108,6 +108,7 @@
         </section>
         <div v-scope="FormPopup({})" @vue:mounted="mounted"></div>
         <div v-scope="BottomPopup({ initialCount: 1 })" @vue:mounted="mounted"></div>
+        <div v-scope="GiftsListPopup({})" @vue:mounted="mounted"></div>
     </div>
     <template id="form-popupter-template">
         <div class="signupForm" v-if="showForm">
@@ -193,7 +194,20 @@
             </div>
         </section>
     </template>
-
+    <template id="gifts-list-popup-template">
+        <div class="bounbottom-popupter-gift-list">
+            <div class="gift-list-container">
+                <div v-for="(item, index) in giftList" :key="index" :class="(item?'gift-list-item ': ' ')">
+                    <div class="gift-list-avatar"><img :src="item.avatar"/></div>
+                    <div class="gift-list-content">{{item.text}}</div>
+                    <div class="gift-list-gift-img">
+                        <img :src="item.giftImg"/>
+                        <img :src="item.giftImg2"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
     <script type="module" src="/src/main.ts"></script>
 
 

src/float/bottomPopup.scss

@@ -209,7 +209,7 @@
                 opacity: 1;
                 color: #fafafa;
                 border-radius: 20px;
-                background: rgba(235, 116, 116, 0.5);
+                background: rgba(235, 90, 118, 0.4);
                 transition: opacity 2s ease-in-out, transform 1s ease-in-out;
 
                 div {
@@ -283,6 +283,68 @@
             }
         }
     }
+
+
+}
+
+.bounbottom-popupter-gift-list {
+    position: fixed;
+    pointer-events: none;
+    bottom: 10vh;
+    z-index: 500;
+    height: 32vh;
+    width: 100vw;
+    overflow: hidden;
+
+    .gift-list-container {
+        position: relative;
+
+        .gift-list-item {
+            box-sizing: border-box;
+            position: absolute;
+            width: auto;
+            max-width: 70vw;
+            min-height: 20px;
+            text-align: left;
+            margin-top: 2px;
+            font-size: 14px;
+            padding: 4px 8px;
+            opacity: 1;
+            color: #fafafa;
+            border-radius: 30px;
+            background: rgba(235, 90, 118, 0.5);
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            padding-right: 40px;
+            .gift-list-avatar {
+                border-radius: 50%;
+                border: 3px solid #ffb3b3;
+                overflow: hidden;
+                width: 36px;
+                height: 36px;
+                box-shadow: 0 0 10px rgba(255, 182, 193, 0.6);
+                transform: translateZ(20px);
+                img {
+                    width: 36px;
+                    height: auto;
+                }
+                margin-right: 5px;
+            }
+
+            .gift-list-content {
+                white-space: nowrap;
+            }
+            .gift-list-gift-img{
+                position: absolute;
+                right: 15px;
+                img{
+                    width: auto;
+                    height: 50px;
+                }
+            }
+        }
+    }
 }
 
 @keyframes tanlianxia {
@@ -343,8 +405,8 @@
         border-radius: 40px;
         background-image: url('https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322183844363-2055895336.png');
         background-repeat: no-repeat;
-        background-size: 100%,100%;
-         background-position-y: 30px;
+        background-size: 100%, 100%;
+        background-position-y: 30px;
     }
 
     .form {

src/float/bottomPopup.ts

@@ -207,6 +207,23 @@ export function BottomPopup(props: any) {
     }
 }
 
+export function GiftsListPopup(props:any) {
+    return {
+        $template:'#gifts-list-popup-template',
+        giftList:[{
+            avatar: 'https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322202646157-442978556.png',
+            avatarClass: '',
+            text: "棘祥杏福 情定终身",
+            giftImg: "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205303857-804953175.png",
+            giftImg2: "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250322205245772-817504696.png"
+        }],
+        isShow: false,
+        mounted(){
+            console.log(this.giftList)
+        }
+    }
+}
+
 export function MusicPlay(props: any) {
     return {
         isPlay: true,
@@ -223,9 +240,9 @@ export function MusicPlay(props: any) {
                 audio.pause();
             }
         },
-         mounted() {
-           this.playMusic()
-         }
+        mounted() {
+            this.playMusic()
+        }
     }
 }
-export default { floatStore, BottomPopup, FormPopup,MusicPlay }
\ No newline at end of file
+export default { floatStore, BottomPopup, FormPopup, GiftsListPopup, MusicPlay }
\ No newline at end of file