ceramic/src/components/NewsCenter.vue

<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 {
  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;

    .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>