完成登录页面设计

components.d.ts

@@ -14,6 +14,8 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanField: typeof import('vant/es')['Field']
     VanNavBar: typeof import('vant/es')['NavBar']
   }
 }

src/views/login/index.vue

@@ -5,21 +5,55 @@
       <div class="text">xxx你好，欢迎您参加医疗峰会项目，请登录系统开局发票</div>
       <div class="bold-text">已注册电子税务局</div>
       <div class="form">
-        
+        <van-cell-group inset class="grop">
+          <van-field
+            class="input"
+            v-model="formData.mobile"
+            placeholder="请输入本人注册手机号"
+            clearable
+          />
+        </van-cell-group>
+        <van-cell-group inset class="grop">
+          <van-field
+            class="input code-input"
+            v-model="formData.mobile"
+            placeholder="请输入验证码"
+            clearable
+          >
+          </van-field>
+          <button class="code-btn">
+            {{ codeBtnText }}
+          </button>
+        </van-cell-group>
+        <div class="agree">
+          <label>
+            <input type="checkbox" v-model="agree" />
+            我已阅读并同意
+            <a href="#">《用户协议》</a>
+            <a href="#">《隐私权政策》</a>
+          </label>
+        </div>
+        <div class="login-btn btn">登录</div>
       </div>
+      <div class="bold-text">未注册电子税务局</div>
+      <div class="register-btn btn">立即注册</div>
+      <div class="footer">技术支持：票易云（北京）科技有限公司</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { loginEtssmsApi } from '@/services/modules/login'
-import { onMounted, reactive } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 
 const formData = reactive({
   mobile: '13800138001',
   code: '5657',
 })
 
+const codeBtnText = ref('获取验证码')
+const agree = ref(false)
+
 onMounted(() => {
   // login()
 })
@@ -33,22 +67,161 @@ const login = async () => {
 
 <style lang="scss" scoped>
 .login {
-  height: 100vh;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
+  overflow-x: hidden;
+
+  .van-nav-bar {
+    background-color: #fff;
+    border-bottom: 1px solid #f2f2f2;
+    font-weight: 600;
+  }
+
   .login-content {
-    background-color: #fbfcff;
-    padding: 0 60px;
+    flex: 1;
+    padding: 6vw 6vw 12vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+
     .text {
-      font-size: 32px;
-      height: 200px;
-      width: 80%;
-      margin: 0 auto;
-      margin-top: 10vw;
-      line-height: 42px;
+      width: 90%;
+      font-size: 4vw;
+      text-align: center;
+      line-height: 6vw;
       color: #333;
+      margin-top: 8vw;
+      margin-bottom: 6vw;
     }
+
     .bold-text {
+      width: 100%;
+      font-weight: 700;
+      font-size: 4.5vw;
+      text-align: left;
+      color: #222;
+      margin: 4vw 0 2vw;
+    }
+
+    .form {
+      width: 100%;
+      background: #fff;
+      border-radius: 3vw;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+      padding: 6vw 4vw;
+      box-sizing: border-box;
+      margin-bottom: 8vw;
+
+      .grop {
+        margin-top: 3vw;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .input {
+        width: 100%;
+        border-radius: 6vw;
+        border: 1px solid #e5e5e5;
+        padding-left: 5vw;
+        font-size: 3.8vw;
+        background: #fff;
+        transition: 0.3s;
+        height: 10vw;
+        &:focus {
+          border-color: #fe783d;
+          box-shadow: 0 0 8px rgba(254, 120, 61, 0.3);
+        }
+      }
+
+      .code-input {
+        width: 55%;
+      }
+
+      .code-btn {
+        background: linear-gradient(90deg, #fe783d 0%, #ff994f 100%);
+        border: none;
+        border-radius: 25px;
+        height: 9vw;
+        width: 30%;
+        color: #fff;
+        font-weight: 600;
+        font-size: 3.4vw;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:active {
+          opacity: 0.85;
+        }
+        &:disabled {
+          background: #ccc;
+          cursor: not-allowed;
+        }
+      }
+
+      .agree {
+        text-align: left;
+        font-size: 3vw;
+        line-height: 5vw;
+        margin: 4vw 0;
+        color: #666;
+        label {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          input {
+            width: 3.5vw;
+            height: 3.5vw;
+            margin-right: 6px;
+          }
+        }
+        a {
+          color: #fe783d;
+          text-decoration: none;
+          margin-left: 2px;
+        }
+      }
+    }
+
+    .btn {
+      box-sizing: border-box;
+      width: 80%;
+      height: 12vw;
+      border-radius: 6vw;
+      color: #fff;
+      font-size: 4vw;
+      line-height: 12vw;
+      text-align: center;
       font-weight: 600;
-      font-size: 36px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      margin: 4vw 0;
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    .login-btn {
+      margin: 0 auto;
+      background: linear-gradient(90deg, #ff8036 0%, #ffa253 100%);
+      box-shadow: 0 4px 12px rgba(255, 128, 54, 0.3);
+    }
+
+    .register-btn {
+      background: linear-gradient(90deg, #0072f8 0%, #3a9fff 100%);
+      box-shadow: 0 4px 12px rgba(0, 114, 248, 0.25);
+    }
+
+    .footer {
+      width: 100%;
+      text-align: center;
+      color: #999;
+      font-size: 3vw;
+      margin-top: auto;
+      padding-bottom: 4vh;
     }
   }
 }