Sat Mar 22 19:09:00 CST 2025 inscode

index.html

@@ -112,8 +112,8 @@
     <template id="form-popupter-template">
         <div class="signupForm" v-if="showForm">
             <div class="wrapper">
-                <form action="" class="form">
-                    <div class="form-bg">
+                <div class="form-bg">
+                    <form action="" class="form">
                         <span type="button" class="signupform-close"  @click="closeSignupform"></span>
                         <h1 class="title">{{formTitle}}</h1>
                         <div class="inputContainer" v-for="(item, index) in inputContainer" :key="index">
@@ -137,8 +137,8 @@
 
                         </div>
                         <span type="button" class="submitBtn" @click="sendData">发送</span>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
         </div>
     </template>

src/float/bottomPopup.scss

@@ -107,7 +107,7 @@
 
     }
 
-    .bounbottom-popupter-receipt{
+    .bounbottom-popupter-receipt {
         cursor: pointer;
         display: inline-block;
         vertical-align: middle;
@@ -136,7 +136,7 @@
 
 
     .bounbottom-popupter-rightlock {
-      
+
         float: right;
         display: block;
         left: 0;
@@ -147,29 +147,32 @@
         width: 37px;
         height: 51px;
         margin-top: -35px;
-        .bounbottom-popupter-positioning{
-                cursor: pointer;
-        display: inline-block;
-        vertical-align: middle;
-        border-radius: 18px;
-         padding-top: 30px;
-        width: 37px;
-        height: 37px;
-        position: relative;
-         &::before {
-            content: "";
-            display: block;
-            position: absolute;
-            z-index: 2;
-            width: 24px;
-            height: 24px;
-            animation: 8s ease 0s infinite normal none running tanlianxia;
-            background: url("./positioning.svg") no-repeat center center;
-            background-size: cover;
-            top: 7px;
-            left: 6px;
-         }
+
+        .bounbottom-popupter-positioning {
+            cursor: pointer;
+            display: inline-block;
+            vertical-align: middle;
+            border-radius: 18px;
+            padding-top: 30px;
+            width: 37px;
+            height: 37px;
+            position: relative;
+
+            &::before {
+                content: "";
+                display: block;
+                position: absolute;
+                z-index: 2;
+                width: 24px;
+                height: 24px;
+                animation: 8s ease 0s infinite normal none running tanlianxia;
+                background: url("./positioning.svg") no-repeat center center;
+                background-size: cover;
+                top: 7px;
+                left: 6px;
+            }
         }
+
         // .bounbottom-popupter-rightlock-img-box {
         //     position: relative;
 
@@ -324,22 +327,32 @@
     left: 0;
     width: 100vw;
     height: 100vh;
+    z-index: 521;
     box-sizing: border-box;
-  
+
     .wrapper {
         width: 100%;
     }
 
-    .form {
-      .form-bg{
-        
-      }
-        // width: 100%;
-        width: 80vw;
+    .form-bg {
+        height: auto;
+        width: 90vw;
         margin: 4vw auto;
+        border: none;
+        box-sizing: border-box;
+        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;
+    }
+
+    .form {
+        box-sizing: border-box;
+        width: 100%;
         padding: 20px 6vw;
         border-radius: 40px;
-        backdrop-filter: blur(50px);
+        backdrop-filter: blur(6px);
         border: 3px solid transparent;
         background-image: linear-gradient(to right bottom,
                 rgba(255, 255, 255, 0.4),
@@ -352,10 +365,11 @@
         background-origin: border-box;
         background-repeat: no-repeat;
         background-position: bottom;
-        background-clip: padding-box, border-box,border-box;
+        background-clip: padding-box, border-box, border-box;
         box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
     }
-    .signupform-close{
+
+    .signupform-close {
         float: right;
         cursor: pointer;
         width: 34px;
@@ -364,9 +378,10 @@
         background-size: 100% 100%;
 
     }
+
     .title {
         font-size: 30px;
-    
+        color: rgb(235, 27, 27);
         margin-bottom: 50px;
     }
 
@@ -377,12 +392,14 @@
         margin-bottom: 17px;
     }
 
-    .input,.select {
+    .input,
+    .select {
         position: absolute;
         top: 0px;
         left: 0px;
         height: 100%;
         width: 100%;
+
         border: 1px solid #DADCE0;
         border-radius: 7px;
         font-size: 16px;
@@ -395,10 +412,10 @@
 
     .label {
         position: absolute;
-        top: 15px;
+        top: 12px;
         left: 15px;
         padding: 0 4px;
-        background-color: white;
+        background: transparent;
         color: #DADCE0;
         font-size: 16px;
         transition: 0.5s;
@@ -427,18 +444,22 @@
         // transform: translateY(-2px);
     }
 
-    .input:focus + .label, .select:focus + .label{
+    .input:focus+.label,
+    .select:focus+.label {
         top: -7px;
         left: 10px;
         z-index: 10;
         font-size: 14px;
         font-weight: 600;
+        background-color: #fff;
+        backdrop-filter: blur(20px);
         border-left: 2px solid rgb(235, 27, 27);
         border-right: 2px solid rgb(235, 27, 27);
         color: rgb(235, 27, 27);
     }
 
-    .input:not(:placeholder-shown)+.label,.select.selected + .label {
+    .input:not(:placeholder-shown)+.label,
+    .select.selected+.label {
         top: -7px;
         left: 3px;
         z-index: 10;
@@ -446,7 +467,8 @@
         font-weight: 600;
     }
 
-    .select:focus, .input:focus {
+    .select:focus,
+    .input:focus {
         border: 2px solid rgb(235, 27, 27);
     }