update

user_web/src/view/LogInExe.vue

@@ -17,7 +17,11 @@
                     <input class="editRight newInput" type="text" placeholder="请输入密码" />
                 </div>
 
-
+                <div class="btnSubmit" >
+                    <img class="btnImg" src="../assets/exeLogin/btn.webp" />
+                    <div class="btnTxt" >登陆</div>
+                    
+                </div>
 
             </div>
             
@@ -141,7 +145,7 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 
-$proportion : 0.8;
+$proportion : 0.7;
 
 .newInput {
     /* 移除默认外观 */
@@ -194,11 +198,11 @@ $proportion : 0.8;
 
     .main {
         position: fixed;
-        width: 137.14rem;
-        height: 81.14rem;
+        width: 137.14rem * $proportion;
+        height: 81.14rem * $proportion;
         top: 50%;
         left: 50%;
-        margin: -40.57rem 0px 0px -68.57rem;
+        margin: -40.57rem * $proportion 0px 0px -68.57rem * $proportion;
 
         background-image: url("../assets/exeLogin/bg.webp");
         -webkit-background-size: 100% 100%;
@@ -209,11 +213,11 @@ $proportion : 0.8;
 
         .title {
             position: absolute;
-            top: 2.25rem;
+            top: 2.25rem * $proportion;
             left: 0px;
             width: 100%;
             text-align: center;
-            font-size: 4rem;
+            font-size: 4rem * $proportion;
             font-weight: 700;
             color: #f0fffe;
         }
@@ -221,14 +225,14 @@ $proportion : 0.8;
         .left {
             position: absolute;
             width: 46;
-            top: 15.85rem;
-            left: 19.85rem;
+            top: 15.85rem * $proportion;
+            left: 19.85rem * $proportion;
 
             .title2 {
                 width: 100%;
                 text-align: center;
                 font-weight: 500;
-                font-size: 5.35rem;
+                font-size: 5.35rem * $proportion;
                 color: #F0F5FD;
             }
 
@@ -236,9 +240,9 @@ $proportion : 0.8;
                 width: 100%;
                 text-align: center;
                 font-weight: 400;
-                font-size: 3.57rem;
+                font-size: 3.57rem * $proportion;
                 color: #F0F5FD;
-                margin: 2.64rem 0px 2.64rem 0px;
+                margin: 2.64rem * $proportion 0px 2.64rem * $proportion 0px;
 
                 /* 设置渐变背景，从左到右 */
                 background: linear-gradient(to right, #6A9EFF, #4ecdc4, #7DDBFA);
@@ -256,9 +260,9 @@ $proportion : 0.8;
             .edit {
                 position: relative;
                 width: 100%;
-                height: 5.71rem;
+                height: 5.71rem * $proportion;
                 border: 1px solid #71CBF2;
-                margin: 3.92rem 0px 3.92rem 0px;
+                margin: 3.92rem * $proportion 0px 3.92rem * $proportion 0px;
                 background-color: #ffffff;
 
                 .editLeft, .editRight {
@@ -266,21 +270,57 @@ $proportion : 0.8;
                 }
 
                 .editLeft {
-                    width: 2.78rem;
-                    left: 2.14rem;
-                    top: 1.57rem;
+                    width: 2.78rem * $proportion;
+                    left: 2.14rem * $proportion;
+                    top: 1.57rem * $proportion;
                 }
 
                 .editRight {
-                    left: 6.71rem;
+                    left: 6.71rem * $proportion;
                     top: 0px;
                     bottom: 0px;
                     right: 0px;
                     font-weight: 400;
-                    font-size: 2.5rem;
+                    font-size: 2.5rem * $proportion;
                     color: #49608C;
                     
                 }
+                
+            }
+
+            .btnSubmit {
+                position: relative;
+                width: 100%;
+                height: 6.21rem * $proportion;
+                cursor:pointer;
+                
+                .btnImg {
+                    position: absolute;
+                    top: -166%;
+                    left: -40%;
+                    width: 180%;
+                    // 穿透点击
+                    pointer-events: none;
+                }
+
+                .btnTxt {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    top: 0px;
+                    left: 0px;
+                    z-index: 1;
+
+                    text-align: center;
+                    font-weight: 500;
+                    font-size: 3.14rem * $proportion;
+                    color: #FFFFFF;
+                    letter-spacing: 7px;
+                    text-shadow: 0px 3px 7px rgba(39,63,121,0.25);
+
+                    line-height: 6.21rem * $proportion;
+                    
+                }
 
             }