|
|
@@ -2,28 +2,55 @@
|
|
|
<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 class="login-form">
|
|
|
+ <div class="title">Hi,welcome back</div>
|
|
|
+ <div class="sumary-title">Cashier account</div>
|
|
|
+ <el-form ref="formRef" :model="loginForm">
|
|
|
+ <el-form-item prop="username" :rules="[]">
|
|
|
+ <el-input v-model="loginForm.username" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password" :rules="[]">
|
|
|
+ <el-input v-model="loginForm.password" :type="inputType">
|
|
|
+ <template #suffix>
|
|
|
+ <img
|
|
|
+ v-if="inputType === 'password'"
|
|
|
+ src="@/assets/img/login/close-one.svg"
|
|
|
+ @click="inputType = ''"
|
|
|
+ />
|
|
|
+ <img @click="inputType = 'password'" v-else src="@/assets/img/login/open-one.svg" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="remember-password">
|
|
|
+ <el-switch v-model="isRremember" />
|
|
|
+ <div class="remember-text">remember password</div>
|
|
|
+ </div>
|
|
|
+ <div class="login-btn">log on</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref } from 'vue'
|
|
|
+ import { reactive, ref, useTemplateRef } from 'vue'
|
|
|
+ const loginFormRef = useTemplateRef('formRef')
|
|
|
|
|
|
- const account = ref('')
|
|
|
- const password = ref('')
|
|
|
- const remember = ref(false)
|
|
|
+ const inputType = ref('password')
|
|
|
+ const isRremember = ref(false)
|
|
|
|
|
|
- const handleLogin = () => {
|
|
|
- console.log('Account:', account.value)
|
|
|
- console.log('Password:', password.value)
|
|
|
- console.log('Remember:', remember.value)
|
|
|
- // 处理登录逻辑
|
|
|
- }
|
|
|
+ const loginForm = reactive({
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ code: '',
|
|
|
+ uuid: '',
|
|
|
+ })
|
|
|
+
|
|
|
+ const loginHandler = () => {}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- @import '@/assets/main.scss';
|
|
|
+ @use '@/assets/main.scss' as *;
|
|
|
|
|
|
.login-container {
|
|
|
display: flex;
|
|
|
@@ -34,15 +61,106 @@
|
|
|
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);
|
|
|
+ width: pxToVW(1600);
|
|
|
+ height: pxToVW(900);
|
|
|
flex-shrink: 0;
|
|
|
border-radius: 20px;
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 pxToVW(102);
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ width: pxToVW(544);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: pxToVH(229);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #000;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 40px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: normal;
|
|
|
+ text-transform: capitalize;
|
|
|
+ margin-bottom: pxToVH(50);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sumary-title {
|
|
|
+ color: #333;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 20px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: normal;
|
|
|
+ text-transform: capitalize;
|
|
|
+ margin-bottom: pxToVH(8);
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-form-item) {
|
|
|
+ --el-fill-color-blank: #f6f4f4;
|
|
|
+ .el-input {
|
|
|
+ height: pxToVH(64);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: pxToVH(30);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .remember-password {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: pxToVH(24);
|
|
|
+
|
|
|
+ .remember-text {
|
|
|
+ display: block;
|
|
|
+ color: #1a1a1a;
|
|
|
+ font-feature-settings: 'liga' off, 'clig' off;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 14px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px; /* 157.143% */
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ text-transform: capitalize;
|
|
|
+ margin-left: pxToVW(8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-btn {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 54px;
|
|
|
+ padding: 10px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f67f20;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 20px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-img {
|
|
|
+ width: calc(100% - pxToVW(763));
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
