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 919 additions and 366 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">--> 44 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
45 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>--> 45 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>-->
46 <!-- </el-col>--> 46 <!-- </el-col>-->
47 47
48 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 48 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
49 <!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>--> 49 <!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>-->
50 <!-- </el-col>--> 50 <!-- </el-col>-->
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,21 +94,22 @@ watch(matchId, (val) => { ...@@ -94,21 +94,22 @@ 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 {
...@@ -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',
...@@ -162,12 +170,17 @@ function popRemark(type) { ...@@ -162,12 +170,17 @@ function popRemark(type) {
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',
...@@ -176,6 +189,7 @@ function popRemark(type) { ...@@ -176,6 +189,7 @@ function popRemark(type) {
176 return 189 return
177 } 190 }
178 191
192
179 applyInvitation() 193 applyInvitation()
180 return 194 return
181 } 195 }
...@@ -235,30 +249,44 @@ function goBooking(n) { ...@@ -235,30 +249,44 @@ 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;
275 gap: 10px;
254 276
255 img {object-fit: contain; 277 img {
256 width: 75px;height: 75px; 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;
...@@ -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> 48 </div>
49 <div v-if="liveData&& liveData.picStatus==1" @click.stop="gopicliveUrl"> 49 <div v-if="currentDateTime > liveData.videoEnd" class="banner-count bb">直播已结束</div>
50 <div class="picliveBtn" v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)">图片直播中</div> 50 <!-- <div class="banner-count bb" v-if="currentDateTime < liveData.videoStart">直播即将开始</div>-->
51 <div class="picliveBtn" v-if="currentDateTime > liveData.picEnd">图片直播</div> 51 </div>
52 <div class="picliveBtn" v-if="currentDateTime < liveData.picStart">图片直播</div> 52
53 <div v-if="liveData&& liveData.picStatus==1&&form.isLivePic==1" @click.stop="gopicliveUrl">
54 <div v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)" class="picliveBtn">
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>
...@@ -102,12 +110,12 @@ ...@@ -102,12 +110,12 @@
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>
...@@ -115,11 +123,11 @@ ...@@ -115,11 +123,11 @@
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>
...@@ -143,8 +151,8 @@ ...@@ -143,8 +151,8 @@
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>
...@@ -255,7 +263,7 @@ ...@@ -255,7 +263,7 @@
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>
...@@ -290,7 +298,7 @@ ...@@ -290,7 +298,7 @@
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,8 +364,8 @@ onMounted(() => { ...@@ -353,8 +364,8 @@ 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,
...@@ -381,10 +392,16 @@ const init = () => { ...@@ -381,10 +392,16 @@ const init = () => {
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 }
...@@ -584,15 +619,23 @@ const gopicliveUrl = () => { ...@@ -584,15 +619,23 @@ 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;
638 }
596 639
597 .banner-count { 640 .banner-count {
598 cursor: pointer; 641 cursor: pointer;
...@@ -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">
...@@ -35,11 +37,12 @@ ...@@ -35,11 +37,12 @@
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>
...@@ -93,13 +100,13 @@ ...@@ -93,13 +100,13 @@
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>
...@@ -135,8 +142,8 @@ ...@@ -135,8 +142,8 @@
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">
...@@ -148,7 +155,7 @@ ...@@ -148,7 +155,7 @@
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>
...@@ -179,11 +186,11 @@ ...@@ -179,11 +186,11 @@
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>
...@@ -199,12 +206,13 @@ ...@@ -199,12 +206,13 @@
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>
...@@ -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>
...@@ -245,10 +253,11 @@ ...@@ -245,10 +253,11 @@
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>
...@@ -256,7 +265,7 @@ ...@@ -256,7 +265,7 @@
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">
...@@ -283,7 +292,7 @@ ...@@ -283,7 +292,7 @@
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>
...@@ -295,15 +304,15 @@ ...@@ -295,15 +304,15 @@
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({
395 pageSize: 3,
380 pageNum: 1, 396 pageNum: 1,
381 language:2, 397 language: 2,
382 code: '1000' } 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;
564 }
565
566 div:hover {
567 cursor: pointer;
568 background: #fff;
569 color: #000;
570 border: 2px solid #fff;
528 } 571 }
529 div:hover{cursor: pointer;background: #fff;color: #000;border:2px solid #fff;}
530 } 572 }
531 .zn-bg{background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC); 573
532 border-radius: 15px;} 574 .zn-bg {
533 .zn-Box{background-size: contain;position: relative;overflow: hidden; 575 background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
534 .bbbg{position: absolute;width: 100%;height: 100%;object-fit: cover;} 576 border-radius: 15px;
535 .bgbg{height: 100%; 577 }
536 padding: 5%;display: flex; 578
579 .zn-Box {
580 background-size: contain;
581 position: relative;
582 overflow: hidden;
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;
544 } 612 }
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,22 +689,49 @@ const goDetail = (n) => { ...@@ -584,22 +689,49 @@ 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;}
596 .colon{ color: #fff;display: block;margin: 20px 0 0;
597 font-size: 20px;}
598 } 704 }
599 .bb{width: 580px;justify-content: center;height: 100px;font-size: 30px;} 705
600 .banner-count.bb:hover{box-shadow: 0 0 20px #453DEA;border-radius: 100px; 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;
727 }
728
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%;
...@@ -628,7 +760,8 @@ const goDetail = (n) => { ...@@ -628,7 +760,8 @@ const goDetail = (n) => {
628 } 760 }
629 761
630 .banner { 762 .banner {
631 position: relative;margin:0 0 30px; 763 position: relative;
764 margin: 0 0 30px;
632 765
633 :deep(.el-carousel__arrow) { 766 :deep(.el-carousel__arrow) {
634 border-radius: 0; 767 border-radius: 0;
...@@ -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
683 } 872 }
684 } 873 }
685 li::before{content: '';background: #000;
686 border-radius: 50%;width: 8px;height: 8px;position: absolute;
687 left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1;
688 } 874 }
689 li::after{content: ''; left: -16px;width: 1px;height: 100%; 875
690 background: #EBEBEB; position: absolute;top: 20px} 876 li::before {
691 li:hover{color: #fff; 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
898 }
899
900 li:hover {
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 }
...@@ -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;
770 } 1067 }
771 div{padding-left: 60px;} 1068
772 .phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;} 1069 div {
773 .address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px; 1070 padding-left: 60px;
774 margin:50px 0; 1071 }
1072
1073 .phone {
1074 background: url("@/assets/dance/map01.png") no-repeat left;
1075 background-size: 30px;
1076 }
1077
1078 .address {
1079 background: url("@/assets/dance/map02.png") no-repeat left;
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;
812 } 1188 }
813 .box{width: 94%} 1189 }
814 .calendarList{padding: 0; 1190 .box {
815 ul{ 1191 width: 94%
816 li{margin: 10px} 1192 }
1193 .calendarList {
1194 padding: 0;
1195
1196 ul {
1197 li {
1198 margin: 10px
817 } 1199 }
818 } 1200 }
819 .aboutBox{padding: 20px 30px;}
820 .indexTitle{margin: 30px 0 20px}
821 .teacher{height: 320px;margin: 0 0 20px;
822 img{height: 260px}
823 } 1201 }
824 .activeItem{margin: 0 0 20px;} 1202 .aboutBox {
825 .mapBox{ 1203 padding: 20px 30px;
826 div{padding-left: 40px;} 1204 }
827 .content{ width: 80%;left: 10%;padding:10px 20px 0 20px;} 1205 .indexTitle {
828 .address{margin: 30px 0;} 1206 margin: 30px 0 20px
829 p{text-align: left;word-break: break-all;} 1207 }
1208 .teacher {
1209 height: 320px;
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 }
1252 }
1253 .bgbg {
1254 text-align: center;
1255
1256 h1 {
1257 text-align: center
839 } 1258 }
840 .bgbg{ text-align: center;
841 h1{text-align: center}
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;
...@@ -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!