Skip to content

杨炀 / dance-pc

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

Merge remote-tracking branch 'origin/世锦赛' into 世锦赛 

# Conflicts:
#	src/viewsPc/components/homeQuick.vue
#	src/viewsPc/index.vue
#	src/viewsPc/index_en.vue
2 parents f23375cd 11b19150
Inline Side-by-side
Showing 24 changed files with 1585 additions and 1228 deletions
package.json
......@@ -15,7 +15,8 @@
"@element-plus/icons-vue": "2.0.10",
"@videojs-player/vue": "^1.0.0",
"@vueup/vue-quill": "1.1.1",
"@vueuse/core": "^10.1.2",
"@vueuse/core": "^13.4.0",
"@vueuse/router": "^13.4.0",
"axios": "0.27.2",
"crypto-js": "^4.1.1",
"echarts": "5.4.0",
......
src/apiPc/match.js
......@@ -790,6 +790,30 @@ export function getVisaInfo(query) {
})
}
export function downInvite(params) {
return request({
url: '/league/visa/downInvite',
method: 'get',
params
})
}
export function getUplaodFile(params) {
return request({
url: '/league/visa/getUplaodFile',
method: 'get',
params
})
}
export function listVisaInfo(query) {
return request({
url: '/league/visaInfo/list',
method: 'get',
params: query
})
}
// 酒店预约查询
export function hotelList(params) {
return request({
......
src/assets/img/svg/tag21.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="23px"><path fill-rule="evenodd" fill="rgb(146, 154, 160)" d="M1.242,17.158 C2.102,17.158 2.498,17.424 2.998,17.759 C3.558,18.134 4.257,18.601 5.551,18.601 C6.846,18.601 7.543,18.134 8.103,17.759 C8.603,17.424 8.998,17.158 9.857,17.158 C10.718,17.158 11.113,17.424 11.615,17.759 C12.175,18.134 12.873,18.601 14.168,18.601 C15.464,18.601 16.162,18.134 16.722,17.759 C17.224,17.424 17.620,17.158 18.481,17.158 C19.342,17.158 19.738,17.424 20.240,17.759 C20.801,18.134 21.498,18.601 22.794,18.601 C23.191,18.601 23.513,18.278 23.513,17.880 C23.513,17.481 23.191,17.158 22.794,17.158 C21.934,17.158 21.537,16.893 21.036,16.558 C20.474,16.183 19.777,15.715 18.481,15.715 C17.185,15.715 16.487,16.183 15.926,16.558 C15.425,16.893 15.028,17.158 14.168,17.158 C13.307,17.158 12.912,16.893 12.411,16.558 C11.850,16.183 11.152,15.715 9.857,15.715 C8.563,15.715 7.866,16.183 7.306,16.558 C6.806,16.893 6.411,17.158 5.551,17.158 C4.692,17.158 4.296,16.893 3.796,16.558 C3.235,16.183 2.537,15.715 1.242,15.715 C0.846,15.715 0.524,16.038 0.524,16.437 C0.524,16.835 0.846,17.158 1.242,17.158 L1.242,17.158 ZM22.794,21.038 C21.934,21.038 21.537,20.773 21.036,20.438 C20.474,20.063 19.777,19.595 18.481,19.595 C17.185,19.595 16.487,20.063 15.926,20.438 C15.425,20.773 15.028,21.038 14.168,21.038 C13.307,21.038 12.912,20.773 12.411,20.438 C11.850,20.063 11.152,19.595 9.857,19.595 C8.563,19.595 7.866,20.063 7.306,20.438 C6.806,20.773 6.411,21.038 5.551,21.038 C4.692,21.038 4.296,20.773 3.796,20.438 C3.235,20.063 2.537,19.595 1.242,19.595 C0.846,19.595 0.524,19.918 0.524,20.317 C0.524,20.715 0.846,21.038 1.242,21.038 C2.102,21.038 2.498,21.304 2.998,21.638 C3.558,22.014 4.257,22.481 5.551,22.481 C6.846,22.481 7.543,22.014 8.103,21.638 C8.603,21.304 8.998,21.038 9.857,21.038 C10.718,21.038 11.113,21.304 11.615,21.638 C12.175,22.014 12.873,22.481 14.168,22.481 C15.464,22.481 16.162,22.014 16.722,21.638 C17.224,21.304 17.620,21.038 18.481,21.038 C19.342,21.038 19.738,21.304 20.240,21.638 C20.801,22.014 21.498,22.481 22.794,22.481 C23.191,22.481 23.513,22.158 23.513,21.760 C23.513,21.361 23.191,21.038 22.794,21.038 L22.794,21.038 ZM3.527,14.664 C3.924,14.664 3.1000,14.399 3.1000,14.000 L3.1000,9.1000 L13.1000,9.1000 L13.1000,14.000 C13.1000,14.399 14.004,14.664 14.401,14.664 C14.797,14.664 15.000,14.399 15.000,14.000 L15.000,5.000 C15.000,3.286 16.508,2.338 18.215,2.338 C19.922,2.338 21.312,3.734 21.312,5.449 C21.312,5.848 21.633,6.171 22.030,6.171 C22.427,6.171 22.748,5.848 22.748,5.449 C22.748,2.939 20.714,0.896 18.215,0.896 C15.717,0.896 13.1000,2.489 13.1000,5.000 L13.1000,9.000 L3.1000,9.000 L3.1000,5.000 C3.1000,3.286 5.635,2.338 7.342,2.338 C9.049,2.338 10.439,3.734 10.439,5.449 C10.439,5.848 10.761,6.171 11.158,6.171 C11.554,6.171 11.876,5.848 11.876,5.449 C11.873,2.936 9.845,0.899 7.342,0.896 C4.839,0.899 3.002,2.487 3.000,5.000 L3.000,14.000 C3.000,14.399 3.130,14.664 3.527,14.664 L3.527,14.664 Z"/></svg>
\ No newline at end of file
src/assets/img/svg/tag22.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26px" height="17px"><path fill-rule="evenodd" fill="rgb(146, 154, 160)" d="M23.1000,13.1000 L23.1000,15.000 C23.1000,16.263 22.595,17.002 21.297,17.002 C19.999,17.002 18.1000,16.263 18.1000,15.000 L18.1000,10.1000 L6.1000,10.1000 L6.1000,15.000 C6.1000,16.263 6.004,17.002 4.706,17.002 C3.408,17.002 2.356,15.978 2.356,14.715 L2.356,13.859 C1.979,13.989 1.483,14.002 1.000,13.1000 C0.571,13.998 0.006,13.947 0.006,13.000 L0.006,4.997 C0.006,4.050 0.795,3.282 1.768,3.282 C2.005,3.282 2.197,3.329 2.356,3.412 L2.356,3.282 C2.356,2.676 2.604,2.094 3.044,1.666 C3.485,1.237 4.083,0.996 4.706,0.996 C4.706,0.996 5.465,0.787 6.368,1.666 C6.809,2.094 6.1000,2.394 6.1000,3.000 L6.1000,6.1000 L18.1000,6.1000 L18.1000,3.1000 C18.1000,1.780 19.927,0.996 21.297,0.996 C22.472,0.926 23.952,1.658 23.1000,3.000 L23.1000,3.320 C24.075,3.301 24.152,3.286 24.235,3.282 C25.208,3.282 25.997,4.050 25.997,4.997 L25.997,13.000 C25.997,13.947 24.973,13.1000 23.1000,13.1000 ZM1.768,4.426 C1.768,4.426 1.000,4.382 1.000,5.000 L1.000,12.1000 C0.1000,13.571 1.988,13.387 1.1000,12.1000 L1.1000,5.000 C1.1000,4.684 2.093,4.426 1.768,4.426 ZM6.000,10.1000 L6.000,6.1000 L6.000,3.1000 C6.048,1.941 4.1000,2.000 4.1000,2.000 C4.098,1.853 2.905,2.276 3.000,3.1000 L3.000,5.000 L3.000,12.1000 L3.000,13.1000 C3.148,15.694 4.351,15.1000 4.1000,15.1000 C5.649,15.1000 6.000,14.631 6.000,13.1000 L6.000,10.1000 ZM6.1000,8.000 L6.1000,9.1000 L18.1000,9.1000 L18.1000,8.000 L6.1000,8.000 ZM21.297,2.139 C20.810,2.139 19.1000,2.412 19.1000,3.1000 L19.1000,6.1000 L19.1000,10.1000 L19.1000,15.000 C19.1000,15.631 20.648,15.858 21.297,15.858 C21.946,15.858 23.000,15.631 23.000,15.000 L23.000,12.1000 L23.000,5.000 L23.000,3.1000 C23.162,2.860 22.369,1.955 21.297,2.139 ZM25.000,5.000 C25.000,4.848 24.760,4.700 24.650,4.593 C24.540,4.486 24.391,4.426 24.235,4.426 C24.078,4.426 24.020,4.488 23.1000,4.586 L23.1000,5.000 L23.1000,12.1000 C23.1000,13.176 24.138,13.484 25.000,12.1000 L25.000,5.000 Z"/></svg>
\ No newline at end of file
src/assets/logo/banner-text.png
src/assets/logo/banner-text.png

36.2 KB | W: | H:

src/assets/logo/banner-text.png

29.6 KB | W: | H:

src/assets/logo/banner-text.png
src/assets/logo/banner-text.png
src/assets/logo/banner-text.png
src/assets/logo/banner-text.png
  • 2-up
  • Swipe
  • Onion skin
src/layoutPc/components/AppBottom.vue
......@@ -13,7 +13,7 @@
<el-col :lg="10" :md="10" :xs="10">
<ul style="text-align: right">
<li>客服及报障电话:15606190026</li>
<li>客服及报障邮箱: info@wdsfwuxicenter.com</li>
<li>客服及报障邮箱: office@2025wtcwuxi.com</li>
</ul>
</el-col>
<el-col :lg="4" :md="4" :xs="4">
......@@ -32,13 +32,15 @@
<el-col :span="14">
<ul>
<li>Postal code：214000</li>
<li>Address：100 meters northeast of the intersection of Hefeng Road and Qingshu, the Taihu Lake New Town, Wuxi, Jiangsu</li>
<li>Address：100 meters northeast of the intersection of Hefeng Road and Qingshu, the Taihu Lake New Town,
Wuxi, Jiangsu
</li>
</ul>
</el-col>
<el-col :span="6">
<ul style="text-align: right">
<li>Telephone:086-15606190026</li>
<li>E-mail:info@wdsfwuxicenter.com</li>
<li>E-mail:office@2025wtcwuxi.com</li>
</ul>
</el-col>
<el-col :span="4">
......@@ -54,120 +56,207 @@
</el-row>
</div>
</div>
<div class="fixed-right forPc">
<div class="mlb" v-if="language===0">
<div @click="goAround" class="mb10 pb5">
<a>
<img class="kf" src="@/assets/logo/btn02.png"/>
<div class="text-center mt10">周边活动</div>
</a>
</div>
<div onclick="window.open('https://ykf-weixin01.7moor.com/wapchat.html?accessId=6c500b60-02c6-11ef-9a4d-85cd5dacc5bf&fromUrl=&urlTitle=&language=ZHCN','_blank','height=700px,width=700px,top=50,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')" title="客服" >
<img class="kf" src="@/assets/logo/btn01.png"/>
<div class="text-center mt10">在线客服</div>
</div>
<!-- <div @click="goHelpZH">-->
<!-- <div class="fixed-right forPc">-->
<!-- <div class="mlb" v-if="language===0">-->
<!-- <div @click="goAround" class="mb10 pb5">-->
<!-- <a>-->
<!-- <img class="kf" src="@/assets/logo/btn02.png"/>-->
<!-- <div class="text-center mt10">周边活动</div>-->
<!-- </a>-->
<!-- </div>-->
</div>
<div class="mlb" v-else>
<div @click="goAround" class="mb10 pb5">
<a>
<img class="kf" src="@/assets/logo/btn02.png"/>
<div class="text-center mt10">ACTIVITIES</div>
</a>
</div>
<div onclick="window.open('https://ykf-weixin01.7moor.com/wapchat.html?accessId=707daf80-02c6-11ef-9a4d-85cd5dacc5bf&fromUrl=&urlTitle=&language=EN','_blank','height=700px,width=700px,top=100,left=150,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')" title="Live Chat">
<img class="kf" src="@/assets/logo/btn01.png"/>
<div class="text-center ">LIVE CHAT</div>
</div>
<!-- <div @click="goHelp">-->
<!-- <img class="kf" src="@/assets/logo/btn02.png"/>-->
<!-- <div class="text-center uppercase">Video Guide</div>-->
<!-- <div-->
<!-- style="display: none" title="客服"-->
<!-- onclick="window.open('https://ykf-weixin01.7moor.com/wapchat.html?accessId=6c500b60-02c6-11ef-9a4d-85cd5dacc5bf&fromUrl=&urlTitle=&language=ZHCN','_blank','height=700px,width=700px,top=50,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')"-->
<!-- >-->
<!-- <img class="kf" src="@/assets/logo/btn01.png"/>-->
<!-- <div class="text-center mt10">在线客服</div>-->
<!-- </div>-->
</div>
</div>
<!-- &lt;!&ndash; <div @click="goHelpZH">&ndash;&gt;-->
<!-- &lt;!&ndash; <a>&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="kf" src="@/assets/logo/btn02.png"/>&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="text-center mt10">周边活动</div>&ndash;&gt;-->
<!-- &lt;!&ndash; </a>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<!-- <div class="mlb" v-else>-->
<!-- <div @click="goAround" class="mb10 pb5">-->
<!-- <a>-->
<!-- <img class="kf" src="@/assets/logo/btn02.png"/>-->
<!-- <div class="text-center mt10">ACTIVITIES</div>-->
<!-- </a>-->
<!-- </div>-->
<!--&lt;!&ndash; <div&ndash;&gt;-->
<!--&lt;!&ndash; onclick="window.open('https://ykf-weixin01.7moor.com/wapchat.html?accessId=707daf80-02c6-11ef-9a4d-85cd5dacc5bf&fromUrl=&urlTitle=&language=EN','_blank','height=700px,width=700px,top=100,left=150,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')"&ndash;&gt;-->
<!--&lt;!&ndash; title="Live Chat">&ndash;&gt;-->
<!--&lt;!&ndash; <img class="kf" src="@/assets/logo/btn01.png"/>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="text-center ">LIVE CHAT</div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- &lt;!&ndash; <div @click="goHelp">&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="kf" src="@/assets/logo/btn02.png"/>&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="text-center uppercase">Video Guide</div>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
</template>
<script setup>
import {useStorage} from "@vueuse/core/index";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
const router = useRouter()
const language = useStorage('language', 0)
const goHelp = () => {
router.push({
path: `/news/list/20000100`,
query:{
kindName: language.value===0?'操作指引':'Video Guide'
query: {
kindName: language.value === 0 ? '操作指引' : 'Video Guide'
}
})
}
const goHelpZH = () => {
// ElMessage.success('已下载文件')
router.push({
name: 'guide',
query: {
index:8
}
})
router.push({
name: 'guide',
query: {
index: 8
}
})
}
const goAround = () => {
//周边活动
router.push({path: `/about/wuDao`,query: {activeIndex: '2'}})
router.push({path: `/about/wuDao`, query: {activeIndex: '2'}})
}
</script>
<style lang="scss" scoped>
.kf{width: 45px;margin: auto;height: auto;
.kf {
width: 45px;
margin: auto;
height: auto;
//animation: pop 2s infinite;
}
.fixed-right{position: fixed;right: 0;top: 65%;z-index: 9;
.mlb{background: #fff;border-radius: 10px 0 0 10px;box-shadow: 0 2px 8px #aaa;
padding: 10px 8px;text-align: center;cursor: pointer;
div{text-transform: uppercase;}
div:first-child{border-bottom: 0.5px solid #eee;
.fixed-right {
position: fixed;
right: 0;
top: 65%;
z-index: 9;
.mlb {
background: #fff;
border-radius: 10px 0 0 10px;
box-shadow: 0 2px 8px #aaa;
padding: 10px 8px;
text-align: center;
cursor: pointer;
div {
text-transform: uppercase;
}
div:first-child {
border-bottom: 0.5px solid #eee;
//padding: 0 0 10px;margin-bottom: 10px;
}
div:hover{.gradient-text{font-weight: bold;}}
div:hover {
.gradient-text {
font-weight: bold;
}
}
}
}
.copyright{font-size: 14px;opacity: 0.88;color: #4C5359;}
.footAll{background: #E0E3E5;;padding: 36px 0 5px;
p{font-size: 14px;opacity: 0.88;color: #4C5359;}
ul{list-style: none;
li{line-height: 30px;font-size: 14px;opacity: 0.88;color: #4C5359;
a{margin-left: 15px;
&:hover{text-decoration: underline;}
.copyright {
font-size: 14px;
opacity: 0.88;
color: #4C5359;
}
.footAll {
background: #E0E3E5;;
padding: 36px 0 5px;
p {
font-size: 14px;
opacity: 0.88;
color: #4C5359;
}
ul {
list-style: none;
li {
line-height: 30px;
font-size: 14px;
opacity: 0.88;
color: #4C5359;
a {
margin-left: 15px;
&:hover {
text-decoration: underline;
}
}
}
}
img{height: 80px;}
img {
height: 80px;
}
}
.gradient-text {
font-family: FZJunHeiS-B-GB;
font-weight: 600;font-size: 17px;
font-weight: 600;
font-size: 17px;
background: linear-gradient(0deg, #8226FC 0%, #483BEB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 500px) {
.forWei{display: none;}
.footAll{padding:10px 0;
ul {
li {
font-size: 10px;line-height: 1.4;
}
.forWei {
display: none;
}
.footAll {
padding: 10px 0;
ul {
li {
font-size: 10px;
line-height: 1.4;
}
img{height: 60px;}
p{font-size: 10px;line-height: 1.4;}
.copyright{font-size: 10px;line-height: 1.4;}
}
img {
height: 60px;
}
p {
font-size: 10px;
line-height: 1.4;
}
.copyright {
font-size: 10px;
line-height: 1.4;
}
}
}
.ffoot{display: inline-flex;
img{width: 20px;height: 20px;display: inline-block;position: relative;top: 4px;margin-right: 4px;}
.ffoot {
display: inline-flex;
img {
width: 20px;
height: 20px;
display: inline-block;
position: relative;
top: 4px;
margin-right: 4px;
}
}
</style>
......
src/layoutPc/components/AppHeader.vue
......@@ -13,7 +13,7 @@
<el-menu-item index="/">{{ language==0?'首页':'HOME' }}</el-menu-item>
<el-menu-item index="/news">{{ language==0?'新闻资讯':'NEWS' }}</el-menu-item>
<el-menu-item index="/notice">{{ language==0?'通知公告':'NOTICEBOARD' }}</el-menu-item>
<el-menu-item index="/match/list">{{ language==0?'赛事服务':'REGISTRATION' }}</el-menu-item>
<!-- <el-menu-item index="/match/list">{{ language==0?'赛事服务':'REGISTRATION' }}</el-menu-item>-->
<el-menu-item index="/saiC">{{ language==0?'竞赛日程':'COMPETITIONS' }}</el-menu-item>
<el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
<!-- <el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>-->
......@@ -32,7 +32,7 @@
<el-menu-item index="/">{{ language==0?'首页':'HOME' }}</el-menu-item>
<el-menu-item index="/news">{{ language==0?'新闻资讯':'NEWS' }}</el-menu-item>
<el-menu-item index="/notice">{{ language==0?'通知公告':'NOTICEBOARD' }}</el-menu-item>
<el-menu-item index="/match/list">{{ language==0?'赛事服务':'COMPETITION INFO' }}</el-menu-item>
<!-- <el-menu-item index="/match/list">{{ language==0?'赛事服务':'COMPETITION INFO' }}</el-menu-item>-->
<el-menu-item index="/saiC">{{ language==0?'竞赛日程':'COMPETITION SCHEDULE' }}</el-menu-item>
<el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
<!-- <el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>-->
......
src/routerPc/en.js
......@@ -567,6 +567,12 @@ export const constantRoutes = [
meta: {title: 'My reservation'}
},
{
path: 'myVisa',
component: () => import('@/viewsPc/center/myVisa'),
name: 'myVisa',
meta: {title: 'My visa'}
},
{
path: 'mySms',
component: () => import('@/viewsPc/center/mySms'),
name: 'mySms',
......
src/viewsPc/about/wudao.vue
......@@ -76,7 +76,7 @@ const contact = ref([
{name:'电话',ename:'Phone',value:'武先生：15606190026',evalue:'Mr.WU:15606190026'},
{name:'地址',ename:'Address',value:'江苏省 无锡市太湖新城和风路与清舒交叉口东北100米',
evalue:'No.88 Qingshu Road,Economic Development District, Wuxi City,Jiangsu Province,China'},
{name:'邮箱',ename:'Email',value:'info@wdsfwuxicenter.com',evalue:'info@wdsfwuxicenter.com'},
{name:'邮箱',ename:'Email',value:'office@2025wtcwuxi.com',evalue:'office@2025wtcwuxi.com'},
])
onMounted(()=>{
......
src/viewsPc/booking/hotel.vue
<template>
<div>
<div class="banner">
<img v-if="language==0" src="@/assets/booking/jd_text_c.png">
<img v-else src="@/assets/booking/jd_text_e.png">
</div>
<div class="box">
<div class="searchBar">
<el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language==0?'搜索':'Search' }}</el-button>
<div>
<div class="banner">
<img v-if="language==0" src="@/assets/booking/jd_text_c.png">
<img v-else src="@/assets/booking/jd_text_e.png">
</div>
<div class="box">
<div class="searchBar">
<el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language == 0 ? '搜索' : 'Search' }}
</el-button>
</div>
</div>
</div>
<div class="box" v-loading="loading">
<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-card @click="goDetail(h)">
<!-- 酒店列表-->
<el-row class="hotel" align="middle" :gutter="20">
<el-col :lg="6" :md="6">
<div class="imgbox">
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
</div>
</el-col>
<el-col :lg="12" :md="12">
<h3 class="esp">{{h.name}}</h3>
<div class="starBox">
<img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
</div>
<div class="tagbox esp">
<span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
<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"><LocationFilled /></el-icon>
{{h.address}}
</p>
</el-col>
<el-col :lg="4" :md="4" class="text-right">
<div class="price">{{ language==0?'¥':'$' }}<span>{{ h.price }}</span>
<i v-if="language==0">起</i>
</div>
<el-button class="w200px blackBtn" round type="primary" >{{ language==0?'立即预订':'Select' }} ⇀</el-button>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
<div style="height: 50px"></div>
</div>
<div class="box" v-loading="loading">
<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-card @click="goDetail(h)">
<!-- 酒店列表-->
<el-row class="hotel" align="middle" :gutter="20">
<el-col :lg="6" :md="6">
<div class="imgbox">
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
</div>
</el-col>
<el-col :lg="12" :md="12">
<h3 class="esp">{{ h.name }}</h3>
<div class="starBox">
<img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
</div>
<div class="tagbox esp">
<span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{ t }}</span>
<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">
<LocationFilled/>
</el-icon>
{{ h.address }}
</p>
</el-col>
<el-col :lg="4" :md="4" class="text-right">
<div class="price">{{ language == 0 ? '¥' : '$' }}<span>{{ h.price }}</span>
<i v-if="language==0">起</i>
</div>
<el-button class="w200px blackBtn" round type="primary">{{ language == 0 ? '立即预订' : 'Select' }} ⇀
</el-button>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/>
<div style="height: 50px"></div>
</div>
</div>
</div>
</template>
<script setup>
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
import {useRouter,useRoute} from "vue-router";
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";
const router = useRouter()
const route = useRoute()
const user = useUserStore().user
const useStore = useUserStore
const language= useStorage('language',0)
const query = ref({
name:''
})
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(()=>{
query.value.activityId = route.params.cptId
getList()
})
import * as booking from "@/apiPc/booking"
import {useRouter, useRoute} from "vue-router";
import {useStorage} from "@vueuse/core";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";
import {useRouteQuery} from '@vueuse/router'
import {onMounted} from "vue";
function getList() {
loading.value = true
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
loading.value = false
console.log(list.value)
const router = useRouter()
const route = useRoute()
}).catch(e=>{
loading.value = false
})
const useStore = useUserStore()
const user = useStore.user
const flag = useRouteQuery('flag')
const language = useStorage('language', 0)
const query = ref({
name: ''
})
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(() => {
query.value.activityId = route.params.cptId
getList()
})
function getList() {
loading.value = true
booking.getHotelList(Object.assign({
meeting: flag.value,
},query.value)).then(res => {
list.value = res.rows
loading.value = false
console.log(list.value)
}).catch(e => {
loading.value = false
})
}
function goDetail(item) {
if (!user) {
useStore.setVisitor()
return
}
function goDetail(item) {
if(!user){
useStore().setVisitor()
return
}
if(item.meeting=='1'){
ElMessageBox.confirm( item.meetText,'',{
cancelButtonText: language.value==1?'Close ':'关闭',
confirmButtonText: language.value==1?'Continue to book':'继续预订',
type: 'warning',
}).then((res) => {
router.push({
name:'hotelDetail',
params:{
hotelId:item.hotelId,
},
query:{
id:item.id
}
})
})
} else {
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,
name: 'hotelDetail',
params: {
hotelId: item.hotelId,
},
query:{
id:item.id
query: {
id: item.id
}
})
}
})
} else {
router.push({
name: 'hotelDetail',
params: {
hotelId: item.hotelId,
},
query: {
id: item.id
}
})
}
}
</script>
<style scoped lang="scss">
.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;}
.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;
}
.blackBtn{background: #000;border: #000;}
}
.banner{height: 140px;background-size: cover;text-align: center;
background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
justify-content: center;
img{display: block;margin:-30px auto 0;width: auto;}
}
.searchBar{position: relative;top: -30px;
background: #FFFFFF;display: flex;padding: 20px;
border-radius: 10px;}
.no-border{border: none;background: #F5F7F9;
:deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
}
.imgbox {width: 100%;height: 100%;position: relative;
img{width: 100%;height: 100%;}
.starBox{position: absolute;bottom: 0;right: 0;background: rgba(0,0,0,0.4);padding: 10px 15px 3px;}
}
.po-r-b{}
.starBox{
border-radius: 14px 0 0 0;
img{display: inline-block;margin-right: 4px;width: 24px;}
}
.tagbox{margin: 10px 0;
a{color: #AFB5B9;font-size: 12px;}
span{border-radius: 13px;font-size: 12px;padding: 3px 10px;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);}
}
@media screen and (max-width: 768px) {
.hotel h3{margin: 20px 0 10px; font-size: 18px;}
i {
font-style: normal;
color: #929AA0;
}
}
.blackBtn {
background: #000;
border: #000;
}
}
.banner {
height: 140px;
background-size: cover;
text-align: center;
background: url("@/assets/booking/jd_bg.png") center;
display: flex;
align-items: center;
justify-content: center;
img {
display: block;
margin: -30px auto 0;
width: auto;
}
}
.searchBar {
position: relative;
top: -30px;
background: #FFFFFF;
display: flex;
padding: 20px;
border-radius: 10px;
}
.no-border {
border: none;
background: #F5F7F9;
:deep(.el-input__wrapper) {
border: none;
box-shadow: none;
background: #F5F7F9;
}
}
.imgbox {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
}
.starBox {
position: absolute;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
padding: 10px 15px 3px;
}
}
.po-r-b {
}
.starBox {
border-radius: 14px 0 0 0;
img {
display: inline-block;
margin-right: 4px;
width: 24px;
}
}
.tagbox {
margin: 10px 0;
a {
color: #AFB5B9;
font-size: 12px;
}
span {
border-radius: 13px;
font-size: 12px;
padding: 3px 10px;
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);
}
}
@media screen and (max-width: 768px) {
.hotel h3 {
margin: 20px 0 10px;
font-size: 18px;
}
}
</style>
......
src/viewsPc/booking/hotelDetail.vue
......@@ -92,6 +92,8 @@
<div v-if="labelObj.tv==1"><img src="@/assets/img/svg/tag18@2x.png"/>{{ language==0 ?'电视': 'tv' }}</div>
<div v-if="labelObj.hours==1"><img src="@/assets/img/svg/tag19@2x.png"/>{{ language==0 ?'24小时前台': '24Hours Available' }}</div>
<div v-if="labelObj.breakfast==1"><img src="@/assets/img/svg/tag20@2x.png"/>{{ language==0 ?'早餐': 'breakfast' }}</div>
<div v-if="labelObj.ntatorium==1"><img src="@/assets/img/svg/tag21@2x.png"/>{{ language==0 ?'泳池': 'ntatorium' }}</div>
<div v-if="labelObj.gymnasium==1"><img src="@/assets/img/svg/tag22@2x.png"/>{{ language==0 ?'健身房': 'gymnasium' }}</div>
</div>
</el-card>
......
src/viewsPc/center/index.vue
......@@ -47,7 +47,8 @@ import {onMounted} from '@vue/runtime-core'
import useUserStore from '@/store/modules/user'
import _ from 'lodash'
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const language = useStorage('language', 0)
const route = useRoute()
const router = useRouter()
......@@ -63,14 +64,14 @@ const menus3 = ref([
// isActive: false
// },
{
name: language.value==0?'修改密码':'Change Password',
name: language.value == 0 ? '修改密码' : 'Change Password',
routeName: 'myPassword',
picUrl1: '/img/nav_27.png',
picUrl2: '/img/nav_27_dwn.png',
isActive: false
},
{
name: language.value==0?'我的预订':'My Reservation',
name: language.value == 0 ? '我的预订' : 'My Reservation',
routeName: 'myReservation',
picUrl1: '/img/nav_29.png',
picUrl2: '/img/nav_29_dwn.png',
......@@ -84,7 +85,7 @@ const menus3 = ref([
// isActive: false
// },
{
name: language.value==0?'发票申请':'Electronic invoice',
name: language.value == 0 ? '发票申请' : 'Electronic invoice',
routeName: 'myKP',
picUrl1: '/img/fp.svg',
picUrl2: '/img/fp_dwn.svg',
......@@ -100,19 +101,26 @@ const menus3En = ref([
// isActive: false
// },
{
name: language.value==0?'修改密码':'Change Password',
name: language.value == 0 ? '修改密码' : 'Change Password',
routeName: 'myPassword',
picUrl1: '/img/nav_27.png',
picUrl2: '/img/nav_27_dwn.png',
isActive: false
},
{
name: language.value==0?'我的预订':'My Reservation',
name: language.value == 0 ? '我的预订' : 'My Reservation',
routeName: 'myReservation',
picUrl1: '/img/nav_29.png',
picUrl2: '/img/nav_29_dwn.png',
isActive: false
},
{
name: language.value == 0 ? '签证审核记录' : 'Visa Review record',
routeName: 'myVisa',
picUrl1: '/img/fp.svg',
picUrl2: '/img/fp_dwn.svg',
isActive: false
},
// {
// name: language.value==0?'票务预订':'Ticket Reservation',
// routeName: 'seat_order',
......@@ -125,18 +133,19 @@ const menus3En = ref([
let currMenu
onMounted(() => {
console.log(route.query)
if(!user.utype){
if (!user.utype) {
router.push({name: 'home'})
return
}
currMenu = _.find(menus3.value, (m) => {
return m.routeName === route.name
})
currMenu.isActive = true
currMenu = _.find((language.value == 0? menus3.value: menus3En.value), (m) => {
return m.routeName === route.name
})
currMenu.isActive = true
})
const toInfo = (item,list) => {
const toInfo = (item, list) => {
_.each(list, (m) => {
m.isActive = false
})
......@@ -159,11 +168,23 @@ const toInfo = (item,list) => {
li {
margin-bottom: 15px;
}
&.en-menu{text-align: left;
li{padding: 6px 0 6px 14px;
a{display: flex;align-items: center;}
&.en-menu {
text-align: left;
li {
padding: 6px 0 6px 14px;
a {
display: flex;
align-items: center;
}
}
img {
padding: 0;
width: 26px;
}
img{padding: 0;width: 26px;}
}
}
......@@ -179,24 +200,61 @@ li img {
background: #000;
border-radius: 20px;
}
@media (max-width: 500px) {
.pd20{padding: 8px;}
.el-card{box-shadow: none!important;
:deep(.el-card__body){padding: 0!important;}
.pd20 {
padding: 8px;
}
.el-card {
box-shadow: none !important;
:deep(.el-card__body) {
padding: 0 !important;
}
}
.el-col {
padding: 0 !important;
}
.el-col{padding: 0!important;}
.center-menu{height: 100vh;padding: 20px 0;position: fixed;left: 0;z-index: 1;
background: #F5F7F9;top: 80px;width: 100px;border-right: 1px solid #eee;
li{font-size: 13px;padding:8px 10px;border-radius: 0;
img{display: none}
&.active{background: #fff;
.center-menu {
height: 100vh;
padding: 20px 0;
position: fixed;
left: 0;
z-index: 1;
background: #F5F7F9;
top: 80px;
width: 100px;
border-right: 1px solid #eee;
li {
font-size: 13px;
padding: 8px 10px;
border-radius: 0;
img {
display: none
}
&.active {
background: #fff;
border-left: 2px solid var(--el-color-primary);
color: var(--el-color-primary);}
color: var(--el-color-primary);
}
}
}
.rightPart{width: calc(100vw - 100px);left: 100px;position: fixed; z-index: 1;
height: calc(100vh - 80px);overflow: auto;top: 80px;background: #fff;
.rightPart {
width: calc(100vw - 100px);
left: 100px;
position: fixed;
z-index: 1;
height: calc(100vh - 80px);
overflow: auto;
top: 80px;
background: #fff;
}
}
.app-container{min-height: 80vh;}
.app-container {
min-height: 80vh;
}
</style>
......
src/viewsPc/center/myVisa.vue 0 → 100644
<template>
<div>
<el-card :body-style="{'padding':'0'}">
<div class="indexTitle">
<h3 class="leftboderTT">{{ language == 0 ? '我的签证' : 'My visa' }}
</h3>
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'发票开具':'Invoice' }}</el-button>-->
<!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>-->
</div>
<el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228"/>
<div class="pd20">
<div v-for="b in list" class="item">
<div class="title">
<label class="orangeTag"> {{ b.applicatTypeName }} </label>
<span>{{ language == 0 ? '订单编号：' : 'No.' }} {{ b.id }}</span>
</div>
<div class="status-po">
<span v-if="b.status == '0'" class="bg-gary">{{ 'Under Review' }}</span>
<span v-if="b.status == '1'" class="bg-blue">{{ 'Approved' }}</span>
<span v-if="b.status == '2'" class="bg-danger">{{ 'Rejected' }}</span>
</div>
<el-row align="middle" class="pd20 mt10" justify="space-between">
<el-col :lg="9" :md="12" :sm="12" :xs="24">
<div>
<h3 class="name">{{ b.fullName }}</h3>
<p>{{ b.email }}</p>
<p>{{ b.createTime }}</p>
</div>
</el-col>
<el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
<span class="text-warning"> {{ b.invitationTypeName }} </span>
</el-col>
<el-col :lg="6" :md="16" :sm="16" :xs="16">
<div class="text-right">
<el-button class="mb10" :disabled="b.emailFlag!='1'" plain round size="small" type="primary"
@click="handleDownload(b)">
{{ language == 0 ? '下载邀请函' : 'Download Invitation' }}
</el-button>
<el-button class="mb10" plain round size="small" type="primary" @click="goDetail(b)">
{{ language == 0 ? '详情' : 'Detail' }}
</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
</el-card>
<affix-invitation-view ref="affixInvitationRef"></affix-invitation-view>
</div>
</template>
<script setup>
import {onMounted, getCurrentInstance} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
// import {newbilllist} from "@/apiPc/common";
import useUserStore from "@/store/modules/user";
// import dayjs from 'dayjs'
import {cancelOrder2, cancelOrder} from "/@/apiPc/booking";
import {ElMessage} from "element-plus";
import {downInvite, getUplaodFile, getVisaInfo} from "/@/apiPc/match";
import AffixInvitationView from "/@/viewsPc/match/components/affix-invitation-view.vue";
import {ref} from "vue";
import {useRouter} from "vue-router";
import {fillImgUrl} from "/@/utils/ruoyi";
const router = useRouter()
const language = useStorage('language', 0)
const list = ref([])
const user = useUserStore().user
const {proxy} = getCurrentInstance()
const affixInvitationRef = ref(null)
onMounted(() => {
getList()
})
function finish(bill) {
bill.status = '2'
// getList()
}
function getList() {
getVisaInfo({userId: user.userId}).then(res => {
list.value = res.rows || []
})
}
function goDetail(b) {
affixInvitationRef.value.open(b)
// router.push({
// name: 'bookingPay',
// query: {
// orderId: b.id,
// orderType: b.orderType
// }
// })
}
function handleDownload(b) {
getUplaodFile({id: b.id}).then(res => {
window.open(fillImgUrl(res.msg), '_blank')
})
}
function Rebook(row) {
console.log(row)
if (row.orderType == 0) {
router.push({
name: 'hotelDetail',
params: {
cptId: row.activeId,
hotelId: row.hotelId
},
query: {
id: row.extId
}
})
} else {
router.push({
name: 'ticket',
params: {
activeId: row.activeId,
}
})
}
}
const cancel = (row) => {
//取消订单
proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' : `Are you sure to cancel the order?`).then(() => {
return cancelOrder2(row.id).then(res => {
getList()
ElMessage({
message: language.value == 0 ? '操作成功' : 'Successful operation!',
type: 'success'
})
})
})
}
const unsubscribe = (row) => {
proxy.$modal.confirm(language.value == 0 ? `确定退款吗 ?` : 'Are you sure to refund?').then(() => {
return cancelOrder(row.id).then(res => {
getList()
ElMessage({
message: language.value == 0 ? '已提交退款，请等待审核!' : 'Refund has been submitted, please wait for review!',
type: 'success'
})
})
})
}
function toInvoice() {
router.push({
name: 'invoice'
})
}
</script>
<style lang="scss" scoped>
.bigMoney {
font-size: 24px;
font-family: "DIN Alternate";
}
.name {
font-size: 18px;
margin: 0;
}
.status-po {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
color: #FFFFFF;
span {
border-radius: 0px 10px 0px 10px;
padding: 4px 10px;
}
.bg-danger {
background: #E60012;
}
.bg-warning {
background: #e89f39;
}
.bg-pink {
background: #F740A6;
}
.bg-primary {
background: var(--el-color-primary)
}
.bg-blue {
background: #00a0e9
}
}
.indexTitle {
margin: 20px 0 12px;
overflow: visible;
padding: 0 20px 15px;
border-bottom: 1px solid #e5e5e5;
.fr {
margin: -8px 0 0
}
h3 {
display: inline-block;
font-size: 16px;
color: var(--el-color-primary);
}
}
.item {
.name {
font-size: 18px;
color: #000000;
margin: 0 0 10px;
}
p {
margin: 8px 0 0;
color: #707070;
font-size: 14px;
}
margin: 0 0 20px;
border: 1px solid #E5E5E5;
border-radius: 10px;
position: relative;
.bbody {
padding: 0 15px 20px;
}
.title {
background: #F7F7F7;
border-bottom: 1px solid #E5E5E5;
span {
font-size: 14px;
color: #4C5359;
}
}
.title label {
border-radius: 5px 0 5px 0;
font-size: 12px;
color: #fff;
padding: 4px 10px;
margin-right: 10px;
}
.blueTag {
background-color: #1EC886;
}
.purpleTag {
background-color: #717bef;
}
.orangeTag {
background-color: #ff8124;
}
}
.billFoot {
.price {
width: 100%;
justify-content: space-between;
}
}
.billFoot .tip {
font-size: 24px;
color: #999;
font-weight: 500;
margin: 0 20px;
}
.status {
position: absolute;
right: 10px;
bottom: 60px;
white-space: nowrap;
.warning {
color: #ff8124;
}
.danger {
color: #da2a2a;
}
.gary {
color: #666;
}
.success {
color: #1EC886;
}
}
</style>
src/viewsPc/components/homeQuick.vue
<template>
<div v-if="language === 0" class="itemBox">
<div class="itemBox" v-if="language === 0">
<el-row :gutter="20">
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">签证服务</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">酒店预订</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">票务服务</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :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 v-else class="itemBox_en">
<div class="itemBox_en" v-else>
<el-row :gutter="20" justify="space-around">
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">Visa Services</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :xs="12">
<div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">TICKET SERVICES</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<el-col :sm="12" :lg="4" :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>-->
......@@ -73,6 +73,8 @@ import {getBaseInfoByActiveId} from "@/apiPc/booking";
import * as match from "@/apiPc/match";
import useUserStore from "@/store/modules/user";
const emit = defineEmits(['pickUp'])
const props = defineProps({
matchId: {
type: String,
......@@ -94,12 +96,11 @@ watch(matchId, (val) => {
if (val && val != '0') {
getBaseInfoByActiveId(props.matchId).then(res => {
form.value = res.data || null
console.log(form.value)
}).catch(err => {
console.log(err)
form.value = null
})
match.getInfoByCptId({cptId: props.matchId}).then((res) => {
liveData.value = res.data || {}
})
......@@ -108,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)
......@@ -134,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() {
......@@ -148,19 +149,18 @@ function applyInvitation() {
const user = useUserStore().user
function goMedia() {
proxy.$modal.msgWarning(language.value == 0 ? '暂未开放' : 'Not yet open')
return;
//如果没登录
if (form.value.isMedia == 0) {
building()
return
}
if (!user) {
ElMessage({
type: 'warning',
message: language.value == 0 ? '请先登录' : 'Please log in first',
message: language.value == 0 ? '请先登录' : 'Please login first',
})
return
}
proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value})
}
......@@ -169,42 +169,45 @@ 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;
// 签证
if (language.value === 0) {
ElMessage.warning('请切换英文页面办理')
return
} else {
if (form.value.isVisa == 0) {
building()
return
}
if (!user) {
ElMessage({
type: 'warning',
message: language.value == 0 ? '请先登录' : 'Please log in first',
message: language.value == 0 ? '请先登录' : 'Please login first',
})
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',
......@@ -214,11 +217,11 @@ function popRemark(type) {
proxy.$refs['orderRemarkRef'].open(params)
}
function goBooking(n) {
function goBooking(n, f) {
switch (n) {
case 10:
// 票务
// router.push({
// path: `/booking/ticket/${props.matchId}`,
// params: {id:props.matchId},
......@@ -227,7 +230,7 @@ function goBooking(n) {
break;
case 1:
//酒店
router.push({path: `/booking/hotel/${props.matchId}`})
router.push({path: `/booking/hotel/${props.matchId}`, query: {flag: f}})
break;
case 2:
//车辆
......@@ -249,7 +252,7 @@ function goBooking(n) {
}
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
.itemBox, .itemBox_en {
padding: 20px;
background: #fff;
......@@ -273,7 +276,7 @@ function goBooking(n) {
background-size: 100% 100%;
border-radius: 15px;
gap: 10px;
img {
object-fit: contain;
width: 75px;
......@@ -286,19 +289,19 @@ function goBooking(n) {
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;
}
......@@ -314,7 +317,7 @@ function goBooking(n) {
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" width="400px" @close="close">
<el-dialog :title="title" v-model="show" @close="close">
<div>
<h2 class="text-warning text-center" v-if="cptName">{{cptName}}</h2>
......@@ -9,6 +9,15 @@
<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">
......@@ -31,6 +40,8 @@ const title = ref('')
const cptName = ref('')
const show = ref(false)
const form = ref({})
const hotelType= ref('1')
let matchId = ''
let type = ''
const open = (params) => {
......@@ -64,7 +75,7 @@ function ok() {
// if(!user){
// useUserStore().setVisitor()
// } else {
emit('submit', type)
emit('submit', type, hotelType.value)
// }
}
</script>
......
src/viewsPc/components/pickup.vue
......@@ -22,15 +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 :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"
......@@ -97,23 +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>
<!-- <el-input v-model="form.downOffBo.standing"/>-->
<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-->
<!-- :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"
......@@ -181,6 +198,13 @@
: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">
......
src/viewsPc/index.vue
<template>
<div class="syBg">
<div class="banner">
<el-carousel :autoplay="false" :interval="2000" arrow="hover" autoplay class="forPc" height="450px"
<el-carousel class="forPc" autoplay :interval="2000" height="450px" :autoplay="false" arrow="hover"
@change="carouselChange">
<el-carousel-item v-for="n in maList" :key="n.id" style="height: 450px;">
<el-carousel-item style="height: 450px;" v-for="n in maList" :key="n.id">
<div class="bannerItem">
<div class="h100" @click.stop="goMatch(n)">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<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 v-if="currentDateTime < liveData.videoStart&&form.isLiveVideo==1" class="banner-count"
@click.stop="goliveUrl">
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click.stop="goliveUrl">
距离直播开始
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
......@@ -43,34 +42,33 @@
</div>
<!--如果有直播-->
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count bb">直播进行中
<div class="banner-count bb"
v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">直播进行中
</div>
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count bb">直播已结束</div>
<div class="banner-count bb" v-if="currentDateTime > liveData.videoEnd">直播已结束</div>
<!-- <div class="banner-count bb" v-if="currentDateTime < liveData.videoStart">直播即将开始</div>-->
</div>
<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 v-if="liveData&& liveData.picStatus==1" @click.stop="gopicliveUrl">
<div class="picliveBtn" v-if="(currentDateTime>liveData.picStart)&&(currentDateTime<liveData.picEnd)">
图片直播中
</div>
<div v-if="currentDateTime > liveData.picEnd" class="picliveBtn">图片直播</div>
<div v-if="currentDateTime < liveData.picStart" class="picliveBtn">图片直播</div>
<div class="picliveBtn" v-if="currentDateTime > liveData.picEnd">图片直播</div>
<div class="picliveBtn" v-if="currentDateTime < liveData.picStart">图片直播</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
<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;">
<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">
<div class="bannerItem" style="height:100%">
<div class="h100" style="position: relative">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
<!-- <img class="slogen" src="@/assets/logo/banner-text.png"/>-->
<div v-if="currentDateTime < liveData.videoStart" class="banner-count" @click="goliveUrl">
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click="goliveUrl">
距离直播开始
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
......@@ -93,10 +91,10 @@
</van-count-down>
</div>
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count">直播进行中
<div class="banner-count"
v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">直播进行中
</div>
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count">直播已结束</div>
<div class="banner-count" v-if="currentDateTime > liveData.videoEnd">直播已结束</div>
</div>
</div>
</div>
......@@ -104,18 +102,18 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="mb30">
<home-weather-bar/>
</div>
<div class="box">
<HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id"/>
<HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name" @pick-up="handlePickup"/>
</div>
<div id="part0" class="box part">
<el-row :gutter="20">
<el-col :lg="12" :sm="24">
<el-col :sm="24" :lg="12">
<div class="indexTitle">
<h3 class="leftboderTT">通知公告</h3>
<a class="more" href="#/notice">MORE</a>
......@@ -127,7 +125,7 @@
</div>
</el-card>
</el-col>
<el-col :lg="12" :sm="24">
<el-col :sm="24" :lg="12">
<div class="indexTitle">
<h3 class="leftboderTT">竞赛日程</h3>
<a class="more" href="#/saiC">MORE</a>
......@@ -137,12 +135,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>
......@@ -150,9 +148,9 @@
</div>
<el-row :gutter="20">
<el-col
v-for="(n,index) in newest2"
:key="n.id" :lg="8" :sm="8"
:xs="24"
v-for="(n,index) in newest2"
:key="n.id" :xs="24" :sm="8"
:lg="8"
>
<div class="activeItem" @click="goDetail(n)">
<div class="imgbox">
......@@ -215,9 +213,9 @@
<el-col :lg="16">
<div class="swiperPic">
<swiper
:autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
:slides-per-view="3"
:space-between="20" class="swiper-wrapper"
class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20"
:navigation="navigationPic"
:autoplay="true" :loop="true"
>
<swiper-slide v-for="(n,i) in picList" :key="i">
<div class="picbox" @click="goDetail(n)">
......@@ -231,7 +229,7 @@
</el-col>
</el-row>
<el-row class="news-l-r">
<el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
<el-col v-for="(n,index) in livelist" :lg="8" v-show="index>0">
<div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)">
<div class="imgbox">
<i class="playIcon"></i>
......@@ -249,7 +247,7 @@
</el-card>
</div>
</div>
<div class="box">
<el-row :gutter="20">
<el-col :lg="12">
......@@ -263,9 +261,9 @@
</div>
<div class="mt30 text-center">
<a class="btn-black" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img
src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px"/></a>
style="filter: brightness(2);height: 8px" src="@/assets/v1/more.png"/></a>
</div>
</div>
</el-col>
<el-col :lg="12">
......@@ -285,20 +283,20 @@
</div>
<div class="email">
<h4>邮箱</h4>
<p>info@wdsfwuxicenter.com</p>
<p>office@2025wtcwuxi.com</p>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="box">
<div class="indexTitle">
<h3 class="leftboderTT">合作伙伴</h3>
</div>
<el-row :gutter="20">
<el-col v-for="p in partners" :lg="6" :sm="6" :xs="12">
<el-col :lg="6" :sm="6" :xs="12" v-for="p in partners">
<div class="logobox">
<img :src="fillImgUrl(JSON.parse(p.picUrl))">
</div>
......@@ -321,10 +319,8 @@ import {Autoplay, Navigation} from 'swiper'
import 'swiper/css'
import {dayjs, ElMessage} from 'element-plus'
import * as match from "@/apiPc/match";
// import {getAboutUs, getInfoByCptId, getppInfo, getZNList} 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({
......@@ -356,7 +352,6 @@ const partners = ref([])
const liveData = ref({})
const aboutUsContent = ref('')
const liveStartTime = ref(0)
const form = ref({})
onMounted(() => {
init()
......@@ -364,44 +359,38 @@ onMounted(() => {
const init = () => {
var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
time.value = dayjs('2025-07-17 07:00:00').diff(today, 'millisecond')
etime.value = dayjs('2025-07-22 12:00:00').diff(today, 'millisecond')
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) {
......@@ -419,9 +408,8 @@ const init = () => {
}
matchData.value = maList.value[0]
getMatchInfo(matchData.value.id)
getMatchSet(matchData.value.id)
})
match.getLabelList().then(res => {
tabList.value = res.data
})
......@@ -526,22 +514,28 @@ const handlePickup = () => {
}
const goliveUrl = () => {
if (liveData.value.videoStatus == "1") {
window.open(liveData.value.videoUrlCn)
} else {
ElMessage.warning('暂无直播')
}
ElMessage.warning('暂未开放')
// if (liveData.value.videoStatus == "1") {
// window.open(liveData.value.videoUrlCn)
// } else {
// ElMessage.warning('暂无直播')
// }
}
const gopicliveUrl = () => {
proxy.$modal.msgWarning('暂未开放')
return
if (liveData.value.picStatus == "1") {
window.open(liveData.value.picUrlCn)
} else {
ElMessage.warning('暂无直播')
}
}
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
.syBg {
background: url("@/assets/dance/logo_l.png") no-repeat bottom left,
url("@/assets/dance/logo_r1.png") no-repeat bottom right;
......@@ -552,7 +546,7 @@ const gopicliveUrl = () => {
position: absolute;
bottom: 60px;
gap: 10px;
div {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
......@@ -561,7 +555,7 @@ const gopicliveUrl = () => {
border-radius: 50px;
padding: 6px 20px;
}
div:hover {
cursor: pointer;
background: #fff;
......@@ -580,18 +574,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;
......@@ -601,8 +595,8 @@ const gopicliveUrl = () => {
display: inline-flex;
align-items: center;
}
}
.app-main {
......@@ -619,12 +613,12 @@ const gopicliveUrl = () => {
height: 450px;
background: #000;
position: relative;
.slogen {
position: relative;
top: 130px;
}
.picliveBtn {
position: absolute;
cursor: pointer;
......@@ -636,7 +630,7 @@ const gopicliveUrl = () => {
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50px;
}
.banner-count {
cursor: pointer;
position: absolute;
......@@ -651,7 +645,7 @@ const gopicliveUrl = () => {
flex-wrap: nowrap;
right: 5%;
color: #fff;
.van-count-down {
display: flex;
color: #fff;
......@@ -659,7 +653,7 @@ const gopicliveUrl = () => {
width: 360px;
font-size: 41px;
}
.block {
color: #fff;
text-align: center;
......@@ -667,7 +661,7 @@ const gopicliveUrl = () => {
font-size: 41px;
font-family: DIN Alternate;
}
.colon {
color: #fff;
display: block;
......@@ -675,27 +669,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;
......@@ -704,7 +698,7 @@ const gopicliveUrl = () => {
bottom: 50px;
font-size: 3vw;
}
video {
width: 100%;
height: 100%;
......@@ -719,26 +713,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;
......@@ -759,7 +753,7 @@ const gopicliveUrl = () => {
.ggbond {
height: 230px;
position: relative;
img {
height: 100%;
object-fit: cover;
......@@ -777,17 +771,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;
......@@ -800,7 +794,7 @@ const gopicliveUrl = () => {
width: 100%;
bottom: 30px;
}
p {
text-align: center;
margin: 25px 0 0;
......@@ -811,7 +805,7 @@ const gopicliveUrl = () => {
@media screen and (max-width: 1650px) {
.teacher {
height: 320px;
.imgbox {
img {
height: 260px
......@@ -824,7 +818,7 @@ const gopicliveUrl = () => {
.teacher {
height: 450px;
margin: 0 0 20px;
.imgbox {
img {
height: 390px
......@@ -837,7 +831,7 @@ const gopicliveUrl = () => {
.teacher {
height: 400px;
margin: 0 0 20px;
.imgbox {
img {
height: 340px
......@@ -850,7 +844,7 @@ const gopicliveUrl = () => {
.teacher {
height: 400px;
margin: 0 0 20px;
.imgbox {
img {
height: 260px
......@@ -865,7 +859,7 @@ const gopicliveUrl = () => {
background-size: cover;
padding: 40px 60px;
position: relative;
.content {
font-size: 18px;
line-height: 2.2;
......@@ -874,7 +868,7 @@ const gopicliveUrl = () => {
text-align: left;
text-indent: 2em;
}
.shadowbox {
position: absolute;
left: 0;
......@@ -883,7 +877,7 @@ const gopicliveUrl = () => {
width: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.btn-lineG {
}
}
......@@ -895,7 +889,7 @@ const gopicliveUrl = () => {
padding: 1px;
position: relative;
display: flex;
.content {
background: #fff;
width: 60%;
......@@ -907,33 +901,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;
}
......@@ -944,7 +938,7 @@ const gopicliveUrl = () => {
height: 180px;
border-radius: 10px;
margin: 0 0 30px;
img {
width: 100%;
height: 100%;
......@@ -957,7 +951,7 @@ const gopicliveUrl = () => {
position: relative;
height: 100%;
padding: 20px 45px;
.picprev {
position: absolute;
left: 5px;
......@@ -966,12 +960,12 @@ const gopicliveUrl = () => {
margin: auto;
height: 33px;
cursor: pointer;
&:hover {
filter: brightness(2)
}
}
.picnext {
position: absolute;
right: 5px;
......@@ -980,7 +974,7 @@ const gopicliveUrl = () => {
margin: auto;
height: 33px;
cursor: pointer;
&:hover {
filter: brightness(2)
}
......@@ -991,7 +985,7 @@ const gopicliveUrl = () => {
.teacher {
height: 460px;
margin: 0 0 20px;
img {
height: 400px
}
......@@ -1002,11 +996,11 @@ const gopicliveUrl = () => {
.box {
width: 94%
}
.calendarList {
padding: 0;
ul {
li {
margin: 10px
......@@ -1022,7 +1016,7 @@ const gopicliveUrl = () => {
.teacher {
height: 320px;
margin: 0 0 20px;
img {
height: 260px
}
......@@ -1034,17 +1028,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;
......@@ -1059,19 +1053,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
}
......@@ -1084,7 +1078,7 @@ const gopicliveUrl = () => {
z-index: 2;
background: #F04035;
padding: 2px 4px;
&::after {
content: '';
width: 0;
......@@ -1095,12 +1089,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;
......@@ -1116,7 +1110,7 @@ const gopicliveUrl = () => {
height: 56px;
justify-content: space-between;
cursor: pointer;
h3 {
font-weight: 400;
margin: 0;
......@@ -1127,13 +1121,13 @@ const gopicliveUrl = () => {
font-size: 18px;
color: #030303;
}
span {
font-weight: 400;
font-size: 14px;
color: #B4B6B8;
}
&:hover {
background: #F7F8FC;
}
......@@ -1148,12 +1142,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 :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;">
<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">
<div class="bannerItem">
<div class="h100" @click.stop="goMatch(n)">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<div class="h100" @click.stop="goMatch(n)">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<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 v-if="currentDateTime < liveData.videoStart&&form.isLiveVideo==1" class="banner-count"
@click.stop="goliveUrl">
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @click.stop="goliveUrl">
Live Countdown
<van-count-down :time="liveStartTime" format="DD 天 HH 时 mm 分 ss 秒">
<template #default="timeData">
......@@ -36,13 +34,12 @@
</template>
</van-count-down>
</div>
<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">
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div class="banner-count" v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">
Live Now
</div>
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count">
<div class="banner-count" v-if="currentDateTime > liveData.videoEnd">
Live End
</div>
</div>
......@@ -51,40 +48,36 @@
</div>
</el-carousel-item>
</el-carousel>
<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;">
<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">
<div class="bannerItem" style="height:100%">
<div class="h100" style="position: relative">
<img :src="fillImgUrl(n.bgImgUrl)" class="bannerImg">
<img class="bannerImg" :src="fillImgUrl(n.bgImgUrl)">
<div style="position: absolute;left: 0;right: 0;bottom: 0;margin: auto;">
<div v-if="currentDateTime < liveData.videoStart" class="banner-count" @click="goliveUrl">
<div class="banner-count" v-if="currentDateTime < liveData.videoStart" @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&&form.isLivePic==1" @click.stop="goliveUrl">
<div v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)"
class="banner-count">
<div v-if="liveData&& liveData.videoStatus==1" @click.stop="goliveUrl">
<div class="banner-count" v-if="(currentDateTime>liveData.videoStart)&&(currentDateTime<liveData.videoEnd)">
Live Now
</div>
<div v-if="currentDateTime > liveData.videoEnd" class="banner-count">
<div class="banner-count" v-if="currentDateTime > liveData.videoEnd">
Live End
</div>
</div>
......@@ -94,19 +87,19 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="mb30">
<home-weather-bar :lang="1"/>
</div>
<div class="box">
<HomeQuick :cpt-name="matchData?.name" :match-id="matchData?.id"/>
<HomeQuick :match-id="matchData?.id" :cpt-name="matchData?.name" @pick-up="handlePickup"/>
</div>
<div id="part0" class="box part">
<el-row :gutter="20">
<el-col :lg="12" :sm="24">
<el-col :sm="24" :lg="12">
<div class="indexTitle">
<h3 class="leftboderTT">NOTICEBOARD</h3>
<a class="more" href="#/notice">MORE</a>
......@@ -114,11 +107,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 :lg="12" :sm="24">
<el-col :sm="24" :lg="12">
<div class="indexTitle">
<h3 class="leftboderTT">COMPETITION SCHEDULE</h3>
<a class="more" @click="gosaiC">MORE</a>
......@@ -128,12 +121,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>
......@@ -142,20 +135,20 @@
<el-row :gutter="20">
<el-col
v-for="(n,index) in newest2"
:key="n.id" :lg="8" :sm="8"
:xs="24"
:key="n.id" :xs="24" :sm="8"
:lg="8"
>
<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>
......@@ -183,14 +176,14 @@
</a>
</el-col>
<el-col :lg="16">
<div class="swiperPic forPx">
<swiper
:autoplay="true" :loop="true" :modules="modules" :navigation="navigationPic"
:slides-per-view="3"
:space-between="20" class="swiper-wrapper"
class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20"
:navigation="navigationPic"
:autoplay="true" :loop="true"
>
<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>
......@@ -199,30 +192,29 @@
<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">
......@@ -230,8 +222,8 @@
</div>
<el-row :gutter="20">
<el-col
v-for="n in personList" :key="n.name" :lg="4" :sm="8" :xl="4"
:xs="12"
v-for="n in personList" :key="n.name" :sm="8" :xl="4" :xs="12"
:lg="4"
>
<div class="teacher">
<div class="imgbox"><img :src="n.src"></div>
......@@ -242,7 +234,7 @@
</el-row>
</div>
</div>
<div class="box">
<el-row :gutter="20">
<el-col :lg="12">
......@@ -253,19 +245,18 @@
<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 src="@/assets/v1/more.png" style="filter: brightness(2);height: 8px;margin-left: 10px"></a>
<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>
</div>
</div>
</el-col>
<el-col :lg="12">
<div class="indexTitle">
<h3 class="leftboderTT">CONTACT US</h3>
<a class="more" href="#/about/wuDao" style="filter: brightness(10)">MORE</a>
<a class="more" style="filter: brightness(10)" href="#/about/wuDao">MORE</a>
</div>
<div class="mapBox">
<div class="content">
......@@ -279,40 +270,40 @@
</div>
<div class="email">
<h4>Email</h4>
<p>info@wdsfwuxicenter.com</p>
<p>office@2025wtcwuxi.com</p>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="box">
<div class="indexTitle">
<h3 class="leftboderTT">PARTNERS</h3>
</div>
<el-row :gutter="20">
<el-col v-for="p in partners" :lg="6" :sm="12" :xs="6">
<el-col :lg="6" :sm="12" :xs="6" v-for="p in partners">
<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";
......@@ -320,26 +311,24 @@ import HomeWeatherBar from "@/viewsPc/components/homeWeatherBar";
import {rankList} from '@/assets/js/data'
import {getBaseInfoByActiveId} from "/@/apiPc/booking";
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([])
......@@ -363,7 +352,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()
......@@ -371,68 +360,53 @@ 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 || {}
console.log(333333, liveData.value)
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
})
}
......@@ -485,48 +459,49 @@ 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 = () => {
if (liveData.value.videoStatus == "1") {
window.open(liveData.value.videoUrlCn)
} else {
ElMessage.warning('No live')
}
ElMessage.warning('This function is temporarily closed.' )
// if (liveData.value.videoStatus=="1") {
// window.open(liveData.value.videoUrlCn)
// } else {
// ElMessage.warning('No live' )
// }
}
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' )
}
}
......@@ -541,110 +516,46 @@ const goDetail = (n) => {
}
</script>
<style lang="scss" scoped>
.syBg {
<style scoped lang="scss">
.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;
}
div:hover {
cursor: pointer;
background: #fff;
color: #000;
border: 2px solid #fff;
.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;}
}
.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-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;
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}
}
}
......@@ -657,29 +568,14 @@ 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%;
......@@ -689,56 +585,29 @@ 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;
}
.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;
}
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;
}
.banner-count.bb:hover {
box-shadow: 0 0 20px #453DEA;
border-radius: 100px;
.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;
......@@ -747,7 +616,7 @@ const goDetail = (n) => {
bottom: 50px;
font-size: 3vw;
}
video {
width: 100%;
height: 100%;
......@@ -760,28 +629,27 @@ 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;
......@@ -789,121 +657,41 @@ 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::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
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:hover {
color: #fff;
li::after{content: ''; left: -16px;width: 1px;height: 100%;
background: #EBEBEB; position: absolute;top: 20px}
li:hover{color: #fff;
background: #000;
label {
color: #fff;
}
label{color: #fff;}
}
}
}
......@@ -917,7 +705,7 @@ const goDetail = (n) => {
.ggbond {
height: 230px;
position: relative;
img {
height: 100%;
object-fit: cover;
......@@ -929,336 +717,131 @@ 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));
}
.btn-lineG {
.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{}
}
.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;
.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;
}
.address {
background: url("@/assets/dance/map02.png") no-repeat left;
background-size: 30px;
margin: 50px 0;
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;
.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;
.aboutBox{padding: 20px 30px;}
.indexTitle{margin: 30px 0 20px}
.teacher{height: 320px;margin: 0 0 20px;
img{height: 260px}
}
.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;
}
.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;
......@@ -1267,7 +850,7 @@ const goDetail = (n) => {
//padding: 10px 20px;
//display: inline-flex;
//align-items: center;
padding: 20px 40px;
font-size: 20px;
align-items: center;
......@@ -1281,16 +864,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;
......@@ -1299,34 +882,16 @@ 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;
......@@ -1335,23 +900,13 @@ 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/components/affix-invitation-view.vue 0 → 100644
<template>
<el-dialog
v-model="show" title="Visa Invitation Letter" append-to-body close-icon="CircleClose" center
close-on-click-modal destroy-on-close width="1100"
>
<el-descriptions border>
<el-descriptions-item label="No.">{{ form.id }}</el-descriptions-item>
<el-descriptions-item label="Applicant Type">{{ form.remarks || form.applicatTypeName }}</el-descriptions-item>
<el-descriptions-item label="Invitation Type">{{ form.invitationTypeName }}</el-descriptions-item>
<el-descriptions-item label="Do you need a Chinese invitation？">{{
form.chinese == '1' ? 'YES' : 'No'
}}
</el-descriptions-item>
<el-descriptions-item label="MNA/Team Name">{{ form.nameEn }}</el-descriptions-item>
<el-descriptions-item label="MNA/Team Address">{{ form.associationAddress }}</el-descriptions-item>
<el-descriptions-item label="Contact Email">{{ form.email }}</el-descriptions-item>
<el-descriptions-item label="Full Name">{{ form.fullName }}</el-descriptions-item>
<el-descriptions-item label="Position">{{ form.remarks1 || form.positionName }}</el-descriptions-item>
<el-descriptions-item label="Phone">{{ form.phone }}</el-descriptions-item>
<el-descriptions-item label="Chinese Embassy Visas Office">{{ form.embassy }}</el-descriptions-item>
<el-descriptions-item label="Chinese Embassy Email">{{ form.embassyEmail }}</el-descriptions-item>
<el-descriptions-item label="Additional Documents">
<el-link v-if="form.files" :href="fillImgUrl(form.files)" target="_blank" type="primary">
additional documents
</el-link>
</el-descriptions-item>
<el-descriptions-item label="Proof of Employment">
<el-link v-if="form.invitationFile" target="_blank" :href="fillImgUrl(form.invitationFile)" type="primary">
proof of employment
</el-link>
</el-descriptions-item>
</el-descriptions>
<!-- <el-divider></el-divider>-->
<br/>
<el-table :data="visaList" border stripe>
<el-table-column prop="passportCopy" label="Passport Copy">
<template #default="{row}">
<el-image
:src="fillImgUrl(row.passportCopy)"
:preview-src-list="[fillImgUrl(row.passportCopy)]"
:preview-teleported="true"
style="width: 50px;height: 70px"
/>
</template>
</el-table-column>
<el-table-column label="position" align="center" prop="position"/>
<el-table-column label="lastName" align="center" prop="lastName"/>
<el-table-column label="firstName" align="center" prop="fristName"/>
<el-table-column prop="sex" label="Gender" align="center">
<template #default="{row}">
{{ row.sex == '0' ? 'M' : 'F' }}
</template>
</el-table-column>
<el-table-column label="nationality" align="center" prop="nationality"/>
<el-table-column label="birthday" align="center" prop="birthday"/>
<el-table-column label="Passport No." align="center" prop="passportNo"/>
<el-table-column label="DATE OF ISSUE" align="center" prop="issueDate"/>
<el-table-column label="DATE OF EXPIRY" align="center" prop="expiryDate"/>
</el-table>
</el-dialog>
</template>
<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, ref} from "vue";
import {listVisaInfo} from "@/apiPc/match";
import useUserStore from "@/store/modules/user";
import {fillImgUrl} from "/@/utils/ruoyi";
const user = useUserStore().user
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
gender: '0',
cptVisaInfoBos: [],
email: user?.email,
})
const show = ref(false)
const visaList = ref([])
const open = (params) => {
show.value = true
form.value = params
listVisaInfo({visaId: params.id})
.then((res) => {
visaList.value = res.rows
})
}
defineExpose({open})
</script>
<style scoped lang="scss">
</style>
src/viewsPc/match/components/affix-invitation.vue
<template>
<el-dialog
v-model="show" :title="title" width="600px" append-to-body close-icon="CircleClose" center
v-model="show" :title="title" append-to-body close-icon="CircleClose" center
:close-on-click-modal="false" class="pcloginpop"
destroy-on-close
>
......@@ -19,12 +19,16 @@
<br/>
Thank you so much for your kind patience.
</h4>
<div class="red">To check your application status, please go to Account > Personal > Visa Review ReCEBOA Ror refer to your email for any updates..
</div>
</div>
<el-form :model="form" :rules="rules" ref="iformRef" label-position="top" v-else>
<el-form-item :label="language==0?'申请人类别':'Applicant Type'" required prop="applicatType">
<el-select v-model="form.applicatType">
<el-option label="MNA" value="1"/>
<el-option label="MNA/Team" value="1"/>
<el-option label="Technical Officials" value="2"/>
<el-option label="WT Staff" value="3"/>
<el-option label="Supplier" value="4"/>
......@@ -38,7 +42,16 @@
<el-option :label="language==0?'TE/PU(外办)邀请函':'TE/PU Invitation'" value="2"/>
</el-select>
</el-form-item>
<el-form-item :label="language==0?'是否需要中文邀请函':'Do you need a Chinese invitation？'" required prop="chinese">
<el-form-item v-if="form.invitationType=='2'" label="Proof of Employment" required prop="invitationFileArr">
<div class="red">Proof of employment is required for TE/PU invitation letters.</div>
<div class="red">
This document must be issued by the invitee's association and must bear an official stamp orsignature.)
</div>
<br/>
<file-upload v-model="form.invitationFileArr" :is-show-tip="false" :limit="1"></file-upload>
</el-form-item>
<el-form-item :label="language==0?'是否需要中文邀请函':'Do you need a Chinese invitation？'" required
prop="chinese">
<el-radio-group v-model="form.chinese">
<el-radio :value="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>
<el-radio :value="0">{{ language == 0 ? '否' : 'No' }}</el-radio>
......@@ -46,18 +59,20 @@
</el-form-item>
<!-- 一般信息-->
<el-form-item :label="language==0?'国家/地区协会名':'MNA Name'" :required="form.applicatType!=2"
<el-form-item :label="language==0?'国家/地区协会名':'MNA/Team Name'" :required="form.applicatType==1"
prop="associationCode">
<el-select v-model="form.associationCode" filterable>
<el-select v-model="form.associationCode" filterable clearable>
<el-option v-for="item in mnaList" :key="item.code" :label="language==0?item.nameCn:item.nameEn"
:value="item.code"/>
</el-select>
</el-form-item>
<el-form-item :label="language==0?'国家/地区协会地址':'MNA Address'" :required="form.applicatType!=2"
<el-form-item :label="language==0?'国家/地区协会地址':'MNA/Team Address'" :required="form.applicatType==1"
prop="associationAddress">
<el-input v-model="form.associationAddress"/>
</el-form-item>
<el-form-item :label="language==0?'邮箱':'Contact Email'" required prop="email">
<div class="red">Note: Notifications from the organizing committee will be sent to this email address.
</div>
<el-input v-model="form.email" type="email">
<template #append>
<el-button @click="sendEmail" v-loading="codeloading">
......@@ -65,7 +80,7 @@
</el-button>
</template>
</el-input>
<!-- <div class="tip"></div>-->
<!-- <div class="tip"></div>-->
</el-form-item>
<el-form-item prop="code" required>
<el-input placeholder="Email verification code" v-model="form.code"/>
......@@ -86,6 +101,8 @@
<el-input v-model="form.phone"/>
</el-form-item>
<el-form-item :label="language==0?'签证办理中国大使馆':'Chinese Embassy Visas Office'" required prop="embassy">
<div class="red">Ex:EMBASSY OF THE PEOPLE'S REPUBLIC OFCHINA IN THE ISLAMIC REPUBLIC OF PAKISTAN
</div>
<el-input v-model="form.embassy"/>
</el-form-item>
<el-form-item :label="language==0?'中国大使馆邮箱':'Chinese Embassy Email'" required prop="embassyEmail">
......@@ -95,11 +112,21 @@
<!--上传护照，多张-->
<div class="cptVisaInfoBosTable">
<el-form-item :label="language==0?'有效证件':'Passport Copy'" required>
<ImageUpload v-model="form.passportCopy" :is-show-tip="false" :limit="100"
:action="'/league/visa/getPersonInfoFromCert/3'"
paramName="pic" list-type="text" :show-file-list="false"
:button-text="language==0?'上传':'Upload'" @response="getPassportInfo"
/>
<div class="wrap-item">
<!-- <el-text type="success">Please ensure that the uploaded passport image is clear, complete, and free from
glare or reflections.
</el-text> -->
<div class="red">Please ensure that the uploaded passport image is clear, complete, and free from
glare or reflections.
</div>
<div class="red">You may upload multiple passports at once to appy for multiple applicants.
</div>
<ImageUpload v-model="form.passportCopy" :is-show-tip="false" :limit="20"
:action="'/league/visa/getPersonInfoFromCert/3' "
paramName="pic" list-type="text" :show-file-list="false"
:button-text="language==0?'上传':'Upload'" @response="getPassportInfo"
/>
</div>
</el-form-item>
<!--识别信息-->
<div v-if="form.cptVisaInfoBos?.length>0" class="border">
......@@ -122,7 +149,19 @@
</div>
</template>
<template #default="scope">
<el-input v-model="scope.row.position" size="small"/>
<el-select v-model="scope.row.position" size="small">
<el-option label="Head Of Team" value="Head Of Team"/>
<el-option label="Head Coach" value="Head Coach"/>
<el-option label="Manager" value="Manager"/>
<el-option label="Coach" value="Coach"/>
<el-option label="Trainer" value="Trainer"/>
<el-option label="Team Doctor" value="Team Doctor"/>
<el-option label="Team Physiotherepaist" value="Team Physiotherepaist"/>
<el-option label="Competitor" value="Competitor"/>
<el-option label="MNA Official" value="MNA Official"/>
<el-option label="MNA Guest" value="MNA Guest"/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="lastName" :label="'lastName'" min-width="100">
......@@ -225,12 +264,11 @@
</el-table-column>
<el-table-column label="Actions" fixed="right">
<template #default="scope">
<el-button type="danger" size="small" @click="delPassportInfo(scope.row)" icon="delete"/>
<el-button type="danger" size="small" @click="delPassportInfo(scope.$index)" icon="delete"/>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 补充材料-->
<el-form-item :label="language==0?'补充材料':'Additional Documents'" prop="files">
......@@ -240,7 +278,7 @@
<div class="text-center">
<el-button type="primary" size="large" @click="submit" round class="btn-lineG">
<el-button type="primary" size="large" :disabled="!cptId" @click="submit" round class="btn-lineG">
{{ language == 0 ? '提交' : 'SUBMIT' }}
</el-button>
</div>
......@@ -266,7 +304,8 @@ const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
gender: '0',
cptVisaInfoBos: []
cptVisaInfoBos: [],
email: user?.email,
})
const show = ref(false)
const codeloading = ref(false)
......@@ -290,11 +329,15 @@ const open = (params) => {
show.value = true
title.value = params.title
cptId.value = params.cptId
if (!cptId.value) {
proxy.$modal.msgError('参数有误');
}
form.value.userId = user.userId
form.value.cptId = params.cptId
getCountryList()
getMNAList()
getVisa()
// getVisa()
}
defineExpose({open})
......@@ -327,27 +370,31 @@ function getMNAList() {
const submit = () => {
console.log(form.value)
if (form.value.email?.indexOf('@') == -1) {
ElMessage.warning(language.value == 0?'请填写正确的邮箱':'Invalid Emaill Address！')
ElMessage.warning(language.value == 0 ? '请填写正确的邮箱' : 'Invalid Emaill Address！')
return
}
if(form.value.applicatType==5 && !form.value.remarks){
if (form.value.applicatType == 5 && !form.value.remarks) {
ElMessage.warning('Please specify Applicant Type')
return
}
if(form.value.position==3 && !form.value.remarks1){
if (form.value.position == 3 && !form.value.remarks1) {
ElMessage.warning('Please specify position')
return
}
for (let row of form.value.cptVisaInfoBos){
if(!row.position){
ElMessage.warning(`Please specify ${row.fristName}'s position`)
return
}
for (let row of form.value.cptVisaInfoBos) {
if (!row.position) {
ElMessage.warning(`Please specify ${row.fristName}'s position`)
return
}
}
if (form.value.files && Array.isArray(form.value.files)) {
form.value.files = form.value.files[0]?.url
}
if (form.value.invitationFileArr) {
form.value.invitationFile = JSON.stringify(form.value.invitationFileArr)
}
proxy.$refs.iformRef.validate(valid => {
if (valid) {
ElMessageBox.confirm(
......@@ -359,8 +406,8 @@ const submit = () => {
}).then(() => {
form.value.cptId = cptId.value
addInvitation(form.value).then((res) => {
if(res.data==-200){
ElMessage.error(language.value == 0 ? '邮箱验证码不正确':'Invalid email verification code')
if (res.data == -200) {
ElMessage.error(language.value == 0 ? '邮箱验证码不正确' : 'Invalid email verification code')
} else {
ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
showR.value = true
......@@ -391,20 +438,12 @@ const getPassportInfo = (res) => {
}
}
function delPassportInfo(row) {
console.log(row,form.value.cptVisaInfoBos)
if(form.value.cptVisaInfoBos.length==1){
form.value.cptVisaInfoBos = []
}else {
for(let n of form.value.cptVisaInfoBos){
if(n.passportNo==row.passportNo){
form.value.cptVisaInfoBos.splice(form.value.cptVisaInfoBos.indexOf(n),1)
}
}
}
function delPassportInfo(index) {
form.value.cptVisaInfoBos.splice(index, 1)
}
function sendEmail() {
if(!form.value.email){
if (!form.value.email) {
ElMessage.error(language.value == 0 ? '请输入邮箱' : 'Please enter contact Email')
return
}
......@@ -413,11 +452,11 @@ function sendEmail() {
return
}
codeloading.value = true
sendVisaCode({email:form.value.email}).then(res=>{
sendVisaCode({email: form.value.email}).then(res => {
codeloading.value = false
if(res.code == 200){
if (res.code == 200) {
ElMessage.success(language.value == 0 ? '发送成功,请前往邮箱查看' : 'Send success, please check your email')
}else{
} else {
ElMessage.error(res.msg)
}
})
......@@ -425,7 +464,10 @@ function sendEmail() {
</script>
<style scoped lang="scss">
.red{color: red!important;}
.red {
color: red !important;
}
:deep(.el-upload--picture-card) {
--el-upload-picture-card-size: 60px;
}
......@@ -453,4 +495,9 @@ h4 {
font-size: 12px;
}
}
.wrap-item {
flex-wrap: wrap;
display: block;
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!