197 lines
4.4 KiB
Vue
197 lines
4.4 KiB
Vue
<template>
|
||
<view class="history-game">
|
||
<view class="filter-tab">
|
||
<view class="filter-item" @click="filterClick('all')" :class="{'filter-active': filterActive == 'all'}">全部</view>
|
||
<view class="filter-item" @click="filterClick('win')" :class="{'filter-active': filterActive == 'win'}">胜场</view>
|
||
<view class="filter-item" @click="filterClick('lose')" :class="{'filter-active': filterActive == 'lose'}">负场</view>
|
||
</view>
|
||
<view class="game-list">
|
||
<view class="game-item" v-for="item in 10" :key="item">
|
||
<view class="game-info">
|
||
<view class="game-type">单人-1237房间</view>
|
||
<view class="game-date">2025-06-12 12:00</view>
|
||
<view class="del-btn">
|
||
<uni-icons type="trash" size="30"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="game-user">
|
||
<view class="game-user-item" v-for="(user, index) in userList" :key="index">
|
||
<view class="user-avatar">
|
||
<image :src="user.avatar" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="user-name">{{user.name}}</view>
|
||
<view class="user-score">{{user.score}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="game-foot">
|
||
<view class="game-status">
|
||
已结束
|
||
</view>
|
||
<view class="check-detail">
|
||
<uni-icons type="right" size="25" color="#748cec"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, getCurrentInstance } from 'vue'
|
||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
|
||
const proxy = getCurrentInstance().proxy;
|
||
|
||
// 过滤相关
|
||
const filterActive = ref('all'); // all:全部，win:胜场，lose:负场
|
||
const filterClick = (type) => {
|
||
filterActive.value = type;
|
||
};
|
||
|
||
|
||
// 参与人
|
||
const userList = ref([
|
||
{
|
||
avatar: 'https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg',
|
||
name: '赵云',
|
||
score: 100
|
||
},
|
||
{
|
||
avatar: 'https://q1.itc.cn/q_70/images03/20241119/197701bb9ef34b20b6497720081a9972.jpeg',
|
||
name: '张飞',
|
||
score: -50
|
||
},
|
||
{
|
||
avatar: 'https://img1.baidu.com/it/u=3612220943,2414740890&fm=253&app=138&f=JPEG?w=526&h=500',
|
||
name: '刘备',
|
||
score: 30
|
||
},
|
||
{
|
||
avatar: 'https://c-ssl.dtstatic.com/uploads/blog/202206/12/20220612135738_992b1.thumb.1000_0.jpg',
|
||
name: '诸葛亮',
|
||
score: -80
|
||
}
|
||
]);
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.history-game {
|
||
width: 750rpx;
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.filter-tab {
|
||
--filter-height: 80rpx;
|
||
--filter-color: #748cec;
|
||
--filter-border: 1rpx;
|
||
width: 700rpx;
|
||
height: var(--filter-height);
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
.filter-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
line-height: calc(var(--filter-height) - 2 * var(--filter-border));
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
border: var(--filter-border) solid var(--filter-color);
|
||
}
|
||
.filter-active {
|
||
background-color: var(--filter-color);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.game-list {
|
||
width: 700rpx;
|
||
margin: 0 auto;
|
||
.game-item {
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
margin: 20rpx 0;
|
||
box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
.game-info {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.game-type {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.game-date {
|
||
font-size: 32rpx;
|
||
color: #bbbbbb;
|
||
}
|
||
.del-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-left: 1rpx solid #cccccc;
|
||
}
|
||
}
|
||
.game-user {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
overflow: auto;
|
||
padding: 20rpx 0;
|
||
.game-user-item {
|
||
width: 140rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-shrink: 0;
|
||
.user-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 10%;
|
||
overflow: hidden;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.user-name {
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
.user-score {
|
||
font-size: 32rpx;
|
||
color: #fa5d5d;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.game-foot {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.game-status {
|
||
font-size: 32rpx;
|
||
color: #57bcef;
|
||
}
|
||
.check-detail {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|