From ea8c29b59f946d37964612aba8e6d48b3adbec4d Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期六, 29 六月 2024 16:22:28 +0800
Subject: [PATCH] feat: 添加登录注册页面
---
src/layout/component/sidebar/waterLeftAside/asideTitle.vue | 140 +++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 130 insertions(+), 10 deletions(-)
diff --git a/src/layout/component/sidebar/waterLeftAside/asideTitle.vue b/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
index 8dde9bb..d0f89a9 100644
--- a/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
+++ b/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
@@ -14,7 +14,7 @@
</div>
<div class="user_login">
<p class="text-white font-medium text-sm text-center">鎮ㄦ洿濂界殑AI鍔╂墜锛�</p>
- <div class="set-login">
+ <div class="set-login" @click="login">
<span class="text-stone-100 font-medium text-sm text-center">鐧诲綍 / 娉ㄥ唽</span>
</div>
</div>
@@ -25,26 +25,45 @@
</div>
</div>
</div>
+ <div class="pc-login" v-show="state.isShowLogin">
+ <div class="login_box">
+ <div class="sign_in">
+ <i class="ywicon icon-guanbi closes" @click="handleClose"></i>
+ <h1><span class="ml-[33px]">鐧诲綍 ChatAI</span></h1>
+ <el-form ref="loginFormRef" :model="state.loginForm" :rules="loginRules" class="demo-ruleForm" size="large">
+ <el-form-item label="璐﹀彿" prop="account">
+ <el-input v-model="state.loginForm.account" clearable />
+ </el-form-item>
+ <el-form-item label="瀵嗙爜" prop="pwd">
+ <el-input v-model="state.loginForm.pwd" type="password" autocomplete="off" clearable />
+ </el-form-item>
+ </el-form>
+ <div class="set-pwd">蹇樿瀵嗙爜 ?</div>
+ <div class="mt-[115px]">
+ <el-button type="primary" @click="onSubmit" class="set-login_btn">鐧诲綍</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
-import { gotoRoute } from '/@/utils/route';
import router from '/@/router';
+import { gotoRoute } from '/@/utils/route';
let state = reactive({
asideTitleList: [
{
id: 1,
icon: '/static/images/wave/AsideIcon.png',
title: '搴旂敤鍦烘櫙',
- routerName:'Scenario',
+ routerName: 'Scenario',
},
{
id: 2,
icon: '/static/images/wave/AsideIcon.png',
title: '甯姪涓績',
// routerName:'Scenario',
-
},
{
id: 3,
@@ -55,17 +74,31 @@
id: 4,
icon: '/static/images/wave/AsideIcon.png',
title: '鍏充簬姘村姟AI',
- routerName:'AboutUs',
-
+ routerName: 'AboutUs',
},
],
+ isShowLogin: false,
+ loginForm: {
+ account: '',
+ pwd: '',
+ },
+});
+const loginRules = reactive({
+ account: [{ required: true, message: '蹇呭～椤�', trigger: 'blur' }],
+ pwd: [{ required: true, message: '蹇呭～椤�', trigger: 'blur' }],
});
const handleClick = (item) => {
- gotoRoute({name:item.routerName});
-
+ gotoRoute({ name: item.routerName });
};
-
-
+//鐧诲綍
+const login = () => {
+ state.isShowLogin = true;
+};
+const handleClose = () => {
+ state.isShowLogin = false;
+};
+//鐧诲綍
+const onSubmit = () => {};
const currentRoute = router.currentRoute;
</script>
<style scoped lang="scss">
@@ -150,4 +183,91 @@
-ms-flex-pack: center;
justify-content: center;
}
+.pc-login {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 2000;
+ background-color: rgba(0, 0, 0, 0.6);
+ .login_box {
+ position: relative;
+ width: 450px;
+ height: 550px;
+ margin: 15vh auto;
+ .sign_in {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 12px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: #fff;
+ -webkit-box-shadow: 0 0 16px 0 rgba(20, 29, 53, 0.21);
+ box-shadow: 0 0 16px 0 rgba(20, 29, 53, 0.21);
+ .closes {
+ position: absolute;
+ top: -28px;
+ right: -38px;
+ font-size: 30px;
+ cursor: pointer;
+ color: #eee;
+ -o-transition: color 0.1s;
+ transition: color 0.1s;
+ }
+ h1 {
+ box-sizing: content-box;
+ width: 100%;
+ margin-top: 25px;
+ font-size: 30px;
+ font-weight: 500;
+ color: #1c153a;
+ text-align: left !important;
+ margin-bottom: 105px;
+ }
+ .demo-ruleForm {
+ :deep(.el-input__wrapper) {
+ position: relative;
+ margin-bottom: 12px;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 346px;
+ // height: 44px;
+ background-color: #fff;
+ border-radius: 5px;
+ }
+ }
+ .set-pwd {
+ text-align: right;
+ font-size: 14px;
+ font-weight: 300;
+ color: #999;
+ width: 100%;
+ padding: 0px 32px;
+ }
+ .set-login_btn {
+ width: 366px;
+ height: 44px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #fff;
+ background: #0a58ed;
+ border-radius: 12px;
+ -webkit-box-shadow: 4px 6px 15px rgba(10, 88, 237, 0.2);
+ box-shadow: 4px 6px 15px rgba(10, 88, 237, 0.2);
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.3