111
This commit is contained in:
196
scoring/pages/history-game/history-game.vue
Normal file
196
scoring/pages/history-game/history-game.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user