From ecc57c95b3e833ee4168fd7ac8f398e229bbc220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 5 May 2023 15:48:49 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E6=88=91=E4=BB=AC=E5=8C=BA=E6=A0=B7=E5=BC=8F=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AboutUs.vue | 103 ++++++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 37 deletions(-)

diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index c817921..3b1e580 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -11,32 +11,35 @@
         <div class="about_text">
           {{ aboutContent }}
         </div>
-        <el-row :gutter="20" style="padding: 0 4% ">
+        <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>{{ numItem.num }}</b>
+              <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">
+          <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>
-                <div class="img_box">
-                  <div class="img_innerBox">
-                    <div class="about_en">
+                <span class="img_box">
+                  <span class="img_innerBox">
+                    <span class="its">
+                    <span class="about_en">
                       <span>{{ imgTextItem.boldText }}</span>
                       <span>{{ imgTextItem.enText }}</span>
-                    </div>
+                    </span>
                     <span class="line"></span>
                     <span class="about_cn">{{ imgTextItem.cnTitle }}</span>
-                  </div>
-                </div>
+                    </span>
+                  </span>
+                </span>
               </a>
             </div>
           </el-col>
@@ -138,7 +141,7 @@ export default {
     line-height: 28.8px;
   }
 
-  b {
+  .num_bold {
     color: #444;
     line-height: 46px;
     margin: 0 4px 0 0;
@@ -146,7 +149,9 @@ export default {
     font-family: arial;
     font-weight: normal;
   }
-
+  .num_title:last-child {
+    border: none;
+  }
   .num_title {
     font-size: 14px;
     color: #666666;
@@ -158,6 +163,20 @@ export default {
     }
   }
 
+  .culture_1 {
+    .img_box {
+      position: absolute;
+      bottom: auto !important;
+      top: 0;
+    }
+  }
+
+  .imgAndText:hover {
+    img {
+      transform: scale(1.2);
+    }
+  }
+
   .imgAndText {
     display: block;
     margin: 0 15px;
@@ -172,7 +191,6 @@ export default {
 
       .pic {
         display: inline-block;
-        width: 100%;
         overflow: hidden;
 
         img {
@@ -187,34 +205,45 @@ export default {
         left: 0;
         width: 100%;
         background-color: rgba(32, 31, 37, 0.5);
+
         .img_innerBox {
-          width: 100%;
-          display: inline-block;
+          display: block;
           padding: 20px 30px;
-          .about_en{
-            color: #e0c9aa;
-            font-size: 22px;
-            float: left;
-            text-transform: uppercase;
-            font-family: arial;
-            span:first-child{
-              font-weight: bold;
-              margin-right: 10px;
+
+          .its {
+            display: inline-block;
+            width: 100%;
+
+            .about_en {
+              color: #e0c9aa;
+              font-size: 22px;
+              float: left;
+              text-transform: uppercase;
+              line-height: 39.6px;
+              font-family: arial;
+
+              span:first-child {
+                font-weight: bold;
+                margin-right: 10px;
+              }
+            }
+
+            .line {
+              clear: both;
+              width: 50px;
+              height: 1px;
+              float: left;
+              margin: 3px 0;
+              background-color: #e2c9ab;
+            }
+
+            .about_cn {
+              color: #e0c9aa;
+              clear: both;
+              float: left;
+              font-size: 18px;
+              line-height: 32px;
             }
-          }
-          .line{
-            clear: both;
-            width: 50px;
-            height: 1px;
-            float: left;
-            margin: 3px 0;
-            background-color: #e2c9ab;
-          }
-          .about_cn{
-            color: #e0c9aa;
-            clear: both;
-            float: left;
-            font-size: 18px;
           }
         }
       }

From 47fb652b67c8642c61d51a4cee4e09f8d27b412b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 5 May 2023 20:26:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E6=96=B0=E9=97=BB?=
 =?UTF-8?q?=E8=B5=84=E8=AE=AF=E5=8C=BA=E6=A0=B7=E5=BC=8F=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NewsCenter.vue | 246 ++++++++++++++++++++++++++++++++++
 src/views/index/index.vue     |   4 +-
 2 files changed, 249 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NewsCenter.vue

diff --git a/src/components/NewsCenter.vue b/src/components/NewsCenter.vue
new file mode 100644
index 0000000..6e5f849
--- /dev/null
+++ b/src/components/NewsCenter.vue
@@ -0,0 +1,246 @@
+<template>
+  <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>
+          </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>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NewsCenter",
+  data() {
+    return {
+      news_summary: '坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。',
+      classifyList: [
+        {
+          href: '',
+          title: '公司新闻'
+        },
+        {
+          href: '',
+          title: '行业动态'
+        }, {
+          href: '',
+          title: '瓷砖百科'
+        }
+      ],
+      itemList: [
+        {
+          href: '',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367sss.jpg',
+          title: '【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间。',
+          smy: '...',
+          dates: '2022-7-28'
+        }, {
+          href: '',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960sss.jpg',
+          title: 'EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。',
+          smy: '...',
+          dates: '2022-7-7'
+        }, {
+          href: '',
+          src: 'http://www.yipengtaoci.com/upfiles/images/20220706/16570891341430082sss.jpg',
+          title: '艺鹏·科普 | 为什么微水泥瓷砖那么火爆？让我们一探究竟！',
+          smy: '...',
+          dates: '2022-7-6'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.newsCenter {
+  .news_bg {
+    margin: 0 60px;
+    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;
+
+    .items {
+      display: block;
+      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 {
+        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%;
+          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%;
+              }
+            }
+            .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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 745a0f6..9fb65cb 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -6,6 +6,7 @@
     <ProductsShow/>
     <ProjectCase/>
     <AboutUs/>
+    <NewsCenter/>
   </div>
 </template>
 
@@ -16,10 +17,11 @@ import ProductsClassify from "@/components/ProductsClassify";
 import ProductsShow from "@/components/ProductsShow";
 import ProjectCase from "@/components/ProjectCase";
 import AboutUs from "@/components/AboutUs";
+import NewsCenter from "@/components/NewsCenter";
 
 export default {
   name: "index",
-  components: {AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
+  components: {NewsCenter, AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
 }
 </script>