Browse Source

✨ feat(login): 重构登录页面,添加登录逻辑和背景图

陈雪 3 weeks ago
parent
commit
da055c25a4

File diff suppressed because it is too large
+ 300 - 0
src/assets/img/login/bg.svg


+ 9 - 0
src/assets/img/login/earth.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Earth (&#229;&#156;&#176;&#231;&#144;&#131;&#228;&#187;&#170;)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 12H22" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd" d="M12 22C14.2092 22 16 17.5229 16 12C16 6.47715 14.2092 2 12 2C9.79085 2 8 6.47715 8 12C8 17.5229 9.79085 22 12 22Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M4.92871 5.07129C6.73836 6.88094 9.23836 8.00024 11.9998 8.00024C14.7612 8.00024 17.2612 6.88094 19.0709 5.07129" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M19.0709 18.9289C17.2612 17.1193 14.7612 16 11.9998 16C9.23836 16 6.73836 17.1193 4.92871 18.9289" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

File diff suppressed because it is too large
+ 68 - 0
src/assets/img/login/right.svg


+ 46 - 3
src/views/login/index.vue

@@ -1,5 +1,48 @@
 <template>
-    <div>
-        <h2>登录页 </h2>
+  <div class="login-container">
+    <div class="form-container">
+      <img src="@/assets/img/login/right.svg" alt="" class="right-img" />
+      <div class="login-form"></div>
     </div>
-</template>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const account = ref('')
+  const password = ref('')
+  const remember = ref(false)
+
+  const handleLogin = () => {
+    console.log('Account:', account.value)
+    console.log('Password:', password.value)
+    console.log('Remember:', remember.value)
+    // 处理登录逻辑
+  }
+</script>
+
+<style scoped lang="scss">
+  @import '@/assets/main.scss';
+
+  .login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    background: url('@/assets/img/login/bg.svg') no-repeat center center;
+    background-size: cover;
+    box-sizing: border-box;
+    padding: 20px;
+
+    .form-container {
+      width: pxToVw(1600);
+      height: pxToVw(900);
+      flex-shrink: 0;
+      border-radius: 20px;
+      background: #fff;
+      overflow: hidden;
+    }
+  }
+</style>

Some files were not shown because too many files changed in this diff