f23375cd by zhangmeng

官网

1 parent 45b4252e
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>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!