From 7b7ddf729b2592f510d00d2a863d0d5dbef6599d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Mon, 8 May 2023 23:24:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |   2 +-
 src/components/AboutUs.vue          |  94 +++++---
 src/components/Carousel.vue         |  40 ++--
 src/components/FastFindProducts.vue |   3 +
 src/components/NewsCenter.vue       | 355 +++++++++++++++-------------
 src/components/ProductsClassify.vue | 252 ++++++++++++--------
 src/components/ProductsShow.vue     |   6 +-
 src/components/ProjectCase.vue      | 108 +++++----
 src/views/header/index.vue          |   3 +
 src/views/news/index.vue            | 305 +++++++++++++++++++++++-
 10 files changed, 789 insertions(+), 379 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ee29b0d..60a77d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,7 +42,7 @@ export default {
 *{
   padding: 0;
   margin: 0;
-  font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
+  //font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
 }
 a{
   width: 100%;
diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index 361ddf3..dec91d8 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="aboutUs">
-    <el-row type="flex">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16">
+    <el-row style="">
+      <el-row>
         <div class="about_title">
           <h2>关于我们</h2>
           <h3>—— ABOUT US ——</h3>
@@ -11,24 +9,25 @@
         <div class="about_text">
           {{ aboutContent }}
         </div>
-        <el-row :gutter="20" style="padding: 0 4%;margin-bottom: 50px">
-          <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
-            <p>
-              <b class="num_bold">{{ numItem.num }}</b>
-              <span>{{ numItem.units }}</span>
-            </p>
-            <p>{{ numItem.title }}</p>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10" style="padding: 0 5% ">
-          <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
-                  :class="'culture_'+imgTextIndex">
-            <div class="imgAndText">
-              <a :href="imgTextItem.href">
-                <span class="pic">
-                  <img :src="imgTextItem.src" alt=""/>
-                </span>
-                <span class="img_box">
+      </el-row>
+      <el-row style="margin: 0 60px">
+        <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
+          <p>
+            <b class="num_bold">{{ numItem.num }}</b>
+            <span>{{ numItem.units }}</span>
+          </p>
+          <p>{{ numItem.title }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10" style="padding: 0 5% ">
+        <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
+                :class="'culture_'+imgTextIndex">
+          <div class="imgAndText">
+            <a :href="imgTextItem.href">
+              <span class="pic">
+                <img :src="imgTextItem.src" alt=""/>
+              </span>
+              <span class="img_box">
                   <span class="img_innerBox">
                     <span class="its">
                     <span class="about_en">
@@ -40,11 +39,10 @@
                     </span>
                   </span>
                 </span>
-              </a>
-            </div>
-          </el-col>
-        </el-row>
-      </el-col>
+            </a>
+          </div>
+        </el-col>
+      </el-row>
     </el-row>
   </div>
 </template>
@@ -104,9 +102,22 @@ export default {
 </script>
 
 <style scoped lang="scss">
+*{
+  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
+}
+@media screen and (max-width: 1660px) {
+  .aboutUs {
+    width: 1200px !important;
+  }
+  .img_innerBox {
+    padding: 20px!important;
+  }
+  }
+
 .aboutUs {
   min-width: 1300px;
-  margin-bottom: 50px;
+  width: 1360px;
+  margin: 0 auto 50px auto;
 
   .about_title {
     display: inline;
@@ -142,26 +153,30 @@ export default {
     line-height: 28.8px;
   }
 
-  .num_bold {
-    color: #444;
-    line-height: 46px;
-    margin: 0 4px 0 0;
-    font-size: 40px;
-    font-family: arial;
-    font-weight: normal;
-  }
-  .num_title:last-child {
-    border: none;
-  }
   .num_title {
     font-size: 14px;
     color: #666666;
     border-right: 1px solid #e5e5e5;
     text-align: center;
+    margin-bottom: 50px;
+
+    .num_bold {
+      color: #444;
+      line-height: 46px;
+      margin: 0 4px 0 0;
+      font-size: 40px;
+      font-family: arial;
+      font-weight: normal;
+    }
 
     p:last-child {
       line-height: 25.2px;
     }
+
+  }
+
+  .num_title:last-child {
+    border: none !important;
   }
 
   .culture_1 {
@@ -195,6 +210,7 @@ export default {
         overflow: hidden;
 
         img {
+          display: block;
           width: 100%;
           transition: all 0.6s;
         }
diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index ff10d55..4d5baa9 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,13 +1,11 @@
 <template>
-  <div class="slideshow">
-    <el-carousel trigger="click" height="36.2vw">
-      <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
-        <div>
-          <img :src="item.imgurl" alt="">
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-  </div>
+      <div class="slideshow">
+        <el-carousel trigger="click" height="36.2vw" style="min-width: 1300px;">
+          <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
+              <img :src="item.imgurl" alt="">
+          </el-carousel-item>
+        </el-carousel>
+      </div>
 </template>
 
 <script>
@@ -26,18 +24,28 @@ export default {
         }
       ]
     }
-  }
+  },
 }
 </script>
-
-<style scoped>
-.slideshow {
-  width: 100%;
-  min-width: 1300px;
+<style scoped lang="scss">
+@media screen and (max-width: 1320px) {
+  /deep/.el-carousel__container{
+    height: 44vh!important;
+  }
+}
+@media screen and (max-width: 768px) {
+  /deep/.el-carousel__container{
+    height: 58vh!important;
+  }
 }
 
+.slideshow {
+  width:100%;
+}
+/*.carousel_img {*/
+/*  width: 100%;*/
+/*}*/
 img {
   width: 100%;
-
 }
 </style>
diff --git a/src/components/FastFindProducts.vue b/src/components/FastFindProducts.vue
index 727ff4e..6d3c906 100644
--- a/src/components/FastFindProducts.vue
+++ b/src/components/FastFindProducts.vue
@@ -192,6 +192,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;
+}
 @media screen and (max-width: 1660px) {
   .fastFind {
     width: 1230px !important;
diff --git a/src/components/NewsCenter.vue b/src/components/NewsCenter.vue
index 58cf7f0..7c6f03c 100644
--- a/src/components/NewsCenter.vue
+++ b/src/components/NewsCenter.vue
@@ -2,54 +2,54 @@
   <div class="newsCenter">
     <div class="news_bg">
     </div>
-    <el-row type="flex">
-      <el-col :span="4"></el-col>
-      <el-col :span="16">
-        <div>
-          <div class="news_left">
-            <div class="items">
-              <h2>新闻资讯</h2>
-              <div class="en_title">
-                <span>NEWS</span>
-                CENTER
-              </div>
-              <div class="line"></div>
-              <div class="summary">{{ news_summary }}</div>
-              <div class="line2"></div>
-            </div>
+    <!--    <el-row type="flex" >-->
+    <!--      <el-col :span="4"></el-col>-->
+    <!--      <el-col :span="16">-->
+    <div class="newsWidth">
+      <div class="news_left">
+        <div class="items">
+          <h2>新闻资讯</h2>
+          <div class="en_title">
+            <span>NEWS</span>
+            CENTER
           </div>
-          <div class="news_right">
-            <div class="classify">
-              <ul>
-                <li v-for="(item,index) in classifyList" :key="index">
-                  <a :href="item.href">{{ item.title }}</a>
-                </li>
-              </ul>
-            </div>
-            <div class="news_content">
-              <div class="news_items">
-                <ul>
-                  <li v-for="(item,index) in itemList" :key="index">
-                    <div class="pics">
-                      <a :href="item.href">
-                        <img :src="item.src" alt=""/>
-                      </a>
-                    </div>
-                    <div class="info">
-                      <div class="title">
-                        <a :href="item.href">{{ item.title }}</a>
-                      </div>
-                      <div class="smy">{{ item.smy }}</div>
-                      <div class="dates">发布时间：{{ item.dates }}</div>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
+          <div class="line"></div>
+          <div class="summary">{{ news_summary }}</div>
+          <div class="line2"></div>
+        </div>
+      </div>
+      <div class="news_right">
+        <div class="classify">
+          <ul>
+            <li v-for="(item,index) in classifyList" :key="index">
+              <a :href="item.href">{{ item.title }}</a>
+            </li>
+          </ul>
+        </div>
+        <div class="news_content">
+          <div class="news_items">
+            <ul>
+              <li v-for="(item,index) in itemList" :key="index">
+                <div class="pics">
+                  <a :href="item.href">
+                    <img :src="item.src" alt=""/>
+                  </a>
+                </div>
+                <div class="info">
+                  <div class="title">
+                    <a :href="item.href">{{ item.title }}</a>
+                  </div>
+                  <div class="smy">{{ item.smy }}</div>
+                  <div class="dates">发布时间：{{ item.dates }}</div>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
+    <!--      </el-col>-->
+    <!--    </el-row>-->
   </div>
 </template>
 
@@ -99,143 +99,168 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1660px) {
+  .newsWidth {
+    width: 1230px !important;
+  }
+}
+
+@media screen and (max-width: 1480px) {
+  .newsWidth {
+    width: 1100px !important;
+  }
+}
+
 .newsCenter {
   min-width: 1300px;
+
   .news_bg {
-    //min-width: 1300px;
     background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
     background-size: cover;
     height: 380px;
   }
 
-  .news_left {
-    width: 30%;
-    float: left;
-    padding: 90px 0;
-    background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
+  .newsWidth {
+    width: 1360px;
+    margin: 0 auto;
 
-    .items {
-      display: block;
-      padding: 35px;
+    .news_left {
+      width: 30%;
+      float: left;
+      padding: 90px 0;
+      background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
 
-      h2 {
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 32px;
-      }
-
-      .en_title {
-        line-height: 25px;
-        padding: 0 0 20px 0;
-        font-size: 28px;
-        font-weight: bold;
-
-        span {
-          color: #a1182c;
-        }
-      }
-
-      .line {
-        width: 30px;
-        height: 3px;
-        margin: 0 0 0 3px;
-        font-size: 0;
-        background-color: #a1182c;
-      }
-
-      .summary {
-        color: #666;
-        padding: 60px 0;
-        letter-spacing: 1px;
-        font-size: 14px;
-        font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
-      }
-
-      .line2 {
-        width: 2px;
-        height: 120px;
-        float: left;
-        font-size: 0px;
-        background-color: #a1182c;
-      }
-    }
-  }
-
-  .news_right {
-    .classify {
-      width: 70%;
-      float: right;
-      padding: 40px 0 0 0;
-
-      ul {
-        float: right;
-
-        li {
-          float: right;
-          margin: 0 0 0 15px;
-
-          a {
-            padding: 8px 14px;
-            border: 1px solid #e5e5e5;
-            background-color: #f4f4f4;
-            color: #333;
-          }
-
-          a:hover {
-            color: #fff;
-            text-decoration: none;
-            background-color: #a21a2c;
-          }
-        }
-      }
-    }
-
-    .news_content {
-      width: 70%;
-      float: right;
-
-      .news_items {
+      .items {
         display: block;
-        padding: 0 0 0 30px;
+        padding: 35px;
+
+        h2 {
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 32px;
+        }
+
+        .en_title {
+          line-height: 25px;
+          padding: 0 0 20px 0;
+          font-size: 28px;
+          font-weight: bold;
+
+          span {
+            color: #a1182c;
+          }
+        }
+
+        .line {
+          width: 30px;
+          height: 3px;
+          margin: 0 0 0 3px;
+          font-size: 0;
+          background-color: #a1182c;
+        }
+
+        .summary {
+          color: #666;
+          padding: 60px 0;
+          letter-spacing: 1px;
+          font-size: 14px;
+          font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
+        }
+
+        .line2 {
+          width: 2px;
+          height: 120px;
+          float: left;
+          font-size: 0px;
+          background-color: #a1182c;
+        }
+      }
+    }
+
+    .news_right {
+      .classify {
+        width: 70%;
+        float: right;
+        padding: 40px 0 0 0;
 
         ul {
-          display: inline-block;
-          width: 100%;
-          margin: 10px 0 0;
-          li{
+          float: right;
+
+          li {
+            float: right;
+            margin: 0 0 0 15px;
+
+            a {
+              padding: 8px 14px;
+              border: 1px solid #e5e5e5;
+              background-color: #f4f4f4;
+              color: #333;
+            }
+
+            a:hover {
+              color: #fff;
+              text-decoration: none;
+              background-color: #a21a2c;
+            }
+          }
+        }
+      }
+
+      .news_content {
+        width: 70%;
+        float: right;
+
+        .news_items {
+          display: block;
+          padding: 0 0 0 30px;
+
+          ul {
             display: inline-block;
             width: 100%;
-            padding: 20px 0;
-            border-bottom: 1px solid #e9e9e9;
-            .pics{
-              width: 175px;
-              float: left;
-              margin-right: 15px;
-              img{
-                width: 100%;
-              }
-            }
-            .info{
-              .title{
-                line-height: 28.8px;
-                font: 16px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
-                a{
-                  font-size: 16px;
-                  font-weight: bold;
-                  color: #333;
-                }
-                a:hover{
-                  text-decoration: underline;
+            margin: 10px 0 0;
+
+            li {
+              display: inline-block;
+              width: 100%;
+              padding: 20px 0;
+              border-bottom: 1px solid #e9e9e9;
+
+              .pics {
+                width: 175px;
+                float: left;
+                margin-right: 15px;
+
+                img {
+                  width: 100%;
                 }
               }
-              .smy{
-                color: #777;
-                padding: 6px 0;
-              }
-              .dates{
-                color: #777;
-                font-size: 12px;
-                line-height: 21.6px;
+
+              .info {
+                .title {
+                  line-height: 28.8px;
+                  font: 16px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
+
+                  a {
+                    font-size: 16px;
+                    font-weight: bold;
+                    color: #333;
+                  }
+
+                  a:hover {
+                    text-decoration: underline;
+                  }
+                }
+
+                .smy {
+                  color: #777;
+                  padding: 6px 0;
+                }
+
+                .dates {
+                  color: #777;
+                  font-size: 12px;
+                  line-height: 21.6px;
+                }
               }
             }
           }
diff --git a/src/components/ProductsClassify.vue b/src/components/ProductsClassify.vue
index 43cfc1c..7c6530f 100644
--- a/src/components/ProductsClassify.vue
+++ b/src/components/ProductsClassify.vue
@@ -1,38 +1,28 @@
 <template>
   <div class="grid">
-    <el-row type="flex">
-      <el-col :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
-      </el-col>
-      <el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="16">
-        <el-row>
-          <el-col :span="8">
-            <div class="grid_left">
-              <a href="">
+    <div class="grid_box">
+      <div class="grid_left">
+        <a href="">
             <span class="pic">
               <img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
             </span>
-                <span class="info">产品分类</span>
-                <span>了解更多</span>
-              </a>
-            </div>
-          </el-col>
-          <el-col :span="16">
-            <div class="grid_right">
-              <ul>
-                <li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
-                  <a :href="picItem.href">
-                <span>
-                  <img :src="picItem.src" alt=""/>
-                </span>
-                    <span class="info">{{ picItem.name }}</span>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+          <span class="info">产品分类</span>
+          <span>了解更多</span>
+        </a>
+      </div>
+      <div class="grid_right">
+        <ul>
+          <li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src">
+            <a :href="picItem.href">
+                  <span class="pics">
+                    <img :src="picItem.src" alt=""/>
+                  </span>
+              <span class="info">{{ picItem.name }}</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -69,95 +59,151 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.grid {
-  padding: 50px 0 60px 0;
-  background-color: #f9f9f9;
-
-  .grid_left:hover {
-    filter: brightness(85%);
-    opacity: 1;
+@media screen and (max-width: 1660px) {
+  .grid_box {
+    width: 1230px !important;
   }
-
-  .grid_left {
-    position: relative;
-    display: inline-block;
-    transition: all 0.6s;
-
-    a {
-      .pic {
-        img {
-          width: 440px;
+  .pic{
+    img{
+      width: 400px !important;
+    }
+  }
+  .grid_right {
+    ul {
+      li {
+        a {
+          width:360px !important;
+          height: 267px!important;
         }
       }
-
-      span:last-child {
-        color: #fff;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 160px;
-        height: 36px;
-        line-height: 36px;
-        margin: 20px 0 0 -80px;
-        font-size: 16px;
-        letter-spacing: 2px;
-        text-align: center;
-        background-color: #de832f;
-        border-radius: 100px 100px 100px 100px;
-      }
     }
   }
+}
 
-  .info {
-    color: #fff;
-    position: absolute;
-    top: 42%;
-    left: 0;
-    width: 100%;
-    font-size: 34px;
-    font-weight: bold;
-    letter-spacing: 2px;
-    text-align: center;
-    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-    z-index: 999;
+@media screen and (max-width: 1480px) {
+  .grid_box {
+    width: 1100px !important;
+  }
+  .pic{
+    img{
+      width: 385px !important;
+    }
   }
-
   .grid_right {
-    float: right;
-
     ul {
-      display: flex;
-      flex-wrap: wrap;
-
       li {
-        margin-top: -5px;
-        padding: 5px;
-
-        span:first-child {
-          width: 100%;
-          filter: alpha(opacity=94);
-          -moz-opacity: 0.94;
-          opacity: 0.94;
-          transition: all 0.6s;
-        }
-
         a {
-          height: 296px;
-          position: relative;
-          display: inline-block;
-          background-color: #066090;
-          overflow: hidden;
+          width:341px !important;
+          height: 258px!important;
+        }
+      }
+    }
+  }
+}
+
+.grid {
+  width: 100%;
+  padding: 50px 0 60px 0;
+  background-color: #f9f9f9;
+  position: relative;
+  min-width: 1270px;
+  display: flex;
+  .grid_box {
+    width: 1360px;
+    display: flex;
+    margin: 0 auto;
+
+    .grid_left:hover {
+      filter: brightness(85%);
+      opacity: 1;
+    }
+
+    .grid_left {
+      position: relative;
+      transition: all 0.6s;
+      display: block;
+      padding: 6px;
+
+      a {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        background-color: #000;
+
+        .pic {
+          transition: all 0.6s;
 
           img {
             width: 440px;
-            height: 296px;
-            overflow: hidden;
-            transition: all 0.6s;
           }
+        }
 
-          img:hover {
-            filter: brightness(85%);
-            opacity: 1;
+        span:last-child {
+          color: #fff;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 160px;
+          height: 36px;
+          line-height: 36px;
+          margin: 20px 0 0 -80px;
+          font-size: 16px;
+          letter-spacing: 2px;
+          text-align: center;
+          background-color: #de832f;
+          border-radius: 100px 100px 100px 100px;
+        }
+      }
+    }
+
+    .info {
+      color: #fff;
+      position: absolute;
+      top: 42%;
+      left: 0;
+      width: 100%;
+      font-size: 34px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+      z-index: 999;
+    }
+
+    .grid_right {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+
+        li {
+          padding: 5px;
+
+          a {
+            width: 444px;
+            height: 295px;
+            overflow: hidden;
+            position: relative;
+            display: inline-block;
+            background-color: #066090;
+
+            span:first-child {
+              width: 100%;
+              filter: alpha(opacity=94);
+              -moz-opacity: 0.94;
+              opacity: 0.94;
+              transition: all 0.6s;
+
+              img {
+                width: 100%;
+                overflow: hidden;
+                transition: all 0.6s;
+              }
+
+              img:hover {
+                filter: brightness(85%);
+                opacity: 1;
+              }
+            }
           }
         }
       }
diff --git a/src/components/ProductsShow.vue b/src/components/ProductsShow.vue
index d682818..ab50ef6 100644
--- a/src/components/ProductsShow.vue
+++ b/src/components/ProductsShow.vue
@@ -11,7 +11,7 @@
         </div>
       </el-col>
     </el-row>
-    <el-row type="flex" style="width: 987px;margin: 0 auto">
+    <el-row type="flex" style="justify-content: center">
 <!--      <el-col :span="4">-->
 <!--      </el-col>-->
 <!--      <el-col :span="16" class="tagRow">-->
@@ -70,6 +70,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;
+}
 .el-tag:hover{
   background-color: #333;
   a{
@@ -87,7 +90,6 @@ export default {
   margin-right: 0;
 }
 .el-tag {
-
   border: none;
   margin-right: 10px;
   padding: 0 12px;
diff --git a/src/components/ProjectCase.vue b/src/components/ProjectCase.vue
index 83a08ab..5cd886a 100644
--- a/src/components/ProjectCase.vue
+++ b/src/components/ProjectCase.vue
@@ -10,16 +10,27 @@
           </div>
         </div>
       </el-row>
-      <div class="case_example">
-        <ul>
-          <li v-for="item in projectList" :key="item.src" @click="handleOpenImage">
-            <div class="pics">
-              <img :src="item.src" alt=""/>
-            </div>
-            <div class="case_info">{{ item.projectName }}</div>
-          </li>
-        </ul>
-      </div>
+      <el-row type="flex">
+        <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
+        <el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
+          <el-row type="flex">
+            <el-col class="case_example" :span="6" v-for="item in projectList" :key="item.src">
+              <ul>
+                <li>
+                  <div class="pics">
+                    <el-image
+                      class="img"
+                      :src="item.src"
+                      :preview-src-list="imgBigList">
+                    </el-image>
+                  </div>
+                  <div class="case_info">{{ item.projectName }}</div>
+                </li>
+              </ul>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -44,7 +55,8 @@ export default {
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
           projectName: '财政局大厦'
-        }, {
+        }
+        , {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
           projectName: '西安市雅盛大厦'
         }, {
@@ -58,41 +70,35 @@ export default {
           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',
       ]
     }
-  },
-  methods:{
-    handleOpenImage(){
-
-    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-//@media screen and (max-width: 1660px) {
-//  .pics {
-//    img {
-//      height: 221px!important;
-//    }
-//  }
-//  .case_example {
-//    width: 1230px !important;
-//  }
-//}
-//
-//@media screen and (max-width: 1480px) {
-//  .pics {
-//    img {
-//      height: 196px!important;
-//    }
-//  }
-//  .case_example {
-//    width: 1100px !important;
-//  }
-//}
+.el-row--flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+* {
+  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
+}
+
 .projectCase {
-  height: 970px;
+  min-height: 900px;
+
   .case_bg {
     min-width: 1300px;
     background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
@@ -127,6 +133,10 @@ export default {
         margin: 20px 0 0;
         text-align: center;
 
+        a:hover {
+          text-decoration: underline;
+        }
+
         a {
           color: #e2c8ab;
           display: inline-block;
@@ -140,10 +150,8 @@ export default {
     }
 
     .case_example {
-      width: 1360px;
-      margin: 0 auto;
       background-color: #fff;
-      padding: 20px 10px;
+      padding: 10px 10px 0 10px;
 
       ul {
         li:last-child {
@@ -156,35 +164,37 @@ export default {
 
         li {
           display: inline-block;
-          margin-right: 17px;
+          margin-right: 9px;
 
           .pics {
             overflow: hidden;
             margin: 0 0 5px 0;
-            img {
-              height: 245px;
-              object-fit: cover;
+
+            .img {
+              display: block;
+              width: 100%;
               transition: all 0.6s;
               cursor: pointer;
             }
-            img:hover {
+
+            .img:hover {
+              filter: brightness(85%);
+              opacity: 1;
               transform: scale(1.2);
             }
           }
+
           .case_info {
             width: 100%;
             float: left;
             font-size: 16px;
             text-align: center;
             line-height: 28.8px;
-            margin: 0 0 5px 0;
             cursor: pointer;
           }
-
         }
       }
     }
   }
-
 }
 </style>
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 645cac1..c80006c 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -193,6 +193,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;
+}
 @media screen and (max-width: 1660px) {
   .down_header {
     width: 1230px!important;
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index cc6e4a3..d24855d 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -1,15 +1,312 @@
 <template>
-<div>
-  新闻
-</div>
+  <div class="news">
+    <!-- 顶部图片    -->
+    <div class="ui-h">
+      <div class="said">
+        <p class="tit2"></p>
+        <p>新闻资讯</p>
+      </div>
+    </div>
+    <!--标签栏    -->
+    <div class="pt-top">
+      <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>
+        <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">
+                      <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>
+    </div>
+    <!--页码-->
+<!--    <el-pagination-->
+<!--      background-->
+<!--      layout="prev, pager, next"-->
+<!--      :total="1000">-->
+<!--    </el-pagination>-->
+  </div>
 </template>
 
 <script>
+
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      imageAndWord: [
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
+          word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
+          date: "2022.7.28"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
+          word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
+          date: "2022.7.28"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
+          word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
+          date: "2022.7.28"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        },
+        {
+          imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
+          word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
+          date: "2022.7.7"
+        }
+      ],
+      tagList: [
+        {
+          tag: '全部'
+        },
+        {
+          tag: '公司新闻'
+        }, {
+          tag: '行业动态'
+        }, {
+          tag: '瓷砖百科'
+        }
+      ]
+    };
+  }
+
 }
 </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;
+}
 
+.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 {
+  position: relative;
+  top: 1px;
+  height: 54px;
+  border-bottom: 1px solid #333;
+}
+
+.pt-top .list ul li {
+  display: inline;
+  float: left;
+  padding: 0 20px;
+  border-left: 1px solid #f1f1f1;
+}
+
+.pt-top .list ul li: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;
+}
+
+.pt-top .classname {
+  color: #333;
+  height: 55px;
+  line-height: 55px;
+  float: left;
+  font-size: 18px;
+}
+
+.pt-list {
+  /*width: 1140px;*/
+  float: left;
+  margin: 0 auto;
+}
+
+.pt-list .list2 {
+  /*width: 1265px;*/
+  padding: 20px 0;
+}
+
+.pt-list .list2 ul {
+  width: 100%;
+  /*display: flex;*/
+  float: left;
+  overflow: hidden;
+  list-style: none;
+}
+
+.pt-list .list2 ul li {
+  width: 347px;
+  float: left;
+  margin-right: 35px;
+}
+
+.pt-list .list2 ul li:last-child {
+  margin-right: 0;
+}
+
+.pt-list .list2 ul li .item {
+  display: block;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.pt-list .list2 ul li .item a {
+  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;*/
+  overflow: hidden;
+}
+
+.pt-list .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 {
+  transform: scale(1.2);
+  opacity: 0.8;
+  background-color: #000000;
+}
+
+.pt-list .list2 ul li .item a span.inf {
+  display: block;
+  font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+
+.pt-list .list2 ul li .item a span.dates {
+  color: #666;
+  display: block;
+  font-size: 12px;
+  float: left;
+}
 </style>
+
-- 
2.40.1