<template>
  <div class="index">

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="`${item.url}`" />
      </van-swipe-item>
    </van-swipe>

    <img class="index-recommend" src="@/assets/images/index/recommend.png">

    <div class="recommend-item">
      <div>
        <div class="recommend-title">德国淘汰西班牙进入八强</div>
        <div class="recommend-contain">德国西班牙进入死亡之组，谁最终进入八强，拭目以待</div>
        <div class="recommend-dice">
          <img src="@/assets/images/index/dice.png">
          <div>1.32</div>
          <img style="margin-left: 5px;" src="@/assets/images/index/dice.png">
          <div>1.32</div>
        </div>
      </div>
      <img src="@/assets/images/index/person.png">
    </div>

    <div class="recommend-item">
      <div>
        <div class="recommend-title">德国淘汰西班牙进入八强</div>
        <div class="recommend-contain">德国西班牙进入死亡之组，谁最终进入八强，拭目以待</div>
        <div class="recommend-dice">
          <img src="@/assets/images/index/dice.png">
          <div>1.32</div>
          <img style="margin-left: 5px;" src="@/assets/images/index/dice.png">
          <div>1.32</div>
        </div>
      </div>
      <img src="@/assets/images/index/person.png">
    </div>

    <div class="recommend-item">
      <div>
        <div class="recommend-title">德国淘汰西班牙进入八强</div>
        <div class="recommend-contain">德国西班牙进入死亡之组，谁最终进入八强，拭目以待</div>
        <div class="recommend-dice">
          <img src="@/assets/images/index/dice.png">
          <div>1.32</div>
          <img style="margin-left: 5px;" src="@/assets/images/index/dice.png">
          <div>1.32</div>
        </div>
      </div>
      <img src="@/assets/images/index/person.png">
    </div>
    <div class="recommend-item">
      <div>
        <div class="recommend-title">德国淘汰西班牙进入八强</div>
        <div class="recommend-contain">德国西班牙进入死亡之组，谁最终进入八强，拭目以待</div>
        <div class="recommend-dice">
          <img src="@/assets/images/index/dice.png">
          <div>1.32</div>
          <img style="margin-left: 5px;" src="@/assets/images/index/dice.png">
          <div>1.32</div>
        </div>
      </div>
      <img src="@/assets/images/index/person.png">
    </div>
    <div class="recommend-item">
      <div>
        <div class="recommend-title">德国淘汰西班牙进入八强</div>
        <div class="recommend-contain">德国西班牙进入死亡之组，谁最终进入八强，拭目以待</div>
        <div class="recommend-dice">
          <img src="@/assets/images/index/dice.png">
          <div>1.32</div>
          <img style="margin-left: 5px;" src="@/assets/images/index/dice.png">
          <div>1.32</div>
        </div>
      </div>
      <img src="@/assets/images/index/person.png">
    </div>

    <img class="index-battle" src="@/assets/images/index/battle.png">

  </div>
</template>

<script>
import { getBanner } from '~/api/user.js'
export default {
  name: 'IndexPage',
  data() {
    return {
      bannerList: [],
    };
  },
  created() {
    this.getBanner()
  },
  methods: {
    async getBanner() {
      try {
        const res = await getBanner()
        this.bannerList = res.data.rows
      } catch (err) {
        console.log(err)
      }
    },
  }
}
</script>

<style  lang="scss" scoped>
.index {
  background: url("@/assets/images/index/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-bottom: 70px;

  .index-recommend {
    margin-top: 5px;
  }

  .index-battle {
    display: block;
    margin: 15px auto 0;
    width: 200px;
  }

  .recommend-item {
    width: 90%;
    height: 90px;
    margin: 5px auto 10px;
    background-color: #068EF6FF;
    border-radius: 5px;
    display: flex;
    padding: 3px 5px;
  }

  .recommend-dice {
    display: flex;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin: 5px 0;

    img {
      width: 10px;
      margin-right: 5px;
    }
  }

  .recommend-title {
    font-family: "modeng";
    color: #E0F3FFFF;
    -webkit-text-stroke: 1px #02357AFF;
    margin: 5px 0;
  }

  .recommend-contain {
    font-family: "PingFang-SC-Medium";
    color: #73CAFFFF;
    font-weight: 500;
    font-size: 12px;
    margin: 5px 0;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>
