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