Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
1119ab4e by zhangmeng
Options

奖牌

1 parent fb8342d4
Inline Side-by-side
Showing 5 changed files with 323 additions and 64 deletions
src/apiPc/match.js
......@@ -833,3 +833,12 @@ export function editOcr(data) {
})
}
// 奖牌详情
export function medalTableDetail(params) {
return request({
url: `ztx/note/medalTableDetail`,
method: 'get',
params
})
}
......
src/routerPc/en.js
......@@ -211,7 +211,7 @@ export const constantRoutes = [
name: 'personListHasKind',
meta: { title: '人员列表' }
}
]
},
{
......@@ -237,6 +237,12 @@ export const constantRoutes = [
component: () => import('@/viewsPc/saiC/index'),
name: 'saiC',
meta: { title: 'COMPETITIONS' }
},
{
path: 'view',
component: () => import('@/viewsPc/saiC/view'),
name: 'saiCView',
meta: { title: 'SAICVIEW' }
}
]
},
......@@ -679,7 +685,7 @@ export const constantRoutes = [
name: 'payOk',
meta: { title: '支付成功' }
},
{
path: 'commitDone/:orderId',
component: () => import('@/viewsPc/match/commitDone'),
......
src/viewsPc/index.vue
......@@ -167,35 +167,28 @@
</div>
<!--历史排名-->
<el-card :body-style="{'padding':'10px 20px 18px'}">
<el-table :data="rank" stripe>
<el-table-column align="center" label="名次" type="index" width="50">
<template #default="scope">
<span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
<span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
<span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span>
<span v-else>{{ scope.row.mingCi }}</span>
</template>
</el-table-column>
<el-table :data="rank" height="336" stripe @row-click="handleRowClick">
<el-table-column align="center" label="名次" prop="index" width="50" />
<el-table-column label="国家" prop="name">
<template #default="scope">
<div>
<span :class="`flag-icon flag-icon-${scope.row.code}`" />
{{ scope.row.countryName }}
{{ language == 0 ? scope.row.name : scope.row.countryNameEn }}
</div>
</template>
</el-table-column>
<el-table-column align="center" label="组合">
<template #default="scope">
<div class="text-primary esp">{{ scope.row.zuHe }}</div>
</template>
</el-table-column>
<!-- <el-table-column align="center" label="组合">-->
<!-- <template #default="scope">-->
<!-- <div class="text-primary esp">{{ scope.row.zuHe }}</div>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column width="60">
<template #header>
<img class="mauto" src="@/assets/dance/1.png">
</template>
<template #default="scope">
<div class="text-warning text-center">{{ scope.row.jin }}</div>
<div class="text-warning text-center">{{ scope.row.gold }}</div>
</template>
</el-table-column>
<el-table-column width="60">
......@@ -203,7 +196,7 @@
<img class="mauto" src="@/assets/dance/2.png">
</template>
<template #default="scope">
<div class="text-blue text-center">{{ scope.row.yin }}</div>
<div class="text-blue text-center">{{ scope.row.silver }}</div>
</template>
</el-table-column>
<el-table-column width="60">
......@@ -211,7 +204,7 @@
<img class="mauto" src="@/assets/dance/3.png">
</template>
<template #default="scope">
<div class="text-primary text-center">{{ scope.row.tong }}</div>
<div class="text-primary text-center">{{ scope.row.bronze }}</div>
</template>
</el-table-column>
</el-table>
......@@ -482,12 +475,25 @@ onMounted(() => {
init()
})
function handleRowClick(row) {
console.log(row)
router.push({
path: '/saiC/view',
query: {
name: row.name,
code: row.code,
enName: row.enName
}
})
}
const init = () => {
var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
time.value = dayjs('2025-07-17 07:00:00').diff(today, 'millisecond')
etime.value = dayjs('2025-07-22 12:00:00').diff(today, 'millisecond')
getRank().then(res => {
rank.value = res.data.slice(0, 6)
rank.value = res.data
console.log(rank.value)
})
getNewsListById({
pageSize: time.value > 0 ? 3 : 4,
......
src/viewsPc/saiC/index.vue
<template>
<div>
<div class="box">
<div class="mt20" />
<el-card>
<el-row :gutter="20">
<el-col :lg="12" :sm="24">
<!--赛事日历-->
<el-calendar v-model="currentDate">
<template #date-cell="data">
<div
:class="data.data.day==query.currentDate?'primaryDate':''" class="date"
@click="selectDate(data.data.day)"
>
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
</el-col>
<el-col :lg="12" :sm="24">
<div class="calendarList">
<ul v-loading="loading">
<li v-for="n in schList" @click="goMatch(n)">
<li v-for="n in schList" :key="n" @click="goMatch(n)">
<label>{{ n.timeStr }}</label>
<div class="esp mt5">{{ n.name }}</div>
</li>
<el-empty v-if="schList.length== 0" :image="`/img/order_no.png`" :image-size="200" />
</ul>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="mt20 mb20">
<el-table :data="rank" stripe>
<el-table-column align="center" :label="language==0?'名次':'Rank'" type="index" width="100">
<el-table :data="rank" stripe @row-click="handleRowClick">
<el-table-column :label="language==0?'名次':'Rank'" align="center" type="index" width="100">
<template #default="scope">
<span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
<span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
<span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span>
<span v-else>{{ scope.row.mingCi }}</span>
<span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.index }}</span>
<span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.index }}</span>
<span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.index }}</span>
<span v-else>{{ scope.row.index }}</span>
</template>
</el-table-column>
<el-table-column :label="language==0?'国家':'Country'" prop="name">
<template #default="scope">
<div>
<span :class="`flag-icon flag-icon-${scope.row.code}`" />
{{ language==0?scope.row.countryName :scope.row.countryShortName }}
{{ language == 0 ? scope.row.name : scope.row.enName }}
</div>
</template>
</el-table-column>
<el-table-column align="center" :label="language==0?'组合':'Couple'" min-width="200">
<template #default="scope">
<div class="text-primary esp">{{ scope.row.zuHe }}</div>
</template>
</el-table-column>
<!-- <el-table-column align="center" :label="language==0?'组合':'Couple'" min-width="200">-->
<!-- <template #default="scope">-->
<!-- <div class="text-primary esp">{{ scope.row.zuHe }}</div>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column min-width="60">
<template #header>
<img class="mauto" src="@/assets/dance/1.png">
</template>
<template #default="scope">
<div class="text-warning text-center">{{ scope.row.jin }}</div>
<div class="text-warning text-center">{{ scope.row.gold }}</div>
</template>
</el-table-column>
<el-table-column min-width="60">
......@@ -73,7 +69,7 @@
<img class="mauto" src="@/assets/dance/2.png">
</template>
<template #default="scope">
<div class="text-blue text-center">{{ scope.row.yin }}</div>
<div class="text-blue text-center">{{ scope.row.silver }}</div>
</template>
</el-table-column>
<el-table-column min-width="60">
......@@ -81,15 +77,15 @@
<img class="mauto" src="@/assets/dance/3.png">
</template>
<template #default="scope">
<div class="text-primary text-center">{{ scope.row.tong }}</div>
<div class="text-primary text-center">{{ scope.row.bronze }}</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card v-for="(n,index) in cjList" class="mt20 mb20" hidden>
<el-card v-for="(n,index) in cjList" :key="index" class="mt20 mb20" hidden>
<div class="leftboderTT">{{ language == 0 ? n.title : n.en_title }}</div>
<div v-for="(m,jndex) in n.list">
<div v-for="(m,jndex) in n.list" :key="jndex">
<h3 class="text-center">{{ m.title }}</h3>
<div class="tablebody">
<table class="table table-striped">
......@@ -104,7 +100,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(l,kndex) in m.rows">
<tr v-for="(l,kndex) in m.rows" :key="kndex">
<td class="text-center">{{ l.RANK }}</td>
<td class="text-center">{{ l.COUPLE }}</td>
<td class="text-center">{{ l.COUNTRY }}</td>
......@@ -116,9 +112,10 @@
</table>
</div>
</div>
</el-card>
<br><br>
<br>
<br>
</div>
</div>
</template>
......@@ -175,6 +172,17 @@ function selectDate(date) {
getScheduleList()
}
function handleRowClick(row) {
router.push({
path: '/saiC/view',
query: {
name: row.name,
code: row.code,
enName: row.enName
}
})
}
function goMatch(n) {
router.push({
name: 'matchDetail',
......@@ -209,7 +217,7 @@ h3 {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
td, th {
padding: 8px;
font-size: 14px;
......@@ -225,24 +233,24 @@ h3 {
--el-calendar-cell-width: 51px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
......@@ -267,12 +275,12 @@ h3 {
padding: 12px 20px 0;
overflow: hidden;
height: 100%;
ul {
overflow: auto;
height: 330px;
margin: 0;
li {
background: #F6F9FE;
margin: 7px 0 7px 20px;
......@@ -282,11 +290,11 @@ h3 {
font-weight: 500;
font-size: 15px;
cursor: pointer;
label {
color: #453DEA;
margin-right: 15px;
&::before {
content: '';
background: #fff;
......@@ -302,7 +310,7 @@ h3 {
}
}
}
li::before {
content: '';
background: linear-gradient(0deg, #8623FC, #453DEA);
......@@ -316,7 +324,7 @@ h3 {
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
......@@ -326,11 +334,11 @@ h3 {
position: absolute;
top: 20px
}
li:hover {
color: #fff;
background: linear-gradient(-90deg, #8623FC, #453DEA);
label {
color: #fff;
}
......
src/viewsPc/saiC/view.vue 0 → 100644
<template>
<div>
<div class="box">
<div class="mt20" />
<el-card class="mt20 mb20">
<h3 style="text-align: center">{{ language == 0 ? query.name : query.enName }}</h3>
<div class="mt20" />
<el-table :data="rank" stripe>
<el-table-column :label="language==0?'组别':'Group'" align="center" min-width="200">
<template #default="scope">
<div class="text-primary esp">{{ scope.row.zu }}</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'组合':'Couple'" align="center" min-width="200">
<template #default="scope">
<div class="text-primary esp">{{ scope.row.personName }}</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'国家':'Country'" prop="name">
<template #default="scope">
<div>
<span :class="`flag-icon flag-icon-${query.code}`" />
{{ language == 0 ? scope.row.countryName : scope.row.countryNameEn }}
</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'名次':'Rank'" align="center" type="index" width="100">
<template #default="scope">
<span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
<span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
<span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span>
<span v-else>{{ scope.row.mingCi }}</span>
</template>
</el-table-column>
</el-table>
</el-card>
<br>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as match from '@/apiPc/match'
import { useRoute } from 'vue-router'
const route = useRoute()
import { useStorage } from '@vueuse/core/index'
const language = useStorage('language', 0)
const rank = ref([])
const query = ref({
name: ''
})
onMounted(() => {
query.value.name = route.query.name
query.value.code = route.query.code
query.value.enName = route.query.enName
if (query.value.name) getListView()
})
async function getListView() {
const res = await match.medalTableDetail(query.value)
rank.value = res.data || []
}
</script>
<style lang="scss" scoped>
.leftboderTT {
margin: 0 0 20px;
color: var(--el-color-primary);
font-size: 20px;
}
h3 {
background: #F5F0FF;
margin: 0;
padding: 10px 0;
color: var(--el-color-primary);
font-size: 18px;
}
.table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
td, th {
padding: 8px;
font-size: 14px;
}
}
:deep(.table-striped > tbody > tr:nth-of-type(odd)) {
background: #F6F9FE;
}
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 51px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
}
.primaryDate {
color: #fff;
background: linear-gradient(90deg, #8623FC, #453DEA);
}
.date {
margin: 5px auto;
border-radius: 50%;
width: 34px;
height: 34px;
line-height: 34px;
font-weight: bold;
}
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px 0;
overflow: hidden;
height: 100%;
ul {
overflow: auto;
height: 330px;
margin: 0;
li {
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
cursor: pointer;
label {
color: #453DEA;
margin-right: 15px;
&::before {
content: '';
background: #fff;
left: -17px;
top: 0px;
bottom: 0;
margin: auto;
border-radius: 50%;
width: 2px;
height: 2px;
position: absolute;
z-index: 1
}
}
}
li::before {
content: '';
background: linear-gradient(0deg, #8623FC, #453DEA);
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
left: -20px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
}
li:hover {
color: #fff;
background: linear-gradient(-90deg, #8623FC, #453DEA);
label {
color: #fff;
}
}
}
}
.w15 {
width: 15%;
}
</style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!