yangyin
2024-06-27 729f1c526d3fb35c22f24f7516a9c62fc115b104
src/views/project/ch/home/Scenario.vue
@@ -1,6 +1,6 @@
<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-hidden pr-[32px] pb-[50px] pl-[32px]">
      <div class="set-body">
         <div class="productivity recently">
            <p class="mb-[24px] flex items-center">
@@ -16,10 +16,32 @@
         </div>
         <div class="productivity">
            <div class="mb-[24px]">
               <span class="productivity-span"><i></i>生产力</span>
               <span class="productivity-span"><i></i>通用的场景</span>
            </div>
            <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.productivityList" :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 class="mb-[24px]">
               <span class="productivity-span"><i></i>水务应用场景</span>
            </div>
            <div class="flex flex-wrap items-center">
               <div class="list_app" v-for="item in state.waterApplicationList" :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 class="mb-[24px]">
               <span class="productivity-span"><i></i>辅助学习</span>
            </div>
            <div class="flex flex-wrap items-center">
               <div class="list_app" v-for="item in state.studyList" :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>
@@ -41,6 +63,82 @@
      {
         ID: 2,
         Name: '工作内容',
         Icon: '/static/images/scene/scene_2.png',
      },
   ], //最近使用
   productivityList: [
      {
         ID: 1,
         Name: '知识库',
         Icon: '/static/images/scene/scene_1.png',
      },
      {
         ID: 2,
         Name: '文本优化',
         Icon: '/static/images/scene/scene_2.png',
      },
      {
         ID: 3,
         Name: '知识库',
         Icon: '/static/images/scene/scene_3.png',
      },
      {
         ID: 4,
         Name: '常规的应用',
         Icon: '/static/images/scene/scene_2.png',
      },
      {
         ID: 5,
         Name: '文生文',
         Icon: '/static/images/scene/scene_3.png',
      },
      {
         ID: 6,
         Name: '合同模板',
         Icon: '/static/images/scene/scene_2.png',
      },
      {
         ID: 7,
         Name: '直播带货',
         Icon: '/static/images/scene/scene_3.png',
      },
      {
         ID: 8,
         Name: '新媒体文案',
         Icon: '/static/images/scene/scene_2.png',
      },
   ], //通用的场景
   waterApplicationList: [
      {
         ID: 1,
         Name: '水厂生产',
         Icon: '/static/images/scene/scene_1.png',
      },
      {
         ID: 2,
         Name: '管网监测',
         Icon: '/static/images/scene/scene_2.png',
      },
      {
         ID: 3,
         Name: '管网运行',
         Icon: '/static/images/scene/scene_3.png',
      },
      {
         ID: 4,
         Name: '产销差',
         Icon: '/static/images/scene/scene_2.png',
      },
   ],
   studyList: [
      {
         ID: 1,
         Name: '论文助手',
         Icon: '/static/images/scene/scene_1.png',
      },
      {
         ID: 2,
         Name: '其他',
         Icon: '/static/images/scene/scene_2.png',
      },
   ],
@@ -83,6 +181,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 {