Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
ca975928 by 华明祺
Options

Merge branch '世锦赛' of https://code.itechtop.cn/yangyang/dance-pc into 世锦赛 

# Conflicts:
#	src/viewsPc/components/homeQuick.vue
2 parents 508b1a6c 45db652c
Inline Side-by-side
Showing 9 changed files with 1318 additions and 831 deletions
src/viewsPc/booking/hotel.vue
......@@ -6,23 +6,23 @@
</div>
<div class="box">
<div class="searchBar">
<el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
<el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
<el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
{{ language == 0 ? '搜索' : 'Search' }}
</el-button>
</div>
</div>
<div class="box" v-loading="loading">
<div v-loading="loading" class="box">
<el-row :gutter="20">
<el-col :lg="24" :md="24" :sm="24" :xs="24" :xl="24" v-for="(h,index) in list" class="mb20">
<el-col v-for="(h,index) in list" :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
<el-card @click="goDetail(h)">
<!-- 酒店列表-->
<el-row class="hotel" align="middle" :gutter="20">
<el-row :gutter="20" align="middle" class="hotel">
<el-col :lg="6" :md="6">
<div class="imgbox">
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
<img :src="fillImgUrl(h.photos?.split(',')[0])" class="w100"/>
</div>
</el-col>
<el-col :lg="12" :md="12">
......@@ -35,7 +35,7 @@
<a v-show="h.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
</div>
<p class="esp addr mt20">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<LocationFilled/>
</el-icon>
{{ h.address }}
......@@ -55,7 +55,7 @@
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/>
<div style="height: 50px"></div>
</div>
</div>
</template>
......@@ -74,7 +74,7 @@ const route = useRoute()
const useStore = useUserStore()
const user = useStore.user
const flag = useRouteQuery('flag')
// const flag = useRouteQuery('flag')
const language = useStorage('language', 0)
const query = ref({
......@@ -90,13 +90,11 @@ onMounted(() => {
function getList() {
loading.value = true
booking.getHotelList(Object.assign({
meeting: flag.value,
},query.value)).then(res => {
booking.getHotelList(Object.assign({}, query.value)).then(res => {
list.value = res.rows
loading.value = false
console.log(list.value)
}).catch(e => {
loading.value = false
})
......@@ -107,73 +105,84 @@ function goDetail(item) {
useStore.setVisitor()
return
}
if (item.meeting == '1') {
ElMessageBox.confirm(item.meetText, '', {
cancelButtonText: language.value == 1 ? 'Close ' : '关闭',
confirmButtonText: language.value == 1 ? 'Continue to book' : '继续预订',
dangerouslyUseHTMLString: true,
type: 'warning',
}).then((res) => {
router.push({
name: 'hotelDetail',
params: {
hotelId: item.hotelId,
},
query: {
id: item.id
}
})
})
} else {
router.push({
name: 'hotelDetail',
params: {
hotelId: item.hotelId,
},
query: {
id: item.id
}
})
}
router.push({
name: 'hotelDetail',
params: {
hotelId: item.hotelId,
},
query: {
id: item.id
}
})
// if (item.meeting == '1') {
// ElMessageBox.confirm(item.meetText, '', {
// cancelButtonText: language.value == 1 ? 'Close ' : '关闭',
// confirmButtonText: language.value == 1 ? 'Continue to book' : '继续预订',
// dangerouslyUseHTMLString: true,
// type: 'warning',
// }).then((res) => {
// router.push({
// name: 'hotelDetail',
// params: {
// hotelId: item.hotelId,
// },
// query: {
// id: item.id
// }
// })
// })
// } else {
// router.push({
// name: 'hotelDetail',
// params: {
// hotelId: item.hotelId,
// },
// query: {
// id: item.id
// }
// })
// }
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.hotel {
h3 {
margin: 0 0 10px;
}
img.w100 {
object-fit: cover;
aspect-ratio: 16/9
}
.addr {
font-size: 14px;
color: #929AA0;
font-weight: 400;
margin: 0 0 10px;
}
.price {
margin: 0 0 8px;
color: #FF8124;
font-size: 18px;
span {
font-size: 36px;
margin: 0 8px;
font-family: 'DINAlternate-Bold';
font-weight: 600;
}
i {
font-style: normal;
color: #929AA0;
}
}
.blackBtn {
background: #000;
border: #000;
......@@ -188,7 +197,7 @@ function goDetail(item) {
display: flex;
align-items: center;
justify-content: center;
img {
display: block;
margin: -30px auto 0;
......@@ -208,7 +217,7 @@ function goDetail(item) {
.no-border {
border: none;
background: #F5F7F9;
:deep(.el-input__wrapper) {
border: none;
box-shadow: none;
......@@ -220,12 +229,12 @@ function goDetail(item) {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
}
.starBox {
position: absolute;
bottom: 0;
......@@ -240,7 +249,7 @@ function goDetail(item) {
.starBox {
border-radius: 14px 0 0 0;
img {
display: inline-block;
margin-right: 4px;
......@@ -250,12 +259,12 @@ function goDetail(item) {
.tagbox {
margin: 10px 0;
a {
color: #AFB5B9;
font-size: 12px;
}
span {
border-radius: 13px;
font-size: 12px;
......@@ -263,22 +272,22 @@ function goDetail(item) {
margin-right: 10px;
font-weight: 400;
}
span:nth-child(4n) {
background: rgba(50, 177, 108, 0.2);
color: rgba(50, 177, 108, 1);
}
span:nth-child(4n+1) {
background: rgba(243, 152, 0, 0.2);
color: rgba(243, 152, 0, 1);
}
span:nth-child(4n+2) {
background: rgba(0, 160, 233, 0.2);
color: rgba(0, 160, 233, 1);
}
span:nth-child(4n+3) {
background: rgba(247, 64, 166, 0.2);
color: rgba(247, 64, 166, 1);
......
src/viewsPc/booking/pay.vue
......@@ -155,13 +155,13 @@
<!-- }}{{ language == 0 ? '元' : 'Euro' }} x 1-->
<!-- {{ language == 0 ? '张' : 'Tickets' }}-->
<!-- </el-col>-->
</el-row>
</div>
</div>
<div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div>
<div class="border-info mt20">
<el-row v-if="type == 'hotel'">
<el-col :lg="8" :md="12" :sm="12" :xs="24">
......@@ -184,12 +184,12 @@
<el-tag class="mr10">{{ car.carSeat }} {{ language == 0 ? '座 ' : 'Sets' }}</el-tag>
<el-tag>{{ car.carColor }}</el-tag>
</div>
<span v-if="car.num > 0"> {{ car.num }}{{
language == 0 ? '辆' : 'Cars'
}} * {{ language == 0 ? '¥' : '$' }}{{ car.price }}</span>
</div>
<div>{{ language == 0 ? '人数' : 'People' }}： {{ form.pickUpBo.count }}</div>
<div>{{ language == 0 ? '航班/火车班次' : 'Flight/Train' }}： {{ form.pickUpBo.no }}</div>
<div>{{ language == 0 ? '接机/接站地点' : 'Pick-up/Drop-off Place' }}：
......@@ -211,7 +211,7 @@
<el-tag class="mr10">{{ car.carSeat }} {{ language == 0 ? '座 ' : 'Sets' }}</el-tag>
<el-tag>{{ car.carColor }}</el-tag>
</div>
<span v-if="car.num > 0"> {{ car.num }}{{
language == 0 ? '辆' : 'Cars'
}} * {{ language == 0 ? '¥' : '$' }}{{ car.price }}</span>
......@@ -344,18 +344,19 @@
}}{{ Number(totalFee).toFixed(2) }}
</el-col>
</el-row>
</el-row>
</div>
<el-row align="middle" justify="space-between">
<el-col :lg="12">
<div v-if="form.payDate">{{ language == 0 ? '支付时间' : 'Payment Time' }}：{{ form.payDate }}</div>
<div class="mt10">{{ language == 0 ? '支付方式' : 'Payment Method' }}：
<span v-if="form.paymentType=='1'">{{ language == 0 ? '微信支付' : 'WePay' }}</span>
<span v-else-if="form.paymentType=='3'">PayPal</span>
<span v-else-if="form.paymentType=='4'|| form.paymentType=='5'">{{language == 0 ?'对公转账':'Bank Transfer'}}</span>
<span
v-else-if="form.paymentType=='4'|| form.paymentType=='5'">{{ language == 0 ? '对公转账' : 'Bank Transfer' }}</span>
<span v-else>--</span>
</div>
</el-col>
......@@ -411,9 +412,11 @@
{{ language == 0 ? '登录后查看明细' : 'View detailed information after logging in' }}
</el-button>
</div>
<div v-if="form.viewStatus == '0'&&(form.surplus!='0,0'&&form.surplus!='0')&&form.paymentType!='4'&&form.paymentType!='5'" class="pd20">
<div
v-if="form.viewStatus == '0'&&(form.surplus!='0,0'&&form.surplus!='0')&&form.paymentType!='4'&&form.paymentType!='5'"
class="pd20">
<div class="leftboderTT">{{ language == 0 ? '选择支付方式' : 'Choose payment method' }}</div>
<div class="mt20">
<el-radio-group v-model="payType">
......@@ -459,10 +462,10 @@
fill="#003087" p-id="22662"></path>
</svg>
</el-radio>
<el-radio value="4" v-if="language==0&&type=='hotel'" border>
对公打款
</el-radio>
<el-radio value="5" v-if="language==1&&type=='hotel'" border>
<!-- <el-radio value="4" v-if="language==0&&type=='hotel'" border>-->
<!-- 对公打款-->
<!-- </el-radio>-->
<el-radio v-if="language==1&&type=='hotel'" border value="5">
Corporate payment
</el-radio>
</el-radio-group>
......@@ -489,29 +492,29 @@
</div>
</div>
</div>
<!-- 线下支付且待支付状态-->
<el-row v-if="(form.paymentType=='4'|| form.paymentType=='5')&&form.viewStatus=='0'" class="proofBox">
<el-col :lg="12">
<div class="flex">
<label style="width: 10em">
{{ language==0?'上传缴费凭证：':'Upload proof:' }}
{{ language == 0 ? '上传缴费凭证：' : 'Upload proof:' }}
</label>
<file-upload :is-show-tip="false" v-model="form.pic" :limit="1"/>
<file-upload v-model="form.pic" :is-show-tip="false" :limit="1"/>
</div>
</el-col>
<el-col :lg="12">
<el-button class="fr" text type="primary" @click="downOfflineInvoice" icon="download">
<el-button class="fr" icon="download" text type="primary" @click="downOfflineInvoice">
{{ language == 0 ? '下载缴费单' : 'Download Invoice' }}
</el-button>
</el-col>
<!-- 如果没审批通过-->
<!-- 如果没审批通过-->
<el-col :lg="24" align="center" justify="center">
<el-button round type="primary" @click="submitProof">提交凭证</el-button>
</el-col>
</el-row>
<el-row align="middle" class="mt20 mb60" justify="center">
<el-col :span="24" class="text-center">
<el-button v-if="!hideconfirmbtn&&form.viewStatus == '0'" class="btn-lineG w200px" round type="primary"
......@@ -524,10 +527,10 @@
<el-button v-if="form.viewStatus == '0'" class="underline" link @click="cancel">
{{ language == 0 ? '取消订单' : 'Cancel Order' }}
</el-button>
</el-col>
</el-row>
<div v-if="form.payDate&&form.viewStatus=='1'">
<div class="text-center">
<el-icon color="#32B16C" size="80">
......@@ -539,7 +542,7 @@
</div>
</el-card>
</div>
<div v-if="errorBox" class="box">
<el-result
:sub-title="language==0?'请确认订单号是否正确':'Please confirm if the order number is correct'"
......@@ -554,7 +557,7 @@
</el-result>
</div>
<Dialog ref="DialogRef"/>
<el-dialog v-model="showSJDialog" :close-on-click-modal="false" :close-on-press-escape="false"
:title="language==0?'开收据':'Issue a receipt'" width="460px">
<div class="flex">
......@@ -574,9 +577,9 @@
</el-dialog>
<el-dialog v-model="showOfflineSuccessDialog" :title="language==0?'提示':'Tip'" width="460px">
<el-result
:sub-title="language==0?'请在7日内上传凭证，否则订单取消':'Please upload the payment receipt within 7 days, otherwise the order will be cancelled'"
:title="language==0?'订单已提交':'Order submitted'"
icon="success"
:sub-title="language==0?'请在7日内上传凭证，否则订单取消':'Please upload the payment receipt within 7 days, otherwise the order will be cancelled'"
:title="language==0?'订单已提交':'Order submitted'"
icon="success"
>
<template #extra>
<el-button class="btn-lineG w200px" round type="primary" @click="downOfflineInvoice">
......@@ -726,7 +729,7 @@ function getData() {
form.value.extJsonObj = JSON.parse(form.value.extJson) || {}
matchId.value = form.value.extJsonObj?.activeId
//如果对公打款-
if(form.value.paymentType=='4' || form.value.paymentType=='5'){
if (form.value.paymentType == '4' || form.value.paymentType == '5') {
hideconfirmbtn.value = true
}
}).catch(err => {
......@@ -759,15 +762,15 @@ async function getTicketOrderInfoFN() {
form.value.extJson.message = JSON.parse(form.value.extJson.message)
await getDetail(form.value.extJson.ticketDate.activityId)
matchId.value = form.value.extJson.ticketDate.activityId
totalFee.value = language.value == 0 ? form.value.total : form.value.totalEn
} catch (e) {
console.log(e)
} finally {
}
console.log(form.value)
}
async function getDetail(activeId) {
......@@ -797,13 +800,13 @@ function goPay() {
})
}
if (payType.value == '4' || payType.value == '5') {
//对公打款
//对公打款
booking.createOfflinePay({orderId: orderId.value}).then(res => {
console.log(res)
// booking.getRoomBillPayment({orderId: orderId.value}).then(res => {
// 显示付款单信息-上传凭证
hideconfirmbtn.value = true
showOfflineSuccessDialog.value = true
// 显示付款单信息-上传凭证
hideconfirmbtn.value = true
showOfflineSuccessDialog.value = true
// })
})
}
......@@ -949,7 +952,7 @@ function exportPdf() {
...obj
}, `Hotel Reservation.pdf`)
}
}
// 套餐详情
......@@ -1003,7 +1006,7 @@ const showSJ = () => {
// proxy.download(`/ota/norder/getReceipt/${obj.orderId}`, {
// ...obj
// }, `Receipt_${new Date().getTime()}.pdf`)
// 报名
proxy.download(`/ota/norder/getReceipt/${obj.orderId}`, {
...obj
......@@ -1023,7 +1026,7 @@ const downOfflineInvoice = () => {
}
const submitProof = () => {
//提交凭证
if(!form.value.pic){
if (!form.value.pic) {
ElMessage.warning(language.value == 0 ? '请上传凭证' : 'Please upload a voucher')
return
}
......@@ -1081,27 +1084,27 @@ const submitProof = () => {
width: 100%;
max-width: 1000px;
margin: 20px auto;
.head {
background: #EFF2F7;
height: 50px;
font-size: 16px;
font-weight: 400;
}
th {
background: #FAFBFD;
font-size: 14px;
border-bottom: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
}
td {
border-bottom: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
padding: 10px;
}
&.table-border {
border-top: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
......@@ -1120,23 +1123,23 @@ const submitProof = () => {
.result {
font-size: 22px;
.flex {
display: flex;
align-items: center;
font-weight: 500;
img {
margin-right: 10px
}
}
.priceb {
color: #7B7F83;
font-size: 16px;
text-align: right;
line-height: 50px;
span {
font-weight: bold;
font-size: 22px;
......@@ -1149,7 +1152,7 @@ const submitProof = () => {
.skeletonBox {
position: relative;
overflow: hidden;
.btn-lineG {
position: absolute;
left: 0;
......@@ -1159,7 +1162,7 @@ const submitProof = () => {
bottom: 0;
width: 200px;
box-shadow: 0 0 1000px 500px rgba(255, 255, 255, 0.5);
}
}
......@@ -1171,26 +1174,26 @@ const submitProof = () => {
.priceBar {
padding: 0 0 20px;
.flex {
display: flex;
justify-content: right;
align-items: baseline;
.item {
font-size: 16px;
margin-right: 15px;
label {
color: #95A1A6;
}
span {
font-family: DIN Alternate;
}
}
}
.size26 {
font-size: 26px;
}
......@@ -1205,5 +1208,10 @@ const submitProof = () => {
.price {
color: orange;
}
.proofBox{padding: 20px;margin: 0 20px;border: 1px dashed #999;}
.proofBox {
padding: 20px;
margin: 0 20px;
border: 1px dashed #999;
}
</style>
......
src/viewsPc/components/homeQuick.vue
<template>
<div class="itemBox" v-if="language === 0">
<div v-if="language === 0" class="itemBox">
<el-row :gutter="20">
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">签证服务</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">酒店预订</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">票务服务</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">媒体注册</div>
</el-col>
<!-- <el-col :sm="12" :lg="4" :xs="12">-->
......@@ -24,27 +24,27 @@
<!-- </el-col>-->
</el-row>
</div>
<div class="itemBox_en" v-else>
<div v-else class="itemBox_en">
<el-row :gutter="20" justify="space-around">
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">Visa Services</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">TICKET SERVICES</div>
</el-col>
<el-col :sm="12" :lg="4" :xs="12">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">Media Registration</div>
</el-col>
<!-- <el-col :sm="12" :lg="4" :xs="12">-->
<!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>-->
<!-- </el-col>-->
<!-- <el-col :sm="12" :lg="4" :xs="12">-->
<!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>-->
<!-- </el-col>-->
......@@ -100,7 +100,7 @@ watch(matchId, (val) => {
console.log(err)
form.value = null
})
match.getInfoByCptId({cptId: props.matchId}).then((res) => {
liveData.value = res.data || {}
})
......@@ -109,9 +109,9 @@ watch(matchId, (val) => {
const liveClick = () => {
if (liveData.value.videoStatus == "1") {
if (language.value == 0) {
window.open(liveData.value.videoUrlCn)
} else {
window.open(liveData.value.videoUrlEn)
......@@ -135,7 +135,7 @@ onMounted(() => {
function building() {
ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
return
}
function applyInvitation() {
......@@ -149,9 +149,12 @@ function applyInvitation() {
const user = useUserStore().user
function goMedia() {
proxy.$modal.msgWarning(language.value == 0 ? '暂未开放' : 'Not yet open')
return;
// proxy.$modal.msgWarning(language.value == 0 ? '暂未开放' : 'Not yet open')
// return;
if (form.value.isMedia == 0) {
building()
return
}
//如果没登录
if (!user) {
ElMessage({
......@@ -160,7 +163,7 @@ function goMedia() {
})
return
}
proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value})
}
......@@ -169,15 +172,20 @@ function popRemark(type) {
building()
return
}
if (type == '0') {
ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.')
return;
// ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.')
// return;
// 签证
if (language.value === 0) {
if (language.value == 0) {
ElMessage.warning('请切换英文页面办理')
return
} else {
if (form.value.isVisa == 0) {
building()
return
}
if (!user) {
ElMessage({
type: 'warning',
......@@ -185,34 +193,29 @@ function popRemark(type) {
})
return
}
applyInvitation()
return
}
}
if (type == '1') {
proxy.$modal.msgWarning(language.value == 0 ? '暂未开放' : 'Not yet open')
return;
}
if ((form.value.isJdView == 0 && type == '1')
|| (form.value.isCarView == 0 && type == '2')
|| (form.value.isFoodView == 0 && type == '3')
|| (form.value.isMealView == 0 && type == '4')
|| (form.value.isPhotoView == 0 && type == '5')
|| (form.value.isTicketView == 0 && type == '10')
|| (form.value.isCarView == 0 && type == '2')
|| (form.value.isFoodView == 0 && type == '3')
|| (form.value.isMealView == 0 && type == '4')
|| (form.value.isPhotoView == 0 && type == '5')
|| (form.value.isTicketView == 0 && type == '10')
) {
building()
return
}
if (type == '2') {
emit("pickUp")
return;
}
const params = {
matchId: props.matchId,
title: language.value == 0 ? '预订说明' : 'Booking Instructions',
......@@ -220,13 +223,15 @@ function popRemark(type) {
cptName: props.cptName
}
proxy.$refs['orderRemarkRef'].open(params)
// goBooking(type)
}
function goBooking(n, f) {
switch (n) {
case 10:
// 票务
// router.push({
// path: `/booking/ticket/${props.matchId}`,
// params: {id:props.matchId},
......@@ -235,7 +240,10 @@ function goBooking(n, f) {
break;
case 1:
//酒店
router.push({path: `/booking/hotel/${props.matchId}`, query: {flag: f}})
router.push({
path: `/booking/hotel/${props.matchId}`
// , query: {flag: f}
})
break;
case 2:
//车辆
......@@ -257,7 +265,7 @@ function goBooking(n, f) {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.itemBox, .itemBox_en {
padding: 20px;
background: #fff;
......@@ -281,7 +289,7 @@ function goBooking(n, f) {
background-size: 100% 100%;
border-radius: 15px;
gap: 10px;
img {
object-fit: contain;
width: 75px;
......@@ -294,19 +302,19 @@ function goBooking(n, f) {
text-align: center;
text-transform: uppercase;
height: 100%;
img {
position: relative;
transition: all 0.2s;
}
&:hover {
box-shadow: 0 0 10px #eee;
img {
transform: rotateY(180deg);
}
p {
color: #000;
}
......@@ -322,7 +330,7 @@ function goBooking(n, f) {
height: auto !important;
padding: 15px 0;
margin: 10px 0;
img {
width: 50px;
height: 50px
......
src/viewsPc/components/orderRemark.vue
<template>
<el-dialog :title="title" v-model="show" @close="close">
<div>
<h2 class="text-warning text-center" v-if="cptName">{{cptName}}</h2>
<div v-if="type==1" class="plr20" v-html="form.reserveDes"></div>
<div v-if="type==2" class="plr20" v-html="form.reserveDesCar"></div>
<div v-if="type==3" class="plr20" v-html="form.reserveDesFood"></div>
<div v-if="type==4" class="plr20" v-html="form.reserveDesMeal"></div>
<div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto"></div>
<div v-if="type==10" class="plr20" v-html="form.reserveDesTitck"></div>
<el-row v-if="type==1" justify="center">
<el-radio-group v-model="hotelType">
<el-radio label="0">{{language==0?'运动队酒店':'Team Hotel Reservation'}}</el-radio>
<el-radio label="1">{{language==0?'执委大会酒店':'Conference Hotel Reservation'}}</el-radio>
</el-radio-group>
</el-row>
</div>
<template #footer>
<div class="dialog-footer text-center">
<el-button type="primary" class="btn-lineG w200px" round @click="ok">{{language==0?'确定':'Confirm'}}</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="show" :title="title" @close="close">
<div>
<h2 v-if="cptName" class="text-warning text-center">{{ cptName }}</h2>
<div v-if="type==1" class="plr20" v-html="form.reserveDes"></div>
<div v-if="type==2" class="plr20" v-html="form.reserveDesCar"></div>
<div v-if="type==3" class="plr20" v-html="form.reserveDesFood"></div>
<div v-if="type==4" class="plr20" v-html="form.reserveDesMeal"></div>
<div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto"></div>
<div v-if="type==10" class="plr20" v-html="form.reserveDesTitck"></div>
<!-- <el-row v-if="type==1" justify="center">-->
<!-- <el-radio-group v-model="hotelType">-->
<!-- <el-radio label="0">{{language==0?'运动队酒店':'Team Hotel Reservation'}}</el-radio>-->
<!-- <el-radio label="1">{{language==0?'执委大会酒店':'Conference Hotel Reservation'}}</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-row>-->
</div>
<template #footer>
<div class="dialog-footer text-center">
<el-button class="btn-lineG w200px" round type="primary" @click="ok">{{ language == 0 ? '确定' : 'Confirm' }}
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import {getBaseInfoByActiveId} from "@/apiPc/booking";
import {getCurrentInstance} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
const emit = defineEmits([ 'submit'])
const emit = defineEmits(['submit'])
const {proxy} = getCurrentInstance()
const language= useStorage('language',0)
const language = useStorage('language', 0)
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const title = ref('')
const cptName = ref('')
const show = ref(false)
const form = ref({})
const hotelType= ref('1')
const hotelType = ref('1')
let matchId = ''
let type = ''
......@@ -58,28 +61,30 @@ defineExpose({
function getData() {
console.log(matchId)
getBaseInfoByActiveId(matchId).then(res=>{
getBaseInfoByActiveId(matchId).then(res => {
form.value = res.data || {}
console.log(form.value)
}).catch(err=>{
}).catch(err => {
console.log(err)
})
}
function close() {
show.value = false
}
function ok() {
// type
show.value = false
// if(!user){
// useUserStore().setVisitor()
// } else {
emit('submit', type, hotelType.value)
emit('submit', type, hotelType.value)
// }
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
</style>
......
src/viewsPc/components/pickup.vue
<template>
<el-dialog
v-model="show" :close-on-click-modal="false" :title="title" append-to-body center class="pcloginpop"
close-icon="CircleClose" destroy-on-close
width="900px"
v-model="show" :close-on-click-modal="false" :title="title" append-to-body center class="pcloginpop"
close-icon="CircleClose" destroy-on-close
width="900px"
>
<div class="boxInvitation pd20">
<div v-if="!showR">
......@@ -22,20 +22,20 @@
</div>
<div v-if="form.type?.some(v=>v==1)">
<h3 class="leftboderTT">{{ language == 0 ? '接机信息' : 'Pick-up information' }}</h3>
<!-- <el-form-item :label="language==0?'抵达人员身份':'Role of Person-Arrival'" prop="pickUpBo.standing"-->
<!-- required>-->
<!-- <el-checkbox-group v-model="form.pickUpBo.standing">-->
<!-- <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/>-->
<!-- <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/>-->
<!-- <el-checkbox :label="language==0?'官员':'Official'" name="3"/>-->
<!-- <el-checkbox :label="language==0?'其他':'Others'" name="4"/>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="language==0?'抵达人员身份':'Role of Person-Arrival'" prop="pickUpBo.standing"-->
<!-- required>-->
<!-- <el-checkbox-group v-model="form.pickUpBo.standing">-->
<!-- <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/>-->
<!-- <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/>-->
<!-- <el-checkbox :label="language==0?'官员':'Official'" name="3"/>-->
<!-- <el-checkbox :label="language==0?'其他':'Others'" name="4"/>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<el-form-item :label="language==0?'队伍俱乐部':'Team/Club Name'" prop="pickUpBo.standing" required>
<el-input v-model="form.pickUpBo.standing"/>
</el-form-item>
<el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="pickUpBo.nationalitys" required>
<el-select v-model="form.pickUpBo.nationalitys" filterable multiple style="width: 100%;">
<el-option v-for="item in countrys"
......@@ -53,23 +53,23 @@
<el-form-item :label="language==0?'接机人数':'Number of People'" prop="pickUpBo.counts" required>
<el-input-number v-model="form.pickUpBo.counts"/>
<span
style="color: red;margin-left: 10px">{{
style="color: red;margin-left: 10px">{{
language == 0 ? '(填写的人数需是乘坐同一航班/车次)' : 'The number of people to be filled in must be on the same flight/train'
}}</span>
</el-form-item>
<!-- <div style="padding-left: 48px;color: red;margin-bottom: 18px">-->
<!-- {{language==0?'填写的人数需是乘坐同一航班/车次':'The number of people to be filled in must be on the same flight/train'}}-->
<!-- </div>-->
<el-form-item :label="language==0?'抵达日期':'Flight/Train Arrival Date'"
prop="pickUpBo.arrivalDate"
required>
<div style="padding: 1px">
<el-date-picker
:disabled-date="disabledDateRZ" default-value="'2024-09-27'"
v-model="form.pickUpBo.arrivalDate" format="YYYY-MM-DD"
placeholder="YYYY-MM-DD"
style="width: 100%;" type="date" value-format="YYYY-MM-DD"
v-model="form.pickUpBo.arrivalDate" :disabled-date="disabledDateRZ"
default-value="'2024-09-27'" format="YYYY-MM-DD"
placeholder="YYYY-MM-DD"
style="width: 100%;" type="date" value-format="YYYY-MM-DD"
/>
</div>
</el-form-item>
......@@ -80,10 +80,10 @@
<!-- format="YYYY-MM-DD" placeholder="YYYY-MM-DD"-->
<!-- style="width: 100%;" type="date" value-format="YYYY-MM-DD"-->
<!-- />-->
<el-time-picker v-model="form.pickUpBo.arrivaTime" placeholder="HH:mm:ss" value-format="HH:mm:ss"
format="HH:mm:ss" style="width: 100%;"/>
<el-time-picker v-model="form.pickUpBo.arrivaTime" format="HH:mm:ss" placeholder="HH:mm:ss"
style="width: 100%;" value-format="HH:mm:ss"/>
</el-form-item>
<el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="pickUpBo.flight" required>
<el-input v-model="form.pickUpBo.flight"/>
</el-form-item>
......@@ -102,35 +102,35 @@
:is-show-tip="false"
:limit="1"/>
</el-form-item>
<el-form-item :label="language==0?'酒店预订单':'Hotel Reservation'" prop="pickUpBo.hotleFile" required>
<image-upload v-model="form.pickUpBo.hotleFile" :button-text="language==0?'上传':'Upload'"
:is-show-tip="false"
:limit="1"/>
</el-form-item>
</div>
<div v-if="form.type?.some(v=>v==2)">
<!-- <el-form-item :label="language == 0 ? '送机信息' : 'Delivery information' ">-->
<!-- </el-form-item>-->
<h3 class="leftboderTT">{{ language == 0 ? '送机信息' : 'Delivery information' }}</h3>
<!-- <el-form-item-->
<!-- :label="language==0?'离会人员身份':'Role of Person-Departure'"-->
<!-- prop="downOffBo.standing" required>-->
<!-- &lt;!&ndash; <el-input v-model="form.downOffBo.standing"/>&ndash;&gt;-->
<!-- <el-checkbox-group v-model="form.downOffBo.standing">-->
<!-- <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/>-->
<!-- <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/>-->
<!-- <el-checkbox :label="language==0?'官员':'Official'" name="3"/>-->
<!-- <el-checkbox :label="language==0?'其他':'Others'" name="4"/>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- :label="language==0?'离会人员身份':'Role of Person-Departure'"-->
<!-- prop="downOffBo.standing" required>-->
<!-- &lt;!&ndash; <el-input v-model="form.downOffBo.standing"/>&ndash;&gt;-->
<!-- <el-checkbox-group v-model="form.downOffBo.standing">-->
<!-- <el-checkbox :label="language==0?'运动员':'Athlete'" name="1"/>-->
<!-- <el-checkbox :label="language==0?'随队人员':'Accompanying Person'" name="2"/>-->
<!-- <el-checkbox :label="language==0?'官员':'Official'" name="3"/>-->
<!-- <el-checkbox :label="language==0?'其他':'Others'" name="4"/>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<el-form-item :label="language==0?'队伍俱乐部':'Team/Club Name'" prop="pickUpBo.standing" required>
<el-input v-model="form.pickUpBo.standing"/>
</el-form-item>
<el-form-item :label="language==0?'国家/地区':'Country/Region'" prop="downOffBo.nationalitys" required>
<el-select v-model="form.downOffBo.nationalitys" filterable multiple style="width: 100%;">
<el-option v-for="item in countrys"
......@@ -147,27 +147,27 @@
</el-form-item>
<el-form-item :label="language==0?'送机人数':'Number of People'" prop="downOffBo.counts" required>
<el-input-number v-model="form.downOffBo.counts"/>
<span
style="color: red;margin-left: 10px">{{
style="color: red;margin-left: 10px">{{
language == 0 ? '(填写的人数需是乘坐同一航班/车次)' : 'The number of people to be filled in must be on the same flight/train'
}}</span>
</el-form-item>
<!-- <div style="padding-left: 48px;color: red;margin-bottom: 18px">-->
<!-- {{language==0?'填写的人数需是乘坐同一航班/车次':'The number of people to be filled in must be on the same flight/train'}}-->
<!-- </div>-->
<el-form-item :label="language==0?'离开日期':'Departure Date from Hotel'" prop="downOffBo.arrivalDate"
required>
<div style="padding: 1px">
<el-date-picker
v-model="form.downOffBo.arrivalDate" format="YYYY-MM-DD"
placeholder="YYYY-MM-DD" :disabled-date="disabledDateDP"
default-value="'2024-09-30'"
style="width: 100%;" type="date" value-format="YYYY-MM-DD"
v-model="form.downOffBo.arrivalDate" :disabled-date="disabledDateDP"
default-value="'2024-09-30'" format="YYYY-MM-DD"
placeholder="YYYY-MM-DD"
style="width: 100%;" type="date" value-format="YYYY-MM-DD"
/>
</div>
</el-form-item>
<el-form-item :label="language==0?'离开时间':'Departure Time from Hotel'" prop="downOffBo.arrivaTime"
required>
......@@ -176,10 +176,10 @@
<!-- format="YYYY-MM-DD" placeholder="YYYY-MM-DD"-->
<!-- style="width: 100%;" type="date" value-format="YYYY-MM-DD"-->
<!-- />-->
<el-time-picker v-model="form.downOffBo.arrivaTime" placeholder="HH:mm:ss" value-format="HH:mm:ss"
format="HH:mm:ss" style="width: 100%;"/>
<el-time-picker v-model="form.downOffBo.arrivaTime" format="HH:mm:ss" placeholder="HH:mm:ss"
style="width: 100%;" value-format="HH:mm:ss"/>
</el-form-item>
<el-form-item :label="language==0?'航班/车次':'Flight/Train Number'" prop="downOffBo.flight" required>
<el-input v-model="form.downOffBo.flight"/>
</el-form-item>
......@@ -198,15 +198,15 @@
:is-show-tip="false"
:limit="1"/>
</el-form-item>
<el-form-item :label="language==0?'酒店预订单':'Hotel Reservation'" prop="pickUpBo.hotleFile" required>
<image-upload v-model="form.pickUpBo.hotleFile" :button-text="language==0?'上传':'Upload'"
:is-show-tip="false"
:limit="1"/>
</el-form-item>
</div>
<div class="text-center">
<el-button class="btn-lineG" round size="large" type="primary" @click="submitForm()">
{{ language == 0 ? '提交' : 'submit' }}
......@@ -263,137 +263,137 @@ const countrys = ref([])
const courseList = ref([])
const cptId = ref('')
const rules = ref(
{
type: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
'pickUpBo.standing': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.nationalitys': [{
required: true,
trigger: 'blur',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.name': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},],
'pickUpBo.phone': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.counts': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.arrivalDate': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.arrivaTime': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.flight': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.stationName': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.terminal': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.hotle': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.itinerary': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.nationalitys': [{
required: true,
trigger: 'blur',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.standing': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.name': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.phone': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.counts': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.arrivalDate': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.arrivaTime': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.flight': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.stationName': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.terminal': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.hotle': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.itinerary': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
})
{
type: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
'pickUpBo.standing': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.nationalitys': [{
required: true,
trigger: 'blur',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.name': [{required: true, trigger: 'change', message: language.value == 0 ? '请输入' : 'Please enter'},],
'pickUpBo.phone': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.counts': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.arrivalDate': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.arrivaTime': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'pickUpBo.flight': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.stationName': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.terminal': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.hotle': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'pickUpBo.itinerary': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.nationalitys': [{
required: true,
trigger: 'blur',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.standing': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.name': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.phone': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.counts': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.arrivalDate': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.arrivaTime': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
'downOffBo.flight': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.stationName': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.terminal': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.hotle': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请输入' : 'Please enter'
},],
'downOffBo.itinerary': [{
required: true,
trigger: 'change',
message: language.value == 0 ? '请选择' : 'Please choose'
},],
})
const open = (params) => {
show.value = true
showR.value = false
form.value = {
pickUpBo: {
serviceType: 1,
arrivalDate:'2024-09-27'
arrivalDate: '2024-09-27'
},
downOffBo: {
serviceType: 2,
arrivalDate:'2024-09-30'
arrivalDate: '2024-09-30'
},
type: ['1'],
}
......@@ -426,30 +426,30 @@ function setActive(n) {
function submitForm() {
proxy.$refs['iformRef'].validate(async valid => {
if (valid) {
form.value.pickUpBo.cptId = cptId.value
form.value.downOffBo.cptId = cptId.value
// form.value.pickUpBo.serviceType=1
// form.value.downOffBo.serviceType=2
console.log(form.value)
let forms = JSON.parse(JSON.stringify(form.value))
forms.pickUpBo.nationalitys = forms.pickUpBo.nationalitys?.join(',')
forms.pickUpBo.standing = forms.pickUpBo.standing?.join(',')
forms.downOffBo.nationalitys = forms.downOffBo.nationalitys?.join(',')
forms.downOffBo.standing = forms.downOffBo.standing?.join(',')
forms.type = null
if (!form.value.type.includes('1')) forms.pickUpBo = {}
if (!form.value.type.includes('2')) forms.downOffBo = {}
const res = await addPickup(forms)
if (res.code == 200) {
proxy.$modal.msgSuccess('操作成功！')
showR.value = true
// show.value=false
}
} else {
proxy.$modal.msgError(language.value == 0 ? '请完善信息！' : 'Please complete the information!')
if (valid) {
form.value.pickUpBo.cptId = cptId.value
form.value.downOffBo.cptId = cptId.value
// form.value.pickUpBo.serviceType=1
// form.value.downOffBo.serviceType=2
console.log(form.value)
let forms = {...form.value}
forms.pickUpBo.nationalitys = forms.pickUpBo.nationalitys?.join(',')
// forms.pickUpBo.standing = forms.pickUpBo.standing?.join(',')
forms.downOffBo.nationalitys = forms.downOffBo.nationalitys?.join(',')
// forms.downOffBo.standing = forms.downOffBo.standing?.join(',')
forms.type = null
if (!form.value.type.includes('1')) forms.pickUpBo = {}
if (!form.value.type.includes('2')) forms.downOffBo = {}
const res = await addPickup(forms)
if (res.code == 200) {
proxy.$modal.msgSuccess('操作成功！')
showR.value = true
// show.value=false
}
} else {
proxy.$modal.msgError(language.value == 0 ? '请完善信息！' : 'Please complete the information!')
}
}
)
}
......
src/viewsPc/index.vue
<template>
<div class="syBg">
<div class="banner">
<el-carousel class="forPc" autoplay :interval="2000" height="450px" :autoplay="false" arrow="hover"
<el-carousel :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc" height="450px"
@change="carouselChange">
<el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id">
<el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
<div class="bannerItem">
<div class="h100" @click.stop="goMatch(n)">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<div class="box forPc" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
<img class="slogen" src="@/assets/logo/banner-text.png"/>
<div class="btabs">
<div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{ tab.customTitle }}</div>
</div>
<div v-if="!liveData || liveData.videoStatus==0">
<!-- <div class="banner-count bb"></div>-->
</div>
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click.stop="goliveUrl">
<div v-if="currentDateTime < liveData.videoStart &&form.isLiveVideo==1" class="banner-count"
@click.stop="goliveUrl">
距离直播开始
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
......@@ -42,33 +43,33 @@
</div>
<!--如果有直播-->
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div class="banner-count bb"
v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">直播进行中
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count bb">直播进行中
</div>
<div class="banner-count bb" v-if="currentDateTime > liveData.videoEnd">直播已结束</div>
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count bb">直播已结束</div>
<!-- <div class="banner-count bb" v-if="currentDateTime < liveData.videoStart">直播即将开始</div>-->
</div>
<div v-if="liveData&& liveData.picStatus==1" @click.stop="gopicliveUrl">
<div class="picliveBtn" v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)">
<div v-if="liveData&& liveData.picStatus==1&&form.isLivePic==1" @click.stop="gopicliveUrl">
<div v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)" class="picliveBtn">
图片直播中
</div>
<div class="picliveBtn" v-if="currentDateTime > liveData.picEnd">图片直播</div>
<div class="picliveBtn" v-if="currentDateTime < liveData.picStart">图片直播</div>
<div v-if="currentDateTime > liveData.picEnd" class="picliveBtn">图片直播</div>
<div v-if="currentDateTime < liveData.picStart" class="picliveBtn">图片直播</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
<el-carousel class="forWei" height="160px" autoplay arrow="hover" @change="carouselChange">
<el-carousel-item style="height: 160px;" v-for="n in maList" :key="n.id">
<el-carousel arrow="hover" autoplay class="forWei" height="160px" @change="carouselChange">
<el-carousel-item v-for="n in maList" :key="n.id" style="height: 160px;">
<div class="bannerItem" style="height:100%">
<div class="h100" style="position: relative">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
<!-- <img class="slogen" src="@/assets/logo/banner-text.png"/>-->
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click="goliveUrl">
<div v-if="currentDateTime < liveData.videoStart" class="banner-count" @click="goliveUrl">
距离直播开始
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
......@@ -91,10 +92,10 @@
</van-count-down>
</div>
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div class="banner-count"
v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">直播进行中
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count">直播进行中
</div>
<div class="banner-count" v-if="currentDateTime > liveData.videoEnd">直播已结束</div>
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count">直播已结束</div>
</div>
</div>
</div>
......@@ -102,18 +103,18 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="mb30">
<home-weather-bar/>
</div>
<div class="box">
<HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name" @pick-up="handlePickup"/>
<HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id" @pick-up="handlePickup"/>
</div>
<div id="part0" class="box part">
<el-row :gutter="20">
<el-col :sm="24" :lg="12">
<el-col :lg="12" :sm="24">
<div class="indexTitle">
<h3 class="leftboderTT">通知公告</h3>
<a class="more" href="#/notice">MORE</a>
......@@ -125,7 +126,7 @@
</div>
</el-card>
</el-col>
<el-col :sm="24" :lg="12">
<el-col :lg="12" :sm="24">
<div class="indexTitle">
<h3 class="leftboderTT">竞赛日程</h3>
<a class="more" href="#/saiC">MORE</a>
......@@ -135,12 +136,12 @@
<home-calendar/>
</el-card>
</el-col>
</el-row>
</div>
<!-- 新闻 -->
<div id="part1" class="part">
<div class="box">
<div class="indexTitle">
<h3 class="leftboderTT">新闻资讯</h3>
......@@ -148,9 +149,9 @@
</div>
<el-row :gutter="20">
<el-col
v-for="(n,index) in newest2"
:key="n.id" :xs="24" :sm="8"
:lg="8"
v-for="(n,index) in newest2"
:key="n.id" :lg="8" :sm="8"
:xs="24"
>
<div class="activeItem" @click="goDetail(n)">
<div class="imgbox">
......@@ -213,9 +214,9 @@
<el-col :lg="16">
<div class="swiperPic">
<swiper
class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20"
:navigation="navigationPic"
:autoplay="true" :loop="true"
:autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
:slides-per-view="3"
:space-between="20" class="swiper-wrapper"
>
<swiper-slide v-for="(n,i) in picList" :key="i">
<div class="picbox" @click="goDetail(n)">
......@@ -229,7 +230,7 @@
</el-col>
</el-row>
<el-row class="news-l-r">
<el-col v-for="(n,index) in livelist" :lg="8" v-show="index>0">
<el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
<div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)">
<div class="imgbox">
<i class="playIcon"></i>
......@@ -247,7 +248,7 @@
</el-card>
</div>
</div>
<div class="box">
<el-row :gutter="20">
<el-col :lg="12">
......@@ -261,9 +262,9 @@
</div>
<div class="mt30 text-center">
<a class="btn-black" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img
style="filter: brightness(2);height: 8px" src="@/assets/v1/more.png"/></a>
src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px"/></a>
</div>
</div>
</el-col>
<el-col :lg="12">
......@@ -290,13 +291,13 @@
</el-col>
</el-row>
</div>
<div class="box">
<div class="indexTitle">
<h3 class="leftboderTT">合作伙伴</h3>
</div>
<el-row :gutter="20">
<el-col :lg="6" :sm="6" :xs="12" v-for="p in partners">
<el-col v-for="p in partners" :lg="6" :sm="6" :xs="12">
<div class="logobox">
<img :src="fillImgUrl(JSON.parse(p.picUrl))">
</div>
......@@ -321,6 +322,7 @@ import {dayjs, ElMessage} from 'element-plus'
import * as match from "@/apiPc/match";
import {getAboutUs, getInfoByCptId, getppInfo, getZNList} from "@/apiPc/match";
import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar";
import {getBaseInfoByActiveId} from "@/apiPc/booking";
const modules = [Autoplay, Navigation]
const navigationPic = ref({
......@@ -352,6 +354,7 @@ const partners = ref([])
const liveData = ref({})
const aboutUsContent = ref('')
const liveStartTime = ref(0)
const form = ref({})
onMounted(() => {
init()
......@@ -362,35 +365,41 @@ const init = () => {
time.value = dayjs('2024-07-17 07:00:00').diff(today, 'millisecond')
etime.value = dayjs('2024-07-22 12:00:00').diff(today, 'millisecond')
getNewsListById({
pageSize: time.value > 0 ? 3 : 4,
pageNum: 1,
sortId: '30000006'
}
pageSize: time.value > 0 ? 3 : 4,
pageNum: 1,
sortId: '30000006'
}
).then(res => {
livelist.value = res.rows
})
getNewsListById({
pageSize: 5,
pageNum: 1,
sortId: '30000007'
}
pageSize: 5,
pageNum: 1,
sortId: '30000007'
}
).then(res => {
picList.value = res.rows
})
getNewsList({
pageSize: 3,
pageNum: 1,
language: 1,
code: '1000'
}
pageSize: 3,
pageNum: 1,
language: 1,
code: '1000'
}
).then(res => {
newest2.value = res.rows
})
getNewsListById({pageSize: 6, pageNum: 1, sortId: '20000000'}).then(res => {
newsList.value = res.rows
})
async function getMatchSet(id) {
const res = await getBaseInfoByActiveId(id)
form.value = res.data ?? null
console.log(form.value)
}
match.getMaList({topFlag: 1}).then((res) => {
maList.value = res.rows
for (let n of maList.value) {
......@@ -408,8 +417,9 @@ const init = () => {
}
matchData.value = maList.value[0]
getMatchInfo(matchData.value.id)
getMatchSet(matchData.value.id)
})
match.getLabelList().then(res => {
tabList.value = res.data
})
......@@ -514,8 +524,8 @@ const handlePickup = () => {
}
const goliveUrl = () => {
ElMessage.warning('暂未开放')
ElMessage.warning('暂未开放')
// if (liveData.value.videoStatus == "1") {
// window.open(liveData.value.videoUrlCn)
// } else {
......@@ -525,7 +535,7 @@ const goliveUrl = () => {
const gopicliveUrl = () => {
proxy.$modal.msgWarning('暂未开放')
return
if (liveData.value.picStatus == "1") {
window.open(liveData.value.picUrlCn)
} else {
......@@ -535,7 +545,7 @@ const gopicliveUrl = () => {
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.syBg {
background: url("@/assets/dance/logo_l.png") no-repeat bottom left,
url("@/assets/dance/logo_r1.png") no-repeat bottom right;
......@@ -546,7 +556,7 @@ const gopicliveUrl = () => {
position: absolute;
bottom: 60px;
gap: 10px;
div {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
......@@ -555,7 +565,7 @@ const gopicliveUrl = () => {
border-radius: 50px;
padding: 6px 20px;
}
div:hover {
cursor: pointer;
background: #fff;
......@@ -574,18 +584,18 @@ const gopicliveUrl = () => {
.zn-Box {
.bgbg {
padding: 5%;
img {
margin: 5% 0
}
}
.itemBox {
padding: 20px 0;
}
border-radius: 15px;
.zn-btn {
background: #FFFFFF;
font-size: 18px;
......@@ -595,8 +605,8 @@ const gopicliveUrl = () => {
display: inline-flex;
align-items: center;
}
}
.app-main {
......@@ -613,12 +623,12 @@ const gopicliveUrl = () => {
height: 450px;
background: #000;
position: relative;
.slogen {
position: relative;
top: 130px;
}
.picliveBtn {
position: absolute;
cursor: pointer;
......@@ -630,7 +640,7 @@ const gopicliveUrl = () => {
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50px;
}
.banner-count {
cursor: pointer;
position: absolute;
......@@ -645,7 +655,7 @@ const gopicliveUrl = () => {
flex-wrap: nowrap;
right: 5%;
color: #fff;
.van-count-down {
display: flex;
color: #fff;
......@@ -653,7 +663,7 @@ const gopicliveUrl = () => {
width: 360px;
font-size: 41px;
}
.block {
color: #fff;
text-align: center;
......@@ -661,7 +671,7 @@ const gopicliveUrl = () => {
font-size: 41px;
font-family: DIN Alternate;
}
.colon {
color: #fff;
display: block;
......@@ -669,27 +679,27 @@ const gopicliveUrl = () => {
font-size: 20px;
}
}
.bb {
width: 580px;
justify-content: center;
height: 100px;
font-size: 30px;
}
.banner-count.bb:hover {
box-shadow: 0 0 20px #453DEA;
border-radius: 100px;
background: #000
}
.box {
position: absolute;
height: 100%;
left: 0;
right: 0;
}
h3 {
position: absolute;
color: #fff;
......@@ -698,7 +708,7 @@ const gopicliveUrl = () => {
bottom: 50px;
font-size: 3vw;
}
video {
width: 100%;
height: 100%;
......@@ -713,26 +723,26 @@ const gopicliveUrl = () => {
.banner {
position: relative;
margin: 0 0 30px;
:deep(.el-carousel__arrow) {
border-radius: 0;
.el-icon {
color: transparent;
}
&:hover {
filter: brightness(1.5)
}
}
:deep(.el-carousel__arrow--left) {
background: url("@/assets/images/prev2@2x.png") no-repeat center;
width: 78px;
height: 45px;
background-size: contain;
}
:deep(.el-carousel__arrow--right) {
background: url("@/assets/images/next2@2x.png") no-repeat center;
width: 78px;
......@@ -753,7 +763,7 @@ const gopicliveUrl = () => {
.ggbond {
height: 230px;
position: relative;
img {
height: 100%;
object-fit: cover;
......@@ -771,17 +781,17 @@ const gopicliveUrl = () => {
position: relative;
border-radius: 10px;
overflow: hidden;
.imgbox {
background: linear-gradient(0, #C8AAFC, #fff)
}
img {
height: 350px;
width: 100%;
object-fit: cover;
}
h3 {
color: #fff;
background: url("@/assets/dance/name_bg.png") no-repeat center;
......@@ -794,7 +804,7 @@ const gopicliveUrl = () => {
width: 100%;
bottom: 30px;
}
p {
text-align: center;
margin: 25px 0 0;
......@@ -805,7 +815,7 @@ const gopicliveUrl = () => {
@media screen and (max-width: 1650px) {
.teacher {
height: 320px;
.imgbox {
img {
height: 260px
......@@ -818,7 +828,7 @@ const gopicliveUrl = () => {
.teacher {
height: 450px;
margin: 0 0 20px;
.imgbox {
img {
height: 390px
......@@ -831,7 +841,7 @@ const gopicliveUrl = () => {
.teacher {
height: 400px;
margin: 0 0 20px;
.imgbox {
img {
height: 340px
......@@ -844,7 +854,7 @@ const gopicliveUrl = () => {
.teacher {
height: 400px;
margin: 0 0 20px;
.imgbox {
img {
height: 260px
......@@ -859,7 +869,7 @@ const gopicliveUrl = () => {
background-size: cover;
padding: 40px 60px;
position: relative;
.content {
font-size: 18px;
line-height: 2.2;
......@@ -868,7 +878,7 @@ const gopicliveUrl = () => {
text-align: left;
text-indent: 2em;
}
.shadowbox {
position: absolute;
left: 0;
......@@ -877,7 +887,7 @@ const gopicliveUrl = () => {
width: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.btn-lineG {
}
}
......@@ -889,7 +899,7 @@ const gopicliveUrl = () => {
padding: 1px;
position: relative;
display: flex;
.content {
background: #fff;
width: 60%;
......@@ -901,33 +911,33 @@ const gopicliveUrl = () => {
bottom: 0;
margin: auto;
}
div {
padding-left: 60px;
}
.phone {
background: url("@/assets/dance/map01.png") no-repeat left;
background-size: 30px;
}
.address {
background: url("@/assets/dance/map02.png") no-repeat left;
background-size: 30px;
margin: 50px 0;
}
.email {
background: url("@/assets/dance/map03.png") no-repeat left;
background-size: 30px;
}
h4 {
margin: 0;
font-size: 16px;
color: #AAAAAA;
}
p {
margin: 13px 0 0;
}
......@@ -938,7 +948,7 @@ const gopicliveUrl = () => {
height: 180px;
border-radius: 10px;
margin: 0 0 30px;
img {
width: 100%;
height: 100%;
......@@ -951,7 +961,7 @@ const gopicliveUrl = () => {
position: relative;
height: 100%;
padding: 20px 45px;
.picprev {
position: absolute;
left: 5px;
......@@ -960,12 +970,12 @@ const gopicliveUrl = () => {
margin: auto;
height: 33px;
cursor: pointer;
&:hover {
filter: brightness(2)
}
}
.picnext {
position: absolute;
right: 5px;
......@@ -974,7 +984,7 @@ const gopicliveUrl = () => {
margin: auto;
height: 33px;
cursor: pointer;
&:hover {
filter: brightness(2)
}
......@@ -985,7 +995,7 @@ const gopicliveUrl = () => {
.teacher {
height: 460px;
margin: 0 0 20px;
img {
height: 400px
}
......@@ -996,11 +1006,11 @@ const gopicliveUrl = () => {
.box {
width: 94%
}
.calendarList {
padding: 0;
ul {
li {
margin: 10px
......@@ -1016,7 +1026,7 @@ const gopicliveUrl = () => {
.teacher {
height: 320px;
margin: 0 0 20px;
img {
height: 260px
}
......@@ -1028,17 +1038,17 @@ const gopicliveUrl = () => {
div {
padding-left: 40px;
}
.content {
width: 80%;
left: 10%;
padding: 10px 20px 0 20px;
}
.address {
margin: 30px 0;
}
p {
text-align: left;
word-break: break-all;
......@@ -1053,19 +1063,19 @@ const gopicliveUrl = () => {
width: auto;
left: 0;
right: 0;
.van-count-down {
margin: 30px 0 0;
}
}
.bgbg {
text-align: center;
img {
max-width: 100%;
}
h1 {
text-align: center
}
......@@ -1078,7 +1088,7 @@ const gopicliveUrl = () => {
z-index: 2;
background: #F04035;
padding: 2px 4px;
&::after {
content: '';
width: 0;
......@@ -1089,12 +1099,12 @@ const gopicliveUrl = () => {
border-top: 24px solid #F04035;
border-right: 15px solid transparent;
}
.van-count-down {
display: flex;
color: #fff;
font-size: 14px;
.block {
color: #fff;
text-align: center;
......@@ -1110,7 +1120,7 @@ const gopicliveUrl = () => {
height: 56px;
justify-content: space-between;
cursor: pointer;
h3 {
font-weight: 400;
margin: 0;
......@@ -1121,13 +1131,13 @@ const gopicliveUrl = () => {
font-size: 18px;
color: #030303;
}
span {
font-weight: 400;
font-size: 14px;
color: #B4B6B8;
}
&:hover {
background: #F7F8FC;
}
......@@ -1142,12 +1152,12 @@ const gopicliveUrl = () => {
}
.newline {
height: 40px;
h3 {
width: 70%;
font-size: 14px;
}
span {
font-size: 12px;
}
......
src/viewsPc/index_en.vue
<template>
<div class="syBg">
<div class="banner">
<el-carousel height="450px" autoplay :interval="2000" class="forPc" :autoplay="false" arrow="hover" @change="carouselChange">
<el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id">
<el-carousel :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc" height="450px"
@change="carouselChange">
<el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
<div class="bannerItem">
<div class="h100" @click.stop="goMatch(n)">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<div class="h100" @click.stop="goMatch(n)">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<div class="box" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
<img class="slogen" src="@/assets/logo/banner-text.png"/>
<div class="btabs">
<div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{tab.customTitle}}</div>
<div v-for="tab in tabList" @click.stop="goMatchWithTab(n,tab.id)">{{ tab.customTitle }}</div>
</div>
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click.stop="goliveUrl">
<div v-if="currentDateTime < liveData.videoStart&&form.isLiveVideo==1" class="banner-count"
@click.stop="goliveUrl">
Live Countdown
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
......@@ -34,12 +36,13 @@
</template>
</van-count-down>
</div>
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div class="banner-count" v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">
<div v-if="liveData&& liveData.videoStatus==1&&form.isLivePic==1" @click.stop="goliveUrl">
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count">
Live Now
</div>
<div class="banner-count" v-if="currentDateTime > liveData.videoEnd">
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count">
Live End
</div>
</div>
......@@ -48,36 +51,40 @@
</div>
</el-carousel-item>
</el-carousel>
<el-carousel class="forWei" height="160px" autoplay arrow="hover" @change="carouselChange">
<el-carousel-item style="height: 160px;" v-for="n in maList" :key="n.id">
<el-carousel arrow="hover" autoplay class="forWei" height="160px" @change="carouselChange">
<el-carousel-item v-for="n in maList" :key="n.id" style="height: 160px;">
<div class="bannerItem" style="height:100%">
<div class="h100" style="position: relative">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click="goliveUrl">
<div v-if="currentDateTime < liveData.videoStart" class="banner-count" @click="goliveUrl">
Live Countdown
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
<div class="block">{{ timeData.days }}
<span class="colon">Days</span>
</div>：
</div>
：
<div class="block">{{ timeData.hours }}
<span class="colon">Hrs</span>
</div>：
</div>
：
<div class="block">{{ timeData.minutes }}
<span class="colon">Min</span>
</div>：
</div>
：
<div class="block">{{ timeData.seconds }}
<span class="colon">Sec</span>
</div>
</template>
</van-count-down>
</div>
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div class="banner-count" v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">
<div v-if="liveData&& liveData.videoStatus==1 &&form.isLivePic==1" @click.stop="goliveUrl">
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count">
Live Now
</div>
<div class="banner-count" v-if="currentDateTime > liveData.videoEnd">
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count">
Live End
</div>
</div>
......@@ -87,19 +94,19 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="mb30">
<home-weather-bar :lang="1"/>
</div>
<div class="box">
<HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name" @pick-up="handlePickup"/>
<HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id" @pick-up="handlePickup"/>
</div>
<div id="part0" class="box part">
<el-row :gutter="20">
<el-col :sm="24" :lg="12">
<el-col :lg="12" :sm="24">
<div class="indexTitle">
<h3 class="leftboderTT">NOTICEBOARD</h3>
<a class="more" href="#/notice">MORE</a>
......@@ -107,11 +114,11 @@
<el-card :body-style="{'padding':'10px 20px 18px'}">
<div v-for="(n,index) in newsList" :key="index" class="newline" @click="goDetail(n)">
<h3>{{ n.name }}</h3>
<span class="date">{{n.belongTime}}</span>
<span class="date">{{ n.belongTime }}</span>
</div>
</el-card>
</el-col>
<el-col :sm="24" :lg="12">
<el-col :lg="12" :sm="24">
<div class="indexTitle">
<h3 class="leftboderTT">COMPETITION SCHEDULE</h3>
<a class="more" @click="gosaiC">MORE</a>
......@@ -121,12 +128,12 @@
<home-calendar/>
</el-card>
</el-col>
</el-row>
</div>
<!-- NEWS -->
<div id="part1" class="part">
<div class="box">
<div class="indexTitle">
<h3 class="leftboderTT">NEWS</h3>
......@@ -135,20 +142,20 @@
<el-row :gutter="20">
<el-col
v-for="(n,index) in newest2"
:key="n.id" :xs="24" :sm="8"
:lg="8"
:key="n.id" :lg="8" :sm="8"
:xs="24"
>
<div class="activeItem" @click="goNewsDetail(n)">
<div class="activeItem" @click="goNewsDetail(n)">
<div class="imgbox">
<img :src="fillImgUrl_webSite(n.picUrl)">
</div>
<div class="info">
<div class="date">
{{ n.sortName }} ｜ {{ n.belongTime }}
{{ n.sortName }} ｜ {{ n.belongTime }}
</div>
<h3 class="esp">{{ n.name }}</h3>
<p class="esp_2" style="height: 40px">
{{n.subName}}
{{ n.subName }}
</p>
<a>DETAIL</a>
</div>
......@@ -176,14 +183,14 @@
</a>
</el-col>
<el-col :lg="16">
<div class="swiperPic forPx">
<swiper
class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20"
:navigation="navigationPic"
:autoplay="true" :loop="true"
:autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
:slides-per-view="3"
:space-between="20" class="swiper-wrapper"
>
<swiper-slide v-for="(n,i) in picList" :key="i" >
<swiper-slide v-for="(n,i) in picList" :key="i">
<div class="picbox" @click="goNewsDetail(n)">
<img :src="fillImgUrl_webSite(n.picUrl)">
</div>
......@@ -192,29 +199,30 @@
<div class="picprev"><img src="@/assets/dance/prev1.png"></div>
<div class="picnext"><img src="@/assets/dance/next1.png"></div>
</div>
</el-col>
</el-row>
<el-row class="news-l-r">
<el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
<div class="item" style="padding: 0;margin: 20px 0 0" @click="goNewsDetail(n)">
<div class="imgbox">
<i class="playIcon" />
<i class="playIcon"/>
<img :src="fillImgUrl_webSite(n.picUrl)"></div>
<div class="info">
<div class="text-primary small-size">
<span v-if="n.subName">{{n.subName + ' | '}}</span>
{{ n.belongTime }}</div>
<span v-if="n.subName">{{ n.subName + ' | ' }}</span>
{{ n.belongTime }}
</div>
<h2 class="esp_2">{{ n.name }}</h2>
</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
</div>
<div hidden>
<div class="box">
<div class="indexTitle">
......@@ -222,8 +230,8 @@
</div>
<el-row :gutter="20">
<el-col
v-for="n in personList" :key="n.name" :sm="8" :xl="4" :xs="12"
:lg="4"
v-for="n in personList" :key="n.name" :lg="4" :sm="8" :xl="4"
:xs="12"
>
<div class="teacher">
<div class="imgbox"><img :src="n.src"></div>
......@@ -234,7 +242,7 @@
</el-row>
</div>
</div>
<div class="box">
<el-row :gutter="20">
<el-col :lg="12">
......@@ -245,18 +253,19 @@
<div class="aboutBox">
<div class="content">
<div v-html="aboutUsContent"></div>
<div class="shadowbox" />
<div class="shadowbox"/>
</div>
<div class="mt30 text-center">
<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>
<a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">Learn more
<img src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px;margin-left: 10px"></a>
</div>
</div>
</el-col>
<el-col :lg="12">
<div class="indexTitle">
<h3 class="leftboderTT">CONTACT US</h3>
<a class="more" style="filter: brightness(10)" href="#/about/wuDao">MORE</a>
<a class="more" href="#/about/wuDao" style="filter: brightness(10)">MORE</a>
</div>
<div class="mapBox">
<div class="content">
......@@ -277,58 +286,60 @@
</el-col>
</el-row>
</div>
<div class="box">
<div class="indexTitle">
<h3 class="leftboderTT">PARTNERS</h3>
</div>
<el-row :gutter="20">
<el-col :lg="6" :sm="12" :xs="6" v-for="p in partners">
<el-col v-for="p in partners" :lg="6" :sm="12" :xs="6">
<div class="logobox">
<img :src="fillImgUrl(JSON.parse(p.picUrl))">
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import { ref, nextTick, onMounted, watch } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {ref, nextTick, onMounted, watch} from 'vue'
import {getCurrentInstance} from '@vue/runtime-core'
import {getNewsListById, getNewsList, getWeather} from '@/apiPc/webSite'
import {useRouter} from 'vue-router'
import _ from 'lodash'
import HomeQuick from '@/viewsPc/components/homeQuick'
import HomeCalendar from '@/viewsPc/components/homeCalendar'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation } from 'swiper'
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Autoplay, Navigation} from 'swiper'
import 'swiper/css'
import {dayjs, ElMessage} from 'element-plus'
import * as match from "@/apiPc/match";
import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar";
import {getBaseInfoByActiveId} from "/@/apiPc/booking";
import {rankList} from '@/assets/js/data'
const modules = [Autoplay, Navigation]
const navigationPic = ref({
nextEl: '.picnext',
prevEl: '.picprev'
})
const router = useRouter()
const { proxy } = getCurrentInstance()
const emit = defineEmits(['pop','backNumber','schSearch'])
const {proxy} = getCurrentInstance()
const emit = defineEmits(['pop', 'backNumber', 'schSearch'])
const time = ref(0)
const etime = ref(0)
const personList = ref([
{ name: 'Wolfgang Eliasch', pp: 'Chairperson for Latin AUT', src: '/img/1.png' },
{ name: 'Nenad Jeftic', pp: 'Chairperson for Standard SRB', src: '/img/2.png' },
{ name: 'Dorel Bagiu', pp: 'ROU', src: '/img/3.png' },
{ name: 'Eduard Korotin', pp: ' EST', src: '/img/4.png' },
{ name: 'Ana Cristina Silva', pp: 'POR', src: '/img/5.png'},
{ name: 'Dallas Leslie Williams', pp: 'Scrutineer AUS', src: '/img/6.png' }
{name: 'Wolfgang Eliasch', pp: 'Chairperson for Latin AUT', src: '/img/1.png'},
{name: 'Nenad Jeftic', pp: 'Chairperson for Standard SRB', src: '/img/2.png'},
{name: 'Dorel Bagiu', pp: 'ROU', src: '/img/3.png'},
{name: 'Eduard Korotin', pp: ' EST', src: '/img/4.png'},
{name: 'Ana Cristina Silva', pp: 'POR', src: '/img/5.png'},
{name: 'Dallas Leslie Williams', pp: 'Scrutineer AUS', src: '/img/6.png'}
])
const activeNews = ref(0)
const banners = ref([])
......@@ -352,7 +363,7 @@ const newsList = ref([])
const currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
const liveStartTime = ref(0)
const liveData = ref({})
const form = ref({})
const matchData = ref({})
onMounted(() => {
init()
......@@ -360,53 +371,68 @@ onMounted(() => {
const init = () => {
var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
getNewsListById({pageSize: 6, pageNum: 1,sortId: '20000001'}).then(res => {
getNewsListById({pageSize: 6, pageNum: 1, sortId: '20000001'}).then(res => {
newsList.value = res.rows
})
getNewsListById(
{ pageSize: 4,
{
pageSize: 4,
pageNum: 1,
sortId: '30000008' }
sortId: '30000008'
}
).then(res => {
livelist.value = res.rows
})
getNewsListById({ pageSize: 5,
getNewsListById({
pageSize: 5,
pageNum: 1,
sortId: '30000009' }
sortId: '30000009'
}
).then(res => {
picList.value = res.rows
})
getNewsList({ pageSize: 3,
pageNum: 1,
language:2,
code: '1000' }
getNewsList({
pageSize: 3,
pageNum: 1,
language: 2,
code: '1000'
}
).then(res => {
newest2.value = res.rows
})
match.getMaList({topFlag:1}).then((res) => {
match.getMaList({topFlag: 1}).then((res) => {
maList.value = res.rows
matchData.value = maList.value[0]
getMatchInfo(matchData.value.id)
getMatchSet(matchData.value.id)
})
match.getLabelList().then(res=> {
match.getLabelList().then(res => {
tabList.value = res.data
})
getpartners()
}
const getMatchInfo = (id) => {
match.getInfoByCptId({ cptId:id }).then((res) => {
match.getInfoByCptId({cptId: id}).then((res) => {
liveData.value = res.data || {}
if(liveData.value.videoStart){
if (liveData.value.videoStart) {
liveStartTime.value = dayjs(liveData.value.videoStart).diff(currentDateTime.value, 'millisecond')
}
})
}
async function getMatchSet(id) {
const res = await getBaseInfoByActiveId(id)
form.value = res.data ?? null
console.log(form.value)
}
const getpartners = () => {
match.getAboutUs().then((res) => {
aboutUsContent.value = res.data.contextEn
})
match.getZNList({sortId:'2000',language:2}).then((res) => {
match.getZNList({sortId: '2000', language: 2}).then((res) => {
partners.value = res.rows
})
}
......@@ -459,38 +485,38 @@ const building = () => {
const goGuide = () => {
router.push({
path: `/guide`,
query:{
index:8
query: {
index: 8
}
})
}
const popMaster = () => {
var params = {
cptId:matchData.value.id
cptId: matchData.value.id
}
emit('pop',params)
emit('pop', params)
}
const backNumberSearch = () => {
var params = {
cptId:matchData.value.id
cptId: matchData.value.id
}
emit('backNumber',params)
emit('backNumber', params)
}
const schSearchSearch = () => {
var params = {
cptId:matchData.value.id
cptId: matchData.value.id
}
emit('schSearch',params)
emit('schSearch', params)
}
const handlePickup=()=>{
const params={
cptId :matchData.value.id
const handlePickup = () => {
const params = {
cptId: matchData.value.id
}
emit('pickup',params)
emit('pickup', params)
}
const goliveUrl = () => {
ElMessage.warning('This function is temporarily closed.' )
ElMessage.warning('This function is temporarily closed.')
// if (liveData.value.videoStatus=="1") {
// window.open(liveData.value.videoUrlCn)
// } else {
......@@ -498,10 +524,10 @@ const goliveUrl = () => {
// }
}
const gopicliveUrl = () => {
if (liveData.value.picStatus=="1") {
if (liveData.value.picStatus == "1") {
window.open(liveData.value.picUrlCn)
} else {
ElMessage.warning( 'No live' )
ElMessage.warning('No live')
}
}
......@@ -516,46 +542,110 @@ const goDetail = (n) => {
}
</script>
<style scoped lang="scss">
.syBg{
<style lang="scss" scoped>
.syBg {
background: url("@/assets/dance/logo_l.png") no-repeat left 98%,
url("@/assets/dance/logo_r1.png") no-repeat right 98%;
background-size: 30%;
}
.btabs{display: flex;position: absolute;bottom: 60px;gap: 10px;
div{color: #fff; background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);border: 2px solid #9ba6d4;border-radius: 50px;
padding:6px 20px;
.btabs {
display: flex;
position: absolute;
bottom: 60px;
gap: 10px;
div {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
border: 2px solid #9ba6d4;
border-radius: 50px;
padding: 6px 20px;
}
div:hover{cursor: pointer;background: #fff;color: #000;border:2px solid #fff;}
div:hover {
cursor: pointer;
background: #fff;
color: #000;
border: 2px solid #fff;
}
}
.zn-bg {
background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
border-radius: 15px;
}
.zn-bg{background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
border-radius: 15px;}
.zn-Box{background-size: contain;position: relative;overflow: hidden;
.bbbg{position: absolute;width: 100%;height: 100%;object-fit: cover;}
.bgbg{height: 100%;
padding: 5%;display: flex;
.zn-Box {
background-size: contain;
position: relative;
overflow: hidden;
.bbbg {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.bgbg {
height: 100%;
padding: 5%;
display: flex;
flex-direction: column;
justify-content: center;
img{margin: 5% 0}
img {
margin: 5% 0
}
}
.itemBox{
.itemBox {
padding: 20px 40px;
p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;}
p {
margin: 0;
height: 40px;
line-height: 20px;
display: flex;
align-items: center;
}
}
border-radius: 15px;
.zn-btn{background: #FFFFFF;text-transform: uppercase;
font-size: 16px; width: fit-content; margin: 5px 5px 5px 0;
.zn-btn {
background: #FFFFFF;
text-transform: uppercase;
font-size: 16px;
width: fit-content;
margin: 5px 5px 5px 0;
color: #453DEA;
border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;}
.item{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;
display: flex;align-items: center;text-align: center;
font-size: 18px; flex-direction: column;padding: 35px 10px 20px;
background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
border-radius: 23px;
padding: 10px 20px;
display: inline-flex;
align-items: center;
}
.item {
box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
margin: 40px 0 0;
display: flex;
align-items: center;
text-align: center;
font-size: 18px;
flex-direction: column;
padding: 35px 10px 20px;
background: url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
background-size: cover;
position: relative;
border-radius: 15px;
img{position: absolute;top: -30px}
img {
position: absolute;
top: -30px
}
}
}
......@@ -568,14 +658,29 @@ const goDetail = (n) => {
clear: both;
overflow: hidden;
}
.banner-pp{ position: absolute; bottom: 40%;right: 5%;width: 200px;}
.banner-pp {
position: absolute;
bottom: 40%;
right: 5%;
width: 200px;
}
.bannerItem {
height: 450px;
background: #000;position: relative;
.slogen{position: relative;top: 130px;}
.banner-count{position: absolute;padding: 20px 40px;
font-size: 20px;align-items: center;
background: #000;
position: relative;
.slogen {
position: relative;
top: 130px;
}
.banner-count {
position: absolute;
padding: 20px 40px;
font-size: 20px;
align-items: center;
overflow: hidden;
background: url("@/assets/dance/time_bg.png") no-repeat center;
background-size: 100% 100%;
......@@ -585,29 +690,56 @@ const goDetail = (n) => {
//border-image-width:4px;
//border-image-outset:4px;
//background: rgba(0,0,0,0.3);
bottom: 40%;display: flex;flex-wrap: nowrap;
bottom: 40%;
display: flex;
flex-wrap: nowrap;
right: 5%;
color: #fff;
.van-count-down{display: flex;color: #fff;margin: 0 0 0 20px;
.van-count-down {
display: flex;
color: #fff;
margin: 0 0 0 20px;
width: 360px;
font-size: 41px;}
.block{ color: #fff;text-align: center;width: 3em;
font-size: 41px;
font-family: DIN Alternate;}
.colon{ color: #fff;display: block;margin: 20px 0 0;
font-size: 20px;}
}
.block {
color: #fff;
text-align: center;
width: 3em;
font-size: 41px;
font-family: DIN Alternate;
}
.colon {
color: #fff;
display: block;
margin: 20px 0 0;
font-size: 20px;
}
}
.bb {
width: 580px;
justify-content: center;
height: 100px;
font-size: 30px;
}
.bb{width: 580px;justify-content: center;height: 100px;font-size: 30px;}
.banner-count.bb:hover{box-shadow: 0 0 20px #453DEA;border-radius: 100px;
.banner-count.bb:hover {
box-shadow: 0 0 20px #453DEA;
border-radius: 100px;
background: #000
}
.box {
position: absolute;
height: 100%;
left: 0;
right: 0;
}
h3 {
position: absolute;
color: #fff;
......@@ -616,7 +748,7 @@ const goDetail = (n) => {
bottom: 50px;
font-size: 3vw;
}
video {
width: 100%;
height: 100%;
......@@ -629,27 +761,28 @@ const goDetail = (n) => {
}
.banner {
position: relative;margin:0 0 30px;
position: relative;
margin: 0 0 30px;
:deep(.el-carousel__arrow) {
border-radius: 0;
.el-icon {
color: transparent;
}
&:hover {
filter: brightness(1.5)
}
}
:deep(.el-carousel__arrow--left) {
background: url("@/assets/images/prev2@2x.png") no-repeat center;
width: 78px;
height: 45px;
background-size: contain;
}
:deep(.el-carousel__arrow--right) {
background: url("@/assets/images/next2@2x.png") no-repeat center;
width: 78px;
......@@ -657,41 +790,121 @@ const goDetail = (n) => {
background-size: contain
}
}
.el-calendar{--el-calendar-border:none;--el-calendar-cell-width:40px;text-align:center;
--el-text-color-regular:#8E8D94;
:deep(.el-calendar__header){justify-content: center;padding: 0 0 10px}
:deep(.el-calendar__body){border: 1px solid #F0F0F0;padding: 0}
:deep(.el-calendar-table .el-calendar-day){padding: 1px;}
:deep(.el-calendar-table td.is-selected){background: transparent;}
:deep(.el-calendar__button-group){display: none;}
:deep(.el-calendar-table thead th){padding: 5px 0 0}
.primaryDate{color: #fff;
background: #000;}
.date{ margin:auto;border-radius: 50%;width: 30px;height: 30px;line-height: 30px;
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 40px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
padding: 0 0 10px
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
:deep(.el-calendar-table thead th) {
padding: 5px 0 0
}
.primaryDate {
color: #fff;
background: #000;
}
.date {
margin: auto;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
}
.calendarList{border: 1px solid #F0F0F0;padding:12px 20px;overflow: auto;height: 233px;
ul{
li{background: #F6F9FE;margin:7px 0 7px 0;position: relative;padding: 13px;
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px;
overflow: auto;
height: 233px;
ul {
li {
background: #F6F9FE;
margin: 7px 0 7px 0;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
label{color: #000;margin-right: 15px;
&::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto;
border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1}
label {
color: #000;
margin-right: 15px;
&::before {
content: '';
background: #fff;
left: -17px;
top: 0px;
bottom: 0;
margin: auto;
border-radius: 50%;
width: 2px;
height: 2px;
position: absolute;
z-index: 1
}
}
}
li::before{content: '';background: #000;
border-radius: 50%;width: 8px;height: 8px;position: absolute;
left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1;
li::before {
content: '';
background: #000;
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
left: -20px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
}
li::after{content: ''; left: -16px;width: 1px;height: 100%;
background: #EBEBEB; position: absolute;top: 20px}
li:hover{color: #fff;
li:hover {
color: #fff;
background: #000;
label{color: #fff;}
label {
color: #fff;
}
}
}
}
......@@ -705,7 +918,7 @@ const goDetail = (n) => {
.ggbond {
height: 230px;
position: relative;
img {
height: 100%;
object-fit: cover;
......@@ -717,131 +930,336 @@ const goDetail = (n) => {
}
}
.teacher{height: 410px;background: #fff;
position: relative;border-radius: 10px;overflow: hidden;
.imgbox{background: linear-gradient(0,#C8AAFC,#fff)}
img{height: 350px;width: 100%;object-fit: cover;}
h3{color: #fff;background: url("@/assets/dance/name_bg.png") no-repeat center;
background-size:110% 100%;text-align: center;height: 30px;line-height: 30px;
font-size: 18px;position: absolute;width: 100%;bottom: 30px;}
p{text-align: center;margin: 25px 0 0;
font-size: 14px;}
.teacher {
height: 410px;
background: #fff;
position: relative;
border-radius: 10px;
overflow: hidden;
.imgbox {
background: linear-gradient(0, #C8AAFC, #fff)
}
img {
height: 350px;
width: 100%;
object-fit: cover;
}
h3 {
color: #fff;
background: url("@/assets/dance/name_bg.png") no-repeat center;
background-size: 110% 100%;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 18px;
position: absolute;
width: 100%;
bottom: 30px;
}
p {
text-align: center;
margin: 25px 0 0;
font-size: 14px;
}
}
@media screen and (max-width: 1650px) {
.teacher{height: 320px;
.imgbox{
img{height: 260px}
.teacher {
height: 320px;
.imgbox {
img {
height: 260px
}
}
}
}
@media screen and (max-width: 1200px) {
.teacher{height: 450px;margin: 0 0 20px;
.imgbox{
img{height: 390px}
.teacher {
height: 450px;
margin: 0 0 20px;
.imgbox {
img {
height: 390px
}
}
}
}
@media screen and (max-width: 900px) {
.teacher{height: 400px;margin: 0 0 20px;
.imgbox{
img{height: 340px}
.teacher {
height: 400px;
margin: 0 0 20px;
.imgbox {
img {
height: 340px
}
}
}
}
@media screen and (max-width: 800px) {
.teacher{height: 400px;margin: 0 0 20px;
.imgbox{
img{height: 260px}
.teacher {
height: 400px;
margin: 0 0 20px;
.imgbox {
img {
height: 260px
}
}
}
}
.aboutBox{background: url("@/assets/dance/about_bg.png") no-repeat center;height: 375px;
background-size: cover;padding: 40px 60px; position: relative;
.content{font-size: 18px;line-height: 2.2;height: 240px;overflow: hidden;
text-align: left;text-indent: 2em;}
.shadowbox{position: absolute;left: 0;bottom: 90px;height: 100px;width: 100%;
background: linear-gradient(0deg,rgba(255,255,255,1),rgba(255,255,255,0));
.aboutBox {
background: url("@/assets/dance/about_bg.png") no-repeat center;
height: 375px;
background-size: cover;
padding: 40px 60px;
position: relative;
.content {
font-size: 18px;
line-height: 2.2;
height: 240px;
overflow: hidden;
text-align: left;
text-indent: 2em;
}
.shadowbox {
position: absolute;
left: 0;
bottom: 90px;
height: 100px;
width: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.btn-lineG {
}
.btn-lineG{}
}
.mapBox{background: url("@/assets/dance/map.png") no-repeat center;height: 375px;
background-size: cover;padding: 1px;position: relative;display: flex;
.content{background: #fff;width: 60%;left: 40px;padding: 30px;
position: absolute;height: 90%;top: 0;bottom: 0;margin: auto;
.mapBox {
background: url("@/assets/dance/map.png") no-repeat center;
height: 375px;
background-size: cover;
padding: 1px;
position: relative;
display: flex;
.content {
background: #fff;
width: 60%;
left: 40px;
padding: 30px;
position: absolute;
height: 90%;
top: 0;
bottom: 0;
margin: auto;
}
div {
padding-left: 60px;
}
.phone {
background: url("@/assets/dance/map01.png") no-repeat left;
background-size: 30px;
}
div{padding-left: 60px;}
.phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;}
.address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px;
margin:50px 0;
.address {
background: url("@/assets/dance/map02.png") no-repeat left;
background-size: 30px;
margin: 50px 0;
}
.email{background: url("@/assets/dance/map03.png") no-repeat left;background-size: 30px;}
h4{margin: 0;
.email {
background: url("@/assets/dance/map03.png") no-repeat left;
background-size: 30px;
}
h4 {
margin: 0;
font-size: 16px;
color: #AAAAAA;}
p{margin: 13px 0 0;}
color: #AAAAAA;
}
p {
margin: 13px 0 0;
}
}
.logobox{background: #fff;height: 180px;border-radius: 10px;margin: 0 0 30px;
img{width: 100%;height: 100%;object-fit: contain;}
.logobox {
background: #fff;
height: 180px;
border-radius: 10px;
margin: 0 0 30px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.swiperPic{background: #F3F1FE;position: relative; height: 100%;
.swiperPic {
background: #F3F1FE;
position: relative;
height: 100%;
padding: 20px 45px;
.picprev{position: absolute; left: 5px;top: 0;bottom:0;margin: auto;height: 33px;
.picprev {
position: absolute;
left: 5px;
top: 0;
bottom: 0;
margin: auto;
height: 33px;
cursor: pointer;
&:hover{filter:brightness(2)}
&:hover {
filter: brightness(2)
}
}
.picnext{position: absolute;right: 5px;top: 0;bottom:0;margin: auto;height: 33px;
.picnext {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
margin: auto;
height: 33px;
cursor: pointer;
&:hover{filter:brightness(2)}}
&:hover {
filter: brightness(2)
}
}
}
.newline{display: flex;align-items: center;height: 56px;justify-content: space-between;
.newline {
display: flex;
align-items: center;
height: 56px;
justify-content: space-between;
cursor: pointer;
h3{font-weight: 400;margin: 0;width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
h3 {
font-weight: 400;
margin: 0;
width: 80%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 18px;
color: #030303;}
span{font-weight: 400;
color: #030303;
}
span {
font-weight: 400;
font-size: 14px;
color: #B4B6B8;}
&:hover{
color: #B4B6B8;
}
&:hover {
background: #F7F8FC;
}
}
@media (max-width: 800px) {
.newline{height: 40px;
h3{width: 70%;font-size: 14px;}
span{font-size: 12px;}
.newline {
height: 40px;
h3 {
width: 70%;
font-size: 14px;
}
span {
font-size: 12px;
}
}
.box{width: 94%}
.calendarList{padding: 0;
ul{
li{margin: 10px}
.box {
width: 94%
}
.calendarList {
padding: 0;
ul {
li {
margin: 10px
}
}
}
.aboutBox{padding: 20px 30px;}
.indexTitle{margin: 30px 0 20px}
.teacher{height: 320px;margin: 0 0 20px;
img{height: 260px}
.aboutBox {
padding: 20px 30px;
}
.activeItem{margin: 0 0 20px;}
.mapBox{
div{padding-left: 40px;}
.content{ width: 80%;left: 10%;padding:10px 20px 0 20px;}
.address{margin: 30px 0;}
p{text-align: left;word-break: break-all;}
.indexTitle {
margin: 30px 0 20px
}
.teacher {
height: 320px;
margin: 0 0 20px;
img {
height: 260px
}
}
.activeItem {
margin: 0 0 20px;
}
.mapBox {
div {
padding-left: 40px;
}
.content {
width: 80%;
left: 10%;
padding: 10px 20px 0 20px;
}
.address {
margin: 30px 0;
}
p {
text-align: left;
word-break: break-all;
}
}
.fixed_gg {
display: none;
}
.bannerItem .banner-count{flex-direction: column;
transform: scale(0.5); width: auto;
.bannerItem .banner-count {
flex-direction: column;
transform: scale(0.5);
width: auto;
left: 0;
right: 0;
.van-count-down{margin: 30px 0 0;}
.van-count-down {
margin: 30px 0 0;
}
}
.bgbg{ text-align: center;
h1{text-align: center}
.bgbg {
text-align: center;
h1 {
text-align: center
}
}
}
:deep(.btn-q) {
//background: #FFFFFF;
//font-size: 18px;
......@@ -850,7 +1268,7 @@ const goDetail = (n) => {
//padding: 10px 20px;
//display: inline-flex;
//align-items: center;
padding: 20px 40px;
font-size: 20px;
align-items: center;
......@@ -864,16 +1282,16 @@ const goDetail = (n) => {
box-sizing: inherit;
}
.btn-q:hover{
.btn-q:hover {
box-shadow: 0 0 20px #453DEA;
border-radius: 100px;
background: #000 !important;
}
.ding{
.ding {
position: fixed;
right:0px;
z-index:99;
right: 0px;
z-index: 99;
top: 40%;
background: #000 !important;
box-shadow: none;
......@@ -882,16 +1300,34 @@ const goDetail = (n) => {
//height: 100px;
padding: 20px;
}
.mb30{margin-bottom: 30px;}
.livetimecount{position: absolute;top: 0;z-index: 2;background: #F04035;
.mb30 {
margin-bottom: 30px;
}
.livetimecount {
position: absolute;
top: 0;
z-index: 2;
background: #F04035;
padding: 2px 4px;
&::after{content: ''; width: 0;
height: 0;position: absolute;right: -15px;top: 0;
&::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: -15px;
top: 0;
border-top: 24px solid #F04035;
border-right: 15px solid transparent;}
.van-count-down { display: flex;
border-right: 15px solid transparent;
}
.van-count-down {
display: flex;
color: #fff;
font-size: 14px;
.block {
color: #fff;
text-align: center;
......@@ -900,13 +1336,23 @@ const goDetail = (n) => {
}
}
}
@media (max-width: 500px) {
.forPc{display: none!important;}
.zn-Box .bgbg{padding: 10px 0 0;
.mb30{margin: 0}
.zn-btn{margin-top: 10px}
.forPc {
display: none !important;
}
.zn-Box .bgbg {
padding: 10px 0 0;
.mb30 {
margin: 0
}
.zn-btn {
margin-top: 10px
}
}
.logobox{
.logobox {
height: 60px;
}
}
......
src/viewsPc/match/pay.vue
......@@ -9,7 +9,7 @@
<div v-if="isLogin">
<group-info-row v-if="groupId" :group-id="groupId" :match-id="matchId"/>
<coach-info-row v-if="groupId" :group-id="groupId" :match-id="matchId"/>
<div v-if="user.utype=='1'&&myMemberTable.length>0" class="pd20">
<div class="leftboderTT">{{ language == 0 ? '随行人员清单' : 'List of accompanying personnel' }}
</div>
......@@ -75,7 +75,7 @@
</el-icon>
{{ language == 0 ? '导出设项报名清单' : 'Export LIST OF REGISTERED COMPETITIONS' }}
</el-link>
<el-link type="primary" @click="exportPdf">
<el-icon>
<Upload/>
......@@ -105,7 +105,7 @@
</el-button>
</div>
</el-card>
<el-card class="mt20 mb20">
<el-row class="result">
<el-col :lg="12">
......@@ -227,7 +227,7 @@
</svg>
</el-radio>
</el-radio-group>
<div v-if="payType == '2'&&wePayCodeUrl">
<div class="payImgbox flexCenter">
<div>
......@@ -249,9 +249,10 @@
please refresh the page
</div>
</div>
<div v-if="payType == '3'">
<table cellpadding="0" cellspacing="0" class="table-border table">
<tbody>
<tr>
<th class="head" colspan="2">
{{ language == 0 ? '线下缴费的收款信息' : 'Offline Payment Collection Information' }}
......@@ -313,8 +314,8 @@
<span v-else class="text-danger size12">*You can confirm with the contact person by phone after uploading the remittance form. The specific payment results can be viewed in the My Registration section of the personal center to check the progress</span>
</td>
</tr>
</tbody>
</table>
<div class="text-center">
<el-button class="btn-lineG w200px" round type="primary" @click="upRR">{{
language == 0 ? '保存' : 'Save'
......@@ -336,7 +337,7 @@
</el-icon>
<p class="text-success">{{ language == 0 ? '支付成功' : 'successful!' }}</p>
<h3 class="wePrice">{{ language == 0 ? '¥' : '$' }}{{ form.totalFee || 0 }}</h3>
<el-button v-if="language != 0" class="btn-lineG w200px" round type="primary" @click="downInvoice">
{{ language == 0 ? '下载收据' : 'DownLoad Invoice' }}
</el-button>
......@@ -357,7 +358,7 @@
</div>
</el-card>
</div>
<div v-if="errorBox" class="box">
<el-result
:sub-title="language==0?'请确认订单号是否正确':'Please confirm if the order number is correct'"
......@@ -371,7 +372,7 @@
</template>
</el-result>
</div>
<el-dialog v-model="showSJDialog" :close-on-click-modal="false" :close-on-press-escape="false"
:title="language==0?'开收据':'Issue a receipt'" width="460px">
<div class="flex">
......@@ -389,7 +390,7 @@
</div>
</div>
</el-dialog>
</div>
</template>
......@@ -460,7 +461,7 @@ onMounted(() => {
}
var is_mobile = navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
console.log(is_mobile)
if (is_mobile) {
isphone.value = true
} else {
......@@ -524,7 +525,7 @@ function getSignList() {
}).catch(err => {
if (isLogin.value) {
router.push({name: 'myMatch'})
}
})
}
......@@ -617,7 +618,7 @@ function exportSignList(n) {
...obj
}, `${fileName}_${new Date().getTime()}.xlsx`)
}
}
function exportPdf() {
......@@ -637,7 +638,7 @@ function exportPdf() {
...obj
}, `${fileName}_${new Date().getTime()}.pdf`)
}
}
function copy(str) {
......@@ -747,27 +748,27 @@ const showSJ = () => {
width: 100%;
max-width: 1000px;
margin: 20px auto;
.head {
background: #EFF2F7;
height: 50px;
font-size: 16px;
font-weight: 400;
}
th {
background: #FAFBFD;
font-size: 14px;
border-bottom: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
}
td {
border-bottom: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
padding: 10px;
}
&.table-border {
border-top: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
......@@ -786,23 +787,23 @@ const showSJ = () => {
.result {
font-size: 22px;
.flex {
display: flex;
align-items: center;
font-weight: 500;
img {
margin-right: 10px
}
}
.priceb {
color: #7B7F83;
font-size: 16px;
text-align: right;
line-height: 50px;
span {
font-weight: bold;
font-size: 22px;
......@@ -815,7 +816,7 @@ const showSJ = () => {
.skeletonBox {
position: relative;
overflow: hidden;
.btn-lineG {
position: absolute;
left: 0;
......@@ -825,7 +826,7 @@ const showSJ = () => {
bottom: 0;
width: 200px;
box-shadow: 0 0 1000px 500px rgba(255, 255, 255, 0.5);
}
}
......@@ -837,26 +838,26 @@ const showSJ = () => {
.priceBar {
padding: 0 0 20px;
.flex {
display: flex;
justify-content: right;
align-items: baseline;
.item {
font-size: 16px;
margin-right: 15px;
label {
color: #95A1A6;
}
span {
font-family: DIN Alternate;
}
}
}
.size26 {
font-size: 26px;
}
......
vite.config.js
import { defineConfig, loadEnv } from 'vite'
import path, { resolve } from 'path'
import {defineConfig, loadEnv} from 'vite'
import path, {resolve} from 'path'
import createVitePlugins from './vite/plugins'
import inject from '@rollup/plugin-inject'
import commonjs from '@rollup/plugin-commonjs'
// import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
export default defineConfig(({mode, command}) => {
const env = loadEnv(mode, process.cwd())
return {
// 部署生产环境和开发环境下的URL。
......@@ -76,24 +76,24 @@ export default defineConfig(({ mode, command }) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '')
},
'/dev-api/ztx-webSite': {
target: 'http://192.168.1.118:8082/',
// target: 'https://ces.2025wtcwuxi.com/stage-api/',
// target: 'http://192.168.1.118:8082/',
target: 'https://ces.2025wtcwuxi.com/stage-api/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
},
'/dev-api': {
target: 'http://192.168.1.118:8082/',
// target: 'http://192.168.1.118:8082/',
// target: 'http://192.168.1.131:8081/',
// target: 'https://ces.2025wtcwuxi.com/stage-api/',
// target: 'http://124.70.181.90:1880/stage-api',
// target: 'https://wdsfwuxicenter.com/stage-api/',
target: 'https://sys.2025wtcwuxi.com/stage-api/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
},
'/ticket': {
// target: 'http://192.168.1.131:8098/',
// target: 'http://192.168.1.131:8081/',
target: 'https://jijin.wtwuxicenter.com/h5/',
target: 'http://36.153.235.222:8899/',
// target: 'https://jijin.wtwuxicenter.com/h5/',
// target: 'https://ticketh5.wdsfwuxicenter.com/h5/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/ticket/, '')
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!