提交

src/router/index.js

@@ -100,17 +100,16 @@ export const dynamicRoutes = [
       },
     ],
   },
-  // Bi可视化分析
   {
     path: "",
     component: Layout,
-    redirect: "/bi",
+    redirect: "/digitalMarketingAlgorithms",
     children: [
       {
-        path: "/bi",
+        path: "/digitalMarketingAlgorithms",
-        component: () => import("@/views/visual-analysis/index.vue"),
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
-        name: "bi",
+        name: "digitalMarketingAlgorithms",
-        meta: { title: "BI可视化分析", icon: "dashboard", affix: true },
+        meta: { title: "数字营销算法", icon: "tongxunlu_B", affix: true },
       },
     ],
   },
@@ -127,19 +126,22 @@ export const dynamicRoutes = [
       },
     ],
   },
+  // Bi可视化分析
   {
     path: "",
     component: Layout,
-    redirect: "/digitalMarketingAlgorithms",
+    redirect: "/bi",
     children: [
       {
-        path: "/digitalMarketingAlgorithms",
+        path: "/bi",
-        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        component: () => import("@/views/visual-analysis/index.vue"),
-        name: "digitalMarketingAlgorithms",
+        name: "bi",
-        meta: { title: "数字营销算法", icon: "tongxunlu_B", affix: true },
+        meta: { title: "BI可视化分析", icon: "dashboard", affix: true },
       },
     ],
   },
+  
+ 
   {
     path: "",
     component: Layout,

src/views/digitalMarketTech/AIGCLargeModel/components/AIWriting.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="app-containere">
+    <div class="material">
+      <div class="title">
+        <img src="@/assets/images/caseIcon.png" alt="" />
+        <span>任务素材</span>
+      </div>
+      <div>
+        <p>
+          根据内容主题，利用推荐的三个AI工具，撰写相关的文章。
+          <br />
+          1、撰写博客文章：假设你是一个美食博客的作者，想要撰写一篇关于“如何推荐外地游客品尝本地美食”的文章。
+          <br />
+          2、编写产品描述：你是一家电子商务公司的营销人员，需要为一款新型智能手表编写产品描述，突出其独特功能和设计。
+          <br />
+          3、撰写研究报告摘要：你是一名研究人员，需要为一篇关于“可持续发展城市”的研究报告撰写摘要。
+        </p>
+      </div>
+    </div>
+    <div class="material">
+      <div class="title">
+        <img src="@/assets/images/步骤.png" alt="" />
+        <span>任务提交</span>
+      </div>
+      <div style="margin-top: 10px">
+        <el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" :on-change="handleChange" :show-file-list="true" accept=".png,.jpg,.jpeg" :limit="1">
+          <el-button type="primary" class="uploadBtn">+任务提交</el-button>
+        </el-upload>
+      </div>
+    </div>
+    <div class="material" style="margin-top: 20px">
+      <div class="title">
+        <img src="@/assets/icons/svg/sxbg.svg" style="width: 30px; height: 30px" />
+        <span>大模型参考工具</span>
+      </div>
+      <div style="display: flex">
+        <div class="case">
+          <div class="bgItem">
+            <img src="@/assets/images/1723156589-image.png" alt="" />
+          </div>
+          <div class="detail">
+            <div class="title">讯飞写作</div>
+            <el-tooltip popper-class="tooltip" effect="light" content="讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快速生成新闻稿件、种草文案、品宣策划、工作总结、心得体会等各类文本内容。它支持AI对话写作、多场景模板、AI工具润色改写扩写缩写续写、AI文生图图生图、素材辅助写作等功能，全面提升用户的写作效率。" placement="top-start">
+              <div style="line-height: 24px; font-size: 13px">讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快...</div>
+            </el-tooltip>
+            <a class="btn" href=" https://huixie.iflyrec.com/" target="_blank">
+              <span>访问官网</span>
+            </a>
+          </div>
+        </div>
+        <div class="case">
+          <div class="bgItem">
+            <img src="@/assets/images/1723156589-image.png" alt="" />
+          </div>
+          <div class="detail">
+            <div class="title">火山写作</div>
+            <el-tooltip popper-class="tooltip" effect="light" content="火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器、小红书文案生成器、SEO元标签、知乎回答、电商产品描述等，以支持内容创作和营销活动。" placement="top-start">
+              <div style="line-height: 24px; font-size: 13px">火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器...</div>
+            </el-tooltip>
+            <a class="btn" href="https://www.writingo.net/" target="_blank">
+              <span>访问官网</span>
+            </a>
+          </div>
+        </div>
+        <div class="case">
+          <div class="bgItem">
+            <img src="@/assets/images/1723156589-image.png" alt="" />
+          </div>
+          <div class="detail">
+            <!-- <div class="icon">
+              <div class="iconItem">AI工具</div>
+              <span>＞</span>
+              <div class="iconItem">AI写作对话</div>
+            </div> -->
+            <div class="title">豆包AI</div>
+            <el-tooltip popper-class="tooltip" effect="light" content="豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合、日常生活与工作规划、个性化AI智能体创建等功能。" placement="top-start">
+              <div style="line-height: 24px; font-size: 13px">豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合...</div>
+            </el-tooltip>
+            <a class="btn" href="https://www.doubao.com/chat/" target="_blank">
+              <span>访问官网</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.app-containere {
+  margin: 10px 4px 10px 10px;
+  border: 1px solid #0452c6;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 25px;
+  color: #fff;
+  .material {
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      span {
+        margin-left: 10px;
+      }
+    }
+    p {
+      font-size: 15px;
+      line-height: 30px;
+    }
+    .case {
+      margin-right: 18px;
+      padding: 10px;
+      padding-top: 20px;
+      padding-bottom: 20px;
+      color: #fff;
+      margin-top: 10px;
+      //   width: calc(100% - 100px);
+      width: 500px;
+      //   background: #fff;
+      background: #002c5b;
+      border-radius: 10px;
+      border: 1px solid #003e7c;
+      display: flex;
+      align-items: center;
+
+      .bgItem {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          // 186px
+          width: 258px;
+          height: 134px;
+          border-radius: 5px;
+          scale: 0.8;
+        }
+        background-color: #e6e8ed;
+        width: 240px;
+        height: 170px;
+        // padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
+      }
+      .detail {
+        width: 300px;
+        margin-left: 20px;
+        .icon {
+          display: flex;
+          align-items: center;
+          span {
+            color: #f1404b;
+          }
+          .iconItem {
+            background-color: #f1404b;
+            color: #fff;
+            font-size: 12px;
+            padding: 2px;
+            border-radius: 4px;
+            padding-left: 4px;
+            padding-right: 4px;
+          }
+        }
+        .title {
+          font-size: 26px;
+          margin-top: 5px;
+          margin-bottom: 5px;
+          // font-weight: bold;
+        }
+        .btn {
+          display: block;
+          background-color: #e7e6e8;
+          color: #333;
+          width: 110px;
+          height: 40px;
+          text-align: center;
+          line-height: 40px;
+          border-radius: 5px;
+          margin-top: 10px;
+          cursor: pointer;
+        }
+        .btn:hover {
+          background-color: #000;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
+<style>
+.tooltip {
+  max-width: 260px;
+}
+</style>

src/views/digitalMarketTech/AIGCLargeModel/index.vue

@@ -6,8 +6,9 @@
 </template>
 <script setup>
 import AIVenison from "./components/AIVenisonDiagram.vue";
+import AIWriting from "./components/AIWriting.vue";
 import AIGC from "./components/thirdPartyAIGC.vue";
-const pageData = [AIVenison, null, null, null, null, AIGC];
+const pageData = [AIVenison, AIWriting, null, null, null, AIGC];
 const page = ref(AIVenison);
 const clickIndx = (index) => {
   page.value = pageData[index];
@@ -18,7 +19,7 @@ const imgData = [
     img: "wst",
   },
   {
-    text: "AI文章",
+    text: "AI写作",
     img: "wz",
   },
   {