From bfdbb77a5633bfab9f6f59b4238ec4e4b0c187d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Wed, 10 May 2023 21:05:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E6=96=B0=E9=97=BB?=
 =?UTF-8?q?=E5=92=8C=E5=BD=A2=E8=B1=A1=E5=B1=95=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js              |   5 +
 src/views/ImageDisplay/index.vue | 288 +++++++++++++++++++++++++++
 src/views/header/index.vue       |   2 +-
 src/views/news/index.vue         | 330 ++++++++++++++++---------------
 4 files changed, 460 insertions(+), 165 deletions(-)
 create mode 100644 src/views/ImageDisplay/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 1120766..9f2b54a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,11 @@ const routes = [
     name: 'news',
     component: () => import('../views/news/index')
   },
+  {
+    path: '/image_display',
+    name: 'image_display',
+    component: () => import('../views/ImageDisplay/index')
+  },
 ]
 
 const router = new VueRouter({
diff --git a/src/views/ImageDisplay/index.vue b/src/views/ImageDisplay/index.vue
new file mode 100644
index 0000000..f00afd8
--- /dev/null
+++ b/src/views/ImageDisplay/index.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="image_display">
+    <!-- 顶部图片 -->
+    <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">
+                      <img :src="item.imgUrl" alt="">
+                    </span>
+                  <span class="inf">{{ item.word }}</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!--工程案例-->
+    <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="">
+                    </span>
+                  <span class="inf">{{ item.projectName }}</span>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      activeName: 'first',
+      imageAndWord: [
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
+          word: "国家权威检测合格质量信得过产品"
+        }, {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987sss.jpg",
+          word: "全国产品质量消费者满意品牌"
+        }, {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898sss.jpg",
+          word: "中国工程建设推荐产品"
+        }, {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413sss.jpg",
+          word: "中国陶瓷行业十大品牌"
+        }, {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082sss.jpg",
+          word: "中国政府采购重点推荐产品"
+        }
+      ],
+      projectList: [
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
+          projectName: '大学城新校区教学楼'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
+          projectName: '嘉兴中山名都'
+        },
+        {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
+          projectName: '蒲田公安局'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
+          projectName: '财政局大厦'
+        }
+        , {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
+          projectName: '西安市雅盛大厦'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
+          projectName: '武汉市金晖大厦'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
+          projectName: '杭州市风情小区'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
+          projectName: '金湖花园'
+        }, {
+          src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
+          projectName: '碧桂园'
+        },
+      ],
+    }
+  },
+  methods: {
+    handleClick(tab) {
+      const honor_list = document.getElementById('honor_list');
+      const project_list = document.getElementById('project_list');
+      if (tab.index == 0) {
+        honor_list.style.display = "block"
+        project_list.style.display = "none"
+      } else if (tab.index == 1) {
+        project_list.style.display = "block"
+        honor_list.style.display = "none"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+* {
+  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: 1260px;
+
+  .imageDisplay_bg {
+    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448387657921217.jpg");
+    width: 100%;
+    height: 360px;
+    background-repeat: no-repeat;
+    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;
+  }
+}
+
+</style>
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index c80006c..8c8b6be 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -133,7 +133,7 @@ export default {
             }
           ]
         }, {
-          href: '',
+          href: '/image_display',
           title: '形象展示',
           children: [
             {
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index d24855d..6a27c97 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -1,70 +1,75 @@
 <template>
   <div class="news">
-    <!-- 顶部图片    -->
-    <div class="ui-h">
-      <div class="said">
-        <p class="tit2"></p>
-        <p>新闻资讯</p>
-      </div>
+    <!-- 顶部图片 -->
+    <div class="news_bg">
     </div>
-    <!--标签栏    -->
-    <div class="pt-top">
+    <!--标签栏 -->
+    <div class="news_border">
       <el-row type="flex">
-        <el-col :span="1"></el-col>
-        <el-col :span="22">
-          <div class="list">
-            <ul>
-              <li v-for="(item,index) in tagList" :key="index"
-              >
-                <a class="oncname">{{ item.tag }}</a>
-              </li>
-            </ul>
-          </div>
-          <div class="classname" v-model="tagList">新闻资讯</div>
+        <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-col :span="1"></el-col>
       </el-row>
     </div>
     <!--图片栏-->
-    <div class="pt-list">
-      <div class="list2">
-        <ul>
-          <el-row type="flex" justify="space-around">
-            <el-col :span="1"></el-col>
-            <el-col :span="22">
-              <li v-for="(item,index) in imageAndWord"
-                  :key="index">
-                <div class="item">
-                  <a>
-                    <div class="pic">
+    <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">
+          <ul>
+            <li v-for="(item,index) in imageAndWord"
+                :key="index">
+              <div class="item">
+                <a>
+                    <span class="pic">
                       <img :src="item.imgUrl" alt="">
-                    </div>
-                    <span class="inf">{{ item.word }}</span>
-                    <span class="dates">{{ item.date }}</span>
-                  </a>
-                </div>
-              </li>
-            </el-col>
-            <el-col :span="1"></el-col>
-          </el-row>
-        </ul>
-      </div>
+                    </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>
+
+          </div>
+        </el-col>
+      </el-row>
     </div>
-    <!--页码-->
-<!--    <el-pagination-->
-<!--      background-->
-<!--      layout="prev, pager, next"-->
-<!--      :total="1000">-->
-<!--    </el-pagination>-->
+
   </div>
 </template>
 
 <script>
-
 export default {
   name: "index",
   data() {
     return {
+      activeName: 'first',
       imageAndWord: [
         {
           imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
@@ -126,106 +131,72 @@ export default {
           word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
           date: "2022.7.7"
         }
-      ],
-      tagList: [
-        {
-          tag: '全部'
-        },
-        {
-          tag: '公司新闻'
-        }, {
-          tag: '行业动态'
-        }, {
-          tag: '瓷砖百科'
-        }
       ]
     };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
   }
-
 }
 </script>
 
 <style scoped>
-.news{
-  height: 1200px;
-}
-.ui-h {
-  background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
-  width: 100%;
-  height: 360px;
-  float: left;
-  background-repeat: no-repeat;
-  background-position: center center;
+* {
+  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
 }
 
-.ui-h .said {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  padding: 10px 60px;
-  border: 1px solid #fff;
-  background-color: rgba(254, 254, 254, 0.9);
-  transform: translate(-50%, -50%);
-}
-
-.ui-h .said p.tit2 {
-  font-size: 24px;
-}
-
-.ui-h .said p {
-  color: #000;
-  font-size: 16px;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-.pt-top {
-  width: 100%;
-  height: 55px;
-  float: left;
-  border-bottom: 1px solid #ebebeb;
-  background-color: #fff;
-}
-
-
-.pt-top .list {
-  float: right;
-}
-
-.pt-top .list ul li {
+/deep/ .el-tabs {
   position: relative;
-  top: 1px;
-  height: 54px;
+  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;
 }
 
-.pt-top .list ul li {
-  display: inline;
-  float: left;
-  padding: 0 20px;
-  border-left: 1px solid #f1f1f1;
+/deep/ .el-tabs__item:hover {
+  color: #000;
+  text-decoration: underline;
 }
 
-.pt-top .list ul li:last-child {
+/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
   border-right: 1px solid #f1f1f1;
 }
 
-.pt-top .list ul li a.oncname {
-  color: #333;
-  display: inline-block;
-  width: 100%;
-  height: 55px;
-  line-height: 55px;
-  float: left;
-  text-align: center;
-  font-size: 14px;
-}
-.pt-top .list ul li a .oncname:hover{
-  text-decoration: 1px solid #aaaaaa;
+/deep/ .el-tabs__active-bar {
+  display: none;
 }
 
-.pt-top .classname {
+/deep/ .el-tabs__nav-wrap::after {
+  display: none;
+}
+
+/deep/ .el-tab-pane {
   color: #333;
   height: 55px;
   line-height: 55px;
@@ -233,67 +204,75 @@ export default {
   font-size: 18px;
 }
 
-.pt-list {
-  /*width: 1140px;*/
-  float: left;
-  margin: 0 auto;
+@media only screen and (max-width: 1660px) {
+  .list2 ul li {
+    width: 33.2% !important;
+  }
 }
 
-.pt-list .list2 {
-  /*width: 1265px;*/
+@media only screen and (max-width: 1480px) {
+  .list2 ul li {
+    width: 33.2% !important;
+  }
+}
+
+.news {
+  min-width: 1260px;
+}
+
+.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;
 }
 
-.pt-list .list2 ul {
-  width: 100%;
-  /*display: flex;*/
-  float: left;
-  overflow: hidden;
-  list-style: none;
+.list2 ul {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.pt-list .list2 ul li {
-  width: 347px;
-  float: left;
-  margin-right: 35px;
+.list2 ul li {
+  width: 25%;
 }
 
-.pt-list .list2 ul li:last-child {
-  margin-right: 0;
-}
-
-.pt-list .list2 ul li .item {
-  display: block;
+.list2 ul li .item {
   padding: 15px;
   overflow: hidden;
 }
 
-.pt-list .list2 ul li .item a {
+.list2 ul li .item a .pic {
   display: inline-block;
-  width: 100%;
-}
-
-.pt-list .list2 ul li .item a .pic {
-  display: block;
-  margin: 0 0 6px;
-  /*border: 1px solid #e9e9e9;*/
-  /*background-color: #000;*/
+  border: 1px solid #e9e9e9;
+  background-color: #000;
   overflow: hidden;
 }
 
-.pt-list .list2 ul li .item a .pic img {
+.list2 ul li .item a .pic img {
   width: 100%;
   display: block;
   transition: all 0.4s;
 }
 
-.pt-list .list2 ul li .item a:hover .pic img {
+.list2 ul li .item a:hover .pic img {
   transform: scale(1.2);
   opacity: 0.8;
   background-color: #000000;
 }
 
-.pt-list .list2 ul li .item a span.inf {
+.list2 ul li .item a span.inf {
   display: block;
   font-size: 16px;
   overflow: hidden;
@@ -302,11 +281,34 @@ export default {
   text-overflow: ellipsis;
 }
 
-.pt-list .list2 ul li .item a span.dates {
+.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>