From d49225746ceb3b6f2449b8130abe4011f270fa4f Mon Sep 17 00:00:00 2001
From: Xubx <1827135378@qq.com>
Date: Wed, 19 Mar 2025 14:27:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue |  74 +++++-----
 src/views/mainPage.vue   | 295 ++++++++++++---------------------------
 2 files changed, 124 insertions(+), 245 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index dafff6d..e422740 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -6,13 +6,13 @@
 
     <div class="code">
       <img class="text1" src="@/assets/orangeUi/shouyewenzi.svg" alt="" />
-      <img class="sbm" src="../assets/orangeUi/input.svg" alt="" />
+      <img class="sbm" src="@/assets/orangeUi/input.svg" alt="" />
       <input class="input-code" @wheel="isNotWheel" type="number" v-model="inputCode" />
       <img class="dl" @click="login" src="@/assets/orangeUi/button.svg" alt="" />
     </div>
 
     <div class="footer">
-      <img src="../assets/orangeUi/footer_cg.svg" alt="" />
+      <img src="@/assets/orangeUi/footer_cg.svg" alt="" />
     </div>
 
     <van-dialog
@@ -224,22 +224,37 @@
     width: 100vw;
     background: url('@/assets/orangeUi/bj5.svg') no-repeat;
     background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center; // 垂直居中
+  }
 
-    .hrbun {
-      height: 44vh;
-      width: 100vw;
+  .hrbun {
+    width: 90%;
+    //display: flex;
+    //justify-content: center;
+    //align-items: center;
 
-      img {
-        padding-top: 6vh;
-        width: 90%;
-      }
+    img {
+      width: 100%;
     }
   }
 
   .code {
     width: 90%;
-    height: 270px;
-    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px; // 减少组件之间的间距
+
+    .text1 {
+      width: 90%;
+    }
+
+    .sbm {
+      width: 90%;
+    }
 
     .input-code {
       text-align: center;
@@ -251,6 +266,7 @@
       font-weight: 600;
       border-radius: 132px;
       background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
+      //border: 4px solid rgba(141, 35, 40, 0.6);
       border: 4px solid rgba(237, 75, 54, 0.6);
       box-shadow:
         0px 0px 0px rgba(0, 0, 0, 0.1),
@@ -261,28 +277,22 @@
         0px 74px 21px rgba(0, 0, 0, 0);
     }
 
-    .text1 {
-      width: 90%;
-    }
-
-    .sbm {
-      width: 90%;
-      margin-top: 2vh;
-      height: 40px;
-    }
-
     .dl {
       width: 50%;
       margin-top: 2vh;
+      cursor: pointer;
     }
   }
 
   .footer {
-    width: 100vw;
+    width: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px; // 减少与上方组件的间距
 
     img {
-      padding-top: 3vh;
-      width: 80%;
+      width: 100%;
     }
   }
 
@@ -291,38 +301,28 @@
     text-align: left;
 
     span {
-      text-align: left;
+      font-weight: bold;
     }
 
     p {
-      text-align: left;
       text-indent: 20px;
-      padding: 0;
-      margin: 0;
+      margin: 10px 0;
 
       em {
         font-style: normal;
-        text-align: center;
         font-weight: 700;
       }
     }
   }
 
-  /* 隐藏Chrome和Firefox的内嵌上下箭头 */
+  /* 隐藏数字输入框的内嵌箭头 */
   input[type='number']::-webkit-inner-spin-button,
   input[type='number']::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
 
-  /* 隐藏Firefox的内嵌上下箭头 */
   input[type='number'] {
     -moz-appearance: textfield;
   }
-
-  /* 隐藏Edge的内嵌上下箭头 */
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-moz-inner-spin-button {
-    display: none;
-  }
 </style>
diff --git a/src/views/mainPage.vue b/src/views/mainPage.vue
index d4e4848..2322ee4 100644
--- a/src/views/mainPage.vue
+++ b/src/views/mainPage.vue
@@ -1,17 +1,16 @@
 <template>
   <div class="main-container">
     <div class="hsd-title">
-      <!--     <img src="@/assets/img1/logo.svg">-->
       <img src="@/assets/orangeUi/logo.svg" />
     </div>
     <div class="head-cg">
-      <!--     <img src="@/assets/img1/cg.svg">-->
       <img src="@/assets/orangeUi/cg.svg" />
     </div>
     <div class="main-content">
       <div class="main-text">
-        {{ userInfo.userName }}，您已成功报名！<p
-          >感谢您参与本次
+        {{ userInfo.userName }}，您已成功报名！
+        <p>
+          感谢您参与本次
           <em style="font-style: normal; color: red; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作！
         </p>
       </div>
@@ -473,162 +472,100 @@
   ];
 </script>
 <style scoped lang="scss">
-  .dialog-close-content {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    font-weight: 700;
-    font-size: 30px;
-    //background-color: #42b983;
-    color: #949494;
-  }
-
   .main-container {
     height: 100vh;
     width: 100vw;
     background: url('@/assets/orangeUi/bj5.svg') no-repeat;
-    //background: url("@/assets/img1/bj.svg") no-repeat;
-    background-size: 100%;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-    .hsd-title {
-      width: 100vw;
-      height: 15vh;
-      padding-top: 5vh;
-      //border: 1px solid red;
-      img {
-        width: 65%;
-        margin-top: 8vh;
-      }
+  .hsd-title {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px; // 调整顶部间距
+
+    img {
+      width: 65%;
+      margin-top: 8vh;
     }
+  }
 
-    .head-cg {
-      width: 100vw;
-      height: 15vh;
-      //border: 1px solid black;
-      img {
-        margin-top: 5vh;
-        width: 90%;
-      }
-    }
+  .head-cg {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-    .main-content {
-      margin-top: 10vh;
-      width: 100vw;
-      height: 10vh;
-      //border: 1px solid orange;
-      color: black;
-      font-weight: 600;
-    }
-
-    .main-icon {
-      width: 97vw;
-      height: 20vh;
-      margin: 0 auto;
+    img {
+      width: 90%;
       margin-top: 5vh;
-      //border: 1px solid green;
-      .main-item {
-        img {
-          width: 50%;
-          margin-top: 15%;
-        }
-
-        p {
-          margin-top: -5px;
-          font-size: 0.7rem;
-          font-weight: 600;
-        }
-      }
-    }
-
-    .footer {
-      width: 100vw;
-      height: 20vh;
-      //border: 1px solid blue;
-      img {
-        width: 100%;
-      }
     }
   }
 
-  .grop-by {
-    width: 100%;
-    height: 100px;
-
-    p {
-      text-align: center;
-      line-height: 100px;
-      font-size: initial;
-      color: red;
-    }
-  }
-
-  .txz-img {
-    position: absolute;
-    top: 0;
-    left: 0;
+  .main-content {
+    //margin-top: 10vh;
     width: 100vw;
-    height: 100vh;
-    //border: 5px solid red;
-    background-image: url('@/assets/orangeUi/txz.svg');
-    background-repeat: no-repeat;
-    background-size: cover; /* 修改这里 */
-    z-index: 999;
+    height: 10vh;
+    text-align: center;
+    //border: 1px solid orange;
+    color: black;
+    font-weight: 600;
+  }
 
-    span {
-      width: 30vw;
-      //border: 1px solid red;
-      font-weight: 700;
-      color: #262626;
-      font-size: 20px;
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
+  .main-icon {
+    width: 97vw;
+    height: 20vh;
+    text-align: center;
 
-    .card-pai {
-      position: absolute;
-      left: 8.5vw;
-      top: 71vh;
-      //font-size: 24px;
-      font-family: 微软雅黑;
-      text-align: center;
-      font-weight: 600;
-      font-size: 35px;
-      height: 2.5rem;
-      width: 80%;
-      opacity: 1;
-      //color: rgba(141, 35, 40, 0.6);
-      //color: rgba(255, 255, 255, 0.8);
-      color: white;
+    //margin-top: 5vh;
 
-      font-weight: 600;
-      border-radius: 132px;
-      background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
-      border: 4px solid rgba(255, 255, 255, 0.7);
-      box-shadow:
-        0px 0px 0px rgba(0, 0, 0, 0.1),
-        0px 3px 7px rgba(0, 0, 0, 0.1),
-        0px 12px 12px rgba(0, 0, 0, 0.09),
-        0px 27px 16px rgba(0, 0, 0, 0.05),
-        0px 47px 19px rgba(0, 0, 0, 0.01),
-        0px 74px 21px rgba(0, 0, 0, 0);
-    }
+    .main-item {
+      img {
+        width: 50%;
+        margin-top: 15%;
+      }
 
-    .card-tishi {
-      position: absolute;
-      top: 80vh;
-      left: 10vw;
-      text-align: left;
-      width: 80vw;
-      font-size: 18px;
-      color: white;
-      margin: 0 auto;
-      text-indent: 34px;
+      p {
+        margin-top: -5px;
+        font-size: 0.7rem;
+        font-weight: 600;
+      }
     }
   }
 
-  //地图
-  .ditu-img {
+  .footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  /* 弹窗样式 */
+  .dialog-close-content {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    font-size: 24px;
+    font-weight: 700;
+    color: #949494;
+    cursor: pointer;
+  }
+
+  /* 地图、通行证等弹窗样式 */
+  .ditu-img,
+  .txz-img,
+  .zhixie-img,
+  .xysh-img {
     position: fixed;
     top: 0;
     left: 0;
@@ -636,42 +573,27 @@
     height: 100vh;
     background-color: white;
     z-index: 999;
-
-    img {
-      padding-top: 30%;
-    }
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     span {
       position: absolute;
-      left: 80%;
+      right: 20px;
+      top: 20px;
+      font-size: 20px;
       font-weight: 700;
       color: #262626;
-      font-size: 20px;
+      cursor: pointer;
     }
-  }
-
-  .zhixie-img {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: white;
-    z-index: 999;
 
     img {
-      margin-top: 20%;
-    }
-
-    span {
-      position: absolute;
-      left: 80%;
-      font-weight: 700;
-      color: #262626;
-      font-size: 20px;
+      max-width: 90%;
+      max-height: 90%;
     }
   }
 
+  /* 校园生活弹窗样式 */
   .xysh-img1 {
     background: url('@/assets/orangeUi/xysh1.jpg') no-repeat center center;
     background-size: cover;
@@ -681,47 +603,4 @@
     background: url('@/assets/orangeUi/xysh2.jpg') no-repeat center center;
     background-size: cover;
   }
-
-  .xysh-img {
-    //background: url("@/assets/orangeUi/xysh.svg") no-repeat center;
-    ////background-size: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: white;
-    //background: url() no-repeat;
-    .card-img {
-      //padding-top: 10%;
-      width: 100%;
-      height: 100%;
-    }
-
-    span {
-      width: 30vw;
-      //border: 1px solid red;
-      font-weight: 700;
-      color: #262626;
-      font-size: 20px;
-      position: absolute;
-      right: 5px;
-      top: 0;
-    }
-    //  下一页
-    .em-next {
-      position: absolute;
-      top: 50%;
-      right: 10px;
-      /* 将元素向上移动自身高度的一半，以居中对齐 */
-      //transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 20px 20px 0 0; /* 创建一个向右的三角形 */
-      border-color: #050505 transparent transparent transparent;
-      transform: rotate(135deg);
-      /* 箭头颜色为红色，其余部分透明 */
-    }
-  }
 </style>