<template>
  <v-card style="height: 200px;width: 95%;margin: auto;">
    <v-carousel :show-arrows="false" style="height: 100%;width: 100%;" cycle interval="2000" hide-delimiter-background>
      <v-carousel-item v-for="(item, i) in items" :key="i" cover>
        <img :src="item.src" class="tupian">
      </v-carousel-item>
    </v-carousel>
  </v-card>
  <div class="relative1">
    <h class="text-h6">近期比赛</h>
    <h class="text-h6 float-right">更多</h>
    <v-divider thickness="3px"></v-divider>
    <v-card class="card1">
      <div class="text-h6" style="height: 33px;" v-for="(thing, index) in things" :key="index">
        <div class="float-left zhibiao1">
          {{ thing.username }}
        </div>
        <div class="float-left zhibiao2">
          {{ thing.score1 }}
        </div>
        <div class="float-left">
          :
        </div>
        <div class="float-left zhibiao2">
          {{ thing.score2 }}
        </div>
        <div class="float-left zhibiao1">
          {{ thing.username1 }}
        </div>
        <div class="float-right" style="line-height: 32px;">
          <v-icon>mdi-chevron-right</v-icon>
        </div>
        <br>
      </div>
    </v-card>
  </div>
  <div class="relative1">
    <h class="text-h6">队员榜单</h>
    <h class="text-h6 float-right">更多</h>
    <v-divider thickness="3px"></v-divider>
    <v-card class="card1">
      <div class="text-h6" style="height: 33px;" v-for="(thing, index) in things" :key="index">
        <div class="float-left">
          {{ thing.number }} {{ thing.username }}
        </div>
        <div class="float-left zhibiao3">
          {{ thing.level }}级
        </div>
        <div class="float-left zhibiao4">
          {{ thing.point }}分
        </div>
        <div class="float-right" style="line-height: 32px;">
          <v-icon>mdi-chevron-right</v-icon>
        </div>
        <br>
      </div>
    </v-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';

const items = reactive([
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
  },
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
  },
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
  },
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
  },
]
);

const things = reactive([
  {
    username: 'User1',
    score1: 10,
    score2: 5,
    username1: 'User2',
    extraInfo: 'adas',
    number: '1.',
    level: 'A',
    point: 4
  },
  {
    username: 'User3',
    score1: 8,
    score2: 3,
    username1: 'User4',
    extraInfo: 'adas',
    number: '2.',
    level: 'A',
    point: 8
  }
]
);


</script>

<style>
.tupian {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.relative1 {
  /* margin-left: 20px; */
  margin: auto;
  width: 95%;
  margin-top: 10px;
  /* margin-right: 20px; */
}

.card1 {
  margin-top: 4px;
}

.zhibiao1 {
  width: 25%;
  text-align: center;
}

.zhibiao2 {
  width: 10%;
  text-align: center;
}

.zhibiao3 {
  width: 20%;
  text-align: center;
}

.zhibiao4 {
  width: 20%;
  /* text-align: center; */
}
</style>