增加固钉，锚点

src/components/Application .vue

@@ -7,7 +7,7 @@
       <div v-for="(item,idx) in 10" :key="idx" class="item"></div>
     </div> -->
     <div>
-      <img class="image" :src="image" alt="">
+      <img class="image" :src="image" alt="" />
     </div>
   </div>
 </template>
@@ -17,20 +17,20 @@ import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
 onMounted(() => {});
 const props = defineProps({
-  title:{
-    default:'陪伴企业成长的一站式生产制造业务管理平台'
+  title: {
+    default: "陪伴企业成长的一站式生产制造业务管理平台",
   },
-  titleinfo:{
-    default:'全面应用模块，满足所有的应用场景'
+  titleinfo: {
+    default: "全面应用模块，满足所有的应用场景",
   },
-  image:{
-    default:''
-  }
-})
+  image: {
+    default: "",
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-.image{
+.image {
   width: 1200px;
   height: 270px;
   margin-top: 60px;
@@ -46,7 +46,7 @@ const props = defineProps({
   width: 1920px;
   // height: 560px;
   background: #f5f9ff;
-  padding: 80px 360px ;
+  padding: 80px 360px;
   box-sizing: border-box;
   .item {
     width: 225px;

src/components/Layout/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header">
     <div class="header-left">
-      <div class="logo"></div>
+      <img class="logo" :src="headerData.websiteData.logo" alt="" />
       <p
         class="select-content"
         @click="toHome"
@@ -178,6 +178,7 @@
 import { reactive, ref, onMounted, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { getInformation } from "../../api/homepage";
+import { config } from "../../api/config";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useStore } from "../../store/index";
 const counter = useStore();
@@ -186,10 +187,12 @@ const route = useRoute();
 
 interface HeaderType {
   userinfo: any;
+  websiteData: any;
 }
 
 const headerData = reactive<HeaderType>({
   userinfo: {},
+  websiteData: {},
 });
 
 //登出
@@ -267,6 +270,9 @@ const getInfo = () => {
   getInformation().then((res) => {
     headerData.userinfo = res.data;
   });
+  config({ module: "basic" }).then((res) => {
+    headerData.websiteData = res.data;
+  });
 };
 
 onMounted(() => {
@@ -290,8 +296,7 @@ onMounted(() => {
     align-items: center;
     .logo {
       width: 84px;
-      height: 36px;
-      background-color: #d8d8d8;
+      height: 90px;
       margin-right: 56px;
     }
     .selected {

src/components/anchorPoint/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-affix position="bottom" :offset="400">
+    <div class="seek-from">
+      <el-popover
+        :width="180"
+        placement="left"
+        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
+      >
+        <template #reference>
+          <div class="advice">
+            <img
+              class="advice-img"
+              src="../../assets/image/dianhua.png"
+              alt=""
+            />
+            <p class="advice-name">电话咨询</p>
+          </div>
+        </template>
+        <template #default>
+          <div
+            class="demo-rich-conent"
+            style="display: flex; gap: 16px; flex-direction: column"
+          >
+            <p class="seek">400免费咨询热线</p>
+            <p class="phone">{{ configData.pre_sale_mobile }}</p>
+          </div>
+        </template>
+      </el-popover>
+      <el-popover
+        :width="200"
+        placement="left"
+        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
+      >
+        <template #reference>
+          <div class="advice">
+            <img class="advice-img" src="../../assets/image/guwen.png" alt="" />
+            <p class="advice-name">专属顾问</p>
+          </div>
+        </template>
+        <template #default>
+          <div
+            class="demo-rich-conent"
+            style="display: flex; gap: 16px; flex-direction: column"
+          >
+            <p class="scan">扫描添加专属顾问</p>
+            <img class="qr-code" :src="configData.service_qr_code" alt="" />
+          </div>
+        </template>
+      </el-popover>
+      <el-popover
+        :width="200"
+        placement="left"
+        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
+      >
+        <template #reference>
+          <div class="advice">
+            <img
+              class="advice-img"
+              src="../../assets/image/gongzhonghao.png"
+              alt=""
+            />
+            <p class="advice-name">微信</p>
+            <p class="advice-name">公众号</p>
+          </div>
+        </template>
+        <template #default>
+          <div
+            class="demo-rich-conent"
+            style="display: flex; gap: 16px; flex-direction: column"
+          >
+            <p class="scan">扫描关注微信公众号</p>
+            <img class="qr-code" :src="configData.official_qr_code" alt="" />
+          </div>
+        </template>
+      </el-popover>
+    </div>
+  </el-affix>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { config } from "../../api/config";
+const configData: any = ref({});
+
+const getInfo = () => {
+  config({ module: "basic" }).then((res) => {
+    configData.value = res.data;
+    console.log(res.data);
+  });
+};
+onMounted(() => {
+  getInfo();
+});
+</script>
+<style scoped lang="less">
+.seek-from {
+  width: 64px;
+  height: 198px;
+  background: #ffffff;
+  box-shadow: 0px 2px 18px -6px rgba(0, 0, 0, 0.1);
+  border-radius: 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 22px 0;
+  position: absolute;
+  right: 260px;
+  .advice {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .advice-img {
+      width: 24px;
+      height: 24px;
+    }
+    .advice-name {
+      font-size: 12px;
+      color: #222;
+    }
+  }
+}
+.seek {
+  font-size: 12px;
+  color: #222;
+}
+.phone {
+  color: #0d0fff;
+  font-size: 16px;
+}
+.scan {
+  font-size: 12px;
+  text-align: center;
+}
+.qr-code {
+  width: 160px;
+  height: 160px;
+}
+</style>

src/router/index.ts

@@ -44,7 +44,7 @@ const routes = [
         name: "personalCenter",
         component: () => import("../view/PersonalCenter/index.vue"),
         mate: {
-          name: "关于我们",
+          name: "个人资料",
         },
       },
       {

src/view/Home/component/solveQuestion.vue

@@ -18,7 +18,7 @@
           <p class="detail">
             {{ item.content }}
           </p>
-          <p class="understand">
+          <p class="understand" @click="toEnterprise">
             进一步了解<img
               class="arrow"
               src="../../../assets/image/jiantouyou.png"
@@ -27,75 +27,21 @@
           </p>
           <img class="tubiao" :src="item.image" alt="" />
         </div>
-        <!-- <div
-          class="card"
-          @mouseenter="handleMouseEnter('rail-2', 'title-2')"
-          @mouseleave="handleMouseLeave('rail-2', 'title-2')"
-        >
-          <p class="rail-2 rail"></p>
-          <p class="title title-2">精细化运营管理</p>
-          <p class="detail">
-            通过自定义审批流和拖拽化表单设计，云厂长实现业务流程的灵活性和适应性，支持企业进行精细化运营管理，提升运营效率和数据价值。
-          </p>
-          <p class="understand">
-            进一步了解<img
-              class="arrow"
-              src="../../../assets/image/jiantouyou.png"
-              alt=""
-            />
-          </p>
-          <img class="tubiao" src="../../../assets/image/tubiao2.png" alt="" />
-        </div>
-        <div
-          class="card"
-          @mouseenter="handleMouseEnter('rail-3', 'title-3')"
-          @mouseleave="handleMouseLeave('rail-3', 'title-3')"
-        >
-          <p class="rail-3 rail"></p>
-          <p class="title title-3">智能仓库与库存管理</p>
-          <p class="detail">
-            云厂长的智能仓库分析和多库位实时数据传输功能，优化库存管理，减少成本，确保物流效率，帮助企业在竞争中保持优势。
-          </p>
-          <p class="understand">
-            进一步了解<img
-              class="arrow"
-              src="../../../assets/image/jiantouyou.png"
-              alt=""
-            />
-          </p>
-          <img class="tubiao" src="../../../assets/image/tubiao3.png" alt="" />
-        </div>
-        <div
-          class="card"
-          @mouseenter="handleMouseEnter('rail-4', 'title-4')"
-          @mouseleave="handleMouseLeave('rail-4', 'title-4')"
-        >
-          <p class="rail-4 rail"></p>
-          <p class="title title-4">全面质量管理与风险控制</p>
-          <p class="detail">
-            云厂长支持多形式质检和生产车间MO单实时操作，确保产品质量符合标准，同时通过数据分析和监控，降低运营风险，提升企业竞争力。
-          </p>
-          <p class="understand">
-            进一步了解<img
-              class="arrow"
-              src="../../../assets/image/jiantouyou.png"
-              alt=""
-            />
-          </p>
-          <img class="tubiao" src="../../../assets/image/tubiao3.png" alt="" />
-        </div> -->
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { getQuestionList } from "../../../api/home";
 
 interface SolveType {
   questionList: any;
 }
 
+const router = useRouter();
+
 //组件数据
 const solveData = reactive<SolveType>({
   questionList: [],
@@ -122,6 +68,15 @@ const handleMouseLeave = (str: string, str2: string) => {
   titleDom[0].style.color = "#000";
 };
 
+const toEnterprise = () => {
+  router.push({
+    path: "/product",
+    query: {
+      index: 2,
+    },
+  });
+};
+
 onMounted(() => {
   getInfo();
 });
@@ -185,6 +140,7 @@ onMounted(() => {
           display: flex;
           align-items: center;
           margin-top: 28px;
+          cursor: pointer;
           .arrow {
             width: 16px;
             height: 16px;

src/view/Home/index.vue

@@ -2,14 +2,14 @@
   <Banne :banneImageList="imgList.banneImageList" />
   <div class="video-information">
     <div class="conetnt">
-      <div class="video-1">视频</div>
+      <video class="video-1" :src="introduceVideo.introduction_video"></video>
       <div>
         <p class="brief-introduction">云厂长视频简介</p>
         <p class="information">
-          Hi，各位厂长们，这是我们的第一次会面，我想您一定会对我感到好奇，请花一分钟了解一下我吧～
+          {{ introduceVideo.introduction_content }}
         </p>
         <div class="btn-list">
-          <button class="explanation btn">十分钟详解</button
+          <button class="explanation btn" @click="toDocument">十分钟详解</button
           ><button class="btn">开始试用</button
           ><button class="btn">插件介绍</button>
         </div>
@@ -26,11 +26,13 @@
     <p class="start-title">免费试用云厂长的核心功能，开启您的智能制造之旅！</p>
     <button class="free">免费体验</button>
   </div>
+  <AnchorPoint />
   <Bottom />
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted, nextTick } from "vue";
 import { getBanneList } from "../../api/home";
+import { config } from "../../api/config";
 import Banne from "../../components/Banne/index.vue";
 import SolveQuestion from "./component/solveQuestion.vue";
 import Project from "./component/project.vue";
@@ -41,14 +43,30 @@ import UserSound from "./component/userSound.vue";
 import Increase from "./component/increase.vue";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
+import AnchorPoint from "../../components/anchorPoint/index.vue";
+const router = useRouter();
 
 const imgList = reactive({
   //banne图需要的数据
   banneImageList: [],
 });
 
+const introduceVideo: any = ref({});
+
+const toDocument = () => {
+  router.push({
+    path: "/bookinfo",
+    query: {
+      name: "产品文档",
+      index: 0,
+      id: 1,
+    },
+  });
+};
+
 //获取数据
 const getInfo = () => {
+  //获取轮播图
   getBanneList().then((res) => {
     let arr: any = [];
     res.data.map((item: any) => {
@@ -71,6 +89,11 @@ const getInfo = () => {
     imgList.banneImageList = arr;
     console.log(imgList.banneImageList);
   });
+  //获取简介视频
+  config({ module: "cms" }).then((res) => {
+    console.log(res);
+    introduceVideo.value = res.data;
+  });
 };
 
 onMounted(() => {
@@ -89,7 +112,6 @@ onMounted(() => {
     .video-1 {
       width: 480px;
       height: 270px;
-      background-color: #ccc;
       margin-right: 60px;
       text-align: center;
     }

src/view/Home/product.vue

@@ -108,25 +108,14 @@ const overview = async () => {
 onMounted(overview);
 //获取轮播图
 const imgList = reactive({
-  banneImageList: [
-    {
-      imgUrl:
-        "https://img1.baidu.com/it/u=1964831979,2551193402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=357",
-      isBtn: true,
-    },
-    {  
-      imgUrl:
-        "https://img1.baidu.com/it/u=3821883389,2247186365&fm=253&fmt=auto&app=138&f=JPEG?w=798&h=500",
-      isBtn: false,
-    },
-  ],
+  banneImageList: [],
 });
 const getBanneList = async () => {
   try {
     const { data } = await configApi.getBanneList({
-      code:'product'
-  });
-  imgList.banneImageList = data;
+      code: "product",
+    });
+    imgList.banneImageList = data;
   } catch (error) {}
 };
 onMounted(getBanneList);
@@ -173,8 +162,8 @@ const config = async () => {
       module: "cms_product",
     });
     tabbar.info = data;
-    tabbar.newlist.push({image:data.group_enhancement_package_image})
-    tabbar.newlist.push({image:data.professional_enhancement_package_image})
+    tabbar.newlist.push({ image: data.group_enhancement_package_image });
+    tabbar.newlist.push({ image: data.professional_enhancement_package_image });
   } catch (error) {}
 };
 onMounted(config);
@@ -251,7 +240,7 @@ const tabbar = reactive({
   ],
   customerlist: [],
   info: {},
-  newlist:[]
+  newlist: [],
 });
 </script>
 

src/view/PersonalCenter/component/mineCollect.vue

@@ -2,10 +2,22 @@
   <div class="collect">
     <p class="collect-title">我的收藏</p>
     <div class="collect-list">
-      <div class="collect-content" v-for="item in collectList" :key="item.id">
-        <img class="collect-img" :src="item.video.course.image" alt="" />
+      <div
+        class="collect-content"
+        v-for="item in collectList"
+        :key="item.id"
+        @click="toVideoDetail(item.video)"
+      >
+        <img
+          class="collect-img"
+          v-if="item.video"
+          :src="item.video.course.image"
+          alt=""
+        />
+        <div class="lose-efficacy" v-else>视频已删除</div>
         <p class="name">
-          <span>{{ item.video.title }}</span
+          <span v-if="item.video">{{ item.video.title }}</span>
+          <span v-else>视频已删除</span
           ><el-dropdown trigger="click">
             <span class="dian">...</span>
             <template #dropdown>
@@ -31,9 +43,11 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { getCollectList, cancelCollection } from "../../../api/homepage";
 import { ElMessage } from "element-plus";
 const collectList: any = ref([]);
+const router = useRouter();
 
 const handleCurrentChange = (val: number) => {
   console.log(val);
@@ -49,6 +63,16 @@ const cancelCollect = (item: any) => {
   });
 };
 
+const toVideoDetail = (value: any) => {
+  router.push({
+    path: "/info",
+    query: {
+      time: value.duration,
+      id: value.id,
+    },
+  });
+};
+
 //获取数据
 const getInfo = () => {
   getCollectList({
@@ -82,11 +106,26 @@ onMounted(() => {
         height: 130px;
         border-radius: 10px;
       }
+      .lose-efficacy {
+        width: 214px;
+        height: 130px;
+        border-radius: 10px;
+        background-color: #f5f5f7;
+        text-align: center;
+        line-height: 130px;
+      }
       .name {
         display: flex;
         justify-content: space-between;
         align-items: end;
         margin-top: 10px;
+        span {
+          display: inline-block;
+          width: 200px;
+          white-space: nowrap; // 强制一行显示
+          overflow: hidden; // 超出隐藏
+          text-overflow: ellipsis; // 省略号
+        }
       }
     }
   }