修改了收费介绍路由，解决控制台红黄警告，首页飘窗差一步

src/components/HelpCenter.vue

@@ -510,6 +510,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   /* position: relative; */
+  line-clamp: 2;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

src/components/HomePage.vue

@@ -1,5 +1,17 @@
 <template>
   <div class="home-page">
+    <!-- 飘窗 -->
+    <div class="pcdiv">
+      <div id="sport_wrap" v-if="sportStatus" :key="floatWindowKey" @mouseover="mouseOver" @mouseleave="mouseLeave">
+        <div class="deleteImg" @click="showSport" >
+          <img class="close" src="/assets/img/close.png" alt="">
+        </div>
+          <img :src="floatImg" @click="windowSkip" alt="">
+      </div>
+    </div>
+  
+    
+
     <div class="box-top">
       <div class="headline">
         <h2>不止</h2>
@@ -11,12 +23,10 @@
         <div id="title-container" >
           <h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
         </div>
-
-        <!-- <p>AI软著引擎平台累计辅助编写资料<em v-html="number1"></em>万套，通过平台代办下发证书<em v-html="number2"></em>万件</p> -->
         <p>AI软著引擎平台累计辅助编写资料<em>{{number1}}</em>万套，通过平台代办下发证书<em>{{number2}}</em>万件</p>
         <div class="button-box">
-          <button><a href="">免费试用</a></button>
+          <button><a href="https://www.aimzhu.com/operator/">免费试用</a></button>
-          <button><a href="">立即前往</a></button>
+          <button><a href="https://www.aimzhu.com/operator/">立即前往</a></button>
         </div>
       </div>
     </div>
@@ -197,8 +207,38 @@ export default {
       number1: '',
       number2: '' ,
 
+      imgFloat: '',
+      floatImg: '',
+
+      sportStatus: false,
+      moveX: 0, //X轴方向上移动的距离
+      moveY: 0, //Y轴方向上移动的距离
+      stepX: 2, //图片X轴移动的速度
+      stepY: 2, //图片Y轴移动的速度
+      directionX: 0, //设置图片在X轴方向上的移动方向   0:向右  1:向左
+      directionY: 0, //设置图片在Y轴方向上的移动方向   0:向下  1:向上
+      timer: null,
+
+      floatWindowKey: 0, // 添加一个key来强制重新渲染
+
     }
   },
+
+  created() {
+    this.sportStatus =  true
+    this.timer = setInterval(()=>{
+        this.sportTranstion()
+    }, 30);
+    this.startFloatWindowTimer();
+
+  },
+  beforeDestroy() {
+    this.sportStatus = false
+    // clearInterval(this.timer)
+    this.clearFloatWindowTimer();
+  },
+  
+
   methods: {
 
     selectStep1(index) {
@@ -249,31 +289,117 @@ export default {
       })
     },
 
-    // startData() {
+    // 飘窗所需图片内容
-    //   const dataUrl1 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/c8db34f1-737d-4520-8bd5-fd1b727c87e7`
+    floatContent() {
-    //   const dataUrl2 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/f2782ed4-8133-4307-b067-c8e8cac16cdd`
+      let img = document.getElementById("sport_wrap");
+      axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
+        console.log(response.data);
+        if (response.data.length != 0) {
+          const imgFolat = response.data[0].photo
+        this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
+        } else {
+          img.style.display = 'none'
+        }
+      })
+      .catch(error => {
+        console.error('There was an error!', error)
+      })
+    },
+    // 飘窗
+    sportTranstion(){
+      let img = document.getElementById("sport_wrap"); //获得图片所在层的ID
+      let height = document.documentElement.clientHeight; //浏览器的高度
+      let width = document.documentElement.clientWidth; //浏览器的宽度
+      let imgHeight = img.offsetHeight; //飘浮图片的高度
+      let imgWidth = img.offsetWidth; //瓢浮图片的宽度
+      //设置飘浮图片距离浏览器左侧位置
+      img.style.left = parseInt(this.moveX + document.documentElement.scrollLeft) + "px";
+      //设置飘浮图片距离浏览器右侧位置
+      img.style.top = parseInt(this.moveY + document.documentElement.scrollTop) + "px";
+      //设置图片在Y轴上的移动规律
+      if(this.directionY == 0) {
+          //飘浮图片在Y轴方向上向下移动
+          this.moveY += this.stepY;
+      } else {
+          //飘浮图片在Y轴方向上向上移动
+          this.moveY -= this.stepY;
+      }
+      if(this.moveY < 0) {
+          //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
+          this.directionY = 0;
+          this.moveY = 0;
+      }
+      if(this.moveY > (height - imgHeight-10)) {
+          //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
+          this.directionY = 1;
+          this.moveY = (height - imgHeight-10);
+      }
+      //设置图片在X轴上的移动规律
+      if(this.directionX == 0) {
+          this.moveX += this.stepX;
+      } else {
+          this.moveX -= this.stepX;
+      }
+      if(this.moveX < 0) {
+          //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
+          this.directionX = 0;
+          this.moveX = 0;
+      }
+      if(this.moveX > (width - imgWidth)) {
+          //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移动
+          this.directionX = 1;
+          this.moveX = (width - imgWidth);
+      }
+    },
+    showSport(){
+    //关闭漂浮窗
+      this.sportStatus = false
+      clearInterval(this.timer)
+    },
+    mouseLeave(){
+    //鼠标移入
+      this.timer = setInterval(()=>{
+        this.sportTranstion()
+      },30);
 
-    //   axios.get(dataUrl1).then(response => {
+      this.startFloatWindowTimer();
-    //     // console.log(response.data)
-    //     // console.log(response.data.dataSummary)
-    //     this.number1 = response.data.dataSummary
-    //   })
-    //   .catch(error1 => {
-    //     console.error('There was an error!', error1);
-    //   })
 
-    //   axios.get(dataUrl2).then(response => {
+    },
-    //     // console.log(response.data)
+    mouseOver(){
-    //     // console.log(response.data.dataSummary)
+    //鼠标移出
-    //     this.number2 = response.data.dataSummary
+      clearInterval(this.timer)
-    //   })
-    //   .catch(error2 => {
-    //     console.error('There was an error!', error2);
-    //   })
-    // },
 
+      this.clearFloatWindowTimer();
 
+    },
+    // 飘窗跳转
+    windowSkip() {
+      window.open('https://www.aimzhu.com/floatPage.html');
+    },
 
+     // 启动飘窗移动的定时器
+     startFloatWindowTimer() {
+      if (!this.timer) {
+        this.resetFloatWindowPosition(); // 重置飘窗位置
+        this.timer = setInterval(() => {
+          this.sportTranstion();
+        }, 30);
+      }
+    },
+
+    // 清除飘窗的定时器
+    clearFloatWindowTimer() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+    },
+
+    // 重置飘窗位置
+    resetFloatWindowPosition() {
+      this.moveX = 0;
+      this.moveY = 0;
+    },
 
     startScroll() {
       this.intervalId = setInterval(() => {
@@ -296,9 +422,81 @@ export default {
     stopScroll() {
       clearInterval(this.intervalId);
     },
-
   },
 
+
+  // -----------------------------------------
+
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      if (to.name === 'Home') {
+        vm.sportStatus = true;
+        vm.floatWindowKey++; // 增加 key 值以强制重新渲染
+        vm.$nextTick(() => {
+          vm.resetFloatWindowPosition(); // 重置飘窗位置
+          vm.startFloatWindowTimer(); // 启动飘窗移动的定时器
+        });
+      }
+    });
+  },
+  beforeRouteUpdate(to, from, next) {
+    if (to.name === 'Home') {
+      this.sportStatus = true;
+      this.floatWindowKey++;
+      this.resetFloatWindowPosition(); // 重置飘窗位置
+      this.startFloatWindowTimer(); // 启动飘窗移动的定时器
+    } else {
+      this.sportStatus = false;
+      this.clearFloatWindowTimer(); // 清除飘窗的定时器
+    }
+    next();
+  },
+  beforeRouteLeave(to, from, next) {
+    if (from.name === 'Home') {
+      this.sportStatus = false;
+      this.clearFloatWindowTimer(); // 清除飘窗的定时器
+    }
+    next();
+  },
+  // beforeDestroy() {
+  //   this.clearFloatWindowTimer();
+  //   this.sportStatus = false;
+  //   // 如果需要，可以手动清理DOM
+  //   if (this.$el && this.$el.parentNode) {
+  //     this.$el.parentNode.removeChild(this.$el);
+  //   }
+  // },
+
+  // // 路由守卫
+  // beforeRouteEnter(to, from, next) {
+  //   next(vm => {
+  //     if (to.name === 'Home') {
+  //       vm.sportStatus = true;
+  //       vm.startFloatWindowTimer();
+  //     }
+  //   });
+  // },
+  // beforeRouteLeave(to, from, next) {
+  //   if (from.name === 'Home') {
+  //     this.sportStatus = false;
+  //     this.clearFloatWindowTimer();
+  //   }
+  //   next();
+  // },
+  // beforeRouteUpdate(to, from, next) {
+  //   if (to.name === 'Home') {
+  //     vm.sportStatus = true;
+  //     this.startFloatWindowTimer();
+  //   } else {
+  //     this.sportStatus = false;
+  //     this.clearFloatWindowTimer();
+  //   }
+  //   next();
+  // },
+
+  
+  // -----------------------------------------
+
   computed: {
 
     titleContainerStyle() {
@@ -314,6 +512,7 @@ export default {
   mounted() {
     this.startScroll();
     this.startData();
+    this.floatContent();
     // this.goToLink();
     axios.get(``).then(Response => {
       this.oneData = Response.data
@@ -415,10 +614,18 @@ export default {
   margin: auto;
 }
 .home-page .box-top .headline .button-box button {
-  padding: 10px 45px;
+  /* padding: 10px 45px; */
+  height: 40px;
+  width: 140px;
   margin-left: 20px;
   border: none;
 }
+.home-page .box-top .headline .button-box button a {
+  display: block;
+  width: 140px;
+  height: 40px;
+  line-height: 40px;
+}
 .home-page .box-top .headline .button-box button:first-child {
   background-color: #39C7C1;
   /* color: #FFF; */
@@ -437,6 +644,37 @@ export default {
   font-weight: 700;
   cursor: pointer;
 }
+
+/* 飘窗 */
+.home-page .pcdiv {
+  position: absolute;
+  width: 100vh;
+  height: 100vw;
+}
+.home-page #sport_wrap {
+    position: absolute;
+    display: block;
+    /* display: none; */
+    z-index: 99999999999;
+    width:150px;
+    height:150px;
+    /* line-height: 70px; */
+    cursor: pointer;
+    /* border: 1px solid red; */
+  }
+.home-page #sport_wrap  .deleteImg {
+    width: 20px;
+    height:20px;
+    position:absolute;
+    right:-10px;
+    top:-10px;
+    cursor: pointer;
+}
+.home-page #sport_wrap  .deleteImg .close {
+  width:20px !important;
+  height: 20px !important;
+}
+
 .home-page .box-bottom {
   display: flex;
   flex-direction: column;

src/components/PrivacyPolicy.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
-  <title>《隐私条款》</title>
+  <title id="HTMLBT">AI秒著引擎</title>
   <style>
     * {
       margin: 0;
@@ -60,12 +60,14 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
+    const htmlBT = document.querySelector('#HTMLBT')
     const content = document.querySelector('#content')
     const title = document.querySelector('#title')
     axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/93679af4-e264-4d1c-bd49-538028daa95d').then(response => {
       this.data = response.data;
       // this.title = response.data.title;
       // this.data = response.data.content;
+      htmlBT.innerHTML = response.data.title
       title.innerHTML = response.data.title
       content.innerHTML = response.data.content
       console.log(response.data);

src/components/ProductsNews.vue

@@ -456,7 +456,7 @@ export default {
   mounted() {
     this.fetchData1()
     this.fetchData2()
-    this.fetchData3()
+    // this.fetchData3()
     this.fetchDataPageSize()
   },
 }
@@ -563,6 +563,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
@@ -577,6 +578,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 4;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
@@ -675,6 +677,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
@@ -687,6 +690,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
@@ -803,6 +807,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
@@ -821,6 +826,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 5;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
 }
@@ -997,6 +1003,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;         /* 定位上下文 */
   display: -webkit-box;       /* 使用弹性盒模型 */
+  line-clamp: 3;
   -webkit-box-orient: vertical;/* 设置子元素的排列方式为垂直 */
   -webkit-line-clamp: 3;      /* 限制在三行 */
   color: #939399;
@@ -1099,6 +1106,7 @@ export default {
   text-overflow: ellipsis;
   position: relative;
   display: -webkit-box;
+  line-clamp: 1;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }

src/components/Rnsystem.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
-  <title>实名制认证流程</title>
+  <title id="HTMLBT">AI秒著引擎</title>
   <style>
     * {
       margin: 0;
@@ -60,12 +60,14 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
+    const htmlBT = document.querySelector('#HTMLBT')
     const content = document.querySelector('#content')
     const title = document.querySelector('#title')
     axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/a9748d82-6a42-4895-9d13-de496b166413').then(response => {
       // this.data = response.data;
       // this.title = response.data.title;
       // this.data = response.data.content;
+      htmlBT.innerHTML = response.data.title
       title.innerHTML = response.data.title
       content.innerHTML = response.data.content
       console.log(response.data);

src/components/ScrollAD.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
+  <title id="HTMLBT">AI秒著引擎</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    em,
+    i {
+      font-style: normal;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    ul,
+    li,
+    ol {
+      list-style: none;
+    }
+
+    #app {
+      width: 1000px;
+      margin: 0 auto;
+      /* border: 1px solid #333; */
+      padding-top: 50px;
+      padding-bottom: 40px;
+    }
+
+    #title {
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      margin-bottom: 15px;
+      /* border: 1px solid red; */
+    }
+
+    #content {
+      line-height: 35px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <h2 id="title"></h2>
+    <!-- <h2 id="title" v-html="title"></h2> -->
+    <div id="content"></div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script>
+    const htmlBT = document.querySelector('#HTMLBT')
+    const content = document.querySelector('#content')
+    const title = document.querySelector('#title')
+    axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/a50fddde-9eb5-4aa5-88c4-a7bf6fded339').then(response => {
+      // this.data = response.data;
+      // this.title = response.data.title;
+      // this.data = response.data.content;
+      htmlBT.innerHTML = response.data.title
+      title.innerHTML = response.data.title
+      content.innerHTML = response.data.content
+      console.log(response.data);
+
+
+      // console.log(response.data.agreementType);
+      // console.log(response.data.content);
+
+    }).catch(error => {
+      console.error(error);
+    });
+
+
+
+  </script>
+</body>
+
+</html>

src/components/Seda.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
-  <title>软件委托开发协议</title>
+  <title id="HTMLBT">AI秒著引擎</title>
   <style>
     * {
       margin: 0;
@@ -60,12 +60,14 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
+    const htmlBT = document.querySelector('#HTMLBT')
     const content = document.querySelector('#content')
     const title = document.querySelector('#title')
     axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/e609d78d-7d62-4c9e-a809-090ee350dca3').then(response => {
       // this.data = response.data;
       // this.title = response.data.title;
       // this.data = response.data.content;
+      htmlBT.innerHTML = response.data.title
       title.innerHTML = response.data.title
       content.innerHTML = response.data.content
       console.log(response.data);

src/components/ShouFei copy.vue

@@ -0,0 +1,871 @@
+<template>
+  <div class="shou-fei">
+    <div class="box-top">
+      <h4>选择最适合自己的服务</h4>
+      <p>直服无中介  价格透明  不下证即退款</p> 
+    </div>
+    <div class="box-bottom">
+      <div class="box box1" @mouseover="mrxz=1">
+        <div class="top">
+          <div :class="mrxz == 1 ? 'bjys active' : 'bjys'">
+            <h4>全托管</h4>
+          </div>
+          <span class="price">￥<em>{{ totalPrice1 }}</em>
+          </span>         
+              <div class="jianjie">
+                <i></i>
+                从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。
+              </div>
+
+          <!-- <p>加急办理800元</p> -->
+          <!-- <button type="button" value="500" @click="goToLink()" style="display: none;">立即购买</button> -->
+        </div>
+        <ul>
+          <!-- 1 -->
+          <li>
+            <i></i>
+            <h4>提供的服务：</h4>
+          </li>
+          <!-- 2 -->
+          <li>
+            <i>√</i>
+            <p>包可运行软件开发也搭建</p>
+          </li>
+          <!-- 3 -->
+          <li>
+            <i>√</i>
+            <p>包<em>鉴别材料
+              <div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
+            </em>撰写</p>
+          </li>
+          <!-- 4 -->
+          <li>
+            <i>√</i>
+            <p>包代办</p>
+          </li>
+          <!-- 5 -->
+          <li>
+            <i>√</i>
+            <p>包下证</p>
+          </li>
+          <!-- 6 -->
+          <li>
+            <i>√</i>
+            <p>包开发票</p>
+          </li>
+          <!-- 7 -->
+          <li>
+            <i>√</i>
+            <p>提供可运行软件安装包</p>
+          </li>
+          <!-- 8 -->
+          <li>
+            <i>√</i>
+            <p>提供可运行软件<em>云服务
+              <div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
+            </em></p>
+          </li>
+          <!-- 9 -->
+          <li>
+            <i>√</i>
+            <p>提供可运行软件演示视频</p>
+          </li>
+          <!-- 10 -->
+          <li>
+            <i>√</i>
+            <p>客服一对一服务</p>
+          </li>
+
+          <!-- 11 -->
+          <li>
+            <i></i>
+            <h4>使用流程：</h4>
+          </li>
+          <!-- 12 -->
+          <li>
+            <i>1</i>
+            <p>填写系统名称</p>
+          </li>
+          <!-- 13 -->
+          <li>
+            <i>2</i>
+            <p>填写基本信息</p>
+          </li>
+          <!-- 14 -->
+          <li>
+            <i>3</i>
+            <p>接收证书</p>
+          </li>
+          <!-- 15 -->
+          <li>
+            <span></span>
+          </li>
+          <!-- 16 -->
+          <li>
+            <input type="checkbox" id="chec1" value="800" v-model="additionalOptions1.chec11"
+            @change="updateTotalPrice1">
+            <p>加急办理800元</p>
+          </li>
+
+        </ul>
+      </div>
+      <div class="box box2" @mouseover="mrxz=2">
+        <div class="top">
+          <div :class="mrxz == 2 ? 'bjys active' : 'bjys'">
+            <h4>写材料并委托代办</h4>
+          </div>
+          <!-- <span>￥<em :value="basePrice21 + additionalOptionsPrice2">{{ basePrice21 + additionalOptionsPrice2 }}</em>起</span>
+          <p :value="basePrice22 + additionalOptionsPrice2">加急件{{ basePrice22 + additionalOptionsPrice2 }}元</p> -->
+          <span class="price">￥<em>{{ totalPrice21 }}</em></span>
+          <span class="jianjie">
+            <i></i>
+            通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，可委托平台合作代办机构进行办理。
+          </span>
+          <!-- <p>加急办理{{ totalPrice22 }}元</p> -->
+          <!-- <div class="btnlist">
+            <button type="button" class="btn box2btn1" :value="basePrice21 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">普件购买</button>
+            <button type="button" class="btn box2btn2" :value="basePrice22 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">加急购买</button>
+          </div> -->
+        </div>
+        <ul>
+          <!-- 1 -->
+          <li>
+            <i></i>
+            <h4>提供的服务：</h4>
+          </li>
+          <!-- 2 -->
+          <li>
+            <i>√</i>
+            <p>通过平台自己搭建可运行软件</p>
+          </li>
+          <!-- 3 -->
+          <li>
+            <i>√</i>
+            <p>平台自动撰写<em>鉴别材料
+              <div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
+            </em></p>
+          </li>
+          <!-- 4 -->
+          <li>
+            <i>√</i>
+            <p>包代办</p>
+          </li>
+          <!-- 5 -->
+          <li>
+            <i>√</i>
+            <p>包下证</p>
+          </li>
+          <!-- 6 -->
+          <li>
+            <i>√</i>
+            <p>包开发票</p>
+          </li>
+          <!-- 7 -->
+          <li>
+            <i>√</i>
+            <p>提供可运行软件<em>云服务
+              <div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
+            </em>600天</p>
+          </li>
+          <!-- 8 -->
+          <li>
+            <i>√</i>
+            <p>客服一对一服务</p>
+          </li>
+          <!-- 9 -->
+          <li>
+            <i></i>
+            <p></p>
+          </li>
+          <!-- 10 -->
+          <li>
+            <i></i>
+            <p></p>
+          </li>
+          <!-- 11 -->
+          <li>
+            <i></i>
+            <h4>使用流程：</h4>
+          </li>
+          <!-- 12 -->
+          <li>
+            <i>1</i>
+            <p>按系统操作流程执行</p>
+          </li>
+          <!-- 13 -->
+          <li>
+            <span></span>
+          </li>
+          <!-- 14 -->
+          <li>
+            <input type="checkbox" id="chec21" value="50" v-model="additionalOptions2.chec21"
+            @change="updateTotalPrice2">
+            <p>安装包50元</p>
+          </li>
+          <!-- 15 -->
+          <li>
+            <input type="checkbox" id="chec22" value="50" v-model="additionalOptions2.chec22"
+            @change="updateTotalPrice2">
+            <p>系统演示视频文件50元</p>
+          </li>
+          <!-- 16 -->
+          <li>
+            <input type="checkbox" id="chec23" value="800" v-model="additionalOptions2.chec23"
+            @change="updateTotalPrice2">
+            <p>加急办理800元</p>
+          </li>
+        </ul>
+      </div>
+      <div class="box box3" @mouseover="mrxz=3">
+        <div class="top">
+          <div :class="mrxz == 3 ? 'bjys active' : 'bjys'">
+            <h4>写材料</h4>
+          </div>
+          <!-- <span>￥<em :value="basePrice3 + additionalOptionsPrice3">{{ basePrice3 + additionalOptionsPrice3 }}</em></span> -->
+          <span class="price">￥<em>{{ totalPrice3 }}</em></span>
+          <span class="jianjie">
+            <i></i>
+            通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。
+          </span>
+          <!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
+        </div>
+        <ul>
+          <!-- 1 -->
+          <li>
+            <i></i>
+            <h4>提供的服务：</h4>
+          </li>
+          <!-- 2 -->
+          <li>
+            <i>√</i>
+            <p>通过平台自己搭建可运行软件</p>
+          </li>
+          <!-- 3 -->
+          <li>
+            <i>√</i>
+            <p>平台自动撰写<em>鉴别材料
+              <div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
+            </em></p>
+          </li>
+          <!-- 4 -->
+          <li>
+            <i>√</i>
+            <p>包补正材料撰写一直到下证</p>
+          </li>
+          <!-- 5 -->
+          <li>
+            <i>√</i>
+            <p>两次补正不通过平台退款</p>
+          </li>
+          <!-- 6 -->
+          <li>
+            <i>√</i>
+            <p>包开发票</p>
+          </li>
+          <!-- 7 -->
+          <li>
+            <i>√</i>
+            <p>提供可运行软件<em>云服务
+              <div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
+            </em>300天</p>
+          </li>
+          <!-- 8 -->
+          <li>
+            <i>√</i>
+            <p>客服一对一服务</p>
+          </li>
+          <!-- 9 -->
+          <li>
+            <i></i>
+            <p></p>
+          </li>
+          <!-- 10 -->
+          <li>
+            <i></i>
+            <p></p>
+          </li>
+
+          <!-- 11 -->
+          <li>
+            <i></i>
+            <h4>使用流程：</h4>
+          </li>
+          <!-- 12 -->
+          <li>
+            <i>1</i>
+            <p>按系统操作流程执行</p>
+          </li>
+          <!-- 13 -->
+          <li>
+            <span></span>
+          </li>
+          <!-- 14 -->
+          <li>
+            <input type="checkbox" id="chec31" value="50" v-model="additionalOptions3.chec31"
+            @change="updateTotalPrice3">
+            <p>安装包50元</p>
+          </li>
+          <!-- 15 -->
+          <li>
+            <input type="checkbox" id="chec32" value="50" v-model="additionalOptions3.chec32"
+            @change="updateTotalPrice3">
+            <p>系统演示视频文件50元</p>
+          </li>
+        </ul>
+      </div>
+      <div class="box box4" @mouseover="mrxz=4">
+        <div class="top">
+          <div :class="mrxz == 4 ? 'bjys active' : 'bjys'">
+            <h4>免费试用</h4>
+          </div>
+          <span class="price">￥<em>{{ totalPrice4 }}</em></span>
+          <span class="jianjie">
+            <i></i>
+            每个账户的免费试用次数为3次。免费试用主要目的是让您了解如何使用平台，可全过程体验。
+          </span>
+          <!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
+        </div>
+        <ul>
+          <!-- 1 -->
+          <li>
+            <i></i>
+            <h4>提供的服务：</h4>
+          </li>
+          <!-- 2 -->
+          <li>
+            <i>√</i>
+            <p>通过平台自己搭建可运行软件</p>
+          </li>
+          <!-- 3 -->
+          <li>
+            <i>√</i>
+            <p>平台自动撰写<em>鉴别材料
+              <div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
+            </em></p>
+          </li>
+          <!-- 4 -->
+          <li>
+            <i>√</i>
+            <p>提供可运行软件<em>云服务
+              <div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
+            </em>10天</p>
+          </li>
+          <!-- 5 -->
+          <li>
+            <i>√</i>
+            <p>客服一对一服务</p>
+          </li>
+          <!-- 6 -->
+           <li>
+            <i></i>
+            <p></p>
+           </li>
+          <!-- 7 -->
+           <li>
+            <i></i>
+            <p></p>
+           </li>
+          <!-- 8 -->
+           <li>
+            <i></i>
+            <p></p>
+           </li>
+          <!-- 9 -->
+           <li>
+            <i></i>
+            <p></p>
+           </li>
+          <!-- 10 -->
+           <li>
+            <i></i>
+            <p></p>
+           </li>
+
+          <!-- 11 -->
+          <li>
+            <i></i>
+            <h4>使用流程：</h4>
+          </li>
+          <!-- 12 -->
+          <li>
+            <i>1</i>
+            <p>按系统操作流程执行</p>
+          </li>
+          <!-- 13 -->
+          <li>
+            <span></span>
+          </li>
+          <!-- 14 -->
+          <li>
+            <input type="checkbox" id="chec4" value="0" v-model="additionalOptions4.chec4"/>
+            <!-- <p>系统演示视频文件50元</p> -->
+          </li>
+        </ul>
+      </div>
+     
+    </div>
+  </div>
+</template>
+
+<script>
+// import axios from 'axios'
+export default {
+  data() {
+    return {
+      mrxz: 1,
+      basePrice1: 280,
+      additionalOptions1: {
+        chec11: false,
+      },
+      basePrice21: 230,
+      basePrice22: 800,
+      additionalOptions2: {
+        chec21: false,
+        chec22: false,
+        chec23: false,
+      },
+      basePrice3: 180,
+      additionalOptions3: {
+        chec31: false,
+        chec32: false,
+      },
+      basePrice4: 0,
+      additionalOptions4: {
+        chec4: false,
+      }
+
+    }
+  },
+  methods: {
+    bjys() {
+
+    },
+    // goToLink() {
+    //   window.location.href = 'https://www.aimzhu.com/operator/';
+    // },
+    getButtonValue(event) {
+      // 获取按钮的value
+      console.log(event.target.value);
+    },
+
+    // updateTotalPrice2() {
+    //   // 更新第二项的总价格
+    //   this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions3);
+    //   this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions4);
+    // },
+    // updateTotalPrice3() {
+    //   // 更新第三项的总价格
+    //   this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions4);
+    //   this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions5);
+    // }
+
+    updateTotalPrice1() {
+      let price = 0;
+      if (this.additionalOptions1.chec11) price += 800;
+      this.additionalOptions1.total = price;
+    },
+    updateTotalPrice2() {
+      let price = 0;
+      if (this.additionalOptions2.chec21) price += 50;
+      if (this.additionalOptions2.chec22) price += 50;
+      if (this.additionalOptions2.chec23) price += 800;
+      this.additionalOptions2.total = price;
+    },
+    updateTotalPrice3() {
+      let price = 0;
+      if (this.additionalOptions3.chec31) price += 50;
+      if (this.additionalOptions3.chec32) price += 50;
+      this.additionalOptions3.total = price;
+    },
+    updateTotalPrice4() {
+      let price = 0;
+      if (this.additionalOptions3.chec4) price += 0;
+      this.additionalOptions4.total = price;
+    },
+
+  },
+  // mounted() {
+  //   this.dianji();
+  // },
+  computed: {
+    totalPrice1() {
+      return this.basePrice1 + (this.additionalOptions1.total || 0);
+    },
+    totalPrice21() {
+      return this.basePrice21 + (this.additionalOptions2.total || 0);
+    },
+    totalPrice22() {
+      return this.basePrice22 + (this.additionalOptions2.total || 0);
+    },
+    totalPrice3() {
+      return this.basePrice3 + (this.additionalOptions3.total || 0);
+    },
+    totalPrice4() {
+      return this.basePrice4 + (this.additionalOptions4.total || 0);
+    },
+    // additionalOptionsPrice2() {
+    //   // 计算附加选项的总价
+    //   return this.additionalOptions2.reduce((total, option) => total + parseInt(option), 0);
+    // },
+    // additionalOptionsPrice3() {
+    //   // 计算附加选项的总价
+    //   return this.additionalOptions3.reduce((total, option) => total + parseInt(option), 0);
+    // },
+
+    // totalPrice21() {
+    //   // 计算第二项普通件的总价
+    //   return this.basePrice21 + this.additionalOptionsPrice2;
+    // },
+    // totalPrice22() {
+    //   // 计算第二项加急件的总价
+    //   return this.basePrice22 + this.additionalOptionsPrice2;
+    // },
+    // totalPrice3() {
+    //   // 计算第三项的总价
+    //   return this.basePrice3 + this.additionalOptionsPrice3;
+    // }
+  },
+ 
+ 
+}
+</script>
+
+<style scoped>
+ img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  border: 0px solid transparent !important ;
+}
+.shou-fei {
+  position: relative;
+  background: url(/assets/img/shoufei-bj.png) no-repeat;
+  background-size: cover;
+  height: 1200px;
+}
+.shou-fei .box-top {
+  position: absolute;
+  top: 140px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 500px;
+  height: 100px;
+  /* background-color: pink; */
+  text-align: center;
+}
+
+.shou-fei .box-top h4 {
+  width: 500px;
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  color: #74491a;
+  margin-bottom: 15px;
+}
+.shou-fei .box-top p {
+  width: 500px;
+  font-size: 16px;
+  letter-spacing: 5px;
+  color: #9a7148;
+}
+.shou-fei .box-bottom {
+  position: absolute;
+  top: 270px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  display: flex;
+  justify-content: space-around;
+  width: 1200px;
+  height: 900px;
+  /* border: 1px solid red; */
+  
+}
+.shou-fei .box-bottom .box {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  height: 810px;
+  padding: 0px 0px;
+  background-color: #FFF;
+  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+.box .top {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  /* flex-wrap: wrap; */
+  width: 280px;
+  /* height: 200px; */
+  /* border: 1px solid red; */
+}
+/* .box-bottom .box:first-child .bjys {
+  background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
+  color: #FFFFFF ;
+} */
+.box .top .bjys {
+  width: 280px;
+  height: 50px;
+  background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
+  color: #5e3603;
+}
+.box .top .bjys.active {
+  background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
+  color: #FFFFFF ;
+}
+/* .box-bottom .box:hover .bjys{
+  background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
+  color: #FFFFFF ;
+}
+.box-bottom .box:hover ~ .bjys {
+  background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
+  color: #5e3603;
+} */
+.box .top h4 {
+  width: 280px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 22px;
+  /* color: #5e3603; */
+  /* margin-top: 25px; */
+  /* margin-left: 25px; */
+  /* margin-bottom: 20px; */
+ 
+}
+.box .top .price {
+  /* width: 150px; */
+  height: 50px;
+  font-size: 18px;
+  letter-spacing: 2px;
+  text-align: center;
+  margin: 15px auto;
+  /* margin-left: 50px; */
+  /* margin-bottom: 20px; */
+  color: #f77333;
+  /* background-color: skyblue; */
+}
+.box .top .price em {
+  font-size: 36px;
+  font-weight: 700;
+}
+.box .top .jianjie {
+  position: relative;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 110px;
+  margin: 0 20px;
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 15px;
+  color: #5e3603;
+  background-color: #fff6e7;
+  text-align: justify;
+  /* vertical-align: center; */
+}
+.box .top .jianjie i {
+  position: absolute;
+  top: -10px;
+  left: 115px;
+  width: 0;
+  height: 0;
+  border-left:10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom:10px solid #feedcc;
+}
+
+
+/* .box .top button {
+  width: 230px;
+  height: 50px;
+  margin: 0 10px;
+  margin-top: 30px;
+  background-color: #fcbb53;
+  border: none;
+  border-radius: 4px;
+  color: #FFF;
+  font-size: 18px;
+  cursor: pointer;
+}
+.box .top p,
+.box2 .top p {
+  text-align: center;
+  font-size: 14px;
+  color: #8f8f8f;
+}
+.box2 .top button {
+  margin-top: 0px;
+}
+.box2 .top .btnlist {
+  display: flex;
+  justify-content: space-around;
+  width: 250px;
+  margin-top: 10px;
+}
+.box .top .btn {
+  width: 110px;
+}
+.box .top button:hover {
+  font-size: 20px;
+  font-weight: 700;
+} */
+
+
+
+.box ul {
+  margin: 5px 20px;
+  /* background-color: pink; */
+}
+.box ul li {
+  /* height: 24px; */
+  font-size: 14px;
+  line-height: 26px;
+  display: flex;
+  /* background-color: green; */
+  margin: 5px 0;
+}
+
+.box ul li i {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 10px;
+  color: #f6783a;
+  /* margin-right: 8px;
+  margin-left: 8px; */
+  margin: 3px 8px;
+  background-color: #fee9d1;
+  /* background: url(/assets/img/shoufei-dg.png) no-repeat;
+  background-size: cover; */
+}
+.box ul li h4 {
+  font-size: 18px;
+  font-weight: 700;
+}
+.box ul li p {
+  /* display: block; */
+  color: #6b4516;
+}
+.box ul li p em {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  color: #F7AC3B;
+}
+.box ul li p #em {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  color: #F7AC3B;
+}
+
+.box ul li p em .detail {
+  display: none;
+  position: absolute;
+  top: 25px;
+  /* left: 50%; */
+  /* transform: translate(-30%, 0%); */
+  width: 250px;
+  padding: 5px 10px;
+  text-align: justify;
+  color: #5F3B00;
+  background-color: rgba(255,232,192,.7);
+  /* border: 1px solid rgba(0,0,0,.2); */
+}
+
+.box ul li p em:hover .detail {
+  display: block;
+}
+.box1 ul li:nth-child(1),
+.box1 ul li:nth-child(11),
+.box2 ul li:nth-child(1),
+.box2 ul li:nth-child(11),
+.box3 ul li:nth-child(1),
+.box3 ul li:nth-child(11),
+.box4 ul li:nth-child(1),
+.box4 ul li:nth-child(11) {
+  /* background-color: transparent;
+  display: none; */
+  height: 36px;
+  line-height: 36px;
+  color: #694618;
+}
+.box1 ul li:nth-child(1) i,
+.box1 ul li:nth-child(11) i,
+.box2 ul li:nth-child(1) i,
+.box2 ul li:nth-child(11) i,
+.box3 ul li:nth-child(1) i,
+.box3 ul li:nth-child(11) i,
+.box4 ul li:nth-child(1) i,
+.box4 ul li:nth-child(11) i {
+  background-color: transparent;
+  display: none;
+}
+.box1 ul li:nth-child(12) i,
+.box1 ul li:nth-child(13) i,
+.box1 ul li:nth-child(14) i,
+.box2 ul li:nth-child(12) i
+ {
+  background: none;
+  background-color: #fee9d1;
+  color: #f6783a;
+}
+
+.box1 ul li:nth-child(16),
+.box2 ul li:nth-child(14),
+.box2 ul li:nth-child(15),
+.box2 ul li:nth-child(16),
+.box3 ul li:nth-child(14),
+.box3 ul li:nth-child(15) {
+  /* background-color: pink; */
+  font-weight: 300;
+  font-size: 14px;
+  margin: 3px 0;
+}
+.box1 ul li:nth-child(16),
+.box2 ul li:nth-child(14),
+.box3 ul li:nth-child(14) {
+  margin-top: 10px;
+}
+.box1 ul li:nth-child(16) input[type='checkbox'],
+.box2 ul li:nth-child(14) input[type="checkbox"],
+.box2 ul li:nth-child(15) input[type="checkbox"],
+.box2 ul li:nth-child(16) input[type="checkbox"],
+.box3 ul li:nth-child(14) input[type="checkbox"],
+.box3 ul li:nth-child(15) input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  margin: 4px 10px 4px 11px;  
+}
+
+.box1 ul li:nth-child(15) span,
+.box2 ul li:nth-child(13) span,
+.box3 ul li:nth-child(13) span {
+  display: block;
+  width: 230px;
+  height: 2px;
+  margin-top: 10px ;
+  background-color: #f9f9f9;
+}
+.box4 ul li:nth-child(13),
+.box4 ul li:nth-child(14) {
+  display: none;
+}
+.box2 ul li:nth-child(9) i,
+.box2 ul li:nth-child(10) i,
+.box3 ul li:nth-child(9) i,
+.box3 ul li:nth-child(10) i,
+.box4 ul li:nth-child(6) i,
+.box4 ul li:nth-child(7) i,
+.box4 ul li:nth-child(8) i,
+.box4 ul li:nth-child(9) i,
+.box4 ul li:nth-child(10) i {
+  background-color: transparent;
+}
+
+
+</style>

src/components/ShouFei.vue

@@ -2,250 +2,62 @@
   <div class="shou-fei">
     <div class="box-top">
       <h4>选择最适合自己的服务</h4>
-      <p>灵活搭建更高效的著作权办理平台</p> 
+      <p>直服无中介  价格透明  不下证即退款</p> 
     </div>
     <div class="box-bottom">
-      <div class="box box1">
+      <div class="box box1" @mouseover="activeIndex = index" v-for="(item, index) in contentList" :key="index" :class="{ 'active': activeIndex === index }">
         <div class="top">
-          <h4>全托</h4>
+          <div class="bjys" :class="{ 'active': activeIndex === index }">
-          <span>￥<em>380</em></span>
+            <h4>{{ item.title }}</h4>
-          <p>加急件1000元</p>
-          <button type="button" value="500" @click="goToLink()" style="display: none;">立即购买</button>
           </div>
-        <ul>
+          <span class="price">￥<em>{{ item.computedPrice }}</em>
-          <!-- 1 -->
+          </span>         
-          <li>
+              <div class="jianjie">
                 <i></i>
-            <h4>提供的服务：</h4>
+                {{ item.intro }}
-          </li>
+              </div>
-          <!-- 2 -->
+        </div>
-          <li>
+        <div class="serve">
+          <h5>提供的服务：</h5>
+          <ul class="serveList">
+            <li v-for="(item1, index) in item.severList" :key="index">
               <i>√</i>
-            <p>提供系统搭建</p>
+              <div class="serveContent" @mouseover="setHoverText(item1.highlight, index)" @mouseleave="hoverText = ''">
-          </li>
+                <!-- {{ item1.serve }} -->
-          <!-- 3 -->
+                <span>{{ item1.serve.slice(0, item1.start) }}</span>
-          <li>
+                <span :class="{ 'highlight': item1.highlight }" @mouseover="setHoverText(item1.highlight, index)" @mouseleave="clearHoverText">{{ item1.serve.slice(item1.start, item1.end) }}</span>
-            <i>√</i>
+                <span>{{ item1.serve.slice(item1.end) }}</span>
-            <p>系统可在线运行三年</p>
+              </div>
-          </li>
+              <div v-if="hoverText === item1.highlight && hoverIndex === index" class="tooltip">{{ item1.tooltip }}</div>
-          <!-- 4 -->
-          <li>
-            <i>√</i>
-            <p>软著材料编写</p>
-          </li>
-          <!-- 5 -->
-          <li>
-            <i>√</i>
-            <p>软著申报</p>
-          </li>
-          <!-- 6 -->
-          <li>
-            <i>√</i>
-            <p>包下证</p>
-          </li>
-          <!-- 7 -->
-          <li>
-            <i>√</i>
-            <p>提供系统演示视频文件</p>
-          </li>
-          <!-- 8 -->
-          <li>
-            <i>√</i>
-            <p>提供系统安装包</p>
-          </li>
-          <!-- 9 -->
-          <li>
-            <i></i>
-            <h4>使用流程：</h4>
-          </li>
-          <!-- 10 -->
-          <li>
-            <i>1</i>
-            <p>编写软著名称</p>
-          </li>
-          <!-- 11 -->
-          <li>
-            <i>2</i>
-            <p>对搭建系统进行核验</p>
-          </li>
-          <!-- 12 -->
-          <li>
-            <i>3</i>
-            <p>接受证书</p>
             </li>
           </ul>
         </div>
-      <div class="box box2">
+        <div class="flow">
-        <div class="top">
+          <h5>使用流程：</h5>
-          <h4>写材料+代理</h4>
+          <ul class="flowList">
-          <!-- <span>￥<em :value="basePrice21 + additionalOptionsPrice2">{{ basePrice21 + additionalOptionsPrice2 }}</em>起</span>
+            <li v-for="(item2, index) in item.flowList" :key="index">
-          <p :value="basePrice22 + additionalOptionsPrice2">加急件{{ basePrice22 + additionalOptionsPrice2 }}元</p> -->
+              <i>{{ item2.id }}</i>
-          <span>￥<em>{{ totalPrice21 }}</em>起</span>
+              <div class="flowContent">{{ item2.flow }}</div>
-          <p>加急件{{ totalPrice22 }}元</p>
-          <!-- <div class="btnlist">
-            <button type="button" class="btn box2btn1" :value="basePrice21 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">普件购买</button>
-            <button type="button" class="btn box2btn2" :value="basePrice22 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">加急购买</button>
-          </div> -->
-        </div>
-        <ul>
-          <!-- 1 -->
-          <li>
-            <i></i>
-            <h4>提供的服务：</h4>
-          </li>
-          <!-- 2 -->
-          <li>
-            <i>√</i>
-            <p>提供系统搭建平台与客服指导</p>
-          </li>
-          <!-- 3 -->
-          <li>
-            <i>√</i>
-            <p>系统可在线运行一年</p>
-          </li>
-          <!-- 4 -->
-          <li>
-            <i>√</i>
-            <p>软著材料编写</p>
-          </li>
-          <!-- 5 -->
-          <li>
-            <i>√</i>
-            <p>资料补正不限</p>
-          </li>
-          <!-- 6 -->
-          <li>
-            <i>√</i>
-            <p>软著申报</p>
-          </li>
-          <!-- 7 -->
-          <li>
-            <i>√</i>
-            <p>包下证</p>
-          </li>
-          <!-- 8 -->
-          <li>
-            <i></i>
-            <h4>使用流程：</h4>
-          </li>
-          <!-- 9 -->
-          <li>
-            <i>1</i>
-            <p>按系统操作手册执行</p>
-          </li>
-          <!-- 10 -->
-          <li>
-            <span></span>
-          </li>
-          <!-- 11 -->
-          <li>
-            <input type="checkbox" id="chec1" value="50" v-model="additionalOptions2.chec1"
-            @change="updateTotalPrice2">
-            <p>安装包50元</p>
-          </li>
-          <!-- 12 -->
-          <li>
-            <input type="checkbox" id="chec2" value="50" v-model="additionalOptions2.chec2"
-            @change="updateTotalPrice2">
-            <p>系统演示视频文件50元</p>
             </li>
           </ul>
         </div>
-      <div class="box box3">
+        <div class="fgx"></div>
-        <div class="top">
+        <div class="chec">
-          <h4>写材料</h4>
+          <ul class="checList">
-          <!-- <span>￥<em :value="basePrice3 + additionalOptionsPrice3">{{ basePrice3 + additionalOptionsPrice3 }}</em></span> -->
+            <li v-for="(item3, index) in item.checList" :key="index">
-          <span>￥<em>{{ totalPrice3 }}</em></span>
+              <input type="checkbox" :value="item3.price" v-model="item3.checked">
-          <!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
+              <p>{{ item3.chec }}</p>
-        </div>
-        <ul>
-          <!-- 1 -->
-          <li>
-            <i></i>
-            <h4>提供的服务：</h4>
-          </li>
-          <!-- 2 -->
-          <li>
-            <i>√</i>
-            <p>提供系统搭建平台与客服指导</p>
-          </li>
-          <!-- 3 -->
-          <li>
-            <i>√</i>
-            <p>系统可在线运行一年</p>
-          </li>
-          <!-- 4 -->
-          <li>
-            <i>√</i>
-            <p>软著材料编写</p>
-          </li>
-          <!-- 5 -->
-          <li>
-            <i>√</i>
-            <p>资料补正三次</p>
-          </li>
-          <!-- 6 -->
-          <li>
-            <i></i>
-            <h4>使用流程：</h4>
-          </li>
-          <!-- 7 -->
-          <li>
-            <i>1</i>
-            <p>按系统操作手册执行</p>
-          </li>
-          <!-- 8 -->
-          <li>
-            <span></span>
-          </li>
-          <!-- 9 -->
-          <li>
-            <input type="checkbox" id="chec3" value="50" v-model="additionalOptions3.chec3"
-            @change="updateTotalPrice3">
-            <p>安装包50元</p>
-          </li>
-          <!-- 10 -->
-          <li>
-            <input type="checkbox" id="chec4" value="50" v-model="additionalOptions3.chec4"
-            @change="updateTotalPrice3">
-            <p>系统演示视频文件50元</p>
             </li>
           </ul>
         </div>
-      <div class="box box4">
+
-        <div class="top">
+
-          <h4>免费试用</h4>
+
-          <span>￥<em>0</em></span>
+
-          <button type="button" value="0" @click="goToLink()" style="display: none;">立即使用</button>
+        
-        </div>
-        <ul>
-          <!-- 1 -->
-          <li>
-            <i></i>
-            <h4>提供的服务：</h4>
-          </li>
-          <!-- 2 -->
-          <li>
-            <i>√</i>
-            <p>提供系统搭建平台与客服指导</p>
-          </li>
-          <!-- 3 -->
-          <li>
-            <i>√</i>
-            <p>系统可在线存储三天</p>
-          </li>
-          <!-- 4 -->
-          <li>
-            <i></i>
-            <h4>使用流程：</h4>
-          </li>
-          <!-- 5 -->
-          <li>
-            <i>1</i>
-            <p>按系统操作手册执行</p>
-          </li>
-        </ul>
       </div>
+     
+     
     </div>
   </div>
 </template>
@@ -255,90 +67,113 @@
 export default {
   data() {
     return {
-      basePrice1: 500,
+      activeIndex: 0, // 默认第一个div是活跃的
-      basePrice21: 300,
+      hoverText: '', // 用于追踪当前鼠标悬停的文本
-      basePrice22: 1000,
+      hoverIndex: -1,
-      additionalOptions2: {
+      content: [
-        chec1: false,
+        {title: '全托管', priceSum: 280, intro: '从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。',
-        chec2: false,
+          severList: [
+            {serve: '包可运行软件开发与搭建', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '包鉴别材料撰写', highlight: '鉴别材料', start: 1, end: 5, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
+            {serve: '包代办', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '包下证', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '提供可运行软件安装包', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '提供可运行软件云服务900天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
+            {serve: '提供可运行软件演示视频', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
+          ],
+          flowList: [
+          {id: 1, flow: '填写系统名称'},
+          {id: 2, flow: '填写基本信息'},
+          {id: 3, flow: '接收证书'},
+          ],
+          checList: [
+          {chec: '加急办理800元', price: 800}, 
+          ]
         },
-      basePrice3: 180,
+        {title: '写材料并委托代办', priceSum: 230, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，可委托平台合作代办机构进行办理。',
-      additionalOptions3: {
+          severList: [
-        chec3: false,
+            {serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
-        chec4: false,
+            {serve: '平台自动撰写鉴别材料', highlight: '鉴别材料', start: 6, end: 10, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
+            {serve: '包代办', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '包下证', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '提供可运行软件云服务600天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
+            {serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
+          ],
+          flowList: [
+          {id: 1, flow: '按系统操作流程执行'}
+          ],
+          checList: [
+          {chec: '加急办理800元', price: 800},
+          {chec: '安装包50元', price: 50},  
+          {chec: '系统演示视频文件50元', price: 50},  
+          ]
+        },
+        {title: '写材料', priceSum: 180, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。',
+          severList: [
+            {serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '平台自动撰写鉴别材料', highlight: '鉴别材料', start: 6, end: 10, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
+            {serve: '包补正材料撰写一直到下证', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '两次补正不通过平台退款', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '提供可运行软件云服务300天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
+            {serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
+          ],
+          flowList: [
+          {id: 1, flow: '按系统操作流程执行'}
+          ],
+          checList: [
+          {chec: '安装包50元', price: 50},  
+          {chec: '系统演示视频文件50元', price: 50},  
+          ]
+        },
+        {title: '免费试用', priceSum: 0, intro: '每个账户的免费试用次数为3次。免费试用主要目的是让您了解如何使用平台，可全过程体验。',
+          severList: [
+            {serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '平台自动撰写鉴别材料', highlight: '鉴别材料', start: 6, end: 10, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
+            {serve: '提供可运行软件云服务10天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
+            {serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
+          ],
+          flowList: [
+          {id: 1, flow: '按系统操作流程执行'}
+          ],
+          checList: []
         },
         
-
+      ]
     }    
   },
   methods: {
-    // goToLink() {
+    setHoverText(text, index) {
-    //   window.location.href = 'https://www.aimzhu.com/operator/';
+      if (text) {
-    // },
+        this.hoverText = text;
-    getButtonValue(event) {
+        this.hoverIndex = index;
-      // 获取按钮的value
+      } else {
-      console.log(event.target.value);
+        this.clearHoverText();
+      }
     },
-
+    clearHoverText() {
-    // updateTotalPrice2() {
+      this.hoverText = '';
-    //   // 更新第二项的总价格
+      this.hoverIndex = -1;
-    //   this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions3);
-    //   this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions4);
-    // },
-    // updateTotalPrice3() {
-    //   // 更新第三项的总价格
-    //   this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions4);
-    //   this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions5);
-    // }
-
-    updateTotalPrice2() {
-      let price = 0;
-      if (this.additionalOptions2.chec1) price += 50;
-      if (this.additionalOptions2.chec2) price += 50;
-      this.additionalOptions2.total = price;
-    },
-    updateTotalPrice3() {
-      let price = 0;
-      if (this.additionalOptions3.chec3) price += 50;
-      if (this.additionalOptions3.chec4) price += 50;
-      this.additionalOptions3.total = price;
     },
 
   },
-  // mounted() {
+
-  //   this.dianji();
-  // },
   computed: {
-    totalPrice21() {
+    contentList() {
-      return this.basePrice21 + (this.additionalOptions2.total || 0);
+      return this.content.map(service => {
-    },
+        const additionalPrice = service.checList.reduce((sum, option) => {
-    totalPrice22() {
+          return option.checked ? sum + option.price : sum;
-      return this.basePrice22 + (this.additionalOptions2.total || 0);
+        }, 0);
-    },
+        return {
-    totalPrice3() {
+          ...service,
-      return this.basePrice3 + (this.additionalOptions3.total || 0);
+          computedPrice: service.priceSum + additionalPrice
-    },
+        };
-    // additionalOptionsPrice2() {
+      });
-    //   // 计算附加选项的总价
+    }
-    //   return this.additionalOptions2.reduce((total, option) => total + parseInt(option), 0);
-    // },
-    // additionalOptionsPrice3() {
-    //   // 计算附加选项的总价
-    //   return this.additionalOptions3.reduce((total, option) => total + parseInt(option), 0);
-    // },
 
-    // totalPrice21() {
-    //   // 计算第二项普通件的总价
-    //   return this.basePrice21 + this.additionalOptionsPrice2;
-    // },
-    // totalPrice22() {
-    //   // 计算第二项加急件的总价
-    //   return this.basePrice22 + this.additionalOptionsPrice2;
-    // },
-    // totalPrice3() {
-    //   // 计算第三项的总价
-    //   return this.basePrice3 + this.additionalOptionsPrice3;
-    // }
   },
  
  
@@ -356,7 +191,8 @@ export default {
   position: relative;
   background: url(/assets/img/shoufei-bj.png) no-repeat;
   background-size: cover;
-  height: 1100px;
+  height: 1200px;
+  /* font-family: '楷体'; */
 }
 .shou-fei .box-top {
   position: absolute;
@@ -385,13 +221,13 @@ text-align: center;
 }
 .shou-fei .box-bottom {
   position: absolute;
-  top: 300px;
+  top: 270px;
   left: 50%;
   transform: translate(-50%, 0);
   display: flex;
   justify-content: space-around;
   width: 1200px;
-  height: 700px;
+  height: 900px;
   /* border: 1px solid red; */
   
 }
@@ -399,8 +235,8 @@ text-align: center;
   display: flex;
   flex-direction: column;
   width: 280px;
-  height: 660px;
+  height: 810px;
-  padding: 20px 15px;
+  padding: 0px 0px;
   background-color: #FFF;
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -411,169 +247,232 @@ text-align: center;
   flex-direction: column;
   align-content: center;
   /* flex-wrap: wrap; */
-  width: 250px;
+  width: 280px;
-  height: 200px;
+  /* height: 200px; */
   /* border: 1px solid red; */
 }
-.box .top h4 {
+
-  width: 200px;
+.box .top .bjys {
-  height: 40px;
+  width: 280px;
-  line-height: 40px;
+  height: 50px;
-  text-align: center;
+  background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
-  font-size: 26px;
   color: #5e3603;
-  margin-top: 25px;
-  margin-left: 25px;
-  margin-bottom: 20px;
-  /* background-color: pink; */
 }
-.box .top span {
+.box .top .bjys.active {
-  width: 150px;
+  background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
+  color: #FFFFFF ;
+}
+
+.box .top h4 {
+  width: 280px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+ 
+}
+.box .top .price {
   height: 50px;
   font-size: 18px;
   letter-spacing: 2px;
   text-align: center;
-  margin-left: 50px;
+  margin: 15px auto;
-  /* margin-bottom: 20px; */
   color: #f77333;
-  /* background-color: skyblue; */
 }
-.box .top span em {
+.box .top .price em {
   font-size: 36px;
   font-weight: 700;
 }
-.box .top button {
+.box .top .jianjie {
-  width: 230px;
+  position: relative;
-  height: 50px;
+  flex-wrap: wrap;
-  margin: 0 10px;
-  margin-top: 30px;
-  background-color: #fcbb53;
-  border: none;
-  border-radius: 4px;
-  color: #FFF;
-  font-size: 18px;
-  cursor: pointer;
-}
-.box .top p,
-.box2 .top p {
-  text-align: center;
-  font-size: 14px;
-  color: #8f8f8f;
-}
-.box2 .top button {
-  margin-top: 0px;
-}
-.box2 .top .btnlist {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
-  width: 250px;
+  align-content: center;
-  margin-top: 10px;
+  height: 110px;
+  margin: 0 20px;
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 15px;
+  color: #5e3603;
+  background-color: #fff6e7;
+  text-align: justify;
+  /* vertical-align: center; */
 }
-.box .top .btn {
+.box .top .jianjie i {
-  width: 110px;
+  position: absolute;
+  top: -10px;
+  left: 115px;
+  width: 0;
+  height: 0;
+  border-left:10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom:10px solid #feedcc;
 }
-.box .top button:hover {
+.box .serve {
-  font-size: 20px;
+  margin: 5px 20px;
-  font-weight: 700;
-}
-
-
-
-.box ul {
-  margin: 5px 10px;
   /* background-color: pink; */
 }
-.box ul li {
+.box .serve h5 {
-  /* height: 24px; */
+  font-size: 18px;
+  font-weight: 700;
+  height: 36px;
+  line-height: 36px;
+  color: #694618;
+}
+.box .serve .serveList {
+  /* background-color: skyblue; */
+  margin: 5px 0 0 10px;
+  height: 290px;
+}
+.box .serve .serveList li {
   font-size: 14px;
   line-height: 26px;
   display: flex;
-  /* background-color: green; */
   margin: 5px 0;
 }
-
+.box .serve .serveList li i {
-.box ul li i {
   width: 20px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   border-radius: 10px;
   color: #f6783a;
-  /* margin-right: 8px;
-  margin-left: 8px; */
   margin: 3px 8px;
   background-color: #fee9d1;
-  /* background: url(/assets/img/shoufei-dg.png) no-repeat;
-  background-size: cover; */
 }
-.box ul li h4 {
+.box .serve .serveList li .serveContent {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+.box .flow {
+  margin: 0 20px 5px 20px;
+  /* background-color: rgb(149, 238, 149); */
+}
+.box .flow h5 {
   font-size: 18px;
   font-weight: 700;
-}
-.box ul li p {
-  color: #6b4516;
-}
-.box1 ul li:nth-child(1),
-.box1 ul li:nth-child(9),
-.box2 ul li:nth-child(1),
-.box2 ul li:nth-child(8),
-.box3 ul li:nth-child(1),
-.box3 ul li:nth-child(6),
-.box4 ul li:nth-child(1),
-.box4 ul li:nth-child(4) {
   height: 36px;
   line-height: 36px;
   color: #694618;
 }
-.box1 ul li:nth-child(1) i,
+.box .flow .flowList {
-.box1 ul li:nth-child(9) i,
+  /* background-color: skyblue; */
-.box2 ul li:nth-child(1) i,
+  margin: 5px 0 0 10px;
-.box2 ul li:nth-child(8) i,
-.box3 ul li:nth-child(1) i,
-.box3 ul li:nth-child(6) i,
-.box4 ul li:nth-child(1) i,
-.box4 ul li:nth-child(4) i {
-  background-color: transparent;
-  display: none;
 }
-.box1 ul li:nth-child(10) i,
+.box .flow .flowList li {
-.box1 ul li:nth-child(11) i,
-.box1 ul li:nth-child(12) i {
-  background: none;
-  background-color: #fee9d1;
-  color: #f6783a;
-}
-
-.box2 ul li:nth-child(11),
-.box2 ul li:nth-child(12),
-.box3 ul li:nth-child(9),
-.box3 ul li:nth-child(10) {
-  /* background-color: pink; */
-  font-weight: 300;
   font-size: 14px;
-  margin: 3px 0;
+  line-height: 26px;
+  display: flex;
+  margin: 5px 0;
 }
-.box2 ul li:nth-child(11),
+.box .flow .flowList li i {
-.box3 ul li:nth-child(9) {
+  width: 20px;
-  margin-top: 10px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 10px;
+  color: #f6783a;
+  margin: 3px 8px;
+  background-color: #fee9d1;
 }
-.box2 ul li:nth-child(11) input[type="checkbox"],
+.box .flow .flowList li .flowContent {
-.box2 ul li:nth-child(12) input[type="checkbox"],
+  position: relative;
-.box3 ul li:nth-child(9) input[type="checkbox"],
+  display: inline-block;
-.box3 ul li:nth-child(10) input[type="checkbox"] {
+  cursor: pointer;
+}
+.box .fgx {
+  display: flex;
+  margin: 5px 20px;
+  width: 240px;
+  height: 2px;
+  background-color: #f9f9f9;
+  /* background-color: red; */
+}
+.box .chec {
+  margin: 0px 20px;
+  /* background-color: pink; */
+}
+.box .chec .checList {
+  margin: 0 5px;
+}
+.box .chec .checList li {
+  display: flex;
+  height: 26px;
+}
+.box .chec .checList li input[type="checkbox"] {
   width: 16px;
   height: 16px;
   margin: 4px 10px 4px 11px; 
 }
-
+.box .chec .checList li p {
-.box2 ul li:nth-child(10) span,
+  font-size: 14px;
-.box3 ul li:nth-child(8) span {
+  line-height: 26px;
-  display: block;
+  color: #6b4516;
-  width: 230px;
-  height: 2px;
-  margin-top: 10px ;
-  background-color: #f9f9f9;
 }
 
+.highlight {
+  color: #F7AC3B;
+  cursor: pointer; 
+}
 
+.tooltip {
+  position: absolute; 
+  top: 26px;
+  background-color: rgba(255,232,192,.9);
+  color: #5F3B00;
+  padding: 10px;
+  display: none; 
+  z-index: 10;
+}
+
+/* .serveContent {
+  position: relative; 
+} */
+.serveList li {
+  position: relative !important; 
+}
+
+.serveContent:hover +.tooltip {
+  display: block;
+}
+
+/* .tooltip {
+  position: absolute;
+  background-color: #f9f9f9;
+  border: 1px solid #d4d4d4;
+  padding: 10px;
+  display: none;
+}
+.serveContent {
+  position: relative;
+}
+
+.serveContent:hover +.tooltip {
+  display: block;
+} */
+
+/* .box ul li p em {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  color: #F7AC3B;
+}
+
+.box ul li p em .detail {
+  display: none;
+  position: absolute;
+  top: 25px;
+  width: 250px;
+  padding: 5px 10px;
+  text-align: justify;
+  color: #5F3B00;
+  background-color: rgba(255,232,192,.7);
+}
+
+.box ul li p em:hover .detail {
+  display: block;
+} */
 </style>

src/components/UserAgreement.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
-  <title>用户服务协议</title>
+  <title id="HTMLBT">AI秒著引擎</title>
   <style>
     * {
       margin: 0;
@@ -58,13 +58,14 @@
   </div>
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
-
+    const htmlBT = document.querySelector('#HTMLBT')
     const content = document.querySelector('#content')
     const title = document.querySelector('#title')
     axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/68eee8f5-33d3-4246-aeee-a33956677101').then(response => {
       // this.data = response.data;
       // this.title = response.data.title;
       // this.data = response.data.content;
+      htmlBT.innerHTML = response.data.title
       title.innerHTML = response.data.title
       content.innerHTML = response.data.content
       console.log(response.data);

src/components/floatPage.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
+  <title id="HTMLBT">AI秒著引擎</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    em,
+    i {
+      font-style: normal;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    ul,
+    li,
+    ol {
+      list-style: none;
+    }
+
+    #app {
+      width: 1000px;
+      margin: 0 auto;
+      /* border: 1px solid #333; */
+      padding-top: 50px;
+      padding-bottom: 40px;
+    }
+
+    #title {
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      margin-bottom: 15px;
+      /* border: 1px solid red; */
+    }
+
+    #content {
+      line-height: 35px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <h2 id="title"></h2>
+    <!-- <h2 id="title" v-html="title"></h2> -->
+    <div id="content"></div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script>
+    const htmlBT = document.querySelector('#HTMLBT')
+    const content = document.querySelector('#content')
+    const title = document.querySelector('#title')
+    axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
+      // this.data = response.data;
+      // this.title = response.data.title;
+      // this.data = response.data.content;
+      htmlBT.innerHTML = response.data[0].title
+      title.innerHTML = response.data[0].title
+      content.innerHTML = response.data[0].content
+      console.log(response.data);
+      // console.log(response.data.agreementType);
+      // console.log(response.data.content);
+
+    }).catch(error => {
+      console.error(error);
+    });
+
+
+
+  </script>
+</body>
+
+</html>