<template>
  <div>
    <div class="title">TEAM STYLE</div>
    <div class="subTitle">团队风貌</div>
    <div class="newsList">
      <div v-for="i in 6" class="newsItem">
        <div class="image">
          <el-image
            style="width: 100%;height: 100%"
            :src="banner"
            fit="contain"></el-image>
        </div>
        <div class="itemTitle">成立会议</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 {
  width: 65vw;
  margin: 3.9vw auto 0;

  .newsItem {
    display: inline-block;
    width: 32%;
    height: 17vw;
    margin: 0 2% 1.4vw 0;
    background-color: #f8f8f8;
    text-align: left;
    &:nth-child(3n){
      margin-right: 0;
    }

    .image{
      width: 100%;
      height: 73%;
    }

    .itemTitle{
      width: 100%;
      height: 27%;
      text-align: center;
      line-height: 4.3vw;
      font-size: 1.3vw;
      letter-spacing: 2px;
    }
  }

}

</style>
