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] =?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>