消息使用特定組件解析

gerson

2024-06-30 839461b04197f781ff8627d75824dacbbb76230f

 src/views/project/ch/home/component/waterRight/bottom.vue

@@ -5,7 +5,7 @@
            <span>应用场景</span>
         </div>
         <div class="cursor-pointer">
            <el-button link class="changeBatch"
            <el-button link class="changeBatch" @click="lookMore"
               >查看更多
               <el-icon>
                  <ArrowRight />
@@ -15,7 +15,13 @@
      </div>

      <div class="main">
         <div class="main_item flex cursor-pointer" v-for="(item, index) in state.exampleContent" :key="index">
         <div
            class="main_item flex cursor-pointer"
            v-for="(item, index) in state.applicationScenarios"
            :key="item.ID"
            :class="{ main_item_active: item.ID === state.scenariosIndex }"
            @click="changeScenarios(item)"
         >
            <div :class="['iconfont icon-' + item.Icon]"></div>

            <div class="right">
@@ -29,40 +35,51 @@

<script setup lang="ts">
import { reactive } from 'vue';
import router from '/@/router';
let state = reactive({
   exampleContent: [
   applicationScenarios: [
      {
         ID: 1,
         Icon: 'biaodan',
         Title: '解读李四的反应',
         Title: '行业知识库',
         Content: '张三打了李四一巴掌,李四对张三说:"你是不是没吃饭",李四说这句话含义是?',
      },
      {
         ID: 2,
         Icon: 'putong',
         Title: '解释努力与内卷的区别',
         Title: '生产调度',
         Content: '怎么解释努力和内卷的区别?',
      },
      {
         ID: 3,
         Icon: 'zhongduancanshuchaxun',
         Title: '其他问题',
         Title: '水产生产',
         Content: '请搜索你想知道的问题',
      },
      {
         ID: 4,
         Icon: 'tuichuquanping',
         Title: '给宝宝取有文化内涵的名字',
         Title: '管网运行',
         Content: '请以诗经中的典故给男宝宝取名，姓顾，名字要求3个字，给5个名字供我选择。',
      },
   ],
   scenariosIndex: 0,
});
const changeScenarios = (item) => {
   state.scenariosIndex = item.ID;
};
// 查看更多
const lookMore = () => {
   router.push({
      name: 'Scenario',
   });
};
</script>
<style scoped lang="scss">
.pc-scenes {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin-top: 40px;
   margin-top: 24px;
   width: 760px;
   padding: 0;
   font-size: 14px;
@@ -166,6 +183,14 @@
            }
         }
      }
      &_item_active {
         background-color: #ebeef3;
         .right {
            h4 {
               color: #007aff;
            }
         }
      }
   }
}
</style>