style修改

src/components/layout/Index.vue

@@ -28,7 +28,7 @@ withDefaults(defineProps<{ sidebar?: boolean; hasTitle?: boolean }>(), {
   display: flex;
   flex-direction: column;
   // min-height: 100vh;
-  background: rgba(0, 0, 0, 0);
+  background: #fff;
 }
 // .app-layout-container {
 //   flex: 1;

src/modules/internet/components/CardQuery.vue

@@ -56,6 +56,7 @@ const handleSubmit = () => {
     <el-form-item>
       <div class="btn_query" @click="handleSubmit">查询</div>
     </el-form-item>
+    <div class="home_box_tips">请输入姓名、身份证号、证书编号中任意两项信息进行查询。</div>
   </el-form>
 </template>
 
@@ -72,6 +73,7 @@ const handleSubmit = () => {
   font-weight: 400;
   color: #ffffff;
   cursor: pointer;
+  margin: auto;
 }
 .el-input_icon_card {
   display: block;
@@ -94,13 +96,19 @@ const handleSubmit = () => {
   height: 13.7px;
   margin-left: 21px;
 }
-::v-deep {
-  .el-input__inner {
-    margin-left: 9px;
-  }
-  .el-input {
-    --el-input-border-radius: 20px;
-    height: 40px;
-  }
+:deep(.el-input__inner) {
+  margin-left: 9px;
+}
+:deep(.el-input) {
+  --el-input-border-radius: 20px;
+  height: 40px;
+  width: 292px;
+  margin: auto;
+}
+.home_box_tips {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #333333;
 }
 </style>

src/modules/internet/components/ManagerLogin.vue

@@ -119,12 +119,13 @@ const handleTimeChange = () => {
   font-weight: 400;
   color: #ffffff;
   cursor: pointer;
+  margin: auto;
 }
 .btn_code {
   font-size: 14px;
   font-weight: 400;
   color: #01379e;
-  padding-left: 237px;
+  padding-left: 235px;
   cursor: pointer;
 }
 .el-input_icon_name {
@@ -141,16 +142,16 @@ const handleTimeChange = () => {
   height: 15px;
   margin-left: 21px;
 }
-::v-deep {
-  .el-input__inner {
-    margin-left: 9px;
-  }
-  .el-input {
-    --el-input-border-radius: 20px;
-    height: 40px;
-  }
-  .el-input-group--append > .el-input__wrapper {
-    height: 40px;
-  }
+:deep(.el-input__inner) {
+  margin-left: 9px;
+}
+:deep(.el-input) {
+  --el-input-border-radius: 20px;
+  height: 40px;
+  width: 292px;
+  margin: auto;
+}
+:deep(.el-input-group--append > .el-input__wrapper) {
+  height: 40px;
 }
 </style>

src/modules/internet/components/StudyLogin.vue

@@ -103,6 +103,7 @@ const handleTimeChange = () => {
     <el-form-item>
       <div class="btn_query" @click="handleLogin">登录</div>
     </el-form-item>
+    <div class="home_box_tips">请输入手机号、验证码或密码登录在线学习系统。</div>
   </el-form>
 </template>
 
@@ -119,12 +120,13 @@ const handleTimeChange = () => {
   font-weight: 400;
   color: #ffffff;
   cursor: pointer;
+  margin: auto;
 }
 .btn_code {
   font-size: 14px;
   font-weight: 400;
   color: #01379e;
-  padding-left: 237px;
+  padding-left: 235px;
   cursor: pointer;
 }
 .el-input_icon_name {
@@ -141,16 +143,23 @@ const handleTimeChange = () => {
   height: 15px;
   margin-left: 21px;
 }
-::v-deep {
-  .el-input__inner {
-    margin-left: 9px;
-  }
-  .el-input {
-    --el-input-border-radius: 20px;
-    height: 40px;
-  }
-  .el-input-group--append > .el-input__wrapper {
-    height: 40px;
-  }
+:deep(.el-input__inner) {
+  margin-left: 9px;
+}
+:deep(.el-input) {
+  --el-input-border-radius: 20px;
+  height: 40px;
+  width: 292px;
+  margin: auto;
+}
+:deep(.el-input-group--append > .el-input__wrapper) {
+  height: 40px;
+}
+.home_box_tips {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #333333;
+  text-align: center;
 }
 </style>

src/modules/internet/views/Index.vue

@@ -30,17 +30,9 @@ function handleTabChange(index: number) {
           </div>
         </div>
       </div>
-      <div class="home_box_form" v-if="activeIndex === 0">
-        <CardQuery />
-      </div>
-      <div v-if="activeIndex === 1">
-        <StudyLogin />
-      </div>
-      <div v-if="activeIndex === 2">
-        <ManagerLogin />
-      </div>
-      <div class="home_box_tips" v-if="activeIndex === 0">请输入姓名、身份证号、证书编号中任意两项信息进行查询。</div>
-      <div class="home_box_tips" v-if="activeIndex === 1">请输入手机号、验证码或密码登录在线学习系统。</div>
+      <CardQuery v-if="activeIndex === 0" class="form" />
+      <StudyLogin v-if="activeIndex === 1" class="form" />
+      <ManagerLogin v-if="activeIndex === 2" class="form" />
       <div class="home_box_line"></div>
       <div class="home_box_bottom">
         <div>报名咨询：林老师</div>
@@ -57,32 +49,33 @@ function handleTabChange(index: number) {
   background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fdc/%20fdc_bg.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .home_box {
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-direction: column;
     width: 472px;
-    height: 496px;
+    min-height: 496px;
     background: #ffffff;
     opacity: 1;
     border-radius: 20px;
-    position: absolute;
-    top: 151px;
-    left: 50%;
-    transform: translateX(-50%);
+    box-sizing: border-box;
+
     .home_box_tab {
       display: flex;
       justify-content: space-around;
       width: 410px;
+      height: 40px;
       background: rgba(255, 255, 255, 0.39);
       border: 1px solid #e5e5e5;
       opacity: 1;
       border-radius: 22px;
-      position: absolute;
-      top: 53px;
-      left: 50%;
-      transform: translateX(-50%);
+      margin-top: 53px;
+      cursor: pointer;
+
       .tab_item_name {
         width: 136px;
         height: 40px;
@@ -102,39 +95,16 @@ function handleTabChange(index: number) {
         color: #01379e;
       }
     }
-    .home_box_form {
-      position: absolute;
-      top: 146px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 292px;
-    }
-    .home_box_tips {
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 18px;
-      color: #333333;
-      position: absolute;
-      top: 402px;
-      left: 50%;
-      transform: translateX(-50%);
-      white-space: nowrap;
+    .form {
+      padding-top: 49px;
     }
+
     .home_box_line {
       width: 410px;
       height: 0px;
       border: 1px solid #e3e3e3;
-      opacity: 1;
-      position: absolute;
-      bottom: 66px;
-      left: 50%;
-      transform: translateX(-50%);
     }
     .home_box_bottom {
-      position: absolute;
-      bottom: 21px;
-      left: 50%;
-      transform: translateX(-50%);
       font-size: 12px;
       font-weight: 400;
       line-height: 1.5;