feat: 构建水务AI静态页面

yangyin

2024-06-26 166d5c105fff1fc1cf439f20d036faf7f11a32bc

 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>