diff --git a/src/assets/index/cbg0.jpg b/src/assets/index/cbg0.jpg
new file mode 100644
index 0000000..982d6bf
Binary files /dev/null and b/src/assets/index/cbg0.jpg differ
diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index 5744ef7..fffb2ad 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="aboutUs">
-    <el-row style="">
+    <el-row>
       <el-row>
         <div class="about_title">
           <h2>关于我们</h2>
@@ -21,8 +21,8 @@
       </el-row>
       <el-row :gutter="10" style="padding: 0 5% ">
         <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
-                :class="'culture_'+imgTextIndex">
-          <div class="imgAndText">
+                :class="'culture_'+imgTextIndex" >
+          <div class="imgAndText" @click="handleChangeMenu(imgTextItem)">
             <a :href="imgTextItem.href">
               <span class="pic">
                 <img :src="imgTextItem.src" alt=""/>
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import {getArticleInfo} from "@/api";
+
 export default {
   name: "AboutUs",
   data() {
@@ -77,26 +79,46 @@ export default {
       ],
       imgTextList: [
         {
-          href: '',
+          id: '',
           src: require('../assets/index/a1.jpg'),
           boldText: 'Brand',
           enText: 'culture',
-          cnTitle: '品牌文化'
+          cnTitle: ''
         }, {
-          href: '',
+          id: '',
           src: require('../assets/index/a2.jpg'),
           boldText: 'Enterprise',
           enText: 'viewpoint',
-          cnTitle: '企业观点'
+          cnTitle: ''
         }, {
-          href: '',
+          id: '',
           src: require('../assets/index/a3.jpg'),
           boldText: 'corporate',
           enText: 'culture',
-          cnTitle: '企业文化'
+          cnTitle: ''
         }
       ]
     }
+  },
+  created() {
+    getArticleInfo(1).then(res => {
+      this.imgTextList[0].id = res.data.articlelist[1].id;
+      this.imgTextList[1].id = res.data.articlelist[2].id;
+      this.imgTextList[2].id = res.data.articlelist[3].id;
+      this.imgTextList[0].cnTitle = res.data.articlelist[1].title;
+      this.imgTextList[1].cnTitle = res.data.articlelist[2].title;
+      this.imgTextList[2].cnTitle = res.data.articlelist[3].title;
+    });
+  },
+  methods: {
+    handleChangeMenu(imgTextItem) {
+      this.$router.push({
+        path: "/about_us",    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: imgTextItem.id,
+        }
+      });
+    }
   }
 }
 </script>
@@ -117,7 +139,7 @@ export default {
 .aboutUs {
   min-width: 1300px;
   width: 1360px;
-  margin: 0 auto 50px auto;
+  margin: 60px auto 50px auto;
 
   .about_title {
     display: inline;
diff --git a/src/components/FastFindProducts.vue b/src/components/FastFindProducts.vue
index 5536228..a3a55ba 100644
--- a/src/components/FastFindProducts.vue
+++ b/src/components/FastFindProducts.vue
@@ -14,7 +14,7 @@
           <ul>
             <li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
                 @mouseenter="changeFinds(moduleIndex)">
-              <a :href="moduleItem.href">
+              <a :href="moduleItem.href" >
                 <span>
                   <img :src="moduleItem.src" alt=""/>
                 </span>
@@ -27,12 +27,12 @@
     </div>
     <div style="border-bottom: 1px solid #e9e9e9;">
       <div class="classify" v-if="findIndex===0">
-        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
+        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex" @click.stop="handleChangeMenu(childrenItem)">
           {{ childrenItem.name }}
         </a>
       </div>
       <div class="classify" v-else>
-        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
+        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex" @click.stop="handleChangeMenu(childrenItem)">
           {{ childrenItem.title }}
         </a>
       </div>
@@ -95,6 +95,15 @@ export default {
           this.findList = res.data.style_list;
         });
       }
+    },
+    handleChangeMenu(childrenItem) {
+      this.$router.push({
+        path: "/products_center",    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: childrenItem.id,
+          menuTitle:childrenItem.title//前面的type是参数的名称
+        }
+      });
     }
   }
 };
diff --git a/src/components/NewsCenter.vue b/src/components/NewsCenter.vue
index 7c146f1..dfea205 100644
--- a/src/components/NewsCenter.vue
+++ b/src/components/NewsCenter.vue
@@ -21,7 +21,7 @@
       <div class="news_right">
         <div class="classify">
           <ul>
-            <li v-for="(item,index) in classifyList" :key="index">
+            <li v-for="(item,index) in classifyList" :key="index" @click="handleChangeMenu(item)">
               <a :href="item.href">{{ item.title }}</a>
             </li>
           </ul>
@@ -31,13 +31,13 @@
             <ul>
               <li v-for="(item,index) in itemList" :key="index">
                 <div class="pics">
-                  <a :href="item.href">
+                  <a :href="item.href" @click="handleToDetail(item)">
                     <img :src="item.image" alt=""/>
                   </a>
                 </div>
                 <div class="info">
                   <div class="title">
-                    <a :href="item.href">{{ item.title }}</a>
+                    <a :href="item.href" @click="handleToDetail(item)">{{ item.title }}</a>
                   </div>
                   <div class="smy">{{ item.synopsis }}</div>
                   <div class="dates">发布时间：{{ item.create_time }}</div>
@@ -61,14 +61,13 @@ export default {
       news_summary: "坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。",
       classifyList: [
         {
-          href: "/news",
+          id: 5,
           title: "公司新闻"
-        },
-        {
-          href: "",
+        }, {
+          id: 6,
           title: "行业动态"
         }, {
-          href: "",
+          id: 7,
           title: "瓷砖百科"
         }
       ],
@@ -83,6 +82,24 @@ export default {
     }).then(res => {
       this.itemList = res.data.list;
     });
+  },
+  methods:{
+    handleChangeMenu(item){
+      this.$router.push({
+        path: "/news",    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: item.id,
+        }
+      });
+    },
+    handleToDetail(item){
+      this.$router.push({
+        path: "/news",    //跳转的路由
+        query: {    //跳转路由的参数
+          menuDetail: item.id,
+        }
+      });
+    }
   }
 };
 </script>
diff --git a/src/components/PicturesBox.vue b/src/components/PicturesBox.vue
index 81f3677..1e0647a 100644
--- a/src/components/PicturesBox.vue
+++ b/src/components/PicturesBox.vue
@@ -23,7 +23,7 @@
                 <span class="info">{{ item.create_time }}</span>
               </div>
               <!--形象展示放大  -->
-              <div v-if="type===22">
+              <div v-if="type===22" style="display: inline-block">
                 <div class="bigImg">
                   <el-image
                     :src="item.image">
@@ -36,6 +36,19 @@
         </ul>
       </el-col>
     </el-row>
+    <div v-show="showMask">
+      <div class="mask">
+      </div>
+      <div class="mask_pic">
+        <div class="pic_bgc">
+          <div>
+            <i class="el-icon-close close" @click="closeMask"></i>
+            <img :src="mask_pic" alt=""/>
+          </div>
+          <span class="mask_info">{{ mask_title }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -53,7 +66,11 @@ export default {
     newsItem: String
   },
   data() {
-    return {};
+    return {
+      showMask: false,
+      mask_pic: "",
+      mask_title: ""
+    };
   },
   methods: {
     /**
@@ -70,8 +87,13 @@ export default {
       } else if (this.type == 11) {
         this.$emit("getNewsIdClick", item.id);
       } else if (this.type == 22) {
-        console.log("图片放大");
+        this.showMask = true;
+        this.mask_pic = item.image;
+        this.mask_title = item.title;
       }
+    },
+    closeMask() {
+      this.showMask = false;
     }
   }
 };
@@ -99,6 +121,59 @@ export default {
   }
 }
 
+.mask {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #000;
+  opacity: 0.2;
+  z-index: 990;
+}
+
+.mask_pic {
+  position: fixed;
+  top: 10%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 991333;
+  opacity: 1;
+
+  .pic_bgc {
+    display: flex;
+    flex-direction: column;
+    padding: 35px 15px 10px 15px;
+    background-color: #fff;
+    position: relative;
+
+    .close {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      font-size: 28px;
+      cursor: pointer;
+    }
+
+    img {
+      width: 480px;
+      height: 100%;
+    }
+
+    .mask_info {
+      display: block;
+      font-size: 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      text-align: center;
+      padding-top: 8px;
+    }
+  }
+}
+
 .bigImg {
   height: 270px;
   display: inline-block;
diff --git a/src/components/ProductsClassify.vue b/src/components/ProductsClassify.vue
index acb2f88..d071122 100644
--- a/src/components/ProductsClassify.vue
+++ b/src/components/ProductsClassify.vue
@@ -12,8 +12,9 @@
       </div>
       <div class="grid_right">
         <ul>
-          <li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src">
-            <a :href="picItem.href">
+          <li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src"
+              @click.stop="handleChangeMenu(picItem)">
+            <a>
                   <span class="pics">
                     <img :src="picItem.src" alt=""/>
                   </span>
@@ -27,35 +28,55 @@
 </template>
 
 <script>
+import {getPublicData} from "@/api";
+
 export default {
   name: "ProductsClassify",
   data() {
     return {
       pics: [
         {
-          href: '',
-          src: require('../assets/index/product1.png'),
-          name: '瓷抛大理石'
+          id: 1,
+          src: require("../assets/index/product1.png"),
+          name: ""
         },
         {
-          href: '',
-          src:require('../assets/index/product2.jpg'),
-          name: '通体大理石'
+          id: 2,
+          src: require("../assets/index/product2.jpg"),
+          name: ""
         },
         {
-          href: '',
-          src: require('../assets/index/product3.jpg'),
-          name: '中板通体大理石'
+          id: 3,
+          src: require("../assets/index/product3.jpg"),
+          name: ""
         },
         {
-          href: '',
-          src: require('../assets/index/product4.jpg'),
-          name: '大板通体大理石'
+          id: 4,
+          src: require("../assets/index/product4.jpg"),
+          name: ""
         }
       ]
+    };
+  },
+  created() {
+    getPublicData().then(res => {
+      this.pics[0].name = res.data.goodscategory_list[0].name;
+      this.pics[1].name = res.data.goodscategory_list[1].name;
+      this.pics[2].name = res.data.goodscategory_list[2].name;
+      this.pics[3].name = res.data.goodscategory_list[3].name;
+    });
+  },
+  methods: {
+    handleChangeMenu(item) {
+      this.$router.push({
+        path: "/products_center",    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: item.id
+        }
+      });
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -63,8 +84,8 @@ export default {
   .grid_box {
     width: 1230px !important;
   }
-  .pic{
-    img{
+  .pic {
+    img {
       width: 400px !important;
     }
   }
@@ -72,8 +93,8 @@ export default {
     ul {
       li {
         a {
-          width:360px !important;
-          height: 267px!important;
+          width: 360px !important;
+          height: 267px !important;
         }
       }
     }
@@ -84,8 +105,8 @@ export default {
   .grid_box {
     width: 1100px !important;
   }
-  .pic{
-    img{
+  .pic {
+    img {
       width: 385px !important;
     }
   }
@@ -93,8 +114,8 @@ export default {
     ul {
       li {
         a {
-          width:341px !important;
-          height: 258px!important;
+          width: 341px !important;
+          height: 258px !important;
         }
       }
     }
@@ -108,6 +129,7 @@ export default {
   position: relative;
   min-width: 1300px;
   display: flex;
+
   .grid_box {
     width: 1360px;
     display: flex;
diff --git a/src/components/ProductsShow.vue b/src/components/ProductsShow.vue
index 19554af..a2e65b2 100644
--- a/src/components/ProductsShow.vue
+++ b/src/components/ProductsShow.vue
@@ -12,14 +12,14 @@
       </el-col>
     </el-row>
     <el-row type="flex" style="justify-content: center">
-        <div>
-          <el-tag
-            v-for="item in tagItems"
-            :key="item.title"
-            effect="plain">
-            <a :href="item.href">{{ item.name }}</a>
-          </el-tag>
-        </div>
+      <div>
+        <el-tag
+          v-for="item in tagItems"
+          :key="item.title"
+          effect="plain">
+          <a @click.stop="handleChangeMenu(item)">{{ item.name }}</a>
+        </el-tag>
+      </div>
     </el-row>
   </div>
 </template>
@@ -29,39 +29,54 @@ import {getPublicData} from "@/api";
 
 export default {
   name: "ProductsShow",
-  data(){
-    return{
-      tagItems:[]
-    }
+  data() {
+    return {
+      tagItems: []
+    };
   },
   created() {
     getPublicData().then(res => {
       this.tagItems = res.data.goodscategory_list;
     });
+  }, methods: {
+    handleChangeMenu(item) {
+      this.$router.push({
+        path: "/products_center",    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: item.id
+        }
+      });
+    }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-*{
+* {
   font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
 }
-.el-tag:hover{
+
+.el-tag:hover {
   background-color: #333;
-  a{
+
+  a {
     color: #fff;
   }
 }
-.el-tag:first-child{
+
+.el-tag:first-child {
   background-color: #333;
-  a{
+
+  a {
     color: #fff;
 
   }
 }
-.el-tag:last-child{
+
+.el-tag:last-child {
   margin-right: 0;
 }
+
 .el-tag {
   border: none;
   margin-right: 10px;
@@ -69,10 +84,12 @@ export default {
   font-size: 15px;
   height: 37px;
   line-height: 37px;
-  a{
+
+  a {
     color: #333;
   }
 }
+
 .product_show {
   min-width: 1300px;
   padding: 60px 0 60px 0;
@@ -106,11 +123,13 @@ export default {
       color: #333;
       font-size: 14px;
     }
+
     a:hover {
       text-decoration: underline;
     }
   }
-  .tagRow{
+
+  .tagRow {
     text-align: center;
   }
 }
diff --git a/src/components/ProductsTabsItem.vue b/src/components/ProductsTabsItem.vue
index 76eaef9..173eff0 100644
--- a/src/components/ProductsTabsItem.vue
+++ b/src/components/ProductsTabsItem.vue
@@ -4,7 +4,7 @@
     <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
     <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
       <el-tabs v-if="title===1" v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title" >
+        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title">
           关于我们
         </el-tab-pane>
       </el-tabs>
@@ -23,14 +23,14 @@
 </template>
 
 <script>
-import {getPublicData} from "@/api";
-
 export default {
   name: "TabsItem",
   props: {
     title: Number,
     tabList: {
       type: Array
+    },  productTabs: {
+      type: Array
     },
     fatherMethod:{
       type:Function,
@@ -39,15 +39,9 @@ export default {
   },
   data() {
     return {
-      activeName: '0',
-      productTabs:[]
+      activeName: '0'
     }
   },
-  created() {
-    getPublicData().then(res => {
-      this.productTabs=res.data.goodscategory_list
-    });
-  },
   methods: {
     handleClick(tab){
       if(this.fatherMethod){
diff --git a/src/components/ProjectCase.vue b/src/components/ProjectCase.vue
index 444299a..f6edbff 100644
--- a/src/components/ProjectCase.vue
+++ b/src/components/ProjectCase.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="projectCase">
+  <div class="projectCase" id="projectCase">
     <div class="case_bg">
       <el-row>
         <div class="cases_title">
           <h2>工程案例</h2>
           <h3>—— Engineering Case ——</h3>
           <div class="case_more">
-            <a href="/image_display">查看所有</a>
+            <a @click="changeProductCase">查看所有</a>
           </div>
         </div>
       </el-row>
@@ -14,14 +14,13 @@
         <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
         <el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
           <el-row type="flex">
-            <el-col class="case_example" :span="6" v-for="(item,index) in projectList" :key="index">
+            <el-col class="case_example" :span="6" v-for="(item,index) in projectList" :key="index" >
               <ul>
-                <li>
+                <li @click="handleClickNews(item)">
                   <div class="pics">
                     <el-image
                       class="img"
-                      :src="item.image"
-                      :preview-src-list="item.bigSrc">
+                      :src="item.image">
                     </el-image>
                   </div>
                   <div class="case_info">{{ item.title }}</div>
@@ -31,6 +30,19 @@
           </el-row>
         </el-col>
       </el-row>
+      <div v-show="showMask">
+        <div class="mask">
+        </div>
+        <div class="mask_pic">
+          <div class="pic_bgc">
+            <div>
+              <i class="el-icon-close close" @click="closeMask"></i>
+              <img :src="mask_pic" alt=""/>
+            </div>
+            <span class="mask_info">{{ mask_title }}</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -42,7 +54,10 @@ export default {
   name: "Projects",
   data() {
     return {
-      projectList: []
+      projectList: [],
+      showMask: false,
+      mask_pic: "",
+      mask_title: ""
     }
   },
   created() {
@@ -52,12 +67,86 @@ export default {
       limit: 8
     }).then(res => {
       this.projectList = res.data.list;
+      if(res.data.list.length>4){
+        const bg= document.getElementById('projectCase')
+        bg.style="margin-bottom: 300px!important;"
+      }
     });
+  },
+  methods:{
+    closeMask() {
+      this.showMask = false;
+    },
+    handleClickNews(item){
+      this.showMask = true;
+      this.mask_pic = item.image;
+      this.mask_title = item.title;
+    },
+    changeProductCase(){
+      this.$router.push({
+        path: "/image_display",    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: 8
+        }
+      });
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.mask {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #000;
+  opacity: 0.3;
+  z-index: 990;
+}
+
+.mask_pic {
+  position: fixed;
+  top: 10%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 991333;
+  opacity: 1;
+
+  .pic_bgc {
+    display: flex;
+    flex-direction: column;
+    padding: 35px 15px 10px 15px;
+    background-color: #fff;
+    position: relative;
+
+    .close {
+      position: absolute;
+      right: 10px;
+      top: 0;
+      font-size: 28px;
+      cursor: pointer;
+    }
+
+    img {
+      width: 480px;
+      height: 100%;
+    }
+
+    .mask_info {
+      display: block;
+      font-size: 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      text-align: center;
+      padding-top: 8px;
+    }
+  }
+}
 .el-row--flex {
   display: flex;
   flex-wrap: wrap;
@@ -68,11 +157,10 @@ export default {
 }
 
 .projectCase {
-  min-height: 900px;
-
+  //margin-bottom: 100px;
   .case_bg {
     min-width: 1300px;
-    background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
+    background: #ffffff url('../assets/index/cbg0.jpg') no-repeat center 0;
     background-size: cover;
     height: 540px;
 
diff --git a/src/views/aboutUs/index.vue b/src/views/aboutUs/index.vue
index 29f8723..0e26f53 100644
--- a/src/views/aboutUs/index.vue
+++ b/src/views/aboutUs/index.vue
@@ -5,7 +5,7 @@
       <img src="../../assets/aboutus.jpg" alt=""/>
     </div>
     <!--标签栏 -->
-    <ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
+    <ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
     <!-- 关于我们的内容-->
     <el-row type="flex">
       <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
@@ -29,28 +29,56 @@ export default {
     return {
       aboutTabs: [],
       pList: []
+    };
+  },
+  watch:{
+    $route(to){
+      for (let i = 0; i < this.aboutTabs.length; i++) {
+        if (this.aboutTabs[i].id ==to.query.menu ) {
+          this.$refs.ProductsTabsItem.activeName= i+'';
+        }
+      }
+      getArticleInfo(to.query.menu).then(res => {
+        this.aboutTabs = res.data.articlelist;
+        this.pList = res.data.articleinfo.content;
+      });
+    }
+  },
+  beforeUpdate() {
+    for (let i = 0; i < this.aboutTabs.length; i++) {
+      if (this.aboutTabs[i].id ==this.$route.query.menu ) {
+        this.$refs.ProductsTabsItem.activeName= i+'';
+      }
     }
   },
   mounted() {
-    //获取关于我们的数据
-    getArticleInfo(1).then(res => {
-      this.aboutTabs = res.data.articlelist;
-      this.pList = res.data.articleinfo.content
-    });
+    if(this.$route.query.menu){
+      //获取关于我们的数据
+      getArticleInfo(this.$route.query.menu).then(res => {
+        this.aboutTabs = res.data.articlelist;
+        this.pList = res.data.articleinfo.content;
+      });
+    }else {
+      getArticleInfo(1).then(res => {
+        this.aboutTabs = res.data.articlelist;
+        this.pList = res.data.articleinfo.content;
+      });
+    }
   },
   methods: {
     handleClick(tab) {
       for (let i = 0; i < this.aboutTabs.length; i++) {
+        console.log('this.aboutTabs[i].id',this.aboutTabs[i].id);
         if (this.aboutTabs[i].title === tab._props.label) {
           getArticleInfo(this.aboutTabs[i].id).then(res => {
             this.aboutTabs = res.data.articlelist;
-            this.pList = res.data.articleinfo.content
+            this.pList = res.data.articleinfo.content;
           });
         }
       }
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -92,7 +120,8 @@ export default {
 
   .about_us_bg {
     height: 360px;
-    img{
+
+    img {
       width: 100%;
       height: 360px;
       object-fit: cover;
diff --git a/src/views/attractAndJoin/index.vue b/src/views/attractAndJoin/index.vue
index 8145f59..998c167 100644
--- a/src/views/attractAndJoin/index.vue
+++ b/src/views/attractAndJoin/index.vue
@@ -5,28 +5,19 @@
       <img src="../../assets/join.jpg" alt=""/>
     </div>
     <!--标签栏 -->
-    <ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick"/>
+    <ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
     <!-- 支持策略 -->
     <el-row type="flex">
       <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
       <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
-        <div class="support" id="support">
+        <div class="support">
           <div class="support_title">
-            支持策略 / SUPPORT STRATEGY
+            {{classid==4?'支持策略 / SUPPORT STRATEGY':'加盟条件 / FRANCHISE CONDITIONS'}}
           </div>
           <div style="font-size: 16px;padding-bottom: 25px">
             <span v-html="supportList"></span>
           </div>
         </div>
-        <!--加盟条件-->
-        <div class="support" id="join">
-          <div class="support_title">
-            加盟条件 / FRANCHISE CONDITIONS
-          </div>
-          <div style="font-size: 16px;padding-bottom: 25px">
-            <span v-html="joinList"></span>
-          </div>
-        </div>
       </el-col>
     </el-row>
   </div>
@@ -41,49 +32,63 @@ export default {
   components: {ProductsTabsItem},
   data() {
     return {
+      classid:4,
       joinTab: [],
-      supportList: [],
-      joinList: [
-        {text: '艺鹏瓷砖合作加盟条件：'},
-        {text: '1、有强烈的事业心、有良好的职业道德和商业道德，重合同、守信誉、品行端正、实事求是、言行一致；'},
-        {text: '2、具有较强的资金实力，有一定规模的营销场所，有稳定的、高素质的营销队伍；'},
-      ]
+      supportList: []
+    };
+  },
+  watch: {
+    $route(to) {
+      for (let i = 0; i < this.joinTab.length; i++) {
+        if (this.joinTab[i].id == to.query.menu) {
+          this.$refs.ProductsTabsItem.activeName = i + "";
+        }
+      }
+      this.getInfo(to.query.menu)
+    }
+  },
+  beforeUpdate() {
+    for (let i = 0; i < this.joinTab.length; i++) {
+      if (this.joinTab[i].id == this.$route.query.menu) {
+        this.$refs.ProductsTabsItem.activeName = i + "";
+      }
     }
   },
   mounted() {
-    //获取招商加盟的数据
-    getArticleInfo(4).then(res => {
-      this.joinTab = res.data.articlelist;
-      this.supportList = res.data.articleinfo.content
-    });
+    if (this.$route.query.menu) {
+      //获取招商加盟的数据
+      this.getInfo(this.$route.query.menu)
+    } else {
+      this.getInfo(4)
+    }
   },
   methods: {
+    //获取数据
+    getInfo(classId){
+      getArticleInfo(classId).then(res => {
+        this.joinTab = res.data.articlelist;
+        this.supportList = res.data.articleinfo.content;
+      });
+    },
     handleClick(tab) {
-      const support = document.getElementById('support');
-      const join = document.getElementById('join');
-      if (tab.index == 0) {
-        support.style.display = "block"
-        join.style.display = "none"
-      } else if (tab.index == 1) {
-        join.style.display = "block"
-        support.style.display = "none"
+      for (let i = 0; i < this.joinTab.length; i++) {
+        if (this.joinTab[i].title === tab._props.label) {
+          this.getInfo(this.joinTab[i].id)
+        }
       }
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-#join {
-  display: none;
-}
-
 .Attract_join {
   min-width: 1300px;
 
   .Attract_join_bg {
     height: 360px;
-    img{
+
+    img {
       width: 100%;
       height: 360px;
       object-fit: cover;
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index c81406b..91a86dd 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -27,14 +27,14 @@
               <div v-if="item.children">
                 <ul class="subNav" v-if="index==2">
                   <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
-                    <a :href="childrenItem.href">
+                    <a @click.stop="handleChangeMenu(childrenItem,item)">
                       {{ childrenItem.name }}
                     </a>
                   </li>
                 </ul>
                 <ul class="subNav" v-else>
                   <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
-                    <a :href="childrenItem.href">
+                    <a @click.stop="handleChangeMenu(childrenItem,item)">
                       {{ childrenItem.title }}
                     </a>
                   </li>
@@ -91,14 +91,14 @@ export default {
           title: "新闻资讯",
           children: [
             {
-              href: "/news",
+              id: 5,
               title: "公司新闻"
             },
             {
-              href: "",
+              id: 6,
               title: "行业动态"
             }, {
-              href: "",
+              id: 7,
               title: "瓷砖百科"
             }
           ]
@@ -108,19 +108,18 @@ export default {
           title: "形象展示",
           children: [
             {
-              href: "/image_display",
+              id: 2,
               title: "资质荣誉"
             },
             {
-              href: "",
+              id: 8,
               title: "工程案例"
             }
           ]
         },
         {
           href: "/attract_and_join",
-          title: "招商加盟",
-          children: []
+          title: "招商加盟"
         },
         {
           href: "/contact_us",
@@ -135,8 +134,11 @@ export default {
       this.corporate_name = res.data.corporate_name;
       this.navList[1].children = res.data.aboutus;
       this.navList[2].children = res.data.goodscategory_list;
-      this.navList[5].children = res.data.join;
-      this.navList[6].children = res.data.contact_us;
+      for (let i = 0; i < res.data.join.length; i++) {
+        if (this.navList[5].title !== res.data.join[i].title) {
+          this.navList[5].children = res.data.join;
+        }
+      }
     });
     let header_bg = document.getElementById("header_bg");
     let search_header = document.getElementById("search_header");
@@ -160,6 +162,16 @@ export default {
         that.width = window.screenWidth >= 1200;
       })();
     };
+  },
+  methods: {
+    handleChangeMenu(childrenItem, item) {
+      this.$router.push({
+        path: item.href,    //跳转的路由
+        query: {    //跳转路由的参数
+          menu: childrenItem.id    //前面的type是参数的名称
+        }
+      });
+    }
   }
 };
 </script>
diff --git a/src/views/imageDisplay/index.vue b/src/views/imageDisplay/index.vue
index 83907fc..617f0eb 100644
--- a/src/views/imageDisplay/index.vue
+++ b/src/views/imageDisplay/index.vue
@@ -5,9 +5,11 @@
       <img src="../../assets/image_display.jpg" alt=""/>
     </div>
     <!--标签栏 -->
-    <ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick"/>
+    <ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
     <!--资质荣誉 22是封装图片放大的效果-->
     <PicturesBox :image-list="imageAndWord" :type="22"/>
+    <!--页码-->
+    <Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage"/>
     <div class="nullData" v-if="showNull">
       暂时没有数据！
     </div>
@@ -15,73 +17,110 @@
 </template>
 
 <script>
+import Pagination from "@/components/Pagination";
 import ProductsTabsItem from "@/components/ProductsTabsItem";
 import PicturesBox from "@/components/PicturesBox";
 import {getArticleList} from "@/api";
+
 export default {
   name: "index",
-  components: {ProductsTabsItem,PicturesBox},
+  components: {ProductsTabsItem, PicturesBox,Pagination},
   data() {
     return {
-      showNull:false,
+      limit: 12,
+      total: 0,
+      classIndex:0,
+      showNull: false,
       imageDisplayTabs: [
         {
-          title: '资质荣誉',
-          name: 'first'
+          id: 2,
+          title: "资质荣誉"
         },
         {
-          title: '工程案例',
-          name: 'second'
+          id: 8,
+          title: "工程案例"
         }
       ],
-      imageAndWord: [],
+      imageAndWord: []
+    };
+  },
+  watch: {
+    $route(to) {
+      for (let i = 0; i < this.imageDisplayTabs.length; i++) {
+        if (this.imageDisplayTabs[i].id == to.query.menu) {
+          this.$refs.ProductsTabsItem.activeName = i + "";
+        }
+      }
+      this.getArticleList(to.query.menu);
+    }
+  },
+  beforeUpdate() {
+    for (let i = 0; i < this.imageDisplayTabs.length; i++) {
+      if (this.imageDisplayTabs[i].id == this.$route.query.menu) {
+        this.$refs.ProductsTabsItem.activeName = i + "";
+      }
     }
   },
   mounted() {
-    this.getArticleList(2)
+    if (this.$route.query.menu) {
+      this.getArticleList(this.$route.query.menu);
+    } else {
+      this.getArticleList(2);
+    }
   },
   methods: {
     //获取新闻列表
-    getArticleList(classId,page,limit){
+    getArticleList(classId, page, limit) {
       getArticleList({
         classid: classId,
-        page: this.page,
-        limit: this.limit
+        page: page,
+        limit: limit
       }).then(res => {
-        console.log('',res);
         this.imageAndWord = res.data.list;
-        if(res.data.list.length==0){
-          this.showNull=true
+        if (res.data.list.length == 0) {
+          this.showNull = true;
         }
       });
     },
     handleClick(tab) {
-      if(tab.index==0){
-        this.getArticleList(2)
-      }else if(tab.index==1){
-        this.getArticleList(8)
+      this.classIndex = parseInt(tab.index);
+      if (tab.index == 0) {
+        this.getArticleList(2, this.page, this.limit);
+      } else if (tab.index == 1) {
+        this.getArticleList(8, this.page, this.limit);
       }
-    }
+    },
+    //分页
+    handleChangePage(value) {
+      if (this.classIndex == 0) {
+        this.getArticleList(2, value, this.limit);
+      } else if (this.classIndex == 1) {
+        this.getArticleList(8, value, this.limit);
+      }
+    },
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-.nullData{
+
+.nullData {
   display: block;
   height: 300px;
   line-height: 300px;
   text-align: center;
 }
+
 .image_display {
   min-width: 1300px;
 
   .imageDisplay_bg {
     height: 360px;
-    img{
+
+    img {
       width: 100%;
       height: 360px;
       object-fit: cover;
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 7d29f67..bf340d0 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -5,13 +5,13 @@
       <img src="../../assets/news.jpg" alt=""/>
     </div>
     <!--标签栏 -->
-    <ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick"/>
-    <!--图片栏-->
-    <PicturesBox :image-list="imageAndWord" :type="11" v-show="showImage" @getNewsIdClick="getNewsId"/>
-
-    <!--页码-->
-    <Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage" v-show="showPagination"/>
-
+    <ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
+    <div v-show="showImage">
+      <!--图片栏-->
+      <PicturesBox :image-list="imageAndWord" :type="11" @getNewsIdClick="getNewsId"/>
+      <!--页码-->
+      <Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage"/>
+    </div>
     <!--新闻详情-->
     <detail :newsId="newsId" :classIndex="classIndex" v-if="showDetail"/>
     <div class="nullData" v-if="showNull">
@@ -32,93 +32,116 @@ export default {
   components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
-      page:1,
-      limit:10,
-      total:0,
-      newsId:6,
-      classIndex:0,
-      showDetail:false,
-      showImage:true,
-      showPagination:true,
+      page: 1,
+      limit: 12,
+      total: 0,
+      newsId: 6,
+      classIndex: 0,
+      showDetail: false,
+      showImage: true,
       newsTab: [
         {
-          title: '公司新闻',
-          name: 'first'
+          id: 5,
+          title: "公司新闻"
         }, {
-          title: '行业动态',
-          name: 'second'
+          id: 6,
+          title: "行业动态"
         }, {
-          title: '瓷砖百科',
-          name: 'third'
-        },
+          id: 7,
+          title: "瓷砖百科"
+        }
       ],
       imageAndWord: [],
-      showNull:false
+      showNull: false
     };
   },
+  watch: {
+    $route(to) {
+      for (let i = 0; i < this.newsTab.length; i++) {
+        if (this.newsTab[i].id == to.query.menu) {
+          this.$refs.ProductsTabsItem.activeName = i + "";
+        }
+      }
+      this.getArticleList(to.query.menu);
+    }
+  },
+  beforeUpdate() {
+    for (let i = 0; i < this.newsTab.length; i++) {
+      if (this.newsTab[i].id == this.$route.query.menu) {
+        this.$refs.ProductsTabsItem.activeName = i + "";
+      }
+    }
+  },
   mounted() {
-    this.getArticleList(5)
+    if(this.$route.query.menuDetail){
+      this.getNewsId(this.$route.query.menuDetail)
+    }
+    if (this.$route.query.menu) {
+      this.getArticleList(this.$route.query.menu);
+    } else {
+      this.getArticleList(5);
+    }
   },
   methods: {
-    getNewsId(value){
-      this.newsId=value
-      if(this.newsId!==0){
-        this.showDetail=true
-        this.showPagination=false
-        this.showImage=false
+    getNewsId(value) {
+      this.newsId = value;
+      if (this.newsId !== 0) {
+        this.showDetail = true;
+        this.showImage = false;
       }
     },
     //获取新闻列表
-    getArticleList(classId,page,limit){
+    getArticleList(classId, page, limit) {
       getArticleList({
         classid: classId,
-        page: this.page,
-        limit: this.limit
+        page: page,
+        limit: limit
       }).then(res => {
-        this.total=res.data.count
+        this.total = res.data.count;
         this.imageAndWord = res.data.list;
-        if(res.data.list.length==0){
-          this.showNull=true
+        if (res.data.list.length == 0) {
+          this.showNull = true;
         }
       });
     },
     handleClick(tab) {
-      this.showDetail=false
-      this.showImage=true
-      this.showPagination=true
-      this.classIndex=parseInt(tab.index)
+      this.showDetail = false;
+      this.showImage = true;
+      this.classIndex = parseInt(tab.index);
       if (tab.index == 0) {
-        this.getArticleList(5)
+        this.getArticleList(5, this.page, this.limit);
       } else if (tab.index == 1) {
-        this.getArticleList(6)
+        this.getArticleList(6, this.page, this.limit);
       } else if (tab.index == 2) {
-        this.getArticleList(7)
+        this.getArticleList(7, this.page, this.limit);
       }
     },
     //新闻分页
-    handleChangePage(value){
-      if(this.classIndex==0){
-        this.getArticleList(5,value,this.limit)
-      }else if (this.classIndex == 1) {
-        this.getArticleList(6,value,this.limit)
+    handleChangePage(value) {
+      if (this.classIndex == 0) {
+        this.getArticleList(5, value, this.limit);
+      } else if (this.classIndex == 1) {
+        this.getArticleList(6, value, this.limit);
       } else if (this.classIndex == 2) {
-        this.getArticleList(7,value,this.limit)
+        this.getArticleList(7, value, this.limit);
       }
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-.nullData{
+
+.nullData {
   display: block;
   height: 300px;
   line-height: 300px;
   text-align: center;
 }
+
 #industry_dynamics {
   display: none;
 }
@@ -146,7 +169,8 @@ export default {
 
   .news_bg {
     height: 360px;
-    img{
+
+    img {
       width: 100%;
       height: 360px;
       object-fit: cover;
diff --git a/src/views/productsCenter/detail.vue b/src/views/productsCenter/detail.vue
index b6e16ea..2a14476 100644
--- a/src/views/productsCenter/detail.vue
+++ b/src/views/productsCenter/detail.vue
@@ -1,7 +1,5 @@
 <template>
   <div style="min-width: 1300px">
-    <!-- 产品标签栏-->
-    <ProductsTabsItem :title="9" />
     <div class="img_text_bgc">
       <el-row type="flex">
         <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
@@ -66,11 +64,10 @@
 
 <script>
 import ProductsTabsItem from "@/components/ProductsTabsItem";
-import {getGoodsInfo, getGoodsList} from "@/api";
+import {getGoodsInfo, getGoodsList, getPublicData} from "@/api";
 
 export default {
   name: "detail",
-  components: {ProductsTabsItem},
   data() {
     return {
       showNull:false,
diff --git a/src/views/productsCenter/index.vue b/src/views/productsCenter/index.vue
index e08ea02..fc06188 100644
--- a/src/views/productsCenter/index.vue
+++ b/src/views/productsCenter/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="products_center">
     <!--标签栏 -->
-    <ProductsTabsItem :title="9" :fatherMethod="handleClick"/>
+    <ProductsTabsItem :title="9" :product-tabs="productTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
     <!-- 分类栏-->
     <div class="product_types">
       <el-row type="flex">
@@ -10,19 +10,25 @@
           <div class="spaceList">
             <strong>分类：</strong>
             <ul>
-              <li v-for="(item,index) in classifyList" @click="changeClassify(item,index)" :id="'classify_'+index">{{ item.name }}</li>
+              <li v-for="(item,index) in classifyList" @click.stop="changeClassify(item,index)" :id="'classify_'+index">
+                {{ item.name }}
+              </li>
             </ul>
           </div>
           <div class="spaceList">
             <strong>空间：</strong>
             <ul>
-              <li v-for="(item,index) in spaceList" @click="changeSpace(item,index)" :id="'space_'+index">{{ item.title }}</li>
+              <li v-for="(item,index) in spaceList" @click.stop="changeSpace(item,index)" :id="'space_'+index">
+                {{ item.title }}
+              </li>
             </ul>
           </div>
           <div class="spaceList">
             <strong>风格：</strong>
             <ul>
-              <li v-for="(item,index) in styleList" @click="changeStyle(item,index)" :id="'style_'+index">{{ item.title }}</li>
+              <li v-for="(item,index) in styleList" @click.stop="changeStyle(item,index)" :id="'style_'+index">
+                {{ item.title }}
+              </li>
             </ul>
           </div>
         </el-col>
@@ -30,7 +36,8 @@
     </div>
     <!--图片栏-->
     <PicturesBox :image-list="imgList" :type="33"/>
-    <Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage" v-if="showPagination"/>
+    <Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage"
+                v-if="showPagination"/>
     <div class="nullData" v-if="showNull">
       暂时没有数据！
     </div>
@@ -48,97 +55,181 @@ export default {
   components: {PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
-      showNull:false,
-      showPagination:true,
+      showNull: false,
+      showPagination: true,
       classifyList: [],
       spaceList: [],
       styleList: [],
-      pageSize:12,
-      total:0,
+      pageSize: 12,
+      total: 0,
       imgList: [],
-      classIndex:''
+      classIndex: "",
+      productTabs: []
+    };
+  },
+  watch: {
+    $route(to) {
+      if (to.query.menu) {
+        for (let i = 0; i < this.productTabs.length; i++) {
+          if (this.productTabs[i].id == to.query.menu) {
+            this.$refs.ProductsTabsItem.activeName = i + "";
+          }
+        }
+        getGoodsCategory(to.query.menu).then(res => {
+          this.classifyList = res.data.categorylist;
+        });
+        //获取产品列表
+        getGoodsList({
+          classid: to.query.menu,
+          page: 1,
+          limit: this.pageSize
+        }).then(res => {
+          this.total = res.data.count;
+          this.imgList = res.data.list;
+        });
+      }
+    }
+  },
+  beforeUpdate() {
+    if (this.$route.query.menu) {
+      for (let i = 0; i < this.productTabs.length; i++) {
+        if (this.productTabs[i].id == this.$route.query.menu) {
+          this.$refs.ProductsTabsItem.activeName = i + "";
+        }
+      }
+    }
+    if (this.$route.query.menuTitle) {
+      for (let i = 0; i < this.classifyList.length; i++) {
+        const red = document.getElementById("classify_" + i);
+        if (this.classifyList[i].name == this.$route.query.menuTitle) {
+          red.style = "color: #f00!important;text-decoration: underline!important;";
+        } else {
+          red.style = "color: #000!important;";
+        }
+      }
+      for (let i = 0; i < this.spaceList.length; i++) {
+        const red = document.getElementById("space_" + i);
+        if (this.spaceList[i].title == this.$route.query.menuTitle) {
+          red.style = "color: #f00!important;text-decoration: underline!important;";
+        } else {
+          red.style = "color: #000!important;";
+        }
+      }
+      for (let i = 0; i < this.styleList.length; i++) {
+        const red = document.getElementById("style_" + i);
+        if (this.styleList[i].title == this.$route.query.menuTitle) {
+          red.style = "color: #f00!important;text-decoration: underline!important;";
+        } else {
+          red.style = "color: #000!important;";
+        }
+      }
     }
   },
   mounted() {
+    getPublicData().then(res => {
+      this.productTabs = res.data.goodscategory_list;
+    });
     //获取空间和风格数据
     getPublicData().then(res => {
-      this.spaceList = res.data.space_list
-      this.styleList = res.data.style_list
-    });
-    //进入页面时, 获取第一个列表的类别
-    getGoodsCategory(1).then(res => {
-      this.classifyList = res.data.categorylist
-    });
-    //获取产品列表
-    getGoodsList({
-      classid:0,
-      page:1,
-      limit:this.pageSize,
-    }).then(res => {
-      this.total=res.data.count
-      this.imgList=res.data.list
+      this.spaceList = res.data.space_list;
+      this.styleList = res.data.style_list;
     });
+    if (this.$route.query.menu) {
+      //进入页面时, 获取第一个列表的类别
+      getGoodsCategory(this.$route.query.menu).then(res => {
+        this.classifyList = res.data.categorylist;
+      });
+      this.getGoodsList(this.$route.query.menu, 1, this.pageSize);
+    } else {
+      //进入页面时, 获取第一个列表的类别
+      getGoodsCategory(1).then(res => {
+        this.classifyList = res.data.categorylist;
+      });
+      this.getGoodsList(0, 1, this.pageSize);
+    }
   },
   methods: {
     //获取产品列表
-    getGoodsList(classid,page,limit,stylename,spacename){
+    getGoodsList(classid, page, limit, stylename, spacename) {
       getGoodsList({
-        classid:classid,
-        page:page,
-        limit:limit,
-        stylename:stylename,
-        spacename:spacename,
+        classid: classid,
+        page: page,
+        limit: limit,
+        stylename: stylename,
+        spacename: spacename
       }).then(res => {
-        this.total=res.data.count
-        this.imgList=res.data.list
-        if(res.data.list.length===0){
-          this.showNull=true
-          this.showPagination=false
+        this.total = res.data.count;
+        this.imgList = res.data.list;
+        if (res.data.list.length === 0) {
+          this.showNull = true;
+          this.showPagination = false;
         }
       });
     },
     //点击一级分类切换数据及切换不同二级分类
     handleClick(tab) {
-      let index = parseInt(tab.index) + 1
-      this.classIndex=index
+      let index = parseInt(tab.index) + 1;
+      this.classIndex = index;
       getGoodsCategory(index).then(res => {
-        this.classifyList = res.data.categorylist
+        this.classifyList = res.data.categorylist;
       });
-      this.getGoodsList(index,1,this.pageSize)
+      this.getGoodsList(index, 1, this.pageSize);
     },
     //产品分页
-    handleChangePage(value){
-      this.getGoodsList(this.classIndex,value,this.pageSize)
+    handleChangePage(value) {
+      this.getGoodsList(this.classIndex, value, this.pageSize);
     },
     //点击二级分类,筛选产品数据
-    changeClassify(item,index){
-      this.getGoodsList(item.id,1,this.pageSize)
-      document.getElementById('classify_'+index).style="color: #f00;text-decoration: underline;"
+    changeClassify(item) {
+      this.$router.push({
+        path: "/products_center",
+        query: {
+          menuTitle: item.name
+        }
+      });
+      this.getGoodsList(item.id, 1, this.pageSize);
     },
     //点击空间分类,筛选产品数据
-    changeSpace(item,index){
-      this.getGoodsList(this.classIndex,1,this.pageSize,'',item.title)
-      document.getElementById('space_'+index).style="color: #f00;text-decoration: underline;"
+    changeSpace(item) {
+      this.$router.push({
+        path: "/products_center",
+        query: {
+          menuTitle: item.title
+        }
+      });
+      this.getGoodsList(this.classIndex, 1, this.pageSize, "", item.title);
     },
     //点击风格分类,筛选产品数据
-    changeStyle(item,index){
-      this.getGoodsList(this.classIndex,1,this.pageSize,item.title,'')
-      document.getElementById('style_'+index).style="color: #f00;text-decoration: underline;"
+    changeStyle(item) {
+      this.$router.push({
+        path: "/products_center",
+        query: {
+          menuTitle: item.title
+        }
+      });
+      this.getGoodsList(this.classIndex, 1, this.pageSize, item.title, "");
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-.nullData{
+
+.becomeRed {
+  color: #f00;
+  text-decoration: underline;
+}
+
+.nullData {
   display: block;
   height: 300px;
   line-height: 300px;
   text-align: center;
 }
+
 .products_center {
   min-width: 1300px;