Skip to content

jijin / 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 302 additions and 43 deletions
src/apiPc/match.js
...@@ -833,3 +833,12 @@ export function editOcr(data) { ...@@ -833,3 +833,12 @@ export function editOcr(data) {
833 }) 833 })
834 } 834 }
835 835
836
837 // 奖牌详情
838 export function medalTableDetail(params) {
839 return request({
840 url: `ztx/note/medalTableDetail`,
841 method: 'get',
842 params
843 })
844 }
......
src/routerPc/en.js
...@@ -237,6 +237,12 @@ export const constantRoutes = [ ...@@ -237,6 +237,12 @@ export const constantRoutes = [
237 component: () => import('@/viewsPc/saiC/index'), 237 component: () => import('@/viewsPc/saiC/index'),
238 name: 'saiC', 238 name: 'saiC',
239 meta: { title: 'COMPETITIONS' } 239 meta: { title: 'COMPETITIONS' }
240 },
241 {
242 path: 'view',
243 component: () => import('@/viewsPc/saiC/view'),
244 name: 'saiCView',
245 meta: { title: 'SAICVIEW' }
240 } 246 }
241 ] 247 ]
242 }, 248 },
......
src/viewsPc/index.vue
...@@ -167,35 +167,28 @@ ...@@ -167,35 +167,28 @@
167 </div> 167 </div>
168 <!--历史排名--> 168 <!--历史排名-->
169 <el-card :body-style="{'padding':'10px 20px 18px'}"> 169 <el-card :body-style="{'padding':'10px 20px 18px'}">
170 <el-table :data="rank" stripe> 170 <el-table :data="rank" height="336" stripe @row-click="handleRowClick">
171 <el-table-column align="center" label="名次" type="index" width="50"> 171 <el-table-column align="center" label="名次" prop="index" width="50" />
172 <template #default="scope">
173 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
174 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
175 <span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span>
176 <span v-else>{{ scope.row.mingCi }}</span>
177 </template>
178 </el-table-column>
179 172
180 <el-table-column label="国家" prop="name"> 173 <el-table-column label="国家" prop="name">
181 <template #default="scope"> 174 <template #default="scope">
182 <div> 175 <div>
183 <span :class="`flag-icon flag-icon-${scope.row.code}`" /> 176 <span :class="`flag-icon flag-icon-${scope.row.code}`" />
184 {{ scope.row.countryName }} 177 {{ language == 0 ? scope.row.name : scope.row.countryNameEn }}
185 </div> 178 </div>
186 </template> 179 </template>
187 </el-table-column> 180 </el-table-column>
188 <el-table-column align="center" label="组合"> 181 <!-- <el-table-column align="center" label="组合">-->
189 <template #default="scope"> 182 <!-- <template #default="scope">-->
190 <div class="text-primary esp">{{ scope.row.zuHe }}</div> 183 <!-- <div class="text-primary esp">{{ scope.row.zuHe }}</div>-->
191 </template> 184 <!-- </template>-->
192 </el-table-column> 185 <!-- </el-table-column>-->
193 <el-table-column width="60"> 186 <el-table-column width="60">
194 <template #header> 187 <template #header>
195 <img class="mauto" src="@/assets/dance/1.png"> 188 <img class="mauto" src="@/assets/dance/1.png">
196 </template> 189 </template>
197 <template #default="scope"> 190 <template #default="scope">
198 <div class="text-warning text-center">{{ scope.row.jin }}</div> 191 <div class="text-warning text-center">{{ scope.row.gold }}</div>
199 </template> 192 </template>
200 </el-table-column> 193 </el-table-column>
201 <el-table-column width="60"> 194 <el-table-column width="60">
...@@ -203,7 +196,7 @@ ...@@ -203,7 +196,7 @@
203 <img class="mauto" src="@/assets/dance/2.png"> 196 <img class="mauto" src="@/assets/dance/2.png">
204 </template> 197 </template>
205 <template #default="scope"> 198 <template #default="scope">
206 <div class="text-blue text-center">{{ scope.row.yin }}</div> 199 <div class="text-blue text-center">{{ scope.row.silver }}</div>
207 </template> 200 </template>
208 </el-table-column> 201 </el-table-column>
209 <el-table-column width="60"> 202 <el-table-column width="60">
...@@ -211,7 +204,7 @@ ...@@ -211,7 +204,7 @@
211 <img class="mauto" src="@/assets/dance/3.png"> 204 <img class="mauto" src="@/assets/dance/3.png">
212 </template> 205 </template>
213 <template #default="scope"> 206 <template #default="scope">
214 <div class="text-primary text-center">{{ scope.row.tong }}</div> 207 <div class="text-primary text-center">{{ scope.row.bronze }}</div>
215 </template> 208 </template>
216 </el-table-column> 209 </el-table-column>
217 </el-table> 210 </el-table>
...@@ -482,12 +475,25 @@ onMounted(() => { ...@@ -482,12 +475,25 @@ onMounted(() => {
482 init() 475 init()
483 }) 476 })
484 477
478 function handleRowClick(row) {
479 console.log(row)
480 router.push({
481 path: '/saiC/view',
482 query: {
483 name: row.name,
484 code: row.code,
485 enName: row.enName
486 }
487 })
488 }
489
485 const init = () => { 490 const init = () => {
486 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 491 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
487 time.value = dayjs('2025-07-17 07:00:00').diff(today, 'millisecond') 492 time.value = dayjs('2025-07-17 07:00:00').diff(today, 'millisecond')
488 etime.value = dayjs('2025-07-22 12:00:00').diff(today, 'millisecond') 493 etime.value = dayjs('2025-07-22 12:00:00').diff(today, 'millisecond')
489 getRank().then(res => { 494 getRank().then(res => {
490 rank.value = res.data.slice(0, 6) 495 rank.value = res.data
496 console.log(rank.value)
491 }) 497 })
492 getNewsListById({ 498 getNewsListById({
493 pageSize: time.value > 0 ? 3 : 4, 499 pageSize: time.value > 0 ? 3 : 4,
......
src/viewsPc/saiC/index.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="box"> 3 <div class="box">
4
5 <div class="mt20" /> 4 <div class="mt20" />
6 <el-card> 5 <el-card>
7 <el-row :gutter="20"> 6 <el-row :gutter="20">
8 <el-col :lg="12" :sm="24"> 7 <el-col :lg="12" :sm="24">
9 <!--赛事日历--> 8 <!--赛事日历-->
10
11 <el-calendar v-model="currentDate"> 9 <el-calendar v-model="currentDate">
12 <template #date-cell="data"> 10 <template #date-cell="data">
13
14 <div 11 <div
15 :class="data.data.day==query.currentDate?'primaryDate':''" class="date" 12 :class="data.data.day==query.currentDate?'primaryDate':''" class="date"
16 @click="selectDate(data.data.day)" 13 @click="selectDate(data.data.day)"
17 > 14 >
18 {{ data.data.day.slice(8, 10) }} 15 {{ data.data.day.slice(8, 10) }}
19 </div> 16 </div>
20
21 </template> 17 </template>
22 </el-calendar> 18 </el-calendar>
23 19
...@@ -25,7 +21,7 @@ ...@@ -25,7 +21,7 @@
25 <el-col :lg="12" :sm="24"> 21 <el-col :lg="12" :sm="24">
26 <div class="calendarList"> 22 <div class="calendarList">
27 <ul v-loading="loading"> 23 <ul v-loading="loading">
28 <li v-for="n in schList" @click="goMatch(n)"> 24 <li v-for="n in schList" :key="n" @click="goMatch(n)">
29 <label>{{ n.timeStr }}</label> 25 <label>{{ n.timeStr }}</label>
30 <div class="esp mt5">{{ n.name }}</div> 26 <div class="esp mt5">{{ n.name }}</div>
31 </li> 27 </li>
...@@ -37,13 +33,13 @@ ...@@ -37,13 +33,13 @@
37 </el-row> 33 </el-row>
38 </el-card> 34 </el-card>
39 <el-card class="mt20 mb20"> 35 <el-card class="mt20 mb20">
40 <el-table :data="rank" stripe> 36 <el-table :data="rank" stripe @row-click="handleRowClick">
41 <el-table-column align="center" :label="language==0?'名次':'Rank'" type="index" width="100"> 37 <el-table-column :label="language==0?'名次':'Rank'" align="center" type="index" width="100">
42 <template #default="scope"> 38 <template #default="scope">
43 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span> 39 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.index }}</span>
44 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span> 40 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.index }}</span>
45 <span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span> 41 <span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.index }}</span>
46 <span v-else>{{ scope.row.mingCi }}</span> 42 <span v-else>{{ scope.row.index }}</span>
47 </template> 43 </template>
48 </el-table-column> 44 </el-table-column>
49 45
...@@ -51,21 +47,21 @@ ...@@ -51,21 +47,21 @@
51 <template #default="scope"> 47 <template #default="scope">
52 <div> 48 <div>
53 <span :class="`flag-icon flag-icon-${scope.row.code}`" /> 49 <span :class="`flag-icon flag-icon-${scope.row.code}`" />
54 {{ language==0?scope.row.countryName :scope.row.countryShortName }} 50 {{ language == 0 ? scope.row.name : scope.row.enName }}
55 </div> 51 </div>
56 </template> 52 </template>
57 </el-table-column> 53 </el-table-column>
58 <el-table-column align="center" :label="language==0?'组合':'Couple'" min-width="200"> 54 <!-- <el-table-column align="center" :label="language==0?'组合':'Couple'" min-width="200">-->
59 <template #default="scope"> 55 <!-- <template #default="scope">-->
60 <div class="text-primary esp">{{ scope.row.zuHe }}</div> 56 <!-- <div class="text-primary esp">{{ scope.row.zuHe }}</div>-->
61 </template> 57 <!-- </template>-->
62 </el-table-column> 58 <!-- </el-table-column>-->
63 <el-table-column min-width="60"> 59 <el-table-column min-width="60">
64 <template #header> 60 <template #header>
65 <img class="mauto" src="@/assets/dance/1.png"> 61 <img class="mauto" src="@/assets/dance/1.png">
66 </template> 62 </template>
67 <template #default="scope"> 63 <template #default="scope">
68 <div class="text-warning text-center">{{ scope.row.jin }}</div> 64 <div class="text-warning text-center">{{ scope.row.gold }}</div>
69 </template> 65 </template>
70 </el-table-column> 66 </el-table-column>
71 <el-table-column min-width="60"> 67 <el-table-column min-width="60">
...@@ -73,7 +69,7 @@ ...@@ -73,7 +69,7 @@
73 <img class="mauto" src="@/assets/dance/2.png"> 69 <img class="mauto" src="@/assets/dance/2.png">
74 </template> 70 </template>
75 <template #default="scope"> 71 <template #default="scope">
76 <div class="text-blue text-center">{{ scope.row.yin }}</div> 72 <div class="text-blue text-center">{{ scope.row.silver }}</div>
77 </template> 73 </template>
78 </el-table-column> 74 </el-table-column>
79 <el-table-column min-width="60"> 75 <el-table-column min-width="60">
...@@ -81,15 +77,15 @@ ...@@ -81,15 +77,15 @@
81 <img class="mauto" src="@/assets/dance/3.png"> 77 <img class="mauto" src="@/assets/dance/3.png">
82 </template> 78 </template>
83 <template #default="scope"> 79 <template #default="scope">
84 <div class="text-primary text-center">{{ scope.row.tong }}</div> 80 <div class="text-primary text-center">{{ scope.row.bronze }}</div>
85 </template> 81 </template>
86 </el-table-column> 82 </el-table-column>
87 </el-table> 83 </el-table>
88 84
89 </el-card> 85 </el-card>
90 <el-card v-for="(n,index) in cjList" class="mt20 mb20" hidden> 86 <el-card v-for="(n,index) in cjList" :key="index" class="mt20 mb20" hidden>
91 <div class="leftboderTT">{{ language == 0 ? n.title : n.en_title }}</div> 87 <div class="leftboderTT">{{ language == 0 ? n.title : n.en_title }}</div>
92 <div v-for="(m,jndex) in n.list"> 88 <div v-for="(m,jndex) in n.list" :key="jndex">
93 <h3 class="text-center">{{ m.title }}</h3> 89 <h3 class="text-center">{{ m.title }}</h3>
94 <div class="tablebody"> 90 <div class="tablebody">
95 <table class="table table-striped"> 91 <table class="table table-striped">
...@@ -104,7 +100,7 @@ ...@@ -104,7 +100,7 @@
104 </tr> 100 </tr>
105 </thead> 101 </thead>
106 <tbody> 102 <tbody>
107 <tr v-for="(l,kndex) in m.rows"> 103 <tr v-for="(l,kndex) in m.rows" :key="kndex">
108 <td class="text-center">{{ l.RANK }}</td> 104 <td class="text-center">{{ l.RANK }}</td>
109 <td class="text-center">{{ l.COUPLE }}</td> 105 <td class="text-center">{{ l.COUPLE }}</td>
110 <td class="text-center">{{ l.COUNTRY }}</td> 106 <td class="text-center">{{ l.COUNTRY }}</td>
...@@ -118,7 +114,8 @@ ...@@ -118,7 +114,8 @@
118 </div> 114 </div>
119 115
120 </el-card> 116 </el-card>
121 <br><br> 117 <br>
118 <br>
122 </div> 119 </div>
123 </div> 120 </div>
124 </template> 121 </template>
...@@ -175,6 +172,17 @@ function selectDate(date) { ...@@ -175,6 +172,17 @@ function selectDate(date) {
175 getScheduleList() 172 getScheduleList()
176 } 173 }
177 174
175 function handleRowClick(row) {
176 router.push({
177 path: '/saiC/view',
178 query: {
179 name: row.name,
180 code: row.code,
181 enName: row.enName
182 }
183 })
184 }
185
178 function goMatch(n) { 186 function goMatch(n) {
179 router.push({ 187 router.push({
180 name: 'matchDetail', 188 name: 'matchDetail',
......
src/viewsPc/saiC/view.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <div class="mt20" />
5 <el-card class="mt20 mb20">
6
7 <h3 style="text-align: center">{{ language == 0 ? query.name : query.enName }}</h3>
8 <div class="mt20" />
9 <el-table :data="rank" stripe>
10 <el-table-column :label="language==0?'组别':'Group'" align="center" min-width="200">
11 <template #default="scope">
12 <div class="text-primary esp">{{ scope.row.zu }}</div>
13 </template>
14 </el-table-column>
15 <el-table-column :label="language==0?'组合':'Couple'" align="center" min-width="200">
16 <template #default="scope">
17 <div class="text-primary esp">{{ scope.row.personName }}</div>
18 </template>
19 </el-table-column>
20 <el-table-column :label="language==0?'国家':'Country'" prop="name">
21 <template #default="scope">
22 <div>
23 <span :class="`flag-icon flag-icon-${query.code}`" />
24 {{ language == 0 ? scope.row.countryName : scope.row.countryNameEn }}
25 </div>
26 </template>
27 </el-table-column>
28
29 <el-table-column :label="language==0?'名次':'Rank'" align="center" type="index" width="100">
30 <template #default="scope">
31 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
32 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
33 <span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span>
34 <span v-else>{{ scope.row.mingCi }}</span>
35 </template>
36 </el-table-column>
37
38
39 </el-table>
40
41 </el-card>
42
43 <br>
44 </div>
45 </div>
46 </template>
47
48 <script setup>
49 import { onMounted, ref } from 'vue'
50 import * as match from '@/apiPc/match'
51 import { useRoute } from 'vue-router'
52
53 const route = useRoute()
54 import { useStorage } from '@vueuse/core/index'
55
56 const language = useStorage('language', 0)
57 const rank = ref([])
58 const query = ref({
59 name: ''
60 })
61
62 onMounted(() => {
63 query.value.name = route.query.name
64 query.value.code = route.query.code
65 query.value.enName = route.query.enName
66 if (query.value.name) getListView()
67 })
68
69 async function getListView() {
70 const res = await match.medalTableDetail(query.value)
71 rank.value = res.data || []
72 }
73
74
75 </script>
76
77 <style lang="scss" scoped>
78 .leftboderTT {
79 margin: 0 0 20px;
80 color: var(--el-color-primary);
81 font-size: 20px;
82 }
83
84 h3 {
85 background: #F5F0FF;
86 margin: 0;
87 padding: 10px 0;
88 color: var(--el-color-primary);
89 font-size: 18px;
90 }
91
92 .table {
93 border-spacing: 0;
94 border-collapse: collapse;
95 width: 100%;
96 max-width: 100%;
97 margin-bottom: 20px;
98
99 td, th {
100 padding: 8px;
101 font-size: 14px;
102 }
103 }
104
105 :deep(.table-striped > tbody > tr:nth-of-type(odd)) {
106 background: #F6F9FE;
107 }
108
109 .el-calendar {
110 --el-calendar-border: none;
111 --el-calendar-cell-width: 51px;
112 text-align: center;
113 --el-text-color-regular: #8E8D94;
114
115 :deep(.el-calendar__header) {
116 justify-content: center;
117 }
118
119 :deep(.el-calendar__body) {
120 border: 1px solid #F0F0F0;
121 padding: 0
122 }
123
124 :deep(.el-calendar-table .el-calendar-day) {
125 padding: 1px;
126 }
127
128 :deep(.el-calendar-table td.is-selected) {
129 background: transparent;
130 }
131
132 :deep(.el-calendar__button-group) {
133 display: none;
134 }
135 }
136
137 .primaryDate {
138 color: #fff;
139 background: linear-gradient(90deg, #8623FC, #453DEA);
140 }
141
142 .date {
143 margin: 5px auto;
144 border-radius: 50%;
145 width: 34px;
146 height: 34px;
147 line-height: 34px;
148 font-weight: bold;
149 }
150
151 .calendarList {
152 border: 1px solid #F0F0F0;
153 padding: 12px 20px 0;
154 overflow: hidden;
155 height: 100%;
156
157 ul {
158 overflow: auto;
159 height: 330px;
160 margin: 0;
161
162 li {
163 background: #F6F9FE;
164 margin: 7px 0 7px 20px;
165 position: relative;
166 padding: 13px;
167 border-radius: 10px;
168 font-weight: 500;
169 font-size: 15px;
170 cursor: pointer;
171
172 label {
173 color: #453DEA;
174 margin-right: 15px;
175
176 &::before {
177 content: '';
178 background: #fff;
179 left: -17px;
180 top: 0px;
181 bottom: 0;
182 margin: auto;
183 border-radius: 50%;
184 width: 2px;
185 height: 2px;
186 position: absolute;
187 z-index: 1
188 }
189 }
190 }
191
192 li::before {
193 content: '';
194 background: linear-gradient(0deg, #8623FC, #453DEA);
195 border-radius: 50%;
196 width: 8px;
197 height: 8px;
198 position: absolute;
199 left: -20px;
200 top: 0;
201 bottom: 0;
202 margin: auto;
203 z-index: 1;
204 }
205
206 li::after {
207 content: '';
208 left: -16px;
209 width: 1px;
210 height: 100%;
211 background: #EBEBEB;
212 position: absolute;
213 top: 20px
214 }
215
216 li:hover {
217 color: #fff;
218 background: linear-gradient(-90deg, #8623FC, #453DEA);
219
220 label {
221 color: #fff;
222 }
223 }
224 }
225 }
226
227 .w15 {
228 width: 15%;
229 }
230 </style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!