<template>
  <div>
    <el-carousel >
      <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
        <div id="txt">
          <a class="title">{{ item.title }}</a>
          <a class="subtitle">{{ item.subtitle }}</a>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div id="hot">
      <div class="content">
        <div class="list">
          <div class="article" v-for="(item, index) in articleList" :key="index">
            <img :src="item.img">
            <div class="acontent">
              <div class="txt">
                <a class="title">{{ item.title }}</a>
                <a class="tcontent">{{ item.content }}</a>
              </div>
              <a class="date">发布日期: {{ item.date }}</a>
            </div>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
        <div class="right">
          <div class="rtop">
            <div class="title">
              <a>热点新闻</a>
            </div>
            <div class="nav" v-for="(item,index) in news" :key="index">
              <img :src="item.img">
              <a>{{ item.txt }}</a>
            </div>
          </div>
          <div class="rbottom">
            <div class="title">
              <a>相关视频</a>
            </div>
            <div class="nav" v-for="(item,index) in videos" :key="index">
              <img :src="item.img">
              <a>{{ item.txt }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      carouselList: [
        { src: '/car1.png', title: '吉利11月销量再刷新纪录，新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场，再想回来就不可能了。必须了解这个发展的趋势，只有参与才有机会。' },
        { src: '/car2.png', title: '吉利11月销量再刷新纪录，新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场，再想回来就不可能了。必须了解这个发展的趋势，只有参与才有机会。' }
      ],
      articleList: [
        {
          img: '/airtlc.png',
          title: '强不强？吉利银河E8全景智慧座舱揭秘',
          content: '同样引人注目。近日，2024款福特电马激情上市，共推出5款车型，官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
          date: '2023/01/02'
        },
        {
          img: '/airtlc.png',
          title: '强不强？吉利银河E8全景智慧座舱揭秘',
          content: '同样引人注目。近日，2024款福特电马激情上市，共推出5款车型，官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
          date: '2023/01/02'
        },
        {
          img: '/airtlc.png',
          title: '强不强？吉利银河E8全景智慧座舱揭秘',
          content: '同样引人注目。近日，2024款福特电马激情上市，共推出5款车型，官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
          date: '2023/01/02'
        }
      ],
      news: [
        {
          img: '/car.png',
          txt: '银河E8全景智慧座舱揭秘银河E8'
        },
        {
          img: '/car.png',
          txt: '银河E8全景智慧座舱揭秘银河E8'
        },
        {
          img: '/car.png',
          txt: '银河E8全景智慧座舱揭秘银河E8'
        }
      ],
      videos: [
        {
          img: '/car.png',
          txt: '银河E8全景智慧座舱揭秘银河E8'
        },
        {
          img: '/car.png',
          txt: '银河E8全景智慧座舱揭秘银河E8'
        },
        {
          img: '/car.png',
          txt: '银河E8全景智慧座舱揭秘银河E8'
        }
      ]
    }
  },
  components: {
  }
}
</script>
<style lang="scss" scoped>
.el-carousel__item{
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  #txt {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    color: #FFFFFF;
    .title {
      font-size: 36px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 15px;

    }
    .subtitle {
      font-size: 16px;
      font-weight: 400;
      opacity: 0.5;
      text-align: center;
    }
  }
}
#hot {
  width: 100%;
  // height: 1200px;
  background: #F2F4F8;
  display: flex;
  justify-content: center;
  .content {
    width: 70%;
    margin: 50px 0 50px 0;
    display: flex;
    justify-content: space-between;
    .list {
      padding: 10px;
      width: 76%;
      background-color: #FFFFFF;
      .article {
        display: flex;
        img {
          width: 200px;
          height: 150px;
        }
        .acontent {
          height: 150px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0 10px;
          margin-bottom: 20px;
          .txt {
            a {
              display: block;
              text-align: left;
            }
          }
          .title {
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            line-height: 48px;
          }
          .content {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            line-height: 24px;
          }
          .date {
            font-size: 14px;
            font-weight: 400;
            color: #7D8392;
            line-height: 30px;
            text-align: left;
          }
        }
        .acontent:not(:last-child) {
          margin-bottom: 0px;
        }
      }
    }
    .right {
      width: 21%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .rtop, .rbottom {
        background-color: #FFFFFF;
        height: 49%;
        width: 100%;
        .title {
          background-image: url('../../assets/airtlctl.png');
          background-position: 0 0; /* 调整这些值来改变显示的部分 */
          background-size: 30% 100%; /* 使用 'cover' 或 'contain'，或者设置具体尺寸 */
          background-repeat: no-repeat;
          a {
            font-size: 20px;
            font-weight: bold;
            color: #000000;
            line-height: 48px;
            width: 100%;
            text-align: left;
            display: inline-block;
            margin-left: 40px;
          }
        }
        .nav {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 10px 0 10px 0;
          img {
            width: 240px;
            height: 180px;
          }
          a {
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            line-height: 48px;
          }
        }
      }
    }
  }
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #07CAAF;
}
</style>
