<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({});

onMounted(async () => {});
</script>

<template>
  <view class="live-item">
    <view>
      <image src="../static/user-icon-dark.png" mode="widthFix" />
    </view>
    <view>
      <text>陈百强姓陈</text>
      <view>
        <text>节奏迅猛</text>
        <text>节奏迅猛</text>
      </view>
      <view class="live-item-avatars">
        <view :style="{ width: `${25 * 5 + 25}rpx` }">
          <image
            v-for="(avatar, i) in [1, 2, 3, 4, 5]"
            :key="avatar"
            :src="'../static/user-icon.png'"
            :style="{
              zIndex: i,
              transform: `translateX(-${10 * i}rpx)`,
            }"
          />
        </view>
        <text>观战中...</text>
      </view>
    </view>
    <view>
      <view>
        <image src="../static/race-title-bg.png" mode="widthFix" />
        <text>1v1对抗</text>
      </view>
      <view>
        <text>本轮环数</text>
        <text>62</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.live-item {
  display: flex;
  align-items: center;
  background: #252831;
  padding: 25rpx;
  border-radius: 25rpx;
}
.live-item > view:nth-child(1) {
  width: 150rpx;
  height: 150rpx;
}
.live-item > view:nth-child(1) > image {
  width: 100%;
  height: 100%;
  border-radius: 25rpx;
}
.live-item > view:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 20rpx;
}
.live-item > view:nth-child(2) > text {
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
}
.live-item > view:nth-child(2) > view:nth-child(2) {
  font-weight: 500;
  font-size: 20rpx;
  color: #ffa61b;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}
.live-item > view:nth-child(2) > view:nth-child(2) > text {
  line-height: 28rpx;
  border-radius: 15rpx;
  border: 2rpx solid #ffc05d;
  padding: 0 10rpx;
  margin-right: 10rpx;
}
.live-item-avatars {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #999999;
}
.live-item-avatars > view {
  display: flex;
  align-items: center;
}
.live-item-avatars > view > image {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1rpx solid #000;
  box-sizing: border-box;
}
.live-item > view:nth-child(3) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  height: 150rpx;
}
.live-item > view:nth-child(3) > view:first-child {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #c46e36;
  transform: translateX(100rpx);
}
.live-item > view:nth-child(3) > view:first-child > text {
  transform: translateX(-90rpx);
}
.live-item > view:nth-child(3) > view:first-child > image {
  width: 160rpx;
  height: 50rpx;
}
.live-item > view:nth-child(3) > view:last-child {
  display: flex;
  align-items: flex-end;
  font-size: 20rpx;
  color: #999999;
}
.live-item > view:nth-child(3) > view:last-child > text:last-child {
  font-weight: 600;
  font-size: 48rpx;
  color: #ffd299;
  margin-left: 10rpx;
  line-height: 40rpx;
}
</style>
