Skip to content

杨炀 / dance-pc

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

官网

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