官网
Showing
3 changed files
with
86 additions
and
46 deletions
| 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> | ... | ... |
This diff is collapsed.
Click to expand it.
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment