From 166d5c105fff1fc1cf439f20d036faf7f11a32bc Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 26 六月 2024 11:28:06 +0800
Subject: [PATCH] feat: 构建水务AI静态页面
---
src/views/project/ch/home/component/waterRight/top.vue | 137 +++++++++++++++++++++++++--------------------
1 files changed, 75 insertions(+), 62 deletions(-)
diff --git a/src/views/project/ch/home/component/waterRight/top.vue b/src/views/project/ch/home/component/waterRight/top.vue
index d923391..bec69b9 100644
--- a/src/views/project/ch/home/component/waterRight/top.vue
+++ b/src/views/project/ch/home/component/waterRight/top.vue
@@ -1,53 +1,48 @@
<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 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 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 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="imgbox cursor-pointer flex items-center">
+ <el-button title="AI鐪嬪浘" class="cursor-pointer" link style="margin-left: unset">
+ <img src="/static/images/wave/LookImg.png" class="set-img-icon box-border" />
+ </el-button>
+ <el-button title="AI璇煶瀵硅瘽" class="cursor-pointer" link style="margin-left: unset">
+ <img src="/static/images/wave/HeadImg.png" class="set-img-icon box-border" />
+ </el-button>
+
+ <el-button title="AI鐪嬪浘" class="cursor-pointer" link>
+ <div class="send">
+ <img src="/static/images/wave/QueryImg.png" />
+ </div>
+ </el-button>
</div>
</div>
</div>
@@ -59,23 +54,23 @@
let state = reactive({
roleList: [
{
- id: 1,
- icon: '/static/images/wave/Glm.jpg',
- title: '姘村姟GLM',
- content: '浣跨敤鏈�涓哄箍娉涚殑鐭ュ悕AI妯″瀷锛屽搷搴旈�熷害蹇紝鏅鸿兘鍖栫▼搴﹂珮锛屾搮闀垮棰嗗煙闂瑙ｅ喅锛屽寘鎷垱浣溿�佺炕璇戙�佸璇鐧剧鐭ヨ瘑銆佹暟瀛﹂棶棰樼瓑銆�',
+ 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: 2,
+ Icon: '/static/images/wave/Glm.jpg',
+ Title: '姘村姟-3.5',
+ Content:
'鐩墠涓氱晫鏈�寮哄ぇ鐨勬ā鍨嬶紝鍦ㄩ渶瑕侀珮绾ф帹鐞嗐�佹繁搴︽寚浠ょ悊瑙ｅ拰鏇村叿鍒涢�犲姏鐨勪换鍔′腑锛岃〃鐜版瘮鍏朵粬妯″瀷鏇村己锛屼緥濡傚鏉傜殑鏂囨湰鍜岄�昏緫鍒嗘瀽銆佸鏉傜殑鏁板闂绛夈��',
},
{
- id: 3,
- icon: '/static/images/wave/Glm.jpg',
- title: '姘村姟-4.0',
- content:
+ ID: 3,
+ Icon: '/static/images/wave/Glm.jpg',
+ Title: '姘村姟-4.0',
+ Content:
'鐩墠涓氱晫鏈�寮哄ぇ鐨勬ā鍨嬶紝鍦ㄩ渶瑕侀珮绾ф帹鐞嗐�佹繁搴︽寚浠ょ悊瑙ｅ拰鏇村叿鍒涢�犲姏鐨勪换鍔′腑锛岃〃鐜版瘮鍏朵粬妯″瀷鏇村己锛屼緥濡傚鏉傜殑鏂囨湰鍜岄�昏緫鍒嗘瀽銆佸鏉傜殑鏁板闂绛夈��',
},
],
@@ -177,11 +172,29 @@
color: #333;
font-size: 15px;
}
+ :deep(.el-input__wrapper) {
+ box-shadow: unset;
+ }
}
-}
-.set-button {
- :deep(.el-button .is-link) {
- height: unset !important;
+ .upload_img {
+ .imgbox {
+ height: 38px;
+ .set-img-icon {
+ width: 38px;
+ height: 38px;
+ border-radius: 5px;
+ transition: background-color 0.1s ease-in-out;
+ }
+ .send {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background-color: #2c1e1d;
+ img {
+ margin: 4px 0 0 -2px;
+ }
+ }
+ }
}
}
</style>
--
Gitblit v1.9.3