feat: 新增指令使用模板可以弹窗

yangyin

2024-07-07 68e9ca0b9076a0fe14474cc71b6dc2c420fc5e7f

 src/views/project/ch/home/AboutUs.vue

@@ -4,11 +4,103 @@
         <div class="about-us-box flex flex-col">
            <h1>产品与服务</h1>
            <div class="mt-[12px] w100 flex flex-wrap gap-[12px]">
               <div class="product_item row_layout">
               <div class="product_item row_layout bg-[#5dccef]">
                  <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
                  <div class="content">
                     <h2>智能监控</h2>
                     <p>智能监控系统，可实时监控设备状态，并提供预警、报警、远程控制等功能。</p>
                  </div>
                  <div class="w-[120px] self-end">
                     <el-button class="btn text-[#5dccef]" color="#fff">
                        <i class="ywicon icon-changyonglogo37" style="font-size: 16px !important"></i>
                        <div class="h-[25px]">Android下载</div>
                     </el-button>
                     <el-button class="btn text-[#5dccef]" color="#fff"
                        ><i class="ywicon icon-windows" style="font-size: 16px !important"></i>
                        <div class="h-[25px]">Windows下载</div></el-button
                     >
                     <el-button class="btn text-[#5dccef]" color="#fff">
                        <i class="ywicon icon-jiankong" style="font-size: 16px !important"></i>
                        <div class="h-[25px]">体验网页下载</div>
                     </el-button>
                  </div>
               </div>
               <div class="product_item column_layout bg-[#76d587]">
                  <div class="top">
                     <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
                     <div class="content">
                        <h2>Office 智能助手</h2>
                        <p>AI大语言模型打造的 Office 插件，直接在 Word 和 PPT 中提供文档创作、报告撰写等智能辅助，显著提升办公效率。</p>
                     </div>
                  </div>

                  <div class="w-[120px] ml-auto">
                     <el-button class="btn text-[#76d587]" color="#fff"
                        ><i class="ywicon icon-windows" style="font-size: 16px !important"></i>
                        <div class="h-[25px]">Windows下载</div></el-button
                     >
                  </div>
               </div>
               <div class="product_item column_layout bg-[#ff7564]">
                  <div class="top">
                     <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
                     <div class="content">
                        <h2>Office 智能助手</h2>
                        <p>AI大语言模型打造的 Office 插件，直接在 Word 和 PPT 中提供文档创作、报告撰写等智能辅助，显著提升办公效率。</p>
                     </div>
                  </div>

                  <div class="w-[120px] ml-auto">
                     <el-button class="btn text-[#ff7564]" color="#fff">
                        <i class="ywicon icon-jiankong" style="font-size: 16px !important"></i>
                        <div class="h-[25px]">体验网页下载</div>
                     </el-button>
                  </div>
               </div>
               <div class="product_item row_layout bg-[#ffbb5e]">
                  <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
                  <div class="content">
                     <h2>AI 作业辅导</h2>
                     <p>
                        手机拍照或上传图片就能快速帮助解题或批改作业，有详细的分析和解题过程，包含语文、数学、英语、物理等主要学科，精通从小学到大学的所有知识，妥妥的AI学霸，关注公众号即可使用。
                     </p>
                  </div>
                  <div class="code">
                     <img src="/static/images/wave/code.jpg" class="w-[80px] h-[80px]" />
                     <p>扫码关注微信公众号</p>
                  </div>
               </div>
            </div>
            <div class="us">
               <div class="flex-1 min-w-0">
                  <h2>关于上海义维流体科技有限公司</h2>
                  <p>
                     上海义维流体科技有限公司(简称"义维")，成立于2011年，是一家软件和互联网产品提供商，
                     专注于技公司现已获取软件著作权20余项，其中“工业循环供水泵系统运行状态诊断与节能关键技术”项目荣获2018年度中国商业联合会科学技术一等奖，
                     公司并且连续三年获得上海市“科技型中小企业技术创新基金”资金支持 发展速度上的优异表现，快速得到了业内和用户的一致好评。
                  </p>
                  <div class="mt-[12px] flex" v-for="(item, index) in state.usList" :key="item.ID">
                     <i :class="`ywicon ${item.icon} mr-[8px] !text-[18px]`"></i>
                     <div class="info_item_title">{{ item.title }}</div>
                     <div class="info_item">{{ item.content }}</div>
                  </div>
               </div>
               <div class="right">
                  <div class="relative">
                     <el-image
                        style="width: 150px; height: 207px"
                        src="/static/images/wave/copyright.jpg"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="state.rcList"
                        :initial-index="4"
                        fit="cover"
                        close-on-press-escape
                     />
                     <!-- <div class="view">
                        <i class="iconfont icon-xianshimima font14 mr-[4px]">查看</i>
                     </div> -->
                  </div>
               </div>
            </div>
@@ -17,7 +109,34 @@
   </div>
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
import { reactive } from 'vue';

let state = reactive({
   usList: [
      {
         ID: 1,
         icon: 'icon-dianhua',
         title: '联系方式:',
         content: '023-98657832',
      },
      {
         ID: 2,
         icon: 'icon-youxiang',
         title: '商务合作:',
         content: 'smh@eventech.cn',
      },
      {
         ID: 3,

         icon: 'icon-dizhi',
         title: '公司地址:',
         content: '上海时闵行区江月路999号奇亚特科技园1号楼615室',
      },
   ],
   rcList: ['/static/images/wave/copyright.jpg'],
});
</script>
<style scoped lang="scss">
.about-us-container {
   --title: 14px;
@@ -25,7 +144,7 @@
   --gap: 12px;
   --maxWidth: 864px;
   --color: #5dccef;

   --color2: #76d587;
   width: 100%;
   display: flex;
   -webkit-box-orient: vertical;
@@ -53,9 +172,13 @@
         padding: var(--gap);
         border-radius: 8px;
         color: #fff;
         background-color: var(--color);

         .product_item:first-child {
            color: #5dccef;
            color: var(--color);
         }
         .product_item:nth-child(2) {
            color: var(--color2);
            --hoverColor: rgba();
         }
      }
      .row_layout {
@@ -64,7 +187,158 @@
         display: flex;
         align-items: flex-start;
         gap: var(--gap);
         .code {
            padding: 0 2px;
            -ms-flex-item-align: center;
            align-self: center;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
            p {
               font-size: 12px;
               margin-top: 4px;
               color: #ffffffd9;
               white-space: nowrap;
            }
         }
      }
      .content {
         flex: 1;
         min-width: 0;

         h2 {
            font-size: var(--title);
            line-height: 30px;
            font-weight: 600;
            font-family: Poppins;
         }
         p {
            text-align: justify;
            text-align-last: start;
            font-size: var(--normal);
            line-height: 18px;
            font-weight: 400;
            margin-top: 4px;
            color: hsla(0, 0%, 100%, 0.8);
         }
      }
      .btn {
         box-sizing: border-box;
         width: 100%;
         padding: 0px 8px;
         height: 30px;
         line-height: 25px;
         border-radius: 4px;
         background-color: #fff;
         cursor: pointer;
         display: flex;
         margin-top: 4px;
         align-items: center;
         justify-content: center;
         gap: 8px;
         font-size: 12px;
         margin-left: unset;
         text-decoration: none;

         -webkit-transition: all 0.3s;
         -o-transition: all 0.3s;
         transition: all 0.3s;
         font-size: 12px;
         white-space: nowrap;
      }
      .column_layout {
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
         .top {
            display: flex;
            align-items: flex-start;
            gap: var(--gap);
         }
      }
      .us {
         margin-top: var(--gap);
         padding: var(--gap);
         min-width: 0;
         border-radius: 8px;
         background-color: #1d86ff;
         color: #fff;
         display: flex;
         align-items: center;
         gap: 24px;
         h2 {
            font-size: var(--title);
            line-height: 20px;
         }
         p {
            text-align: justify;
            -moz-text-align-last: start;
            text-align-last: start;
            font-size: var(--normal);
            line-height: 20px;
            margin-top: var(--gap);
            color: #ffffffd9;
         }
         .info_item_title {
            font-size: var(--normal);
            line-height: 20px;
            color: white;
            display: flex;
            font-weight: 800;
            align-items: center;
            margin-right: 4px;
         }
         .info_item {
            font-size: var(--normal);
            line-height: 20px;
            color: #ffffffd9;
            display: flex;
            align-items: center;
            margin-right: 4px;
         }
         .right {
            width: 200px;
            display: flex;

            align-items: center;
            flex-direction: column;
            .view {
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom: 0;
               background-color: transparent;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: background-color 0.2s;
               cursor: pointer;
               font-size: 12px;
               color: transparent;

               &:hover {
                  background-color: rgba(0, 0, 0, 0.7);
                  color: #fff;
               }
               i {
                  transition: color 0.2s;
                  margin-right: 4px;
               }
            }
         }
      }
   }
}
</style>
import item from 'element-plus/es/components/space/src/item';