|
@@ -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>
|