Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
db6a9a5e by zhangmeng
Options

按钮控制

1 parent fcfc577a
Inline Side-by-side
Showing 4 changed files with 908 additions and 444 deletions
src/viewsPc/components/homeQuick.vue
1 <template> 1 <template>
2 <div class="itemBox" v-if="language === 0"> 2 <div v-if="language === 0" class="itemBox">
3 <el-row :gutter="20"> 3 <el-row :gutter="20">
4 <el-col :sm="12" :lg="4" :xs="12"> 4 <el-col :lg="4" :sm="12" :xs="12">
5 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">签证服务</div> 5 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">签证服务</div>
6 </el-col> 6 </el-col>
7 <el-col :sm="12" :lg="4" :xs="12"> 7 <el-col :lg="4" :sm="12" :xs="12">
8 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">酒店预订</div> 8 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">酒店预订</div>
9 </el-col> 9 </el-col>
10 <el-col :sm="12" :lg="4" :xs="12"> 10 <el-col :lg="4" :sm="12" :xs="12">
11 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div> 11 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div>
12 </el-col> 12 </el-col>
13 <el-col :sm="12" :lg="4" :xs="12"> 13 <el-col :lg="4" :sm="12" :xs="12">
14 <div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">票务服务</div> 14 <div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">票务服务</div>
15 </el-col> 15 </el-col>
16 <el-col :sm="12" :lg="4" :xs="12"> 16 <el-col :lg="4" :sm="12" :xs="12">
17 <div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">媒体注册</div> 17 <div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">媒体注册</div>
18 </el-col> 18 </el-col>
19 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 19 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
...@@ -24,27 +24,27 @@ ...@@ -24,27 +24,27 @@
24 <!-- </el-col>--> 24 <!-- </el-col>-->
25 </el-row> 25 </el-row>
26 </div> 26 </div>
27 <div class="itemBox_en" v-else> 27 <div v-else class="itemBox_en">
28 <el-row :gutter="20" justify="space-around"> 28 <el-row :gutter="20" justify="space-around">
29 <el-col :sm="12" :lg="4" :xs="12"> 29 <el-col :lg="4" :sm="12" :xs="12">
30 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">Visa Services</div> 30 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">Visa Services</div>
31 </el-col> 31 </el-col>
32 <el-col :sm="12" :lg="4" :xs="12"> 32 <el-col :lg="4" :sm="12" :xs="12">
33 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div> 33 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div>
34 </el-col> 34 </el-col>
35 <el-col :sm="12" :lg="4" :xs="12"> 35 <el-col :lg="4" :sm="12" :xs="12">
36 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div> 36 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div>
37 </el-col> 37 </el-col>
38 <el-col :sm="12" :lg="4" :xs="12"> 38 <el-col :lg="4" :sm="12" :xs="12">
39 <div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">TICKET SERVICES</div> 39 <div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">TICKET SERVICES</div>
40 </el-col> 40 </el-col>
41 <el-col :sm="12" :lg="4" :xs="12"> 41 <el-col :lg="4" :sm="12" :xs="12">
42 <div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">Media Registration</div> 42 <div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">Media Registration</div>
43 </el-col> 43 </el-col>
44 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 44 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
45 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>--> 45 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>-->
46 <!-- </el-col>--> 46 <!-- </el-col>-->
47 47
48 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 48 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
49 <!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>--> 49 <!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>-->
50 <!-- </el-col>--> 50 <!-- </el-col>-->
...@@ -100,7 +100,7 @@ watch(matchId, (val) => { ...@@ -100,7 +100,7 @@ watch(matchId, (val) => {
100 console.log(err) 100 console.log(err)
101 form.value = null 101 form.value = null
102 }) 102 })
103 103
104 match.getInfoByCptId({cptId: props.matchId}).then((res) => { 104 match.getInfoByCptId({cptId: props.matchId}).then((res) => {
105 liveData.value = res.data || {} 105 liveData.value = res.data || {}
106 }) 106 })
...@@ -109,9 +109,9 @@ watch(matchId, (val) => { ...@@ -109,9 +109,9 @@ watch(matchId, (val) => {
109 109
110 const liveClick = () => { 110 const liveClick = () => {
111 if (liveData.value.videoStatus == "1") { 111 if (liveData.value.videoStatus == "1") {
112 112
113 if (language.value == 0) { 113 if (language.value == 0) {
114 114
115 window.open(liveData.value.videoUrlCn) 115 window.open(liveData.value.videoUrlCn)
116 } else { 116 } else {
117 window.open(liveData.value.videoUrlEn) 117 window.open(liveData.value.videoUrlEn)
...@@ -135,7 +135,7 @@ onMounted(() => { ...@@ -135,7 +135,7 @@ onMounted(() => {
135 135
136 function building() { 136 function building() {
137 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.') 137 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
138 return 138
139 } 139 }
140 140
141 function applyInvitation() { 141 function applyInvitation() {
...@@ -149,9 +149,12 @@ function applyInvitation() { ...@@ -149,9 +149,12 @@ function applyInvitation() {
149 const user = useUserStore().user 149 const user = useUserStore().user
150 150
151 function goMedia() { 151 function goMedia() {
152 proxy.$modal.msgWarning(language.value == 0 ? '暂未开放' : 'Not yet open') 152 // proxy.$modal.msgWarning(language.value == 0 ? '暂未开放' : 'Not yet open')
153 return; 153 // return;
154 154 if (form.value.isMedia == 0) {
155 building()
156 return
157 }
155 //如果没登录 158 //如果没登录
156 if (!user) { 159 if (!user) {
157 ElMessage({ 160 ElMessage({
...@@ -160,7 +163,7 @@ function goMedia() { ...@@ -160,7 +163,7 @@ function goMedia() {
160 }) 163 })
161 return 164 return
162 } 165 }
163 166
164 proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value}) 167 proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value})
165 } 168 }
166 169
...@@ -169,15 +172,20 @@ function popRemark(type) { ...@@ -169,15 +172,20 @@ function popRemark(type) {
169 building() 172 building()
170 return 173 return
171 } 174 }
172 175
173 if (type == '0') { 176 if (type == '0') {
174 ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.') 177 // ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.')
175 return; 178 // return;
176 // 签证 179 // 签证
177 if (language.value === 0) { 180 if (language.value == 0) {
178 ElMessage.warning('请切换英文页面办理') 181 ElMessage.warning('请切换英文页面办理')
179 return 182 return
180 } else { 183 } else {
184 if (form.value.isVisa == 0) {
185 building()
186 return
187 }
188
181 if (!user) { 189 if (!user) {
182 ElMessage({ 190 ElMessage({
183 type: 'warning', 191 type: 'warning',
...@@ -185,29 +193,29 @@ function popRemark(type) { ...@@ -185,29 +193,29 @@ function popRemark(type) {
185 }) 193 })
186 return 194 return
187 } 195 }
188 196
189 applyInvitation() 197 applyInvitation()
190 return 198 return
191 } 199 }
192 } 200 }
193 201
194 if ((form.value.isJdView == 0 && type == '1') 202 if ((form.value.isJdView == 0 && type == '1')
195 || (form.value.isCarView == 0 && type == '2') 203 || (form.value.isCarView == 0 && type == '2')
196 || (form.value.isFoodView == 0 && type == '3') 204 || (form.value.isFoodView == 0 && type == '3')
197 || (form.value.isMealView == 0 && type == '4') 205 || (form.value.isMealView == 0 && type == '4')
198 || (form.value.isPhotoView == 0 && type == '5') 206 || (form.value.isPhotoView == 0 && type == '5')
199 || (form.value.isTicketView == 0 && type == '10') 207 || (form.value.isTicketView == 0 && type == '10')
200 ) { 208 ) {
201 building() 209 building()
202 return 210 return
203 } 211 }
204 212
205 if (type == '2') { 213 if (type == '2') {
206 emit("pickUp") 214 emit("pickUp")
207 return; 215 return;
208 } 216 }
209 217
210 218
211 const params = { 219 const params = {
212 matchId: props.matchId, 220 matchId: props.matchId,
213 title: language.value == 0 ? '预订说明' : 'Booking Instructions', 221 title: language.value == 0 ? '预订说明' : 'Booking Instructions',
...@@ -221,7 +229,7 @@ function goBooking(n, f) { ...@@ -221,7 +229,7 @@ function goBooking(n, f) {
221 switch (n) { 229 switch (n) {
222 case 10: 230 case 10:
223 // 票务 231 // 票务
224 232
225 // router.push({ 233 // router.push({
226 // path: `/booking/ticket/${props.matchId}`, 234 // path: `/booking/ticket/${props.matchId}`,
227 // params: {id:props.matchId}, 235 // params: {id:props.matchId},
...@@ -252,7 +260,7 @@ function goBooking(n, f) { ...@@ -252,7 +260,7 @@ function goBooking(n, f) {
252 } 260 }
253 </script> 261 </script>
254 262
255 <style scoped lang="scss"> 263 <style lang="scss" scoped>
256 .itemBox, .itemBox_en { 264 .itemBox, .itemBox_en {
257 padding: 20px; 265 padding: 20px;
258 background: #fff; 266 background: #fff;
...@@ -276,7 +284,7 @@ function goBooking(n, f) { ...@@ -276,7 +284,7 @@ function goBooking(n, f) {
276 background-size: 100% 100%; 284 background-size: 100% 100%;
277 border-radius: 15px; 285 border-radius: 15px;
278 gap: 10px; 286 gap: 10px;
279 287
280 img { 288 img {
281 object-fit: contain; 289 object-fit: contain;
282 width: 75px; 290 width: 75px;
...@@ -289,19 +297,19 @@ function goBooking(n, f) { ...@@ -289,19 +297,19 @@ function goBooking(n, f) {
289 text-align: center; 297 text-align: center;
290 text-transform: uppercase; 298 text-transform: uppercase;
291 height: 100%; 299 height: 100%;
292 300
293 img { 301 img {
294 position: relative; 302 position: relative;
295 transition: all 0.2s; 303 transition: all 0.2s;
296 } 304 }
297 305
298 &:hover { 306 &:hover {
299 box-shadow: 0 0 10px #eee; 307 box-shadow: 0 0 10px #eee;
300 308
301 img { 309 img {
302 transform: rotateY(180deg); 310 transform: rotateY(180deg);
303 } 311 }
304 312
305 p { 313 p {
306 color: #000; 314 color: #000;
307 } 315 }
...@@ -317,7 +325,7 @@ function goBooking(n, f) { ...@@ -317,7 +325,7 @@ function goBooking(n, f) {
317 height: auto !important; 325 height: auto !important;
318 padding: 15px 0; 326 padding: 15px 0;
319 margin: 10px 0; 327 margin: 10px 0;
320 328
321 img { 329 img {
322 width: 50px; 330 width: 50px;
323 height: 50px 331 height: 50px
......
src/viewsPc/index.vue
1 <template> 1 <template>
2 <div class="syBg"> 2 <div class="syBg">
3 <div class="banner"> 3 <div class="banner">
4 <el-carousel class="forPc" autoplay :interval="2000" height="450px" :autoplay="false" arrow="hover" 4 <el-carousel :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc" height="450px"
5 @change="carouselChange"> 5 @change="carouselChange">
6 <el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id"> 6 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
7 <div class="bannerItem"> 7 <div class="bannerItem">
8 <div class="h100" @click.stop="goMatch(n)"> 8 <div class="h100" @click.stop="goMatch(n)">
9 <img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 9 <img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
10 <div class="box forPc" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;"> 10 <div class="box forPc" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
11 <img class="slogen" src="@/assets/logo/banner-text.png"/> 11 <img class="slogen" src="@/assets/logo/banner-text.png"/>
12 12
13 <div class="btabs"> 13 <div class="btabs">
14 <div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{ tab.customTitle }}</div> 14 <div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{ tab.customTitle }}</div>
15 </div> 15 </div>
16 16
17 17
18 <div v-if="!liveData || liveData.videoStatus==0"> 18 <div v-if="!liveData || liveData.videoStatus==0">
19 <!-- <div class="banner-count bb"></div>--> 19 <!-- <div class="banner-count bb"></div>-->
20 </div> 20 </div>
21 <div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click.stop="goliveUrl"> 21 <div v-if="currentDateTime < liveData.videoStart &&form.isLiveVideo==1" class="banner-count"
22 @click.stop="goliveUrl">
22 距离直播开始 23 距离直播开始
23 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒"> 24 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
24 <template #default="timeData"> 25 <template #default="timeData">
...@@ -42,33 +43,33 @@ ...@@ -42,33 +43,33 @@
42 </div> 43 </div>
43 <!--如果有直播--> 44 <!--如果有直播-->
44 <div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl"> 45 <div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
45 <div class="banner-count bb" 46 <div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
46 v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">直播进行中 47 class="banner-count bb">直播进行中
47 </div> 48 </div>
48 <div class="banner-count bb" v-if="currentDateTime > liveData.videoEnd">直播已结束</div> 49 <div v-if="currentDateTime > liveData.videoEnd" class="banner-count bb">直播已结束</div>
49 <!-- <div class="banner-count bb" v-if="currentDateTime < liveData.videoStart">直播即将开始</div>--> 50 <!-- <div class="banner-count bb" v-if="currentDateTime < liveData.videoStart">直播即将开始</div>-->
50 </div> 51 </div>
51 <div v-if="liveData&& liveData.picStatus==1" @click.stop="gopicliveUrl"> 52 <div v-if="liveData&& liveData.picStatus==1&&form.isLivePic==1" @click.stop="gopicliveUrl">
52 <div class="picliveBtn" v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)"> 53 <div v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)" class="picliveBtn">
53 图片直播中 54 图片直播中
54 </div> 55 </div>
55 <div class="picliveBtn" v-if="currentDateTime > liveData.picEnd">图片直播</div> 56 <div v-if="currentDateTime > liveData.picEnd" class="picliveBtn">图片直播</div>
56 <div class="picliveBtn" v-if="currentDateTime < liveData.picStart">图片直播</div> 57 <div v-if="currentDateTime < liveData.picStart" class="picliveBtn">图片直播</div>
57 </div> 58 </div>
58 </div> 59 </div>
59 </div> 60 </div>
60 </div> 61 </div>
61 </el-carousel-item> 62 </el-carousel-item>
62 </el-carousel> 63 </el-carousel>
63 <el-carousel class="forWei" height="160px" autoplay arrow="hover" @change="carouselChange"> 64 <el-carousel arrow="hover" autoplay class="forWei" height="160px" @change="carouselChange">
64 <el-carousel-item style="height: 160px;" v-for="n in maList" :key="n.id"> 65 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 160px;">
65 <div class="bannerItem" style="height:100%"> 66 <div class="bannerItem" style="height:100%">
66 <div class="h100" style="position: relative"> 67 <div class="h100" style="position: relative">
67 <img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 68 <img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
68 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;"> 69 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
69 <!-- <img class="slogen" src="@/assets/logo/banner-text.png"/>--> 70 <!-- <img class="slogen" src="@/assets/logo/banner-text.png"/>-->
70 71
71 <div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click="goliveUrl"> 72 <div v-if="currentDateTime < liveData.videoStart" class="banner-count" @click="goliveUrl">
72 距离直播开始 73 距离直播开始
73 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒"> 74 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
74 <template #default="timeData"> 75 <template #default="timeData">
...@@ -91,10 +92,10 @@ ...@@ -91,10 +92,10 @@
91 </van-count-down> 92 </van-count-down>
92 </div> 93 </div>
93 <div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl"> 94 <div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
94 <div class="banner-count" 95 <div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
95 v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">直播进行中 96 class="banner-count">直播进行中
96 </div> 97 </div>
97 <div class="banner-count" v-if="currentDateTime > liveData.videoEnd">直播已结束</div> 98 <div v-if="currentDateTime > liveData.videoEnd" class="banner-count">直播已结束</div>
98 </div> 99 </div>
99 </div> 100 </div>
100 </div> 101 </div>
...@@ -102,18 +103,18 @@ ...@@ -102,18 +103,18 @@
102 </el-carousel-item> 103 </el-carousel-item>
103 </el-carousel> 104 </el-carousel>
104 </div> 105 </div>
105 106
106 <div class="mb30"> 107 <div class="mb30">
107 <home-weather-bar/> 108 <home-weather-bar/>
108 </div> 109 </div>
109 110
110 <div class="box"> 111 <div class="box">
111 <HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name" @pick-up="handlePickup"/> 112 <HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id" @pick-up="handlePickup"/>
112 </div> 113 </div>
113 114
114 <div id="part0" class="box part"> 115 <div id="part0" class="box part">
115 <el-row :gutter="20"> 116 <el-row :gutter="20">
116 <el-col :sm="24" :lg="12"> 117 <el-col :lg="12" :sm="24">
117 <div class="indexTitle"> 118 <div class="indexTitle">
118 <h3 class="leftboderTT">通知公告</h3> 119 <h3 class="leftboderTT">通知公告</h3>
119 <a class="more" href="#/notice">MORE</a> 120 <a class="more" href="#/notice">MORE</a>
...@@ -125,7 +126,7 @@ ...@@ -125,7 +126,7 @@
125 </div> 126 </div>
126 </el-card> 127 </el-card>
127 </el-col> 128 </el-col>
128 <el-col :sm="24" :lg="12"> 129 <el-col :lg="12" :sm="24">
129 <div class="indexTitle"> 130 <div class="indexTitle">
130 <h3 class="leftboderTT">竞赛日程</h3> 131 <h3 class="leftboderTT">竞赛日程</h3>
131 <a class="more" href="#/saiC">MORE</a> 132 <a class="more" href="#/saiC">MORE</a>
...@@ -135,12 +136,12 @@ ...@@ -135,12 +136,12 @@
135 <home-calendar/> 136 <home-calendar/>
136 </el-card> 137 </el-card>
137 </el-col> 138 </el-col>
138 139
139 </el-row> 140 </el-row>
140 </div> 141 </div>
141 <!-- 新闻 --> 142 <!-- 新闻 -->
142 <div id="part1" class="part"> 143 <div id="part1" class="part">
143 144
144 <div class="box"> 145 <div class="box">
145 <div class="indexTitle"> 146 <div class="indexTitle">
146 <h3 class="leftboderTT">新闻资讯</h3> 147 <h3 class="leftboderTT">新闻资讯</h3>
...@@ -148,9 +149,9 @@ ...@@ -148,9 +149,9 @@
148 </div> 149 </div>
149 <el-row :gutter="20"> 150 <el-row :gutter="20">
150 <el-col 151 <el-col
151 v-for="(n,index) in newest2" 152 v-for="(n,index) in newest2"
152 :key="n.id" :xs="24" :sm="8" 153 :key="n.id" :lg="8" :sm="8"
153 :lg="8" 154 :xs="24"
154 > 155 >
155 <div class="activeItem" @click="goDetail(n)"> 156 <div class="activeItem" @click="goDetail(n)">
156 <div class="imgbox"> 157 <div class="imgbox">
...@@ -213,9 +214,9 @@ ...@@ -213,9 +214,9 @@
213 <el-col :lg="16"> 214 <el-col :lg="16">
214 <div class="swiperPic"> 215 <div class="swiperPic">
215 <swiper 216 <swiper
216 class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20" 217 :autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
217 :navigation="navigationPic" 218 :slides-per-view="3"
218 :autoplay="true" :loop="true" 219 :space-between="20" class="swiper-wrapper"
219 > 220 >
220 <swiper-slide v-for="(n,i) in picList" :key="i"> 221 <swiper-slide v-for="(n,i) in picList" :key="i">
221 <div class="picbox" @click="goDetail(n)"> 222 <div class="picbox" @click="goDetail(n)">
...@@ -229,7 +230,7 @@ ...@@ -229,7 +230,7 @@
229 </el-col> 230 </el-col>
230 </el-row> 231 </el-row>
231 <el-row class="news-l-r"> 232 <el-row class="news-l-r">
232 <el-col v-for="(n,index) in livelist" :lg="8" v-show="index>0"> 233 <el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
233 <div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)"> 234 <div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)">
234 <div class="imgbox"> 235 <div class="imgbox">
235 <i class="playIcon"></i> 236 <i class="playIcon"></i>
...@@ -247,7 +248,7 @@ ...@@ -247,7 +248,7 @@
247 </el-card> 248 </el-card>
248 </div> 249 </div>
249 </div> 250 </div>
250 251
251 <div class="box"> 252 <div class="box">
252 <el-row :gutter="20"> 253 <el-row :gutter="20">
253 <el-col :lg="12"> 254 <el-col :lg="12">
...@@ -261,9 +262,9 @@ ...@@ -261,9 +262,9 @@
261 </div> 262 </div>
262 <div class="mt30 text-center"> 263 <div class="mt30 text-center">
263 <a class="btn-black" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img 264 <a class="btn-black" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img
264 style="filter: brightness(2);height: 8px" src="@/assets/v1/more.png"/></a> 265 src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px"/></a>
265 </div> 266 </div>
266 267
267 </div> 268 </div>
268 </el-col> 269 </el-col>
269 <el-col :lg="12"> 270 <el-col :lg="12">
...@@ -290,13 +291,13 @@ ...@@ -290,13 +291,13 @@
290 </el-col> 291 </el-col>
291 </el-row> 292 </el-row>
292 </div> 293 </div>
293 294
294 <div class="box"> 295 <div class="box">
295 <div class="indexTitle"> 296 <div class="indexTitle">
296 <h3 class="leftboderTT">合作伙伴</h3> 297 <h3 class="leftboderTT">合作伙伴</h3>
297 </div> 298 </div>
298 <el-row :gutter="20"> 299 <el-row :gutter="20">
299 <el-col :lg="6" :sm="6" :xs="12" v-for="p in partners"> 300 <el-col v-for="p in partners" :lg="6" :sm="6" :xs="12">
300 <div class="logobox"> 301 <div class="logobox">
301 <img :src="fillImgUrl(JSON.parse(p.picUrl))"> 302 <img :src="fillImgUrl(JSON.parse(p.picUrl))">
302 </div> 303 </div>
...@@ -321,6 +322,7 @@ import {dayjs, ElMessage} from 'element-plus' ...@@ -321,6 +322,7 @@ import {dayjs, ElMessage} from 'element-plus'
321 import * as match from "@/apiPc/match"; 322 import * as match from "@/apiPc/match";
322 import {getAboutUs, getInfoByCptId, getppInfo, getZNList} from "@/apiPc/match"; 323 import {getAboutUs, getInfoByCptId, getppInfo, getZNList} from "@/apiPc/match";
323 import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar"; 324 import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar";
325 import {getBaseInfoByActiveId} from "@/apiPc/booking";
324 326
325 const modules = [Autoplay, Navigation] 327 const modules = [Autoplay, Navigation]
326 const navigationPic = ref({ 328 const navigationPic = ref({
...@@ -352,6 +354,7 @@ const partners = ref([]) ...@@ -352,6 +354,7 @@ const partners = ref([])
352 const liveData = ref({}) 354 const liveData = ref({})
353 const aboutUsContent = ref('') 355 const aboutUsContent = ref('')
354 const liveStartTime = ref(0) 356 const liveStartTime = ref(0)
357 const form = ref({})
355 358
356 onMounted(() => { 359 onMounted(() => {
357 init() 360 init()
...@@ -362,35 +365,41 @@ const init = () => { ...@@ -362,35 +365,41 @@ const init = () => {
362 time.value = dayjs('2024-07-17 07:00:00').diff(today, 'millisecond') 365 time.value = dayjs('2024-07-17 07:00:00').diff(today, 'millisecond')
363 etime.value = dayjs('2024-07-22 12:00:00').diff(today, 'millisecond') 366 etime.value = dayjs('2024-07-22 12:00:00').diff(today, 'millisecond')
364 getNewsListById({ 367 getNewsListById({
365 pageSize: time.value > 0 ? 3 : 4, 368 pageSize: time.value > 0 ? 3 : 4,
366 pageNum: 1, 369 pageNum: 1,
367 sortId: '30000006' 370 sortId: '30000006'
368 } 371 }
369 ).then(res => { 372 ).then(res => {
370 livelist.value = res.rows 373 livelist.value = res.rows
371 }) 374 })
372 getNewsListById({ 375 getNewsListById({
373 pageSize: 5, 376 pageSize: 5,
374 pageNum: 1, 377 pageNum: 1,
375 sortId: '30000007' 378 sortId: '30000007'
376 } 379 }
377 ).then(res => { 380 ).then(res => {
378 picList.value = res.rows 381 picList.value = res.rows
379 }) 382 })
380 getNewsList({ 383 getNewsList({
381 pageSize: 3, 384 pageSize: 3,
382 pageNum: 1, 385 pageNum: 1,
383 language: 1, 386 language: 1,
384 code: '1000' 387 code: '1000'
385 } 388 }
386 ).then(res => { 389 ).then(res => {
387 newest2.value = res.rows 390 newest2.value = res.rows
388 }) 391 })
389 392
390 getNewsListById({pageSize: 6, pageNum: 1, sortId: '20000000'}).then(res => { 393 getNewsListById({pageSize: 6, pageNum: 1, sortId: '20000000'}).then(res => {
391 newsList.value = res.rows 394 newsList.value = res.rows
392 }) 395 })
393 396
397 async function getMatchSet(id) {
398 const res = await getBaseInfoByActiveId(id)
399 form.value = res.data ?? null
400 console.log(form.value)
401 }
402
394 match.getMaList({topFlag: 1}).then((res) => { 403 match.getMaList({topFlag: 1}).then((res) => {
395 maList.value = res.rows 404 maList.value = res.rows
396 for (let n of maList.value) { 405 for (let n of maList.value) {
...@@ -408,8 +417,9 @@ const init = () => { ...@@ -408,8 +417,9 @@ const init = () => {
408 } 417 }
409 matchData.value = maList.value[0] 418 matchData.value = maList.value[0]
410 getMatchInfo(matchData.value.id) 419 getMatchInfo(matchData.value.id)
420 getMatchSet(matchData.value.id)
411 }) 421 })
412 422
413 match.getLabelList().then(res => { 423 match.getLabelList().then(res => {
414 tabList.value = res.data 424 tabList.value = res.data
415 }) 425 })
...@@ -514,8 +524,8 @@ const handlePickup = () => { ...@@ -514,8 +524,8 @@ const handlePickup = () => {
514 } 524 }
515 525
516 const goliveUrl = () => { 526 const goliveUrl = () => {
517 ElMessage.warning('暂未开放') 527 ElMessage.warning('暂未开放')
518 528
519 // if (liveData.value.videoStatus == "1") { 529 // if (liveData.value.videoStatus == "1") {
520 // window.open(liveData.value.videoUrlCn) 530 // window.open(liveData.value.videoUrlCn)
521 // } else { 531 // } else {
...@@ -525,7 +535,7 @@ const goliveUrl = () => { ...@@ -525,7 +535,7 @@ const goliveUrl = () => {
525 const gopicliveUrl = () => { 535 const gopicliveUrl = () => {
526 proxy.$modal.msgWarning('暂未开放') 536 proxy.$modal.msgWarning('暂未开放')
527 return 537 return
528 538
529 if (liveData.value.picStatus == "1") { 539 if (liveData.value.picStatus == "1") {
530 window.open(liveData.value.picUrlCn) 540 window.open(liveData.value.picUrlCn)
531 } else { 541 } else {
...@@ -535,7 +545,7 @@ const gopicliveUrl = () => { ...@@ -535,7 +545,7 @@ const gopicliveUrl = () => {
535 545
536 </script> 546 </script>
537 547
538 <style scoped lang="scss"> 548 <style lang="scss" scoped>
539 .syBg { 549 .syBg {
540 background: url("@/assets/dance/logo_l.png") no-repeat bottom left, 550 background: url("@/assets/dance/logo_l.png") no-repeat bottom left,
541 url("@/assets/dance/logo_r1.png") no-repeat bottom right; 551 url("@/assets/dance/logo_r1.png") no-repeat bottom right;
...@@ -546,7 +556,7 @@ const gopicliveUrl = () => { ...@@ -546,7 +556,7 @@ const gopicliveUrl = () => {
546 position: absolute; 556 position: absolute;
547 bottom: 60px; 557 bottom: 60px;
548 gap: 10px; 558 gap: 10px;
549 559
550 div { 560 div {
551 color: #fff; 561 color: #fff;
552 background-color: rgba(0, 0, 0, 0.5); 562 background-color: rgba(0, 0, 0, 0.5);
...@@ -555,7 +565,7 @@ const gopicliveUrl = () => { ...@@ -555,7 +565,7 @@ const gopicliveUrl = () => {
555 border-radius: 50px; 565 border-radius: 50px;
556 padding: 6px 20px; 566 padding: 6px 20px;
557 } 567 }
558 568
559 div:hover { 569 div:hover {
560 cursor: pointer; 570 cursor: pointer;
561 background: #fff; 571 background: #fff;
...@@ -574,18 +584,18 @@ const gopicliveUrl = () => { ...@@ -574,18 +584,18 @@ const gopicliveUrl = () => {
574 .zn-Box { 584 .zn-Box {
575 .bgbg { 585 .bgbg {
576 padding: 5%; 586 padding: 5%;
577 587
578 img { 588 img {
579 margin: 5% 0 589 margin: 5% 0
580 } 590 }
581 } 591 }
582 592
583 .itemBox { 593 .itemBox {
584 padding: 20px 0; 594 padding: 20px 0;
585 } 595 }
586 596
587 border-radius: 15px; 597 border-radius: 15px;
588 598
589 .zn-btn { 599 .zn-btn {
590 background: #FFFFFF; 600 background: #FFFFFF;
591 font-size: 18px; 601 font-size: 18px;
...@@ -595,8 +605,8 @@ const gopicliveUrl = () => { ...@@ -595,8 +605,8 @@ const gopicliveUrl = () => {
595 display: inline-flex; 605 display: inline-flex;
596 align-items: center; 606 align-items: center;
597 } 607 }
598 608
599 609
600 } 610 }
601 611
602 .app-main { 612 .app-main {
...@@ -613,12 +623,12 @@ const gopicliveUrl = () => { ...@@ -613,12 +623,12 @@ const gopicliveUrl = () => {
613 height: 450px; 623 height: 450px;
614 background: #000; 624 background: #000;
615 position: relative; 625 position: relative;
616 626
617 .slogen { 627 .slogen {
618 position: relative; 628 position: relative;
619 top: 130px; 629 top: 130px;
620 } 630 }
621 631
622 .picliveBtn { 632 .picliveBtn {
623 position: absolute; 633 position: absolute;
624 cursor: pointer; 634 cursor: pointer;
...@@ -630,7 +640,7 @@ const gopicliveUrl = () => { ...@@ -630,7 +640,7 @@ const gopicliveUrl = () => {
630 border: 2px solid rgba(255, 255, 255, 0.5); 640 border: 2px solid rgba(255, 255, 255, 0.5);
631 border-radius: 50px; 641 border-radius: 50px;
632 } 642 }
633 643
634 .banner-count { 644 .banner-count {
635 cursor: pointer; 645 cursor: pointer;
636 position: absolute; 646 position: absolute;
...@@ -645,7 +655,7 @@ const gopicliveUrl = () => { ...@@ -645,7 +655,7 @@ const gopicliveUrl = () => {
645 flex-wrap: nowrap; 655 flex-wrap: nowrap;
646 right: 5%; 656 right: 5%;
647 color: #fff; 657 color: #fff;
648 658
649 .van-count-down { 659 .van-count-down {
650 display: flex; 660 display: flex;
651 color: #fff; 661 color: #fff;
...@@ -653,7 +663,7 @@ const gopicliveUrl = () => { ...@@ -653,7 +663,7 @@ const gopicliveUrl = () => {
653 width: 360px; 663 width: 360px;
654 font-size: 41px; 664 font-size: 41px;
655 } 665 }
656 666
657 .block { 667 .block {
658 color: #fff; 668 color: #fff;
659 text-align: center; 669 text-align: center;
...@@ -661,7 +671,7 @@ const gopicliveUrl = () => { ...@@ -661,7 +671,7 @@ const gopicliveUrl = () => {
661 font-size: 41px; 671 font-size: 41px;
662 font-family: DIN Alternate; 672 font-family: DIN Alternate;
663 } 673 }
664 674
665 .colon { 675 .colon {
666 color: #fff; 676 color: #fff;
667 display: block; 677 display: block;
...@@ -669,27 +679,27 @@ const gopicliveUrl = () => { ...@@ -669,27 +679,27 @@ const gopicliveUrl = () => {
669 font-size: 20px; 679 font-size: 20px;
670 } 680 }
671 } 681 }
672 682
673 .bb { 683 .bb {
674 width: 580px; 684 width: 580px;
675 justify-content: center; 685 justify-content: center;
676 height: 100px; 686 height: 100px;
677 font-size: 30px; 687 font-size: 30px;
678 } 688 }
679 689
680 .banner-count.bb:hover { 690 .banner-count.bb:hover {
681 box-shadow: 0 0 20px #453DEA; 691 box-shadow: 0 0 20px #453DEA;
682 border-radius: 100px; 692 border-radius: 100px;
683 background: #000 693 background: #000
684 } 694 }
685 695
686 .box { 696 .box {
687 position: absolute; 697 position: absolute;
688 height: 100%; 698 height: 100%;
689 left: 0; 699 left: 0;
690 right: 0; 700 right: 0;
691 } 701 }
692 702
693 h3 { 703 h3 {
694 position: absolute; 704 position: absolute;
695 color: #fff; 705 color: #fff;
...@@ -698,7 +708,7 @@ const gopicliveUrl = () => { ...@@ -698,7 +708,7 @@ const gopicliveUrl = () => {
698 bottom: 50px; 708 bottom: 50px;
699 font-size: 3vw; 709 font-size: 3vw;
700 } 710 }
701 711
702 video { 712 video {
703 width: 100%; 713 width: 100%;
704 height: 100%; 714 height: 100%;
...@@ -713,26 +723,26 @@ const gopicliveUrl = () => { ...@@ -713,26 +723,26 @@ const gopicliveUrl = () => {
713 .banner { 723 .banner {
714 position: relative; 724 position: relative;
715 margin: 0 0 30px; 725 margin: 0 0 30px;
716 726
717 :deep(.el-carousel__arrow) { 727 :deep(.el-carousel__arrow) {
718 border-radius: 0; 728 border-radius: 0;
719 729
720 .el-icon { 730 .el-icon {
721 color: transparent; 731 color: transparent;
722 } 732 }
723 733
724 &:hover { 734 &:hover {
725 filter: brightness(1.5) 735 filter: brightness(1.5)
726 } 736 }
727 } 737 }
728 738
729 :deep(.el-carousel__arrow--left) { 739 :deep(.el-carousel__arrow--left) {
730 background: url("@/assets/images/prev2@2x.png") no-repeat center; 740 background: url("@/assets/images/prev2@2x.png") no-repeat center;
731 width: 78px; 741 width: 78px;
732 height: 45px; 742 height: 45px;
733 background-size: contain; 743 background-size: contain;
734 } 744 }
735 745
736 :deep(.el-carousel__arrow--right) { 746 :deep(.el-carousel__arrow--right) {
737 background: url("@/assets/images/next2@2x.png") no-repeat center; 747 background: url("@/assets/images/next2@2x.png") no-repeat center;
738 width: 78px; 748 width: 78px;
...@@ -753,7 +763,7 @@ const gopicliveUrl = () => { ...@@ -753,7 +763,7 @@ const gopicliveUrl = () => {
753 .ggbond { 763 .ggbond {
754 height: 230px; 764 height: 230px;
755 position: relative; 765 position: relative;
756 766
757 img { 767 img {
758 height: 100%; 768 height: 100%;
759 object-fit: cover; 769 object-fit: cover;
...@@ -771,17 +781,17 @@ const gopicliveUrl = () => { ...@@ -771,17 +781,17 @@ const gopicliveUrl = () => {
771 position: relative; 781 position: relative;
772 border-radius: 10px; 782 border-radius: 10px;
773 overflow: hidden; 783 overflow: hidden;
774 784
775 .imgbox { 785 .imgbox {
776 background: linear-gradient(0, #C8AAFC, #fff) 786 background: linear-gradient(0, #C8AAFC, #fff)
777 } 787 }
778 788
779 img { 789 img {
780 height: 350px; 790 height: 350px;
781 width: 100%; 791 width: 100%;
782 object-fit: cover; 792 object-fit: cover;
783 } 793 }
784 794
785 h3 { 795 h3 {
786 color: #fff; 796 color: #fff;
787 background: url("@/assets/dance/name_bg.png") no-repeat center; 797 background: url("@/assets/dance/name_bg.png") no-repeat center;
...@@ -794,7 +804,7 @@ const gopicliveUrl = () => { ...@@ -794,7 +804,7 @@ const gopicliveUrl = () => {
794 width: 100%; 804 width: 100%;
795 bottom: 30px; 805 bottom: 30px;
796 } 806 }
797 807
798 p { 808 p {
799 text-align: center; 809 text-align: center;
800 margin: 25px 0 0; 810 margin: 25px 0 0;
...@@ -805,7 +815,7 @@ const gopicliveUrl = () => { ...@@ -805,7 +815,7 @@ const gopicliveUrl = () => {
805 @media screen and (max-width: 1650px) { 815 @media screen and (max-width: 1650px) {
806 .teacher { 816 .teacher {
807 height: 320px; 817 height: 320px;
808 818
809 .imgbox { 819 .imgbox {
810 img { 820 img {
811 height: 260px 821 height: 260px
...@@ -818,7 +828,7 @@ const gopicliveUrl = () => { ...@@ -818,7 +828,7 @@ const gopicliveUrl = () => {
818 .teacher { 828 .teacher {
819 height: 450px; 829 height: 450px;
820 margin: 0 0 20px; 830 margin: 0 0 20px;
821 831
822 .imgbox { 832 .imgbox {
823 img { 833 img {
824 height: 390px 834 height: 390px
...@@ -831,7 +841,7 @@ const gopicliveUrl = () => { ...@@ -831,7 +841,7 @@ const gopicliveUrl = () => {
831 .teacher { 841 .teacher {
832 height: 400px; 842 height: 400px;
833 margin: 0 0 20px; 843 margin: 0 0 20px;
834 844
835 .imgbox { 845 .imgbox {
836 img { 846 img {
837 height: 340px 847 height: 340px
...@@ -844,7 +854,7 @@ const gopicliveUrl = () => { ...@@ -844,7 +854,7 @@ const gopicliveUrl = () => {
844 .teacher { 854 .teacher {
845 height: 400px; 855 height: 400px;
846 margin: 0 0 20px; 856 margin: 0 0 20px;
847 857
848 .imgbox { 858 .imgbox {
849 img { 859 img {
850 height: 260px 860 height: 260px
...@@ -859,7 +869,7 @@ const gopicliveUrl = () => { ...@@ -859,7 +869,7 @@ const gopicliveUrl = () => {
859 background-size: cover; 869 background-size: cover;
860 padding: 40px 60px; 870 padding: 40px 60px;
861 position: relative; 871 position: relative;
862 872
863 .content { 873 .content {
864 font-size: 18px; 874 font-size: 18px;
865 line-height: 2.2; 875 line-height: 2.2;
...@@ -868,7 +878,7 @@ const gopicliveUrl = () => { ...@@ -868,7 +878,7 @@ const gopicliveUrl = () => {
868 text-align: left; 878 text-align: left;
869 text-indent: 2em; 879 text-indent: 2em;
870 } 880 }
871 881
872 .shadowbox { 882 .shadowbox {
873 position: absolute; 883 position: absolute;
874 left: 0; 884 left: 0;
...@@ -877,7 +887,7 @@ const gopicliveUrl = () => { ...@@ -877,7 +887,7 @@ const gopicliveUrl = () => {
877 width: 100%; 887 width: 100%;
878 background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 888 background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
879 } 889 }
880 890
881 .btn-lineG { 891 .btn-lineG {
882 } 892 }
883 } 893 }
...@@ -889,7 +899,7 @@ const gopicliveUrl = () => { ...@@ -889,7 +899,7 @@ const gopicliveUrl = () => {
889 padding: 1px; 899 padding: 1px;
890 position: relative; 900 position: relative;
891 display: flex; 901 display: flex;
892 902
893 .content { 903 .content {
894 background: #fff; 904 background: #fff;
895 width: 60%; 905 width: 60%;
...@@ -901,33 +911,33 @@ const gopicliveUrl = () => { ...@@ -901,33 +911,33 @@ const gopicliveUrl = () => {
901 bottom: 0; 911 bottom: 0;
902 margin: auto; 912 margin: auto;
903 } 913 }
904 914
905 div { 915 div {
906 padding-left: 60px; 916 padding-left: 60px;
907 } 917 }
908 918
909 .phone { 919 .phone {
910 background: url("@/assets/dance/map01.png") no-repeat left; 920 background: url("@/assets/dance/map01.png") no-repeat left;
911 background-size: 30px; 921 background-size: 30px;
912 } 922 }
913 923
914 .address { 924 .address {
915 background: url("@/assets/dance/map02.png") no-repeat left; 925 background: url("@/assets/dance/map02.png") no-repeat left;
916 background-size: 30px; 926 background-size: 30px;
917 margin: 50px 0; 927 margin: 50px 0;
918 } 928 }
919 929
920 .email { 930 .email {
921 background: url("@/assets/dance/map03.png") no-repeat left; 931 background: url("@/assets/dance/map03.png") no-repeat left;
922 background-size: 30px; 932 background-size: 30px;
923 } 933 }
924 934
925 h4 { 935 h4 {
926 margin: 0; 936 margin: 0;
927 font-size: 16px; 937 font-size: 16px;
928 color: #AAAAAA; 938 color: #AAAAAA;
929 } 939 }
930 940
931 p { 941 p {
932 margin: 13px 0 0; 942 margin: 13px 0 0;
933 } 943 }
...@@ -938,7 +948,7 @@ const gopicliveUrl = () => { ...@@ -938,7 +948,7 @@ const gopicliveUrl = () => {
938 height: 180px; 948 height: 180px;
939 border-radius: 10px; 949 border-radius: 10px;
940 margin: 0 0 30px; 950 margin: 0 0 30px;
941 951
942 img { 952 img {
943 width: 100%; 953 width: 100%;
944 height: 100%; 954 height: 100%;
...@@ -951,7 +961,7 @@ const gopicliveUrl = () => { ...@@ -951,7 +961,7 @@ const gopicliveUrl = () => {
951 position: relative; 961 position: relative;
952 height: 100%; 962 height: 100%;
953 padding: 20px 45px; 963 padding: 20px 45px;
954 964
955 .picprev { 965 .picprev {
956 position: absolute; 966 position: absolute;
957 left: 5px; 967 left: 5px;
...@@ -960,12 +970,12 @@ const gopicliveUrl = () => { ...@@ -960,12 +970,12 @@ const gopicliveUrl = () => {
960 margin: auto; 970 margin: auto;
961 height: 33px; 971 height: 33px;
962 cursor: pointer; 972 cursor: pointer;
963 973
964 &:hover { 974 &:hover {
965 filter: brightness(2) 975 filter: brightness(2)
966 } 976 }
967 } 977 }
968 978
969 .picnext { 979 .picnext {
970 position: absolute; 980 position: absolute;
971 right: 5px; 981 right: 5px;
...@@ -974,7 +984,7 @@ const gopicliveUrl = () => { ...@@ -974,7 +984,7 @@ const gopicliveUrl = () => {
974 margin: auto; 984 margin: auto;
975 height: 33px; 985 height: 33px;
976 cursor: pointer; 986 cursor: pointer;
977 987
978 &:hover { 988 &:hover {
979 filter: brightness(2) 989 filter: brightness(2)
980 } 990 }
...@@ -985,7 +995,7 @@ const gopicliveUrl = () => { ...@@ -985,7 +995,7 @@ const gopicliveUrl = () => {
985 .teacher { 995 .teacher {
986 height: 460px; 996 height: 460px;
987 margin: 0 0 20px; 997 margin: 0 0 20px;
988 998
989 img { 999 img {
990 height: 400px 1000 height: 400px
991 } 1001 }
...@@ -996,11 +1006,11 @@ const gopicliveUrl = () => { ...@@ -996,11 +1006,11 @@ const gopicliveUrl = () => {
996 .box { 1006 .box {
997 width: 94% 1007 width: 94%
998 } 1008 }
999 1009
1000 1010
1001 .calendarList { 1011 .calendarList {
1002 padding: 0; 1012 padding: 0;
1003 1013
1004 ul { 1014 ul {
1005 li { 1015 li {
1006 margin: 10px 1016 margin: 10px
...@@ -1016,7 +1026,7 @@ const gopicliveUrl = () => { ...@@ -1016,7 +1026,7 @@ const gopicliveUrl = () => {
1016 .teacher { 1026 .teacher {
1017 height: 320px; 1027 height: 320px;
1018 margin: 0 0 20px; 1028 margin: 0 0 20px;
1019 1029
1020 img { 1030 img {
1021 height: 260px 1031 height: 260px
1022 } 1032 }
...@@ -1028,17 +1038,17 @@ const gopicliveUrl = () => { ...@@ -1028,17 +1038,17 @@ const gopicliveUrl = () => {
1028 div { 1038 div {
1029 padding-left: 40px; 1039 padding-left: 40px;
1030 } 1040 }
1031 1041
1032 .content { 1042 .content {
1033 width: 80%; 1043 width: 80%;
1034 left: 10%; 1044 left: 10%;
1035 padding: 10px 20px 0 20px; 1045 padding: 10px 20px 0 20px;
1036 } 1046 }
1037 1047
1038 .address { 1048 .address {
1039 margin: 30px 0; 1049 margin: 30px 0;
1040 } 1050 }
1041 1051
1042 p { 1052 p {
1043 text-align: left; 1053 text-align: left;
1044 word-break: break-all; 1054 word-break: break-all;
...@@ -1053,19 +1063,19 @@ const gopicliveUrl = () => { ...@@ -1053,19 +1063,19 @@ const gopicliveUrl = () => {
1053 width: auto; 1063 width: auto;
1054 left: 0; 1064 left: 0;
1055 right: 0; 1065 right: 0;
1056 1066
1057 .van-count-down { 1067 .van-count-down {
1058 margin: 30px 0 0; 1068 margin: 30px 0 0;
1059 } 1069 }
1060 } 1070 }
1061 1071
1062 .bgbg { 1072 .bgbg {
1063 text-align: center; 1073 text-align: center;
1064 1074
1065 img { 1075 img {
1066 max-width: 100%; 1076 max-width: 100%;
1067 } 1077 }
1068 1078
1069 h1 { 1079 h1 {
1070 text-align: center 1080 text-align: center
1071 } 1081 }
...@@ -1078,7 +1088,7 @@ const gopicliveUrl = () => { ...@@ -1078,7 +1088,7 @@ const gopicliveUrl = () => {
1078 z-index: 2; 1088 z-index: 2;
1079 background: #F04035; 1089 background: #F04035;
1080 padding: 2px 4px; 1090 padding: 2px 4px;
1081 1091
1082 &::after { 1092 &::after {
1083 content: ''; 1093 content: '';
1084 width: 0; 1094 width: 0;
...@@ -1089,12 +1099,12 @@ const gopicliveUrl = () => { ...@@ -1089,12 +1099,12 @@ const gopicliveUrl = () => {
1089 border-top: 24px solid #F04035; 1099 border-top: 24px solid #F04035;
1090 border-right: 15px solid transparent; 1100 border-right: 15px solid transparent;
1091 } 1101 }
1092 1102
1093 .van-count-down { 1103 .van-count-down {
1094 display: flex; 1104 display: flex;
1095 color: #fff; 1105 color: #fff;
1096 font-size: 14px; 1106 font-size: 14px;
1097 1107
1098 .block { 1108 .block {
1099 color: #fff; 1109 color: #fff;
1100 text-align: center; 1110 text-align: center;
...@@ -1110,7 +1120,7 @@ const gopicliveUrl = () => { ...@@ -1110,7 +1120,7 @@ const gopicliveUrl = () => {
1110 height: 56px; 1120 height: 56px;
1111 justify-content: space-between; 1121 justify-content: space-between;
1112 cursor: pointer; 1122 cursor: pointer;
1113 1123
1114 h3 { 1124 h3 {
1115 font-weight: 400; 1125 font-weight: 400;
1116 margin: 0; 1126 margin: 0;
...@@ -1121,13 +1131,13 @@ const gopicliveUrl = () => { ...@@ -1121,13 +1131,13 @@ const gopicliveUrl = () => {
1121 font-size: 18px; 1131 font-size: 18px;
1122 color: #030303; 1132 color: #030303;
1123 } 1133 }
1124 1134
1125 span { 1135 span {
1126 font-weight: 400; 1136 font-weight: 400;
1127 font-size: 14px; 1137 font-size: 14px;
1128 color: #B4B6B8; 1138 color: #B4B6B8;
1129 } 1139 }
1130 1140
1131 &:hover { 1141 &:hover {
1132 background: #F7F8FC; 1142 background: #F7F8FC;
1133 } 1143 }
...@@ -1142,12 +1152,12 @@ const gopicliveUrl = () => { ...@@ -1142,12 +1152,12 @@ const gopicliveUrl = () => {
1142 } 1152 }
1143 .newline { 1153 .newline {
1144 height: 40px; 1154 height: 40px;
1145 1155
1146 h3 { 1156 h3 {
1147 width: 70%; 1157 width: 70%;
1148 font-size: 14px; 1158 font-size: 14px;
1149 } 1159 }
1150 1160
1151 span { 1161 span {
1152 font-size: 12px; 1162 font-size: 12px;
1153 } 1163 }
......
src/viewsPc/index_en.vue
1 <template> 1 <template>
2 <div class="syBg"> 2 <div class="syBg">
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 :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc" height="450px"
5 <el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id"> 5 @change="carouselChange">
6 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
6 <div class="bannerItem"> 7 <div class="bannerItem">
7 <div class="h100" @click.stop="goMatch(n)"> 8 <div class="h100" @click.stop="goMatch(n)">
8 <img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 9 <img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
9 <div class="box" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;"> 10 <div class="box" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
10 <img class="slogen" src="@/assets/logo/banner-text.png"/> 11 <img class="slogen" src="@/assets/logo/banner-text.png"/>
11 12
12 <div class="btabs"> 13 <div class="btabs">
13 <div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{tab.customTitle}}</div> 14 <div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{ tab.customTitle }}</div>
14 </div> 15 </div>
15 <div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click.stop="goliveUrl"> 16 <div v-if="currentDateTime < liveData.videoStart&&form.isLiveVideo==1" class="banner-count"
17 @click.stop="goliveUrl">
16 Live Countdown 18 Live Countdown
17 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒"> 19 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
18 <template #default="timeData"> 20 <template #default="timeData">
...@@ -34,12 +36,13 @@ ...@@ -34,12 +36,13 @@
34 </template> 36 </template>
35 </van-count-down> 37 </van-count-down>
36 </div> 38 </div>
37 39
38 <div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl"> 40 <div v-if="liveData&& liveData.videoStatus==1&&form.isLivePic==1" @click.stop="goliveUrl">
39 <div class="banner-count" v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"> 41 <div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
42 class="banner-count">
40 Live Now 43 Live Now
41 </div> 44 </div>
42 <div class="banner-count" v-if="currentDateTime > liveData.videoEnd"> 45 <div v-if="currentDateTime > liveData.videoEnd" class="banner-count">
43 Live End 46 Live End
44 </div> 47 </div>
45 </div> 48 </div>
...@@ -48,36 +51,40 @@ ...@@ -48,36 +51,40 @@
48 </div> 51 </div>
49 </el-carousel-item> 52 </el-carousel-item>
50 </el-carousel> 53 </el-carousel>
51 <el-carousel class="forWei" height="160px" autoplay arrow="hover" @change="carouselChange"> 54 <el-carousel arrow="hover" autoplay class="forWei" height="160px" @change="carouselChange">
52 <el-carousel-item style="height: 160px;" v-for="n in maList" :key="n.id"> 55 <el-carousel-item v-for="n in maList" :key="n.id" style="height: 160px;">
53 <div class="bannerItem" style="height:100%"> 56 <div class="bannerItem" style="height:100%">
54 <div class="h100" style="position: relative"> 57 <div class="h100" style="position: relative">
55 <img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)"> 58 <img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
56 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;"> 59 <div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
57 <div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click="goliveUrl"> 60 <div v-if="currentDateTime < liveData.videoStart" class="banner-count" @click="goliveUrl">
58 Live Countdown 61 Live Countdown
59 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒"> 62 <van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
60 <template #default="timeData"> 63 <template #default="timeData">
61 <div class="block">{{ timeData.days }} 64 <div class="block">{{ timeData.days }}
62 <span class="colon">Days</span> 65 <span class="colon">Days</span>
63 </div>： 66 </div>
67 ：
64 <div class="block">{{ timeData.hours }} 68 <div class="block">{{ timeData.hours }}
65 <span class="colon">Hrs</span> 69 <span class="colon">Hrs</span>
66 </div>： 70 </div>
71 ：
67 <div class="block">{{ timeData.minutes }} 72 <div class="block">{{ timeData.minutes }}
68 <span class="colon">Min</span> 73 <span class="colon">Min</span>
69 </div>： 74 </div>
75 ：
70 <div class="block">{{ timeData.seconds }} 76 <div class="block">{{ timeData.seconds }}
71 <span class="colon">Sec</span> 77 <span class="colon">Sec</span>
72 </div> 78 </div>
73 </template> 79 </template>
74 </van-count-down> 80 </van-count-down>
75 </div> 81 </div>
76 <div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl"> 82 <div v-if="liveData&& liveData.videoStatus==1 &&form.isLivePic==1" @click.stop="goliveUrl">
77 <div class="banner-count" v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"> 83 <div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
84 class="banner-count">
78 Live Now 85 Live Now
79 </div> 86 </div>
80 <div class="banner-count" v-if="currentDateTime > liveData.videoEnd"> 87 <div v-if="currentDateTime > liveData.videoEnd" class="banner-count">
81 Live End 88 Live End
82 </div> 89 </div>
83 </div> 90 </div>
...@@ -87,19 +94,19 @@ ...@@ -87,19 +94,19 @@
87 </el-carousel-item> 94 </el-carousel-item>
88 </el-carousel> 95 </el-carousel>
89 </div> 96 </div>
90 97
91 <div class="mb30"> 98 <div class="mb30">
92 <home-weather-bar :lang="1"/> 99 <home-weather-bar :lang="1"/>
93 </div> 100 </div>
94 101
95 <div class="box"> 102 <div class="box">
96 <HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name" @pick-up="handlePickup"/> 103 <HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id" @pick-up="handlePickup"/>
97 </div> 104 </div>
98 105
99 106
100 <div id="part0" class="box part"> 107 <div id="part0" class="box part">
101 <el-row :gutter="20"> 108 <el-row :gutter="20">
102 <el-col :sm="24" :lg="12"> 109 <el-col :lg="12" :sm="24">
103 <div class="indexTitle"> 110 <div class="indexTitle">
104 <h3 class="leftboderTT">NOTICEBOARD</h3> 111 <h3 class="leftboderTT">NOTICEBOARD</h3>
105 <a class="more" href="#/notice">MORE</a> 112 <a class="more" href="#/notice">MORE</a>
...@@ -107,11 +114,11 @@ ...@@ -107,11 +114,11 @@
107 <el-card :body-style="{'padding':'10px 20px 18px'}"> 114 <el-card :body-style="{'padding':'10px 20px 18px'}">
108 <div v-for="(n,index) in newsList" :key="index" class="newline" @click="goDetail(n)"> 115 <div v-for="(n,index) in newsList" :key="index" class="newline" @click="goDetail(n)">
109 <h3>{{ n.name }}</h3> 116 <h3>{{ n.name }}</h3>
110 <span class="date">{{n.belongTime}}</span> 117 <span class="date">{{ n.belongTime }}</span>
111 </div> 118 </div>
112 </el-card> 119 </el-card>
113 </el-col> 120 </el-col>
114 <el-col :sm="24" :lg="12"> 121 <el-col :lg="12" :sm="24">
115 <div class="indexTitle"> 122 <div class="indexTitle">
116 <h3 class="leftboderTT">COMPETITION SCHEDULE</h3> 123 <h3 class="leftboderTT">COMPETITION SCHEDULE</h3>
117 <a class="more" @click="gosaiC">MORE</a> 124 <a class="more" @click="gosaiC">MORE</a>
...@@ -121,12 +128,12 @@ ...@@ -121,12 +128,12 @@
121 <home-calendar/> 128 <home-calendar/>
122 </el-card> 129 </el-card>
123 </el-col> 130 </el-col>
124 131
125 </el-row> 132 </el-row>
126 </div> 133 </div>
127 <!-- NEWS --> 134 <!-- NEWS -->
128 <div id="part1" class="part"> 135 <div id="part1" class="part">
129 136
130 <div class="box"> 137 <div class="box">
131 <div class="indexTitle"> 138 <div class="indexTitle">
132 <h3 class="leftboderTT">NEWS</h3> 139 <h3 class="leftboderTT">NEWS</h3>
...@@ -135,20 +142,20 @@ ...@@ -135,20 +142,20 @@
135 <el-row :gutter="20"> 142 <el-row :gutter="20">
136 <el-col 143 <el-col
137 v-for="(n,index) in newest2" 144 v-for="(n,index) in newest2"
138 :key="n.id" :xs="24" :sm="8" 145 :key="n.id" :lg="8" :sm="8"
139 :lg="8" 146 :xs="24"
140 > 147 >
141 <div class="activeItem" @click="goNewsDetail(n)"> 148 <div class="activeItem" @click="goNewsDetail(n)">
142 <div class="imgbox"> 149 <div class="imgbox">
143 <img :src="fillImgUrl_webSite(n.picUrl)"> 150 <img :src="fillImgUrl_webSite(n.picUrl)">
144 </div> 151 </div>
145 <div class="info"> 152 <div class="info">
146 <div class="date"> 153 <div class="date">
147 {{ n.sortName }} ｜ {{ n.belongTime }} 154 {{ n.sortName }} ｜ {{ n.belongTime }}
148 </div> 155 </div>
149 <h3 class="esp">{{ n.name }}</h3> 156 <h3 class="esp">{{ n.name }}</h3>
150 <p class="esp_2" style="height: 40px"> 157 <p class="esp_2" style="height: 40px">
151 {{n.subName}} 158 {{ n.subName }}
152 </p> 159 </p>
153 <a>DETAIL</a> 160 <a>DETAIL</a>
154 </div> 161 </div>
...@@ -176,14 +183,14 @@ ...@@ -176,14 +183,14 @@
176 </a> 183 </a>
177 </el-col> 184 </el-col>
178 <el-col :lg="16"> 185 <el-col :lg="16">
179 186
180 <div class="swiperPic forPx"> 187 <div class="swiperPic forPx">
181 <swiper 188 <swiper
182 class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20" 189 :autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
183 :navigation="navigationPic" 190 :slides-per-view="3"
184 :autoplay="true" :loop="true" 191 :space-between="20" class="swiper-wrapper"
185 > 192 >
186 <swiper-slide v-for="(n,i) in picList" :key="i" > 193 <swiper-slide v-for="(n,i) in picList" :key="i">
187 <div class="picbox" @click="goNewsDetail(n)"> 194 <div class="picbox" @click="goNewsDetail(n)">
188 <img :src="fillImgUrl_webSite(n.picUrl)"> 195 <img :src="fillImgUrl_webSite(n.picUrl)">
189 </div> 196 </div>
...@@ -192,29 +199,30 @@ ...@@ -192,29 +199,30 @@
192 <div class="picprev"><img src="@/assets/dance/prev1.png"></div> 199 <div class="picprev"><img src="@/assets/dance/prev1.png"></div>
193 <div class="picnext"><img src="@/assets/dance/next1.png"></div> 200 <div class="picnext"><img src="@/assets/dance/next1.png"></div>
194 </div> 201 </div>
195 202
196 </el-col> 203 </el-col>
197 </el-row> 204 </el-row>
198 <el-row class="news-l-r"> 205 <el-row class="news-l-r">
199 <el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8"> 206 <el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
200 <div class="item" style="padding: 0;margin: 20px 0 0" @click="goNewsDetail(n)"> 207 <div class="item" style="padding: 0;margin: 20px 0 0" @click="goNewsDetail(n)">
201 <div class="imgbox"> 208 <div class="imgbox">
202 <i class="playIcon" /> 209 <i class="playIcon"/>
203 <img :src="fillImgUrl_webSite(n.picUrl)"></div> 210 <img :src="fillImgUrl_webSite(n.picUrl)"></div>
204 <div class="info"> 211 <div class="info">
205 <div class="text-primary small-size"> 212 <div class="text-primary small-size">
206 <span v-if="n.subName">{{n.subName + ' | '}}</span> 213 <span v-if="n.subName">{{ n.subName + ' | ' }}</span>
207 {{ n.belongTime }}</div> 214 {{ n.belongTime }}
215 </div>
208 <h2 class="esp_2">{{ n.name }}</h2> 216 <h2 class="esp_2">{{ n.name }}</h2>
209 </div> 217 </div>
210 </div> 218 </div>
211 </el-col> 219 </el-col>
212 </el-row> 220 </el-row>
213 </el-card> 221 </el-card>
214 222
215 </div> 223 </div>
216 </div> 224 </div>
217 225
218 <div hidden> 226 <div hidden>
219 <div class="box"> 227 <div class="box">
220 <div class="indexTitle"> 228 <div class="indexTitle">
...@@ -222,8 +230,8 @@ ...@@ -222,8 +230,8 @@
222 </div> 230 </div>
223 <el-row :gutter="20"> 231 <el-row :gutter="20">
224 <el-col 232 <el-col
225 v-for="n in personList" :key="n.name" :sm="8" :xl="4" :xs="12" 233 v-for="n in personList" :key="n.name" :lg="4" :sm="8" :xl="4"
226 :lg="4" 234 :xs="12"
227 > 235 >
228 <div class="teacher"> 236 <div class="teacher">
229 <div class="imgbox"><img :src="n.src"></div> 237 <div class="imgbox"><img :src="n.src"></div>
...@@ -234,7 +242,7 @@ ...@@ -234,7 +242,7 @@
234 </el-row> 242 </el-row>
235 </div> 243 </div>
236 </div> 244 </div>
237 245
238 <div class="box"> 246 <div class="box">
239 <el-row :gutter="20"> 247 <el-row :gutter="20">
240 <el-col :lg="12"> 248 <el-col :lg="12">
...@@ -245,18 +253,19 @@ ...@@ -245,18 +253,19 @@
245 <div class="aboutBox"> 253 <div class="aboutBox">
246 <div class="content"> 254 <div class="content">
247 <div v-html="aboutUsContent"></div> 255 <div v-html="aboutUsContent"></div>
248 <div class="shadowbox" /> 256 <div class="shadowbox"/>
249 </div> 257 </div>
250 <div class="mt30 text-center"> 258 <div class="mt30 text-center">
251 <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> 259 <a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">Learn more
260 <img src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px;margin-left: 10px"></a>
252 </div> 261 </div>
253 262
254 </div> 263 </div>
255 </el-col> 264 </el-col>
256 <el-col :lg="12"> 265 <el-col :lg="12">
257 <div class="indexTitle"> 266 <div class="indexTitle">
258 <h3 class="leftboderTT">CONTACT US</h3> 267 <h3 class="leftboderTT">CONTACT US</h3>
259 <a class="more" style="filter: brightness(10)" href="#/about/wuDao">MORE</a> 268 <a class="more" href="#/about/wuDao" style="filter: brightness(10)">MORE</a>
260 </div> 269 </div>
261 <div class="mapBox"> 270 <div class="mapBox">
262 <div class="content"> 271 <div class="content">
...@@ -277,58 +286,60 @@ ...@@ -277,58 +286,60 @@
277 </el-col> 286 </el-col>
278 </el-row> 287 </el-row>
279 </div> 288 </div>
280 289
281 <div class="box"> 290 <div class="box">
282 <div class="indexTitle"> 291 <div class="indexTitle">
283 <h3 class="leftboderTT">PARTNERS</h3> 292 <h3 class="leftboderTT">PARTNERS</h3>
284 </div> 293 </div>
285 <el-row :gutter="20"> 294 <el-row :gutter="20">
286 <el-col :lg="6" :sm="12" :xs="6" v-for="p in partners"> 295 <el-col v-for="p in partners" :lg="6" :sm="12" :xs="6">
287 <div class="logobox"> 296 <div class="logobox">
288 <img :src="fillImgUrl(JSON.parse(p.picUrl))"> 297 <img :src="fillImgUrl(JSON.parse(p.picUrl))">
289 </div> 298 </div>
290 </el-col> 299 </el-col>
291 </el-row> 300 </el-row>
292 </div> 301 </div>
293 302
294 303
295 </div> 304 </div>
296 </template> 305 </template>
297 <script setup> 306 <script setup>
298 import { ref, nextTick, onMounted, watch } from 'vue' 307 import {ref, nextTick, onMounted, watch} from 'vue'
299 import { getCurrentInstance } from '@vue/runtime-core' 308 import {getCurrentInstance} from '@vue/runtime-core'
300 import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite' 309 import {getNewsListById, getNewsList, getWeather} from '@/apiPc/webSite'
301 import { useRouter } from 'vue-router' 310 import {useRouter} from 'vue-router'
302 import _ from 'lodash' 311 import _ from 'lodash'
303 import HomeQuick from '@/viewsPc/components/homeQuick' 312 import HomeQuick from '@/viewsPc/components/homeQuick'
304 import HomeCalendar from '@/viewsPc/components/homeCalendar' 313 import HomeCalendar from '@/viewsPc/components/homeCalendar'
305 import { Swiper, SwiperSlide } from 'swiper/vue' 314 import {Swiper, SwiperSlide} from 'swiper/vue'
306 import { Autoplay, Navigation } from 'swiper' 315 import {Autoplay, Navigation} from 'swiper'
307 import 'swiper/css' 316 import 'swiper/css'
308 import {dayjs, ElMessage} from 'element-plus' 317 import {dayjs, ElMessage} from 'element-plus'
309 import * as match from "@/apiPc/match"; 318 import * as match from "@/apiPc/match";
310 import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar"; 319 import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar";
311 320
321 import {getBaseInfoByActiveId} from "/@/apiPc/booking";
312 322
313 import {rankList} from '@/assets/js/data' 323 import {rankList} from '@/assets/js/data'
324
314 const modules = [Autoplay, Navigation] 325 const modules = [Autoplay, Navigation]
315 const navigationPic = ref({ 326 const navigationPic = ref({
316 nextEl: '.picnext', 327 nextEl: '.picnext',
317 prevEl: '.picprev' 328 prevEl: '.picprev'
318 }) 329 })
319 const router = useRouter() 330 const router = useRouter()
320 const { proxy } = getCurrentInstance() 331 const {proxy} = getCurrentInstance()
321 const emit = defineEmits(['pop','backNumber','schSearch']) 332 const emit = defineEmits(['pop', 'backNumber', 'schSearch'])
322 const time = ref(0) 333 const time = ref(0)
323 const etime = ref(0) 334 const etime = ref(0)
324 335
325 const personList = ref([ 336 const personList = ref([
326 { name: 'Wolfgang Eliasch', pp: 'Chairperson for Latin AUT', src: '/img/1.png' }, 337 {name: 'Wolfgang Eliasch', pp: 'Chairperson for Latin AUT', src: '/img/1.png'},
327 { name: 'Nenad Jeftic', pp: 'Chairperson for Standard SRB', src: '/img/2.png' }, 338 {name: 'Nenad Jeftic', pp: 'Chairperson for Standard SRB', src: '/img/2.png'},
328 { name: 'Dorel Bagiu', pp: 'ROU', src: '/img/3.png' }, 339 {name: 'Dorel Bagiu', pp: 'ROU', src: '/img/3.png'},
329 { name: 'Eduard Korotin', pp: ' EST', src: '/img/4.png' }, 340 {name: 'Eduard Korotin', pp: ' EST', src: '/img/4.png'},
330 { name: 'Ana Cristina Silva', pp: 'POR', src: '/img/5.png'}, 341 {name: 'Ana Cristina Silva', pp: 'POR', src: '/img/5.png'},
331 { name: 'Dallas Leslie Williams', pp: 'Scrutineer AUS', src: '/img/6.png' } 342 {name: 'Dallas Leslie Williams', pp: 'Scrutineer AUS', src: '/img/6.png'}
332 ]) 343 ])
333 const activeNews = ref(0) 344 const activeNews = ref(0)
334 const banners = ref([]) 345 const banners = ref([])
...@@ -352,7 +363,7 @@ const newsList = ref([]) ...@@ -352,7 +363,7 @@ const newsList = ref([])
352 const currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss') 363 const currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
353 const liveStartTime = ref(0) 364 const liveStartTime = ref(0)
354 const liveData = ref({}) 365 const liveData = ref({})
355 366 const form = ref({})
356 const matchData = ref({}) 367 const matchData = ref({})
357 onMounted(() => { 368 onMounted(() => {
358 init() 369 init()
...@@ -360,53 +371,68 @@ onMounted(() => { ...@@ -360,53 +371,68 @@ onMounted(() => {
360 371
361 const init = () => { 372 const init = () => {
362 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 373 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
363 getNewsListById({pageSize: 6, pageNum: 1,sortId: '20000001'}).then(res => { 374 getNewsListById({pageSize: 6, pageNum: 1, sortId: '20000001'}).then(res => {
364 newsList.value = res.rows 375 newsList.value = res.rows
365 }) 376 })
366 getNewsListById( 377 getNewsListById(
367 { pageSize: 4, 378 {
379 pageSize: 4,
368 pageNum: 1, 380 pageNum: 1,
369 sortId: '30000008' } 381 sortId: '30000008'
382 }
370 ).then(res => { 383 ).then(res => {
371 livelist.value = res.rows 384 livelist.value = res.rows
372 }) 385 })
373 getNewsListById({ pageSize: 5, 386 getNewsListById({
387 pageSize: 5,
374 pageNum: 1, 388 pageNum: 1,
375 sortId: '30000009' } 389 sortId: '30000009'
390 }
376 ).then(res => { 391 ).then(res => {
377 picList.value = res.rows 392 picList.value = res.rows
378 }) 393 })
379 getNewsList({ pageSize: 3, 394 getNewsList({
380 pageNum: 1, 395 pageSize: 3,
381 language:2, 396 pageNum: 1,
382 code: '1000' } 397 language: 2,
398 code: '1000'
399 }
383 ).then(res => { 400 ).then(res => {
384 newest2.value = res.rows 401 newest2.value = res.rows
385 }) 402 })
386 match.getMaList({topFlag:1}).then((res) => { 403 match.getMaList({topFlag: 1}).then((res) => {
387 maList.value = res.rows 404 maList.value = res.rows
388 matchData.value = maList.value[0] 405 matchData.value = maList.value[0]
389 getMatchInfo(matchData.value.id) 406 getMatchInfo(matchData.value.id)
407 getMatchSet(matchData.value.id)
408
390 }) 409 })
391 match.getLabelList().then(res=> { 410 match.getLabelList().then(res => {
392 tabList.value = res.data 411 tabList.value = res.data
393 }) 412 })
394 413
395 getpartners() 414 getpartners()
396 } 415 }
397 const getMatchInfo = (id) => { 416 const getMatchInfo = (id) => {
398 match.getInfoByCptId({ cptId:id }).then((res) => { 417 match.getInfoByCptId({cptId: id}).then((res) => {
399 liveData.value = res.data || {} 418 liveData.value = res.data || {}
400 if(liveData.value.videoStart){ 419 if (liveData.value.videoStart) {
401 liveStartTime.value = dayjs(liveData.value.videoStart).diff(currentDateTime.value, 'millisecond') 420 liveStartTime.value = dayjs(liveData.value.videoStart).diff(currentDateTime.value, 'millisecond')
402 } 421 }
403 }) 422 })
404 } 423 }
424
425 async function getMatchSet(id) {
426 const res = await getBaseInfoByActiveId(id)
427 form.value = res.data ?? null
428 console.log(form.value)
429 }
430
405 const getpartners = () => { 431 const getpartners = () => {
406 match.getAboutUs().then((res) => { 432 match.getAboutUs().then((res) => {
407 aboutUsContent.value = res.data.contextEn 433 aboutUsContent.value = res.data.contextEn
408 }) 434 })
409 match.getZNList({sortId:'2000',language:2}).then((res) => { 435 match.getZNList({sortId: '2000', language: 2}).then((res) => {
410 partners.value = res.rows 436 partners.value = res.rows
411 }) 437 })
412 } 438 }
...@@ -459,38 +485,38 @@ const building = () => { ...@@ -459,38 +485,38 @@ const building = () => {
459 const goGuide = () => { 485 const goGuide = () => {
460 router.push({ 486 router.push({
461 path: `/guide`, 487 path: `/guide`,
462 query:{ 488 query: {
463 index:8 489 index: 8
464 } 490 }
465 }) 491 })
466 } 492 }
467 const popMaster = () => { 493 const popMaster = () => {
468 var params = { 494 var params = {
469 cptId:matchData.value.id 495 cptId: matchData.value.id
470 } 496 }
471 emit('pop',params) 497 emit('pop', params)
472 } 498 }
473 const backNumberSearch = () => { 499 const backNumberSearch = () => {
474 var params = { 500 var params = {
475 cptId:matchData.value.id 501 cptId: matchData.value.id
476 } 502 }
477 emit('backNumber',params) 503 emit('backNumber', params)
478 } 504 }
479 const schSearchSearch = () => { 505 const schSearchSearch = () => {
480 var params = { 506 var params = {
481 cptId:matchData.value.id 507 cptId: matchData.value.id
482 } 508 }
483 emit('schSearch',params) 509 emit('schSearch', params)
484 } 510 }
485 const handlePickup=()=>{ 511 const handlePickup = () => {
486 const params={ 512 const params = {
487 cptId :matchData.value.id 513 cptId: matchData.value.id
488 } 514 }
489 emit('pickup',params) 515 emit('pickup', params)
490 } 516 }
491 517
492 const goliveUrl = () => { 518 const goliveUrl = () => {
493 ElMessage.warning('This function is temporarily closed.' ) 519 ElMessage.warning('This function is temporarily closed.')
494 // if (liveData.value.videoStatus=="1") { 520 // if (liveData.value.videoStatus=="1") {
495 // window.open(liveData.value.videoUrlCn) 521 // window.open(liveData.value.videoUrlCn)
496 // } else { 522 // } else {
...@@ -498,10 +524,10 @@ const goliveUrl = () => { ...@@ -498,10 +524,10 @@ const goliveUrl = () => {
498 // } 524 // }
499 } 525 }
500 const gopicliveUrl = () => { 526 const gopicliveUrl = () => {
501 if (liveData.value.picStatus=="1") { 527 if (liveData.value.picStatus == "1") {
502 window.open(liveData.value.picUrlCn) 528 window.open(liveData.value.picUrlCn)
503 } else { 529 } else {
504 ElMessage.warning( 'No live' ) 530 ElMessage.warning('No live')
505 } 531 }
506 } 532 }
507 533
...@@ -516,46 +542,110 @@ const goDetail = (n) => { ...@@ -516,46 +542,110 @@ const goDetail = (n) => {
516 } 542 }
517 </script> 543 </script>
518 544
519 <style scoped lang="scss"> 545 <style lang="scss" scoped>
520 .syBg{ 546 .syBg {
521 background: url("@/assets/dance/logo_l.png") no-repeat left 98%, 547 background: url("@/assets/dance/logo_l.png") no-repeat left 98%,
522 url("@/assets/dance/logo_r1.png") no-repeat right 98%; 548 url("@/assets/dance/logo_r1.png") no-repeat right 98%;
523 background-size: 30%; 549 background-size: 30%;
524 } 550 }
525 .btabs{display: flex;position: absolute;bottom: 60px;gap: 10px; 551
526 div{color: #fff; background-color: rgba(0, 0, 0, 0.5); 552 .btabs {
527 backdrop-filter: blur(4px);border: 2px solid #9ba6d4;border-radius: 50px; 553 display: flex;
528 padding:6px 20px; 554 position: absolute;
555 bottom: 60px;
556 gap: 10px;
557
558 div {
559 color: #fff;
560 background-color: rgba(0, 0, 0, 0.5);
561 backdrop-filter: blur(4px);
562 border: 2px solid #9ba6d4;
563 border-radius: 50px;
564 padding: 6px 20px;
529 } 565 }
530 div:hover{cursor: pointer;background: #fff;color: #000;border:2px solid #fff;} 566
567 div:hover {
568 cursor: pointer;
569 background: #fff;
570 color: #000;
571 border: 2px solid #fff;
572 }
573 }
574
575 .zn-bg {
576 background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
577 border-radius: 15px;
531 } 578 }
532 .zn-bg{background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC); 579
533 border-radius: 15px;} 580 .zn-Box {
534 .zn-Box{background-size: contain;position: relative;overflow: hidden; 581 background-size: contain;
535 .bbbg{position: absolute;width: 100%;height: 100%;object-fit: cover;} 582 position: relative;
536 .bgbg{height: 100%; 583 overflow: hidden;
537 padding: 5%;display: flex; 584
585 .bbbg {
586 position: absolute;
587 width: 100%;
588 height: 100%;
589 object-fit: cover;
590 }
591
592 .bgbg {
593 height: 100%;
594 padding: 5%;
595 display: flex;
538 flex-direction: column; 596 flex-direction: column;
539 justify-content: center; 597 justify-content: center;
540 img{margin: 5% 0} 598
599 img {
600 margin: 5% 0
601 }
541 } 602 }
542 .itemBox{ 603
604 .itemBox {
543 padding: 20px 40px; 605 padding: 20px 40px;
544 p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;} 606
607 p {
608 margin: 0;
609 height: 40px;
610 line-height: 20px;
611 display: flex;
612 align-items: center;
613 }
545 } 614 }
615
546 border-radius: 15px; 616 border-radius: 15px;
547 .zn-btn{background: #FFFFFF;text-transform: uppercase; 617
548 font-size: 16px; width: fit-content; margin: 5px 5px 5px 0; 618 .zn-btn {
619 background: #FFFFFF;
620 text-transform: uppercase;
621 font-size: 16px;
622 width: fit-content;
623 margin: 5px 5px 5px 0;
549 color: #453DEA; 624 color: #453DEA;
550 border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;} 625 border-radius: 23px;
551 .item{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0; 626 padding: 10px 20px;
552 display: flex;align-items: center;text-align: center; 627 display: inline-flex;
553 font-size: 18px; flex-direction: column;padding: 35px 10px 20px; 628 align-items: center;
554 background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF; 629 }
630
631 .item {
632 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
633 margin: 40px 0 0;
634 display: flex;
635 align-items: center;
636 text-align: center;
637 font-size: 18px;
638 flex-direction: column;
639 padding: 35px 10px 20px;
640 background: url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
555 background-size: cover; 641 background-size: cover;
556 position: relative; 642 position: relative;
557 border-radius: 15px; 643 border-radius: 15px;
558 img{position: absolute;top: -30px} 644
645 img {
646 position: absolute;
647 top: -30px
648 }
559 } 649 }
560 } 650 }
561 651
...@@ -568,14 +658,29 @@ const goDetail = (n) => { ...@@ -568,14 +658,29 @@ const goDetail = (n) => {
568 clear: both; 658 clear: both;
569 overflow: hidden; 659 overflow: hidden;
570 } 660 }
571 .banner-pp{ position: absolute; bottom: 40%;right: 5%;width: 200px;} 661
662 .banner-pp {
663 position: absolute;
664 bottom: 40%;
665 right: 5%;
666 width: 200px;
667 }
572 668
573 .bannerItem { 669 .bannerItem {
574 height: 450px; 670 height: 450px;
575 background: #000;position: relative; 671 background: #000;
576 .slogen{position: relative;top: 130px;} 672 position: relative;
577 .banner-count{position: absolute;padding: 20px 40px; 673
578 font-size: 20px;align-items: center; 674 .slogen {
675 position: relative;
676 top: 130px;
677 }
678
679 .banner-count {
680 position: absolute;
681 padding: 20px 40px;
682 font-size: 20px;
683 align-items: center;
579 overflow: hidden; 684 overflow: hidden;
580 background: url("@/assets/dance/time_bg.png") no-repeat center; 685 background: url("@/assets/dance/time_bg.png") no-repeat center;
581 background-size: 100% 100%; 686 background-size: 100% 100%;
...@@ -585,29 +690,56 @@ const goDetail = (n) => { ...@@ -585,29 +690,56 @@ const goDetail = (n) => {
585 //border-image-width:4px; 690 //border-image-width:4px;
586 //border-image-outset:4px; 691 //border-image-outset:4px;
587 //background: rgba(0,0,0,0.3); 692 //background: rgba(0,0,0,0.3);
588 bottom: 40%;display: flex;flex-wrap: nowrap; 693 bottom: 40%;
694 display: flex;
695 flex-wrap: nowrap;
589 right: 5%; 696 right: 5%;
590 color: #fff; 697 color: #fff;
591 .van-count-down{display: flex;color: #fff;margin: 0 0 0 20px; 698
699 .van-count-down {
700 display: flex;
701 color: #fff;
702 margin: 0 0 0 20px;
592 width: 360px; 703 width: 360px;
593 font-size: 41px;}
594 .block{ color: #fff;text-align: center;width: 3em;
595 font-size: 41px; 704 font-size: 41px;
596 font-family: DIN Alternate;} 705 }
597 .colon{ color: #fff;display: block;margin: 20px 0 0; 706
598 font-size: 20px;} 707 .block {
708 color: #fff;
709 text-align: center;
710 width: 3em;
711 font-size: 41px;
712 font-family: DIN Alternate;
713 }
714
715 .colon {
716 color: #fff;
717 display: block;
718 margin: 20px 0 0;
719 font-size: 20px;
720 }
721 }
722
723 .bb {
724 width: 580px;
725 justify-content: center;
726 height: 100px;
727 font-size: 30px;
599 } 728 }
600 .bb{width: 580px;justify-content: center;height: 100px;font-size: 30px;} 729
601 .banner-count.bb:hover{box-shadow: 0 0 20px #453DEA;border-radius: 100px; 730 .banner-count.bb:hover {
731 box-shadow: 0 0 20px #453DEA;
732 border-radius: 100px;
602 background: #000 733 background: #000
603 } 734 }
735
604 .box { 736 .box {
605 position: absolute; 737 position: absolute;
606 height: 100%; 738 height: 100%;
607 left: 0; 739 left: 0;
608 right: 0; 740 right: 0;
609 } 741 }
610 742
611 h3 { 743 h3 {
612 position: absolute; 744 position: absolute;
613 color: #fff; 745 color: #fff;
...@@ -616,7 +748,7 @@ const goDetail = (n) => { ...@@ -616,7 +748,7 @@ const goDetail = (n) => {
616 bottom: 50px; 748 bottom: 50px;
617 font-size: 3vw; 749 font-size: 3vw;
618 } 750 }
619 751
620 video { 752 video {
621 width: 100%; 753 width: 100%;
622 height: 100%; 754 height: 100%;
...@@ -629,27 +761,28 @@ const goDetail = (n) => { ...@@ -629,27 +761,28 @@ const goDetail = (n) => {
629 } 761 }
630 762
631 .banner { 763 .banner {
632 position: relative;margin:0 0 30px; 764 position: relative;
633 765 margin: 0 0 30px;
766
634 :deep(.el-carousel__arrow) { 767 :deep(.el-carousel__arrow) {
635 border-radius: 0; 768 border-radius: 0;
636 769
637 .el-icon { 770 .el-icon {
638 color: transparent; 771 color: transparent;
639 } 772 }
640 773
641 &:hover { 774 &:hover {
642 filter: brightness(1.5) 775 filter: brightness(1.5)
643 } 776 }
644 } 777 }
645 778
646 :deep(.el-carousel__arrow--left) { 779 :deep(.el-carousel__arrow--left) {
647 background: url("@/assets/images/prev2@2x.png") no-repeat center; 780 background: url("@/assets/images/prev2@2x.png") no-repeat center;
648 width: 78px; 781 width: 78px;
649 height: 45px; 782 height: 45px;
650 background-size: contain; 783 background-size: contain;
651 } 784 }
652 785
653 :deep(.el-carousel__arrow--right) { 786 :deep(.el-carousel__arrow--right) {
654 background: url("@/assets/images/next2@2x.png") no-repeat center; 787 background: url("@/assets/images/next2@2x.png") no-repeat center;
655 width: 78px; 788 width: 78px;
...@@ -657,41 +790,121 @@ const goDetail = (n) => { ...@@ -657,41 +790,121 @@ const goDetail = (n) => {
657 background-size: contain 790 background-size: contain
658 } 791 }
659 } 792 }
660 .el-calendar{--el-calendar-border:none;--el-calendar-cell-width:40px;text-align:center; 793
661 --el-text-color-regular:#8E8D94; 794 .el-calendar {
662 :deep(.el-calendar__header){justify-content: center;padding: 0 0 10px} 795 --el-calendar-border: none;
663 :deep(.el-calendar__body){border: 1px solid #F0F0F0;padding: 0} 796 --el-calendar-cell-width: 40px;
664 :deep(.el-calendar-table .el-calendar-day){padding: 1px;} 797 text-align: center;
665 :deep(.el-calendar-table td.is-selected){background: transparent;} 798 --el-text-color-regular: #8E8D94;
666 :deep(.el-calendar__button-group){display: none;} 799
667 :deep(.el-calendar-table thead th){padding: 5px 0 0} 800 :deep(.el-calendar__header) {
668 .primaryDate{color: #fff; 801 justify-content: center;
669 background: #000;} 802 padding: 0 0 10px
670 .date{ margin:auto;border-radius: 50%;width: 30px;height: 30px;line-height: 30px; 803 }
804
805 :deep(.el-calendar__body) {
806 border: 1px solid #F0F0F0;
807 padding: 0
808 }
809
810 :deep(.el-calendar-table .el-calendar-day) {
811 padding: 1px;
812 }
813
814 :deep(.el-calendar-table td.is-selected) {
815 background: transparent;
816 }
817
818 :deep(.el-calendar__button-group) {
819 display: none;
820 }
821
822 :deep(.el-calendar-table thead th) {
823 padding: 5px 0 0
824 }
825
826 .primaryDate {
827 color: #fff;
828 background: #000;
829 }
830
831 .date {
832 margin: auto;
833 border-radius: 50%;
834 width: 30px;
835 height: 30px;
836 line-height: 30px;
671 font-weight: bold; 837 font-weight: bold;
672 } 838 }
673 } 839 }
674 840
675 .calendarList{border: 1px solid #F0F0F0;padding:12px 20px;overflow: auto;height: 233px; 841 .calendarList {
676 ul{ 842 border: 1px solid #F0F0F0;
677 li{background: #F6F9FE;margin:7px 0 7px 0;position: relative;padding: 13px; 843 padding: 12px 20px;
844 overflow: auto;
845 height: 233px;
846
847 ul {
848 li {
849 background: #F6F9FE;
850 margin: 7px 0 7px 0;
851 position: relative;
852 padding: 13px;
678 border-radius: 10px; 853 border-radius: 10px;
679 font-weight: 500; 854 font-weight: 500;
680 font-size: 15px; 855 font-size: 15px;
681 label{color: #000;margin-right: 15px; 856
682 &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto; 857 label {
683 border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1} 858 color: #000;
859 margin-right: 15px;
860
861 &::before {
862 content: '';
863 background: #fff;
864 left: -17px;
865 top: 0px;
866 bottom: 0;
867 margin: auto;
868 border-radius: 50%;
869 width: 2px;
870 height: 2px;
871 position: absolute;
872 z-index: 1
873 }
684 } 874 }
685 } 875 }
686 li::before{content: '';background: #000; 876
687 border-radius: 50%;width: 8px;height: 8px;position: absolute; 877 li::before {
688 left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1; 878 content: '';
879 background: #000;
880 border-radius: 50%;
881 width: 8px;
882 height: 8px;
883 position: absolute;
884 left: -20px;
885 top: 0;
886 bottom: 0;
887 margin: auto;
888 z-index: 1;
889 }
890
891 li::after {
892 content: '';
893 left: -16px;
894 width: 1px;
895 height: 100%;
896 background: #EBEBEB;
897 position: absolute;
898 top: 20px
689 } 899 }
690 li::after{content: ''; left: -16px;width: 1px;height: 100%; 900
691 background: #EBEBEB; position: absolute;top: 20px} 901 li:hover {
692 li:hover{color: #fff; 902 color: #fff;
693 background: #000; 903 background: #000;
694 label{color: #fff;} 904
905 label {
906 color: #fff;
907 }
695 } 908 }
696 } 909 }
697 } 910 }
...@@ -705,7 +918,7 @@ const goDetail = (n) => { ...@@ -705,7 +918,7 @@ const goDetail = (n) => {
705 .ggbond { 918 .ggbond {
706 height: 230px; 919 height: 230px;
707 position: relative; 920 position: relative;
708 921
709 img { 922 img {
710 height: 100%; 923 height: 100%;
711 object-fit: cover; 924 object-fit: cover;
...@@ -717,131 +930,336 @@ const goDetail = (n) => { ...@@ -717,131 +930,336 @@ const goDetail = (n) => {
717 } 930 }
718 } 931 }
719 932
720 .teacher{height: 410px;background: #fff; 933 .teacher {
721 position: relative;border-radius: 10px;overflow: hidden; 934 height: 410px;
722 .imgbox{background: linear-gradient(0,#C8AAFC,#fff)} 935 background: #fff;
723 img{height: 350px;width: 100%;object-fit: cover;} 936 position: relative;
724 h3{color: #fff;background: url("@/assets/dance/name_bg.png") no-repeat center; 937 border-radius: 10px;
725 background-size:110% 100%;text-align: center;height: 30px;line-height: 30px; 938 overflow: hidden;
726 font-size: 18px;position: absolute;width: 100%;bottom: 30px;} 939
727 p{text-align: center;margin: 25px 0 0; 940 .imgbox {
728 font-size: 14px;} 941 background: linear-gradient(0, #C8AAFC, #fff)
942 }
943
944 img {
945 height: 350px;
946 width: 100%;
947 object-fit: cover;
948 }
949
950 h3 {
951 color: #fff;
952 background: url("@/assets/dance/name_bg.png") no-repeat center;
953 background-size: 110% 100%;
954 text-align: center;
955 height: 30px;
956 line-height: 30px;
957 font-size: 18px;
958 position: absolute;
959 width: 100%;
960 bottom: 30px;
961 }
962
963 p {
964 text-align: center;
965 margin: 25px 0 0;
966 font-size: 14px;
967 }
729 } 968 }
969
730 @media screen and (max-width: 1650px) { 970 @media screen and (max-width: 1650px) {
731 .teacher{height: 320px; 971 .teacher {
732 .imgbox{ 972 height: 320px;
733 img{height: 260px} 973
974 .imgbox {
975 img {
976 height: 260px
977 }
734 } 978 }
735 } 979 }
736 } 980 }
981
737 @media screen and (max-width: 1200px) { 982 @media screen and (max-width: 1200px) {
738 .teacher{height: 450px;margin: 0 0 20px; 983 .teacher {
739 .imgbox{ 984 height: 450px;
740 img{height: 390px} 985 margin: 0 0 20px;
986
987 .imgbox {
988 img {
989 height: 390px
990 }
741 } 991 }
742 } 992 }
743 } 993 }
994
744 @media screen and (max-width: 900px) { 995 @media screen and (max-width: 900px) {
745 .teacher{height: 400px;margin: 0 0 20px; 996 .teacher {
746 .imgbox{ 997 height: 400px;
747 img{height: 340px} 998 margin: 0 0 20px;
999
1000 .imgbox {
1001 img {
1002 height: 340px
1003 }
748 } 1004 }
749 } 1005 }
750 } 1006 }
1007
751 @media screen and (max-width: 800px) { 1008 @media screen and (max-width: 800px) {
752 .teacher{height: 400px;margin: 0 0 20px; 1009 .teacher {
753 .imgbox{ 1010 height: 400px;
754 img{height: 260px} 1011 margin: 0 0 20px;
1012
1013 .imgbox {
1014 img {
1015 height: 260px
1016 }
755 } 1017 }
756 } 1018 }
757 } 1019 }
758 .aboutBox{background: url("@/assets/dance/about_bg.png") no-repeat center;height: 375px; 1020
759 background-size: cover;padding: 40px 60px; position: relative; 1021 .aboutBox {
760 .content{font-size: 18px;line-height: 2.2;height: 240px;overflow: hidden; 1022 background: url("@/assets/dance/about_bg.png") no-repeat center;
761 text-align: left;text-indent: 2em;} 1023 height: 375px;
762 .shadowbox{position: absolute;left: 0;bottom: 90px;height: 100px;width: 100%; 1024 background-size: cover;
763 background: linear-gradient(0deg,rgba(255,255,255,1),rgba(255,255,255,0)); 1025 padding: 40px 60px;
1026 position: relative;
1027
1028 .content {
1029 font-size: 18px;
1030 line-height: 2.2;
1031 height: 240px;
1032 overflow: hidden;
1033 text-align: left;
1034 text-indent: 2em;
1035 }
1036
1037 .shadowbox {
1038 position: absolute;
1039 left: 0;
1040 bottom: 90px;
1041 height: 100px;
1042 width: 100%;
1043 background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
1044 }
1045
1046 .btn-lineG {
764 } 1047 }
765 .btn-lineG{}
766 } 1048 }
767 .mapBox{background: url("@/assets/dance/map.png") no-repeat center;height: 375px; 1049
768 background-size: cover;padding: 1px;position: relative;display: flex; 1050 .mapBox {
769 .content{background: #fff;width: 60%;left: 40px;padding: 30px; 1051 background: url("@/assets/dance/map.png") no-repeat center;
770 position: absolute;height: 90%;top: 0;bottom: 0;margin: auto; 1052 height: 375px;
1053 background-size: cover;
1054 padding: 1px;
1055 position: relative;
1056 display: flex;
1057
1058 .content {
1059 background: #fff;
1060 width: 60%;
1061 left: 40px;
1062 padding: 30px;
1063 position: absolute;
1064 height: 90%;
1065 top: 0;
1066 bottom: 0;
1067 margin: auto;
1068 }
1069
1070 div {
1071 padding-left: 60px;
1072 }
1073
1074 .phone {
1075 background: url("@/assets/dance/map01.png") no-repeat left;
1076 background-size: 30px;
771 } 1077 }
772 div{padding-left: 60px;} 1078
773 .phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;} 1079 .address {
774 .address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px; 1080 background: url("@/assets/dance/map02.png") no-repeat left;
775 margin:50px 0; 1081 background-size: 30px;
1082 margin: 50px 0;
776 } 1083 }
777 .email{background: url("@/assets/dance/map03.png") no-repeat left;background-size: 30px;} 1084
778 h4{margin: 0; 1085 .email {
1086 background: url("@/assets/dance/map03.png") no-repeat left;
1087 background-size: 30px;
1088 }
1089
1090 h4 {
1091 margin: 0;
779 font-size: 16px; 1092 font-size: 16px;
780 color: #AAAAAA;} 1093 color: #AAAAAA;
781 p{margin: 13px 0 0;} 1094 }
1095
1096 p {
1097 margin: 13px 0 0;
1098 }
782 } 1099 }
783 .logobox{background: #fff;height: 180px;border-radius: 10px;margin: 0 0 30px; 1100
784 img{width: 100%;height: 100%;object-fit: contain;} 1101 .logobox {
1102 background: #fff;
1103 height: 180px;
1104 border-radius: 10px;
1105 margin: 0 0 30px;
1106
1107 img {
1108 width: 100%;
1109 height: 100%;
1110 object-fit: contain;
1111 }
785 } 1112 }
786 .swiperPic{background: #F3F1FE;position: relative; height: 100%; 1113
1114 .swiperPic {
1115 background: #F3F1FE;
1116 position: relative;
1117 height: 100%;
787 padding: 20px 45px; 1118 padding: 20px 45px;
788 .picprev{position: absolute; left: 5px;top: 0;bottom:0;margin: auto;height: 33px; 1119
1120 .picprev {
1121 position: absolute;
1122 left: 5px;
1123 top: 0;
1124 bottom: 0;
1125 margin: auto;
1126 height: 33px;
789 cursor: pointer; 1127 cursor: pointer;
790 &:hover{filter:brightness(2)} 1128
1129 &:hover {
1130 filter: brightness(2)
1131 }
791 } 1132 }
792 .picnext{position: absolute;right: 5px;top: 0;bottom:0;margin: auto;height: 33px; 1133
1134 .picnext {
1135 position: absolute;
1136 right: 5px;
1137 top: 0;
1138 bottom: 0;
1139 margin: auto;
1140 height: 33px;
793 cursor: pointer; 1141 cursor: pointer;
794 &:hover{filter:brightness(2)}} 1142
1143 &:hover {
1144 filter: brightness(2)
1145 }
1146 }
795 } 1147 }
796 .newline{display: flex;align-items: center;height: 56px;justify-content: space-between; 1148
1149 .newline {
1150 display: flex;
1151 align-items: center;
1152 height: 56px;
1153 justify-content: space-between;
797 cursor: pointer; 1154 cursor: pointer;
798 h3{font-weight: 400;margin: 0;width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; 1155
1156 h3 {
1157 font-weight: 400;
1158 margin: 0;
1159 width: 80%;
1160 text-overflow: ellipsis;
1161 white-space: nowrap;
1162 overflow: hidden;
799 font-size: 18px; 1163 font-size: 18px;
800 color: #030303;} 1164 color: #030303;
801 span{font-weight: 400; 1165 }
1166
1167 span {
1168 font-weight: 400;
802 font-size: 14px; 1169 font-size: 14px;
803 color: #B4B6B8;} 1170 color: #B4B6B8;
804 &:hover{ 1171 }
1172
1173 &:hover {
805 background: #F7F8FC; 1174 background: #F7F8FC;
806 } 1175 }
807 } 1176 }
808 1177
809 @media (max-width: 800px) { 1178 @media (max-width: 800px) {
810 .newline{height: 40px; 1179 .newline {
811 h3{width: 70%;font-size: 14px;} 1180 height: 40px;
812 span{font-size: 12px;} 1181
1182 h3 {
1183 width: 70%;
1184 font-size: 14px;
1185 }
1186
1187 span {
1188 font-size: 12px;
1189 }
813 } 1190 }
814 .box{width: 94%} 1191 .box {
815 .calendarList{padding: 0; 1192 width: 94%
816 ul{ 1193 }
817 li{margin: 10px} 1194 .calendarList {
1195 padding: 0;
1196
1197 ul {
1198 li {
1199 margin: 10px
1200 }
818 } 1201 }
819 } 1202 }
820 .aboutBox{padding: 20px 30px;} 1203 .aboutBox {
821 .indexTitle{margin: 30px 0 20px} 1204 padding: 20px 30px;
822 .teacher{height: 320px;margin: 0 0 20px;
823 img{height: 260px}
824 } 1205 }
825 .activeItem{margin: 0 0 20px;} 1206 .indexTitle {
826 .mapBox{ 1207 margin: 30px 0 20px
827 div{padding-left: 40px;} 1208 }
828 .content{ width: 80%;left: 10%;padding:10px 20px 0 20px;} 1209 .teacher {
829 .address{margin: 30px 0;} 1210 height: 320px;
830 p{text-align: left;word-break: break-all;} 1211 margin: 0 0 20px;
1212
1213 img {
1214 height: 260px
1215 }
1216 }
1217 .activeItem {
1218 margin: 0 0 20px;
1219 }
1220 .mapBox {
1221 div {
1222 padding-left: 40px;
1223 }
1224
1225 .content {
1226 width: 80%;
1227 left: 10%;
1228 padding: 10px 20px 0 20px;
1229 }
1230
1231 .address {
1232 margin: 30px 0;
1233 }
1234
1235 p {
1236 text-align: left;
1237 word-break: break-all;
1238 }
831 } 1239 }
832 .fixed_gg { 1240 .fixed_gg {
833 display: none; 1241 display: none;
834 } 1242 }
835 .bannerItem .banner-count{flex-direction: column; 1243 .bannerItem .banner-count {
836 transform: scale(0.5); width: auto; 1244 flex-direction: column;
1245 transform: scale(0.5);
1246 width: auto;
837 left: 0; 1247 left: 0;
838 right: 0; 1248 right: 0;
839 .van-count-down{margin: 30px 0 0;} 1249
1250 .van-count-down {
1251 margin: 30px 0 0;
1252 }
840 } 1253 }
841 .bgbg{ text-align: center; 1254 .bgbg {
842 h1{text-align: center} 1255 text-align: center;
1256
1257 h1 {
1258 text-align: center
1259 }
843 } 1260 }
844 } 1261 }
1262
845 :deep(.btn-q) { 1263 :deep(.btn-q) {
846 //background: #FFFFFF; 1264 //background: #FFFFFF;
847 //font-size: 18px; 1265 //font-size: 18px;
...@@ -850,7 +1268,7 @@ const goDetail = (n) => { ...@@ -850,7 +1268,7 @@ const goDetail = (n) => {
850 //padding: 10px 20px; 1268 //padding: 10px 20px;
851 //display: inline-flex; 1269 //display: inline-flex;
852 //align-items: center; 1270 //align-items: center;
853 1271
854 padding: 20px 40px; 1272 padding: 20px 40px;
855 font-size: 20px; 1273 font-size: 20px;
856 align-items: center; 1274 align-items: center;
...@@ -864,16 +1282,16 @@ const goDetail = (n) => { ...@@ -864,16 +1282,16 @@ const goDetail = (n) => {
864 box-sizing: inherit; 1282 box-sizing: inherit;
865 } 1283 }
866 1284
867 .btn-q:hover{ 1285 .btn-q:hover {
868 box-shadow: 0 0 20px #453DEA; 1286 box-shadow: 0 0 20px #453DEA;
869 border-radius: 100px; 1287 border-radius: 100px;
870 background: #000 !important; 1288 background: #000 !important;
871 } 1289 }
872 1290
873 .ding{ 1291 .ding {
874 position: fixed; 1292 position: fixed;
875 right:0px; 1293 right: 0px;
876 z-index:99; 1294 z-index: 99;
877 top: 40%; 1295 top: 40%;
878 background: #000 !important; 1296 background: #000 !important;
879 box-shadow: none; 1297 box-shadow: none;
...@@ -882,16 +1300,34 @@ const goDetail = (n) => { ...@@ -882,16 +1300,34 @@ const goDetail = (n) => {
882 //height: 100px; 1300 //height: 100px;
883 padding: 20px; 1301 padding: 20px;
884 } 1302 }
885 .mb30{margin-bottom: 30px;} 1303
886 .livetimecount{position: absolute;top: 0;z-index: 2;background: #F04035; 1304 .mb30 {
1305 margin-bottom: 30px;
1306 }
1307
1308 .livetimecount {
1309 position: absolute;
1310 top: 0;
1311 z-index: 2;
1312 background: #F04035;
887 padding: 2px 4px; 1313 padding: 2px 4px;
888 &::after{content: ''; width: 0; 1314
889 height: 0;position: absolute;right: -15px;top: 0; 1315 &::after {
1316 content: '';
1317 width: 0;
1318 height: 0;
1319 position: absolute;
1320 right: -15px;
1321 top: 0;
890 border-top: 24px solid #F04035; 1322 border-top: 24px solid #F04035;
891 border-right: 15px solid transparent;} 1323 border-right: 15px solid transparent;
892 .van-count-down { display: flex; 1324 }
1325
1326 .van-count-down {
1327 display: flex;
893 color: #fff; 1328 color: #fff;
894 font-size: 14px; 1329 font-size: 14px;
1330
895 .block { 1331 .block {
896 color: #fff; 1332 color: #fff;
897 text-align: center; 1333 text-align: center;
...@@ -900,13 +1336,23 @@ const goDetail = (n) => { ...@@ -900,13 +1336,23 @@ const goDetail = (n) => {
900 } 1336 }
901 } 1337 }
902 } 1338 }
1339
903 @media (max-width: 500px) { 1340 @media (max-width: 500px) {
904 .forPc{display: none!important;} 1341 .forPc {
905 .zn-Box .bgbg{padding: 10px 0 0; 1342 display: none !important;
906 .mb30{margin: 0} 1343 }
907 .zn-btn{margin-top: 10px} 1344 .zn-Box .bgbg {
1345 padding: 10px 0 0;
1346
1347 .mb30 {
1348 margin: 0
1349 }
1350
1351 .zn-btn {
1352 margin-top: 10px
1353 }
908 } 1354 }
909 .logobox{ 1355 .logobox {
910 height: 60px; 1356 height: 60px;
911 } 1357 }
912 } 1358 }
......
vite.config.js
1 import { defineConfig, loadEnv } from 'vite' 1 import {defineConfig, loadEnv} from 'vite'
2 import path, { resolve } from 'path' 2 import path, {resolve} from 'path'
3 import createVitePlugins from './vite/plugins' 3 import createVitePlugins from './vite/plugins'
4 import inject from '@rollup/plugin-inject' 4 import inject from '@rollup/plugin-inject'
5 import commonjs from '@rollup/plugin-commonjs' 5 import commonjs from '@rollup/plugin-commonjs'
6 // import legacy from '@vitejs/plugin-legacy' 6 // import legacy from '@vitejs/plugin-legacy'
7 7
8 // https://vitejs.dev/config/ 8 // https://vitejs.dev/config/
9 export default defineConfig(({ mode, command }) => { 9 export default defineConfig(({mode, command}) => {
10 const env = loadEnv(mode, process.cwd()) 10 const env = loadEnv(mode, process.cwd())
11 return { 11 return {
12 // 部署生产环境和开发环境下的URL。 12 // 部署生产环境和开发环境下的URL。
...@@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => { ...@@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => {
82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
83 }, 83 },
84 '/dev-api': { 84 '/dev-api': {
85 target: 'http://192.168.1.118:8082/', 85 // target: 'http://192.168.1.118:8082/',
86 // target: 'http://192.168.1.131:8081/', 86 // target: 'http://192.168.1.131:8081/',
87 // target: 'https://ces.2025wtcwuxi.com/stage-api/', 87 // target: 'https://ces.2025wtcwuxi.com/stage-api/',
88 // target: 'http://124.70.181.90:1880/stage-api', 88 // target: 'http://124.70.181.90:1880/stage-api',
...@@ -92,8 +92,8 @@ export default defineConfig(({ mode, command }) => { ...@@ -92,8 +92,8 @@ export default defineConfig(({ mode, command }) => {
92 }, 92 },
93 '/ticket': { 93 '/ticket': {
94 // target: 'http://192.168.1.131:8098/', 94 // target: 'http://192.168.1.131:8098/',
95 // target: 'http://192.168.1.131:8081/', 95 target: 'http://36.153.235.222:8899/',
96 target: 'https://jijin.wtwuxicenter.com/h5/', 96 // target: 'https://jijin.wtwuxicenter.com/h5/',
97 // target: 'https://ticketh5.wdsfwuxicenter.com/h5/', 97 // target: 'https://ticketh5.wdsfwuxicenter.com/h5/',
98 changeOrigin: true, 98 changeOrigin: true,
99 rewrite: (p) => p.replace(/^\/ticket/, '') 99 rewrite: (p) => p.replace(/^\/ticket/, '')
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!