src/components/AboutUs.vue

@@ -52,7 +52,7 @@ export default {
   name: "AboutUs",
   data() {
     return {
-      aboutContent: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
+      aboutContent: '广东蒙彼利陶瓷有限公司，于2020年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
       numList: [
         {
           num: '2000',
@@ -78,19 +78,19 @@ export default {
       imgTextList: [
         {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446921627711241s.jpg',
+          src: require('../assets/index/a1.jpg'),
           boldText: 'Brand',
           enText: 'culture',
           cnTitle: '品牌文化'
         }, {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446922829529890s.jpg',
+          src: require('../assets/index/a2.jpg'),
           boldText: 'Enterprise',
           enText: 'viewpoint',
           cnTitle: '企业观点'
         }, {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446925925108442s.jpg',
+          src: require('../assets/index/a3.jpg'),
           boldText: 'corporate',
           enText: 'culture',
           cnTitle: '企业文化'

src/components/FastFindProducts.vue

@@ -26,175 +26,85 @@
       </el-row>
     </div>
     <div style="border-bottom: 1px solid #e9e9e9;">
-      <el-row class="classify">
+      <div class="classify" v-if="findIndex===0">
-        <div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
+        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
-          <ul>
+          {{ childrenItem.name }}
-            <li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
+        </a>
-              <a :href="childrenItem.href" class="">
+      </div>
+      <div class="classify" v-else>
+        <a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
           {{ childrenItem.title }}
         </a>
-            </li>
-          </ul>
       </div>
-      </el-row>
     </div>
   </div>
 </template>
 
 <script>
+import {getPublicData} from "@/api";
+
 export default {
   name: "FastFindProducts",
   data() {
     return {
       moduleList: [
         {
-          href: '',
+          href: "/products_center",
-          src: 'http://www.yipengtaoci.com/images/module2-1.png',
+          src: require("@/assets/index/module2-1.png"),
-          name: '分类'
+          name: "分类"
         },
         {
-          href: '',
+          href: "/products_center",
-          src: 'http://www.yipengtaoci.com/images/module2-2.png',
+          src: require("@/assets/index/module2-2.png"),
-          name: '空间'
+          name: "空间"
         },
         {
-          href: '',
+          href: "/products_center",
-          src: 'http://www.yipengtaoci.com/images/module2-3.png',
+          src: require("@/assets/index/module2-3.png"),
-          name: '风格'
+          name: "风格"
-        },
+        }
       ],
-      findList: [
+      findList: [],
-        {
+      findIndex:0
-          children: [
+    };
-            {
-              href: '',
-              title: '瓷抛大理石'
   },
-            {
+  mounted() {
-              href: '',
+    let find0 = document.getElementById("find_0");
-              title: '通体大理石'
+    find0.classList.add("current");
-            }, {
+    this.getPublicData()
-              href: '',
-              title: '中板通体大理石'
-            }, {
-              href: '',
-              title: '大板通体大理石'
-            }, {
-              href: '',
-              title: '银河系大板'
-            }, {
-              href: '',
-              title: '仿古砖600x600'
-            }, {
-              href: '',
-              title: '金刚大理石'
-            }, {
-              href: '',
-              title: '岩板'
-            }, {
-              href: '',
-              title: '微水泥'
-            }
-          ]
-        },
-        {
-          children: [
-            {
-              href: '',
-              title: '客厅瓷砖'
-            },
-            {
-              href: '',
-              title: '厨房瓷砖'
-            }, {
-              href: '',
-              title: '卫浴瓷砖'
-            }, {
-              href: '',
-              title: '书房瓷砖'
-            }, {
-              href: '',
-              title: '卧室瓷砖'
-            }, {
-              href: '',
-              title: '餐厅瓷砖'
-            }, {
-              href: '',
-              title: '走廊瓷砖'
-            }, {
-              href: '',
-              title: '大厅瓷砖'
-            }
-          ]
-        },
-        {
-          children: [
-            {
-              href: '',
-              title: '简约风格'
-            },
-            {
-              href: '',
-              title: '新中式风格'
-            }, {
-              href: '',
-              title: '欧式风格'
-            }, {
-              href: '',
-              title: '古典风格'
-            }, {
-              href: '',
-              title: '田园风格'
-            }, {
-              href: '',
-              title: '工业风格'
-            }
-          ]
-        },
-      ]
-    }
   },
   methods: {
+    //获取第一个数据
+    getPublicData(){
+      getPublicData().then(res => {
+        this.findList = res.data.goodscategory_list;
+      });
+    },
     changeFinds(moduleIndex) {
-      let find0 = document.getElementById('find_0')
+      this.findIndex=moduleIndex
-      let find1 = document.getElementById('find_1')
+      let find0 = document.getElementById("find_0");
-      let find2 = document.getElementById('find_2')
+      find0.classList.remove("current");
-      let bok0 = document.getElementById('bok_0')
-      let bok1 = document.getElementById('bok_1')
-      let bok2 = document.getElementById('bok_2')
       if (moduleIndex === 0) {
-        find0.classList.add('current')
+        this.getPublicData()
-        find1.classList.remove('current')
-        find2.classList.remove('current')
-        bok0.style.display = 'block'
-        bok1.style.display = 'none'
-        bok2.style.display = 'none'
       } else if (moduleIndex === 1) {
-        find0.classList.remove('current')
+        getPublicData().then(res => {
-        find1.classList.add('current')
+          this.findList = res.data.space_list;
-        find2.classList.remove('current')
+        });
-        find1.addClass = 'current'
-        bok0.style.display = 'none'
-        bok1.style.display = 'block'
-        bok2.style.display = 'none'
       } else if (moduleIndex === 2) {
-        find0.classList.remove('current')
+        getPublicData().then(res => {
-        find1.classList.remove('current')
+          this.findList = res.data.style_list;
-        find2.classList.add('current')
+        });
-        find2.addClass = 'current'
-        bok0.style.display = 'none'
-        bok1.style.display = 'none'
-        bok2.style.display = 'block'
       }
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-*{
+* {
   font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
 }
+
 @media screen and (max-width: 1660px) {
   .fastFind {
     width: 1230px !important;
@@ -244,6 +154,10 @@ export default {
     float: right;
 
     ul {
+      li:hover {
+        background: #eeeeee;
+      }
+
       li {
         display: inline;
         width: 120px;
@@ -279,18 +193,6 @@ export default {
   margin: 0 auto;
   padding: 15px 0;
 
-  #bok_1 {
-    display: none;
-  }
-
-  #bok_2 {
-    display: none;
-  }
-
-  ul {
-    li {
-      display: inline;
-
     > a {
       font-size: 16px;
       color: #333;
@@ -300,7 +202,5 @@ export default {
     > a:hover {
       text-decoration: underline;
     }
-    }
-  }
 }
 </style>

src/components/NewsCenter.vue

@@ -2,11 +2,9 @@
   <div class="newsCenter">
     <a href="/about_us">
       <div class="news_bg">
+        <img src="../assets/index/b1.jpg" alt="">
       </div>
     </a>
-    <!--    <el-row type="flex" >-->
-    <!--      <el-col :span="4"></el-col>-->
-    <!--      <el-col :span="16">-->
     <div class="newsWidth">
       <div class="news_left">
         <div class="items">
@@ -34,15 +32,15 @@
               <li v-for="(item,index) in itemList" :key="index">
                 <div class="pics">
                   <a :href="item.href">
-                    <img :src="item.src" alt=""/>
+                    <img :src="item.image" alt=""/>
                   </a>
                 </div>
                 <div class="info">
                   <div class="title">
                     <a :href="item.href">{{ item.title }}</a>
                   </div>
-                  <div class="smy">{{ item.smy }}</div>
+                  <div class="smy">{{ item.synopsis }}</div>
-                  <div class="dates">发布时间：{{ item.dates }}</div>
+                  <div class="dates">发布时间：{{ item.create_time }}</div>
                 </div>
               </li>
             </ul>
@@ -50,54 +48,43 @@
         </div>
       </div>
     </div>
-    <!--      </el-col>-->
-    <!--    </el-row>-->
   </div>
 </template>
 
 <script>
+import {getArticleList} from "@/api";
+
 export default {
   name: "NewsCenter",
   data() {
     return {
-      news_summary: '坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。',
+      news_summary: "坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。",
       classifyList: [
         {
-          href: '',
+          href: "/news",
-          title: '公司新闻'
+          title: "公司新闻"
         },
         {
-          href: '',
+          href: "",
-          title: '行业动态'
+          title: "行业动态"
         }, {
-          href: '',
+          href: "",
-          title: '瓷砖百科'
+          title: "瓷砖百科"
         }
       ],
-      itemList: [
+      itemList: []
-        {
+    };
-          href: '',
+  },
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367sss.jpg',
+  created() {
-          title: '【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间。',
+    getArticleList({
-          smy: '...',
+      classid: 6,
-          dates: '2022-7-28'
+      page: 1,
-        }, {
+      limit: 10
-          href: '',
+    }).then(res => {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960sss.jpg',
+      this.itemList = res.data.list;
-          title: 'EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。',
+    });
-          smy: '...',
-          dates: '2022-7-7'
-        }, {
-          href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220706/16570891341430082sss.jpg',
-          title: '艺鹏·科普 | 为什么微水泥瓷砖那么火爆？让我们一探究竟！',
-          smy: '...',
-          dates: '2022-7-6'
   }
-      ]
+};
-    }
-  }
-}
 </script>
 
 <style scoped lang="scss">
@@ -117,9 +104,11 @@ export default {
   min-width: 1300px;
 
   .news_bg {
-    background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
+    img {
-    background-size: cover;
+      width: 100%;
       height: 380px;
+      object-fit: cover;
+    }
   }
 
   .newsWidth {
@@ -130,7 +119,7 @@ export default {
       width: 30%;
       float: left;
       padding: 90px 0;
-      background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
+      background: #f1f1f1 url('../assets/index/newsBgc.jpg') no-repeat right bottom;
 
       .items {
         display: block;
@@ -184,12 +173,13 @@ export default {
         width: 70%;
         float: right;
         padding: 40px 0 0 0;
+        font-size: 14px;
 
         ul {
-          float: right;
+          display: flex;
+          justify-content: right;
 
           li {
-            float: right;
             margin: 0 0 0 15px;
 
             a {
@@ -255,7 +245,13 @@ export default {
 
                 .smy {
                   color: #777;
-                  padding: 6px 0;
+                  padding: 3px 0;
+                  margin: 3px 0;
+                  font-size: 14px;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 3;
+                  -webkit-box-orient: vertical;
+                  overflow: hidden;
                 }
 
                 .dates {

src/components/Pagination.vue

@@ -41,7 +41,6 @@ export default {
   },
   methods:{
     handleCurrentChange(val) {
-      //console.log(val)
       this.$emit('pageChange', val)
     },
     previous() {
@@ -67,9 +66,12 @@ export default {
   background-color: #fff;
 }
 /deep/.el-button:hover{
-  color: #fff;
+  color: #fff!important;
   background-color: #333;
 }
+/deep/.el-button:focus{
+  color: #333;
+}
 /deep/.el-pager li:hover{
   color: #fff!important;
   background-color: #333!important;

src/components/PicturesBox.vue

@@ -5,20 +5,31 @@
       <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
         <ul>
           <li v-for="(item,index) in imageList"
-              :key="index" @click="type!==22?handleClickNews(index):''">
+              :key="index" @click="type!==22?handleClickNews(item):''">
             <div class="item">
               <a>
-                <span class="pic" v-if="type!==22">
+                <div v-if="type===33">
+                <span class="pic">
                   <img :src="item.image" alt="">
                 </span>
+                  <span class="inf">{{ item.name }}</span>
+                  <span class="size">{{ item.goods_category.name }}</span>
+                </div>
+                <!-- 新闻-->
+                <div v-if="type===11">
                   <el-image
-                  v-if="type===22"
+                    :src="item.image">
-                  :src="item.imgUrl"
-                  :preview-src-list="item.bigSrc">
                   </el-image>
-                <span class="info" v-if="type===22">{{ item.word }}</span>
+                  <span class="inf">{{ item.title }}</span>
-                <span class="inf" v-if="type!==22">{{ item.name }}</span>
+                  <span class="info">{{ item.create_time }}</span>
-                <span class="size" v-if="type!==22">{{ item.date }}</span>
+                </div>
+                <!--形象展示放大  -->
+                <div v-if="type===22" class="bigImg">
+                  <el-image
+                    :src="item.image">
+                  </el-image>
+                  <span class="inf" style="text-align: center">{{ item.title }}</span>
+                </div>
               </a>
             </div>
           </li>
@@ -38,34 +49,30 @@ export default {
      * 22是封装图片放大的效果
      * 33是跳转到产品详情
      */
-    type: Number
+    type: Number,
+    newsItem: String
   },
   data() {
-    return {}
+    return {};
   },
   methods: {
     /**
      * 点击图片进入详情页
      */
-    handleClickNews(index) {
+    handleClickNews(item) {
-      if(this.type==33){
+      if (this.type == 33) {
         this.$router.push({
-          path: '/products_detail',    //跳转的路由
+          path: "/products_detail",    //跳转的路由
-          // query:{    //跳转路由的参数
+          query: {    //跳转路由的参数
-          //   type:type    //前面的type是参数的名称
+            classid: item.id    //前面的type是参数的名称
-          //   //后面的type是点击产品时传过来的型号 这里也就是m320
+          }
-          // }
+        });
-        })
+      } else if (this.type == 11) {
-      }else {
+        this.$emit("getNewsIdClick", item.id);
-        this.$parent.showDetail=true
-        this.$parent.company_news=false
-        this.$parent.industry_dynamics=false
-        this.$parent.ceramic=false
-        this.$parent.showPagination=false
       }
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -82,6 +89,33 @@ export default {
   }
 }
 
+/deep/ .el-image:hover {
+  img {
+    transform: scale(1.2);
+    opacity: 0.8;
+    background-color: #000000;
+  }
+}
+
+.bigImg {
+  height: 270px;
+  display: inline-block;
+  border: 1px solid #e9e9e9;
+  overflow: hidden;
+
+  /deep/ .el-image {
+    width: 308px;
+    height: 270px;
+    background-color: #000000;
+
+    img {
+      width: 100%;
+      display: block;
+      transition: all 0.4s;
+    }
+  }
+}
+
 .image_list {
   width: 100%;
   padding: 20px 0;
@@ -110,15 +144,18 @@ export default {
               transition: all 0.4s;
             }
           }
-          .info{
+
-            text-align: center;
+          .info {
+            text-align: left;
             display: block;
-            font-size: 16px;
+            font-size: 12px;
             overflow: hidden;
             white-space: nowrap;
             -o-text-overflow: ellipsis;
             text-overflow: ellipsis;
+            color: #666;
           }
+
           span.inf {
             display: block;
             font-size: 16px;

src/components/ProductsClassify.vue

@@ -2,9 +2,9 @@
   <div class="grid">
     <div class="grid_box">
       <div class="grid_left">
-        <a href="">
+        <a href="/products_center">
             <span class="pic">
-              <img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
+              <img src="../assets/index/ibg0.jpg" alt=""/>
             </span>
           <span class="info">产品分类</span>
           <span>了解更多</span>
@@ -34,22 +34,22 @@ export default {
       pics: [
         {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
+          src: require('../assets/index/product1.png'),
           name: '瓷抛大理石'
         },
         {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
+          src:require('../assets/index/product2.jpg'),
           name: '通体大理石'
         },
         {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
+          src: require('../assets/index/product3.jpg'),
           name: '中板通体大理石'
         },
         {
           href: '',
-          src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
+          src: require('../assets/index/product4.jpg'),
           name: '大板通体大理石'
         }
       ]

src/components/ProductsShow.vue

@@ -7,64 +7,37 @@
         <div class="show_title">
           <h2>产品展示</h2>
           <h3>—— PRODUCTS ——</h3>
-          <a href="">查看所有</a>
+          <a href="/products_center">查看所有</a>
         </div>
       </el-col>
     </el-row>
     <el-row type="flex" style="justify-content: center">
-<!--      <el-col :span="4">-->
-<!--      </el-col>-->
-<!--      <el-col :span="16" class="tagRow">-->
         <div>
           <el-tag
             v-for="item in tagItems"
             :key="item.title"
             effect="plain">
-            <a :href="item.href">{{ item.title }}</a>
+            <a :href="item.href">{{ item.name }}</a>
           </el-tag>
         </div>
-<!--      </el-col>-->
     </el-row>
   </div>
 </template>
 
 <script>
+import {getPublicData} from "@/api";
+
 export default {
   name: "ProductsShow",
   data(){
     return{
-      tagItems:[
+      tagItems:[]
-        {
+    }
-          href: '',
-          title: '瓷抛大理石'
   },
-        {
+  created() {
-          href: '',
+    getPublicData().then(res => {
-          title: '通体大理石'
+      this.tagItems = res.data.goodscategory_list;
-        }, {
+    });
-          href: '',
-          title: '中板通体大理石'
-        }, {
-          href: '',
-          title: '大板通体大理石'
-        }, {
-          href: '',
-          title: '银河系大板'
-        }, {
-          href: '',
-          title: '仿古砖600x600'
-        }, {
-          href: '',
-          title: '金刚大理石'
-        }, {
-          href: '',
-          title: '岩板'
-        }, {
-          href: '',
-          title: '微水泥'
-        }
-      ]
-    }
   }
 }
 </script>

src/components/ProductsTabsItem.vue

@@ -10,7 +10,7 @@
       </el-tabs>
       <el-tabs v-else v-model="activeName" @tab-click="handleClick">
         <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title" >
-          {{ title === 0 ? '' : item.title  }}
+          {{item.title  }}
         </el-tab-pane>
       </el-tabs>
       <el-tabs v-if="title===9" v-model="activeName" @tab-click="handleClick">
@@ -30,10 +30,7 @@ export default {
   props: {
     title: Number,
     tabList: {
-      type: Array,
+      type: Array
-      default: ()=>{
-        return []
-      }
     },
     fatherMethod:{
       type:Function,

src/components/ProjectCase.vue

@@ -6,7 +6,7 @@
           <h2>工程案例</h2>
           <h3>—— Engineering Case ——</h3>
           <div class="case_more">
-            <a href="">查看所有</a>
+            <a href="/image_display">查看所有</a>
           </div>
         </div>
       </el-row>

src/views/aboutUs/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="about_us">
     <!-- 顶部图片 -->
-    <div class="about_us_bg"></div>
+    <div class="about_us_bg">
+      <img src="../../assets/aboutus.jpg" alt=""/>
+    </div>
     <!--标签栏 -->
     <ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
     <!-- 关于我们的内容-->
@@ -89,11 +91,12 @@ export default {
   min-width: 1300px;
 
   .about_us_bg {
-    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448450589680815.jpg");
+    height: 360px;
+    img{
       width: 100%;
       height: 360px;
-    background-repeat: no-repeat;
+      object-fit: cover;
-    background-position: center center;
+    }
   }
 
   .introduce {

src/views/attractAndJoin/index.vue

@@ -2,6 +2,7 @@
   <div class="Attract_join">
     <!-- 顶部图片 -->
     <div class="Attract_join_bg">
+      <img src="../../assets/join.jpg" alt=""/>
     </div>
     <!--标签栏 -->
     <ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick"/>
@@ -81,11 +82,12 @@ export default {
   min-width: 1300px;
 
   .Attract_join_bg {
-    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448381427541777.jpg");
+    height: 360px;
+    img{
       width: 100%;
       height: 360px;
-    background-repeat: no-repeat;
+      object-fit: cover;
-    background-position: center center;
+    }
   }
 
   .support {

src/views/contactUs/index.vue

@@ -2,6 +2,7 @@
   <div class="contact_us">
     <!-- 顶部图片 -->
     <div class="contact_us_bg">
+      <img src="../../assets/contactus.jpg" alt=""/>
     </div>
     <!--标签栏 -->
     <ProductsTabsItem :tab-list="contactTabs"/>
@@ -15,7 +16,7 @@
       </p>
       <p class="phone">电话：{{ tel }}</p>
       <div class="contact_logo">
-        <img :src="logo" alt=""/>
+        <img src="@/assets/qr1.jpg" alt=""/>
       </div>
     </div>
   </div>
@@ -33,8 +34,7 @@ export default {
       contactTabs: [],
       corporate_name: "",
       corporate_add: "",
-      tel: "",
+      tel: ""
-      logo: "http://www.yipengtaoci.com/upfiles/images/20200706/15940300499317991.jpg"
     };
   },
   mounted() {
@@ -42,7 +42,6 @@ export default {
       this.corporate_name = res.data.corporate_name;
       this.corporate_add = res.data.corporate_add;
       this.tel = res.data.tel;
-      // this.logo = res.data.logo;
       this.contactTabs = res.data.contact_us;
     });
   }
@@ -54,13 +53,13 @@ export default {
   min-width: 1300px;
 
   .contact_us_bg {
-    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181214/15447790134910001.jpg");
+    height: 360px;
+    img{
       width: 100%;
       height: 360px;
-    background-repeat: no-repeat;
+      object-fit: cover;
-    background-position: center center;
+    }
   }
-
 
   .contact_content {
     padding: 40px 0;

src/views/footer/index.vue

@@ -2,8 +2,7 @@
   <div class="footer_bg">
     <el-row type="flex" class="up_footer">
       <div class="up_left">
-        <el-image
+        <el-image :src="logo"></el-image>
-          :src="logo"></el-image>
         <div>
           {{ corporate_name }}
         </div>
@@ -13,15 +12,13 @@
           <li v-for="(footerItem,footerIndex) in footerList" :key="footerIndex">
             <a>{{ footerItem.title }}</a>
             <div class="item" v-for="(footerItems,footerItemsIndex) in footerItem.items" :key="footerItemsIndex">
-              <a>{{ footerItems.name }}</a>
+              <a>{{ footerItems.title }}</a>
             </div>
           </li>
         </ul>
       </div>
       <div class="up_right">
-        <el-image
+        <img style="width: 100px; height: 100px" src="@/assets/qr2.jpg" alt=""/>
-          style="width: 100px; height: 100px"
-          src="http://www.yipengtaoci.com/upfiles/images/20200706/15940289752944272.jpg"></el-image>
       </div>
     </el-row>
     <el-row type="flex" class="down_footer">
@@ -52,29 +49,19 @@ export default {
       footerList: [
         {
           title: "关于我们",
-          items: [
+          items: []
-            {
-              name: "企业简介"
-            },
-            {
-              name: "品牌文化"
-            },
-            {
-              name: "企业观点"
-            }
-          ]
         },
         {
           title: "新闻资讯",
           items: [
             {
-              name: "公司新闻"
+              title: "公司新闻"
             },
             {
-              name: "行业动态"
+              title: "行业动态"
             },
             {
-              name: "瓷砖百科"
+              title: "瓷砖百科"
             }
           ]
         },
@@ -82,31 +69,20 @@ export default {
           title: "形象展示",
           items: [
             {
-              name: "资质荣誉"
+              title: "资质荣誉"
             },
             {
-              name: "工程案例"
+              title: "工程案例"
             }
           ]
         },
         {
           title: "招商加盟",
-          items: [
+          items: []
-            {
-              name: "支持策略"
-            },
-            {
-              name: "加盟条件"
-            }
-          ]
         },
         {
           title: "联系我们",
-          items: [
+          items: []
-            {
-              name: "联系方式"
-            }
-          ]
         }
       ]
     };
@@ -116,6 +92,9 @@ export default {
       this.logo = res.data.logo;
       this.corporate_name = res.data.corporate_name;
       this.corporate_add = res.data.corporate_add;
+      this.footerList[0].items=res.data.aboutus
+      this.footerList[3].items=res.data.join
+      this.footerList[4].items=res.data.contact_us
     });
   }
 };

src/views/header/index.vue

@@ -7,7 +7,7 @@
               艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
             </span>
           <span class="up_right">
-              {{corporate_name}}
+              {{ corporate_name }}
             </span>
         </div>
       </div>
@@ -24,13 +24,22 @@
               <a :href="item.href" class="nav_item">
                 {{ item.title }}
               </a>
-              <ul class="subNav" v-if="item.children">
+              <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">
+                      {{ childrenItem.name }}
+                    </a>
+                  </li>
+                </ul>
+                <ul class="subNav" v-else>
                   <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
                     <a :href="childrenItem.href">
                       {{ childrenItem.title }}
                     </a>
                   </li>
                 </ul>
+              </div>
             </li>
           </ul>
         </div>
@@ -60,153 +69,106 @@ export default {
   name: "index",
   data() {
     return {
-      logo:'',
+      logo: "",
-      corporate_name:'',
+      corporate_name: "",
       navList: [
         {
-          href: '/',
+          href: "/",
-          title: '网站首页',
+          title: "网站首页"
         },
         {
-          href: '/about_us',
+          href: "/about_us",
-          title: '关于我们',
+          title: "关于我们",
+          children: []
+        },
+        {
+          href: "/products_center",
+          title: "产品中心",
+          children: []
+        },
+        {
+          href: "/news",
+          title: "新闻资讯",
           children: [
             {
-              href: '/about_us',
+              href: "/news",
-              title: '企业简介'
+              title: "公司新闻"
             },
             {
-              href: '',
+              href: "",
-              title: '品牌文化'
+              title: "行业动态"
             }, {
-              href: '',
+              href: "",
-              title: '企业观点'
+              title: "瓷砖百科"
-            }, {
-              href: '',
-              title: '企业文化'
             }
           ]
-        }, {
+        },
-          href: '/products_center',
+        {
-          title: '产品中心',
+          href: "/image_display",
+          title: "形象展示",
           children: [
             {
-              href: '',
+              href: "/image_display",
-              title: '瓷抛大理石'
+              title: "资质荣誉"
             },
             {
-              href: '',
+              href: "",
-              title: '通体大理石'
+              title: "工程案例"
-            }, {
-              href: '',
-              title: '中板通体大理石'
-            }, {
-              href: '',
-              title: '大板通体大理石'
-            }, {
-              href: '',
-              title: '银河系大板'
-            }, {
-              href: '',
-              title: '仿古砖600x600'
-            }, {
-              href: '',
-              title: '金刚大理石'
-            }, {
-              href: '',
-              title: '岩板'
-            }, {
-              href: '',
-              title: '微水泥'
             }
           ]
-        }, {
-          href: '/news',
-          title: '新闻资讯',
-          children: [
-            {
-              href: '/news',
-              title: '公司新闻'
         },
         {
-              href: '',
+          href: "/attract_and_join",
-              title: '行业动态'
+          title: "招商加盟",
-            }, {
+          children: []
-              href: '',
-              title: '瓷砖百科'
-            }
-          ]
-        }, {
-          href: '/image_display',
-          title: '形象展示',
-          children: [
-            {
-              href: '/image_display',
-              title: '资质荣誉'
         },
         {
-              href: '',
+          href: "/contact_us",
-              title: '工程案例'
+          title: "联系我们"
         }
       ]
-        }, {
+    };
-          href: '/attract_and_join',
-          title: '招商加盟',
-          children: [
-            {
-              href: '/attract_and_join',
-              title: '支持策略'
-            },
-            {
-              href: '',
-              title: '加盟条件'
-            },
-          ]
-        }, {
-          href: '/contact_us',
-          title: '联系我们'
-        }
-      ]
-    }
   },
   mounted() {
     getPublicData().then(res => {
-      // console.log('公共数据',res.data);
       this.logo = res.data.logo;
       this.corporate_name = res.data.corporate_name;
-      // this.navList[2].children=res.data.goodscategory_list
+      this.navList[1].children = res.data.aboutus;
-      // sessionStorage.setItem("lang", res.data.corporate_name)
+      this.navList[2].children = res.data.goodscategory_list;
+      this.navList[5].children = res.data.join;
+      this.navList[6].children = res.data.contact_us;
     });
-    let header_bg = document.getElementById('header_bg')
+    let header_bg = document.getElementById("header_bg");
-    let search_header = document.getElementById('search_header')
+    let search_header = document.getElementById("search_header");
 
     window.onscroll = () => {
       // 获取滚动距离
       let top = document.documentElement.scrollTop || document.body.scrollTop;
       if (top >= 140) {
-        header_bg.style = 'display:none;transition:  all 0.6s;'
+        header_bg.style = "display:none;transition:  all 0.6s;";
-        search_header.style = 'position: fixed;top: 0;;display:block;transition:  all 0.6s;'
+        search_header.style = "position: fixed;top: 0;;display:block;transition:  all 0.6s;";
       } else if (top === 0) {
-        header_bg.style = 'position: static;'
+        header_bg.style = "position: static;";
-        search_header.style = 'display:none'
+        search_header.style = "display:none";
       }
-    }
+    };
-    const that = this
+    const that = this;
     window.onresize = () => {
       return (() => {
         //这里写要操作的函数
-        window.screenWidth = document.body.clientWidth
+        window.screenWidth = document.body.clientWidth;
-        that.width = window.screenWidth >= 1200
+        that.width = window.screenWidth >= 1200;
-      })()
+      })();
+    };
   }
-  },
+};
-}
 </script>
 
 <style scoped lang="scss">
 * {
   font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
 }
+
 @media screen and (max-width: 1660px) {
   .down_header {
     width: 1230px !important;
@@ -218,6 +180,7 @@ export default {
     width: 1230px !important;
   }
 }
+
 @media screen and (max-width: 1480px) {
   .down_header {
     width: 1100px !important;
@@ -229,6 +192,7 @@ export default {
     width: 1100px !important;
   }
 }
+
 .header_bg {
   transition: all 0.6s;
   height: 130px;
@@ -274,12 +238,14 @@ export default {
     .down_left {
       position: absolute;
       float: left;
-      /deep/.el-image {
+
-        .el-image__inner{
+      /deep/ .el-image {
-          width: 323px!important;
+        .el-image__inner {
-          height: 85px!important;
+          width: 323px !important;
+          height: 85px !important;
         }
       }
+
       > a:hover:after {
         border: none;
       }

src/views/imageDisplay/index.vue

@@ -2,111 +2,63 @@
   <div class="image_display">
     <!-- 顶部图片 -->
     <div class="imageDisplay_bg">
+      <img src="../../assets/image_display.jpg" alt=""/>
     </div>
     <!--标签栏 -->
     <ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick"/>
     <!--资质荣誉 22是封装图片放大的效果-->
-    <PicturesBox  id="honor_list" :image-list="imageAndWord" :type="22"/>
+    <PicturesBox :image-list="imageAndWord" :type="22"/>
-    <!--工程案例-->
+    <div class="nullData" v-if="showNull">
-    <PicturesBox id="project_list" :image-list="projectList" :type="22"/>
+      暂时没有数据！
+    </div>
   </div>
 </template>
 
 <script>
 import ProductsTabsItem from "@/components/ProductsTabsItem";
 import PicturesBox from "@/components/PicturesBox";
+import {getArticleList} from "@/api";
 export default {
   name: "index",
   components: {ProductsTabsItem,PicturesBox},
   data() {
     return {
+      showNull:false,
       imageDisplayTabs: [
         {
-          label: '资质荣誉',
+          title: '资质荣誉',
           name: 'first'
         },
         {
-          label: '工程案例',
+          title: '工程案例',
           name: 'second'
         }
       ],
-      imageAndWord: [
+      imageAndWord: [],
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480.jpg'],
-          word: "国家权威检测合格质量信得过产品"
-        }, {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987sss.jpg",
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987.jpg'],
-          word: "全国产品质量消费者满意品牌"
-        }, {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898sss.jpg",
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898.jpg'],
-          word: "中国工程建设推荐产品"
-        }, {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413sss.jpg",
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413.jpg'],
-          word: "中国陶瓷行业十大品牌"
-        }, {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082sss.jpg",
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082.jpg'],
-          word: "中国政府采购重点推荐产品"
     }
-      ],
-      projectList: [
-        {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
-          word: '大学城新校区教学楼'
   },
-        {
+  mounted() {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
+    this.getArticleList(2)
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
-          word: '嘉兴中山名都'
-        },
-        {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
-          word: '蒲田公安局'
-        }, {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
-          word: '财政局大厦'
-        }
-        , {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
-          word: '西安市雅盛大厦'
-        }, {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
-          word: '武汉市金晖大厦'
-        }, {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
-          word: '杭州市风情小区'
-        }, {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
-          word: '金湖花园'
-        }, {
-          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
-          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435.jpg'],
-          word: '碧桂园'
-        },
-      ],
-    }
   },
   methods: {
+    //获取新闻列表
+    getArticleList(classId,page,limit){
+      getArticleList({
+        classid: classId,
+        page: this.page,
+        limit: this.limit
+      }).then(res => {
+        this.imageAndWord = res.data.list;
+        if(res.data.list.length==0){
+          this.showNull=true
+        }
+      });
+    },
     handleClick(tab) {
-      const honor_list = document.getElementById('honor_list');
+      if(tab.index==0){
-      const project_list = document.getElementById('project_list');
+        this.getArticleList(2)
-      if (tab.index == 0) {
+      }else if(tab.index==1){
-        honor_list.style.display = "block"
+        this.getArticleList(8)
-        project_list.style.display = "none"
-      } else if (tab.index == 1) {
-        project_list.style.display = "block"
-        honor_list.style.display = "none"
       }
     }
   }
@@ -117,16 +69,22 @@ export default {
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-
+.nullData{
+  display: block;
+  height: 300px;
+  line-height: 300px;
+  text-align: center;
+}
 .image_display {
   min-width: 1300px;
 
   .imageDisplay_bg {
-    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448387657921217.jpg");
+    height: 360px;
+    img{
       width: 100%;
       height: 360px;
-    background-repeat: no-repeat;
+      object-fit: cover;
-    background-position: center center;
+    }
   }
 
   #project_list {

src/views/index/index.vue

@@ -25,6 +25,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/news/detail.vue

@@ -35,6 +35,10 @@ import {getArticleInfo} from "@/api";
 
 export default {
   name: "detail",
+  props: {
+    newsId: Number,
+    classIndex: Number
+  },
   data() {
     return {
       tabs_title: '公司新闻',
@@ -42,7 +46,12 @@ export default {
     }
   },
   mounted() {
-    getArticleInfo(6).then(res => {
+    if(this.classIndex==1){
+      this.tabs_title='行业动态'
+    }else if(this.classIndex==2){
+      this.tabs_title='瓷砖百科'
+    }
+    getArticleInfo(this.newsId).then(res => {
       this.htmlStr=res.data.articleinfo.content
     });
   },

src/views/news/index.vue

@@ -2,18 +2,21 @@
   <div class="news">
     <!-- 顶部图片 -->
     <div class="news_bg">
+      <img src="../../assets/news.jpg" alt=""/>
     </div>
     <!--标签栏 -->
     <ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick"/>
     <!--图片栏-->
-    <PicturesBox :image-list="imageAndWord"  v-show="company_news"/>
+    <PicturesBox :image-list="imageAndWord" :type="11" v-show="showImage" @getNewsIdClick="getNewsId"/>
-    <PicturesBox :image-list="industryList"  v-show="industry_dynamics"/>
+
-    <PicturesBox :image-list="ceramicList" v-show="ceramic"/>
     <!--页码-->
-    <Pagination :currentPage="1" :total="20" :pageSize="10" v-show="showPagination"/>
+    <Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage" v-show="showPagination"/>
 
     <!--新闻详情-->
-    <detail v-show="showDetail"/>
+    <detail :newsId="newsId" :classIndex="classIndex" v-if="showDetail"/>
+    <div class="nullData" v-if="showNull">
+      暂时没有数据！
+    </div>
   </div>
 </template>
 
@@ -22,17 +25,21 @@ import Pagination from "@/components/Pagination";
 import PicturesBox from "@/components/PicturesBox";
 import ProductsTabsItem from "@/components/ProductsTabsItem";
 import Detail from "@/views/news/detail";
+import {getArticleList} from "@/api";
 
 export default {
   name: "index",
   components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
-      showPagination:true,
+      page:1,
+      limit:10,
+      total:0,
+      newsId:6,
+      classIndex:0,
       showDetail:false,
-      company_news:true,
+      showImage:true,
-      industry_dynamics:false,
+      showPagination:true,
-      ceramic:false,
       newsTab: [
         {
           title: '公司新闻',
@@ -45,168 +52,59 @@ export default {
           name: 'third'
         },
       ],
-      imageAndWord: [
+      imageAndWord: [],
-        {
+      showNull:false
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
-          word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
-          date: "2022.7.28"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
-          word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
-          date: "2022.7.28"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
-          word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
-          date: "2022.7.28"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
-          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
-          date: "2022.7.7"
-        }
-      ],
-      industryList: [
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
-          word: "陶卫企业面临成本挑战",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
-          word: "陶卫企业面临成本挑战",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
-          word: "陶卫企业面临成本挑战",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
-          word: "陶卫企业面临成本挑战",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
-          word: "陶卫企业面临成本挑战",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
-          word: "陶卫企业面临成本挑战",
-          date: "2018.10.14"
-        },
-      ],
-      ceramicList: [
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
-          word: "陶瓷一线品牌需精选 升级你的空间质量",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
-          word: "陶瓷一线品牌需精选 升级你的空间质量",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
-          word: "陶瓷一线品牌需精选 升级你的空间质量",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
-          word: "陶瓷一线品牌需精选 升级你的空间质量",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
-          word: "陶瓷一线品牌需精选 升级你的空间质量",
-          date: "2018.10.14"
-        },
-        {
-          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
-          word: "陶瓷一线品牌需精选 升级你的空间质量",
-          date: "2018.10.14"
-        }
-      ]
     };
   },
+  mounted() {
+    this.getArticleList(5)
+  },
   methods: {
-    handleClick(tab) {
+    getNewsId(value){
-      // const company_news = document.getElementById('company_news');
+      this.newsId=value
-      // const industry_dynamics = document.getElementById('industry_dynamics');
+      if(this.newsId!==0){
-      // const ceramic = document.getElementById('ceramic');
+        this.showDetail=true
-      if (tab.index == 0) {
-        this.company_news=true
-        this.industry_dynamics=false
-        this.ceramic=false
-        this.showPagination=true
-        // company_news.style.display = "block"
-        // industry_dynamics.style.display = "none"
-        // ceramic.style.display = "none"
-      } else if (tab.index == 1) {
-        this.company_news=false
-        this.industry_dynamics=true
-        this.ceramic=false
-        this.showDetail=false
         this.showPagination=false
-        // company_news.style.display = "none"
+        this.showImage=false
-        // industry_dynamics.style.display = "block"
-        // ceramic.style.display = "none"
-      } else if (tab.index == 2) {
-        this.company_news=false
-        this.industry_dynamics=false
-        this.ceramic=true
-        this.showDetail=false
-        this.showPagination=false
-        // company_news.style.display = "none"
-        // industry_dynamics.style.display = "none"
-        // ceramic.style.display = "block"
       }
     },
-
+    //获取新闻列表
+    getArticleList(classId,page,limit){
+      getArticleList({
+        classid: classId,
+        page: this.page,
+        limit: this.limit
+      }).then(res => {
+        this.total=res.data.count
+        this.imageAndWord = res.data.list;
+        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)
+      if (tab.index == 0) {
+        this.getArticleList(5)
+      } else if (tab.index == 1) {
+        this.getArticleList(6)
+      } else if (tab.index == 2) {
+        this.getArticleList(7)
+      }
+    },
+    //新闻分页
+    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)
+      }
+    }
   }
 }
 </script>
@@ -215,7 +113,12 @@ export default {
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-
+.nullData{
+  display: block;
+  height: 300px;
+  line-height: 300px;
+  text-align: center;
+}
 #industry_dynamics {
   display: none;
 }
@@ -242,11 +145,12 @@ export default {
 
 
   .news_bg {
-    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
+    height: 360px;
+    img{
       width: 100%;
       height: 360px;
-    background-repeat: no-repeat;
+      object-fit: cover;
-    background-position: center center;
+    }
   }
 
   .list2 {

src/views/productsCenter/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 产品标签栏-->
-    <ProductsTabsItem :title="0"/>
+    <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>
@@ -12,17 +12,17 @@
             </div>
             <div class="img_right">
               <div class="title">
-                产品名称：WH715T038
+                产品名称：{{detailList.name}}
               </div>
               <div class="space_style">
-                <p>产品分类：750x1500MM大板时代</p>
+                <p>产品分类：{{classifyName}}</p>
-                <p>适用空间：客厅瓷砖,书房瓷砖,卧室瓷砖,餐厅瓷砖,大厅瓷砖</p>
+                <p>适用空间：{{detailList.space}}</p>
-                <p>所属风格：简约风格,新中式风格,工业风格</p>
+                <p>所属风格：{{detailList.style}}</p>
               </div>
               <div class="img_part">
                 <ul>
                   <li v-for="(item,index) in imgList" :key="index" @click.stop="changeMainImg(index)">
-                    <img :src="item.src" alt=""/>
+                    <img :src="item.thumb_image" alt=""/>
                   </li>
                 </ul>
               </div>
@@ -36,12 +36,28 @@
                   </span>
               </div>
               <div>
-                <el-button size="small">上一款产品</el-button>
+                <el-button size="small" @click="prevProduct">上一款产品</el-button>
-                <el-button size="small">下一款产品</el-button>
+                <el-button size="small" @click="nextProduct">下一款产品</el-button>
               </div>
             </div>
           </div>
-
+          <!-- 同类产品推荐 -->
+          <div class="sameProducts">
+            <div class="same_title">同类产品推荐</div>
+            <div>
+              <ul>
+                <li v-for="(item,index) in goodsList" :key="index">
+                  <div class="sameItem">
+                    <img :src="item.image" alt=""/>
+                    <div class="info">{{item.name}}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="nullData" v-if="showNull">
+            暂时没有数据！
+          </div>
         </el-col>
       </el-row>
     </div>
@@ -50,33 +66,52 @@
 
 <script>
 import ProductsTabsItem from "@/components/ProductsTabsItem";
+import { getGoodsInfo} from "@/api";
 
 export default {
   name: "detail",
   components: {ProductsTabsItem},
   data() {
     return {
-      mainSrc: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079.jpg',
+      showNull:false,
-      imgList: [
+      mainSrc: '',
-        {
+      detailList:[],
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079s.jpg'
+      imgList: [],
-        },
+      classifyName:'',
-        {
+      goodsList:[]
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712901631818s.jpg'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712913084897s.jpg'
-        },
-        {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712911963193s.jpg'
-        },
-      ]
     }
   },
+  mounted() {
+    getGoodsInfo(this.$route.query.classid).then(res => {
+      this.goodsList=res.data.goods_lists
+      if(res.data.goods_lists.length==0){
+        this.showNull=true
+      }
+      this.detailList = res.data.info
+      this.classifyName = res.data.info.goods_category.name
+      this.imgList = res.data.img_list
+      this.mainSrc=this.imgList[0].ori_image
+    });
+  },
   methods: {
+    //上一款产品
+    prevProduct(){
+      // for (let i = 0; i < this.goodsList.length; i++) {
+      //   console.log(this.goodsList[i].id);
+      //   this.detailList=this.goodsList[0]
+      //   this.classifyName = this.goodsList[0].goods_category.name
+      //   this.imgList = res.data.img_list
+      //   this.mainSrc=this.imgList[0].ori_image
+      // }
+      // // console.log(this.detailList.id);
+    },
+    //下一款产品
+    nextProduct(){
+
+    },
     //点击小图切换主览图
     changeMainImg(index) {
-      this.mainSrc = this.imgList[index].src
+      this.mainSrc = this.imgList[index].ori_image
     },
     /**
      * 分享到微博
@@ -112,7 +147,12 @@ export default {
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-
+.nullData{
+  display: block;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+}
 /deep/ .el-button:focus, .el-button:hover {
   color: #333;
   border-color: #ddd;
@@ -138,7 +178,7 @@ export default {
   background-color: #f3f3f3;
 
   .img_text_content {
-    width: 1360px;
+    //width: 1360px;
     margin: 0 auto;
     display: flex;
 
@@ -151,7 +191,6 @@ export default {
       margin-right: 30px;
 
       img {
-        margin-top: 25%;
         width: 100%;
       }
     }
@@ -198,8 +237,7 @@ export default {
 
             img {
               width: 60px;
-              height: 30px;
+              height: 60px;
-              margin-top: 25%;
             }
           }
         }
@@ -218,5 +256,40 @@ export default {
   }
 }
 
-
+.sameProducts{
+  padding: 50px 0;
+  background-color: #f4f4f4;
+  .same_title{
+    display: inline;
+    width: 100%;
+    float: left;
+    margin: 0 0 15px 0;
+    padding: 0 0 15px 0;
+    font-size: 18px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  ul{
+    li{
+      display: inline;
+      width: 20%;
+      float: left;
+      cursor: pointer;
+      .sameItem{
+        display: block;
+        margin: 10px;
+        padding: 10px;
+        border: 1px solid #e9e9e9;
+        background-color: #fff;
+        img{
+          width: 100%;
+        }
+        .info{
+          padding: 5px 0 5px 0;
+          text-align: center;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/productsCenter/index.vue

@@ -7,22 +7,22 @@
       <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="classifyList spaceList">
+          <div class="spaceList">
             <strong>分类：</strong>
             <ul>
-              <li v-for="item in classifyList">{{ item.name }}</li>
+              <li v-for="(item,index) in classifyList" @click="changeClassify(item,index)" :id="'classify_'+index">{{ item.name }}</li>
             </ul>
           </div>
           <div class="spaceList">
             <strong>空间：</strong>
             <ul>
-              <li v-for="item in spaceList">{{ item.title }}</li>
+              <li v-for="(item,index) in spaceList" @click="changeSpace(item,index)" :id="'space_'+index">{{ item.title }}</li>
             </ul>
           </div>
-          <div class="styleList spaceList">
+          <div class="spaceList">
             <strong>风格：</strong>
             <ul>
-              <li v-for="item in styleList">{{ item.title }}</li>
+              <li v-for="(item,index) in styleList" @click="changeStyle(item,index)" :id="'style_'+index">{{ item.title }}</li>
             </ul>
           </div>
         </el-col>
@@ -30,7 +30,10 @@
     </div>
     <!--图片栏-->
     <PicturesBox :image-list="imgList" :type="33"/>
-    <Pagination :currentPage="1" :total="total" :pageSize="pageSize"/>
+    <Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage" v-if="showPagination"/>
+    <div class="nullData" v-if="showNull">
+      暂时没有数据！
+    </div>
   </div>
 </template>
 
@@ -45,12 +48,15 @@ export default {
   components: {PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
+      showNull:false,
+      showPagination:true,
       classifyList: [],
       spaceList: [],
       styleList: [],
-      pageSize:10,
+      pageSize:12,
       total:0,
-      imgList: []
+      imgList: [],
+      classIndex:''
     }
   },
   mounted() {
@@ -69,16 +75,55 @@ export default {
       page:1,
       limit:this.pageSize,
     }).then(res => {
-      // this.total=res.data.count
+      this.total=res.data.count
       this.imgList=res.data.list
     });
   },
   methods: {
+    //获取产品列表
+    getGoodsList(classid,page,limit,stylename,spacename){
+      getGoodsList({
+        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
+        }
+      });
+    },
+    //点击一级分类切换数据及切换不同二级分类
     handleClick(tab) {
       let index = parseInt(tab.index) + 1
+      this.classIndex=index
       getGoodsCategory(index).then(res => {
         this.classifyList = res.data.categorylist
       });
+      this.getGoodsList(index,1,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;"
+    },
+    //点击空间分类,筛选产品数据
+    changeSpace(item,index){
+      this.getGoodsList(this.classIndex,1,this.pageSize,'',item.title)
+      document.getElementById('space_'+index).style="color: #f00;text-decoration: underline;"
+    },
+    //点击风格分类,筛选产品数据
+    changeStyle(item,index){
+      this.getGoodsList(this.classIndex,1,this.pageSize,item.title,'')
+      document.getElementById('style_'+index).style="color: #f00;text-decoration: underline;"
     }
   }
 }
@@ -88,7 +133,12 @@ export default {
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
-
+.nullData{
+  display: block;
+  height: 300px;
+  line-height: 300px;
+  text-align: center;
+}
 .products_center {
   min-width: 1300px;