diff --git a/src/components/PicturesBox.vue b/src/components/PicturesBox.vue
new file mode 100644
index 0000000..2159d91
--- /dev/null
+++ b/src/components/PicturesBox.vue
@@ -0,0 +1,149 @@
+<template>
+  <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" @click="type!==22?handleClickNews(index):''">
+            <div class="item">
+              <a>
+                <span class="pic" v-if="type!==22">
+                  <img :src="item.imgUrl" alt="">
+                </span>
+                <el-image
+                  v-if="type===22"
+                  :src="item.imgUrl"
+                  :preview-src-list="item.bigSrc">
+                </el-image>
+                <span class="info" v-if="type===22">{{ item.word }}</span>
+                <span class="inf" v-if="type!==22">{{ item.word }}</span>
+                <span class="size" v-if="type!==22">{{ item.date }}</span>
+              </a>
+            </div>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PicturesBox",
+  props: {
+    imageList: Array,
+    /**
+     * 11 是跳转到新闻详情
+     * 22是封装图片放大的效果
+     * 33是跳转到产品详情
+     */
+    type: Number
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    /**
+     * 点击图片进入详情页
+     */
+    handleClickNews(index) {
+      if(this.type==33){
+        this.$router.push({
+          path: '/products_detail',    //跳转的路由
+          // query:{    //跳转路由的参数
+          //   type:type    //前面的type是参数的名称
+          //   //后面的type是点击产品时传过来的型号 这里也就是m320
+          // }
+        })
+      }else {
+        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">
+
+@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;
+  }
+}
+
+.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;
+            }
+          }
+          .info{
+            text-align: center;
+            display: block;
+            font-size: 16px;
+            overflow: hidden;
+            white-space: nowrap;
+            -o-text-overflow: ellipsis;
+            text-overflow: ellipsis;
+          }
+          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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/ProductsClassify.vue b/src/components/ProductsClassify.vue
index 78bdf43..9281126 100644
--- a/src/components/ProductsClassify.vue
+++ b/src/components/ProductsClassify.vue
@@ -134,6 +134,7 @@ export default {
           transition: all 0.6s;
 
           img {
+            display: block;
             width: 440px;
           }
         }
diff --git a/src/components/ProductsTabsItem.vue b/src/components/ProductsTabsItem.vue
new file mode 100644
index 0000000..9acc714
--- /dev/null
+++ b/src/components/ProductsTabsItem.vue
@@ -0,0 +1,151 @@
+<template>
+  <!--标签栏 -->
+  <el-row type="flex" class="center_border">
+    <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
+    <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
+      <el-tabs v-if="title===1" v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
+          关于我们
+        </el-tab-pane>
+      </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.label" :name="item.name">
+          {{ title === 0 ? '' : item.label  }}
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "TabsItem",
+  props: {
+    title: Number,
+    tabList: {
+      type: Array,
+      default: ()=>{
+        return  [
+          {
+            label: '全部',
+            name: 'first'
+          },
+          {
+            label: '瓷抛大理石',
+            name: 'second'
+          }, {
+            label: '通体大理石',
+            name: 'third'
+          }, {
+            label: '中板通体大理石',
+            name: 'four'
+          }, {
+            label: '大板通体大理石',
+            name: 'five'
+          }, {
+            label: '银河系大板',
+            name: 'six'
+          }, {
+            label: '仿古砖600x600',
+            name: 'seven'
+          }, {
+            label: '金刚大理石',
+            name: 'eight'
+          }, {
+            label: '岩板',
+            name: 'nine'
+          }, {
+            label: '微水泥',
+            name: 'ten'
+          }
+        ]
+      }
+    },
+    fatherMethod:{
+      type:Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  methods: {
+    handleClick(tab){
+      if(this.fatherMethod){
+        this.fatherMethod(tab)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+* {
+  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
+}
+
+.center_border {
+  width: 100%;
+  height: 55px;
+  border-bottom: 1px solid #ebebeb;
+  background-color: #fff;
+}
+
+/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>
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
deleted file mode 100644
index 9934760..0000000
--- a/src/i18n/i18n.js
+++ /dev/null
@@ -1,16 +0,0 @@
-//i18n.js
-import Vue from 'vue'
-import locale from 'element-ui/lib/locale'
-import VueI18n from 'vue-i18n'
-import messages from './langs'
-
-Vue.use(VueI18n)
-
-const i18n = new VueI18n({
-  locale: localStorage.lang || 'cn',
-  messages
-})
-
-locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换
-
-export default i18n
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
deleted file mode 100644
index e0cf0be..0000000
--- a/src/i18n/langs/cn.js
+++ /dev/null
@@ -1,55 +0,0 @@
-//cn.js
-
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
-
-
-//{{ $t('message.news_ceter') }}
-const cn = {
-  message: {
-    'student': '学生',
-    'staff': '教职工',
-    'alumni': '校友',
-    'examine': '考生',
-    'services_portal': '服务门户',
-    'switch': 'English',
-    'home': '学院首页',
-    'news_ceter': '新闻中心',
-    'more': '更多',
-    'research': '科学研究',
-    'academic': '学术交流',
-    'party': '党群工作',
-    'party_education': '党史教育',
-    'teaching_work': '教学工作',
-
-    'data_information': '数据中的信息',
-    'notice': '通知公告',
-    'scientific': '科学研究',
-    'undergraduate_education': '本科教育',
-    'postgraduate_education': '研究生教育',
-    'employees': '职工人数',
-    'number_students': '在校学生人数',
-    'graduate_tutor': '研究生导师',
-    'research_team': '科研团队',
-    'high_level_talents': '省部级以上高层次人才',
-    'major_projects': '国家级重大重点项目',
-    'contact_us': '联系我们',
-    'person': '人',
-    'pics': '个',
-    'adress': '犀浦校区地址:中国四川省成都市郫都区犀安路 999 号西南交通大学信息科学与技术学院',
-    'code': '邮政编码:611756',
-    'tel': '电话:+86 28 66366709(行政)',
-    'copyright': '版权所有◎2015西南交通大学信息科学与技术学院. All rights reserved.意见反馈',
-    'chinese_site': '西南交通大学(中文)',
-    'english_site': '西南交通大学(ENGLISH)',
-    'affairs_office': '西南交通大学国际合作与交流处',
-    'scholarship': '国家留学基金管理委员会',
-    'foreign': '中华人民共和国外交部',
-    'education': '中华人民共和国教育部门户网站',
-    'ieee': '电气和电子工程师协会(IEEE)',
-    'search': '搜索',
-    'placeholder': '请输入内容',
-  },
-  ...zhLocale
-}
-
-export default cn
diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
deleted file mode 100644
index e509b41..0000000
--- a/src/i18n/langs/en.js
+++ /dev/null
@@ -1,53 +0,0 @@
-//en.js
-
-import enLocale from 'element-ui/lib/locale/lang/en'
-
-const en = {
-  message: {
-    'student': 'Student',
-    'staff': 'Staff',
-    'alumni': 'Alumni',
-    'examine': 'Examine',
-    'services_portal': 'Services Portal',
-    'switch': '简体中文',
-    'home': 'Home',
-    'news_ceter': 'News Center',
-    'more': 'More',
-    'research': 'Research',
-    'academic': 'Academic',
-    'party': 'Party',
-    'party_education': 'Party Education',
-    'teaching_work': 'Teaching work',
-
-    'data_information': 'DATA INFORMATION',
-    'notice': 'Notice',
-    'scientific': 'Scientific',
-    'undergraduate_education': 'Undergraduate education',
-    'postgraduate_education': 'Postgraduate education',
-    'employees': 'Faculty Members',
-    'number_students': 'Internal Students',
-    'graduate_tutor': 'Tutors',
-    'research_team': 'Scientific Research Team',
-    'high_level_talents': 'Outstanding Talents',
-    'major_projects': 'Major projects',
-    'contact_us': '',
-    'person': '',
-    'pics': '',
-    'adress': '',
-    'code': '',
-    'tel': '',
-    'copyright': 'Copyright © 2014 School of Information Science and Technology, SWJTU. All rights reserved.   Feedback',
-    'chinese_site': 'Southwest Jiaotong University(中文)',
-    'english_site': 'Southwest Jiaotong University(ENGLISH)',
-    'affairs_office': 'SWJTU International Affairs Office',
-    'scholarship': 'China Scholarship Counsil',
-    'foreign': 'Ministry of Foreign Affairs',
-    'education': 'Ministry of Education',
-    'ieee': 'IEEE',
-    'search': 'search',
-    'placeholder': 'please input',
-
-  },
-}
-
-export default en
diff --git a/src/i18n/langs/index.js b/src/i18n/langs/index.js
deleted file mode 100644
index 6cd8b42..0000000
--- a/src/i18n/langs/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import en from './en'
-import cn from './cn'
-export default {
-  en,
-  cn
-}
diff --git a/src/main.js b/src/main.js
index a3c179b..ecbc73a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,12 +2,9 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import App from './App.vue'
 import router from './router'
-import i18n from './i18n/i18n'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import 'element-ui/lib/theme-chalk/display.css';
-import en from 'element-ui/lib/locale/lang/en'
-import cn from 'element-ui/lib/locale/lang/zh-CN'
 
 //要添加的代码
 router.beforeEach((to, from, next) => {
@@ -20,9 +17,6 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-i18n.mergeLocaleMessage('en', en)
-i18n.mergeLocaleMessage('zh', cn)
-
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 Vue.use(Vuex)
@@ -51,7 +45,6 @@ const store = new Vuex.Store({
 
 
 new Vue({
-  i18n,
   router,
   store: store,
   render: h => h(App)
diff --git a/src/router/index.js b/src/router/index.js
index 1784061..7707cd5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,6 +47,11 @@ const routes = [
     name: 'products_center',
     component: () => import('../views/productsCenter/index')
   },
+  {
+    path: '/products_detail',
+    name: 'products_detail',
+    component: () => import('../views/productsCenter/detail')
+  }
 ]
 
 const router = new VueRouter({
diff --git a/src/views/aboutUs/index.vue b/src/views/aboutUs/index.vue
index a5cca27..c1b9127 100644
--- a/src/views/aboutUs/index.vue
+++ b/src/views/aboutUs/index.vue
@@ -3,20 +3,8 @@
     <!-- 顶部图片 -->
     <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>
-
+    <ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
+    <!-- 关于我们的内容-->
     <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">
@@ -38,33 +26,14 @@
             <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 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>
@@ -74,11 +43,31 @@
 </template>
 
 <script>
+import ProductsTabsItem from "@/components/ProductsTabsItem";
+
 export default {
   name: "index",
+  components: {ProductsTabsItem},
   data() {
     return {
-      activeName: 'first',
+      aboutTabs: [
+        {
+          label: '企业简介',
+          name: 'first'
+        },
+        {
+          label: '品牌文化',
+          name: 'second'
+        },
+        {
+          label: '企业观点',
+          name: 'third'
+        },
+        {
+          label: '企业文化',
+          name: 'four'
+        }
+      ],
       pList: [
         {
           text: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。'
@@ -212,62 +201,6 @@ export default {
   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;
 
@@ -279,13 +212,6 @@ export default {
     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;
@@ -308,27 +234,29 @@ export default {
   .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;
+      margin: 0 30px;
     }
 
 
-
     .culture_right {
       padding: 10px;
 
       span:first-child {
         display: block;
       }
-      span:last-child{
+
+      span:last-child {
         font-size: 14px;
         margin-top: 0px;
         margin-bottom: 0px;
diff --git a/src/views/attractAndJoin/index.vue b/src/views/attractAndJoin/index.vue
index bc0bd1f..e5107e5 100644
--- a/src/views/attractAndJoin/index.vue
+++ b/src/views/attractAndJoin/index.vue
@@ -4,17 +4,7 @@
     <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>
+    <ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick"/>
     <!-- 支持策略 -->
     <el-row type="flex">
       <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
@@ -23,25 +13,55 @@
           <div class="support_title">
             支持策略 / SUPPORT STRATEGY
           </div>
+          <div style="font-size: 16px">
+            <p v-for="(item,index) in supportList" :key="index" style="padding-bottom: 25px">
+              {{item.text}}
+            </p>
+          </div>
         </div>
         <!--加盟条件-->
         <div class="support" id="join">
           <div class="support_title">
             加盟条件 / FRANCHISE CONDITIONS
           </div>
+          <div style="font-size: 16px">
+            <p v-for="(item,index) in joinList" :key="index" style="padding-bottom: 25px">
+              {{item.text}}
+            </p>
+          </div>
         </div>
       </el-col>
     </el-row>
-
   </div>
 </template>
 
 <script>
+import ProductsTabsItem from "@/components/ProductsTabsItem";
+
 export default {
   name: "index",
+  components:{ProductsTabsItem},
   data() {
     return {
-      activeName: 'first',
+      joinTab: [
+        {
+          label: '支持策略',
+          name: 'first'
+        }, {
+          label: '加盟条件',
+          name: 'second'
+        }
+      ],
+      supportList:[
+        {text:'艺鹏瓷砖对合作伙伴的支持策略：'},
+        {text:'1、形象店的装修补贴支持'},
+        {text:'有些经销商由于初期实力薄弱，进货以后也许没有多少钱可以装修店面，所以艺鹏瓷砖为您提供有力的形象店装修补贴支持，让您的漂亮店面从此可以昂首挺胸。：'}
+      ],
+      joinList:[
+        {text:'艺鹏瓷砖合作加盟条件：'},
+        {text:'1、有强烈的事业心、有良好的职业道德和商业道德，重合同、守信誉、品行端正、实事求是、言行一致；'},
+        {text:'2、具有较强的资金实力，有一定规模的营销场所，有稳定的、高素质的营销队伍；'},
+      ]
     }
   },
   methods: {
@@ -64,62 +84,6 @@ export default {
 #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;
@@ -132,13 +96,6 @@ export default {
     background-position: center center;
   }
 
-  .Attract_join_border {
-    width: 100%;
-    height: 55px;
-    border-bottom: 1px solid #ebebeb;
-    background-color: #fff;
-  }
-
   .support {
     padding: 70px 0;
 
diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue
index cf39db5..f90b529 100644
--- a/src/views/contactUs/index.vue
+++ b/src/views/contactUs/index.vue
@@ -4,16 +4,7 @@
     <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>
+    <ProductsTabsItem :tab-list="contactTabs"/>
 
     <div class="contact_content">
       <p class="title">
@@ -31,74 +22,25 @@
 </template>
 
 <script>
+import ProductsTabsItem from "@/components/ProductsTabsItem";
+
 export default {
   name: "index",
+  components: {ProductsTabsItem},
   data() {
     return {
-      activeName: 'first'
+      contactTabs: [
+        {
+          label: '联系我们',
+          name: '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;
 
@@ -110,12 +52,6 @@ export default {
     background-position: center center;
   }
 
-  .contact_us_border {
-    width: 100%;
-    height: 55px;
-    border-bottom: 1px solid #ebebeb;
-    background-color: #fff;
-  }
 
   .contact_content {
     padding: 40px 0;
@@ -136,7 +72,8 @@ export default {
       font-family: 微软雅黑, "Microsoft YaHei", Arial, sans-serif;
       background-color: rgb(255, 255, 255);
     }
-    .phone{
+
+    .phone {
       font-size: 16px;
       line-height: 28.8px;
     }
diff --git a/src/views/imageDisplay/index.vue b/src/views/imageDisplay/index.vue
index 077151b..e71d58f 100644
--- a/src/views/imageDisplay/index.vue
+++ b/src/views/imageDisplay/index.vue
@@ -4,78 +4,32 @@
     <div class="imageDisplay_bg">
     </div>
     <!--标签栏 -->
-    <div class="imageDisplay_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>
-    <!--资质荣誉-->
-    <div class="honor_list" id="honor_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 imageAndWord"
-                :key="index">
-              <div class="item">
-                <a>
-                    <span class="pic">
-                        <el-image
-                          class="img"
-                          :src="item.imgUrl"
-                          :preview-src-list="item.bigSrc">
-                    </el-image>
-                    </span>
-                  <span class="inf">{{ item.word }}</span>
-                </a>
-              </div>
-            </li>
-          </ul>
-        </el-col>
-      </el-row>
-    </div>
-
+    <ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick"/>
+    <!--资质荣誉 22是封装图片放大的效果-->
+    <PicturesBox  id="honor_list" :image-list="imageAndWord" :type="22"/>
     <!--工程案例-->
-    <div id="project_list" class="project_list honor_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 projectList"
-                :key="index">
-              <div class="item">
-                <a>
-                    <span class="pic">
-<!--                      <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>
-              </div>
-            </li>
-          </ul>
-        </el-col>
-      </el-row>
-    </div>
+    <PicturesBox id="project_list" :image-list="projectList" :type="22"/>
   </div>
 </template>
 
 <script>
+import ProductsTabsItem from "@/components/ProductsTabsItem";
+import PicturesBox from "@/components/PicturesBox";
 export default {
   name: "index",
+  components: {ProductsTabsItem,PicturesBox},
   data() {
     return {
-      activeName: 'first',
+      imageDisplayTabs: [
+        {
+          label: '资质荣誉',
+          name: 'first'
+        },
+        {
+          label: '工程案例',
+          name: 'second'
+        }
+      ],
       imageAndWord: [
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
@@ -101,44 +55,44 @@ export default {
       ],
       projectList: [
         {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
-          projectName: '大学城新校区教学楼'
+          word: '大学城新校区教学楼'
         },
         {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
-          projectName: '嘉兴中山名都'
+          word: '嘉兴中山名都'
         },
         {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
-          projectName: '蒲田公安局'
+          word: '蒲田公安局'
         }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
-          projectName: '财政局大厦'
+          word: '财政局大厦'
         }
         , {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
-          projectName: '西安市雅盛大厦'
+          word: '西安市雅盛大厦'
         }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
-          projectName: '武汉市金晖大厦'
+          word: '武汉市金晖大厦'
         }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
-          projectName: '杭州市风情小区'
+          word: '杭州市风情小区'
         }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
-          projectName: '金湖花园'
+          word: '金湖花园'
         }, {
-          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
+          imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
           bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435.jpg'],
-          projectName: '碧桂园'
+          word: '碧桂园'
         },
       ],
     }
@@ -164,75 +118,6 @@ export default {
   font: 14px/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;
-}
-
-@media only screen and (max-width: 1660px) {
-  .honor_list ul li {
-    width: 33.2% !important;
-  }
-}
-
-@media only screen and (max-width: 1480px) {
-  .honor_list ul li {
-    width: 33.2% !important;
-  }
-}
-
 .image_display {
   min-width: 1300px;
 
@@ -244,65 +129,6 @@ export default {
     background-position: center center;
   }
 
-  .imageDisplay_border {
-    width: 100%;
-    height: 55px;
-    border-bottom: 1px solid #ebebeb;
-    background-color: #fff;
-  }
-
-  .honor_list {
-    padding: 20px 0;
-
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-
-      li {
-        width: 25%;
-
-        .item {
-          padding: 15px;
-          overflow: hidden;
-
-          a:hover {
-            .pic {
-              img {
-                transform: scale(1.2);
-                opacity: 0.8;
-                background-color: #000000;
-              }
-            }
-          }
-
-          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;
-            }
-          }
-        }
-      }
-    }
-  }
-
   #project_list {
     display: none;
   }
diff --git a/src/views/news/detail.vue b/src/views/news/detail.vue
new file mode 100644
index 0000000..eda4f27
--- /dev/null
+++ b/src/views/news/detail.vue
@@ -0,0 +1,114 @@
+<template>
+  <!--新闻详情 -->
+  <div class="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  @click="shareToMicroblog()">
+                  <img src="@/assets/weibo.png" alt=""/>
+                </span>
+              <span  @click="shareToQQRom()">
+                  <img src="@/assets/QQKJ.png" alt=""/>
+                </span>
+            </div>
+          </div>
+          <div class="html_text" v-html="htmlStr"></div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "detail",
+  data() {
+    return {
+      tabs_title: '公司新闻',
+      htmlStr: '<h1>公司新闻公司新闻</h1>',
+    }
+  },
+  methods: {
+    /**
+     * 分享到微博
+     */
+    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
+      );
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/deep/.el-breadcrumb {
+  margin-top: 2px;
+}
+/deep/.el-breadcrumb__inner.is-link:hover {
+  color: #333!important;
+  text-decoration: underline;
+}
+.news_detail {
+  padding: 40px 0;
+
+  .detail {
+    .html_text{
+      padding: 45px;
+    }
+    .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;
+        align-items: center;
+      }
+
+      .shares {
+        display: flex;
+        //line-height: 35px;
+        img {
+          cursor: pointer;
+          width: 25px;
+        }
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 4e24fbd..3cf8ade 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -4,122 +4,47 @@
     <div class="news_bg">
     </div>
     <!--标签栏 -->
-    <div class="news_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-tabs>
-        </el-col>
-      </el-row>
-    </div>
+    <ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick"/>
     <!--图片栏-->
-    <div class="list2">
-      <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 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>
-            <!--页码-->
-            <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>
+    <PicturesBox :image-list="imageAndWord"  v-if="company_news"/>
+    <PicturesBox :image-list="industryList"  v-if="industry_dynamics"/>
+    <PicturesBox :image-list="ceramicList" v-if="ceramic"/>
+    <!--页码-->
+    <Pagination :currentPage="1" :total="20" :pageSize="10" v-if="showPagination"/>
 
-    <!--新闻详情 -->
-    <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>
+    <!--新闻详情-->
+    <detail v-if="showDetail"/>
   </div>
 </template>
 
 <script>
 import Pagination from "@/components/Pagination";
+import PicturesBox from "@/components/PicturesBox";
+import ProductsTabsItem from "@/components/ProductsTabsItem";
+import Detail from "@/views/news/detail";
+
 export default {
   name: "index",
-  components: {Pagination},
+  components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
-      tabs_title:'公司新闻',
-      // htmlStr: '',
-      activeName: 'first',
+      showPagination:true,
+      showDetail:false,
+      company_news:true,
+      industry_dynamics:false,
+      ceramic:false,
+      newsTab: [
+        {
+          label: '公司新闻',
+          name: 'first'
+        }, {
+          label: '行业动态',
+          name: 'second'
+        }, {
+          label: '瓷砖百科',
+          name: 'third'
+        },
+      ],
       imageAndWord: [
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
@@ -250,55 +175,38 @@ export default {
   },
   methods: {
     handleClick(tab) {
-      const company_news = document.getElementById('company_news');
-      const industry_dynamics = document.getElementById('industry_dynamics');
-      const ceramic = document.getElementById('ceramic');
+      // 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"
+        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) {
-        company_news.style.display = "none"
-        industry_dynamics.style.display = "block"
-        ceramic.style.display = "none"
+        this.company_news=false
+        this.industry_dynamics=true
+        this.ceramic=false
+        this.showDetail=false
+        this.showPagination=false
+        // 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"
+        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"
       }
     },
-    /**
-     * 分享到微博
-     */
-    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>
@@ -316,62 +224,6 @@ export default {
   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;
-}
 
 @media only screen and (max-width: 1660px) {
   .list2 ul li {
@@ -389,20 +241,14 @@ export default {
   min-width: 1300px;
 
 
-.news_bg {
-  background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
-  width: 100%;
-  height: 360px;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
+  .news_bg {
+    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
+    width: 100%;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
 
-.news_border {
-  width: 100%;
-  height: 55px;
-  border-bottom: 1px solid #ebebeb;
-  background-color: #fff;
-}
   .list2 {
     padding: 20px 0;
 
@@ -457,45 +303,16 @@ export default {
       }
     }
   }
-  .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;
-          }
-        }
-      }
-
-    }
-  }
 }
 
-
-
 #industry_dynamics {
   .inf {
     text-align: left;
   }
 }
-#ceramic{
+
+#ceramic {
   .inf {
     text-align: left;
   }
diff --git a/src/views/productsCenter/detail.vue b/src/views/productsCenter/detail.vue
new file mode 100644
index 0000000..4126514
--- /dev/null
+++ b/src/views/productsCenter/detail.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <!-- 产品标签栏-->
+    <ProductsTabsItem :title="0"/>
+    <div class="img_text_bgc">
+      <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="img_text_content">
+            <div class="img_bgc">
+              <img :src="mainSrc" alt=""/>
+            </div>
+            <div class="img_right">
+              <div class="title">
+                产品名称：WH715T038
+              </div>
+              <div class="space_style">
+                <p>产品分类：750x1500MM大板时代</p>
+                <p>适用空间：客厅瓷砖,书房瓷砖,卧室瓷砖,餐厅瓷砖,大厅瓷砖</p>
+                <p>所属风格：简约风格,新中式风格,工业风格</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=""/>
+                  </li>
+                </ul>
+              </div>
+              <div class="shares">
+                分享到：
+                <span @click="shareToMicroblog()">
+                    <img src="@/assets/weibo.png" alt=""/>
+                  </span>
+                <span  @click="shareToQQRom()">
+                    <img src="@/assets/QQKJ.png" alt=""/>
+                  </span>
+              </div>
+              <div>
+                <el-button size="small">上一款产品</el-button>
+                <el-button size="small">下一款产品</el-button>
+              </div>
+            </div>
+          </div>
+
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductsTabsItem from "@/components/ProductsTabsItem";
+
+export default {
+  name: "detail",
+  components: {ProductsTabsItem},
+  data() {
+    return {
+      mainSrc: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079.jpg',
+      imgList: [
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079s.jpg'
+        },
+        {
+          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'
+        },
+      ]
+    }
+  },
+  methods: {
+    //点击小图切换主览图
+    changeMainImg(index) {
+      this.mainSrc = this.imgList[index].src
+    },
+    /**
+     * 分享到微博
+     */
+    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
+      );
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+* {
+  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
+}
+
+/deep/ .el-button:focus, .el-button:hover {
+  color: #333;
+  border-color: #ddd;
+  background-color: #fff;
+}
+
+/deep/ .el-button:hover {
+  span {
+    text-decoration: underline;
+  }
+}
+
+.center_border {
+  width: 100%;
+  height: 55px;
+  border-bottom: 1px solid #ebebeb;
+  background-color: #fff;
+}
+
+.img_text_bgc {
+  padding: 30px 0;
+  border-bottom: 1px solid #e9e9e9;
+  background-color: #f3f3f3;
+
+  .img_text_content {
+    width: 1360px;
+    margin: 0 auto;
+    display: flex;
+
+    .img_bgc {
+      width: 500px;
+      height: 500px;
+      padding: 20px;
+      border: 1px solid #eee;
+      background-color: #fff;
+      margin-right: 30px;
+
+      img {
+        margin-top: 25%;
+        width: 100%;
+      }
+    }
+
+    .img_right {
+      float: right;
+      flex: 1;
+
+      .title {
+        width: 100%;
+        padding: 25px 0 10px 0;
+        font-size: 24px;
+        border-bottom: 1px solid #555;
+      }
+
+      .space_style {
+        padding: 20px 0;
+
+        p {
+          color: #000;
+          margin: 5px 0 5px 0;
+          font-size: 16px !important;
+        }
+      }
+
+      .img_part {
+        padding: 10px 0 5px 0;
+        border-top: 1px dotted #ddd;
+        border-bottom: 1px dotted #ddd;
+
+        ul {
+          width: 100% !important;
+          height: auto !important;
+
+          li {
+            display: inline-block;
+            width: 60px;
+            height: 60px;
+            margin: 5px;
+            padding: 5px;
+            border: 1px solid #e5e5e5;
+            background-color: #fff;
+            cursor: pointer;
+
+            img {
+              width: 60px;
+              height: 30px;
+              margin-top: 25%;
+            }
+          }
+        }
+      }
+
+      .shares {
+        display: flex;
+        line-height: 35px;
+        span{
+          img{
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+</style>
diff --git a/src/views/productsCenter/index.vue b/src/views/productsCenter/index.vue
index b76d54a..14c4142 100644
--- a/src/views/productsCenter/index.vue
+++ b/src/views/productsCenter/index.vue
@@ -1,25 +1,7 @@
 <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>
+    <ProductsTabsItem />
     <!-- 分类栏-->
     <div class="product_types">
       <el-row type="flex">
@@ -47,39 +29,21 @@
       </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>
+    <PicturesBox :image-list="imgList" :type="33"/>
+    <Pagination :currentPage="1" :total="320" :pageSize="10"/>
   </div>
 </template>
 
 <script>
+import ProductsTabsItem from "@/components/ProductsTabsItem";
 import Pagination from "@/components/Pagination";
+import PicturesBox from "@/components/PicturesBox";
+
 export default {
   name: "index",
-  components: {Pagination},
+  components: {PicturesBox, Pagination, ProductsTabsItem},
   data() {
     return {
-      activeName: 'first',
       classifyList: [
         {
           title: '13MM瓷抛大理石'
@@ -129,66 +93,66 @@ export default {
           title: '工业风格'
         }
       ],
-      imageList: [
+      imgList: [
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         },
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
           word: "WH715T039",
-          size: "750x1500MM大板时代"
+          date: "750x1500MM大板时代"
         }
       ]
     }
@@ -197,20 +161,9 @@ export default {
 </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;
@@ -233,137 +186,15 @@ export default {
 
         li {
           margin-right: 15px;
+          cursor: pointer;
+        }
+
+        li:hover {
+          text-decoration: underline;
         }
       }
     }
   }
-
-  .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>