diff --git a/src/assets/QQKJ.png b/src/assets/QQKJ.png
new file mode 100644
index 0000000..5817f2c
Binary files /dev/null and b/src/assets/QQKJ.png differ
diff --git a/src/assets/ren.png b/src/assets/ren.png
new file mode 100644
index 0000000..72f120a
Binary files /dev/null and b/src/assets/ren.png differ
diff --git a/src/assets/weibo.png b/src/assets/weibo.png
new file mode 100644
index 0000000..a3c6347
Binary files /dev/null and b/src/assets/weibo.png differ
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
new file mode 100644
index 0000000..973be3c
--- /dev/null
+++ b/src/components/Pagination.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="pagination">
+    <el-button size="small" @click="previous">上一页</el-button>
+    <el-pagination
+      background
+      @current-change="handleCurrentChange"
+      :current-page.sync="current"
+      layout="pager"
+      :page-size="pageSize"
+      :total="total"
+      ref="pageGroup"
+    >
+    </el-pagination>
+    <el-button size="small" @click="next">下一页</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Pagination",
+  props: {
+    currentPage: Number,
+    pageSize: Number,
+    total: Number,
+  },
+  data(){
+    return{
+      current: 1,
+    }
+  },
+  watch: {
+    currentPage: {
+      handler() {
+        this.current = this.currentPage
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.current = this.currentPage
+  },
+  methods:{
+    handleCurrentChange(val) {
+      //console.log(val)
+      this.$emit('pageChange', val)
+    },
+    previous() {
+      this.$refs.pageGroup.prev()
+    },
+    next() {
+      this.$refs.pageGroup.next()
+    },
+  }
+}
+</script>
+
+<style scoped>
+.pagination{
+  padding: 40px 0;
+  display: flex;
+  justify-content: center;
+}
+/deep/.el-button{
+  padding: 3px 15px;
+  border-radius: unset;
+  border: 1px solid #333;
+  background-color: #fff;
+}
+/deep/.el-button:hover{
+  color: #fff;
+  background-color: #333;
+}
+/deep/.el-pager li:hover{
+  color: #fff!important;
+  background-color: #333!important;
+}
+/deep/.el-pager li.active {
+  color: #fff!important;
+  background-color: #333!important;
+}
+/deep/.el-pagination{
+  padding: 0;
+}
+/deep/.el-pagination.is-background .el-pager li {
+  display: inline-block;
+  height: 34px;
+  line-height: 34px;
+  padding: 0 16px;
+  border: 1px solid #333;
+  background-color: #fff;
+}
+
+</style>
diff --git a/src/components/ProductsClassify.vue b/src/components/ProductsClassify.vue
index 7c6530f..78bdf43 100644
--- a/src/components/ProductsClassify.vue
+++ b/src/components/ProductsClassify.vue
@@ -106,7 +106,7 @@ export default {
   padding: 50px 0 60px 0;
   background-color: #f9f9f9;
   position: relative;
-  min-width: 1270px;
+  min-width: 1300px;
   display: flex;
   .grid_box {
     width: 1360px;
diff --git a/src/components/ProjectCase.vue b/src/components/ProjectCase.vue
index 5cd886a..19adfbd 100644
--- a/src/components/ProjectCase.vue
+++ b/src/components/ProjectCase.vue
@@ -21,7 +21,7 @@
                     <el-image
                       class="img"
                       :src="item.src"
-                      :preview-src-list="imgBigList">
+                      :preview-src-list="item.bigSrc">
                     </el-image>
                   </div>
                   <div class="case_info">{{ item.projectName }}</div>
@@ -43,43 +43,40 @@ export default {
       projectList: [
         {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
           projectName: '大学城新校区教学楼'
         },
         {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
           projectName: '嘉兴中山名都'
         },
         {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
           projectName: '蒲田公安局'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
           projectName: '财政局大厦'
         }
         , {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
           projectName: '西安市雅盛大厦'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
           projectName: '武汉市金晖大厦'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
           projectName: '杭州市风情小区'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
+          bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
           projectName: '金湖花园'
         },
-
-      ],
-      imgBigList:[
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg',
-        'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg',
       ]
     }
   }
diff --git a/src/router/index.js b/src/router/index.js
index 9f2b54a..1784061 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,6 +19,11 @@ const routes = [
     name: 'index',
     component: () => import('../views/index/index')
   },
+  {
+    path: '/about_us',
+    name: 'about_us',
+    component: () => import('../views/aboutUs/index')
+  },
   {
     path: '/news',
     name: 'news',
@@ -27,7 +32,20 @@ const routes = [
   {
     path: '/image_display',
     name: 'image_display',
-    component: () => import('../views/ImageDisplay/index')
+    component: () => import('../views/imageDisplay/index')
+  },
+  {
+    path: '/attract_and_join',
+    name: 'attract_and_join',
+    component: () => import('../views/attractAndJoin/index')
+  },  {
+    path: '/contact_us',
+    name: 'contact_us',
+    component: () => import('../views/contactUs/index')
+  },  {
+    path: '/products_center',
+    name: 'products_center',
+    component: () => import('../views/productsCenter/index')
   },
 ]
 
diff --git a/src/views/aboutUs/index.vue b/src/views/aboutUs/index.vue
new file mode 100644
index 0000000..a5cca27
--- /dev/null
+++ b/src/views/aboutUs/index.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="about_us">
+    <!-- 顶部图片 -->
+    <div class="about_us_bg"></div>
+    <!--标签栏 -->
+    <div class="contact_us_border">
+      <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">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="企业简介" name="first">关于我们</el-tab-pane>
+            <el-tab-pane label="品牌文化" name="second">关于我们</el-tab-pane>
+            <el-tab-pane label="企业观点" name="third">关于我们</el-tab-pane>
+            <el-tab-pane label="企业文化" name="four">关于我们</el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </div>
+
+    <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="introduce" id="introduce">
+          <p v-for="(item,index) in pList" :key="index">
+            {{ item.text }}
+          </p>
+        </div>
+        <div class="introduce band" id="band">
+          <p v-for="(item,index) in bandList" :key="index">
+            <span>{{ item.text1 }}</span>
+            <span>{{ item.text2 }}</span>
+          </p>
+        </div>
+        <div class="introduce band" id="ideas">
+          <p v-for="(item,index) in ideaList" :key="index">
+            <span>{{ item.text1 }}</span>
+            <span>{{ item.text2 }}</span>
+            <span>{{ item.text3 }}</span>
+          </p>
+        </div>
+
+        <div class="culture" id="culture">
+          <!--          <table>-->
+          <!--            <tbody>-->
+          <!--            <tr v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">-->
+          <!--              <td class="culture_right">-->
+          <!--                &lt;!&ndash;                <div >&ndash;&gt;-->
+          <!--                <span>{{ item.text1 }}</span>-->
+          <!--                <span>{{ item.text2 }}</span>-->
+          <!--                &lt;!&ndash;                </div>&ndash;&gt;-->
+          <!--              </td>-->
+          <!--              <td class="culture_img">-->
+          <!--                <img :src="item.src" alt=""/>-->
+          <!--              </td>-->
+
+          <!--            </tr>-->
+          <!--            </tbody>-->
+          <!--          </table>-->
+          <div id="culture_content"  v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">
+            <div class="culture_img">
+              <img :src="item.src" alt=""/>
+            </div>
+            <div class="culture_right">
+              <!--                <div >-->
+              <span>{{ item.text1 }}</span>
+              <span>{{ item.text2 }}</span>
+              <!--                </div>-->
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      activeName: 'first',
+      pList: [
+        {
+          text: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。'
+        },
+        {
+          text: '公司依托便利的区位和人才优势，积极容身于国际圈，以其独特且具备设计韵味的产品体系，在国际舞台上崭露头角。凭借其先天的国际基因，产品开发潮流化，且与意大利知名瓷砖设计机构进行过多次合作。'
+        },
+        {
+          text: '艺鹏瓷砖注重于产品的环保性能，将应用美学与环保健康结合起来，为用户寻求高品质瓷砖应用解决方案，由于其专注的匠心精神，先后获得业内多项殊荣。'
+        },
+        {
+          text: '现面向全国各地开展招商加盟业务，专业的团队，打造服务一体化的招商体系，公司以“诚信、务实、全力支持”的加盟理念为每个渴望成功的加盟商提供投资少、风险低、增值快、市场潜力无限的投资机会，不断为广大加盟商创造盈利空间，我们将与加盟商一起不断创新、追求共赢、共享全新市场的无限商机。我们深信，加入成为艺鹏特许经营加盟商，将为您自己开创出一个不一样的成就人生！'
+        }
+      ],
+      bandList: [
+        {
+          text1: '品牌主张：把人文注入生活、品鉴艺术魅力、享受知性人生',
+          text2: '艺鹏主张利用空间的创新，把人们的生活从物质的享受，升华到一个精神享受境界。主张把人文元素通过空间存在的表现形式注入到生活中，而使生活处在一种艺术的魅力氛围中，静静品味人生的点点滴滴。'
+        },
+        {
+          text1: '品牌气质：高贵、艺术、完美、人文、知性',
+          text2: '高贵是艺鹏的外在气氛你，艺术是艺鹏的表现形象。完美是艺鹏的目标追求，人文是艺鹏的品牌内涵，知性是艺鹏的人生解读。'
+        }, {
+          text1: '品牌文化：人文创新完美艺术空间、知性引领高贵时尚潮流',
+          text2: '艺鹏以人文的魅力运用到空间创造中，使空间艺术趋于一种完美境界；艺鹏的这种知性艺术手法，对空间、对人生、都是一种旗帜性的标榜；是一种领先于时代的思想和品位追求也必将引领时尚的潮流，把人生导向高贵的商品高度。'
+        }, {
+          text1: '品牌理念：提升人居生活品味、打造知性时尚空间',
+          text2: '艺鹏的最终宗旨是提升人居生活品味，过程是打造知性时尚的空间。通过空间的打造和创新，来承载生活的无限美好和梦想。'
+        }, {
+          text1: '产品思路：以人文思维、专注陶瓷科技；做高端、知性的文化陶瓷',
+          text2: '艺鹏不为产品而做产品，艺鹏使用一种艺术的追求来雕琢空间，传承人文精神，通过陶瓷的科技创新来实现；突破传统的空间文化，提倡文化陶瓷的新理念，打造一种高端的，知性人生。'
+        },
+      ],
+      ideaList: [
+        {
+          text1: '企业文化宣言',
+          text2: '以文化文本，凝聚人才，铸造精品，历练价值，成就品牌'
+        },
+        {
+          text1: '企业文化核心',
+          text2: '团队致胜，倡导自我奋斗，自我超越；通过团队协作实现企业与员工的共同发展，建立共同价值信仰，以共同目标为行动的出发点与落脚点；在职能效率的基础上加强团队协作，互为包容那个，互为扶助，求和力，提效率实现客户、经销商、员工、社会以及企业自身的多方共赢。'
+        }, {
+          text1: '企业精神',
+          text2: '团结、敬业、务实、创新'
+        }, {
+          text1: '企业目标',
+          text2: '以成为中国建筑陶瓷行业顶级制造商为目标，以顶尖科技与创新思想为两翼，致力将中国建陶推向世界，打造百年世界品牌。'
+        }, {
+          text1: '企业风格',
+          text2: '实实在在做人，踏踏实实做事；真真切切承诺，切切实实服务。'
+        }, {
+          text1: '企业经营方针',
+          text2: '专注本业，以客为尊；持续发展，多赢共荣。'
+        }, {
+          text1: '工作作风',
+          text2: '快速反应，日事日毕，不找借口，全力以赴。  品牌定位：艺术创新、诗化人生；高端文艺、知性陶瓷',
+          text3: '艺鹏是一种建立在艺术上的诗画人生，有着诗的气质，又有着画的美感；在此的延续上，艺鹏展示的是一种高端的文艺，是一种人生的智慧之美。这就是艺鹏的知性本质之所在。也是艺鹏区别于其他品牌的个性所在。'
+        }
+      ],
+      cultureList: [
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351034036451.jpg',
+          text1: '互 信',
+          text2: '互相信任，企业与员工、消费者、合作伙伴、供应商相互之间需形成良好的信任基础，做到心口如一，言行一致，才能以行取信。内部信任，重在塑造企业文化环境，使员工与企业之间达成心理契约， 外部信任，重在建立真实坦诚的合作关系，使其与企业达成一致的思想意识。'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351088324141.jpg',
+          text1: '责 任',
+          text2: '责任担当，全体员工具有强烈的责任意识，卓越的责任能力，自觉的责任行为，建立完整有序、纵横交错的责任链，勇于承担责任，主动把责任转化为自觉行动，转化为推动企业发展的统一意识，转化为推动工作的强劲动力，做到对社会负责，对企业负责，对客户负责，对同事负责，对自己负责。树立责任意识，以感恩的心态回馈社会。'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351138654829.jpg',
+          text1: '创 新',
+          text2: '持续改善工艺、产品、管理等各方面，我们以先进的理念，灵活应变的品牌策略，勇于拼搏不断完善的心态，创造出高品质产品；结合公司自身状况，以一点一滴的改善和进步，积聚成公司跨越式的发展；我们将加大激励改善创新机制，鼓励员工勇于开拓超越自我，以顾客需求为导向，不断推出先进独特的，极赋时代感的产品及服务。'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351185978147.jpg',
+          text1: '共 赢',
+          text2: '携手共赢，携手式合作的基础，共赢式合作的目的；树立协作共赢，合作精神，与合作伙伴共同成长，相互尊重和信任，共享成果，是我们企业和客户共同追求的目标；宽容待人，与客户及伙伴风雨同舟，携手开拓陶瓷行业的新空间和新市场，共同实现互利和双赢。'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleClick(tab) {
+      const introduce = document.getElementById('introduce');
+      const band = document.getElementById('band');
+      const ideas = document.getElementById('ideas');
+      const culture = document.getElementById('culture');
+      if (tab.index == 0) {
+        introduce.style.display = "block"
+        band.style.display = "none"
+        ideas.style.display = "none"
+        culture.style.display = "none"
+      } else if (tab.index == 1) {
+        introduce.style.display = "none"
+        band.style.display = "block"
+        ideas.style.display = "none"
+        culture.style.display = "none"
+      } else if (tab.index == 2) {
+        introduce.style.display = "none"
+        band.style.display = "none"
+        ideas.style.display = "block"
+        culture.style.display = "none"
+      } else if (tab.index == 3) {
+        introduce.style.display = "none"
+        band.style.display = "none"
+        ideas.style.display = "none"
+        culture.style.display = "block"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#band {
+  display: none;
+}
+
+#ideas {
+  display: none;
+}
+
+#culture {
+  display: none;
+  margin: 60px 0;
+}
+
+* {
+  font: 16px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
+}
+
+/deep/ .el-tabs {
+  position: relative;
+  line-height: 55px;
+}
+
+/deep/ .el-tabs__nav {
+  float: right;
+  height: 100%;
+}
+
+/deep/ .el-tabs__header {
+  margin: 0;
+}
+
+/deep/ .el-tabs__content {
+  position: absolute;
+  top: 0;
+}
+
+/deep/ .el-tabs__item {
+  height: 55px;
+  line-height: 55px;
+  border-left: 1px solid #f1f1f1;
+  padding: 0 20px !important;
+}
+
+/deep/ .el-tabs__item.is-active {
+  color: #000;
+  border-bottom: 1px solid #333;
+}
+
+/deep/ .el-tabs__item:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
+/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
+  border-right: 1px solid #f1f1f1;
+}
+
+/deep/ .el-tabs__active-bar {
+  display: none;
+}
+
+/deep/ .el-tabs__nav-wrap::after {
+  display: none;
+}
+
+/deep/ .el-tab-pane {
+  color: #333;
+  height: 55px;
+  line-height: 55px;
+  float: left;
+  font-size: 18px;
+}
+
+.about_us {
+  min-width: 1300px;
+
+  .about_us_bg {
+    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448450589680815.jpg");
+    width: 100%;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  .contact_us_border {
+    width: 100%;
+    height: 55px;
+    border-bottom: 1px solid #ebebeb;
+    background-color: #fff;
+  }
+
+  .introduce {
+    padding: 40px 0;
+    font-size: 16px;
+
+    p {
+      padding-bottom: 25px;
+    }
+  }
+
+  .band {
+    p {
+      padding-bottom: 50px;
+
+      span {
+        display: block;
+      }
+    }
+  }
+
+  .cul_1 {
+    flex-direction: row-reverse;
+  }
+  .cul_3 {
+    flex-direction: row-reverse;
+  }
+  #culture_content {
+    display: flex;
+    padding: 10px 10px 40px 10px;
+
+    .culture_img {
+      padding: 10px;
+      margin:0 30px;
+    }
+
+
+
+    .culture_right {
+      padding: 10px;
+
+      span:first-child {
+        display: block;
+      }
+      span:last-child{
+        font-size: 14px;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        white-space: normal;
+        padding: 0px;
+        line-height: 32px;
+        color: rgb(94, 94, 94);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/attractAndJoin/index.vue b/src/views/attractAndJoin/index.vue
new file mode 100644
index 0000000..bc0bd1f
--- /dev/null
+++ b/src/views/attractAndJoin/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="Attract_join">
+    <!-- 顶部图片 -->
+    <div class="Attract_join_bg">
+    </div>
+    <!--标签栏 -->
+    <div class="Attract_join_border">
+      <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">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="支持策略" name="first">支持策略</el-tab-pane>
+            <el-tab-pane label="加盟条件" name="second">加盟条件</el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 支持策略 -->
+    <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_title">
+            支持策略 / SUPPORT STRATEGY
+          </div>
+        </div>
+        <!--加盟条件-->
+        <div class="support" id="join">
+          <div class="support_title">
+            加盟条件 / FRANCHISE CONDITIONS
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      activeName: 'first',
+    }
+  },
+  methods: {
+    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"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#join{
+  display: none;
+}
+/deep/ .el-tabs {
+  position: relative;
+  line-height: 55px;
+}
+
+/deep/ .el-tabs__nav {
+  float: right;
+  height: 100%;
+}
+
+/deep/ .el-tabs__header {
+  margin: 0;
+}
+
+/deep/ .el-tabs__content {
+  position: absolute;
+  top: 0;
+}
+
+/deep/ .el-tabs__item {
+  height: 55px;
+  line-height: 55px;
+  border-left: 1px solid #f1f1f1;
+  padding: 0 20px !important;
+
+}
+
+/deep/ .el-tabs__item.is-active {
+  color: #000;
+  border-bottom: 1px solid #333;
+}
+
+/deep/ .el-tabs__item:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
+/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
+  border-right: 1px solid #f1f1f1;
+}
+
+/deep/ .el-tabs__active-bar {
+  display: none;
+}
+
+/deep/ .el-tabs__nav-wrap::after {
+  display: none;
+}
+
+/deep/ .el-tab-pane {
+  color: #333;
+  height: 55px;
+  line-height: 55px;
+  float: left;
+  font-size: 18px;
+}
+
+.Attract_join {
+  min-width: 1300px;
+
+  .Attract_join_bg {
+    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448381427541777.jpg");
+    width: 100%;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  .Attract_join_border {
+    width: 100%;
+    height: 55px;
+    border-bottom: 1px solid #ebebeb;
+    background-color: #fff;
+  }
+
+  .support {
+    padding: 70px 0;
+
+    .support_title {
+      color: #333;
+      display: inline;
+      width: 100%;
+      float: left;
+      margin: 0 0 35px 0;
+      font-size: 26px;
+      text-align: center;
+      letter-spacing: -1px;
+    }
+  }
+}
+</style>
diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue
new file mode 100644
index 0000000..cf39db5
--- /dev/null
+++ b/src/views/contactUs/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="contact_us">
+    <!-- 顶部图片 -->
+    <div class="contact_us_bg">
+    </div>
+    <!--标签栏 -->
+    <div class="contact_us_border">
+      <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">
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="联系方式" name="first">联系我们</el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="contact_content">
+      <p class="title">
+        <strong>广东祥睿陶瓷有限公司</strong>
+      </p>
+      <p class="address">
+        地址：佛山市禅城区华夏陶瓷博览城陶博会展三环路5座B3
+      </p>
+      <p class="phone">电话：0757-83551526</p>
+      <div style="margin-top: 30px;margin-bottom: 50px">
+        <img src="http://www.yipengtaoci.com/upfiles/images/20200706/15940300499317991.jpg" alt=""/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .el-tabs {
+  position: relative;
+  line-height: 55px;
+}
+
+/deep/ .el-tabs__nav {
+  float: right;
+  height: 100%;
+}
+
+/deep/ .el-tabs__header {
+  margin: 0;
+}
+
+/deep/ .el-tabs__content {
+  position: absolute;
+  top: 0;
+}
+
+/deep/ .el-tabs__item {
+  height: 55px;
+  line-height: 55px;
+  border-left: 1px solid #f1f1f1;
+  padding: 0 20px !important;
+
+}
+
+/deep/ .el-tabs__item.is-active {
+  color: #000;
+  border-bottom: 1px solid #333;
+}
+
+/deep/ .el-tabs__item:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
+/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
+  border-right: 1px solid #f1f1f1;
+}
+
+/deep/ .el-tabs__active-bar {
+  display: none;
+}
+
+/deep/ .el-tabs__nav-wrap::after {
+  display: none;
+}
+
+/deep/ .el-tab-pane {
+  color: #333;
+  height: 55px;
+  line-height: 55px;
+  float: left;
+  font-size: 18px;
+}
+
+.contact_us {
+  min-width: 1300px;
+
+  .contact_us_bg {
+    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181214/15447790134910001.jpg");
+    width: 100%;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  .contact_us_border {
+    width: 100%;
+    height: 55px;
+    border-bottom: 1px solid #ebebeb;
+    background-color: #fff;
+  }
+
+  .contact_content {
+    padding: 40px 0;
+    text-align: center;
+
+    .title {
+      padding-bottom: 50px;
+
+      strong {
+        font-size: 24px;
+      }
+    }
+
+    .address {
+      line-height: 28.8px;
+      font-size: 16px;
+      color: rgb(68, 68, 68);
+      font-family: 微软雅黑, "Microsoft YaHei", Arial, sans-serif;
+      background-color: rgb(255, 255, 255);
+    }
+    .phone{
+      font-size: 16px;
+      line-height: 28.8px;
+    }
+  }
+}
+</style>
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 8c8b6be..9bc80ee 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -64,7 +64,7 @@ export default {
           title: '网站首页',
         },
         {
-          href: '',
+          href: '/about_us',
           title: '关于我们',
           children: [
             {
@@ -83,7 +83,7 @@ export default {
             }
           ]
         }, {
-          href: '',
+          href: '/products_center',
           title: '产品中心',
           children: [
             {
@@ -146,7 +146,7 @@ export default {
             }
           ]
         }, {
-          href: '',
+          href: '/attract_and_join',
           title: '招商加盟',
           children: [
             {
@@ -159,7 +159,7 @@ export default {
             },
           ]
         }, {
-          href: '',
+          href: '/contact_us',
           title: '联系我们'
         }
       ]
diff --git a/src/views/ImageDisplay/index.vue b/src/views/imageDisplay/index.vue
similarity index 80%
rename from src/views/ImageDisplay/index.vue
rename to src/views/imageDisplay/index.vue
index f00afd8..077151b 100644
--- a/src/views/ImageDisplay/index.vue
+++ b/src/views/imageDisplay/index.vue
@@ -26,7 +26,11 @@
               <div class="item">
                 <a>
                     <span class="pic">
-                      <img :src="item.imgUrl" alt="">
+                        <el-image
+                          class="img"
+                          :src="item.imgUrl"
+                          :preview-src-list="item.bigSrc">
+                    </el-image>
                     </span>
                   <span class="inf">{{ item.word }}</span>
                 </a>
@@ -48,7 +52,12 @@
               <div class="item">
                 <a>
                     <span class="pic">
-                      <img :src="item.src" alt="">
+<!--                      <img :src="item.src" alt="">-->
+                      <el-image
+                        class="img"
+                        :src="item.src"
+                        :preview-src-list="item.bigSrc">
+                    </el-image>
                     </span>
                   <span class="inf">{{ item.projectName }}</span>
                 </a>
@@ -70,51 +79,65 @@ export default {
       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: [
         {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
           projectName: '大学城新校区教学楼'
         },
         {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
           projectName: '嘉兴中山名都'
         },
         {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
           projectName: '蒲田公安局'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
           projectName: '财政局大厦'
         }
         , {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
           projectName: '西安市雅盛大厦'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
           projectName: '武汉市金晖大厦'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
           projectName: '杭州市风情小区'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
           projectName: '金湖花园'
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
+          bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435.jpg'],
           projectName: '碧桂园'
         },
       ],
@@ -211,7 +234,7 @@ export default {
 }
 
 .image_display {
-  min-width: 1260px;
+  min-width: 1300px;
 
   .imageDisplay_bg {
     background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448387657921217.jpg");
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 6a27c97..4e24fbd 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -21,54 +21,104 @@
       <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">
-          <ul>
-            <li v-for="(item,index) in imageAndWord"
-                :key="index">
-              <div class="item">
-                <a>
+          <!--  公司新闻-->
+          <div id="company_news">
+            <ul>
+              <li v-for="(item,index) in imageAndWord"
+                  :key="index" @click="handleClickNews(index)">
+                <div class="item">
+                  <a>
                     <span class="pic">
                       <img :src="item.imgUrl" alt="">
                     </span>
-                  <span class="inf">{{ item.word }}</span>
-                  <span class="dates">{{ item.date }}</span>
-                </a>
-              </div>
-            </li>
-          </ul>
-          <!--页码-->
-          <div class="pagination">
-            <table style="margin: 0 auto">
-              <tbody>
-              <tr style="width: auto">
-                <td class="prev">
-                  <a href="">上一页</a>
-                </td>
-                <td class="prev">
-                  <a href="">1</a>
-                </td>
-                <td class="prev">
-                  <a href="">2</a>
-                </td>
-                <td class="prev">
-                  <a href="">下一页</a>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-
+                    <span class="inf">{{ item.word }}</span>
+                    <span class="dates">{{ item.date }}</span>
+                  </a>
+                </div>
+              </li>
+            </ul>
+            <!--页码-->
+            <Pagination :currentPage="1" :total="20" :pageSize="10" />
+          </div>
+          <!--  行业动态-->
+          <div id="industry_dynamics">
+            <ul>
+              <li v-for="(item,index) in industryList"
+                  :key="index">
+                <div class="item">
+                  <a>
+                    <span class="pic">
+                      <img :src="item.imgUrl" alt="">
+                    </span>
+                    <span class="inf">{{ item.word }}</span>
+                    <span class="dates">{{ item.date }}</span>
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!--  瓷砖百科-->
+          <div id="ceramic">
+            <ul>
+              <li v-for="(item,index) in ceramicList"
+                  :key="index">
+                <div class="item">
+                  <a>
+                    <span class="pic">
+                      <img :src="item.imgUrl" alt="">
+                    </span>
+                    <span class="inf">{{ item.word }}</span>
+                    <span class="dates">{{ item.date }}</span>
+                  </a>
+                </div>
+              </li>
+            </ul>
           </div>
         </el-col>
       </el-row>
     </div>
 
+    <!--新闻详情 -->
+    <div class="news_detail" id="news_detail">
+      <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="detail">
+            <div class="detail_top">
+              <div class="tabs">
+                当前位置：
+                <el-breadcrumb separator-class="el-icon-arrow-right">
+                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                  <el-breadcrumb-item>{{tabs_title}}</el-breadcrumb-item>
+                </el-breadcrumb>
+              </div>
+              <div class="shares">
+                分享到：
+                <span class="hover-pointer" @click="shareToMicroblog()">
+                  <img src="@/assets/weibo.png" alt=""/>
+                </span>
+                <span class="qqIcon hover-pointer" @click="shareToQQRom()">
+                  <img src="@/assets/QQKJ.png" alt=""/>
+                </span>
+              </div>
+            </div>
+            <!--            <vue2-editor v-model="htmlStr"></vue2-editor>-->
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+import Pagination from "@/components/Pagination";
 export default {
   name: "index",
+  components: {Pagination},
   data() {
     return {
+      tabs_title:'公司新闻',
+      // htmlStr: '',
       activeName: 'first',
       imageAndWord: [
         {
@@ -131,22 +181,141 @@ export default {
           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"
+        }
       ]
     };
   },
   methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
+    handleClick(tab) {
+      const company_news = document.getElementById('company_news');
+      const industry_dynamics = document.getElementById('industry_dynamics');
+      const ceramic = document.getElementById('ceramic');
+      if (tab.index == 0) {
+        company_news.style.display = "block"
+        industry_dynamics.style.display = "none"
+        ceramic.style.display = "none"
+      } else if (tab.index == 1) {
+        company_news.style.display = "none"
+        industry_dynamics.style.display = "block"
+        ceramic.style.display = "none"
+      } else if (tab.index == 2) {
+        company_news.style.display = "none"
+        industry_dynamics.style.display = "none"
+        ceramic.style.display = "block"
+      }
+    },
+    /**
+     * 分享到微博
+     */
+    shareToMicroblog() {
+      //跳转地址
+      window.open(
+        "https://service.weibo.com/share/share.php?url=" +
+        encodeURIComponent(location.href)
+        // "&title=" +
+        // this.sysInfo
+      );
+    },
+    /**
+     * 分享到qq空间
+     */
+    shareToQQRom() {
+      //跳转地址
+      window.open(
+        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
+        encodeURIComponent(location.href)
+        // "&title=" +
+        // this.sysInfo +
+        // "&summary=" +
+        // this.sysInfo
+      );
+    },
+    /**
+     * 点击图片进入详情页
+     */
+    handleClickNews(index){
+
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 * {
   font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
 
+#industry_dynamics {
+  display: none;
+}
+
+#ceramic {
+  display: none;
+}
+
 /deep/ .el-tabs {
   position: relative;
   line-height: 55px;
@@ -217,8 +386,8 @@ export default {
 }
 
 .news {
-  min-width: 1260px;
-}
+  min-width: 1300px;
+
 
 .news_bg {
   background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
@@ -234,81 +403,104 @@ export default {
   border-bottom: 1px solid #ebebeb;
   background-color: #fff;
 }
+  .list2 {
+    padding: 20px 0;
 
-.list2 {
-  padding: 20px 0;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        width: 25%;
+
+        .item {
+          padding: 15px;
+          overflow: hidden;
+
+          a {
+            .pic {
+              display: inline-block;
+              border: 1px solid #e9e9e9;
+              background-color: #000;
+              overflow: hidden;
+
+              img {
+                width: 100%;
+                display: block;
+                transition: all 0.4s;
+              }
+            }
+
+            span.inf {
+              display: block;
+              font-size: 16px;
+              overflow: hidden;
+              white-space: nowrap;
+              -o-text-overflow: ellipsis;
+              text-overflow: ellipsis;
+            }
+
+            span.dates {
+              color: #666;
+              display: block;
+              font-size: 12px;
+              float: left;
+            }
+          }
+
+          a:hover .pic img {
+            transform: scale(1.2);
+            opacity: 0.8;
+            background-color: #000000;
+          }
+        }
+      }
+    }
+  }
+  .news_detail {
+    padding: 40px 0;
+    display: none;
+    .detail {
+      .detail_top {
+        width: 100%;
+        height: 20px;
+        margin: 0 0 40px 0;
+        padding: 0 0 15px 0;
+        border-bottom: 3px solid #ddd;
+        display: flex;
+        justify-content: space-between;
+
+        .tabs {
+          display: flex;
+        }
+
+        .shares {
+          display: flex;
+          //line-height: 35px;
+          img {
+            cursor: pointer;
+            width: 25px;
+          }
+        }
+      }
+
+    }
+  }
 }
 
-.list2 ul {
-  display: flex;
-  flex-wrap: wrap;
+
+
+#industry_dynamics {
+  .inf {
+    text-align: left;
+  }
+}
+#ceramic{
+  .inf {
+    text-align: left;
+  }
 }
 
-.list2 ul li {
-  width: 25%;
-}
-
-.list2 ul li .item {
-  padding: 15px;
-  overflow: hidden;
-}
-
-.list2 ul li .item a .pic {
-  display: inline-block;
-  border: 1px solid #e9e9e9;
-  background-color: #000;
-  overflow: hidden;
-}
-
-.list2 ul li .item a .pic img {
-  width: 100%;
-  display: block;
-  transition: all 0.4s;
-}
-
-.list2 ul li .item a:hover .pic img {
-  transform: scale(1.2);
-  opacity: 0.8;
-  background-color: #000000;
-}
-
-.list2 ul li .item a span.inf {
-  display: block;
-  font-size: 16px;
-  overflow: hidden;
-  white-space: nowrap;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-}
-
-.list2 ul li .item a span.dates {
-  color: #666;
-  display: block;
-  font-size: 12px;
-  float: left;
-}
-
-/*页码*/
-.pagination {
-  padding: 40px 0;
-}
-
-.pagination .prev a {
-  line-height: 34px;
-  padding: 8px 16px;
-  border: 1px solid #333;
-  background-color: #fff;
-}
-
-.pagination .prev a:hover {
-  color: #fff;
-  background-color: #333;
-}
-
-.pagination .prev:nth-child(2) a {
-  color: #fff;
-  background-color: #333;
-}
 
 </style>
 
diff --git a/src/views/productsCenter/index.vue b/src/views/productsCenter/index.vue
new file mode 100644
index 0000000..b76d54a
--- /dev/null
+++ b/src/views/productsCenter/index.vue
@@ -0,0 +1,369 @@
+<template>
+  <div class="products_center">
+    <!--标签栏 -->
+    <div class="center_border">
+      <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">
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="全部" name="first">产品中心</el-tab-pane>
+            <el-tab-pane label="瓷抛大理石" name="second">瓷抛大理石</el-tab-pane>
+            <el-tab-pane label="通体大理石" name="third">通体大理石</el-tab-pane>
+            <el-tab-pane label="中板通体大理石" name="four">中板通体大理石</el-tab-pane>
+            <el-tab-pane label="大板通体大理石" name="five">大板通体大理石</el-tab-pane>
+            <el-tab-pane label="银河系大板" name="six">银河系大板</el-tab-pane>
+            <el-tab-pane label="仿古砖600x600" name="seven">仿古砖600x600</el-tab-pane>
+            <el-tab-pane label="金刚大理石" name="eight">金刚大理石</el-tab-pane>
+            <el-tab-pane label="岩板" name="nine">岩板</el-tab-pane>
+            <el-tab-pane label="微水泥" name="ten">微水泥</el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 分类栏-->
+    <div class="product_types">
+      <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">
+            <strong>分类：</strong>
+            <ul>
+              <li v-for="item in classifyList">{{ item.title }}</li>
+            </ul>
+          </div>
+          <div class="spaceList">
+            <strong>空间：</strong>
+            <ul>
+              <li v-for="item in spaceList">{{ item.title }}</li>
+            </ul>
+          </div>
+          <div class="styleList spaceList">
+            <strong>风格：</strong>
+            <ul>
+              <li v-for="item in styleList">{{ item.title }}</li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!--图片栏-->
+    <div class="image_list">
+      <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">
+          <ul>
+            <li v-for="(item,index) in imageList"
+                :key="index">
+              <div class="item">
+                <a>
+                    <span class="pic">
+                      <img :src="item.imgUrl" alt="">
+                    </span>
+                  <span class="inf">{{ item.word }}</span>
+                  <span class="size">{{ item.size }}</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        <Pagination :currentPage="1" :total="320" :pageSize="10" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Pagination";
+export default {
+  name: "index",
+  components: {Pagination},
+  data() {
+    return {
+      activeName: 'first',
+      classifyList: [
+        {
+          title: '13MM瓷抛大理石'
+        },
+        {
+          title: '11MM瓷抛大理石'
+        }
+      ],
+      spaceList: [
+        {
+          title: '全部'
+        }, {
+          title: '客厅瓷砖'
+        }, {
+          title: '厨房瓷砖'
+        }, {
+          title: '卫浴瓷砖'
+        }, {
+          title: '书房瓷砖'
+        }, {
+          title: '卧室瓷砖'
+        }, {
+          title: '餐厅瓷砖'
+        }, {
+          title: '走廊瓷砖'
+        }, {
+          title: '大厅瓷砖'
+        }
+      ],
+      styleList: [
+        {
+          title: '全部'
+        },
+        {
+          title: '简约风格'
+        },
+        {
+          title: '新中式风格'
+        },
+        {
+          title: '欧式风格'
+        }, {
+          title: '古典风格'
+        }, {
+          title: '田园风格'
+        }, {
+          title: '工业风格'
+        }
+      ],
+      imageList: [
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
+          word: "WH715T039",
+          size: "750x1500MM大板时代"
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+* {
+  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
+}
+
+.products_center {
+  min-width: 1300px;
+
+  .center_border {
+    width: 100%;
+    height: 55px;
+    border-bottom: 1px solid #ebebeb;
+    background-color: #fff;
+  }
+
+  .product_types {
+    width: 100%;
+    border-bottom: 1px solid #e9e9e9;
+    background-color: #fff;
+
+    .spaceList {
+      padding: 6px 0;
+      border-bottom: 1px dotted #e9e9e9;
+      display: flex;
+      line-height: 36px;
+      height: 36px;
+      font-size: 14px;
+
+      strong {
+        font-weight: bold;
+      }
+
+      ul {
+        display: flex;
+
+        li {
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+
+  .image_list {
+    width: 100%;
+    padding: 20px 0;
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        width: 25%;
+
+        .item {
+          padding: 15px;
+          overflow: hidden;
+
+          a {
+            .pic {
+              display: inline-block;
+              border: 1px solid #e9e9e9;
+              background-color: #000;
+              overflow: hidden;
+
+              img {
+                width: 100%;
+                display: block;
+                transition: all 0.4s;
+              }
+            }
+
+            span.inf {
+              display: block;
+              font-size: 16px;
+              overflow: hidden;
+              white-space: nowrap;
+              -o-text-overflow: ellipsis;
+              text-overflow: ellipsis;
+              text-align: left;
+            }
+
+            span.size {
+              color: #666;
+              display: block;
+              font-size: 12px;
+              float: left;
+            }
+          }
+
+          a:hover .pic img {
+            transform: scale(1.2);
+            opacity: 0.8;
+            background-color: #000000;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+@media only screen and (max-width: 1660px) {
+  .image_list ul li {
+    width: 33.2% !important;
+  }
+}
+
+@media only screen and (max-width: 1480px) {
+  .image_list ul li {
+    width: 33.2% !important;
+  }
+}
+
+/deep/ .el-tabs {
+  position: relative;
+  line-height: 55px;
+}
+
+/deep/ .el-tabs__nav {
+  float: right;
+  height: 100%;
+}
+
+/deep/ .el-tabs__header {
+  margin: 0;
+}
+
+/deep/ .el-tabs__content {
+  position: absolute;
+  top: 0;
+}
+
+/deep/ .el-tabs__item {
+  height: 55px;
+  line-height: 55px;
+  border-left: 1px solid #f1f1f1;
+  padding: 0 20px !important;
+
+}
+
+/deep/ .el-tabs__item.is-active {
+  color: #000;
+  border-bottom: 1px solid #333;
+}
+
+/deep/ .el-tabs__item:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
+/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
+  border-right: 1px solid #f1f1f1;
+}
+
+/deep/ .el-tabs__active-bar {
+  display: none;
+}
+
+/deep/ .el-tabs__nav-wrap::after {
+  display: none;
+}
+
+/deep/ .el-tab-pane {
+  color: #333;
+  height: 55px;
+  line-height: 55px;
+  float: left;
+  font-size: 18px;
+}
+
+</style>