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/views/project/ch/home/component/waterRight/top.vue | 3
/dev/null | 80 --------------------
src/layout/component/sidebar/Sidebar.vue | 2
src/views/project/ch/home/Home.vue | 8 --
src/layout/component/sidebar/waterLeftAside/asideTitle.vue | 140 ++++++++++++++++++++++++++++++++--
5 files changed, 132 insertions(+), 101 deletions(-)
diff --git a/src/layout/component/SideBar.vue b/src/layout/component/SideBar.vue
deleted file mode 100644
index 49ec326..0000000
--- a/src/layout/component/SideBar.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
- <div class="pc-chat_aside flex-0">
- <div class="aside_top">
- <div class="logo">
- <div class="flex items-center">
- <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
- <span class="font-extrabold text-xl text-white tracking-wide">姘村姟 AI骞冲彴</span>
- </div>
- </div>
- </div>
- <div class="aside_center">
- <asideNew />
- </div>
- <div class="aside_bottom">
- <asideTitle />
- </div>
- </div>
-</template>
-
-<script setup lang="ts">
-import asideNew from './waterLeftAside/asideNew.vue';
-import asideTitle from './waterLeftAside/asideTitle.vue';
-</script>
-
-<style scoped lang="scss">
-.pc-chat_room {
- width: 100vw;
- height: 100vh;
- margin: 0;
- padding: 0;
- overflow: hidden;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: #1c1e1d;
- font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-.pc-chat_aside {
- width: 252px !important;
- height: 100%;
- box-sizing: border-box;
- background-color: #1b1d1c;
- overflow: visible;
- -webkit-transition: width 0.1s ease-in;
- -o-transition: width 0.1s ease-in;
- transition: width 0.1s ease-in;
- position: relative;
- display: flex;
- flex-direction: column;
-}
-.aside_top {
- box-sizing: border-box;
- position: relative;
- width: 100%;
- padding: 18px;
-}
-.layout-logo-medium-img {
- width: 28px;
- margin-right: 7px;
-}
-.aside_center {
- flex: 1;
- min-height: 0;
- -webkit-transition: height 0.3s ease-in;
- -o-transition: height 0.3s ease-in;
- transition: height 0.3s ease-in;
-}
-.aside_bottom {
- position: relative;
- width: 100%;
- padding-bottom: 20px;
- -webkit-transition: height 0.3s ease-in;
- -o-transition: height 0.3s ease-in;
- transition: height 0.3s ease-in;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-</style>
diff --git a/src/layout/component/sidebar/Sidebar.vue b/src/layout/component/sidebar/Sidebar.vue
index 49ec326..690bdf5 100644
--- a/src/layout/component/sidebar/Sidebar.vue
+++ b/src/layout/component/sidebar/Sidebar.vue
@@ -4,7 +4,7 @@
<div class="logo">
<div class="flex items-center">
<img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
- <span class="font-extrabold text-xl text-white tracking-wide">姘村姟 AI骞冲彴</span>
+ <span class="font-extrabold text-xl text-white tracking-wide"> WI 姘村姟鏅鸿兘骞冲彴</span>
</div>
</div>
</div>
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>
diff --git a/src/views/project/ch/home/Home.vue b/src/views/project/ch/home/Home.vue
index 2422d67..54b6a77 100644
--- a/src/views/project/ch/home/Home.vue
+++ b/src/views/project/ch/home/Home.vue
@@ -32,15 +32,8 @@
</script>
<style scoped lang="scss">
.pc-chat_room {
-
-
margin: 0;
padding: 0;
- // overflow: hidden;
- // -webkit-box-sizing: border-box;
- // box-sizing: border-box;
- // background-color: #1c1e1d;
- // font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.pc-chat_aside {
width: 252px !important;
@@ -104,7 +97,6 @@
background-color: #f2f4f8;
transition: padding-right 0.25s;
.homeBox {
-
font-size: 14px;
line-height: 18px;
overflow-y: auto;
diff --git a/src/views/project/ch/home/component/waterRight/top.vue b/src/views/project/ch/home/component/waterRight/top.vue
index bf73d7e..be9499e 100644
--- a/src/views/project/ch/home/component/waterRight/top.vue
+++ b/src/views/project/ch/home/component/waterRight/top.vue
@@ -31,11 +31,10 @@
const inputValue = ref('');
const sendClick = () => {
- if(!inputValue.value) return;
+ if (!inputValue.value) return;
activeChatRoom.value.title = inputValue.value;
router.push({
name: 'AskAnswer',
-
});
};
let state = reactive({
--
Gitblit v1.9.3