修改了收费界面，添加了APP电子软著和商标注册路由（未完成）

src/components/AppDZSoftware.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="appdz-software">
+    <div class="box-top">
+        <div class="title">
+          <h4>电子版权认证联合服务平台</h4>
+          <p>基于区块链技术提供电子版权认证服务</p>
+          <p>为APP上架应用市场提供有效的版权证明</p>
+        </div>
+      </div>
+      <div class="box-bottom">
+        <div class="box">
+          <div class="box1"></div>
+          <div class="box2"></div>
+          <div class="box3"></div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+ img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  border: 0px solid transparent !important ;
+}
+.appdz-software {
+  position: relative;
+}
+.appdz-software .box-top {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 7.5625rem;
+  background: url(/assets/img/zhengshu-bj.png) no-repeat;
+  background-size: cover;
+}
+.appdz-software .box-top .title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 12.5rem;
+  height: 1.875rem;
+  margin: 0 auto;
+  /* border: 2px solid red; */
+}
+.appdz-software .box-top h4 {
+  width: 6.25rem;
+  font-size: .375rem;
+  color: #74491a;
+  margin-bottom: .125rem;
+}
+.appdz-software .box-top p {
+  width: 6.25rem;
+  font-size: .2rem;
+  letter-spacing: .0125rem;
+  color: #9a7148;
+}
+.appdz-software .box-bottom {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 13rem;
+  background-color: #f5f5f5;
+}
+.appdz-software .box-bottom .box {
+  /* position: absolute; */
+  position: relative;
+  top: -2.5rem;
+  bottom: .625rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 12.5rem;
+  height: 13rem;
+  background-color: #FFF;
+  padding: .5rem;
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+}
+.appdz-software .box-bottom .box .box1 {
+  width: 100%;
+  height: 3rem;
+  background-color: pink;
+}
+.appdz-software .box-bottom .box .box2 {
+  width: 100%;
+  height: 3rem;
+  background-color: pink;
+}
+.appdz-software .box-bottom .box .box3 {
+  width: 100%;
+  height: 3rem;
+  background-color: pink;
+}
+</style>

src/components/HeaderNav.vue

@@ -12,6 +12,8 @@
 
           <li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
           <li><router-link to="/ShouFei"  @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
+          <li><router-link to="/AppDZSoftware"  @click="activate" :class="{ active: $route.path === '/AppDZSoftware' }">App电子软著</router-link></li>
+          <li><router-link to="/TM" @click="activate" :class="{ active: $route.path === '/TM' }">商标注册</router-link></li>
           <li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
           <li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
           <!-- <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li> -->

src/components/ShouFei.vue

@@ -12,9 +12,21 @@
           </div>
           <span class="price">￥<em>{{ item.computedPrice }}</em>
           </span>         
-              <div class="jianjie">
+              <!-- <div class="jianjie">
                 <i></i>
                 {{ item.intro }}
+              </div> -->
+
+              <div class="jianjie">
+                <i></i>
+                <template v-if="item.introHighlight">
+                  <span>{{ item.intro.slice(0, item.introHighlight.start) }}</span>
+                  <span class="highlight-red">{{ item.intro.slice(item.introHighlight.start, item.introHighlight.end) }}</span>
+                  <span>{{ item.intro.slice(item.introHighlight.end) }}</span>
+                </template>
+                <template v-else>
+                  {{ item.intro }}
+                </template>
               </div>
         </div>
         <div class="serve">
@@ -93,23 +105,29 @@ export default {
           {chec: '加急办理800元', price: 800}, 
           ]
         },
-        {title: '写材料并委托代办', priceSum: 230, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，可委托平台合作代办机构进行办理。',
+        {title: 'APP电子软著', priceSum: '400~460', intro: 'App软著认证电子版权是兼容软著认证证书的电子版权认证证书，在移动互联网App上架审核中可作为有效的软件版权证明材料。',
+          introHighlight: {
+            start: 31,   // 高亮部分开始索引
+            end: 43      // 高亮部分结束索引
+          },
           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: '提供可运行软件云服务600天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
+            {serve: '提供当天出证、1个工作日、3个工作日、10-15个工作日出证', highlight: '',start: '', end: '', tooltip: ''},
+            {serve: '提供担保下证，不下载双倍返还订单金额', highlight: '',start: '', end: '', tooltip: ''},
             {serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
           ],
           flowList: [
           {id: 1, flow: '按系统操作流程执行'}
           ],
           checList: [
-          {chec: '加急办理800元', price: 800},
+          {chec: '', price: 800},
-          {chec: '安装包15元', price: 15},  
+          {chec: '', price: 15},  
-          {chec: '系统演示视频文件15元', price: 15},  
+          {chec: '', price: 15},  
+          // {chec: '加急办理800元', price: 800},
+          // {chec: '安装包15元', price: 15},  
+          // {chec: '系统演示视频文件15元', price: 15},  
           ]
         },
         {title: '写材料', priceSum: '30~8', intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。',
@@ -290,10 +308,13 @@ export default {
 .box .top .jianjie {
   position: relative;
   flex-wrap: wrap;
-  display: flex;
+  /* display: flex; */
+  display: block;
+  white-space: wrap;
   justify-content: center;
   align-content: center;
-  height: 1.375rem;
+  /* height: 1.375rem; */
+  height: 1.575rem;
   margin: 0 .25rem;
   padding: .125rem;
   border-radius: .075rem;
@@ -313,6 +334,14 @@ export default {
   border-right: .125rem solid transparent;
   border-bottom:.125rem solid #feedcc;
 }
+.box .top .jianjie span {
+  display: inline;
+  white-space: normal;
+}
+.highlight-red {
+  color: #ff0000; /* 红色 */
+  cursor: pointer;
+}
 .box .serve {
   margin: .0625rem .25rem;
   /* background-color: pink; */

src/components/TM.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="tm">
+    <div class="box-top">
+      <div class="title">
+        <h4>商标注册</h4>
+        <p>1天送报商标局 一个月拿到受理通知书</p>
+      </div>
+    </div>
+    <div class="box-bottom">
+      <div class="box">
+        <div class="box1"></div>
+        <div class="box2"></div>
+        <div class="box3"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+ img {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  border: 0px solid transparent !important ;
+}
+.tm {
+  position: relative;
+}
+.tm .box-top {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 7.5625rem;
+  background: url(/assets/img/zhengshu-bj.png) no-repeat;
+  background-size: cover;
+}
+.tm .box-top .title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 12.5rem;
+  height: 1.875rem;
+  margin: 0 auto;
+  /* border: 2px solid red; */
+}
+.tm .box-top h4 {
+  width: 6.25rem;
+  font-size: .375rem;
+  color: #74491a;
+  margin-bottom: .125rem;
+}
+.tm .box-top p {
+  width: 6.25rem;
+  font-size: .2rem;
+  letter-spacing: .0625rem;
+  color: #9a7148;
+}
+.tm .box-bottom {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 13rem;
+  background-color: #f5f5f5;
+}
+.tm .box-bottom .box {
+  /* position: absolute; */
+  position: relative;
+  top: -2.5rem;
+  bottom: .625rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 12.5rem;
+  height: 13rem;
+  background-color: #FFF;
+  padding: .5rem;
+  -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  -moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+  box-shadow: 0 0 .125rem rgba(0,0,0,.1);
+}
+.tm .box-bottom .box .box1 {
+  width: 100%;
+  height: 3rem;
+  background-color: pink;
+}
+.tm .box-bottom .box .box2 {
+  width: 100%;
+  height: 3rem;
+  background-color: pink;
+}
+.tm .box-bottom .box .box3 {
+  width: 100%;
+  height: 3rem;
+  background-color: pink;
+}
+</style>

src/components/router.js

@@ -4,6 +4,8 @@ import { reactive, onMounted, onBeforeUnmount } from 'vue'
 
 import HomePage from './HomePage.vue'
 import ShouFei from './ShouFei.vue'
+import AppDZSoftware from './AppDZSoftware.vue'
+import TM from './TM.vue'
 import KeFu from './KeFu.vue'
 import ZhengShu from './ZhengShu.vue'
 import DaiLiShang from './DaiLiShang.vue'
@@ -23,6 +25,8 @@ const router = createRouter({
     { path: '/', redirect: '/HomePage' },
     { path: '/HomePage', name: 'HomePage', component: HomePage },
     { path: '/ShouFei', name: 'ShouFei', component: ShouFei },
+    { path: '/AppDZSoftware', name: 'AppDZSoftware', component: AppDZSoftware },
+    { path: '/TM', name: 'TM', component: TM },
     { path: '/KeFu', name: 'KeFu', component: KeFu },
     { path: '/ZhengShu', name: 'ZhengShu', component: ZhengShu },
     { path: '/DaiLiShang', name: 'DaiLiShang', component: DaiLiShang },