From 1d564e785eb67c5b389e6dc4293e5100587251dd Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 26 六月 2024 09:13:56 +0800
Subject: [PATCH] feat: 构建水务平台页面
---
customer_list/ch/static/images/wave/AsideIcon.png | 0
src/views/project/ch/home/component/waterRight/top.vue | 192 ++++++++++++++++++++++++
src/views/project/ch/home/component/waterRight/header.vue | 34 ++++
src/views/project/ch/home/Home.vue | 121 ++++++++++++++
customer_list/ch/static/images/wave/PlugIn.png | 0
src/views/project/ch/home/component/waterLeftAside/asideTitle.vue | 126 +++++++++++++++
customer_list/ch/static/images/wave/Glm.jpg | 0
customer_list/ch/static/images/wave/More.png | 0
8 files changed, 468 insertions(+), 5 deletions(-)
diff --git a/customer_list/ch/static/images/wave/AsideIcon.png b/customer_list/ch/static/images/wave/AsideIcon.png
new file mode 100644
index 0000000..8eb2856
--- /dev/null
+++ b/customer_list/ch/static/images/wave/AsideIcon.png
Binary files differ
diff --git a/customer_list/ch/static/images/wave/Glm.jpg b/customer_list/ch/static/images/wave/Glm.jpg
new file mode 100644
index 0000000..672fffc
--- /dev/null
+++ b/customer_list/ch/static/images/wave/Glm.jpg
Binary files differ
diff --git a/customer_list/ch/static/images/wave/More.png b/customer_list/ch/static/images/wave/More.png
new file mode 100644
index 0000000..3fe6308
--- /dev/null
+++ b/customer_list/ch/static/images/wave/More.png
Binary files differ
diff --git a/customer_list/ch/static/images/wave/PlugIn.png b/customer_list/ch/static/images/wave/PlugIn.png
new file mode 100644
index 0000000..d6be6d5
--- /dev/null
+++ b/customer_list/ch/static/images/wave/PlugIn.png
Binary files differ
diff --git a/src/views/project/ch/home/Home.vue b/src/views/project/ch/home/Home.vue
index d808b2a..dfc939e 100644
--- a/src/views/project/ch/home/Home.vue
+++ b/src/views/project/ch/home/Home.vue
@@ -1,9 +1,120 @@
<template>
- <div class="">
-
-
+ <div class="pc-chat_room">
+ <div class="flex h100 w100">
+ <div class="pc-chat_aside">
+ <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"></div>
+ <div class="aside_bottom">
+ <asideTitle />
+ </div>
+ </div>
+ <div class="pc-chat_right">
+ <waterHeader />
+ <div class="w100 h100 overflow-auto">
+ <div class="pc-chatRoom w100 h100">
+ <div class="homeBox w100 h100">
+ <waterTop />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
-<script setup lang="ts"></script>
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import asideTitle from './component/waterLeftAside/asideTitle.vue';
+import waterHeader from './component/waterRight/header.vue';
+import waterTop from './component/waterRight/top.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;
+}
+.pc-chat_right {
+ padding: 0;
+ background: linear-gradient(180deg, #f5f4f6 0, #f2f2f6 25%, #e9edf7);
+ position: relative;
+ margin: 6px;
+ border-radius: 10px;
+ display: block;
+ flex: 1;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ overflow: auto;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ .pc-chatRoom {
+ box-sizing: border-box;
+ padding-right: 0px;
+ position: relative;
+ font-weight: 400;
+ background-color: #f2f4f8;
+ transition: padding-right 0.25s;
+ .homeBox {
+ padding: 42px 40px 0;
+ font-size: 14px;
+ line-height: 18px;
+ box-sizing: border-box;
+ }
+ }
+}
+</style>
diff --git a/src/views/project/ch/home/component/waterLeftAside/asideTitle.vue b/src/views/project/ch/home/component/waterLeftAside/asideTitle.vue
new file mode 100644
index 0000000..10345c6
--- /dev/null
+++ b/src/views/project/ch/home/component/waterLeftAside/asideTitle.vue
@@ -0,0 +1,126 @@
+<template>
+ <div class="w100 h100">
+ <div class="aisde-title">
+ <div class="flex items-center set-li" v-for="(item, index) in state.asideTitleList" :key="index">
+ <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_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>
+ </div>
+ <div class="offices">
+ <div class="officeText">
+ <img :src="'/static/images/wave/Waveform.png'" 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">Office 鏅鸿兘鍔╂墜</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+let state = reactive({
+ asideTitleList: [
+ {
+ id: '1',
+ icon: '/static/images/wave/AsideIcon.png',
+ title: '搴旂敤鍦烘櫙',
+ },
+ {
+ id: '2',
+ icon: '/static/images/wave/AsideIcon.png',
+ title: '甯姪涓績',
+ },
+ {
+ id: '3',
+ icon: '/static/images/wave/AsideIcon.png',
+ title: '涓汉璁剧疆',
+ },
+ {
+ id: '4',
+ icon: '/static/images/wave/AsideIcon.png',
+ title: '鍏充簬姘村姟AI',
+ },
+ ],
+});
+</script>
+<style scoped lang="scss">
+.aisde-title {
+ padding-top: 18px;
+ margin-left: 16px;
+ margin-right: 22px;
+ border-top: 1px solid #383838;
+ margin-bottom: 22px;
+}
+.set-li {
+ height: 30px;
+ margin-bottom: 4px;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ cursor: pointer;
+ &:hover {
+ width: 214px;
+ height: 30px;
+ background-color: #3b3d40;
+ border-radius: 6px;
+ }
+}
+.user_login {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0 20px 10px;
+ position: relative;
+}
+.set-login {
+ margin-top: 14px;
+ width: 100%;
+ height: 36px;
+ background: #1c86ff;
+ -webkit-box-shadow: 0 2px 6px 0 rgba(8, 101, 207, 0.2), inset 0 0 7px 0 hsla(0, 0%, 100%, 0.5);
+ box-shadow: 0 2px 6px 0 rgba(8, 101, 207, 0.2), inset 0 0 7px 0 hsla(0, 0%, 100%, 0.5);
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: 500;
+ color: #eee;
+ border-radius: 8px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ -webkit-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ transition: all 0.3s;
+}
+.offices {
+ padding: 0 20px;
+ cursor: pointer;
+ text-decoration: none;
+ position: relative;
+}
+.officeText {
+ width: 100%;
+ height: 36px;
+ background: #1c2d57;
+ border-radius: 8px;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+</style>
diff --git a/src/views/project/ch/home/component/waterRight/header.vue b/src/views/project/ch/home/component/waterRight/header.vue
new file mode 100644
index 0000000..9567c02
--- /dev/null
+++ b/src/views/project/ch/home/component/waterRight/header.vue
@@ -0,0 +1,34 @@
+<template>
+ <div class="top_text">
+ <div class="notice">
+ <el-badge :value="12">
+ <el-button link size="small" icon="ele-Message" class="set-notice">绯荤粺鍏憡</el-button>
+ </el-badge>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped lang="scss">
+.top_text {
+ width: 100%;
+ height: 42px;
+ background-color: #fff;
+ position: absolute;
+ top: 0;
+ z-index: 10;
+}
+.notice {
+ position: fixed;
+ top: 18px;
+ right: 30px;
+ z-index: 12;
+ .set-notice {
+ font-size: 12px;
+ font-weight: 400;
+ letter-spacing: 0;
+ line-height: 17.38px;
+ color: #9598b3;
+ }
+}
+</style>
diff --git a/src/views/project/ch/home/component/waterRight/top.vue b/src/views/project/ch/home/component/waterRight/top.vue
new file mode 100644
index 0000000..d923391
--- /dev/null
+++ b/src/views/project/ch/home/component/waterRight/top.vue
@@ -0,0 +1,192 @@
+<template>
+ <div class="flex items-center flex-column mt-20">
+ <div class="flex items-center">
+ <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
+ <p class="set-waterTitle"><strong>姘村姟 AI</strong>姹囪仛鍏ㄧ悆 AI 绮鹃珦</p>
+ </div>
+ <div class="flex items-center pc-roleList">
+ <div v-for="(item, index) in state.roleList" :key="index" class="flex items-center pl-6" @click="handleClick(item)">
+ <el-tooltip :content="item.content" placement="top" effect="light" popper-class="my-pop">
+ <div class="modelItem cursor-pointer flex items-center" :class="{ modelItemActive: item.id === state.activeRole }">
+ <img :src="item.icon" alt="icon" class="set-icon box-border" />
+ <span>{{ item.title }}</span>
+ </div>
+ </el-tooltip>
+ </div>
+ <div class="flex items-center cursor-pointer pl-5">
+ <div class="modelItem cursor-pointer flex items-center">
+ <img src="/static/images/wave/More.png" alt="icon" class="set-icon box-border" />
+ <span>鏇村</span>
+ </div>
+ </div>
+ </div>
+ <div class="playInput hl_input">
+ <div class="assembly flex">
+ <el-button title="鎻掍欢鑿滃崟" class="label flex items-center cursor-pointer" link>
+ <img src="/static/images/wave/PlugIn.png" class="set-icon box-border" />
+ </el-button>
+ </div>
+ <div class="set-input">
+ <el-input v-model="state.inputAnswer" placeholder="鍦ㄨ繖閲岃緭鍏ユ偍鐨勯棶棰樺紑濮嬪拰AI瀵硅瘽" class="set-inputAnswer" />
+ </div>
+ <div class="h100 flex items-center">
+ <div class="upload_img">
+ <div class="cursor-pointer flex items-center">
+ <el-button title="AI鐪嬪浘" class="set-button" link>
+ <el-icon style="font-size: 24px !important">
+ <ele-Picture />
+ </el-icon>
+ </el-button>
+ <el-button title="AI鐪嬪浘" class="set-button" link>
+ <el-icon style="font-size: 24px !important">
+ <ele-Headset />
+ </el-icon>
+ </el-button>
+ <el-button title="AI鐪嬪浘" class="set-button" link>
+ <el-icon style="font-size: 24px !important" color="#409efc">
+ <ele-Position />
+ </el-icon>
+ </el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+let state = reactive({
+ roleList: [
+ {
+ id: 1,
+ icon: '/static/images/wave/Glm.jpg',
+ title: '姘村姟GLM',
+ content: '浣跨敤鏈�涓哄箍娉涚殑鐭ュ悕AI妯″瀷锛屽搷搴旈�熷害蹇紝鏅鸿兘鍖栫▼搴﹂珮锛屾搮闀垮棰嗗煙闂瑙ｅ喅锛屽寘鎷垱浣溿�佺炕璇戙�佸璇鐧剧鐭ヨ瘑銆佹暟瀛﹂棶棰樼瓑銆�',
+ },
+ {
+ id: 2,
+ icon: '/static/images/wave/Glm.jpg',
+ title: '姘村姟-3.5',
+ content:
+ '鐩墠涓氱晫鏈�寮哄ぇ鐨勬ā鍨嬶紝鍦ㄩ渶瑕侀珮绾ф帹鐞嗐�佹繁搴︽寚浠ょ悊瑙ｅ拰鏇村叿鍒涢�犲姏鐨勪换鍔′腑锛岃〃鐜版瘮鍏朵粬妯″瀷鏇村己锛屼緥濡傚鏉傜殑鏂囨湰鍜岄�昏緫鍒嗘瀽銆佸鏉傜殑鏁板闂绛夈��',
+ },
+ {
+ id: 3,
+ icon: '/static/images/wave/Glm.jpg',
+ title: '姘村姟-4.0',
+ content:
+ '鐩墠涓氱晫鏈�寮哄ぇ鐨勬ā鍨嬶紝鍦ㄩ渶瑕侀珮绾ф帹鐞嗐�佹繁搴︽寚浠ょ悊瑙ｅ拰鏇村叿鍒涢�犲姏鐨勪换鍔′腑锛岃〃鐜版瘮鍏朵粬妯″瀷鏇村己锛屼緥濡傚鏉傜殑鏂囨湰鍜岄�昏緫鍒嗘瀽銆佸鏉傜殑鏁板闂绛夈��',
+ },
+ ],
+ activeRole: 0,
+ inputAnswer: '',
+});
+const handleClick = (item) => {
+ state.activeRole = item.id;
+};
+</script>
+<style scoped lang="scss">
+.set-waterTitle {
+ line-height: 24px;
+ font-weight: 500;
+ font-size: 18px;
+ color: #3b4066;
+ vertical-align: middle;
+}
+strong {
+ font-size: 26px;
+ font-weight: 700;
+ margin-right: 12px;
+}
+.layout-logo-medium-img {
+ width: 28px;
+ margin-right: 7px;
+}
+.pc-roleList {
+ margin: 40px 0 26px;
+ position: relative;
+}
+.modelItem {
+ height: 34px;
+ padding: 0 16px;
+ border-radius: 17px;
+ border: 1px solid #00000020;
+ background-color: #f2f4f8;
+ transition: background-color 0.1s, border-color 0.1s, color 0.1s;
+ color: #333;
+ .set-icon {
+ width: 20px;
+ height: 20px;
+ position: relative;
+ }
+ span {
+ margin-left: 8px;
+ font-weight: 500;
+ font-size: 15px;
+ }
+}
+.modelItemActive {
+ background-color: #1c86ff;
+ border-color: #1c86ff;
+ color: #fff;
+}
+.playInput {
+ align-items: flex-start;
+ width: 760px;
+ position: relative;
+ padding: 4px 4px 4px 12px;
+
+ display: flex;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-radius: 22px;
+ border: 1px solid #00000030;
+ -webkit-box-shadow: 0 0 0 1px transparent, 0 3px 16px 0 #dee0f3;
+ box-shadow: 0 0 0 1px transparent, 0 3px 16px 0 #dee0f3;
+ -webkit-transition: border-color 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
+ transition: border-color 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
+ -o-transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+ transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+ transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
+ background-color: #fff;
+ .assembly {
+ position: relative;
+ align-self: flex-end;
+ margin-right: 12px;
+ .label {
+ height: 38px;
+ }
+ }
+ .set-input {
+ position: relative;
+ vertical-align: bottom;
+ font-size: 14px;
+ display: inline-block;
+ width: 100%;
+ .set-inputAnswer {
+ min-height: 36px;
+ height: 36px;
+ padding: 3px 0;
+ line-height: 20px;
+ border: none;
+ background-color: transparent;
+ color: #333;
+ font-size: 15px;
+ }
+ }
+}
+.set-button {
+ :deep(.el-button .is-link) {
+ height: unset !important;
+ }
+}
+</style>
+<style lang="scss">
+.my-pop {
+ max-width: 300px;
+}
+</style>
--
Gitblit v1.9.3