Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
db6a9a5e by zhangmeng
Options

按钮控制

1 parent fcfc577a
Inline Side-by-side
Showing 4 changed files with 908 additions and 444 deletions
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,29 +193,29 @@ function popRemark(type) {
})
return
}
applyInvitation()
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',
......@@ -221,7 +229,7 @@ function goBooking(n, f) {
switch (n) {
case 10:
// 票务
// router.push({
// path: `/booking/ticket/${props.matchId}`,
// params: {id:props.matchId},
......@@ -252,7 +260,7 @@ function goBooking(n, f) {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.itemBox, .itemBox_en {
padding: 20px;
background: #fff;
......@@ -276,7 +284,7 @@ function goBooking(n, f) {
background-size: 100% 100%;
border-radius: 15px;
gap: 10px;
img {
object-fit: contain;
width: 75px;
......@@ -289,19 +297,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;
}
......@@ -317,7 +325,7 @@ function goBooking(n, f) {
height: auto !important;
padding: 15px 0;
margin: 10px 0;
img {
width: 50px;
height: 50px
......
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;
}
}
......
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。
......@@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => {
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',
......@@ -92,8 +92,8 @@ export default defineConfig(({ mode, command }) => {
},
'/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!