domesticRanking.vue
4.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<template>
<div>
<div class="box">
<el-card class="mt20 mb60" style="position: relative" :style="{'--el-card-padding':'10px 20px'}">
<div class="poSearch">
<span class="date forPc">更新时间：2323-10-17 </span>
<el-select v-model="query.level" @change="changeLevel">
<el-option value="" label="全部" />
<el-option value="46kg" label="F-46KG" />
<el-option value="49kg" label="F-49KG" />
<el-option value="53kg" label="F-53KG" />
<el-option value="57kg" label="F-57KG" />
<el-option value="67kg" label="F-67KG" />
<el-option value="67kg以上" label="F-67KG以上" />
<el-option value="68kg" label="M-68KG" />
<el-option value="73kg" label="F-73KG" />
<el-option value="74kg" label="M-74KG" />
<el-option value="80kg" label="M-80KG" />
<el-option value="80kg以上" label="M-80kg以上" />
<el-option value="87kg" label="M-87KG" />
</el-select>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="国内积分排名" name="1">
<el-table v-loading="loading" :data="list" stripe>
<el-table-column
prop="ranking" label="排名" width="80"
align="center"
>
<template #header="scope">
<div @click="sortList">
<span>排名</span>
<el-icon>
<sort color="#B0906E" />
</el-icon>
</div>
</template>
</el-table-column>
<el-table-column label="姓名" align="center">
<template #default="scope">
<div class="namebox">
<!-- <div>-->
<!-- <el-icon>-->
<!-- <top color="#1FAE90"/>-->
<!-- </el-icon>-->
<!-- <el-icon>-->
<!-- <bottom color="#DD4633"/>-->
<!-- </el-icon>-->
<!-- 4-->
<!-- </div>-->
<!-- <img/>-->
<p class="name">{{ scope.row.name }}</p>
</div>
</template>
</el-table-column>
<el-table-column label="单位" prop="dept" align="center" />
<el-table-column label="积分" prop="score" align="center" />
</el-table>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</div>
</template>
<script setup>
import data from '@/assets/json/ranking.json'
import { onMounted, ref } from 'vue'
const list = ref([])
const loading = ref(false)
const query = ref({
level: ''
})
const activeTab = ref('1')
onMounted(() => {
list.value = data.RECORDS
loading.value = false
})
const changeLevel = (e) => {
loading.value = true
if (e) {
list.value = []
for (var n of data.RECORDS) {
if (n.level == e) {
list.value.push(n)
}
}
console.log(list.value)
} else {
list.value = data.RECORDS
}
loading.value = false
}
const sortList = () => {
loading.value = true
var arr = list.value.reverse()
list.value = arr
loading.value = false
}
</script>
<style scoped lang="scss">
.poSearch{position: absolute;
color: #8F8E94;
font-size: 14px;
top: 10px;
right: 20px;
z-index: 1;
span{margin-right: 20px;}
}
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th){
background: #fff!important;color:#996C33;font-size: 18px;
}
:deep(.el-table td.el-table__cell div){font-size: 18px;}
:deep(.el-table .el-table__cell){padding: 0;}
.namebox{
display: flex;align-items: center;text-align: center;justify-content: center;
img{width: 50px;height: 50px;border-radius: 50px;margin:0 10px;}
.name{
font-size: 18px;
color: #1666AD;}
}
@media screen and (orientation: portrait) {
/*竖屏 css*/
:deep(.el-table td.el-table__cell div){font-size: 14px;}
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th){
font-size: 14px;
}
.namebox{
.name{font-size: 16px;}
}
}
</style>