From 87bce04d7cdf5ca427757071e7cc3b0847b64dfc Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期一, 01 七月 2024 11:37:25 +0800
Subject: [PATCH] question 传 id
---
src/layout/component/sidebar/waterLeftAside/asideTitle.vue | 259 +++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 249 insertions(+), 10 deletions(-)
diff --git a/src/layout/component/sidebar/waterLeftAside/asideTitle.vue b/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
index f20468b..d6dea71 100644
--- a/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
+++ b/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
@@ -5,17 +5,31 @@
class="flex items-center set-li"
v-for="(item, index) in state.asideTitleList"
:key="index"
- @click="handleClick(item.id)"
- :class="{ 'set-li-active': state.currentActive === item.id }"
+ @click="handleClick(item)"
+ :class="{ 'set-li-active': item.routerName === currentRoute.name }"
>
<img :src="item.icon" alt="" class="pl-2.5 pr-2.5 w-4 h-4" style="box-sizing: content-box" />
<span class="font-medium text-sm text-white tracking-wide">{{ item.title }}</span>
</div>
</div>
+ <div class="user_text">
+ <div class="user_head">
+ <span
+ ><span
+ ><span class="user-head">T</span><span class="identifying"><!----></span></span
+ ><span class="user_name"> tc </span></span
+ ><span
+ ><span><i class="ywicon icon-fold text-white" @click="showExitLogin"></i></span
+ ></span>
+ </div>
+ <!-- <div class="pop_up actived" v-show="state.isShowExitLogin">
+ <div class="exit" @click="handleExitClose"><i class="ywicon icon-tuichu"></i> 閫�鍑虹櫥褰�</div>
+ </div> -->
+ </div>
<div class="user_login">
<p class="text-white font-medium text-sm text-center">鎮ㄦ洿濂界殑AI鍔╂墜锛�</p>
- <div class="set-login">
- <span class="text-stone-100 font-medium text-sm text-center">鐧诲綍 / 娉ㄥ唽</span>
+ <div class="set-login" @click="login">
+ <span class="text-stone-100 font-medium text-sm text-center">{{ state.isShowLogin ? '鐧诲綍 / 娉ㄥ唽' : '浼氬憳鐧诲綍' }}</span>
</div>
</div>
<div class="offices">
@@ -25,10 +39,31 @@
</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 router from '/@/router';
import { gotoRoute } from '/@/utils/route';
let state = reactive({
asideTitleList: [
@@ -36,11 +71,13 @@
id: 1,
icon: '/static/images/wave/AsideIcon.png',
title: '搴旂敤鍦烘櫙',
+ routerName: 'Scenario',
},
{
id: 2,
icon: '/static/images/wave/AsideIcon.png',
title: '甯姪涓績',
+ // routerName:'Scenario',
},
{
id: 3,
@@ -51,15 +88,41 @@
id: 4,
icon: '/static/images/wave/AsideIcon.png',
title: '鍏充簬姘村姟AI',
+ routerName: 'AboutUs',
},
],
- currentActive: 0,
+ isShowLogin: false,
+ isShowExitLogin: false,
+ loginForm: {
+ account: '',
+ pwd: '',
+ },
});
-const handleClick = (id) => {
- state.currentActive = id;
- if (id == 1) {
- gotoRoute({ name: 'Scenario' });
- }
+const loginRules = reactive({
+ account: [{ required: true, message: '蹇呭～椤�', trigger: 'blur' }],
+ pwd: [{ required: true, message: '蹇呭～椤�', trigger: 'blur' }],
+});
+const handleClick = (item) => {
+ gotoRoute({ name: item.routerName });
+};
+//鐧诲綍
+const login = () => {
+ state.isShowLogin = true;
+};
+const handleClose = () => {
+ state.isShowLogin = false;
+};
+//鐧诲綍
+const onSubmit = () => {};
+const currentRoute = router.currentRoute;
+//鏄惁鏄剧ず閫�鍑虹櫥褰曞脊绐�
+const showExitLogin = () => {
+ state.isShowExitLogin = true;
+};
+//鍏抽棴閫�鍑虹櫥褰曞脊绐�
+const handleExitClose = () => {
+ state.isShowExitLogin = false;
+ state.isShowLogin = false;
};
</script>
<style scoped lang="scss">
@@ -90,6 +153,95 @@
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ }
+}
+.user_text {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 20px 10px;
+ position: relative;
+ .user_head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+ span:first-child {
+ display: flex;
+ align-items: center;
+ span:first-child {
+ position: relative;
+ .user-head {
+ margin-right: 6px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #1d86ff;
+ font-size: 12px;
+ color: #fff;
+ }
+ .identifying {
+ position: absolute;
+ left: 17px;
+ top: -12px;
+ color: #fff;
+ display: flex;
+ }
+ }
+ .user_name {
+ position: relative;
+ width: 145px;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ font-weight: 700;
+ letter-spacing: 0;
+ line-height: 23.17px;
+ color: #fff;
+ white-space: nowrap;
+ }
+ }
+ span:last-child {
+ margin-right: 21px;
+ cursor: pointer;
+ span {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 30px;
+ height: 30px;
+ border: 1px solid #414141;
+ border-radius: 50%;
+ }
+ }
+ }
+ .pop_up {
+ position: absolute;
+ top: -60px;
+ left: 5px;
+ width: 240px;
+ min-height: 47px;
+ opacity: 1;
+ border-radius: 15px;
+ background: #1f1f1f;
+ border: 1px solid #737373;
+ .exit {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20.27px;
+ color: #b9b9b9;
+ margin-top: 17px;
+ margin-left: 24px;
+ cursor: pointer;
+ padding-bottom: 10px;
+ }
+ }
+ .actived {
+ top: -60px !important;
}
}
.user_login {
@@ -144,4 +296,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