143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
|
<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>
|