From d04d813e078f359bf6a12b57fa0f1362226c97e3 Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期五, 15 十一月 2024 13:15:55 +0800 Subject: [PATCH] 修改新手步骤条位置错位的问题 --- src/views/project/ch/home/Scenario.vue | 79 +++++++++++++++++++++++++++++++++------ 1 files changed, 67 insertions(+), 12 deletions(-) diff --git a/src/views/project/ch/home/Scenario.vue b/src/views/project/ch/home/Scenario.vue index 7da32b3..53529f8 100644 --- a/src/views/project/ch/home/Scenario.vue +++ b/src/views/project/ch/home/Scenario.vue @@ -1,36 +1,46 @@ <template> <!-- 搴旂敤鍦烘櫙 --> - <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-hidden pt-[42px] pr-[32px] pb-[50px] pl-[32px]"> + <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-auto pr-[32px] pb-[50px] pl-[32px] pt-[42px]"> <div class="set-body"> - <div class="productivity recently"> + <!-- <div class="productivity recently"> <p class="mb-[24px] flex items-center"> <el-icon color="#409eff" :size="20" class="mr-2"><Clock /></el-icon> <span>鏈�杩戜娇鐢�</span> </p> <div class="flex flex-wrap items-center"> - <div class="list_app" v-for="item in state.recentlyList" :key="item.ID"> + <div class="list_app" v-for="item in state.recentlyList" :key="item.ID" > <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span> </div> </div> - </div> - <div class="productivity"> + </div> --> + <div + class="productivity" + v-for="product in state.productivityList" + :key="product.section_id" + v-show="state.productivityList && state.productivityList.length > 0" + > <div class="mb-[24px]"> - <span class="productivity-span"><i></i>鐢熶骇鍔�</span> + <span class="productivity-span"><i></i>{{ product.section_name }}</span> </div> <div class="flex flex-wrap items-center"> - <div class="list_app" v-for="item in state.recentlyList" :key="item.ID"> - <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> - <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span> + <div class="list_app" @click="changeApp(product.section_id, product)"> + <img :src="product.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> + <span class="text-[14px] text-[#333f4e]">{{ product.section_name }}</span> </div> </div> </div> + <el-empty description="鏆傛棤鏁版嵁" v-show="state.productivityList.length === 0" /> </div> </div> </template> <script setup lang="ts"> -import { reactive } from 'vue'; +import { onMounted, reactive } from 'vue'; +import { useRoute } from 'vue-router'; +import { getSectionByIdList } from '/@/api/ai/chat'; +import router from '/@/router'; +const route = useRoute(); let state = reactive({ recentlyList: [ { @@ -43,7 +53,34 @@ Name: '宸ヤ綔鍐呭', Icon: '/static/images/scene/scene_2.png', }, - ], + ], //鏈�杩戜娇鐢� + productivityList: [], //閫氱敤鐨勫満鏅� + scenarioID: null, +}); +//鍒囨崲鍒板簲鐢ㄥ満鏅鎯呯殑浜嬩欢 +const changeApp = (section_id, item: any) => { + if (section_id === 'office_summarize') { + router.push({ + name: 'ScenarioDetails', + query: { + ID: section_id, + Name: item.section_name, + Title: item.section_title, + }, + }); + } +}; +const getSectionByList = async () => { + const res = await getSectionByIdList({ section_a_id: state.scenarioID }); + const iconList = ['/static/images/scene/scene_1.png', '/static/images/scene/scene_2.png', '/static/images/scene/scene_3.png']; + res.sections.forEach((child: any) => { + child.Icon = iconList[Math.floor(Math.random() * 3)]; + }); + state.productivityList = res.sections; +}; +onMounted(() => { + state.scenarioID = route.query.ID; + getSectionByList(); }); </script> <style scoped lang="scss"> @@ -72,7 +109,7 @@ } } .list_app { - width: 140px; + width: 180px; display: flex; align-items: center; border-radius: 8px; @@ -83,6 +120,24 @@ cursor: pointer; position: relative; background-color: #fff; + &:hover { + border: 1px solid #1c86ff; + } + } + .productivity-span { + font-size: 14px; + color: #081735; + line-height: 20px; + display: flex; + align-items: center; + i { + display: block; + width: 4px; + height: 14px; + background: #1c86ff; + border-radius: 0 100px 100px 0; + margin-right: 10px; + } } } .recently { -- Gitblit v1.9.3