Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
6692d073 by zhangmeng
Options

2024改成2025

1 parent b1908dcf
Inline Side-by-side
Showing 7 changed files with 1339 additions and 675 deletions
src/viewsPc/booking/ticket/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div> 2 <div>
3 <!-- top --> 3 <!-- top -->
4 <div class="container top"> 4 <div class="container top">
5 <img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img"/> 5 <img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img">
6 <div class="info"> 6 <div class="info">
7 <div class="title">{{ matchForm.name }}</div> 7 <div class="title">{{ matchForm.name }}</div>
8 <div class="time"> 8 <div class="time">
...@@ -67,8 +67,10 @@ ...@@ -67,8 +67,10 @@
67 {{ triggerLanguage(language, "票档", "Tickets") }} : 67 {{ triggerLanguage(language, "票档", "Tickets") }} :
68 </div> 68 </div>
69 <div v-if="matchForm.ticketLayout"> 69 <div v-if="matchForm.ticketLayout">
70 <span style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px" 70 <span
71 @click="show=true"> <span style="color: red;font-size: 18px">*</span> 71 style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
72 @click="show=true"
73 > <span style="color: red;font-size: 18px">*</span>
72 {{ 74 {{
73 language == 0 ? '点击查看场馆布局' : 'View Venue Layout' 75 language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
74 }} 76 }}
...@@ -141,8 +143,10 @@ ...@@ -141,8 +143,10 @@
141 </div> 143 </div>
142 </div> 144 </div>
143 145
144 <div v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px" 146 <div
145 @click="toSelectClosed"> 147 v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
148 @click="toSelectClosed"
149 >
146 {{ 150 {{
147 triggerLanguage(language, "售票结束", "Sale closed") 151 triggerLanguage(language, "售票结束", "Sale closed")
148 }} 152 }}
...@@ -163,8 +167,8 @@ ...@@ -163,8 +167,8 @@
163 <div :class="{'bg':active==1}" class="buBg" @click="active=1">购票说明</div> 167 <div :class="{'bg':active==1}" class="buBg" @click="active=1">购票说明</div>
164 <div :class="{'bg' :active==2}" class="buBg" @click="active=2">购票须知</div> 168 <div :class="{'bg' :active==2}" class="buBg" @click="active=2">购票须知</div>
165 </div> 169 </div>
166 <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes"/> 170 <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" />
167 <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice"/> 171 <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" />
168 172
169 <el-dialog v-model="show" title="" width="1000px"> 173 <el-dialog v-model="show" title="" width="1000px">
170 <div> 174 <div>
...@@ -177,30 +181,30 @@ ...@@ -177,30 +181,30 @@
177 181
178 182
179 <script setup> 183 <script setup>
180 import {ref, computed} from "vue"; 184 import { ref, computed } from 'vue'
181 import {listApi, getTicketInfoByActivityId, getTicketListApi, checkNonPayment} from '@/apiPc/booking' 185 import { listApi, getTicketInfoByActivityId, getTicketListApi, checkNonPayment } from '@/apiPc/booking'
182 186
183 import {dayjs} from "element-plus"; 187 import { dayjs } from 'element-plus'
184 import {ElMessageBox, ElMessage} from "element-plus"; 188 import { ElMessageBox, ElMessage } from 'element-plus'
185 import {languageFormat, getDayName} from "@/viewsPc/seat/utils/language"; 189 import { languageFormat, getDayName } from '@/viewsPc/seat/utils/language'
186 import {fillImgUrl} from "/@/utils/ruoyi"; 190 import { fillImgUrl } from '/@/utils/ruoyi'
187 import useUserStore from "/@/store/modules/user"; 191 import useUserStore from '/@/store/modules/user'
188 import {triggerLanguage} from '@/utils/ruoyi' 192 import { triggerLanguage } from '@/utils/ruoyi'
189 import {useStorage} from "@vueuse/core/index"; 193 import { useStorage } from '@vueuse/core/index'
190 194
191 const language = useStorage('language', 0) 195 const language = useStorage('language', 0)
192 const useStore = useUserStore() 196 const useStore = useUserStore()
193 const user = computed(() => useUserStore().user) 197 const user = computed(() => useUserStore().user)
194 const route = useRoute(); 198 const route = useRoute()
195 const router = useRouter(); 199 const router = useRouter()
196 const show = ref(false) 200 const show = ref(false)
197 const activeId = ref(route.params.activeId) 201 const activeId = ref(route.params.activeId)
198 const flag = ref(false) 202 const flag = ref(false)
199 const active = ref(1) 203 const active = ref(1)
200 const countDown = ref(false) 204 const countDown = ref(false)
201 const props = defineProps({ 205 const props = defineProps({
202 activityId: [String, Number], 206 activityId: [String, Number]
203 }); 207 })
204 const timeData = ref() 208 const timeData = ref()
205 const endTime = ref() 209 const endTime = ref()
206 const matchForm = ref({}) 210 const matchForm = ref({})
...@@ -209,7 +213,7 @@ const selectForm = ref({ ...@@ -209,7 +213,7 @@ const selectForm = ref({
209 latId: null, 213 latId: null,
210 id: null, 214 id: null,
211 price: '--', 215 price: '--',
212 priceEn: '--', 216 priceEn: '--'
213 }) 217 })
214 const tickList = ref([]) 218 const tickList = ref([])
215 219
...@@ -217,14 +221,14 @@ const tickList = ref([]) ...@@ -217,14 +221,14 @@ const tickList = ref([])
217 getDetail() 221 getDetail()
218 222
219 async function getDetail() { 223 async function getDetail() {
220 const res = await getTicketInfoByActivityId({activityId: activeId.value}) 224 const res = await getTicketInfoByActivityId({ activityId: activeId.value })
221 matchForm.value = res.data 225 matchForm.value = res.data
222 console.log(res) 226 console.log(res)
223 const today = dayjs().format('YYYY-MM-DD HH:mm:ss') 227 const today = dayjs().format('YYYY-MM-DD HH:mm:ss')
224 timeData.value = dayjs(res.data.ticketStart).diff(today, 'millisecond') 228 timeData.value = dayjs(res.data.ticketStart).diff(today, 'millisecond')
225 endTime.value = dayjs(res.data.ticketEnd).diff(today, 'millisecond') 229 endTime.value = dayjs(res.data.ticketEnd).diff(today, 'millisecond')
226 // if (timeData.value <= nowData.value) countDown.value = true 230 // if (timeData.value <= nowData.value) countDown.value = true
227 // timeData.value = dayjs('2024-08-10 00:00:00').diff(today, 'millisecond') 231 // timeData.value = dayjs('2025-08-10 00:00:00').diff(today, 'millisecond')
228 } 232 }
229 233
230 // 根据赛事ID获取票档 234 // 根据赛事ID获取票档
...@@ -243,8 +247,8 @@ async function getTicketList() { ...@@ -243,8 +247,8 @@ async function getTicketList() {
243 247
244 // 根据票档获取场次 248 // 根据票档获取场次
245 async function getTicketListType() { 249 async function getTicketListType() {
246 let arr = [] 250 const arr = []
247 const res = await listApi({latId: selectForm.value.latId}) 251 const res = await listApi({ latId: selectForm.value.latId })
248 tickList.value = res.rows 252 tickList.value = res.rows
249 for (const v of res.rows) { 253 for (const v of res.rows) {
250 if (v.isView == 0) arr.push(v) 254 if (v.isView == 0) arr.push(v)
...@@ -277,8 +281,8 @@ function selectTick(v) { ...@@ -277,8 +281,8 @@ function selectTick(v) {
277 } 281 }
278 282
279 function toSelectSeat() { 283 function toSelectSeat() {
280 if (!selectForm.value.latId) return ElMessage.error(language.value == 0 ? "请选择票档" : 'Please select a ticket file') 284 if (!selectForm.value.latId) return ElMessage.error(language.value == 0 ? '请选择票档' : 'Please select a ticket file')
281 if (!selectForm.value.id) return ElMessage.error(language.value == 0 ? "请选择时间" : 'Please select time') 285 if (!selectForm.value.id) return ElMessage.error(language.value == 0 ? '请选择时间' : 'Please select time')
282 if (!user.value) { 286 if (!user.value) {
283 useStore.setVisitor() 287 useStore.setVisitor()
284 return 288 return
...@@ -296,10 +300,7 @@ function toSelectSeat() { ...@@ -296,10 +300,7 @@ function toSelectSeat() {
296 } else { 300 } else {
297 router.push('/center/myReservation') 301 router.push('/center/myReservation')
298 } 302 }
299
300 }) 303 })
301
302
303 } 304 }
304 305
305 function toSelectClosed() { 306 function toSelectClosed() {
......
src/viewsPc/components/homeCalendar.vue
...@@ -15,42 +15,48 @@ ...@@ -15,42 +15,48 @@
15 <div class="esp mt5">{{ n.name }}</div> 15 <div class="esp mt5">{{ n.name }}</div>
16 </li> 16 </li>
17 </ul> 17 </ul>
18 <el-empty v-if="schList.length== 0" 18 <el-empty
19 style="--el-empty-padding:0;--el-empty-description-margin-top:0" 19 v-if="schList.length== 0"
20 :image="`/img/order_no.png`" :image-size="200"/> 20 :image="`/img/order_no.png`"
21 :image-size="200" style="--el-empty-padding:0;--el-empty-description-margin-top:0"
22 />
21 </div> 23 </div>
22 </div> 24 </div>
23 </template> 25 </template>
24 26
25 <script setup> 27 <script setup>
26 import {ref} from "vue"; 28 import { ref } from 'vue'
27 import {dayjs} from "element-plus"; 29 import { dayjs } from 'element-plus'
28 import {getIndexScheduleList} from "@/apiPc/common"; 30 import { getIndexScheduleList } from '@/apiPc/common'
29 import {useRouter} from "vue-router"; 31 import { useRouter } from 'vue-router'
32
30 const router = useRouter() 33 const router = useRouter()
31 const currentDate = ref(new Date()) 34 const currentDate = ref(new Date())
32 const calendarRange = ref([dayjs('2024-07-17').toDate(), dayjs('2024-07-17').toDate()]) 35 const calendarRange = ref([dayjs('2025-07-17').toDate(), dayjs('2025-07-17').toDate()])
33 const schList = ref([]) 36 const schList = ref([])
34 const loading = ref(false) 37 const loading = ref(false)
35 const query = ref({ 38 const query = ref({
36 // currentDate:dayjs().format('YYYY-MM-DD') 39 // currentDate:dayjs().format('YYYY-MM-DD')
37 currentDate: '2024-07-17' 40 currentDate: '2025-07-17'
38 }) 41 })
39 getScheduleList() 42 getScheduleList()
43
40 function getScheduleList() { 44 function getScheduleList() {
41 loading.value = true 45 loading.value = true
42 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD') 46 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
43 getIndexScheduleList(query.value).then(res=>{ 47 getIndexScheduleList(query.value).then(res => {
44 loading.value = false 48 loading.value = false
45 schList.value = res.data 49 schList.value = res.data
46 }) 50 })
47 } 51 }
52
48 function selectDate(date) { 53 function selectDate(date) {
49 console.log(dayjs(date).toDate()) 54 console.log(dayjs(date).toDate())
50 console.log(query.value.currentDate) 55 console.log(query.value.currentDate)
51 query.value.currentDate = dayjs(date).toDate() 56 query.value.currentDate = dayjs(date).toDate()
52 getScheduleList() 57 getScheduleList()
53 } 58 }
59
54 function goMatch(n) { 60 function goMatch(n) {
55 router.push({ 61 router.push({
56 name: 'matchDetail', 62 name: 'matchDetail',
...@@ -64,7 +70,7 @@ function goMatch(n) { ...@@ -64,7 +70,7 @@ function goMatch(n) {
64 } 70 }
65 </script> 71 </script>
66 72
67 <style scoped lang="scss"> 73 <style lang="scss" scoped>
68 .el-calendar { 74 .el-calendar {
69 --el-calendar-border: none; 75 --el-calendar-border: none;
70 --el-calendar-cell-width: 40px; 76 --el-calendar-cell-width: 40px;
...@@ -119,7 +125,8 @@ function goMatch(n) { ...@@ -119,7 +125,8 @@ function goMatch(n) {
119 height: 225px; 125 height: 225px;
120 126
121 ul { 127 ul {
122 li {cursor: pointer; 128 li {
129 cursor: pointer;
123 background: #F6F9FE; 130 background: #F6F9FE;
124 margin: 7px 0 7px 20px; 131 margin: 7px 0 7px 20px;
125 position: relative; 132 position: relative;
......
src/viewsPc/components/masterClass.vue
1 <template> 1 <template>
2 <el-dialog 2 <el-dialog
3 v-model="show" :title="title" width="600px" append-to-body close-icon="CircleClose" center 3 v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
4 :close-on-click-modal="false" class="pcloginpop" 4 class="pcloginpop"
5 destroy-on-close 5 close-icon="CircleClose" destroy-on-close
6 width="600px"
6 > 7 >
7 <div class="boxInvitation pd20"> 8 <div class="boxInvitation pd20">
8 <el-steps :active="activeStep" align-center class="mb20"> 9 <el-steps :active="activeStep" align-center class="mb20">
9 <el-step :title="language==0?'报名须知':'Notice'"/> 10 <el-step :title="language==0?'报名须知':'Notice'" />
10 <el-step :title="language==0?'填写信息':'Information'"/> 11 <el-step :title="language==0?'填写信息':'Information'" />
11 <el-step :title="language==0?'选择课程':'Courses'"/> 12 <el-step :title="language==0?'选择课程':'Courses'" />
12 </el-steps> 13 </el-steps>
13 <div v-if="activeStep==0"> 14 <div v-if="activeStep==0">
14 <div class="mb60 xzRich" style="max-height: 50vh;overflow: auto"> 15 <div class="mb60 xzRich" style="max-height: 50vh;overflow: auto">
15 <div v-if="language==0" style="width: 300px;margin: auto"><br/> 16 <div v-if="language==0" style="width: 300px;margin: auto"><br>
16 培训地点：无锡君来世尊酒店<br/> 17 培训地点：无锡君来世尊酒店<br>
17 详细地址：江苏省 无锡市 滨湖区 和风路111号<br/> 18 详细地址：江苏省 无锡市 滨湖区 和风路111号<br>
18 报到时间：2024年7月14日13:30 -17:00<br/> 19 报到时间：2024年7月14日13:30 -17:00<br>
19 联系人：蒋璐<br/> 20 联系人：蒋璐<br>
20 联系电话：15961580050<br/> 21 联系电话：15961580050<br>
21 报名截止日期:<span style="text-decoration: underline">2024-06-30</span><br/> 22 报名截止日期:<span style="text-decoration: underline">2025-06-30</span><br>
22 </div> 23 </div>
23 <div v-else style="width: 400px;margin: auto;text-transform: capitalize"><br/> 24 <div v-else style="width: 400px;margin: auto;text-transform: capitalize"><br>
24 <!-- The age limit for Youth Session: Born between 1st Jan, 2006 and 31st Dec., 2009.<br/>--> 25 <!-- The age limit for Youth Session: Born between 1st Jan, 2006 and 31st Dec., 2009.<br/>-->
25 <!-- The age limit for Juvenile Session: Born after 1 Jan., 2010.<br/>--> 26 <!-- The age limit for Juvenile Session: Born after 1 Jan., 2010.<br/>-->
26 Training Camp Venue：Worldhotel Grand Juna Wuxi<br/> 27 Training Camp Venue：Worldhotel Grand Juna Wuxi<br>
27 Address：No.111 Hefeng Road, Binhu District, Wuxi, Jiangsu<br/> 28 Address：No.111 Hefeng Road, Binhu District, Wuxi, Jiangsu<br>
28 Check-in：From 13:30 to 17:00 on July 14, 2024.<br/> 29 Check-in：From 13:30 to 17:00 on July 14, 2025.<br>
29 Contact Person：Dean Ding<br/> 30 Contact Person：Dean Ding<br>
30 Tel：+86 19951486130<br/> 31 Tel：+86 19951486130<br>
31 Registration Deadline：<span style="text-decoration: underline">2024-06-30</span><br/> 32 Registration Deadline：<span style="text-decoration: underline">2025-06-30</span><br>
32 </div> 33 </div>
33 </div> 34 </div>
34 <div class="text-center" v-loading="loading"> 35 <div v-loading="loading" class="text-center">
35 <el-button type="primary" v-if="courseList.length>0" class="btn-lineG" round @click="setActive(1)"> 36 <el-button v-if="courseList.length>0" class="btn-lineG" round type="primary" @click="setActive(1)">
36 <span v-if="dayjs().format('YYYY-MM-DD')>'2024-06-30'"> 37 <span v-if="dayjs().format('YYYY-MM-DD')>'2025-06-30'">
37 {{ language == 0 ? '报名已结束' : 'Registration has ended' }} 38 {{ language == 0 ? '报名已结束' : 'Registration has ended' }}
38 </span> 39 </span>
39 <span v-else>{{ language == 0 ? '下一步' : 'NEXT' }}</span> 40 <span v-else>{{ language == 0 ? '下一步' : 'NEXT' }}</span>
40 </el-button> 41 </el-button>
41 <el-button type="primary" class="btn-lineG" round v-else @click="close"> 42 <el-button v-else class="btn-lineG" round type="primary" @click="close">
42 {{ language == 0 ? '暂无可报课程' : 'No courses available for reporting' }} 43 {{ language == 0 ? '暂无可报课程' : 'No courses available for reporting' }}
43 </el-button> 44 </el-button>
44 </div> 45 </div>
45 </div> 46 </div>
46 <div v-if="activeStep==1"> 47 <div v-if="activeStep==1">
47 <el-form :model="form" :rules="rules" ref="iformRef" label-position="right" 48 <el-form
48 :label-width="language==0?'80px':'160px'"> 49 ref="iformRef" :label-width="language==0?'80px':'160px'" :model="form" :rules="rules"
49 <el-form-item :label="language==0?'姓名':'Name'" required prop="name"> 50 label-position="right"
50 <el-input v-model="form.name"/> 51 >
52 <el-form-item :label="language==0?'姓名':'Name'" prop="name" required>
53 <el-input v-model="form.name" />
51 </el-form-item> 54 </el-form-item>
52 <el-form-item :label="language==0?'性别':'Gender'" required prop="gender"> 55 <el-form-item :label="language==0?'性别':'Gender'" prop="gender" required>
53 <el-radio-group v-model="form.gender"> 56 <el-radio-group v-model="form.gender">
54 <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio> 57 <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
55 <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio> 58 <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
56 </el-radio-group> 59 </el-radio-group>
57 </el-form-item> 60 </el-form-item>
58 <el-form-item :label="language==0?'国籍':'Nationality'" required prop="nationality"> 61 <el-form-item :label="language==0?'国籍':'Nationality'" prop="nationality" required>
59 <el-select filterable v-model="form.nationality" style="width: 100%;"> 62 <el-select v-model="form.nationality" filterable style="width: 100%;">
60 <el-option v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName" 63 <el-option
61 :value="item.id"/> 64 v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
65 :value="item.id"
66 />
62 </el-select> 67 </el-select>
63 </el-form-item> 68 </el-form-item>
64 <el-form-item :label="language==0?'出生日期':'Date of Birth'" required prop="birth"> 69 <el-form-item :label="language==0?'出生日期':'Date of Birth'" prop="birth" required>
65 <el-date-picker 70 <el-date-picker
66 v-model="form.birth" 71 v-model="form.birth"
67 style="width: 100%;" placeholder="YYYY-MM-DD" 72 format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
68 type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" 73 style="width: 100%;" type="date" value-format="YYYY-MM-DD"
69 /> 74 />
70 </el-form-item> 75 </el-form-item>
71 <el-form-item :label="language==0?'手机号':'Phone number'" required prop="phone"> 76 <el-form-item :label="language==0?'手机号':'Phone number'" prop="phone" required>
72 <el-input v-model="form.phone"/> 77 <el-input v-model="form.phone" />
73 </el-form-item> 78 </el-form-item>
74 <el-form-item :label="language==0?'邮箱':'Email'" required prop="email"> 79 <el-form-item :label="language==0?'邮箱':'Email'" prop="email" required>
75 <el-input v-model="form.email" type="email"/> 80 <el-input v-model="form.email" type="email" />
76 </el-form-item> 81 </el-form-item>
77 <el-form-item :label="language==0?'证件号':'National license No.'" required prop="passportNo"> 82 <el-form-item :label="language==0?'证件号':'National license No.'" prop="passportNo" required>
78 <el-input v-model="form.passportNo" @blur="checkCard"/> 83 <el-input v-model="form.passportNo" @blur="checkCard" />
79 </el-form-item> 84 </el-form-item>
80 <el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy"> 85 <el-form-item :label="language==0?'有效证件':'Passport Copy'" prop="passportCopy" required>
81 <image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false" 86 <image-upload
82 :button-text="language==0?'上传':'Upload'"/> 87 v-model="form.passportCopy" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
88 :limit="1"
89 />
83 </el-form-item> 90 </el-form-item>
84 <!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">--> 91 <!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">-->
85 <!-- <el-date-picker--> 92 <!-- <el-date-picker-->
...@@ -96,52 +103,58 @@ ...@@ -96,52 +103,58 @@
96 <!-- />--> 103 <!-- />-->
97 <!-- </el-form-item>--> 104 <!-- </el-form-item>-->
98 <el-form-item :label="language==0?'备注':'Remark '"> 105 <el-form-item :label="language==0?'备注':'Remark '">
99 <el-input type="textarea" v-model="form.remark" rows="3"/> 106 <el-input v-model="form.remark" rows="3" type="textarea" />
100 </el-form-item> 107 </el-form-item>
101 108
102 <div class="text-center"> 109 <div class="text-center">
103 <el-button size="large" @click="setActive(0)" round plain type="primary"> 110 <el-button plain round size="large" type="primary" @click="setActive(0)">
104 {{ language == 0 ? '上一步' : 'PREV' }} 111 {{ language == 0 ? '上一步' : 'PREV' }}
105 </el-button> 112 </el-button>
106 <el-button type="primary" size="large" @click="checkApplyCourse(2)" round class="btn-lineG"> 113 <el-button class="btn-lineG" round size="large" type="primary" @click="checkApplyCourse(2)">
107 {{ language == 0 ? '下一步' : 'NEXT' }} 114 {{ language == 0 ? '下一步' : 'NEXT' }}
108 </el-button> 115 </el-button>
109 </div> 116 </div>
110 </el-form> 117 </el-form>
111 </div> 118 </div>
112 <div v-if="activeStep==2"> 119 <div v-if="activeStep==2">
113 <div class="text-center pd20" v-if="showR"> 120 <div v-if="showR" class="text-center pd20">
114 <img class="mauto" src="@/assets/dance/ok.png"/> 121 <img class="mauto" src="@/assets/dance/ok.png">
115 <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2> 122 <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>
116 <h4 class="text-center" v-if="language == 0"> 123 <h4 v-if="language == 0" class="text-center">
117 我们已收到您的申请，请在7月14日到无锡报到。 124 我们已收到您的申请，请在7月14日到无锡报到。
118 </h4> 125 </h4>
119 <h4 v-else> 126 <h4 v-else>
120 Your application has been received, 127 Your application has been received,
121 <br/> 128 <br>
122 Please register in Wuxi on July 14. 129 Please register in Wuxi on July 14.
123 </h4> 130 </h4>
124 </div> 131 </div>
125 <div v-else> 132 <div v-else>
126 <div class="tip text-danger mb20" v-if="language==0">*选择参加的课程（最少一项，最多两项）</div> 133 <div v-if="language==0" class="tip text-danger mb20">*选择参加的课程（最少一项，最多两项）</div>
127 <div class="tip text-danger mb20" v-else>*Select the courses to enroll in (at least one, no more than two) 134 <div v-else class="tip text-danger mb20">*Select the courses to enroll in (at least one, no more than two)
128 </div> 135 </div>
129 <el-checkbox-group size="large" v-model="form.courseId" @change="courseChange"> 136 <el-checkbox-group v-model="form.courseId" size="large" @change="courseChange">
130 <div v-for="c in courseList" class="mb20"> 137 <div v-for="c in courseList" class="mb20">
131 <el-checkbox :value="c.id" border class="w100" 138 <el-checkbox
132 :disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"> 139 :disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)" :value="c.id" border
140 class="w100"
141 >
133 <div v-if="language==0" style="display: flex"> 142 <div v-if="language==0" style="display: flex">
134 <div> {{ c.name }}{{ c.name.indexOf('青年') > -1 ? '(年龄在15岁~18岁)' : '(年龄在14岁以下)' }}</div> 143 <div> {{ c.name }}{{ c.name.indexOf('青年') > -1 ? '(年龄在15岁~18岁)' : '(年龄在14岁以下)' }}</div>
135 </div> 144 </div>
136 <div v-else> 145 <div v-else>
137 <div> 146 <div>
138 {{ c.nameEn }}{{ c.nameEn.indexOf('Youth') > -1 ? '(Between the age 15 and 18)' : '(Under the age of 14)' }} 147 {{
148 c.nameEn
149 }}{{ c.nameEn.indexOf('Youth') > -1 ? '(Between the age 15 and 18)' : '(Under the age of 14)' }}
139 </div> 150 </div>
140 </div> 151 </div>
141 152
142 <el-tag class="ml20" 153 <el-tag
143 v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)" 154 v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"
144 type="danger" effect="dark">{{ language == 0 ? '已报满' : 'Already full' }} 155 class="ml20"
156 effect="dark" type="danger"
157 >{{ language == 0 ? '已报满' : 'Already full' }}
145 </el-tag> 158 </el-tag>
146 </el-checkbox> 159 </el-checkbox>
147 </div> 160 </div>
...@@ -149,10 +162,13 @@ ...@@ -149,10 +162,13 @@
149 162
150 163
151 <div class="text-center"> 164 <div class="text-center">
152 <el-button size="large" @click="setActive(1)" round plain type="primary"> 165 <el-button plain round size="large" type="primary" @click="setActive(1)">
153 {{ language == 0 ? '上一步' : 'PREV' }} 166 {{ language == 0 ? '上一步' : 'PREV' }}
154 </el-button> 167 </el-button>
155 <el-button type="primary" v-if="!disChoose" size="large" @click="submit" round class="btn-lineG w200px"> 168 <el-button
169 v-if="!disChoose" class="btn-lineG w200px" round size="large" type="primary"
170 @click="submit"
171 >
156 {{ language == 0 ? '提交' : 'SUBMIT' }} 172 {{ language == 0 ? '提交' : 'SUBMIT' }}
157 </el-button> 173 </el-button>
158 174
...@@ -166,16 +182,16 @@ ...@@ -166,16 +182,16 @@
166 </template> 182 </template>
167 183
168 <script setup> 184 <script setup>
169 import {useStorage} from "@vueuse/core/index"; 185 import { useStorage } from '@vueuse/core/index'
170 import {getCurrentInstance, watch} from "vue"; 186 import { getCurrentInstance, watch } from 'vue'
171 import {nextTick} from "@vue/runtime-core"; 187 import { nextTick } from '@vue/runtime-core'
172 import {ElMessage, ElMessageBox} from "element-plus"; 188 import { ElMessage, ElMessageBox } from 'element-plus'
173 import {addInvitation, countryList} from "@/apiPc/match"; 189 import { addInvitation, countryList } from '@/apiPc/match'
174 import ImageUpload from "@/components/ImageUpload"; 190 import ImageUpload from '@/components/ImageUpload'
175 import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard} from "@/apiPc/common"; 191 import { masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard } from '@/apiPc/common'
176 import dayjs from "dayjs"; 192 import dayjs from 'dayjs'
177 193
178 const {proxy} = getCurrentInstance() 194 const { proxy } = getCurrentInstance()
179 const language = useStorage('language', 0) 195 const language = useStorage('language', 0)
180 const form = ref({}) 196 const form = ref({})
181 const show = ref(false) 197 const show = ref(false)
...@@ -189,14 +205,14 @@ const loading = ref(false) ...@@ -189,14 +205,14 @@ const loading = ref(false)
189 const cptId = ref('') 205 const cptId = ref('')
190 const rules = ref( 206 const rules = ref(
191 { 207 {
192 nationality: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},], 208 nationality: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
193 name: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},], 209 name: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
194 email: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},], 210 email: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
195 birth: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},], 211 birth: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
196 passportNo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},], 212 passportNo: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
197 passportCopy: [{required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload'},], 213 passportCopy: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload' }],
198 arrival: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},], 214 arrival: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
199 departure: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},], 215 departure: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }]
200 }) 216 })
201 const open = (params) => { 217 const open = (params) => {
202 console.log(params) 218 console.log(params)
...@@ -205,7 +221,7 @@ const open = (params) => { ...@@ -205,7 +221,7 @@ const open = (params) => {
205 cptId.value = params.cptId 221 cptId.value = params.cptId
206 getCourse() 222 getCourse()
207 } 223 }
208 defineExpose({open}) 224 defineExpose({ open })
209 watch(show, (value) => { 225 watch(show, (value) => {
210 if (!value) { 226 if (!value) {
211 form.value = { 227 form.value = {
...@@ -223,14 +239,14 @@ watch(show, (value) => { ...@@ -223,14 +239,14 @@ watch(show, (value) => {
223 function getCourse() { 239 function getCourse() {
224 // '1777256058082189313' 240 // '1777256058082189313'
225 loading.value = true 241 loading.value = true
226 masterClassList({cptId: cptId.value}).then(res => { 242 masterClassList({ cptId: cptId.value }).then(res => {
227 courseList.value = res.data 243 courseList.value = res.data
228 loading.value = false 244 loading.value = false
229 }) 245 })
230 } 246 }
231 247
232 function setActive(n) { 248 function setActive(n) {
233 if(n==1&&dayjs().format('YYYY-MM-DD')>'2024-06-30'){ 249 if (n == 1 && dayjs().format('YYYY-MM-DD') > '2025-06-30') {
234 ElMessage.error(language.value == 0 ? '报名已结束' : 'The application has ended') 250 ElMessage.error(language.value == 0 ? '报名已结束' : 'The application has ended')
235 return 251 return
236 } 252 }
...@@ -242,7 +258,7 @@ function courseChange(e) { ...@@ -242,7 +258,7 @@ function courseChange(e) {
242 } 258 }
243 259
244 function checkApplyCourse(n) { 260 function checkApplyCourse(n) {
245 getMasterApply({card: form.value.passportNo}).then(res => { 261 getMasterApply({ card: form.value.passportNo }).then(res => {
246 if (res.data?.length > 0) { 262 if (res.data?.length > 0) {
247 form.value.courseId = [] 263 form.value.courseId = []
248 for (var n of res.data) { 264 for (var n of res.data) {
...@@ -255,7 +271,7 @@ function checkApplyCourse(n) { ...@@ -255,7 +271,7 @@ function checkApplyCourse(n) {
255 cancelButtonText: language.value == 0 ? '否' : 'Cancel', 271 cancelButtonText: language.value == 0 ? '否' : 'Cancel',
256 type: 'warning' 272 type: 'warning'
257 }).then(() => { 273 }).then(() => {
258 //删除原记录 274 // 删除原记录
259 delByCard(form.value.passportNo).then(res => { 275 delByCard(form.value.passportNo).then(res => {
260 form.value.courseId = [] 276 form.value.courseId = []
261 disChoose.value = false 277 disChoose.value = false
...@@ -269,7 +285,6 @@ function checkApplyCourse(n) { ...@@ -269,7 +285,6 @@ function checkApplyCourse(n) {
269 to2() 285 to2()
270 } 286 }
271 }) 287 })
272
273 } 288 }
274 289
275 function to2() { 290 function to2() {
...@@ -290,7 +305,7 @@ function to2() { ...@@ -290,7 +305,7 @@ function to2() {
290 305
291 306
292 function checkCard() { 307 function checkCard() {
293 getByCard({card: form.value.passportNo}).then(res => { 308 getByCard({ card: form.value.passportNo }).then(res => {
294 if (res.data) { 309 if (res.data) {
295 form.value = res.data 310 form.value = res.data
296 } else { 311 } else {
......
src/viewsPc/components/pickup.vue
1 <template> 1 <template>
2 <el-dialog 2 <el-dialog
3 v-model="show" :close-on-click-modal="false" :title="title" append-to-body center class="pcloginpop" 3 v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
4 class="pcloginpop"
4 close-icon="CircleClose" destroy-on-close 5 close-icon="CircleClose" destroy-on-close
5 width="900px" 6 width="900px"
6 > 7 >
7 <div class="boxInvitation pd20"> 8 <div class="boxInvitation pd20">
8 <div v-if="!showR"> 9 <div v-if="!showR">
9 <el-form ref="iformRef" :label-width="language==0?'120px':'240px'" :model="form" :rules="rules" 10 <el-form
10 label-position="right"> 11 ref="iformRef" :label-width="language==0?'120px':'240px'" :model="form" :rules="rules"
12 label-position="right"
13 >
11 <el-form-item :label="language==0?'服务类型':'Service Type '" prop="type" required style="margin-bottom: 0px"> 14 <el-form-item :label="language==0?'服务类型':'Service Type '" prop="type" required style="margin-bottom: 0px">
12 <el-checkbox-group v-model="form.type"> 15 <el-checkbox-group v-model="form.type">
13 <el-checkbox label="1">{{ language == 0 ? '接机' : 'airport pickup' }}</el-checkbox> 16 <el-checkbox label="1">{{ language == 0 ? '接机' : 'airport pickup' }}</el-checkbox>
...@@ -22,33 +25,38 @@ ...@@ -22,33 +25,38 @@
22 </div> 25 </div>
23 <div v-if="form.type?.some(v=>v==1)"> 26 <div v-if="form.type?.some(v=>v==1)">
24 <h3 class="leftboderTT">{{ language == 0 ? '接机信息' : 'Pick-up information' }}</h3> 27 <h3 class="leftboderTT">{{ language == 0 ? '接机信息' : 'Pick-up information' }}</h3>
25 <el-form-item :label="language==0?'抵达人员身份':'Role of Person-Arrival'" prop="pickUpBo.standing" 28 <el-form-item
26 required> 29 :label="language==0?'抵达人员身份':'Role of Person-Arrival'" prop="pickUpBo.standing"
30 required
31 >
27 <el-checkbox-group v-model="form.pickUpBo.standing"> 32 <el-checkbox-group v-model="form.pickUpBo.standing">
28 <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/> 33 <el-checkbox :label="language==0?'运动员':'Athlete'" name="1" />
29 <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/> 34 <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2" />
30 <el-checkbox :label="language==0?'官员':'Official'" name="3"/> 35 <el-checkbox :label="language==0?'官员':'Official'" name="3" />
31 <el-checkbox :label="language==0?'其他':'Others'" name="4"/> 36 <el-checkbox :label="language==0?'其他':'Others'" name="4" />
32 </el-checkbox-group> 37 </el-checkbox-group>
33 </el-form-item> 38 </el-form-item>
34 <el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="pickUpBo.nationalitys" required> 39 <el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="pickUpBo.nationalitys" required>
35 <el-select v-model="form.pickUpBo.nationalitys" filterable multiple style="width: 100%;"> 40 <el-select v-model="form.pickUpBo.nationalitys" filterable multiple style="width: 100%;">
36 <el-option v-for="item in countrys" 41 <el-option
42 v-for="item in countrys"
37 :key="item.id" 43 :key="item.id"
38 :label="language==0?item.name:item.enName" 44 :label="language==0?item.name:item.enName"
39 :value="language==0?item.name :item.enName"/> 45 :value="language==0?item.name :item.enName"
46 />
40 </el-select> 47 </el-select>
41 </el-form-item> 48 </el-form-item>
42 <el-form-item :label="language==0?'联系人':'Contact Person'" prop="pickUpBo.name" required> 49 <el-form-item :label="language==0?'联系人':'Contact Person'" prop="pickUpBo.name" required>
43 <el-input v-model="form.pickUpBo.name"/> 50 <el-input v-model="form.pickUpBo.name" />
44 </el-form-item> 51 </el-form-item>
45 <el-form-item :label="language==0?'联系电话':'Contact Phone Number'" prop="pickUpBo.phone" required> 52 <el-form-item :label="language==0?'联系电话':'Contact Phone Number'" prop="pickUpBo.phone" required>
46 <el-input v-model="form.pickUpBo.phone"/> 53 <el-input v-model="form.pickUpBo.phone" />
47 </el-form-item> 54 </el-form-item>
48 <el-form-item :label="language==0?'接机人数':'Number of People'" prop="pickUpBo.counts" required> 55 <el-form-item :label="language==0?'接机人数':'Number of People'" prop="pickUpBo.counts" required>
49 <el-input-number v-model="form.pickUpBo.counts"/> 56 <el-input-number v-model="form.pickUpBo.counts" />
50 <span 57 <span
51 style="color: red;margin-left: 10px">{{ 58 style="color: red;margin-left: 10px"
59 >{{
52 language == 0 ? '(填写的人数需是乘坐同一航班/车次)' : 'The number of people to be filled in must be on the same flight/train' 60 language == 0 ? '(填写的人数需是乘坐同一航班/车次)' : 'The number of people to be filled in must be on the same flight/train'
53 }}</span> 61 }}</span>
54 </el-form-item> 62 </el-form-item>
...@@ -56,46 +64,56 @@ ...@@ -56,46 +64,56 @@
56 <!-- {{language==0?'填写的人数需是乘坐同一航班/车次':'The number of people to be filled in must be on the same flight/train'}}--> 64 <!-- {{language==0?'填写的人数需是乘坐同一航班/车次':'The number of people to be filled in must be on the same flight/train'}}-->
57 65
58 <!-- </div>--> 66 <!-- </div>-->
59 <el-form-item :label="language==0?'抵达日期':'Flight/Train Arrival Date'" 67 <el-form-item
68 :label="language==0?'抵达日期':'Flight/Train Arrival Date'"
60 prop="pickUpBo.arrivalDate" 69 prop="pickUpBo.arrivalDate"
61 required> 70 required
71 >
62 <div style="padding: 1px"> 72 <div style="padding: 1px">
63 <el-date-picker 73 <el-date-picker
64 :disabled-date="disabledDateRZ" default-value="'2024-09-27'" 74 v-model="form.pickUpBo.arrivalDate" :disabled-date="disabledDateRZ"
65 v-model="form.pickUpBo.arrivalDate" format="YYYY-MM-DD" 75 default-value="'2025-09-27'" format="YYYY-MM-DD"
66 placeholder="YYYY-MM-DD" 76 placeholder="YYYY-MM-DD"
67 style="width: 100%;" type="date" value-format="YYYY-MM-DD" 77 style="width: 100%;" type="date" value-format="YYYY-MM-DD"
68 /> 78 />
69 </div> 79 </div>
70 </el-form-item> 80 </el-form-item>
71 <el-form-item :label="language==0?'抵达时间':'Flight/Train Arrival Time'" prop="pickUpBo.arrivaTime" 81 <el-form-item
72 required> 82 :label="language==0?'抵达时间':'Flight/Train Arrival Time'" prop="pickUpBo.arrivaTime"
83 required
84 >
73 <!-- <el-date-picker--> 85 <!-- <el-date-picker-->
74 <!-- v-model="form.pickUpBo.arrivaTime"--> 86 <!-- v-model="form.pickUpBo.arrivaTime"-->
75 <!-- format="YYYY-MM-DD" placeholder="YYYY-MM-DD"--> 87 <!-- format="YYYY-MM-DD" placeholder="YYYY-MM-DD"-->
76 <!-- style="width: 100%;" type="date" value-format="YYYY-MM-DD"--> 88 <!-- style="width: 100%;" type="date" value-format="YYYY-MM-DD"-->
77 <!-- />--> 89 <!-- />-->
78 <el-time-picker v-model="form.pickUpBo.arrivaTime" placeholder="HH:mm:ss" value-format="HH:mm:ss" 90 <el-time-picker
79 format="HH:mm:ss" style="width: 100%;"/> 91 v-model="form.pickUpBo.arrivaTime" format="HH:mm:ss" placeholder="HH:mm:ss"
92 style="width: 100%;" value-format="HH:mm:ss"
93 />
80 </el-form-item> 94 </el-form-item>
81 95
82 <el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="pickUpBo.flight" required> 96 <el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="pickUpBo.flight" required>
83 <el-input v-model="form.pickUpBo.flight"/> 97 <el-input v-model="form.pickUpBo.flight" />
84 </el-form-item> 98 </el-form-item>
85 <el-form-item :label="language==0?'机场/火车站':'Airport/Train Station'" prop="pickUpBo.stationName" 99 <el-form-item
86 required> 100 :label="language==0?'机场/火车站':'Airport/Train Station'" prop="pickUpBo.stationName"
87 <el-input v-model="form.pickUpBo.stationName"/> 101 required
102 >
103 <el-input v-model="form.pickUpBo.stationName" />
88 </el-form-item> 104 </el-form-item>
89 <el-form-item :label="language==0?'航站楼':'Air Terminal'" prop="pickUpBo.terminal" required> 105 <el-form-item :label="language==0?'航站楼':'Air Terminal'" prop="pickUpBo.terminal" required>
90 <el-input v-model="form.pickUpBo.terminal"/> 106 <el-input v-model="form.pickUpBo.terminal" />
91 </el-form-item> 107 </el-form-item>
92 <el-form-item :label="language==0?'送达酒店':'Destination Hotel'" prop="pickUpBo.hotle" required> 108 <el-form-item :label="language==0?'送达酒店':'Destination Hotel'" prop="pickUpBo.hotle" required>
93 <el-input v-model="form.pickUpBo.hotle"/> 109 <el-input v-model="form.pickUpBo.hotle" />
94 </el-form-item> 110 </el-form-item>
95 <el-form-item :label="language==0?'行程单':'Round-Trip Itinerary'" prop="pickUpBo.itinerary" required> 111 <el-form-item :label="language==0?'行程单':'Round-Trip Itinerary'" prop="pickUpBo.itinerary" required>
96 <image-upload v-model="form.pickUpBo.itinerary" :button-text="language==0?'上传':'Upload'" 112 <image-upload
113 v-model="form.pickUpBo.itinerary" :button-text="language==0?'上传':'Upload'"
97 :is-show-tip="false" 114 :is-show-tip="false"
98 :limit="1"/> 115 :limit="1"
116 />
99 </el-form-item> 117 </el-form-item>
100 </div> 118 </div>
101 119
...@@ -105,38 +123,42 @@ ...@@ -105,38 +123,42 @@
105 <h3 class="leftboderTT">{{ language == 0 ? '送机信息' : 'Delivery information' }}</h3> 123 <h3 class="leftboderTT">{{ language == 0 ? '送机信息' : 'Delivery information' }}</h3>
106 <el-form-item 124 <el-form-item
107 :label="language==0?'离会人员身份':'Role of Person-Departure'" 125 :label="language==0?'离会人员身份':'Role of Person-Departure'"
108 prop="downOffBo.standing" required> 126 prop="downOffBo.standing" required
127 >
109 <!-- <el-input v-model="form.downOffBo.standing"/>--> 128 <!-- <el-input v-model="form.downOffBo.standing"/>-->
110 <el-checkbox-group v-model="form.downOffBo.standing"> 129 <el-checkbox-group v-model="form.downOffBo.standing">
111 <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/> 130 <el-checkbox :label="language==0?'运动员':'Athlete'" name="1" />
112 <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/> 131 <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2" />
113 <el-checkbox :label="language==0?'官员':'Official'" name="3"/> 132 <el-checkbox :label="language==0?'官员':'Official'" name="3" />
114 <el-checkbox :label="language==0?'其他':'Others'" name="4"/> 133 <el-checkbox :label="language==0?'其他':'Others'" name="4" />
115 </el-checkbox-group> 134 </el-checkbox-group>
116 </el-form-item> 135 </el-form-item>
117 <el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="downOffBo.nationalitys" required> 136 <el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="downOffBo.nationalitys" required>
118 <el-select v-model="form.downOffBo.nationalitys" filterable multiple style="width: 100%;"> 137 <el-select v-model="form.downOffBo.nationalitys" filterable multiple style="width: 100%;">
119 <el-option v-for="item in countrys" 138 <el-option
139 v-for="item in countrys"
120 :key="item.id" 140 :key="item.id"
121 :label="language==0?item.name:item.enName" 141 :label="language==0?item.name:item.enName"
122 :value="language==0?item.name:item.enName"/> 142 :value="language==0?item.name:item.enName"
143 />
123 </el-select> 144 </el-select>
124 </el-form-item> 145 </el-form-item>
125 <el-form-item :label="language==0?'联系人':'Contact Person'" prop="downOffBo.name" required> 146 <el-form-item :label="language==0?'联系人':'Contact Person'" prop="downOffBo.name" required>
126 <el-input v-model="form.downOffBo.name"/> 147 <el-input v-model="form.downOffBo.name" />
127 </el-form-item> 148 </el-form-item>
128 <el-form-item :label="language==0?'联系电话':'Contact Phone Number'" prop="downOffBo.phone" required> 149 <el-form-item :label="language==0?'联系电话':'Contact Phone Number'" prop="downOffBo.phone" required>
129 <el-input v-model="form.downOffBo.phone"/> 150 <el-input v-model="form.downOffBo.phone" />
130 </el-form-item> 151 </el-form-item>
131 <!-- todo 增加邮箱字段，登记成功后发送邮件通知--> 152 <!-- todo 增加邮箱字段，登记成功后发送邮件通知-->
132 <el-form-item :label="language==0?'联系邮箱':'Contact Email'" prop="downOffBo.email" required> 153 <el-form-item :label="language==0?'联系邮箱':'Contact Email'" prop="downOffBo.email" required>
133 <el-input v-model="form.downOffBo.email"/> 154 <el-input v-model="form.downOffBo.email" />
134 </el-form-item> 155 </el-form-item>
135 <el-form-item :label="language==0?'送机人数':'Number of People'" prop="downOffBo.counts" required> 156 <el-form-item :label="language==0?'送机人数':'Number of People'" prop="downOffBo.counts" required>
136 <el-input-number v-model="form.downOffBo.counts"/> 157 <el-input-number v-model="form.downOffBo.counts" />
137 158
138 <span 159 <span
139 style="color: red;margin-left: 10px">{{ 160 style="color: red;margin-left: 10px"
161 >{{
140 language == 0 ? '(填写的人数需是乘坐同一航班/车次)' : 'The number of people to be filled in must be on the same flight/train' 162 language == 0 ? '(填写的人数需是乘坐同一航班/车次)' : 'The number of people to be filled in must be on the same flight/train'
141 }}</span> 163 }}</span>
142 </el-form-item> 164 </el-form-item>
...@@ -144,46 +166,56 @@ ...@@ -144,46 +166,56 @@
144 <!-- {{language==0?'填写的人数需是乘坐同一航班/车次':'The number of people to be filled in must be on the same flight/train'}}--> 166 <!-- {{language==0?'填写的人数需是乘坐同一航班/车次':'The number of people to be filled in must be on the same flight/train'}}-->
145 167
146 <!-- </div>--> 168 <!-- </div>-->
147 <el-form-item :label="language==0?'离开日期':'Departure Date from Hotel'" prop="downOffBo.arrivalDate" 169 <el-form-item
148 required> 170 :label="language==0?'离开日期':'Departure Date from Hotel'" prop="downOffBo.arrivalDate"
171 required
172 >
149 <div style="padding: 1px"> 173 <div style="padding: 1px">
150 <el-date-picker 174 <el-date-picker
151 v-model="form.downOffBo.arrivalDate" format="YYYY-MM-DD" 175 v-model="form.downOffBo.arrivalDate" :disabled-date="disabledDateDP"
152 placeholder="YYYY-MM-DD" :disabled-date="disabledDateDP" 176 default-value="'2025-09-30'" format="YYYY-MM-DD"
153 default-value="'2024-09-30'" 177 placeholder="YYYY-MM-DD"
154 style="width: 100%;" type="date" value-format="YYYY-MM-DD" 178 style="width: 100%;" type="date" value-format="YYYY-MM-DD"
155 /> 179 />
156 </div> 180 </div>
157 181
158 </el-form-item> 182 </el-form-item>
159 <el-form-item :label="language==0?'离开时间':'Departure Time from Hotel'" prop="downOffBo.arrivaTime" 183 <el-form-item
160 required> 184 :label="language==0?'离开时间':'Departure Time from Hotel'" prop="downOffBo.arrivaTime"
185 required
186 >
161 <!-- <el-date-picker--> 187 <!-- <el-date-picker-->
162 <!-- v-model="form.downOffBo.rrivaTime"--> 188 <!-- v-model="form.downOffBo.rrivaTime"-->
163 <!-- format="YYYY-MM-DD" placeholder="YYYY-MM-DD"--> 189 <!-- format="YYYY-MM-DD" placeholder="YYYY-MM-DD"-->
164 <!-- style="width: 100%;" type="date" value-format="YYYY-MM-DD"--> 190 <!-- style="width: 100%;" type="date" value-format="YYYY-MM-DD"-->
165 <!-- />--> 191 <!-- />-->
166 <el-time-picker v-model="form.downOffBo.arrivaTime" placeholder="HH:mm:ss" value-format="HH:mm:ss" 192 <el-time-picker
167 format="HH:mm:ss" style="width: 100%;"/> 193 v-model="form.downOffBo.arrivaTime" format="HH:mm:ss" placeholder="HH:mm:ss"
194 style="width: 100%;" value-format="HH:mm:ss"
195 />
168 </el-form-item> 196 </el-form-item>
169 197
170 <el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="downOffBo.flight" required> 198 <el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="downOffBo.flight" required>
171 <el-input v-model="form.downOffBo.flight"/> 199 <el-input v-model="form.downOffBo.flight" />
172 </el-form-item> 200 </el-form-item>
173 <el-form-item :label="language==0?'机场/火车站':'Airport/Train Station'" prop="downOffBo.stationName" 201 <el-form-item
174 required> 202 :label="language==0?'机场/火车站':'Airport/Train Station'" prop="downOffBo.stationName"
175 <el-input v-model="form.downOffBo.stationName"/> 203 required
204 >
205 <el-input v-model="form.downOffBo.stationName" />
176 </el-form-item> 206 </el-form-item>
177 <el-form-item :label="language==0?'航站楼':'Air Terminal'" prop="downOffBo.terminal" required> 207 <el-form-item :label="language==0?'航站楼':'Air Terminal'" prop="downOffBo.terminal" required>
178 <el-input v-model="form.downOffBo.terminal"/> 208 <el-input v-model="form.downOffBo.terminal" />
179 </el-form-item> 209 </el-form-item>
180 <el-form-item :label="language==0?'出发酒店':'Departure Hotel'" prop="downOffBo.hotle" required> 210 <el-form-item :label="language==0?'出发酒店':'Departure Hotel'" prop="downOffBo.hotle" required>
181 <el-input v-model="form.downOffBo.hotle"/> 211 <el-input v-model="form.downOffBo.hotle" />
182 </el-form-item> 212 </el-form-item>
183 <el-form-item :label="language==0?'行程单':'Round-Trip Itinerary'" prop="downOffBo.itinerary" required> 213 <el-form-item :label="language==0?'行程单':'Round-Trip Itinerary'" prop="downOffBo.itinerary" required>
184 <image-upload v-model="form.downOffBo.itinerary" :button-text="language==0?'上传':'Upload'" 214 <image-upload
215 v-model="form.downOffBo.itinerary" :button-text="language==0?'上传':'Upload'"
185 :is-show-tip="false" 216 :is-show-tip="false"
186 :limit="1"/> 217 :limit="1"
218 />
187 </el-form-item> 219 </el-form-item>
188 </div> 220 </div>
189 221
...@@ -196,7 +228,7 @@ ...@@ -196,7 +228,7 @@
196 </div> 228 </div>
197 <div> 229 <div>
198 <div v-if="showR" class="text-center pd20"> 230 <div v-if="showR" class="text-center pd20">
199 <img class="mauto" src="@/assets/dance/ok.png"/> 231 <img class="mauto" src="@/assets/dance/ok.png">
200 <h2 class="text-center">{{ 232 <h2 class="text-center">{{
201 language == 0 ? '境外及港澳台接送信息已提交' : 'Request Form for Overseas, HKT, Mau, China and TPE Athletes Arrival and Departure' 233 language == 0 ? '境外及港澳台接送信息已提交' : 'Request Form for Overseas, HKT, Mau, China and TPE Athletes Arrival and Departure'
202 }}</h2> 234 }}</h2>
...@@ -216,22 +248,22 @@ ...@@ -216,22 +248,22 @@
216 </template> 248 </template>
217 249
218 <script setup> 250 <script setup>
219 import {useStorage} from "@vueuse/core/index"; 251 import { useStorage } from '@vueuse/core/index'
220 import {getCurrentInstance, watch, ref} from "vue"; 252 import { getCurrentInstance, watch, ref } from 'vue'
221 import {nextTick} from "@vue/runtime-core"; 253 import { nextTick } from '@vue/runtime-core'
222 import {dayjs, ElMessage, ElMessageBox} from "element-plus"; 254 import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
223 import {addInvitation, countryList} from "@/apiPc/match"; 255 import { addInvitation, countryList } from '@/apiPc/match'
224 import ImageUpload from "@/components/ImageUpload"; 256 import ImageUpload from '@/components/ImageUpload'
225 import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard, addPickup} from "@/apiPc/common"; 257 import { masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard, addPickup } from '@/apiPc/common'
226 258
227 const {proxy} = getCurrentInstance() 259 const { proxy } = getCurrentInstance()
228 const language = useStorage('language', 0) 260 const language = useStorage('language', 0)
229 const form = ref({ 261 const form = ref({
230 pickUpBo: { 262 pickUpBo: {
231 serviceType: 1, 263 serviceType: 1
232 }, 264 },
233 downOffBo: { 265 downOffBo: {
234 serviceType: 2, 266 serviceType: 2
235 }, 267 },
236 type: ['1'] 268 type: ['1']
237 }) 269 })
...@@ -244,123 +276,123 @@ const courseList = ref([]) ...@@ -244,123 +276,123 @@ const courseList = ref([])
244 const cptId = ref('') 276 const cptId = ref('')
245 const rules = ref( 277 const rules = ref(
246 { 278 {
247 type: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},], 279 type: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
248 'pickUpBo.standing': [{ 280 'pickUpBo.standing': [{
249 required: true, 281 required: true,
250 trigger: 'change', 282 trigger: 'change',
251 message: language.value == 0 ? '请选择' : 'Please choose' 283 message: language.value == 0 ? '请选择' : 'Please choose'
252 },], 284 }],
253 'pickUpBo.nationalitys': [{ 285 'pickUpBo.nationalitys': [{
254 required: true, 286 required: true,
255 trigger: 'blur', 287 trigger: 'blur',
256 message: language.value == 0 ? '请选择' : 'Please choose' 288 message: language.value == 0 ? '请选择' : 'Please choose'
257 },], 289 }],
258 'pickUpBo.name': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},], 290 'pickUpBo.name': [{ required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter' }],
259 'pickUpBo.phone': [{ 291 'pickUpBo.phone': [{
260 required: true, 292 required: true,
261 trigger: 'change', 293 trigger: 'change',
262 message: language.value == 0 ? '请输入' : 'Please enter' 294 message: language.value == 0 ? '请输入' : 'Please enter'
263 },], 295 }],
264 'pickUpBo.counts': [{ 296 'pickUpBo.counts': [{
265 required: true, 297 required: true,
266 trigger: 'change', 298 trigger: 'change',
267 message: language.value == 0 ? '请输入' : 'Please enter' 299 message: language.value == 0 ? '请输入' : 'Please enter'
268 },], 300 }],
269 'pickUpBo.arrivalDate': [{ 301 'pickUpBo.arrivalDate': [{
270 required: true, 302 required: true,
271 trigger: 'change', 303 trigger: 'change',
272 message: language.value == 0 ? '请选择' : 'Please choose' 304 message: language.value == 0 ? '请选择' : 'Please choose'
273 },], 305 }],
274 'pickUpBo.arrivaTime': [{ 306 'pickUpBo.arrivaTime': [{
275 required: true, 307 required: true,
276 trigger: 'change', 308 trigger: 'change',
277 message: language.value == 0 ? '请选择' : 'Please choose' 309 message: language.value == 0 ? '请选择' : 'Please choose'
278 },], 310 }],
279 'pickUpBo.flight': [{ 311 'pickUpBo.flight': [{
280 required: true, 312 required: true,
281 trigger: 'change', 313 trigger: 'change',
282 message: language.value == 0 ? '请输入' : 'Please enter' 314 message: language.value == 0 ? '请输入' : 'Please enter'
283 },], 315 }],
284 'pickUpBo.stationName': [{ 316 'pickUpBo.stationName': [{
285 required: true, 317 required: true,
286 trigger: 'change', 318 trigger: 'change',
287 message: language.value == 0 ? '请输入' : 'Please enter' 319 message: language.value == 0 ? '请输入' : 'Please enter'
288 },], 320 }],
289 'pickUpBo.terminal': [{ 321 'pickUpBo.terminal': [{
290 required: true, 322 required: true,
291 trigger: 'change', 323 trigger: 'change',
292 message: language.value == 0 ? '请输入' : 'Please enter' 324 message: language.value == 0 ? '请输入' : 'Please enter'
293 },], 325 }],
294 'pickUpBo.hotle': [{ 326 'pickUpBo.hotle': [{
295 required: true, 327 required: true,
296 trigger: 'change', 328 trigger: 'change',
297 message: language.value == 0 ? '请输入' : 'Please enter' 329 message: language.value == 0 ? '请输入' : 'Please enter'
298 },], 330 }],
299 'pickUpBo.itinerary': [{ 331 'pickUpBo.itinerary': [{
300 required: true, 332 required: true,
301 trigger: 'change', 333 trigger: 'change',
302 message: language.value == 0 ? '请选择' : 'Please choose' 334 message: language.value == 0 ? '请选择' : 'Please choose'
303 },], 335 }],
304 'downOffBo.nationalitys': [{ 336 'downOffBo.nationalitys': [{
305 required: true, 337 required: true,
306 trigger: 'blur', 338 trigger: 'blur',
307 message: language.value == 0 ? '请选择' : 'Please choose' 339 message: language.value == 0 ? '请选择' : 'Please choose'
308 },], 340 }],
309 'downOffBo.standing': [{ 341 'downOffBo.standing': [{
310 required: true, 342 required: true,
311 trigger: 'change', 343 trigger: 'change',
312 message: language.value == 0 ? '请选择' : 'Please choose' 344 message: language.value == 0 ? '请选择' : 'Please choose'
313 },], 345 }],
314 'downOffBo.name': [{ 346 'downOffBo.name': [{
315 required: true, 347 required: true,
316 trigger: 'change', 348 trigger: 'change',
317 message: language.value == 0 ? '请输入' : 'Please enter' 349 message: language.value == 0 ? '请输入' : 'Please enter'
318 },], 350 }],
319 'downOffBo.phone': [{ 351 'downOffBo.phone': [{
320 required: true, 352 required: true,
321 trigger: 'change', 353 trigger: 'change',
322 message: language.value == 0 ? '请输入' : 'Please enter' 354 message: language.value == 0 ? '请输入' : 'Please enter'
323 },], 355 }],
324 'downOffBo.counts': [{ 356 'downOffBo.counts': [{
325 required: true, 357 required: true,
326 trigger: 'change', 358 trigger: 'change',
327 message: language.value == 0 ? '请选择' : 'Please choose' 359 message: language.value == 0 ? '请选择' : 'Please choose'
328 },], 360 }],
329 'downOffBo.arrivalDate': [{ 361 'downOffBo.arrivalDate': [{
330 required: true, 362 required: true,
331 trigger: 'change', 363 trigger: 'change',
332 message: language.value == 0 ? '请选择' : 'Please choose' 364 message: language.value == 0 ? '请选择' : 'Please choose'
333 },], 365 }],
334 'downOffBo.arrivaTime': [{ 366 'downOffBo.arrivaTime': [{
335 required: true, 367 required: true,
336 trigger: 'change', 368 trigger: 'change',
337 message: language.value == 0 ? '请选择' : 'Please choose' 369 message: language.value == 0 ? '请选择' : 'Please choose'
338 },], 370 }],
339 'downOffBo.flight': [{ 371 'downOffBo.flight': [{
340 required: true, 372 required: true,
341 trigger: 'change', 373 trigger: 'change',
342 message: language.value == 0 ? '请输入' : 'Please enter' 374 message: language.value == 0 ? '请输入' : 'Please enter'
343 },], 375 }],
344 'downOffBo.stationName': [{ 376 'downOffBo.stationName': [{
345 required: true, 377 required: true,
346 trigger: 'change', 378 trigger: 'change',
347 message: language.value == 0 ? '请输入' : 'Please enter' 379 message: language.value == 0 ? '请输入' : 'Please enter'
348 },], 380 }],
349 'downOffBo.terminal': [{ 381 'downOffBo.terminal': [{
350 required: true, 382 required: true,
351 trigger: 'change', 383 trigger: 'change',
352 message: language.value == 0 ? '请输入' : 'Please enter' 384 message: language.value == 0 ? '请输入' : 'Please enter'
353 },], 385 }],
354 'downOffBo.hotle': [{ 386 'downOffBo.hotle': [{
355 required: true, 387 required: true,
356 trigger: 'change', 388 trigger: 'change',
357 message: language.value == 0 ? '请输入' : 'Please enter' 389 message: language.value == 0 ? '请输入' : 'Please enter'
358 },], 390 }],
359 'downOffBo.itinerary': [{ 391 'downOffBo.itinerary': [{
360 required: true, 392 required: true,
361 trigger: 'change', 393 trigger: 'change',
362 message: language.value == 0 ? '请选择' : 'Please choose' 394 message: language.value == 0 ? '请选择' : 'Please choose'
363 },], 395 }]
364 396
365 }) 397 })
366 const open = (params) => { 398 const open = (params) => {
...@@ -369,20 +401,20 @@ const open = (params) => { ...@@ -369,20 +401,20 @@ const open = (params) => {
369 form.value = { 401 form.value = {
370 pickUpBo: { 402 pickUpBo: {
371 serviceType: 1, 403 serviceType: 1,
372 arrivalDate:'2024-09-27' 404 arrivalDate: '2025-09-27'
373 }, 405 },
374 downOffBo: { 406 downOffBo: {
375 serviceType: 2, 407 serviceType: 2,
376 arrivalDate:'2024-09-30' 408 arrivalDate: '2025-09-30'
377 }, 409 },
378 type: ['1'], 410 type: ['1']
379 } 411 }
380 title.value = language.value == 0 ? '境外及港澳台接送信息登记' : 'Request Form for Overseas, HKT, Mau, China and TPE Athletes Arrival and Departure' 412 title.value = language.value == 0 ? '境外及港澳台接送信息登记' : 'Request Form for Overseas, HKT, Mau, China and TPE Athletes Arrival and Departure'
381 cptId.value = params.cptId 413 cptId.value = params.cptId
382 getCourse() 414 getCourse()
383 // proxy.$refs['iformRef'] 415 // proxy.$refs['iformRef']
384 } 416 }
385 defineExpose({open}) 417 defineExpose({ open })
386 watch(show, (value) => { 418 watch(show, (value) => {
387 if (!value) { 419 if (!value) {
388 form.value = { 420 form.value = {
...@@ -395,7 +427,7 @@ watch(show, (value) => { ...@@ -395,7 +427,7 @@ watch(show, (value) => {
395 }) 427 })
396 428
397 function getCourse() { 429 function getCourse() {
398 masterClassList({cptId: cptId.value}).then(res => { 430 masterClassList({ cptId: cptId.value }).then(res => {
399 courseList.value = res.data 431 courseList.value = res.data
400 }) 432 })
401 } 433 }
...@@ -412,7 +444,7 @@ function submitForm() { ...@@ -412,7 +444,7 @@ function submitForm() {
412 // form.value.pickUpBo.serviceType=1 444 // form.value.pickUpBo.serviceType=1
413 // form.value.downOffBo.serviceType=2 445 // form.value.downOffBo.serviceType=2
414 console.log(form.value) 446 console.log(form.value)
415 let forms = JSON.parse(JSON.stringify(form.value)) 447 const forms = JSON.parse(JSON.stringify(form.value))
416 forms.pickUpBo.nationalitys = forms.pickUpBo.nationalitys?.join(',') 448 forms.pickUpBo.nationalitys = forms.pickUpBo.nationalitys?.join(',')
417 forms.pickUpBo.standing = forms.pickUpBo.standing?.join(',') 449 forms.pickUpBo.standing = forms.pickUpBo.standing?.join(',')
418 forms.downOffBo.nationalitys = forms.downOffBo.nationalitys?.join(',') 450 forms.downOffBo.nationalitys = forms.downOffBo.nationalitys?.join(',')
...@@ -490,32 +522,32 @@ function getCountryList() { ...@@ -490,32 +522,32 @@ function getCountryList() {
490 522
491 // function initdateRZ() { 523 // function initdateRZ() {
492 // const today = dayjs().format('YYYY-MM-DD') 524 // const today = dayjs().format('YYYY-MM-DD')
493 // form.value.pickUpBo.arrivalDate ='2024-07' 525 // form.value.pickUpBo.arrivalDate ='2025-07'
494 // } 526 // }
495 // function initdateDP() { 527 // function initdateDP() {
496 // const today = dayjs().format('YYYY-MM-DD') 528 // const today = dayjs().format('YYYY-MM-DD')
497 // form.value.downOffBo.arrivalDate ='2024-07' 529 // form.value.downOffBo.arrivalDate ='2025-07'
498 // } 530 // }
499 function disabledDateRZ(date) { 531 function disabledDateRZ(date) {
500 // 16-20 532 // 16-20
501 //判读今天大与2024-07-16 533 // 判读今天大与2024-07-16
502 const today = dayjs().format('YYYY-MM-DD') 534 const today = dayjs().format('YYYY-MM-DD')
503 // if ('2024-07-16' < today) { 535 // if ('2025-07-16' < today) {
504 // return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs('2024-09-27').valueOf())) 536 // return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs('2025-09-27').valueOf()))
505 // } else { 537 // } else {
506 // return !((date.getTime() >= dayjs('2024-07-16').valueOf()) && (date.getTime() <= dayjs('2024-07-20').valueOf())) 538 // return !((date.getTime() >= dayjs('2025-07-16').valueOf()) && (date.getTime() <= dayjs('2025-07-20').valueOf()))
507 // } 539 // }
508 return !(date.getTime() == dayjs('2024-09-27').valueOf()) 540 return !(date.getTime() == dayjs('2025-09-27').valueOf())
509 } 541 }
510 542
511 function disabledDateDP(date) { 543 function disabledDateDP(date) {
512 const today = dayjs().format('YYYY-MM-DD') 544 const today = dayjs().format('YYYY-MM-DD')
513 // if ('2024-07-18' < today) { 545 // if ('2025-07-18' < today) {
514 // return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs('2024-07-22').valueOf())) 546 // return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs('2025-07-22').valueOf()))
515 // } else { 547 // } else {
516 // return !((date.getTime() >= dayjs('2024-07-18').valueOf()) && (date.getTime() <= dayjs('2024-07-22').valueOf())) 548 // return !((date.getTime() >= dayjs('2025-07-18').valueOf()) && (date.getTime() <= dayjs('2025-07-22').valueOf()))
517 // } 549 // }
518 return !(date.getTime() == dayjs('2024-09-30').valueOf()) 550 return !(date.getTime() == dayjs('2025-09-30').valueOf())
519 } 551 }
520 </script> 552 </script>
521 553
......
src/viewsPc/index.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="banner"> 3 <div class="banner">
4 <el-carousel class="forPc" autoplay :interval="2000" height="450px" :autoplay="false" arrow="hover" @change="carouselChange"> 4 <el-carousel
5 <el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id"> 5 :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc"
6 height="450px"
7 @change="carouselChange"
8 >
9 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
6 <div class="bannerItem"> 10 <div class="bannerItem">
7 <div class="h100" @click.stop="goMatch(n)"> 11 <div class="h100" @click.stop="goMatch(n)">
8 <img v-if="n.bgImgUrl" class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 12 <img v-if="n.bgImgUrl" :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
9 <img v-else class="bannerImg" src="@/assets/dance/banner.png"> 13 <img v-else class="bannerImg" src="@/assets/dance/banner.png">
10 <div class="box forPc" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;"> 14 <div class="box forPc" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
11 <div class="banner-count" v-if="n.time>0" @click="goMatch(n)"> 15 <div v-if="n.time>0" class="banner-count" @click="goMatch(n)">
12 距离开始还有 16 距离开始还有
13 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒"> 17 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
14 <template #default="timeData"> 18 <template #default="timeData">
...@@ -36,7 +40,7 @@ ...@@ -36,7 +40,7 @@
36 报名已结束 40 报名已结束
37 </div> 41 </div>
38 </div> 42 </div>
39 <div class="banner-count bb" v-if="n.time<=0 && n.timeEnd>=0" @click="goMatch(n)"> 43 <div v-if="n.time<=0 && n.timeEnd>=0" class="banner-count bb" @click="goMatch(n)">
40 开始报名 44 开始报名
41 </div> 45 </div>
42 </div> 46 </div>
...@@ -44,14 +48,14 @@ ...@@ -44,14 +48,14 @@
44 </div> 48 </div>
45 </el-carousel-item> 49 </el-carousel-item>
46 </el-carousel> 50 </el-carousel>
47 <el-carousel class="forWei" height="160px" autoplay arrow="hover" @change="carouselChange"> 51 <el-carousel arrow="hover" autoplay class="forWei" height="160px" @change="carouselChange">
48 <el-carousel-item style="height: 160px;" v-for="n in maList" :key="n.id"> 52 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 160px;">
49 <div class="bannerItem" style="height:100%"> 53 <div class="bannerItem" style="height:100%">
50 <div class="h100" style="position: relative"> 54 <div class="h100" style="position: relative">
51 <img v-if="n.bgImgUrl" class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 55 <img v-if="n.bgImgUrl" :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
52 <img v-else class="bannerImg" src="@/assets/dance/banner.png"> 56 <img v-else class="bannerImg" src="@/assets/dance/banner.png">
53 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;"> 57 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
54 <div class="banner-count" v-if="n.time>0" @click="goMatch(n)"> 58 <div v-if="n.time>0" class="banner-count" @click="goMatch(n)">
55 距离开始还有 59 距离开始还有
56 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒"> 60 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
57 <template #default="timeData"> 61 <template #default="timeData">
...@@ -74,36 +78,36 @@ ...@@ -74,36 +78,36 @@
74 </van-count-down> 78 </van-count-down>
75 </div> 79 </div>
76 <div v-if="n.timeEnd<0"> 80 <div v-if="n.timeEnd<0">
77 <!-- <a target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" class="banner-count" v-if="time>0&&n.id=='1778253367748993026'" @click="goMatch(n)">--> 81 <!-- <a target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" class="banner-count" v-if="time>0&&n.id=='1778253367748993026'" @click="goMatch(n)">-->
78 <!-- <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">--> 82 <!-- <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">-->
79 <!-- <template #default="timeData">--> 83 <!-- <template #default="timeData">-->
80 <!-- <div class="block">{{ timeData.days }}--> 84 <!-- <div class="block">{{ timeData.days }}-->
81 <!-- <span class="colon">天</span>--> 85 <!-- <span class="colon">天</span>-->
82 <!-- </div>--> 86 <!-- </div>-->
83 <!-- ：--> 87 <!-- ：-->
84 <!-- <div class="block">{{ timeData.hours }}--> 88 <!-- <div class="block">{{ timeData.hours }}-->
85 <!-- <span class="colon">时</span>--> 89 <!-- <span class="colon">时</span>-->
86 <!-- </div>--> 90 <!-- </div>-->
87 <!-- ：--> 91 <!-- ：-->
88 <!-- <div class="block">{{ timeData.minutes }}--> 92 <!-- <div class="block">{{ timeData.minutes }}-->
89 <!-- <span class="colon">分</span>--> 93 <!-- <span class="colon">分</span>-->
90 <!-- </div>--> 94 <!-- </div>-->
91 <!-- ：--> 95 <!-- ：-->
92 <!-- <div class="block">{{ timeData.seconds }}--> 96 <!-- <div class="block">{{ timeData.seconds }}-->
93 <!-- <span class="colon">秒</span>--> 97 <!-- <span class="colon">秒</span>-->
94 <!-- </div>--> 98 <!-- </div>-->
95 <!-- </template>--> 99 <!-- </template>-->
96 <!-- </van-count-down>--> 100 <!-- </van-count-down>-->
97 <!-- 开始直播--> 101 <!-- 开始直播-->
98 <!-- </a>--> 102 <!-- </a>-->
99 <!-- <a target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" class="banner-count bb" v-else-if="time<=0&&n.id=='1778253367748993026'" @click="goMatch(n)">--> 103 <!-- <a target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" class="banner-count bb" v-else-if="time<=0&&n.id=='1778253367748993026'" @click="goMatch(n)">-->
100 <!-- 直播进行中--> 104 <!-- 直播进行中-->
101 <!-- </a>--> 105 <!-- </a>-->
102 <div class="banner-count bb" @click="goMatch(n)"> 106 <div class="banner-count bb" @click="goMatch(n)">
103 报名已结束 107 报名已结束
104 </div> 108 </div>
105 </div> 109 </div>
106 <div class="banner-count bb" v-if="n.time<=0 && n.timeEnd>=0" @click="goMatch(n)"> 110 <div v-if="n.time<=0 && n.timeEnd>=0" class="banner-count bb" @click="goMatch(n)">
107 开始报名 111 开始报名
108 </div> 112 </div>
109 </div> 113 </div>
...@@ -115,23 +119,29 @@ ...@@ -115,23 +119,29 @@
115 119
116 <div class="box zn-bg"> 120 <div class="box zn-bg">
117 <div class="zn-Box"> 121 <div class="zn-Box">
118 <img class="bbbg" v-if="matchData?.logoUrl" :src="fillImgUrl(matchData.logoUrl)"/> 122 <img v-if="matchData?.logoUrl" :src="fillImgUrl(matchData.logoUrl)" class="bbbg">
119 <el-row style="align-items: center"> 123 <el-row style="align-items: center">
120 <el-col :sm="24" :lg="10"> 124 <el-col :lg="10" :sm="24">
121 <div class="bgbg"> 125 <div class="bgbg">
122 <h1 style="color: #fff">{{matchData?.name}}</h1> 126 <h1 style="color: #fff">{{ matchData?.name }}</h1>
123 <a class="zn-btn" @click="goGuide" target="_blank" >参赛指南 127 <a class="zn-btn" target="_blank" @click="goGuide">参赛指南
124 <el-icon> 128 <el-icon>
125 <download/> 129 <download />
126 </el-icon> 130 </el-icon>
127 </a> 131 </a>
128 <a class="zn-btn ml20 btn-q forPc" v-if="matchData.isCourseView==1" @click="popMaster">青少年公益课报名</a> 132 <a
129 <a class="zn-btn ml20 btn-q" v-show="matchData?.id=='1778253367748993026'" @click="backNumberSearch">背号查询</a> 133 v-if="matchData.isCourseView==1" class="zn-btn ml20 btn-q forPc"
130 <a class="zn-btn ml20 btn-q" v-show="matchData?.id=='1778253367748993026'" @click="schSearch">日程查询</a> 134 @click="popMaster"
135 >青少年公益课报名</a>
136 <a
137 v-show="matchData?.id=='1778253367748993026'" class="zn-btn ml20 btn-q"
138 @click="backNumberSearch"
139 >背号查询</a>
140 <a v-show="matchData?.id=='1778253367748993026'" class="zn-btn ml20 btn-q" @click="schSearch">日程查询</a>
131 </div> 141 </div>
132 </el-col> 142 </el-col>
133 <el-col :sm="24" :lg="14"> 143 <el-col :lg="14" :sm="24">
134 <HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name"/> 144 <HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id" />
135 </el-col> 145 </el-col>
136 </el-row> 146 </el-row>
137 </div> 147 </div>
...@@ -140,25 +150,25 @@ ...@@ -140,25 +150,25 @@
140 150
141 <div id="part0" class="box part"> 151 <div id="part0" class="box part">
142 <el-row :gutter="20"> 152 <el-row :gutter="20">
143 <el-col :sm="24" :lg="12"> 153 <el-col :lg="12" :sm="24">
144 <div class="indexTitle"> 154 <div class="indexTitle">
145 <h3 class="leftboderTT">赛事日程</h3> 155 <h3 class="leftboderTT">赛事日程</h3>
146 <a class="more" href="#/saiC">MORE</a> 156 <a class="more" href="#/saiC">MORE</a>
147 </div> 157 </div>
148 <!--赛事日历--> 158 <!--赛事日历-->
149 <el-card :body-style="{'padding':'20px 20px'}"> 159 <el-card :body-style="{'padding':'20px 20px'}">
150 <home-calendar/> 160 <home-calendar />
151 </el-card> 161 </el-card>
152 </el-col> 162 </el-col>
153 <el-col :sm="24" :lg="12"> 163 <el-col :lg="12" :sm="24">
154 <div class="indexTitle"> 164 <div class="indexTitle">
155 <h3 class="leftboderTT">奖牌榜</h3> 165 <h3 class="leftboderTT">奖牌榜</h3>
156 <a class="more" href="#/saiC">MORE</a> 166 <a class="more" href="#/saiC">MORE</a>
157 </div> 167 </div>
158 <!--历史排名--> 168 <!--历史排名-->
159 <el-card :body-style="{'padding':'10px 20px 18px'}"> 169 <el-card :body-style="{'padding':'10px 20px 18px'}">
160 <el-table stripe :data="rank"> 170 <el-table :data="rank" stripe>
161 <el-table-column label="名次" align="center" width="50" type="index"> 171 <el-table-column align="center" label="名次" type="index" width="50">
162 <template #default="scope"> 172 <template #default="scope">
163 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span> 173 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
164 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span> 174 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
...@@ -170,12 +180,12 @@ ...@@ -170,12 +180,12 @@
170 <el-table-column label="国家" prop="name"> 180 <el-table-column label="国家" prop="name">
171 <template #default="scope"> 181 <template #default="scope">
172 <div> 182 <div>
173 <span :class="`flag-icon flag-icon-${scope.row.code}`"></span> 183 <span :class="`flag-icon flag-icon-${scope.row.code}`" />
174 {{ scope.row.countryName }} 184 {{ scope.row.countryName }}
175 </div> 185 </div>
176 </template> 186 </template>
177 </el-table-column> 187 </el-table-column>
178 <el-table-column label="组合" align="center"> 188 <el-table-column align="center" label="组合">
179 <template #default="scope"> 189 <template #default="scope">
180 <div class="text-primary esp">{{ scope.row.zuHe }}</div> 190 <div class="text-primary esp">{{ scope.row.zuHe }}</div>
181 </template> 191 </template>
...@@ -221,8 +231,8 @@ ...@@ -221,8 +231,8 @@
221 <el-row :gutter="20"> 231 <el-row :gutter="20">
222 <el-col 232 <el-col
223 v-for="(n,index) in newest2" 233 v-for="(n,index) in newest2"
224 :key="n.id" :xs="24" :sm="8" 234 :key="n.id" :lg="8" :sm="8"
225 :lg="8" 235 :xs="24"
226 > 236 >
227 <div class="activeItem" @click="goDetail(n)"> 237 <div class="activeItem" @click="goDetail(n)">
228 <div class="imgbox"> 238 <div class="imgbox">
...@@ -230,11 +240,11 @@ ...@@ -230,11 +240,11 @@
230 </div> 240 </div>
231 <div class="info"> 241 <div class="info">
232 <div class="date"> 242 <div class="date">
233 {{ n.sortName }} ｜ {{n.belongTime}} 243 {{ n.sortName }} ｜ {{ n.belongTime }}
234 </div> 244 </div>
235 <h3 class="esp">{{ n.name }}</h3> 245 <h3 class="esp">{{ n.name }}</h3>
236 <p class="esp_2" style="height: 40px"> 246 <p class="esp_2" style="height: 40px">
237 {{n.subName}} 247 {{ n.subName }}
238 </p> 248 </p>
239 <a>查看详情</a> 249 <a>查看详情</a>
240 </div> 250 </div>
...@@ -253,7 +263,7 @@ ...@@ -253,7 +263,7 @@
253 <el-row :gutter="20"> 263 <el-row :gutter="20">
254 <el-col :lg="8"> 264 <el-col :lg="8">
255 <a class="liveImgbox" target="_blank" @click="golive(livelist[0])"> 265 <a class="liveImgbox" target="_blank" @click="golive(livelist[0])">
256 <div class="livetimecount" v-if="time>0"> 266 <div v-if="time>0" class="livetimecount">
257 <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒"> 267 <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">
258 <template #default="timeData"> 268 <template #default="timeData">
259 <div class="block">{{ timeData.days }} 269 <div class="block">{{ timeData.days }}
...@@ -271,26 +281,26 @@ ...@@ -271,26 +281,26 @@
271 </template> 281 </template>
272 </van-count-down> 282 </van-count-down>
273 </div> 283 </div>
274 <i class="ii" v-else-if="etime>0&&time<=0">直播中</i> 284 <i v-else-if="etime>0&&time<=0" class="ii">直播中</i>
275 <!-- <i class="livetimecount" v-if="etime<=0">直播已结束</i>--> 285 <!-- <i class="livetimecount" v-if="etime<=0">直播已结束</i>-->
276 <div class="imgBox"> 286 <div class="imgBox">
277 <img v-if="time>0" src="/img/111.jpeg"/> 287 <img v-if="time>0" src="/img/111.jpeg">
278 <img v-else :src="fillImgUrl_webSite(livelist[0]?.picUrl)"> 288 <img v-else :src="fillImgUrl_webSite(livelist[0]?.picUrl)">
279 </div> 289 </div>
280 <h3 class="esp" v-if="time>0"> 290 <h3 v-if="time>0" class="esp">
281 2024WDSF亚洲体育舞蹈节 291 2024WDSF亚洲体育舞蹈节
282 </h3> 292 </h3>
283 <h3 class="esp" v-else> 293 <h3 v-else class="esp">
284 {{livelist[0]?.name }} 294 {{ livelist[0]?.name }}
285 </h3> 295 </h3>
286 </a> 296 </a>
287 </el-col> 297 </el-col>
288 <el-col :lg="16"> 298 <el-col :lg="16">
289 <div class="swiperPic"> 299 <div class="swiperPic">
290 <swiper 300 <swiper
291 class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20" 301 :autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
292 :navigation="navigationPic" 302 :slides-per-view="3"
293 :autoplay="true" :loop="true" 303 :space-between="20" class="swiper-wrapper"
294 > 304 >
295 <swiper-slide v-for="(n,i) in picList" :key="i"> 305 <swiper-slide v-for="(n,i) in picList" :key="i">
296 <div class="picbox" @click="goDetail(n)"> 306 <div class="picbox" @click="goDetail(n)">
...@@ -304,15 +314,16 @@ ...@@ -304,15 +314,16 @@
304 </el-col> 314 </el-col>
305 </el-row> 315 </el-row>
306 <el-row class="news-l-r"> 316 <el-row class="news-l-r">
307 <el-col v-for="(n,index) in livelist" :lg="8" v-show="index>0"> 317 <el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
308 <div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)"> 318 <div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)">
309 <div class="imgbox"> 319 <div class="imgbox">
310 <i class="playIcon"></i> 320 <i class="playIcon" />
311 <img :src="fillImgUrl_webSite(n.picUrl)"></div> 321 <img :src="fillImgUrl_webSite(n.picUrl)"></div>
312 <div class="info"> 322 <div class="info">
313 <div class="text-primary small-size"> 323 <div class="text-primary small-size">
314 <span v-if="n.subName">{{n.subName + ' | '}}</span> 324 <span v-if="n.subName">{{ n.subName + ' | ' }}</span>
315 {{ n.belongTime }}</div> 325 {{ n.belongTime }}
326 </div>
316 <h2 class="esp_2">{{ n.name }}</h2> 327 <h2 class="esp_2">{{ n.name }}</h2>
317 </div> 328 </div>
318 </div> 329 </div>
...@@ -329,7 +340,10 @@ ...@@ -329,7 +340,10 @@
329 <h3 class="leftboderTT">评委介绍</h3> 340 <h3 class="leftboderTT">评委介绍</h3>
330 </div> 341 </div>
331 <el-row :gutter="20"> 342 <el-row :gutter="20">
332 <el-col :sm="12" :xl="4" :xs="12" :lg="4" :md="8" v-for="n in personList" :key="n.name"> 343 <el-col
344 v-for="n in personList" :key="n.name" :lg="4" :md="8" :sm="12"
345 :xl="4" :xs="12"
346 >
333 <div class="teacher" @click="goLeaderInfo"> 347 <div class="teacher" @click="goLeaderInfo">
334 <div class="imgbox"><img :src="n.src"></div> 348 <div class="imgbox"><img :src="n.src"></div>
335 <h3 class="esp">{{ n.name }}</h3> 349 <h3 class="esp">{{ n.name }}</h3>
...@@ -348,14 +362,15 @@ ...@@ -348,14 +362,15 @@
348 </div> 362 </div>
349 <div class="aboutBox"> 363 <div class="aboutBox">
350 <div class="content"> 364 <div class="content">
351 <div v-html="aboutUsContent"></div> 365 <div v-html="aboutUsContent" />
352 <!-- 无锡WDSF亚洲体育舞蹈节是由世界体育舞蹈（无锡）中心（世界体育舞蹈联合、亚洲体育舞蹈联合、中国体育舞蹈联合会和无锡市人民政府共建）打造面向全球的、长期落户的、城市自主的品牌赛事。--> 366 <!-- 无锡WDSF亚洲体育舞蹈节是由世界体育舞蹈（无锡）中心（世界体育舞蹈联合、亚洲体育舞蹈联合、中国体育舞蹈联合会和无锡市人民政府共建）打造面向全球的、长期落户的、城市自主的品牌赛事。-->
353 <!-- 2023年7月首次举办无锡2023年WDSF亚洲体育舞蹈节，包括2023年WDSF世界标准舞锦标赛、2023年WDSF世界体育舞蹈大奖赛（中国无锡）、2023年全国体育舞蹈公开系列赛（无锡站），共吸引来自全球39个国家及地区的1,716名顶级舞者参与。--> 367 <!-- 2023年7月首次举办无锡2023年WDSF亚洲体育舞蹈节，包括2023年WDSF世界标准舞锦标赛、2023年WDSF世界体育舞蹈大奖赛（中国无锡）、2023年全国体育舞蹈公开系列赛（无锡站），共吸引来自全球39个国家及地区的1,716名顶级舞者参与。-->
354 <!-- 同时，并将世界体育舞蹈（无锡）中心成功落户中国无锡，以“节日有竞赛、竞赛节日化”为发展指导原则，“四方”共同努力服务全球舞者。 <div class="shadowbox"/>--> 368 <!-- 同时，并将世界体育舞蹈（无锡）中心成功落户中国无锡，以“节日有竞赛、竞赛节日化”为发展指导原则，“四方”共同努力服务全球舞者。 <div class="shadowbox"/>-->
355 </div> 369 </div>
356 <div class="mt30 text-center"> 370 <div class="mt30 text-center">
357 <a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img 371 <a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img
358 style="filter: brightness(2);height: 8px" src="@/assets/v1/more.png"/></a> 372 src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px"
373 ></a>
359 </div> 374 </div>
360 375
361 </div> 376 </div>
...@@ -390,7 +405,7 @@ ...@@ -390,7 +405,7 @@
390 <h3 class="leftboderTT">合作伙伴</h3> 405 <h3 class="leftboderTT">合作伙伴</h3>
391 </div> 406 </div>
392 <el-row :gutter="20"> 407 <el-row :gutter="20">
393 <el-col :lg="6" :sm="6" :xs="6" v-for="p in partners"> 408 <el-col v-for="p in partners" :lg="6" :sm="6" :xs="6">
394 <div class="logobox"> 409 <div class="logobox">
395 <img :src="fillImgUrl(JSON.parse(p.picUrl))"> 410 <img :src="fillImgUrl(JSON.parse(p.picUrl))">
396 </div> 411 </div>
...@@ -402,26 +417,27 @@ ...@@ -402,26 +417,27 @@
402 <script setup> 417 <script setup>
403 import HomeQuick from '@/viewsPc/components/homeQuick' 418 import HomeQuick from '@/viewsPc/components/homeQuick'
404 import HomeCalendar from '@/viewsPc/components/homeCalendar' 419 import HomeCalendar from '@/viewsPc/components/homeCalendar'
405 import {ref, nextTick, onMounted, watch} from 'vue' 420 import { ref, nextTick, onMounted, watch } from 'vue'
406 import {getCurrentInstance} from '@vue/runtime-core' 421 import { getCurrentInstance } from '@vue/runtime-core'
407 import {getHomePage, getNewsListById, getNewsList, getRank} from '@/apiPc/webSite' 422 import { getHomePage, getNewsListById, getNewsList, getRank } from '@/apiPc/webSite'
408 import {useRouter} from 'vue-router' 423 import { useRouter } from 'vue-router'
409 import {rankList} from '@/assets/js/data' 424 import { rankList } from '@/assets/js/data'
410 import _ from 'lodash' 425 import _ from 'lodash'
411 import {Swiper, SwiperSlide} from 'swiper/vue' 426 import { Swiper, SwiperSlide } from 'swiper/vue'
412 import {Autoplay, Navigation} from 'swiper' 427 import { Autoplay, Navigation } from 'swiper'
413 import 'swiper/css' 428 import 'swiper/css'
414 import {dayjs} from 'element-plus' 429 import { dayjs } from 'element-plus'
415 import * as match from "@/apiPc/match"; 430 import * as match from '@/apiPc/match'
416 import {getAboutUs, getppInfo, getZNList} from "@/apiPc/match"; 431 import { getAboutUs, getppInfo, getZNList } from '@/apiPc/match'
432
417 const modules = [Autoplay, Navigation] 433 const modules = [Autoplay, Navigation]
418 const navigationPic = ref({ 434 const navigationPic = ref({
419 nextEl: '.picnext', 435 nextEl: '.picnext',
420 prevEl: '.picprev' 436 prevEl: '.picprev'
421 }) 437 })
422 const router = useRouter() 438 const router = useRouter()
423 const {proxy} = getCurrentInstance() 439 const { proxy } = getCurrentInstance()
424 const emit = defineEmits(['pop','pickup','backNumber','schSearch']) 440 const emit = defineEmits(['pop', 'pickup', 'backNumber', 'schSearch'])
425 const time = ref(0) 441 const time = ref(0)
426 const etime = ref(0) 442 const etime = ref(0)
427 const personList = ref([ 443 const personList = ref([
...@@ -429,7 +445,7 @@ const personList = ref([ ...@@ -429,7 +445,7 @@ const personList = ref([
429 { name: 'Nenad Jeftic', pp: '标准舞裁判长 塞尔维亚', src: '/img/2.png' }, 445 { name: 'Nenad Jeftic', pp: '标准舞裁判长 塞尔维亚', src: '/img/2.png' },
430 { name: 'Dorel Bagiu', pp: '罗马尼亚', src: '/img/3.png' }, 446 { name: 'Dorel Bagiu', pp: '罗马尼亚', src: '/img/3.png' },
431 { name: 'Eduard Korotin', pp: ' 爱沙尼亚', src: '/img/4.png' }, 447 { name: 'Eduard Korotin', pp: ' 爱沙尼亚', src: '/img/4.png' },
432 { name: 'Ana Cristina Silva', pp: '葡萄牙', src: '/img/5.png'}, 448 { name: 'Ana Cristina Silva', pp: '葡萄牙', src: '/img/5.png' },
433 { name: 'Dallas Leslie Williams', pp: '记分长 澳大利亚', src: '/img/6.png' } 449 { name: 'Dallas Leslie Williams', pp: '记分长 澳大利亚', src: '/img/6.png' }
434 ]) 450 ])
435 const activeNews = ref(0) 451 const activeNews = ref(0)
...@@ -455,13 +471,13 @@ onMounted(() => { ...@@ -455,13 +471,13 @@ onMounted(() => {
455 471
456 const init = () => { 472 const init = () => {
457 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 473 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
458 time.value = dayjs('2024-07-17 07:00:00').diff(today, 'millisecond') 474 time.value = dayjs('2025-07-17 07:00:00').diff(today, 'millisecond')
459 etime.value = dayjs('2024-07-22 12:00:00').diff(today, 'millisecond') 475 etime.value = dayjs('2025-07-22 12:00:00').diff(today, 'millisecond')
460 getRank().then(res=>{ 476 getRank().then(res => {
461 rank.value = res.data.slice(0,6) 477 rank.value = res.data.slice(0, 6)
462 }) 478 })
463 getNewsListById({ 479 getNewsListById({
464 pageSize: time.value>0? 3:4, 480 pageSize: time.value > 0 ? 3 : 4,
465 pageNum: 1, 481 pageNum: 1,
466 sortId: '10000006' 482 sortId: '10000006'
467 } 483 }
...@@ -485,16 +501,16 @@ const init = () => { ...@@ -485,16 +501,16 @@ const init = () => {
485 ).then(res => { 501 ).then(res => {
486 newest2.value = res.rows 502 newest2.value = res.rows
487 }) 503 })
488 match.getMaList({topFlag:1}).then((res) => { 504 match.getMaList({ topFlag: 1 }).then((res) => {
489 maList.value = res.rows 505 maList.value = res.rows
490 for (let n of maList.value) { 506 for (const n of maList.value) {
491 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 507 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
492 if(n.signBeginTime){ 508 if (n.signBeginTime) {
493 n.time = dayjs(n.signBeginTime).diff(today, 'millisecond') 509 n.time = dayjs(n.signBeginTime).diff(today, 'millisecond')
494 } else { 510 } else {
495 n.time = 0 511 n.time = 0
496 } 512 }
497 if(n.signEndTime){ 513 if (n.signEndTime) {
498 n.timeEnd = dayjs(n.signEndTime).diff(today, 'millisecond') 514 n.timeEnd = dayjs(n.signEndTime).diff(today, 'millisecond')
499 } else { 515 } else {
500 n.time = 0 516 n.time = 0
...@@ -508,7 +524,7 @@ const getpartners = () => { ...@@ -508,7 +524,7 @@ const getpartners = () => {
508 match.getppInfo('10000001').then((res) => { 524 match.getppInfo('10000001').then((res) => {
509 aboutUsContent.value = res.data.contextZh 525 aboutUsContent.value = res.data.contextZh
510 }) 526 })
511 match.getZNList({sortId:'2000',language:1}).then((res) => { 527 match.getZNList({ sortId: '2000', language: 1 }).then((res) => {
512 partners.value = res.rows 528 partners.value = res.rows
513 }) 529 })
514 } 530 }
...@@ -525,7 +541,7 @@ const goDetail = (n) => { ...@@ -525,7 +541,7 @@ const goDetail = (n) => {
525 } 541 }
526 } 542 }
527 const golive = (n) => { 543 const golive = (n) => {
528 if(time.value>0){ 544 if (time.value > 0) {
529 window.open('https://wx.vzan.com/live/page/1151815649?v=1720589464698') 545 window.open('https://wx.vzan.com/live/page/1151815649?v=1720589464698')
530 } else { 546 } else {
531 router.push({ 547 router.push({
...@@ -560,38 +576,38 @@ const goGuide = () => { ...@@ -560,38 +576,38 @@ const goGuide = () => {
560 router.push({ 576 router.push({
561 name: 'guide', 577 name: 'guide',
562 query: { 578 query: {
563 index:8 579 index: 8
564 } 580 }
565 }) 581 })
566 } 582 }
567 const popMaster = () => { 583 const popMaster = () => {
568 var params = { 584 var params = {
569 cptId:matchData.value.id 585 cptId: matchData.value.id
570 } 586 }
571 emit('pop',params) 587 emit('pop', params)
572 } 588 }
573 const backNumberSearch = () => { 589 const backNumberSearch = () => {
574 var params = { 590 var params = {
575 cptId:matchData.value.id 591 cptId: matchData.value.id
576 } 592 }
577 emit('backNumber',params) 593 emit('backNumber', params)
578 } 594 }
579 const schSearch = () => { 595 const schSearch = () => {
580 var params = { 596 var params = {
581 cptId:matchData.value.id 597 cptId: matchData.value.id
582 } 598 }
583 emit('schSearch',params) 599 emit('schSearch', params)
584 } 600 }
585 const handlePickup=()=>{ 601 const handlePickup = () => {
586 const params={ 602 const params = {
587 cptId :matchData.value.id 603 cptId: matchData.value.id
588 } 604 }
589 emit('pickup',params) 605 emit('pickup', params)
590 } 606 }
591 607
592 </script> 608 </script>
593 609
594 <style scoped lang="scss"> 610 <style lang="scss" scoped>
595 611
596 .zn-bg { 612 .zn-bg {
597 background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC); 613 background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
...@@ -652,7 +668,8 @@ const handlePickup=()=>{ ...@@ -652,7 +668,8 @@ const handlePickup=()=>{
652 background: #000; 668 background: #000;
653 position: relative; 669 position: relative;
654 670
655 .banner-count {cursor: pointer; 671 .banner-count {
672 cursor: pointer;
656 position: absolute; 673 position: absolute;
657 padding: 20px 40px; 674 padding: 20px 40px;
658 font-size: 20px; 675 font-size: 20px;
...@@ -695,10 +712,20 @@ const handlePickup=()=>{ ...@@ -695,10 +712,20 @@ const handlePickup=()=>{
695 font-size: 20px; 712 font-size: 20px;
696 } 713 }
697 } 714 }
698 .bb{width: 580px;justify-content: center;height: 100px;font-size: 30px;} 715
699 .banner-count.bb:hover{box-shadow: 0 0 20px #453DEA;border-radius: 100px; 716 .bb {
717 width: 580px;
718 justify-content: center;
719 height: 100px;
720 font-size: 30px;
721 }
722
723 .banner-count.bb:hover {
724 box-shadow: 0 0 20px #453DEA;
725 border-radius: 100px;
700 background: linear-gradient(-90deg, #8623FC, #453DEA) 726 background: linear-gradient(-90deg, #8623FC, #453DEA)
701 } 727 }
728
702 .box { 729 .box {
703 position: absolute; 730 position: absolute;
704 height: 100%; 731 height: 100%;
...@@ -765,6 +792,7 @@ const handlePickup=()=>{ ...@@ -765,6 +792,7 @@ const handlePickup=()=>{
765 position: relative; 792 position: relative;
766 height: 400px; 793 height: 400px;
767 } 794 }
795
768 .ggbond { 796 .ggbond {
769 height: 230px; 797 height: 230px;
770 position: relative; 798 position: relative;
...@@ -780,44 +808,94 @@ const handlePickup=()=>{ ...@@ -780,44 +808,94 @@ const handlePickup=()=>{
780 } 808 }
781 } 809 }
782 810
783 .teacher{height: 410px;background: #fff; 811 .teacher {
784 position: relative;border-radius: 10px;overflow: hidden; 812 height: 410px;
785 .imgbox{background: linear-gradient(0,#C8AAFC,#fff)} 813 background: #fff;
786 img{height: 350px;width: 100%;object-fit: cover;} 814 position: relative;
787 h3{color: #fff;background: url("@/assets/dance/name_bg.png") no-repeat center; 815 border-radius: 10px;
788 background-size:110% 100%;text-align: center;height: 30px;line-height: 30px; 816 overflow: hidden;
789 font-size: 18px;position: absolute;width: 100%;bottom: 30px;} 817
790 p{text-align: center;margin: 25px 0 0; 818 .imgbox {
791 font-size: 14px;} 819 background: linear-gradient(0, #C8AAFC, #fff)
820 }
821
822 img {
823 height: 350px;
824 width: 100%;
825 object-fit: cover;
826 }
827
828 h3 {
829 color: #fff;
830 background: url("@/assets/dance/name_bg.png") no-repeat center;
831 background-size: 110% 100%;
832 text-align: center;
833 height: 30px;
834 line-height: 30px;
835 font-size: 18px;
836 position: absolute;
837 width: 100%;
838 bottom: 30px;
839 }
840
841 p {
842 text-align: center;
843 margin: 25px 0 0;
844 font-size: 14px;
845 }
792 } 846 }
847
793 @media screen and (max-width: 1650px) { 848 @media screen and (max-width: 1650px) {
794 .teacher{height: 320px; 849 .teacher {
795 .imgbox{ 850 height: 320px;
796 img{height: 260px} 851
852 .imgbox {
853 img {
854 height: 260px
855 }
797 } 856 }
798 } 857 }
799 } 858 }
859
800 @media screen and (max-width: 1200px) { 860 @media screen and (max-width: 1200px) {
801 .teacher{height: 450px;margin: 0 0 20px; 861 .teacher {
802 .imgbox{ 862 height: 450px;
803 img{height: 390px} 863 margin: 0 0 20px;
864
865 .imgbox {
866 img {
867 height: 390px
868 }
804 } 869 }
805 } 870 }
806 } 871 }
872
807 @media screen and (max-width: 900px) { 873 @media screen and (max-width: 900px) {
808 .teacher{height: 400px;margin: 0 0 20px; 874 .teacher {
809 .imgbox{ 875 height: 400px;
810 img{height: 340px} 876 margin: 0 0 20px;
877
878 .imgbox {
879 img {
880 height: 340px
881 }
811 } 882 }
812 } 883 }
813 } 884 }
885
814 @media screen and (max-width: 800px) { 886 @media screen and (max-width: 800px) {
815 .teacher{height: 400px;margin: 0 0 20px; 887 .teacher {
816 .imgbox{ 888 height: 400px;
817 img{height: 260px} 889 margin: 0 0 20px;
890
891 .imgbox {
892 img {
893 height: 260px
894 }
818 } 895 }
819 } 896 }
820 } 897 }
898
821 .aboutBox { 899 .aboutBox {
822 background: url("@/assets/dance/about_bg.png") no-repeat center; 900 background: url("@/assets/dance/about_bg.png") no-repeat center;
823 height: 375px; 901 height: 375px;
...@@ -905,7 +983,9 @@ const handlePickup=()=>{ ...@@ -905,7 +983,9 @@ const handlePickup=()=>{
905 margin: 0 0 30px; 983 margin: 0 0 30px;
906 984
907 img { 985 img {
908 width: 100%;height: 100%;object-fit: contain; 986 width: 100%;
987 height: 100%;
988 object-fit: contain;
909 } 989 }
910 } 990 }
911 991
...@@ -1032,15 +1112,30 @@ const handlePickup=()=>{ ...@@ -1032,15 +1112,30 @@ const handlePickup=()=>{
1032 } 1112 }
1033 } 1113 }
1034 } 1114 }
1035 .livetimecount{position: absolute;top: 0;z-index: 2;background: #F04035; 1115
1116 .livetimecount {
1117 position: absolute;
1118 top: 0;
1119 z-index: 2;
1120 background: #F04035;
1036 padding: 2px 4px; 1121 padding: 2px 4px;
1037 &::after{content: ''; width: 0; 1122
1038 height: 0;position: absolute;right: -15px;top: 0; 1123 &::after {
1124 content: '';
1125 width: 0;
1126 height: 0;
1127 position: absolute;
1128 right: -15px;
1129 top: 0;
1039 border-top: 24px solid #F04035; 1130 border-top: 24px solid #F04035;
1040 border-right: 15px solid transparent;} 1131 border-right: 15px solid transparent;
1041 .van-count-down { display: flex; 1132 }
1133
1134 .van-count-down {
1135 display: flex;
1042 color: #fff; 1136 color: #fff;
1043 font-size: 14px; 1137 font-size: 14px;
1138
1044 .block { 1139 .block {
1045 color: #fff; 1140 color: #fff;
1046 text-align: center; 1141 text-align: center;
...@@ -1049,12 +1144,16 @@ const handlePickup=()=>{ ...@@ -1049,12 +1144,16 @@ const handlePickup=()=>{
1049 } 1144 }
1050 } 1145 }
1051 } 1146 }
1147
1052 @media (max-width: 500px) { 1148 @media (max-width: 500px) {
1053 .forPc{display: none!important;} 1149 .forPc {
1054 .logobox{ 1150 display: none !important;
1151 }
1152 .logobox {
1055 height: 60px; 1153 height: 60px;
1056 } 1154 }
1057 } 1155 }
1156
1058 :deep(.btn-q) { 1157 :deep(.btn-q) {
1059 //background: #FFFFFF; 1158 //background: #FFFFFF;
1060 //font-size: 18px; 1159 //font-size: 18px;
...@@ -1077,16 +1176,16 @@ const handlePickup=()=>{ ...@@ -1077,16 +1176,16 @@ const handlePickup=()=>{
1077 box-sizing: inherit; 1176 box-sizing: inherit;
1078 } 1177 }
1079 1178
1080 .btn-q:hover{ 1179 .btn-q:hover {
1081 box-shadow: 0 0 20px #453DEA; 1180 box-shadow: 0 0 20px #453DEA;
1082 border-radius: 100px; 1181 border-radius: 100px;
1083 background: linear-gradient(-90deg, #8623FC, #453DEA) !important; 1182 background: linear-gradient(-90deg, #8623FC, #453DEA) !important;
1084 } 1183 }
1085 1184
1086 .ding{ 1185 .ding {
1087 position: fixed; 1186 position: fixed;
1088 right: 0px; 1187 right: 0px;
1089 z-index:99; 1188 z-index: 99;
1090 top: 40%; 1189 top: 40%;
1091 background: linear-gradient(-90deg, #8623FC, #453DEA) !important; 1190 background: linear-gradient(-90deg, #8623FC, #453DEA) !important;
1092 box-shadow: none; 1191 box-shadow: none;
......
src/viewsPc/index_en.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="banner"> 3 <div class="banner">
4 <el-carousel height="450px" autoplay :interval="2000" class="forPc" :autoplay="false" arrow="hover" @change="carouselChange"> 4 <el-carousel
5 <el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id"> 5 :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc"
6 height="450px"
7 @change="carouselChange"
8 >
9 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
6 <div class="bannerItem"> 10 <div class="bannerItem">
7 <div class="h100" @click.stop="goMatch(n)"> 11 <div class="h100" @click.stop="goMatch(n)">
8 <img v-if="n.bgImgUrl" class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 12 <img v-if="n.bgImgUrl" :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
9 <img v-else class="bannerImg" src="@/assets/dance/banner.png"> 13 <img v-else class="bannerImg" src="@/assets/dance/banner.png">
10 <div class="box" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;"> 14 <div class="box" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
11 15
12 <div class="banner-count" v-if="n.time>0" > 16 <div v-if="n.time>0" class="banner-count">
13 Countdown 17 Countdown
14 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒"> 18 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
15 <template #default="timeData"> 19 <template #default="timeData">
16 <div class="block">{{ timeData.days }} 20 <div class="block">{{ timeData.days }}
17 <span class="colon">Days</span> 21 <span class="colon">Days</span>
18 </div>： 22 </div>
23 ：
19 <div class="block">{{ timeData.hours }} 24 <div class="block">{{ timeData.hours }}
20 <span class="colon">Hrs</span> 25 <span class="colon">Hrs</span>
21 </div>： 26 </div>
27 ：
22 <div class="block">{{ timeData.minutes }} 28 <div class="block">{{ timeData.minutes }}
23 <span class="colon">Min</span> 29 <span class="colon">Min</span>
24 </div>： 30 </div>
31 ：
25 <div class="block">{{ timeData.seconds }} 32 <div class="block">{{ timeData.seconds }}
26 <span class="colon">Sec</span> 33 <span class="colon">Sec</span>
27 </div> 34 </div>
...@@ -33,7 +40,7 @@ ...@@ -33,7 +40,7 @@
33 Registration has ended 40 Registration has ended
34 </div> 41 </div>
35 </div> 42 </div>
36 <div class="banner-count bb" v-if="n.time<=0&&n.timeEnd>=0" @click="goMatch(n)"> 43 <div v-if="n.time<=0&&n.timeEnd>=0" class="banner-count bb" @click="goMatch(n)">
37 REGISTER NOW 44 REGISTER NOW
38 </div> 45 </div>
39 </div> 46 </div>
...@@ -41,26 +48,29 @@ ...@@ -41,26 +48,29 @@
41 </div> 48 </div>
42 </el-carousel-item> 49 </el-carousel-item>
43 </el-carousel> 50 </el-carousel>
44 <el-carousel class="forWei" height="160px" autoplay arrow="hover" @change="carouselChange"> 51 <el-carousel arrow="hover" autoplay class="forWei" height="160px" @change="carouselChange">
45 <el-carousel-item style="height: 160px;" v-for="n in maList" :key="n.id"> 52 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 160px;">
46 <div class="bannerItem" style="height:100%"> 53 <div class="bannerItem" style="height:100%">
47 <div class="h100" style="position: relative"> 54 <div class="h100" style="position: relative">
48 <img v-if="n.bgImgUrl" class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 55 <img v-if="n.bgImgUrl" :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
49 <img v-else class="bannerImg" src="@/assets/dance/banner.png"> 56 <img v-else class="bannerImg" src="@/assets/dance/banner.png">
50 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;"> 57 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
51 <div class="banner-count" v-if="n.time>0" > 58 <div v-if="n.time>0" class="banner-count">
52 Countdown 59 Countdown
53 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒"> 60 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
54 <template #default="timeData"> 61 <template #default="timeData">
55 <div class="block">{{ timeData.days }} 62 <div class="block">{{ timeData.days }}
56 <span class="colon">Days</span> 63 <span class="colon">Days</span>
57 </div>： 64 </div>
65 ：
58 <div class="block">{{ timeData.hours }} 66 <div class="block">{{ timeData.hours }}
59 <span class="colon">Hrs</span> 67 <span class="colon">Hrs</span>
60 </div>： 68 </div>
69 ：
61 <div class="block">{{ timeData.minutes }} 70 <div class="block">{{ timeData.minutes }}
62 <span class="colon">Min</span> 71 <span class="colon">Min</span>
63 </div>： 72 </div>
73 ：
64 <div class="block">{{ timeData.seconds }} 74 <div class="block">{{ timeData.seconds }}
65 <span class="colon">Sec</span> 75 <span class="colon">Sec</span>
66 </div> 76 </div>
...@@ -73,7 +83,7 @@ ...@@ -73,7 +83,7 @@
73 Registration has ended 83 Registration has ended
74 </div> 84 </div>
75 </div> 85 </div>
76 <div class="banner-count bb" v-if="n.time<=0&&n.timeEnd>=0" @click="goMatch(n)"> 86 <div v-if="n.time<=0&&n.timeEnd>=0" class="banner-count bb" @click="goMatch(n)">
77 REGISTER NOW 87 REGISTER NOW
78 </div> 88 </div>
79 89
...@@ -86,28 +96,38 @@ ...@@ -86,28 +96,38 @@
86 96
87 <div class="box zn-bg"> 97 <div class="box zn-bg">
88 <div class="zn-Box"> 98 <div class="zn-Box">
89 <img class="bbbg" v-if="matchData?.logoUrl" :src="fillImgUrl(matchData?.logoUrl)"/> 99 <img v-if="matchData?.logoUrl" :src="fillImgUrl(matchData?.logoUrl)" class="bbbg">
90 <el-row> 100 <el-row>
91 <el-col :sm="24" :lg="10"> 101 <el-col :lg="10" :sm="24">
92 <div class="bgbg"> 102 <div class="bgbg">
93 <h1 style="color: #fff">{{matchData?.name}}</h1> 103 <h1 style="color: #fff">{{ matchData?.name }}</h1>
94 <div class="mb30"> 104 <div class="mb30">
95 <a class="zn-btn" style="font-size: 15px" @click="goGuide"> 105 <a class="zn-btn" style="font-size: 15px" @click="goGuide">
96 GUIDELINE 106 GUIDELINE
97 <el-icon><download /></el-icon> 107 <el-icon>
108 <download />
109 </el-icon>
98 </a> 110 </a>
99 <a class="zn-btn ml20 btn-q forPc" v-if="matchData.isCourseView==1" style="font-size: 15px;margin-right: 20px" @click="popMaster"> 111 <a
100 Junior &Youth Camp REGISTER<el-icon><Edit /></el-icon> 112 v-if="matchData.isCourseView==1" class="zn-btn ml20 btn-q forPc"
113 style="font-size: 15px;margin-right: 20px" @click="popMaster"
114 >
115 Junior &Youth Camp REGISTER
116 <el-icon>
117 <Edit />
118 </el-icon>
101 </a> 119 </a>
102 <a class="zn-btn ml20 btn-q" v-show="matchData?.id=='1778253367748993026'" @click="backNumberSearch">Competition Number</a> 120 <a v-show="matchData?.id=='1778253367748993026'" class="zn-btn ml20 btn-q" @click="backNumberSearch">Competition
103 <a class="zn-btn ml20 btn-q" v-show="matchData?.id=='1778253367748993026'" @click="schSearchSearch">Schedule Inquiry</a> 121 Number</a>
122 <a v-show="matchData?.id=='1778253367748993026'" class="zn-btn ml20 btn-q" @click="schSearchSearch">Schedule
123 Inquiry</a>
104 124
105 </div> 125 </div>
106 126
107 </div> 127 </div>
108 </el-col> 128 </el-col>
109 <el-col :sm="24" :lg="14"> 129 <el-col :lg="14" :sm="24">
110 <HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name"/> 130 <HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id" />
111 </el-col> 131 </el-col>
112 </el-row> 132 </el-row>
113 </div> 133 </div>
...@@ -116,25 +136,25 @@ ...@@ -116,25 +136,25 @@
116 136
117 <div id="part0" class="box part"> 137 <div id="part0" class="box part">
118 <el-row :gutter="20"> 138 <el-row :gutter="20">
119 <el-col :sm="24" :lg="12"> 139 <el-col :lg="12" :sm="24">
120 <div class="indexTitle"> 140 <div class="indexTitle">
121 <h3 class="leftboderTT">COMPETITION SCHEDULE</h3> 141 <h3 class="leftboderTT">COMPETITION SCHEDULE</h3>
122 <a class="more" @click="gosaiC">MORE</a> 142 <a class="more" @click="gosaiC">MORE</a>
123 </div> 143 </div>
124 <!--赛事日历--> 144 <!--赛事日历-->
125 <el-card :body-style="{'padding':'20px 20px'}"> 145 <el-card :body-style="{'padding':'20px 20px'}">
126 <home-calendar/> 146 <home-calendar />
127 </el-card> 147 </el-card>
128 </el-col> 148 </el-col>
129 <el-col :sm="24" :lg="12"> 149 <el-col :lg="12" :sm="24">
130 <div class="indexTitle"> 150 <div class="indexTitle">
131 <h3 class="leftboderTT">MEDAL LIST</h3> 151 <h3 class="leftboderTT">MEDAL LIST</h3>
132 <!-- <a class="more" href="#/saiC">MORE</a>--> 152 <!-- <a class="more" href="#/saiC">MORE</a>-->
133 </div> 153 </div>
134 <!--历史排名--> 154 <!--历史排名-->
135 <el-card :body-style="{'padding':'10px 20px 18px'}"> 155 <el-card :body-style="{'padding':'10px 20px 18px'}">
136 <el-table stripe :data="rank"> 156 <el-table :data="rank" stripe>
137 <el-table-column label="RANK" align="center" width="80" type="index"> 157 <el-table-column align="center" label="RANK" type="index" width="80">
138 <template #default="scope"> 158 <template #default="scope">
139 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span> 159 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
140 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span> 160 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
...@@ -145,12 +165,12 @@ ...@@ -145,12 +165,12 @@
145 <el-table-column label="COUNTRY"> 165 <el-table-column label="COUNTRY">
146 <template #default="scope"> 166 <template #default="scope">
147 <div> 167 <div>
148 <span :class="`flag-icon flag-icon-${scope.row.code}`"></span> 168 <span :class="`flag-icon flag-icon-${scope.row.code}`" />
149 {{ scope.row.countryShortName }} 169 {{ scope.row.countryShortName }}
150 </div> 170 </div>
151 </template> 171 </template>
152 </el-table-column> 172 </el-table-column>
153 <el-table-column label="COUPLE" align="center"> 173 <el-table-column align="center" label="COUPLE">
154 <template #default="scope"> 174 <template #default="scope">
155 <div class="text-primary esp">{{ scope.row.zuHe }}</div> 175 <div class="text-primary esp">{{ scope.row.zuHe }}</div>
156 </template> 176 </template>
...@@ -195,8 +215,8 @@ ...@@ -195,8 +215,8 @@
195 <el-row :gutter="20"> 215 <el-row :gutter="20">
196 <el-col 216 <el-col
197 v-for="(n,index) in newest2" 217 v-for="(n,index) in newest2"
198 :key="n.id" :xs="24" :sm="8" 218 :key="n.id" :lg="8" :sm="8"
199 :lg="8" 219 :xs="24"
200 > 220 >
201 <div class="activeItem" @click="goNewsDetail(n)"> 221 <div class="activeItem" @click="goNewsDetail(n)">
202 <div class="imgbox"> 222 <div class="imgbox">
...@@ -208,7 +228,7 @@ ...@@ -208,7 +228,7 @@
208 </div> 228 </div>
209 <h3 class="esp">{{ n.name }}</h3> 229 <h3 class="esp">{{ n.name }}</h3>
210 <p class="esp_2" style="height: 40px"> 230 <p class="esp_2" style="height: 40px">
211 {{n.subName}} 231 {{ n.subName }}
212 </p> 232 </p>
213 <a>DETAIL</a> 233 <a>DETAIL</a>
214 </div> 234 </div>
...@@ -227,8 +247,8 @@ ...@@ -227,8 +247,8 @@
227 <el-card> 247 <el-card>
228 <el-row :gutter="20"> 248 <el-row :gutter="20">
229 <el-col :lg="8"> 249 <el-col :lg="8">
230 <a class="liveImgbox" target="_blank" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698"> 250 <a class="liveImgbox" href="https://wx.vzan.com/live/page/1151815649?v=1720589464698" target="_blank">
231 <div class="livetimecount" v-if="time>0"> 251 <div v-if="time>0" class="livetimecount">
232 <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒"> 252 <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">
233 <template #default="timeData"> 253 <template #default="timeData">
234 <div class="block">{{ timeData.days }} 254 <div class="block">{{ timeData.days }}
...@@ -246,11 +266,11 @@ ...@@ -246,11 +266,11 @@
246 </template> 266 </template>
247 </van-count-down> 267 </van-count-down>
248 </div> 268 </div>
249 <!-- <i class="ii" v-else-if="etime>0&&time<=0">Living</i>--> 269 <!-- <i class="ii" v-else-if="etime>0&&time<=0">Living</i>-->
250 <!-- <i class="livetimecount" v-if="etime<=0">End</i>--> 270 <!-- <i class="livetimecount" v-if="etime<=0">End</i>-->
251 <div class="imgBox"><img src="/img/111.jpeg"/></div> 271 <div class="imgBox"><img src="/img/111.jpeg"></div>
252 <h3 class="esp"> 272 <h3 class="esp">
253 WUXI 2024 WDSF ASIAN DANCESPORT FESTIVAL 273 WUXI 2025 WDSF ASIAN DANCESPORT FESTIVAL
254 </h3> 274 </h3>
255 </a> 275 </a>
256 </el-col> 276 </el-col>
...@@ -258,11 +278,11 @@ ...@@ -258,11 +278,11 @@
258 278
259 <div class="swiperPic forPx"> 279 <div class="swiperPic forPx">
260 <swiper 280 <swiper
261 class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20" 281 :autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
262 :navigation="navigationPic" 282 :slides-per-view="3"
263 :autoplay="true" :loop="true" 283 :space-between="20" class="swiper-wrapper"
264 > 284 >
265 <swiper-slide v-for="(n,i) in picList" :key="i" > 285 <swiper-slide v-for="(n,i) in picList" :key="i">
266 <div class="picbox" @click="goNewsDetail(n)"> 286 <div class="picbox" @click="goNewsDetail(n)">
267 <img :src="fillImgUrl_webSite(n.picUrl)"> 287 <img :src="fillImgUrl_webSite(n.picUrl)">
268 </div> 288 </div>
...@@ -282,8 +302,9 @@ ...@@ -282,8 +302,9 @@
282 <img :src="fillImgUrl_webSite(n.picUrl)"></div> 302 <img :src="fillImgUrl_webSite(n.picUrl)"></div>
283 <div class="info"> 303 <div class="info">
284 <div class="text-primary small-size"> 304 <div class="text-primary small-size">
285 <span v-if="n.subName">{{n.subName + ' | '}}</span> 305 <span v-if="n.subName">{{ n.subName + ' | ' }}</span>
286 {{ n.belongTime }}</div> 306 {{ n.belongTime }}
307 </div>
287 <h2 class="esp_2">{{ n.name }}</h2> 308 <h2 class="esp_2">{{ n.name }}</h2>
288 </div> 309 </div>
289 </div> 310 </div>
...@@ -301,8 +322,8 @@ ...@@ -301,8 +322,8 @@
301 </div> 322 </div>
302 <el-row :gutter="20"> 323 <el-row :gutter="20">
303 <el-col 324 <el-col
304 v-for="n in personList" :key="n.name" :sm="8" :xl="4" :xs="12" 325 v-for="n in personList" :key="n.name" :lg="4" :sm="8" :xl="4"
305 :lg="4" 326 :xs="12"
306 > 327 >
307 <div class="teacher"> 328 <div class="teacher">
308 <div class="imgbox"><img :src="n.src"></div> 329 <div class="imgbox"><img :src="n.src"></div>
...@@ -323,11 +344,12 @@ ...@@ -323,11 +344,12 @@
323 </div> 344 </div>
324 <div class="aboutBox"> 345 <div class="aboutBox">
325 <div class="content"> 346 <div class="content">
326 <div v-html="aboutUsContent"></div> 347 <div v-html="aboutUsContent" />
327 <div class="shadowbox" /> 348 <div class="shadowbox" />
328 </div> 349 </div>
329 <div class="mt30 text-center"> 350 <div class="mt30 text-center">
330 <a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">Learn more <img style="filter: brightness(2);height: 8px;margin-left: 10px" src="@/assets/v1/more.png"></a> 351 <a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">Learn more
352 <img src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px;margin-left: 10px"></a>
331 </div> 353 </div>
332 354
333 </div> 355 </div>
...@@ -335,7 +357,7 @@ ...@@ -335,7 +357,7 @@
335 <el-col :lg="12"> 357 <el-col :lg="12">
336 <div class="indexTitle"> 358 <div class="indexTitle">
337 <h3 class="leftboderTT">CONTACT</h3> 359 <h3 class="leftboderTT">CONTACT</h3>
338 <a class="more" style="filter: brightness(10)" href="#/about/wuDao">MORE</a> 360 <a class="more" href="#/about/wuDao" style="filter: brightness(10)">MORE</a>
339 </div> 361 </div>
340 <div class="mapBox"> 362 <div class="mapBox">
341 <div class="content"> 363 <div class="content">
...@@ -362,7 +384,7 @@ ...@@ -362,7 +384,7 @@
362 <h3 class="leftboderTT">PARTNERS</h3> 384 <h3 class="leftboderTT">PARTNERS</h3>
363 </div> 385 </div>
364 <el-row :gutter="20"> 386 <el-row :gutter="20">
365 <el-col :lg="6" :sm="12" :xs="6" v-for="p in partners"> 387 <el-col v-for="p in partners" :lg="6" :sm="12" :xs="6">
366 <div class="logobox"> 388 <div class="logobox">
367 <img :src="fillImgUrl(JSON.parse(p.picUrl))"> 389 <img :src="fillImgUrl(JSON.parse(p.picUrl))">
368 </div> 390 </div>
...@@ -376,7 +398,7 @@ ...@@ -376,7 +398,7 @@
376 <script setup> 398 <script setup>
377 import { ref, nextTick, onMounted, watch } from 'vue' 399 import { ref, nextTick, onMounted, watch } from 'vue'
378 import { getCurrentInstance } from '@vue/runtime-core' 400 import { getCurrentInstance } from '@vue/runtime-core'
379 import {getNewsListById, getNewsList, getWeather, getRank} from '@/apiPc/webSite' 401 import { getNewsListById, getNewsList, getWeather, getRank } from '@/apiPc/webSite'
380 import { useRouter } from 'vue-router' 402 import { useRouter } from 'vue-router'
381 import _ from 'lodash' 403 import _ from 'lodash'
382 import HomeQuick from '@/viewsPc/components/homeQuick' 404 import HomeQuick from '@/viewsPc/components/homeQuick'
...@@ -384,9 +406,10 @@ import HomeCalendar from '@/viewsPc/components/homeCalendar' ...@@ -384,9 +406,10 @@ import HomeCalendar from '@/viewsPc/components/homeCalendar'
384 import { Swiper, SwiperSlide } from 'swiper/vue' 406 import { Swiper, SwiperSlide } from 'swiper/vue'
385 import { Autoplay, Navigation } from 'swiper' 407 import { Autoplay, Navigation } from 'swiper'
386 import 'swiper/css' 408 import 'swiper/css'
387 import {dayjs, ElMessage} from 'element-plus' 409 import { dayjs, ElMessage } from 'element-plus'
388 import * as match from "@/apiPc/match"; 410 import * as match from '@/apiPc/match'
389 import {rankList} from '@/assets/js/data' 411 import { rankList } from '@/assets/js/data'
412
390 const modules = [Autoplay, Navigation] 413 const modules = [Autoplay, Navigation]
391 const navigationPic = ref({ 414 const navigationPic = ref({
392 nextEl: '.picnext', 415 nextEl: '.picnext',
...@@ -394,7 +417,7 @@ const navigationPic = ref({ ...@@ -394,7 +417,7 @@ const navigationPic = ref({
394 }) 417 })
395 const router = useRouter() 418 const router = useRouter()
396 const { proxy } = getCurrentInstance() 419 const { proxy } = getCurrentInstance()
397 const emit = defineEmits(['pop','backNumber','schSearch']) 420 const emit = defineEmits(['pop', 'backNumber', 'schSearch'])
398 const time = ref(0) 421 const time = ref(0)
399 const etime = ref(0) 422 const etime = ref(0)
400 423
...@@ -403,7 +426,7 @@ const personList = ref([ ...@@ -403,7 +426,7 @@ const personList = ref([
403 { name: 'Nenad Jeftic', pp: 'Chairperson for Standard SRB', src: '/img/2.png' }, 426 { name: 'Nenad Jeftic', pp: 'Chairperson for Standard SRB', src: '/img/2.png' },
404 { name: 'Dorel Bagiu', pp: 'ROU', src: '/img/3.png' }, 427 { name: 'Dorel Bagiu', pp: 'ROU', src: '/img/3.png' },
405 { name: 'Eduard Korotin', pp: ' EST', src: '/img/4.png' }, 428 { name: 'Eduard Korotin', pp: ' EST', src: '/img/4.png' },
406 { name: 'Ana Cristina Silva', pp: 'POR', src: '/img/5.png'}, 429 { name: 'Ana Cristina Silva', pp: 'POR', src: '/img/5.png' },
407 { name: 'Dallas Leslie Williams', pp: 'Scrutineer AUS', src: '/img/6.png' } 430 { name: 'Dallas Leslie Williams', pp: 'Scrutineer AUS', src: '/img/6.png' }
408 ]) 431 ])
409 const activeNews = ref(0) 432 const activeNews = ref(0)
...@@ -421,7 +444,7 @@ const nowscores = ref([]) ...@@ -421,7 +444,7 @@ const nowscores = ref([])
421 const livelist = ref([]) 444 const livelist = ref([])
422 const maList = ref([]) 445 const maList = ref([])
423 const picList = ref([]) 446 const picList = ref([])
424 const calendarValue = ref('2024-07-22') 447 const calendarValue = ref('2025-07-22')
425 const aboutUsContent = ref('') 448 const aboutUsContent = ref('')
426 const partners = ref([]) 449 const partners = ref([])
427 450
...@@ -432,37 +455,43 @@ onMounted(() => { ...@@ -432,37 +455,43 @@ onMounted(() => {
432 455
433 const init = () => { 456 const init = () => {
434 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 457 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
435 etime.value = dayjs('2024-07-22 12:00:00').diff(today, 'millisecond') 458 etime.value = dayjs('2025-07-22 12:00:00').diff(today, 'millisecond')
436 time.value = dayjs('2024-07-17 07:00:00').diff(today, 'millisecond') 459 time.value = dayjs('2025-07-17 07:00:00').diff(today, 'millisecond')
437 getRank().then(res=>{ 460 getRank().then(res => {
438 rank.value = res.data 461 rank.value = res.data
439 }) 462 })
440 getNewsListById( 463 getNewsListById(
441 { pageSize: 4, 464 {
465 pageSize: 4,
442 pageNum: 1, 466 pageNum: 1,
443 sortId: '10000008' } 467 sortId: '10000008'
468 }
444 ).then(res => { 469 ).then(res => {
445 livelist.value = res.rows 470 livelist.value = res.rows
446 }) 471 })
447 getNewsListById({ pageSize: 5, 472 getNewsListById({
473 pageSize: 5,
448 pageNum: 1, 474 pageNum: 1,
449 sortId: '10000009' } 475 sortId: '10000009'
476 }
450 ).then(res => { 477 ).then(res => {
451 picList.value = res.rows 478 picList.value = res.rows
452 }) 479 })
453 getNewsList({ pageSize: 3, 480 getNewsList({
481 pageSize: 3,
454 pageNum: 1, 482 pageNum: 1,
455 language:2, 483 language: 2,
456 code: '1000' } 484 code: '1000'
485 }
457 ).then(res => { 486 ).then(res => {
458 newest2.value = res.rows 487 newest2.value = res.rows
459 }) 488 })
460 match.getMaList({topFlag:1}).then((res) => { 489 match.getMaList({ topFlag: 1 }).then((res) => {
461 maList.value = res.rows 490 maList.value = res.rows
462 for (let n of maList.value) { 491 for (const n of maList.value) {
463 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 492 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
464 n.time = dayjs(n.signBeginTime).diff(today, 'millisecond') 493 n.time = dayjs(n.signBeginTime).diff(today, 'millisecond')
465 if(n.signEndTime){ 494 if (n.signEndTime) {
466 n.timeEnd = dayjs(n.signEndTime).diff(today, 'millisecond') 495 n.timeEnd = dayjs(n.signEndTime).diff(today, 'millisecond')
467 } else { 496 } else {
468 n.time = 0 497 n.time = 0
...@@ -476,7 +505,7 @@ const getpartners = () => { ...@@ -476,7 +505,7 @@ const getpartners = () => {
476 match.getAboutUs().then((res) => { 505 match.getAboutUs().then((res) => {
477 aboutUsContent.value = res.data.contextEn 506 aboutUsContent.value = res.data.contextEn
478 }) 507 })
479 match.getZNList({sortId:'2000',language:2}).then((res) => { 508 match.getZNList({ sortId: '2000', language: 2 }).then((res) => {
480 partners.value = res.rows 509 partners.value = res.rows
481 }) 510 })
482 } 511 }
...@@ -522,65 +551,112 @@ const building = () => { ...@@ -522,65 +551,112 @@ const building = () => {
522 const goGuide = () => { 551 const goGuide = () => {
523 router.push({ 552 router.push({
524 path: `/guide`, 553 path: `/guide`,
525 query:{ 554 query: {
526 index:8 555 index: 8
527 } 556 }
528 }) 557 })
529 } 558 }
530 const popMaster = () => { 559 const popMaster = () => {
531 var params = { 560 var params = {
532 cptId:matchData.value.id 561 cptId: matchData.value.id
533 } 562 }
534 emit('pop',params) 563 emit('pop', params)
535 } 564 }
536 const backNumberSearch = () => { 565 const backNumberSearch = () => {
537 var params = { 566 var params = {
538 cptId:matchData.value.id 567 cptId: matchData.value.id
539 } 568 }
540 emit('backNumber',params) 569 emit('backNumber', params)
541 } 570 }
542 const schSearchSearch = () => { 571 const schSearchSearch = () => {
543 var params = { 572 var params = {
544 cptId:matchData.value.id 573 cptId: matchData.value.id
545 } 574 }
546 emit('schSearch',params) 575 emit('schSearch', params)
547 } 576 }
548 const handlePickup=()=>{ 577 const handlePickup = () => {
549 const params={ 578 const params = {
550 cptId :matchData.value.id 579 cptId: matchData.value.id
551 } 580 }
552 emit('pickup',params) 581 emit('pickup', params)
553 } 582 }
554 </script> 583 </script>
555 584
556 <style scoped lang="scss"> 585 <style lang="scss" scoped>
557 .zn-bg{background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC); 586 .zn-bg {
558 border-radius: 15px;} 587 background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
559 .zn-Box{background-size: contain;position: relative;overflow: hidden; 588 border-radius: 15px;
560 .bbbg{position: absolute;width: 100%;height: 100%;object-fit: cover;} 589 }
561 .bgbg{height: 100%; 590
562 padding: 5%;display: flex; 591 .zn-Box {
592 background-size: contain;
593 position: relative;
594 overflow: hidden;
595
596 .bbbg {
597 position: absolute;
598 width: 100%;
599 height: 100%;
600 object-fit: cover;
601 }
602
603 .bgbg {
604 height: 100%;
605 padding: 5%;
606 display: flex;
563 flex-direction: column; 607 flex-direction: column;
564 justify-content: center; 608 justify-content: center;
565 img{margin: 5% 0} 609
610 img {
611 margin: 5% 0
612 }
566 } 613 }
567 .itemBox{ 614
615 .itemBox {
568 padding: 20px 40px; 616 padding: 20px 40px;
569 p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;} 617
618 p {
619 margin: 0;
620 height: 40px;
621 line-height: 20px;
622 display: flex;
623 align-items: center;
570 } 624 }
625 }
626
571 border-radius: 15px; 627 border-radius: 15px;
572 .zn-btn{background: #FFFFFF;text-transform: uppercase; 628
573 font-size: 16px; width: fit-content; margin: 5px 5px 5px 0; 629 .zn-btn {
630 background: #FFFFFF;
631 text-transform: uppercase;
632 font-size: 16px;
633 width: fit-content;
634 margin: 5px 5px 5px 0;
574 color: #453DEA; 635 color: #453DEA;
575 border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;} 636 border-radius: 23px;
576 .item{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0; 637 padding: 10px 20px;
577 display: flex;align-items: center;text-align: center; 638 display: inline-flex;
578 font-size: 18px; flex-direction: column;padding: 35px 10px 20px; 639 align-items: center;
579 background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF; 640 }
641
642 .item {
643 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
644 margin: 40px 0 0;
645 display: flex;
646 align-items: center;
647 text-align: center;
648 font-size: 18px;
649 flex-direction: column;
650 padding: 35px 10px 20px;
651 background: url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
580 background-size: cover; 652 background-size: cover;
581 position: relative; 653 position: relative;
582 border-radius: 15px; 654 border-radius: 15px;
583 img{position: absolute;top: -30px} 655
656 img {
657 position: absolute;
658 top: -30px
659 }
584 } 660 }
585 } 661 }
586 662
...@@ -593,13 +669,24 @@ const handlePickup=()=>{ ...@@ -593,13 +669,24 @@ const handlePickup=()=>{
593 clear: both; 669 clear: both;
594 overflow: hidden; 670 overflow: hidden;
595 } 671 }
596 .banner-pp{ position: absolute; bottom: 40%;right: 5%;width: 200px;} 672
673 .banner-pp {
674 position: absolute;
675 bottom: 40%;
676 right: 5%;
677 width: 200px;
678 }
597 679
598 .bannerItem { 680 .bannerItem {
599 height: 450px; 681 height: 450px;
600 background: #000;position: relative; 682 background: #000;
601 .banner-count{position: absolute;padding: 20px 40px; 683 position: relative;
602 font-size: 20px;align-items: center; 684
685 .banner-count {
686 position: absolute;
687 padding: 20px 40px;
688 font-size: 20px;
689 align-items: center;
603 overflow: hidden; 690 overflow: hidden;
604 background: url("@/assets/dance/time_bg.png") no-repeat center; 691 background: url("@/assets/dance/time_bg.png") no-repeat center;
605 background-size: 100% 100%; 692 background-size: 100% 100%;
...@@ -609,22 +696,49 @@ const handlePickup=()=>{ ...@@ -609,22 +696,49 @@ const handlePickup=()=>{
609 //border-image-width:4px; 696 //border-image-width:4px;
610 //border-image-outset:4px; 697 //border-image-outset:4px;
611 //background: rgba(0,0,0,0.3); 698 //background: rgba(0,0,0,0.3);
612 bottom: 40%;display: flex;flex-wrap: nowrap; 699 bottom: 40%;
700 display: flex;
701 flex-wrap: nowrap;
613 right: 5%; 702 right: 5%;
614 color: #fff; 703 color: #fff;
615 .van-count-down{display: flex;color: #fff;margin: 0 0 0 20px; 704
705 .van-count-down {
706 display: flex;
707 color: #fff;
708 margin: 0 0 0 20px;
616 width: 360px; 709 width: 360px;
617 font-size: 41px;}
618 .block{ color: #fff;text-align: center;width: 3em;
619 font-size: 41px; 710 font-size: 41px;
620 font-family: DIN Alternate;}
621 .colon{ color: #fff;display: block;margin: 20px 0 0;
622 font-size: 20px;}
623 } 711 }
624 .bb{width: 580px;justify-content: center;height: 100px;font-size: 30px;} 712
625 .banner-count.bb:hover{box-shadow: 0 0 20px #453DEA;border-radius: 100px; 713 .block {
714 color: #fff;
715 text-align: center;
716 width: 3em;
717 font-size: 41px;
718 font-family: DIN Alternate;
719 }
720
721 .colon {
722 color: #fff;
723 display: block;
724 margin: 20px 0 0;
725 font-size: 20px;
726 }
727 }
728
729 .bb {
730 width: 580px;
731 justify-content: center;
732 height: 100px;
733 font-size: 30px;
734 }
735
736 .banner-count.bb:hover {
737 box-shadow: 0 0 20px #453DEA;
738 border-radius: 100px;
626 background: linear-gradient(-90deg, #8623FC, #453DEA) 739 background: linear-gradient(-90deg, #8623FC, #453DEA)
627 } 740 }
741
628 .box { 742 .box {
629 position: absolute; 743 position: absolute;
630 height: 100%; 744 height: 100%;
...@@ -653,7 +767,8 @@ const handlePickup=()=>{ ...@@ -653,7 +767,8 @@ const handlePickup=()=>{
653 } 767 }
654 768
655 .banner { 769 .banner {
656 position: relative;margin:0 0 30px; 770 position: relative;
771 margin: 0 0 30px;
657 772
658 :deep(.el-carousel__arrow) { 773 :deep(.el-carousel__arrow) {
659 border-radius: 0; 774 border-radius: 0;
...@@ -681,41 +796,121 @@ const handlePickup=()=>{ ...@@ -681,41 +796,121 @@ const handlePickup=()=>{
681 background-size: contain 796 background-size: contain
682 } 797 }
683 } 798 }
684 .el-calendar{--el-calendar-border:none;--el-calendar-cell-width:40px;text-align:center; 799
685 --el-text-color-regular:#8E8D94; 800 .el-calendar {
686 :deep(.el-calendar__header){justify-content: center;padding: 0 0 10px} 801 --el-calendar-border: none;
687 :deep(.el-calendar__body){border: 1px solid #F0F0F0;padding: 0} 802 --el-calendar-cell-width: 40px;
688 :deep(.el-calendar-table .el-calendar-day){padding: 1px;} 803 text-align: center;
689 :deep(.el-calendar-table td.is-selected){background: transparent;} 804 --el-text-color-regular: #8E8D94;
690 :deep(.el-calendar__button-group){display: none;} 805
691 :deep(.el-calendar-table thead th){padding: 5px 0 0} 806 :deep(.el-calendar__header) {
692 .primaryDate{color: #fff; 807 justify-content: center;
693 background: linear-gradient(90deg, #8623FC, #453DEA);} 808 padding: 0 0 10px
694 .date{ margin:auto;border-radius: 50%;width: 30px;height: 30px;line-height: 30px; 809 }
810
811 :deep(.el-calendar__body) {
812 border: 1px solid #F0F0F0;
813 padding: 0
814 }
815
816 :deep(.el-calendar-table .el-calendar-day) {
817 padding: 1px;
818 }
819
820 :deep(.el-calendar-table td.is-selected) {
821 background: transparent;
822 }
823
824 :deep(.el-calendar__button-group) {
825 display: none;
826 }
827
828 :deep(.el-calendar-table thead th) {
829 padding: 5px 0 0
830 }
831
832 .primaryDate {
833 color: #fff;
834 background: linear-gradient(90deg, #8623FC, #453DEA);
835 }
836
837 .date {
838 margin: auto;
839 border-radius: 50%;
840 width: 30px;
841 height: 30px;
842 line-height: 30px;
695 font-weight: bold; 843 font-weight: bold;
696 } 844 }
697 } 845 }
698 846
699 .calendarList{border: 1px solid #F0F0F0;padding:12px 20px;overflow: auto;height: 233px; 847 .calendarList {
700 ul{ 848 border: 1px solid #F0F0F0;
701 li{background: #F6F9FE;margin:7px 0 7px 0;position: relative;padding: 13px; 849 padding: 12px 20px;
850 overflow: auto;
851 height: 233px;
852
853 ul {
854 li {
855 background: #F6F9FE;
856 margin: 7px 0 7px 0;
857 position: relative;
858 padding: 13px;
702 border-radius: 10px; 859 border-radius: 10px;
703 font-weight: 500; 860 font-weight: 500;
704 font-size: 15px; 861 font-size: 15px;
705 label{color: #453DEA;margin-right: 15px; 862
706 &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto; 863 label {
707 border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1} 864 color: #453DEA;
865 margin-right: 15px;
866
867 &::before {
868 content: '';
869 background: #fff;
870 left: -17px;
871 top: 0px;
872 bottom: 0;
873 margin: auto;
874 border-radius: 50%;
875 width: 2px;
876 height: 2px;
877 position: absolute;
878 z-index: 1
708 } 879 }
709 } 880 }
710 li::before{content: '';background: linear-gradient(0deg, #8623FC, #453DEA);
711 border-radius: 50%;width: 8px;height: 8px;position: absolute;
712 left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1;
713 } 881 }
714 li::after{content: ''; left: -16px;width: 1px;height: 100%; 882
715 background: #EBEBEB; position: absolute;top: 20px} 883 li::before {
716 li:hover{color: #fff; 884 content: '';
885 background: linear-gradient(0deg, #8623FC, #453DEA);
886 border-radius: 50%;
887 width: 8px;
888 height: 8px;
889 position: absolute;
890 left: -20px;
891 top: 0;
892 bottom: 0;
893 margin: auto;
894 z-index: 1;
895 }
896
897 li::after {
898 content: '';
899 left: -16px;
900 width: 1px;
901 height: 100%;
902 background: #EBEBEB;
903 position: absolute;
904 top: 20px
905 }
906
907 li:hover {
908 color: #fff;
717 background: linear-gradient(-90deg, #8623FC, #453DEA); 909 background: linear-gradient(-90deg, #8623FC, #453DEA);
718 label{color: #fff;} 910
911 label {
912 color: #fff;
913 }
719 } 914 }
720 } 915 }
721 } 916 }
...@@ -741,115 +936,295 @@ const handlePickup=()=>{ ...@@ -741,115 +936,295 @@ const handlePickup=()=>{
741 } 936 }
742 } 937 }
743 938
744 .teacher{height: 410px;background: #fff; 939 .teacher {
745 position: relative;border-radius: 10px;overflow: hidden; 940 height: 410px;
746 .imgbox{background: linear-gradient(0,#C8AAFC,#fff)} 941 background: #fff;
747 img{height: 350px;width: 100%;object-fit: cover;} 942 position: relative;
748 h3{color: #fff;background: url("@/assets/dance/name_bg.png") no-repeat center; 943 border-radius: 10px;
749 background-size:110% 100%;text-align: center;height: 30px;line-height: 30px; 944 overflow: hidden;
750 font-size: 18px;position: absolute;width: 100%;bottom: 30px;} 945
751 p{text-align: center;margin: 25px 0 0; 946 .imgbox {
752 font-size: 14px;} 947 background: linear-gradient(0, #C8AAFC, #fff)
948 }
949
950 img {
951 height: 350px;
952 width: 100%;
953 object-fit: cover;
954 }
955
956 h3 {
957 color: #fff;
958 background: url("@/assets/dance/name_bg.png") no-repeat center;
959 background-size: 110% 100%;
960 text-align: center;
961 height: 30px;
962 line-height: 30px;
963 font-size: 18px;
964 position: absolute;
965 width: 100%;
966 bottom: 30px;
967 }
968
969 p {
970 text-align: center;
971 margin: 25px 0 0;
972 font-size: 14px;
973 }
753 } 974 }
975
754 @media screen and (max-width: 1650px) { 976 @media screen and (max-width: 1650px) {
755 .teacher{height: 320px; 977 .teacher {
756 .imgbox{ 978 height: 320px;
757 img{height: 260px} 979
980 .imgbox {
981 img {
982 height: 260px
983 }
758 } 984 }
759 } 985 }
760 } 986 }
987
761 @media screen and (max-width: 1200px) { 988 @media screen and (max-width: 1200px) {
762 .teacher{height: 450px;margin: 0 0 20px; 989 .teacher {
763 .imgbox{ 990 height: 450px;
764 img{height: 390px} 991 margin: 0 0 20px;
992
993 .imgbox {
994 img {
995 height: 390px
996 }
765 } 997 }
766 } 998 }
767 } 999 }
1000
768 @media screen and (max-width: 900px) { 1001 @media screen and (max-width: 900px) {
769 .teacher{height: 400px;margin: 0 0 20px; 1002 .teacher {
770 .imgbox{ 1003 height: 400px;
771 img{height: 340px} 1004 margin: 0 0 20px;
1005
1006 .imgbox {
1007 img {
1008 height: 340px
1009 }
772 } 1010 }
773 } 1011 }
774 } 1012 }
1013
775 @media screen and (max-width: 800px) { 1014 @media screen and (max-width: 800px) {
776 .teacher{height: 400px;margin: 0 0 20px; 1015 .teacher {
777 .imgbox{ 1016 height: 400px;
778 img{height: 260px} 1017 margin: 0 0 20px;
1018
1019 .imgbox {
1020 img {
1021 height: 260px
1022 }
779 } 1023 }
780 } 1024 }
781 } 1025 }
782 .aboutBox{background: url("@/assets/dance/about_bg.png") no-repeat center;height: 375px; 1026
783 background-size: cover;padding: 40px 60px; position: relative; 1027 .aboutBox {
784 .content{font-size: 18px;line-height: 2.2;height: 240px;overflow: hidden; 1028 background: url("@/assets/dance/about_bg.png") no-repeat center;
785 text-align: left;text-indent: 2em;} 1029 height: 375px;
786 .shadowbox{position: absolute;left: 0;bottom: 90px;height: 100px;width: 100%; 1030 background-size: cover;
787 background: linear-gradient(0deg,rgba(255,255,255,1),rgba(255,255,255,0)); 1031 padding: 40px 60px;
1032 position: relative;
1033
1034 .content {
1035 font-size: 18px;
1036 line-height: 2.2;
1037 height: 240px;
1038 overflow: hidden;
1039 text-align: left;
1040 text-indent: 2em;
1041 }
1042
1043 .shadowbox {
1044 position: absolute;
1045 left: 0;
1046 bottom: 90px;
1047 height: 100px;
1048 width: 100%;
1049 background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
1050 }
1051
1052 .btn-lineG {
788 } 1053 }
789 .btn-lineG{}
790 } 1054 }
791 .mapBox{background: url("@/assets/dance/map.png") no-repeat center;height: 375px; 1055
792 background-size: cover;padding: 1px;position: relative;display: flex; 1056 .mapBox {
793 .content{background: #fff;width: 60%;left: 40px;padding: 30px; 1057 background: url("@/assets/dance/map.png") no-repeat center;
794 position: absolute;height: 90%;top: 0;bottom: 0;margin: auto; 1058 height: 375px;
1059 background-size: cover;
1060 padding: 1px;
1061 position: relative;
1062 display: flex;
1063
1064 .content {
1065 background: #fff;
1066 width: 60%;
1067 left: 40px;
1068 padding: 30px;
1069 position: absolute;
1070 height: 90%;
1071 top: 0;
1072 bottom: 0;
1073 margin: auto;
1074 }
1075
1076 div {
1077 padding-left: 60px;
795 } 1078 }
796 div{padding-left: 60px;} 1079
797 .phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;} 1080 .phone {
798 .address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px; 1081 background: url("@/assets/dance/map01.png") no-repeat left;
799 margin:50px 0; 1082 background-size: 30px;
1083 }
1084
1085 .address {
1086 background: url("@/assets/dance/map02.png") no-repeat left;
1087 background-size: 30px;
1088 margin: 50px 0;
1089 }
1090
1091 .email {
1092 background: url("@/assets/dance/map03.png") no-repeat left;
1093 background-size: 30px;
800 } 1094 }
801 .email{background: url("@/assets/dance/map03.png") no-repeat left;background-size: 30px;} 1095
802 h4{margin: 0; 1096 h4 {
1097 margin: 0;
803 font-size: 16px; 1098 font-size: 16px;
804 color: #AAAAAA;} 1099 color: #AAAAAA;
805 p{margin: 13px 0 0;} 1100 }
1101
1102 p {
1103 margin: 13px 0 0;
1104 }
806 } 1105 }
807 .logobox{background: #fff;height: 180px;border-radius: 10px;margin: 0 0 30px; 1106
808 img{width: 100%;height: 100%;object-fit: contain;} 1107 .logobox {
1108 background: #fff;
1109 height: 180px;
1110 border-radius: 10px;
1111 margin: 0 0 30px;
1112
1113 img {
1114 width: 100%;
1115 height: 100%;
1116 object-fit: contain;
1117 }
809 } 1118 }
810 .swiperPic{background: #F3F1FE;position: relative; height: 100%; 1119
1120 .swiperPic {
1121 background: #F3F1FE;
1122 position: relative;
1123 height: 100%;
811 padding: 20px 45px; 1124 padding: 20px 45px;
812 .picprev{position: absolute; left: 5px;top: 0;bottom:0;margin: auto;height: 33px; 1125
1126 .picprev {
1127 position: absolute;
1128 left: 5px;
1129 top: 0;
1130 bottom: 0;
1131 margin: auto;
1132 height: 33px;
813 cursor: pointer; 1133 cursor: pointer;
814 &:hover{filter:brightness(2)} 1134
1135 &:hover {
1136 filter: brightness(2)
815 } 1137 }
816 .picnext{position: absolute;right: 5px;top: 0;bottom:0;margin: auto;height: 33px; 1138 }
1139
1140 .picnext {
1141 position: absolute;
1142 right: 5px;
1143 top: 0;
1144 bottom: 0;
1145 margin: auto;
1146 height: 33px;
817 cursor: pointer; 1147 cursor: pointer;
818 &:hover{filter:brightness(2)}} 1148
1149 &:hover {
1150 filter: brightness(2)
1151 }
1152 }
819 } 1153 }
820 1154
821 @media (max-width: 800px) { 1155 @media (max-width: 800px) {
822 .box{width: 94%} 1156 .box {
823 .calendarList{padding: 0; 1157 width: 94%
824 ul{ 1158 }
825 li{margin: 10px} 1159 .calendarList {
1160 padding: 0;
1161
1162 ul {
1163 li {
1164 margin: 10px
1165 }
826 } 1166 }
827 } 1167 }
828 .aboutBox{padding: 20px 30px;} 1168 .aboutBox {
829 .indexTitle{margin: 30px 0 20px} 1169 padding: 20px 30px;
830 .teacher{height: 320px;margin: 0 0 20px; 1170 }
831 img{height: 260px} 1171 .indexTitle {
1172 margin: 30px 0 20px
1173 }
1174 .teacher {
1175 height: 320px;
1176 margin: 0 0 20px;
1177
1178 img {
1179 height: 260px
1180 }
1181 }
1182 .activeItem {
1183 margin: 0 0 20px;
1184 }
1185 .mapBox {
1186 div {
1187 padding-left: 40px;
1188 }
1189
1190 .content {
1191 width: 80%;
1192 left: 10%;
1193 padding: 10px 20px 0 20px;
1194 }
1195
1196 .address {
1197 margin: 30px 0;
1198 }
1199
1200 p {
1201 text-align: left;
1202 word-break: break-all;
832 } 1203 }
833 .activeItem{margin: 0 0 20px;}
834 .mapBox{
835 div{padding-left: 40px;}
836 .content{ width: 80%;left: 10%;padding:10px 20px 0 20px;}
837 .address{margin: 30px 0;}
838 p{text-align: left;word-break: break-all;}
839 } 1204 }
840 .fixed_gg { 1205 .fixed_gg {
841 display: none; 1206 display: none;
842 } 1207 }
843 .bannerItem .banner-count{flex-direction: column; 1208 .bannerItem .banner-count {
844 transform: scale(0.5); width: auto; 1209 flex-direction: column;
1210 transform: scale(0.5);
1211 width: auto;
845 left: 0; 1212 left: 0;
846 right: 0; 1213 right: 0;
847 .van-count-down{margin: 30px 0 0;} 1214
1215 .van-count-down {
1216 margin: 30px 0 0;
1217 }
1218 }
1219 .bgbg {
1220 text-align: center;
1221
1222 h1 {
1223 text-align: center
848 } 1224 }
849 .bgbg{ text-align: center;
850 h1{text-align: center}
851 } 1225 }
852 } 1226 }
1227
853 :deep(.btn-q) { 1228 :deep(.btn-q) {
854 //background: #FFFFFF; 1229 //background: #FFFFFF;
855 //font-size: 18px; 1230 //font-size: 18px;
...@@ -872,16 +1247,16 @@ const handlePickup=()=>{ ...@@ -872,16 +1247,16 @@ const handlePickup=()=>{
872 box-sizing: inherit; 1247 box-sizing: inherit;
873 } 1248 }
874 1249
875 .btn-q:hover{ 1250 .btn-q:hover {
876 box-shadow: 0 0 20px #453DEA; 1251 box-shadow: 0 0 20px #453DEA;
877 border-radius: 100px; 1252 border-radius: 100px;
878 background: linear-gradient(-90deg, #8623FC, #453DEA) !important; 1253 background: linear-gradient(-90deg, #8623FC, #453DEA) !important;
879 } 1254 }
880 1255
881 .ding{ 1256 .ding {
882 position: fixed; 1257 position: fixed;
883 right:0px; 1258 right: 0px;
884 z-index:99; 1259 z-index: 99;
885 top: 40%; 1260 top: 40%;
886 background: linear-gradient(-90deg, #8623FC, #453DEA) !important; 1261 background: linear-gradient(-90deg, #8623FC, #453DEA) !important;
887 box-shadow: none; 1262 box-shadow: none;
...@@ -890,16 +1265,34 @@ const handlePickup=()=>{ ...@@ -890,16 +1265,34 @@ const handlePickup=()=>{
890 //height: 100px; 1265 //height: 100px;
891 padding: 20px; 1266 padding: 20px;
892 } 1267 }
893 .mb30{margin-bottom: 30px;} 1268
894 .livetimecount{position: absolute;top: 0;z-index: 2;background: #F04035; 1269 .mb30 {
1270 margin-bottom: 30px;
1271 }
1272
1273 .livetimecount {
1274 position: absolute;
1275 top: 0;
1276 z-index: 2;
1277 background: #F04035;
895 padding: 2px 4px; 1278 padding: 2px 4px;
896 &::after{content: ''; width: 0; 1279
897 height: 0;position: absolute;right: -15px;top: 0; 1280 &::after {
1281 content: '';
1282 width: 0;
1283 height: 0;
1284 position: absolute;
1285 right: -15px;
1286 top: 0;
898 border-top: 24px solid #F04035; 1287 border-top: 24px solid #F04035;
899 border-right: 15px solid transparent;} 1288 border-right: 15px solid transparent;
900 .van-count-down { display: flex; 1289 }
1290
1291 .van-count-down {
1292 display: flex;
901 color: #fff; 1293 color: #fff;
902 font-size: 14px; 1294 font-size: 14px;
1295
903 .block { 1296 .block {
904 color: #fff; 1297 color: #fff;
905 text-align: center; 1298 text-align: center;
...@@ -908,13 +1301,23 @@ const handlePickup=()=>{ ...@@ -908,13 +1301,23 @@ const handlePickup=()=>{
908 } 1301 }
909 } 1302 }
910 } 1303 }
1304
911 @media (max-width: 500px) { 1305 @media (max-width: 500px) {
912 .forPc{display: none!important;} 1306 .forPc {
913 .zn-Box .bgbg{padding: 10px 0 0; 1307 display: none !important;
914 .mb30{margin: 0} 1308 }
915 .zn-btn{margin-top: 10px} 1309 .zn-Box .bgbg {
1310 padding: 10px 0 0;
1311
1312 .mb30 {
1313 margin: 0
1314 }
1315
1316 .zn-btn {
1317 margin-top: 10px
1318 }
916 } 1319 }
917 .logobox{ 1320 .logobox {
918 height: 60px; 1321 height: 60px;
919 } 1322 }
920 } 1323 }
......
src/viewsPc/saiC/index.vue
...@@ -5,28 +5,31 @@ ...@@ -5,28 +5,31 @@
5 <div class="mt20" /> 5 <div class="mt20" />
6 <el-card> 6 <el-card>
7 <el-row :gutter="20"> 7 <el-row :gutter="20">
8 <el-col :sm="24" :lg="12"> 8 <el-col :lg="12" :sm="24">
9 <!--赛事日历--> 9 <!--赛事日历-->
10 10
11 <el-calendar v-model="currentDate"> 11 <el-calendar v-model="currentDate">
12 <template #date-cell="data"> 12 <template #date-cell="data">
13 13
14 <div class="date" :class="data.data.day==query.currentDate?'primaryDate':''" @click="selectDate(data.data.day)"> 14 <div
15 {{ data.data.day.slice(8,10) }} 15 :class="data.data.day==query.currentDate?'primaryDate':''" class="date"
16 @click="selectDate(data.data.day)"
17 >
18 {{ data.data.day.slice(8, 10) }}
16 </div> 19 </div>
17 20
18 </template> 21 </template>
19 </el-calendar> 22 </el-calendar>
20 23
21 </el-col> 24 </el-col>
22 <el-col :sm="24" :lg="12"> 25 <el-col :lg="12" :sm="24">
23 <div class="calendarList"> 26 <div class="calendarList">
24 <ul v-loading="loading"> 27 <ul v-loading="loading">
25 <li v-for="n in schList" @click="goMatch(n)"> 28 <li v-for="n in schList" @click="goMatch(n)">
26 <label>{{ n.timeStr }}</label> 29 <label>{{ n.timeStr }}</label>
27 <div class="esp mt5">{{ n.name }}</div> 30 <div class="esp mt5">{{ n.name }}</div>
28 </li> 31 </li>
29 <el-empty v-if="schList.length== 0" :image="`/img/order_no.png`" :image-size="200"/> 32 <el-empty v-if="schList.length== 0" :image="`/img/order_no.png`" :image-size="200" />
30 </ul> 33 </ul>
31 </div> 34 </div>
32 35
...@@ -34,8 +37,8 @@ ...@@ -34,8 +37,8 @@
34 </el-row> 37 </el-row>
35 </el-card> 38 </el-card>
36 <el-card class="mt20 mb20"> 39 <el-card class="mt20 mb20">
37 <el-table stripe :data="rank"> 40 <el-table :data="rank" stripe>
38 <el-table-column label="名次" align="center" type="index"> 41 <el-table-column align="center" label="名次" type="index">
39 <template #default="scope"> 42 <template #default="scope">
40 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span> 43 <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
41 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span> 44 <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
...@@ -47,12 +50,12 @@ ...@@ -47,12 +50,12 @@
47 <el-table-column label="国家" prop="name"> 50 <el-table-column label="国家" prop="name">
48 <template #default="scope"> 51 <template #default="scope">
49 <div> 52 <div>
50 <span :class="`flag-icon flag-icon-${scope.row.code}`"></span> 53 <span :class="`flag-icon flag-icon-${scope.row.code}`" />
51 {{ scope.row.countryName }} 54 {{ scope.row.countryName }}
52 </div> 55 </div>
53 </template> 56 </template>
54 </el-table-column> 57 </el-table-column>
55 <el-table-column label="组合" align="center"> 58 <el-table-column align="center" label="组合">
56 <template #default="scope"> 59 <template #default="scope">
57 <div class="text-primary esp">{{ scope.row.zuHe }}</div> 60 <div class="text-primary esp">{{ scope.row.zuHe }}</div>
58 </template> 61 </template>
...@@ -84,29 +87,29 @@ ...@@ -84,29 +87,29 @@
84 </el-table> 87 </el-table>
85 88
86 </el-card> 89 </el-card>
87 <el-card class="mt20 mb20" v-for="(n,index) in cjList" hidden> 90 <el-card v-for="(n,index) in cjList" class="mt20 mb20" hidden>
88 <div class="leftboderTT">{{ language==0?n.title:n.en_title }}</div> 91 <div class="leftboderTT">{{ language == 0 ? n.title : n.en_title }}</div>
89 <div v-for="(m,jndex) in n.list"> 92 <div v-for="(m,jndex) in n.list">
90 <h3 class="text-center">{{ m.title }}</h3> 93 <h3 class="text-center">{{ m.title }}</h3>
91 <div class="tablebody"> 94 <div class="tablebody">
92 <table class="table table-striped"> 95 <table class="table table-striped">
93 <thead> 96 <thead>
94 <tr class="bg-lineg"> 97 <tr class="bg-lineg">
95 <td class="text-center" style="width: 120px;">{{ language==0?'名次':'RANK' }}</td> 98 <td class="text-center" style="width: 120px;">{{ language == 0 ? '名次' : 'RANK' }}</td>
96 <td class="text-center">{{ language==0?'组合':'COUPLE' }}</td> 99 <td class="text-center">{{ language == 0 ? '组合' : 'COUPLE' }}</td>
97 <td class="text-center w15">{{ language==0?'国家':'COUNTRY' }}</td> 100 <td class="text-center w15">{{ language == 0 ? '国家' : 'COUNTRY' }}</td>
98 <td class="text-center w15">START #</td> 101 <td class="text-center w15">START #</td>
99 <td class="text-center w15" v-if="index>0">BASE</td> 102 <td v-if="index>0" class="text-center w15">BASE</td>
100 <td class="text-center w15" v-if="index>0">POINTS</td> 103 <td v-if="index>0" class="text-center w15">POINTS</td>
101 </tr> 104 </tr>
102 </thead> 105 </thead>
103 <tbody> 106 <tbody>
104 <tr v-for="(l,kndex) in m.rows"> 107 <tr v-for="(l,kndex) in m.rows">
105 <td class="text-center">{{ l.RANK }}</td> 108 <td class="text-center">{{ l.RANK }}</td>
106 <td class="text-center">{{ l.COUPLE}}</td> 109 <td class="text-center">{{ l.COUPLE }}</td>
107 <td class="text-center">{{ l.COUNTRY }}</td> 110 <td class="text-center">{{ l.COUNTRY }}</td>
108 <td class="text-primary text-center">{{ l.START }}</td> 111 <td class="text-primary text-center">{{ l.START }}</td>
109 <td class="text-center" v-if="index>0">{{l.BASE}}</td> 112 <td v-if="index>0" class="text-center">{{ l.BASE }}</td>
110 <td v-if="index>0" class="text-primary text-center">{{ l.POINTS }}</td> 113 <td v-if="index>0" class="text-primary text-center">{{ l.POINTS }}</td>
111 </tr> 114 </tr>
112 </tbody> 115 </tbody>
...@@ -123,14 +126,16 @@ ...@@ -123,14 +126,16 @@
123 <script setup> 126 <script setup>
124 import { onMounted, ref, watch } from 'vue' 127 import { onMounted, ref, watch } from 'vue'
125 import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train' 128 import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train'
126 import {cjList} from '@/assets/js/data' 129 import { cjList } from '@/assets/js/data'
127 import { ArrowRight } from '@element-plus/icons-vue' 130 import { ArrowRight } from '@element-plus/icons-vue'
128 import { dayjs } from 'element-plus' 131 import { dayjs } from 'element-plus'
132
129 const router = useRouter() 133 const router = useRouter()
130 import {useStorage} from "@vueuse/core/index"; 134 import { useStorage } from '@vueuse/core/index'
131 import {getIndexScheduleList} from "@/apiPc/common"; 135 import { getIndexScheduleList } from '@/apiPc/common'
132 import {getRank} from '@/apiPc/webSite' 136 import { getRank } from '@/apiPc/webSite'
133 import {useRouter} from "vue-router"; 137 import { useRouter } from 'vue-router'
138
134 const language = useStorage('language', 0) 139 const language = useStorage('language', 0)
135 const years = ref([]) 140 const years = ref([])
136 const currYear = ref(null) 141 const currYear = ref(null)
...@@ -139,33 +144,37 @@ const planList = ref([]) ...@@ -139,33 +144,37 @@ const planList = ref([])
139 const rank = ref([]) 144 const rank = ref([])
140 const schList = ref([]) 145 const schList = ref([])
141 const loading = ref(false) 146 const loading = ref(false)
142 const currentDate = ref(dayjs('2024-07-17').toDate()) 147 const currentDate = ref(dayjs('2025-07-17').toDate())
143 const query = ref({ 148 const query = ref({
144 // currentDate:dayjs().format('YYYY-MM-DD') 149 // currentDate:dayjs().format('YYYY-MM-DD')
145 currentDate: '2024-07-17' 150 currentDate: '2025-07-17'
146 }) 151 })
147 152
148 getScheduleList() 153 getScheduleList()
149 getRankList() 154 getRankList()
155
150 function getRankList() { 156 function getRankList() {
151 getRank().then(res=>{ 157 getRank().then(res => {
152 rank.value = res.data 158 rank.value = res.data
153 }) 159 })
154 } 160 }
161
155 function getScheduleList() { 162 function getScheduleList() {
156 loading.value = true 163 loading.value = true
157 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD') 164 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
158 getIndexScheduleList(query.value).then(res=>{ 165 getIndexScheduleList(query.value).then(res => {
159 loading.value = false 166 loading.value = false
160 schList.value = res.data 167 schList.value = res.data
161 }) 168 })
162 } 169 }
170
163 function selectDate(date) { 171 function selectDate(date) {
164 console.log(dayjs(date).toDate()) 172 console.log(dayjs(date).toDate())
165 console.log(query.value.currentDate) 173 console.log(query.value.currentDate)
166 query.value.currentDate = dayjs(date).toDate() 174 query.value.currentDate = dayjs(date).toDate()
167 getScheduleList() 175 getScheduleList()
168 } 176 }
177
169 function goMatch(n) { 178 function goMatch(n) {
170 router.push({ 179 router.push({
171 name: 'matchDetail', 180 name: 'matchDetail',
...@@ -179,59 +188,157 @@ function goMatch(n) { ...@@ -179,59 +188,157 @@ function goMatch(n) {
179 } 188 }
180 </script> 189 </script>
181 190
182 <style scoped lang="scss"> 191 <style lang="scss" scoped>
183 .leftboderTT{margin: 0 0 20px;color: var(--el-color-primary); 192 .leftboderTT {
184 font-size: 20px;} 193 margin: 0 0 20px;
185 h3{background: #F5F0FF;margin: 0;padding: 10px 0;
186 color: var(--el-color-primary); 194 color: var(--el-color-primary);
187 font-size: 18px;} 195 font-size: 20px;
188 .table { border-spacing: 0; 196 }
197
198 h3 {
199 background: #F5F0FF;
200 margin: 0;
201 padding: 10px 0;
202 color: var(--el-color-primary);
203 font-size: 18px;
204 }
205
206 .table {
207 border-spacing: 0;
189 border-collapse: collapse; 208 border-collapse: collapse;
190 width: 100%; 209 width: 100%;
191 max-width: 100%; 210 max-width: 100%;
192 margin-bottom: 20px; 211 margin-bottom: 20px;
193 td,th{ padding: 8px; font-size: 14px;} 212
213 td, th {
214 padding: 8px;
215 font-size: 14px;
216 }
194 } 217 }
195 :deep(.table-striped > tbody > tr:nth-of-type(odd)){ 218
219 :deep(.table-striped > tbody > tr:nth-of-type(odd)) {
196 background: #F6F9FE; 220 background: #F6F9FE;
197 } 221 }
198 222
199 .el-calendar{--el-calendar-border:none;--el-calendar-cell-width:51px;text-align:center; 223 .el-calendar {
200 --el-text-color-regular:#8E8D94; 224 --el-calendar-border: none;
201 :deep(.el-calendar__header){justify-content: center;} 225 --el-calendar-cell-width: 51px;
202 :deep(.el-calendar__body){border: 1px solid #F0F0F0;padding: 0} 226 text-align: center;
203 :deep(.el-calendar-table .el-calendar-day){padding: 1px;} 227 --el-text-color-regular: #8E8D94;
204 :deep(.el-calendar-table td.is-selected){background: transparent;} 228
205 :deep(.el-calendar__button-group){display: none;} 229 :deep(.el-calendar__header) {
230 justify-content: center;
231 }
232
233 :deep(.el-calendar__body) {
234 border: 1px solid #F0F0F0;
235 padding: 0
236 }
237
238 :deep(.el-calendar-table .el-calendar-day) {
239 padding: 1px;
240 }
241
242 :deep(.el-calendar-table td.is-selected) {
243 background: transparent;
244 }
245
246 :deep(.el-calendar__button-group) {
247 display: none;
248 }
249 }
250
251 .primaryDate {
252 color: #fff;
253 background: linear-gradient(90deg, #8623FC, #453DEA);
206 } 254 }
207 .primaryDate{color: #fff; 255
208 background: linear-gradient(90deg, #8623FC, #453DEA);} 256 .date {
209 .date{ margin:5px auto;border-radius: 50%;width: 34px;height: 34px;line-height: 34px; 257 margin: 5px auto;
258 border-radius: 50%;
259 width: 34px;
260 height: 34px;
261 line-height: 34px;
210 font-weight: bold; 262 font-weight: bold;
211 } 263 }
212 .calendarList{border: 1px solid #F0F0F0;padding:12px 20px 0;overflow: hidden; 264
265 .calendarList {
266 border: 1px solid #F0F0F0;
267 padding: 12px 20px 0;
268 overflow: hidden;
213 height: 100%; 269 height: 100%;
214 ul{ overflow: auto;height: 330px;margin: 0; 270
215 li{background: #F6F9FE;margin:7px 0 7px 20px;position: relative;padding: 13px; 271 ul {
272 overflow: auto;
273 height: 330px;
274 margin: 0;
275
276 li {
277 background: #F6F9FE;
278 margin: 7px 0 7px 20px;
279 position: relative;
280 padding: 13px;
216 border-radius: 10px; 281 border-radius: 10px;
217 font-weight: 500; 282 font-weight: 500;
218 font-size: 15px;cursor: pointer; 283 font-size: 15px;
219 label{color: #453DEA;margin-right: 15px; 284 cursor: pointer;
220 &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto; 285
221 border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1} 286 label {
287 color: #453DEA;
288 margin-right: 15px;
289
290 &::before {
291 content: '';
292 background: #fff;
293 left: -17px;
294 top: 0px;
295 bottom: 0;
296 margin: auto;
297 border-radius: 50%;
298 width: 2px;
299 height: 2px;
300 position: absolute;
301 z-index: 1
222 } 302 }
223 } 303 }
224 li::before{content: '';background: linear-gradient(0deg, #8623FC, #453DEA);
225 border-radius: 50%;width: 8px;height: 8px;position: absolute;
226 left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1;
227 } 304 }
228 li::after{content: ''; left: -16px;width: 1px;height: 100%; 305
229 background: #EBEBEB; position: absolute;top: 20px} 306 li::before {
230 li:hover{color: #fff; 307 content: '';
308 background: linear-gradient(0deg, #8623FC, #453DEA);
309 border-radius: 50%;
310 width: 8px;
311 height: 8px;
312 position: absolute;
313 left: -20px;
314 top: 0;
315 bottom: 0;
316 margin: auto;
317 z-index: 1;
318 }
319
320 li::after {
321 content: '';
322 left: -16px;
323 width: 1px;
324 height: 100%;
325 background: #EBEBEB;
326 position: absolute;
327 top: 20px
328 }
329
330 li:hover {
331 color: #fff;
231 background: linear-gradient(-90deg, #8623FC, #453DEA); 332 background: linear-gradient(-90deg, #8623FC, #453DEA);
232 label{color: #fff;} 333
334 label {
335 color: #fff;
336 }
233 } 337 }
234 } 338 }
235 } 339 }
236 .w15{width: 15%;} 340
341 .w15 {
342 width: 15%;
343 }
237 </style> 344 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!