no message

src/components/home.vue

@@ -26,12 +26,12 @@
             <div class="zyjz-item" @click="goService(0)">
               <div class="item-title">保洁</div>
             </div>
-            <div class="zyjz-item" @click="goService(5)">
-              <div class="item-title">钟点工</div>
-            </div>
             <div class="zyjz-item" @click="goService(1)">
               <div class="item-title">家电清洗</div>
             </div>
+            <div class="zyjz-item" @click="goService(4)">
+              <div class="item-title">家具养护</div>
+            </div>
             <div class="zyjz-item" @click="goService(3)">
               <div class="item-title">收纳</div>
             </div>
@@ -192,16 +192,23 @@
           </div>
         </div>
       </div>
-        <!-- 鲸致荣誉 -->
+      <!-- 鲸致荣誉 -->
 
       <div class="jz-honor">
-             <div class="staff-title">鲸致荣誉</div>
-             <div class="honor-wrapper">
-                 <img  v-for="(item,index) in honorList" :key="index" :src="item"/>
-             </div>
-       
+        <div class="staff-title">鲸致荣誉</div>
+        <div class="honor-wrapper" @scroll="honorScroll" id="honor-list">
+          <img v-for="(item,index) in honorList" :key="index" :src="item" />
+        </div>
+        <div class="progress-wrapper">
+          <el-progress
+            :text-inside="true"
+            :stroke-width="3"
+            :percentage="honerPer"
+            :show-text="false"
+            color="#00bdff"
+          ></el-progress>
+        </div>
       </div>
-
     </div>
     <el-dialog title :visible.sync="videoVisible" width="80%" :close-on-click-modal="false" center>
       <video
@@ -478,6 +485,7 @@ import jzFooter from "@/components/common/Footer";
 export default {
   data() {
     return {
+      honerPer: 40,
       activeDetail: 0,
       activeCategory: "",
       videoVisible: false,
@@ -614,20 +622,20 @@ export default {
         }
       ],
       activeCal: 0,
-      honorList:[
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/1.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/2.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/3.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/4.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/5.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/6.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/7.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/8.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/9.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/10.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/11.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/12.png',
-          'https://mall.zhaijieshi.cc/file/jz-gw/honor/13.png',
+      honorList: [
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/1.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/2.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/3.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/4.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/5.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/6.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/7.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/8.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/9.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/10.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/11.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/12.png",
+        "https://mall.zhaijieshi.cc/file/jz-gw/honor/13.png"
       ]
     };
   },
@@ -697,6 +705,18 @@ export default {
     showServiceNew(index) {
       this.goService(index);
     },
+    honorScroll() {
+      const scrollLeft = document.getElementById("honor-list").scrollLeft;
+      const clientWidth = document.getElementById("honor-list").clientWidth;
+      const honorlist = document.getElementById("honor-list").scrollWidth;
+      let scrollTotal = clientWidth + scrollLeft;
+      let scrollPercent = Number(
+        Number((scrollTotal / honorlist) * 100).toFixed(0)
+      );
+      //   console.log(scrollLeft,clientWidth,honorlist);
+      //   console.log(scrollTotal,scrollPercent);
+      this.honerPer = scrollPercent <= 40 ? 40 : Number(scrollPercent);
+    },
     goService(index) {
       this.$router.push({
         path: "service",
@@ -785,10 +805,10 @@ export default {
   transition: all 0.4s;
 }
 .zyjz-item:nth-child(2) {
-  background-image: url("https://mall.zhaijieshi.cc/file/jz-gw/fw-02.png");
+  background-image: url("https://mall.zhaijieshi.cc/file/jz-gw/fw-02-new.png");
 }
 .zyjz-item:nth-child(3) {
-  background-image: url("https://mall.zhaijieshi.cc/file/jz-gw/fw-03.png");
+  background-image: url("https://mall.zhaijieshi.cc/file/jz-gw/fw-03-new.png");
 }
 .zyjz-item:nth-child(4) {
   background-image: url("https://mall.zhaijieshi.cc/file/jz-gw/fw-04.png");
@@ -1215,27 +1235,30 @@ export default {
 .el-carousel__item.is-animating {
   transition: transform 0.12s ease-in-out, -webkit-transform 0.12s ease-in-out;
 }
-.jz-honor{
-    margin:30px auto 20px;
-    text-align: center;
-    width:90%;
-    min-width:980px;
-    max-width: 1540px;
-
+.jz-honor {
+  margin: 30px auto 20px;
+  text-align: center;
+  width: 90%;
+  min-width: 980px;
+  max-width: 1540px;
 }
-.honor-wrapper{
-  height:160px;
+.honor-wrapper {
+  height: 160px;
   overflow-x: scroll;
-  margin-top:20px;
-  width:100%;
+  margin-top: 20px;
+  width: 100%;
   white-space: nowrap;
 }
 /* .honor-wrapper::-webkit-scrollbar {
   display: none;
 } */
 
-.honor-wrapper img{
-    height:160px;
-    margin-right:20px;
-} 
+.honor-wrapper img {
+  height: 160px;
+  margin-right: 20px;
+}
+.progress-wrapper {
+  width: 60px;
+  margin: 40px auto 44px;
+}
 </style>

src/components/service.vue

@@ -1,395 +1,405 @@
 <template>
-    <div>
-        
-
-        <jz-header :currentPage="'service'"></jz-header>
-        <div class="container service-page">
-          <div class="nav-left">
-              <div class="nav-top">产品分类</div>
-                <div class="nav-list">
-               <div :class="['nav-item',activeNav==index?'active-nav':'']" v-for="(item,index) in list" :key="index" @click="navClick(index)">
-               {{item.title}}
-               </div>
-               </div>
-          </div>
-          <div class="sub-nav">
-                <div :class="['sub-item',activeSub==index?'active-sub':'']"  v-for="(item,index) in subList" :key="index" @click="subClick(index)">
-                    {{item.name}}
-                </div>
-          </div>
-          <div class="img-wrapper">
-              <img :src="activeSer.url"/>
-          </div>
-          <div class="detail-block">
-              <div class="ser-title">{{activeSer.title}}</div>
-              <div class="ser-name">{{activeSer.name}}</div>
-              <div class="ser-content" v-html="activeSer.content"></div>
-              <div class="ser-slogan">{{activeSer.slogan}}</div>
-
-              <div class="detail-btn"></div>
-              
-          </div>
+  <div>
+    <jz-header :currentPage="'service'"></jz-header>
+    <div class="container service-page">
+      <div class="nav-left">
+        <div class="nav-top">产品分类</div>
+        <div class="nav-list">
+          <div
+            :class="['nav-item',activeNav==index?'active-nav':'']"
+            v-for="(item,index) in list"
+            :key="index"
+            @click="navClick(index)"
+          >{{item.title}}</div>
         </div>
-        <jz-footer></jz-footer>
+      </div>
+      <div class="sub-nav">
+        <div
+          :class="['sub-item',activeSub==index?'active-sub':'']"
+          v-for="(item,index) in subList"
+          :key="index"
+          @click="subClick(index)"
+        >{{item.name}}</div>
+      </div>
+      <div class="img-wrapper">
+        <img :src="activeSer.url" />
+      </div>
+      <div class="detail-block">
+        <div class="ser-title">{{activeSer.title}}</div>
+        <div class="ser-name">{{activeSer.name}}</div>
+        <div class="ser-content" v-html="activeSer.content"></div>
+        <div class="ser-slogan">{{activeSer.slogan}}</div>
+
+        <div class="detail-btn"></div>
+      </div>
     </div>
+    <jz-footer></jz-footer>
+  </div>
 </template>
 <script>
 import jzHeader from "@/components/common/Header";
 import jzFooter from "@/components/common/Footer";
 export default {
-    data() {
-        return {
-            list:[
-                {
-                    title:'居家保洁',
-                    children:[
-                         {
-                                   name:'基础保洁',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-jcbj.png',
-                                   content:'全屋除尘；<br/> 108项清洁标准；<br/>  可视化验收标准；<br/>  一次搞定全屋清洁；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                               {
-                                   name:'深度保洁',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-01.png',
-                                   content:'6大区域；<br/> 108项清洁标准；<br/>  可视化验收标准；<br/>  一次搞定全屋清洁；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'无家具粗开荒保洁',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-02.png',
-                                   content:'干净无损；<br/> 舒心入住；<br/>  把装修后的房子；<br/> 变成想象中的家；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'全屋深度焕新大扫除',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-03.png',
-                                   content:'9项专业保洁；<br/>9大角落清洁；<br/> 每一次大扫除之后<br/>  都是崭新的生活；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                
-                           
-                       
-                    ]
-                },
-                 {
-                    title:'家电清洗',
-                    children:[
-                               {
-                                   name:'空调清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-04.png',
-                                   content:'专业进口设备；<br/> 一台空调洗3遍；<br/> 洗净尘霉菌；<br/> 吹出干净风；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'冰箱清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-05.png',
-                                   content:'5道工序；<br/> 12项清洁；<br/> 去污除冰，除味消毒；<br/> 守护餐食健康；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'洗衣机清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-06.png',
-                                   content:'专业清洁设备；<br/>4遍健康洗；<br/> 除霉又除垢；<br/>  杜绝衣物二次污染；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                  {
-                                   name:'油灶清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-07.png',
-                                   content:'140℃高温清洗；<br/>从外到里，层层深入；<br/> 一次搞定隐蔽的陈年顽污油垢；<br/>  净爽下厨；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                
-                           
-                       
-                    ]
-                },
-                   {
-                    title:'专区清洁',
-                    children:[
-                               {
-                                   name:'浴室深度清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-08.png',
-                                   content:'专业设备清洗；<br/> 无死角清洁；<br/> 除菌去垢；<br/> 早晚洗漱更健康；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'厨房深度清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-09.png',
-                                   content:'专业进口工具组；<br/> 专业设备消灭油垢细菌；<br/> 强效清除缝隙凹槽污垢；<br/> 还原厨房干净本色；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'精细擦窗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-10.png',
-                                   content:'专业工具，专业手法；<br/>内外玻璃/窗框/窗槽都清洁；<br/> 透过洁净的窗；<br/> 遥望四季变换；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                  {
-                                   name:'除尘除螨',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-11.png',
-                                   content:'专业除螨设备；<br/>深度除尘螨；<br/> 呵护家人健康；<br/>守护安心好睡眠；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                
-                           
-                       
-                    ]
-                },
-                     {
-                    title:'搬家收纳',
-                    children:[
-                               {
-                                   name:'日式搬家',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-13.png',
-                                   content:'提前上门规划；<br/> 打包搬运复位；<br/> 全程不动手；<br/>  让搬家成为美好回忆；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                               {
-                                   name:'日式收纳',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-14.png',
-                                   content:'专业收纳师；<br/> 分区规划清洁整理；<br/> 收纳四季衣物；<br/> 改善衣柜空间；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                            
-                                
-                           
-                       
-                    ]
-                },
-                
-                {
-                    title:'家具养护',
-                    children:[
-                               {
-                                   name:'地毯清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-dbqx.png',
-                                   content:'高效清洁剂与设备；<br/> 深入清洁地毯；<br/> 去除污渍与异味；<br/> 恢复柔软光滑，赤脚更舒适；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'窗帘挂洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-clgx.png',
-                                   content:'专业设备，深度清洁；<br/> 轻柔挂洗窗帘；<br/> 强效清除缝隙凹槽污垢同时保护质地与色彩；<br/> 让窗帘重现光彩；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'布艺沙发清洗',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-sfqx.png',
-                                   content:'定制清洗方案；<br/>根据沙发材质和污渍程度；<br/> 恢复沙发干净整洁；<br/> 打造舒适休息空间；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                  {
-                                   name:'木地板打蜡',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-dbdl.png',
-                                   content:'环保耐用地板蜡；<br/>为木地板提供保护膜；<br/> 防水防尘防划痕；<br/>持久如新，光泽照人；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                
-                           
-                       
-                    ]
-                },
-                {
-                    title:'高端保姆中介',
-                    children:[
-                               {
-                                   name:'保姆/钟点工',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-15.png',
-                                   content:'10万保姆资源库；<br/> 快速匹配；<br/> 不满意免费更换；<br/>  1对1专属管家全程跟进服务；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                                {
-                                   name:'月嫂',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-16.png',
-                                   content:'快速匹配优质月嫂；<br/> 服务期内不满意免费换；<br/> 无忧保险保障；<br/> 首购送家政服务险；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                            
-                                
-                           
-                       
-                    ]
-                },
-                 {
-                    title:'甄选|金牌保洁师',
-                    children:[
-                               {
-                                   name:'甄选|金牌保洁师',
-                                   url:'https://mall.zhaijieshi.cc/file/jz-gw/service/detail-12.png',
-                                   content:'鲸致生活自营体系化专业培训考核；<br/> 80项理论培训，73项实操培训；<br/> 32项商家运营理论培训；<br/>  全量培训考核+2轮跟单实操；<br/> ',
-                                    slogan:'让家舒适洁净，治愈疲惫生活。'
-                               },
-                            
-                                
-                           
-                       
-                    ]
-                },
-            ],
-            subList:[
-                {name:''}
-            ],
-            activeSer:{
-                title:'',
-                name:'',
-                url:'',
-                content:'',
-                slogan:''
-
-
+  data() {
+    return {
+      list: [
+        {
+          title: "居家保洁",
+          children: [
+            {
+              name: "基础保洁",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-jcbj.png",
+              content:
+                "全屋除尘；<br/> 108项清洁标准；<br/>  可视化验收标准；<br/>  一次搞定全屋清洁；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
             },
-            activeNav:0,
-            activeSub:0,
-           
-
-
-
-
+            {
+              name: "深度保洁",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-01.png",
+              content:
+                "6大区域；<br/> 108项清洁标准；<br/>  可视化验收标准；<br/>  一次搞定全屋清洁；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "无家具粗开荒保洁",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-02.png",
+              content:
+                "干净无损；<br/> 舒心入住；<br/>  把装修后的房子；<br/> 变成想象中的家；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "全屋深度焕新大扫除",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-03.png",
+              content:
+                "9项专业保洁；<br/>9大角落清洁；<br/> 每一次大扫除之后<br/>  都是崭新的生活；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
+        },
+        {
+          title: "家电清洗",
+          children: [
+            {
+              name: "空调清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-04.png",
+              content:
+                "专业进口设备；<br/> 一台空调洗3遍；<br/> 洗净尘霉菌；<br/> 吹出干净风；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "冰箱清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-05.png",
+              content:
+                "5道工序；<br/> 12项清洁；<br/> 去污除冰，除味消毒；<br/> 守护餐食健康；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "洗衣机清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-06.png",
+              content:
+                "专业清洁设备；<br/>4遍健康洗；<br/> 除霉又除垢；<br/>  杜绝衣物二次污染；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "油灶清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-07.png",
+              content:
+                "140℃高温清洗；<br/>从外到里，层层深入；<br/> 一次搞定隐蔽的陈年顽污油垢；<br/>  净爽下厨；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
+        },
+        {
+          title: "专区清洁",
+          children: [
+            {
+              name: "浴室深度清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-08.png",
+              content:
+                "专业设备清洗；<br/> 无死角清洁；<br/> 除菌去垢；<br/> 早晚洗漱更健康；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "厨房深度清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-09.png",
+              content:
+                "专业进口工具组；<br/> 专业设备消灭油垢细菌；<br/> 强效清除缝隙凹槽污垢；<br/> 还原厨房干净本色；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "精细擦窗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-10.png",
+              content:
+                "专业工具，专业手法；<br/>内外玻璃/窗框/窗槽都清洁；<br/> 透过洁净的窗；<br/> 遥望四季变换；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "除尘除螨",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-11.png",
+              content:
+                "专业除螨设备；<br/>深度除尘螨；<br/> 呵护家人健康；<br/>守护安心好睡眠；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
+        },
+        {
+          title: "搬家收纳",
+          children: [
+            {
+              name: "日式搬家",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-13.png",
+              content:
+                "提前上门规划；<br/> 打包搬运复位；<br/> 全程不动手；<br/>  让搬家成为美好回忆；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "日式收纳",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-14.png",
+              content:
+                "专业收纳师；<br/> 分区规划清洁整理；<br/> 收纳四季衣物；<br/> 改善衣柜空间；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
+        },
 
+        {
+          title: "家具养护",
+          children: [
+            {
+              name: "地毯清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-dtqx.png",
+              content:
+                "高效清洁剂与设备；<br/> 深入清洁地毯；<br/> 去除污渍与异味；<br/> 恢复柔软光滑，赤脚更舒适；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "窗帘挂洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-clgx.png",
+              content:
+                "专业设备，深度清洁；<br/> 轻柔挂洗窗帘；<br/> 强效清除缝隙凹槽污垢同时保护质地与色彩；<br/> 让窗帘重现光彩；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "布艺沙发清洗",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-sfqx.png",
+              content:
+                "定制清洗方案；<br/>根据沙发材质和污渍程度；<br/> 恢复沙发干净整洁；<br/> 打造舒适休息空间；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "木地板打蜡",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-dbdl.png",
+              content:
+                "环保耐用地板蜡；<br/>为木地板提供保护膜；<br/> 防水防尘防划痕；<br/>持久如新，光泽照人；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
+        },
+        {
+          title: "高端保姆中介",
+          children: [
+            {
+              name: "保姆/钟点工",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-15.png",
+              content:
+                "10万保姆资源库；<br/> 快速匹配；<br/> 不满意免费更换；<br/>  1对1专属管家全程跟进服务；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            },
+            {
+              name: "月嫂",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-16.png",
+              content:
+                "快速匹配优质月嫂；<br/> 服务期内不满意免费换；<br/> 无忧保险保障；<br/> 首购送家政服务险；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
+        },
+        {
+          title: "甄选|金牌保洁师",
+          children: [
+            {
+              name: "甄选|金牌保洁师",
+              url:
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-12.png",
+              content:
+                "鲸致生活自营体系化专业培训考核；<br/> 80项理论培训，73项实操培训；<br/> 32项商家运营理论培训；<br/>  全量培训考核+2轮跟单实操；<br/> ",
+              slogan: "让家舒适洁净，治愈疲惫生活。"
+            }
+          ]
         }
+      ],
+      subList: [{ name: "" }],
+      activeSer: {
+        title: "",
+        name: "",
+        url: "",
+        content: "",
+        slogan: ""
+      },
+      activeNav: 0,
+      activeSub: 0
+    };
+  },
+  components: {
+    jzHeader,
+    jzFooter
+  },
+  created() {
+    let id = this.$route.query.id;
+    console.log(id);
+    let index = 0;
+    let activeNav = 0;
+    if (id != 0 && id != undefined) {
+      index = id;
+      activeNav = id;
+    }
+    this.activeNav = id;
+    this.subList = this.list[index].children;
+    this.activeSer = {
+      title: this.list[index].title,
+      name: this.list[index].children[0].name,
+      url: this.list[index].children[0].url,
+      content: this.list[index].children[0].content,
+      slogan: this.list[index].children[0].slogan
+    };
+  },
+  methods: {
+    navClick(index) {
+      this.activeNav = index;
+      this.activeSub = 0;
+      this.subList = this.list[index].children;
+      this.activeSer = this.subList[0];
+      this.activeSer.title = this.list[index].title;
     },
-    components:{
-        jzHeader,
-        jzFooter,
-       },
-      created(){
-          let id = this.$route.query.id;
-          console.log(id);
-          let index=0;
-          let activeNav=0;
-          if(id!=0 && id!=undefined){
-             index=id;
-             activeNav=id;
-          }
-          this.activeNav=id;
-          this.subList=this.list[index].children;
-          this.activeSer={
-              title:this.list[index].title,
-              name:this.list[index].children[0].name,
-              url:this.list[index].children[0].url,
-              content:this.list[index].children[0].content,
-              slogan:this.list[index].children[0].slogan,
-          }
-      } ,
-      methods:{
-          navClick(index){
-              this.activeNav=index;
-              this.activeSub=0;
-              this.subList=this.list[index].children;
-              this.activeSer=this.subList[0];
-              this.activeSer.title=this.list[index].title;
-          },
-          subClick(index){
-              this.activeSub=index;
-              this.activeSer=this.subList[index];
-              this.activeSer.title=this.list[this.activeNav].title;
-          }
-      }
-}
+    subClick(index) {
+      this.activeSub = index;
+      this.activeSer = this.subList[index];
+      this.activeSer.title = this.list[this.activeNav].title;
+    }
+  }
+};
 </script>
 <style  scoped>
-  .home-page{
-      height: 200px;
-  }
-  .service-page{
-      height: 512px;
-      margin-bottom:114px;
-      display: flex;
-  }
-  .nav-left{
-      background:#F9FBFD;
-      width:150px;
-      padding:90px 0 0 20px;
-  }
- .nav-top{
-     height:34px;
-     line-height: 34px;
-    border-bottom: 1px solid #333333;
-    display: inline-block;
-    margin-bottom:40px;
- }
- .nav-item{
-     height:30px;
-     line-height: 30px;
-     margin-bottom:20px;
-     cursor: pointer;
- } 
- .nav-item.active-nav{
-     color: #00BCFF;
-     font-size: 16px;
- }
-  .img-wrapper{
-      width:296px;
-  }
-   .img-wrapper img{
-      width:296px;
-      height: 512px;
-      object-fit: cover;
-  }
-
-.sub-nav{
-
-      width:190px;
-      background: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 512px;
-    padding-left:20px;
+.home-page {
+  height: 200px;
 }
-.sub-item{
-    height:48px;
-    line-height: 48px;
-    cursor: pointer;
+.service-page {
+  height: 512px;
+  margin-bottom: 114px;
+  display: flex;
 }
-.sub-item.active-sub{
-    color: #00BCFF;
+.nav-left {
+  background: #f9fbfd;
+  width: 150px;
+  padding: 90px 0 0 20px;
+}
+.nav-top {
+  height: 34px;
+  line-height: 34px;
+  border-bottom: 1px solid #333333;
+  display: inline-block;
+  margin-bottom: 40px;
+}
+.nav-item {
+  height: 30px;
+  line-height: 30px;
+  margin-bottom: 20px;
+  cursor: pointer;
+}
+.nav-item.active-nav {
+  color: #00bcff;
+  font-size: 16px;
+}
+.img-wrapper {
+  width: 296px;
+}
+.img-wrapper img {
+  width: 296px;
+  height: 512px;
+  object-fit: cover;
 }
-  .detail-block{
-      flex:1;
-      background: #00BDFF;
-      padding:80px 0  0 24px;
-      position: relative;
-  }
-  .ser-title{
-      font-size: 24px;
-      color: #fff;
-      height: 24px;
-      line-height: 24px;
-  }
-  .ser-name{
-       font-size: 24px;
-      color: #fff;
-      height:56px;
-      line-height: 56px;
-      border-bottom: 1px solid #FFFFFF;
-      /* width:170px; */
-      margin-bottom:50px;
-      display:inline-block;
-      padding-right:20px;
-  }
-  .ser-content{
-      color: #FFFFFF;
-      line-height: 20px;
-      font-size: 13px;
-      opacity: 0.94;
-      margin-bottom:26px;
-  }
-  .ser-slogan{
-      color: #FFFFFF;
-      font-size: 13px;
-      opacity: 0.94;
-  }
-  .detail-btn{
-       background: url('https://mall.zhaijieshi.cc/file/jz-gw/service/detail-btn.png') no-repeat center;
-    background-size:100%;
-    width:82px;
-    height:30px;
-    position:absolute;
-    bottom:38px;
-    right:30px;
-    cursor: pointer;
-  }
 
+.sub-nav {
+  width: 190px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 512px;
+  padding-left: 20px;
+}
+.sub-item {
+  height: 48px;
+  line-height: 48px;
+  cursor: pointer;
+}
+.sub-item.active-sub {
+  color: #00bcff;
+}
+.detail-block {
+  flex: 1;
+  background: #00bdff;
+  padding: 80px 0 0 24px;
+  position: relative;
+}
+.ser-title {
+  font-size: 24px;
+  color: #fff;
+  height: 24px;
+  line-height: 24px;
+}
+.ser-name {
+  font-size: 24px;
+  color: #fff;
+  height: 56px;
+  line-height: 56px;
+  border-bottom: 1px solid #ffffff;
+  /* width:170px; */
+  margin-bottom: 50px;
+  display: inline-block;
+  padding-right: 20px;
+}
+.ser-content {
+  color: #ffffff;
+  line-height: 20px;
+  font-size: 13px;
+  opacity: 0.94;
+  margin-bottom: 26px;
+}
+.ser-slogan {
+  color: #ffffff;
+  font-size: 13px;
+  opacity: 0.94;
+}
+.detail-btn {
+  background: url("https://mall.zhaijieshi.cc/file/jz-gw/service/detail-btn.png")
+    no-repeat center;
+  background-size: 100%;
+  width: 82px;
+  height: 30px;
+  position: absolute;
+  bottom: 38px;
+  right: 30px;
+  cursor: pointer;
+}
 </style>