<template>
  <div>
    <div class="title">NEWS CENTER</div>
    <div class="subTitle">新闻中心</div>
    <div class="newsList">
      <div v-for="i in 3" class="newsItem">
        <div class="newsDay">03</div>
        <div class="newsTime">11/2024</div>
        <div class="newsTitle">[央视镜头]海威物联技术支持的“智慧物流”</div>
        <div class="newsImage">
          <el-image
            style="width: 100%;height: 100%"
            :src="banner"
            fit="contain"></el-image>
        </div>
        <div class="newsInfo">
          近日，央视记者探访目前全球规模最大的仓检一体智能物流园区 - 京东昆明
        </div>
        <div class="newsDetail">查看详情 ></div>
      </div>
    </div>
    <div class="learnMore">
      <el-button type="primary" plain>查看更多</el-button>
    </div>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'

export default {
  name: 'ProductCenter',
  data() {
    return {
      banner,
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.content {
  width: 70vw;
  margin: 0 auto;
}

.title {
  margin-top: 4.2vw;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  letter-spacing: 2px;
  color: #0003;
}

.subTitle {
  margin-top: 0.4vw;
  width: 100%;
  text-align: center;
  font-size: 1.9vw;
  letter-spacing: 2px;
  color: #000;
}

.newsList {
  margin-top: 3.9vw;

  .newsItem {
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    width: 17vw;
    margin: 0 1vw;
    background-color: #f8f8f8;
    text-align: left;
    padding: 1.5vw;

    .newsDay {
      margin-top: 0.7vw;
      font-size: 2.9vw;
      color: #000;
      transition: all 0.2s;
    }

    .newsTime {
      font-size: 1.1vw;
      margin-top: 0.15vw;
      color: #666;
      transition: all 0.2s;
      letter-spacing: 2px;
    }

    .newsTitle {
      margin-top: 0.8vw;
      font-size: 1.2vw;
      color: #000;
      transition: all 0.2s;
      line-height: 1.9vw;
      letter-spacing: 3px;
    }

    .newsImage {
      margin-top: 1vw;
      width: 100%;
      height: 10.4vw;
    }

    .newsInfo {
      margin-top: 0.85vw;
      font-size: 0.9vw;
      color: #666;
      transition: all 0.2s;
      line-height: 1.4vw;
    }

    .newsDetail {
      margin-top: 1vw;
      font-size: 1vw;
      color: @standard-color;
      transition: all 0.2s;
    }
  }

  .newsItem:hover {
    background-color: @standard-color;

    .newsDay {
      color: #fff;
    }

    .newsTime {
      color: #fff;
    }

    .newsTitle {
      color: #fff;
    }

    .newsInfo {
      color: #fff;
    }

    .newsDetail {
      color: #fff;
    }
  }
}

.learnMore {
  margin-top: 3.2vw;

  /deep/ .el-button {
    background-color: #0000;
    padding: 1vw 3vw;
    border-color: @standard-color;

    span {
      font-size: 1.2vw;
      letter-spacing: 3px;
      color: @standard-color;
    }
  }
}
</style>
