ceramic/src/components/NewsCenter.vue

<template>
  <div class="newsCenter">
    <a href="/about_us">
      <div class="news_bg">
      </div>
    </a>
    <!--    <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="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">
@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 {
    background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
    background-size: cover;
    height: 380px;
  }

  .newsWidth {
    width: 1360px;
    margin: 0 auto;

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