Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
91d50a89 by zhangmeng
Options

首页样式

1 parent b6c72052
Expand all
Inline Side-by-side
Showing 17 changed files with 332 additions and 166 deletions
src/App.vue
<template>
<router-view />
<reset-pwd ref="resetPwdRef" />
<router-view/>
<reset-pwd ref="resetPwdRef"/>
</template>
<script setup>
import { nextTick, onMounted, watch} from 'vue'
import { handleThemeStyle } from '@/utils/theme'
import {nextTick, onMounted, watch} from 'vue'
import {handleThemeStyle} from '@/utils/theme'
import useSettingsStore from '@/store/modules/settings'
import ResetPwd from '@/views/system/user/profile/components/resetPwd'
import useUserStore from '@/store/modules/user'
import { getCurrentInstance } from '@vue/runtime-core'
import {getCurrentInstance} from '@vue/runtime-core'
import {useStorage} from "@vueuse/core";
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const language= useStorage('language',0)
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
onMounted(() => {
document.body.style.setProperty('--el-color-primary', '#0540EC')
......@@ -26,7 +26,7 @@ onMounted(() => {
})
})
watch(language,(val)=>{
watch(language, (val) => {
location.reload()
})
......@@ -46,7 +46,7 @@ watch(language,(val)=>{
--el-fill-color-light: #faf5f5;
--el-button-hover-border-color: #94080B;
--el-button-hover-bg-color: rgba(148, 8, 11, 0.3);
--el-fill-color-lighter: #F6F9FE!important;
--el-fill-color-lighter: #F6F9FE !important;
}
.el-button:focus, .el-button:hover {
......@@ -58,29 +58,34 @@ watch(language,(val)=>{
width: 1600px;
margin: auto;
}
@media screen and (max-width: 1650px) {
.box {
width: 1200px;
}
}
@media screen and (max-width: 1200px) {
.box {
width: 860px;
}
}
@media screen and (max-width: 900px) {
.box {
width: 750px;
}
}
.app-main {min-height: 75vh;
.app-main {
min-height: 75vh;
background: #F4F4F4;
}
.el-breadcrumb__inner {
display: flex;
.el-icon {
margin: 0 4px;
}
......@@ -97,24 +102,27 @@ li.el-select-dropdown__item {
.el-popper .el-menu {
background: #fff;
}
.el-popper .el-menu--horizontal .el-menu .el-menu-item {
background: transparent;
justify-content: center;
height: 50px;
font-size: 18px;
}
.el-popper .el-menu--horizontal .el-menu .el-sub-menu .el-sub-menu__title {
background: transparent;
justify-content: center;
height: 50px;
font-size: 18px;
}
.el-popper .el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title {
.el-popper .el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
}
.el-popper .el-menu--horizontal .el-menu .el-menu-item.is-active {
color:var(--el-color-primary);
color: var(--el-color-primary);
}
.el-popper, .el-menu--popup {
......@@ -122,15 +130,18 @@ li.el-select-dropdown__item {
}
:deep(.el-menu--popup) {
min-width: 130px;padding: 0;
min-width: 130px;
padding: 0;
}
.el-popper.is-light.is-pure {
border: none;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: transparent;
}
.el-popper {
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
color: var(--el-color-primary);
......@@ -143,14 +154,20 @@ li.el-select-dropdown__item {
.home-menu {
.el-menu {color: #000;}
.el-menu {
color: #000;
}
.el-menu--horizontal>.el-menu-item {
transition: none;color: #000;padding: 6px 0 ;margin: 0 10px;
.el-menu--horizontal > .el-menu-item {
transition: none;
color: #000;
padding: 6px 0;
margin: 0 10px;
}
.el-sub-menu .el-sub-menu__title {
font-size: 16px;color: #000;
font-size: 16px;
color: #000;
}
.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
......@@ -164,21 +181,31 @@ li.el-select-dropdown__item {
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
color:#000;background: transparent;filter: drop-shadow(0 0 1px #000);
color: #fff;
background: transparent;
filter: drop-shadow(0 0 1px #fff);
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
background: transparent;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #000;color: #000!important;
border-bottom: 2px solid #fff;
color: #fff !important;
}
.el-menu--horizontal {
height: 35px;
border-bottom: none;
justify-content: start; gap: 40px;
justify-content: start;
gap: 40px;
}
.el-menu--horizontal > .el-menu-item {
font-size: 16px;font-family: PingFang SC;
font-size: 16px;
font-family: PingFang SC;
color: #fff;
}
}
......@@ -195,8 +222,10 @@ li.el-select-dropdown__item {
}
@media (max-width: 1440px) {
.fixed_nav{ transform: scale(0.8);
transform-origin: left;}
.fixed_nav {
transform: scale(0.8);
transform-origin: left;
}
.home-menu .el-menu--horizontal > .el-menu-item {
font-size: 16px;
//padding: 0 10px;
......@@ -211,11 +240,13 @@ li.el-select-dropdown__item {
font-size: 16px;
}
}
@media (max-width: 1200px) {
.home-menu .el-menu--horizontal {
gap: 30px;
}
}
//思源宋体
@font-face {
font-family: SC-song;
......@@ -245,39 +276,82 @@ li.el-select-dropdown__item {
top: 30px;
}
}
.searchPark{padding: 10px 20px;height: 100%;
.searchPark {
padding: 10px 20px;
height: 100%;
background: #F6F6F6;
.el-input__suffix{color:var(--el-color-primary)}
.el-icon{color:var(--el-color-primary)}
.el-input{--el-input-icon-color:var(--el-color-primary)}
.el-input__suffix {
color: var(--el-color-primary)
}
.el-icon {
color: var(--el-color-primary)
}
.el-input {
--el-input-icon-color: var(--el-color-primary)
}
}
.flexformItem{
display: flex;width: 100%;
.el-date-editor{
--el-date-editor-width:100%
.flexformItem {
display: flex;
width: 100%;
.el-date-editor {
--el-date-editor-width: 100%
}
.el-input__suffix {
color: var(--el-color-primary)
}
.el-icon {
color: var(--el-color-primary)
}
.el-input {
--el-input-icon-color: var(--el-color-primary)
}
.el-input__suffix{color:var(--el-color-primary)}
.el-icon{color:var(--el-color-primary)}
.el-input{--el-input-icon-color:var(--el-color-primary)}
}
.topBanner{
.imgbox{position: relative;height: 100%;
img{height: 100%;object-fit: cover;}
.topBanner {
.imgbox {
position: relative;
height: 100%;
img {
height: 100%;
object-fit: cover;
}
h3{position: absolute;bottom: 0;color: #fff;
font-size: 36px;margin: 0;
text-align: center;width: 100%;padding: 60px 0 40px;
background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0));
}
h3 {
position: absolute;
bottom: 0;
color: #fff;
font-size: 36px;
margin: 0;
text-align: center;
width: 100%;
padding: 60px 0 40px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
}
.tablebody{width: 100%;overflow: auto}
.tablebody {
width: 100%;
overflow: auto
}
@media (max-width: 800px) {
.box{width: 96%}
.box {
width: 96%
}
}
.hz-tag{
.hz-tag {
border-radius: 13px;
height: 25px;
line-height: 25px;
......@@ -285,35 +359,41 @@ li.el-select-dropdown__item {
font-weight: 400;
padding: 0 15px;
}
.tag1{
.tag1 {
background: rgba(50, 177, 108, 0.2);
color:rgba(50, 177, 108, 1);
color: rgba(50, 177, 108, 1);
}
.tag2{
.tag2 {
background-color: rgba(243, 152, 0, 0.2);
color: #F39800;
}
.tag3{
.tag3 {
background-color: rgba(0, 160, 233, 0.2);
color: #00A0E9;
}
.tag4{
.tag4 {
background-color: rgba(247, 64, 166, 0.2);
color: #F740A6;
}
.hz-row{
.hz-row {
font-size: 14px;
font-weight: 400;
color: #929AA0;
margin-bottom: 16px;
}
.sign{
.sign {
color: #493CEB;
}
.s{
cursor:pointer
.s {
cursor: pointer
}
</style>
......
src/layoutPc/components/AppBottom.vue
<template>
<div class="footAll">
<div class="box" style="max-width: 90%">
<el-row v-if="language==0" justify="space-between" align="middle">
<el-row v-if="language==0" align="middle" justify="space-between">
<el-col :lg="10" :md="10" :xs="10">
<ul>
<li>邮编：214000</li>
<li>微信: 18806179528</li>
<!-- <li>QQ: 497118883</li>-->
<li>江苏省 无锡市太湖新城和风路与清舒交叉口东北100米</li>
</ul>
<div>
<img alt="" src="@/assets/pc/bottom_logo.png">
</div>
</el-col>
<el-col :lg="10" :md="10" :xs="10">
<ul style="text-align: right">
<li>邮编：214000</li>
<li>微信: 18806179528</li>
<!-- <li>QQ: 497118883</li>-->
<li>江苏省 无锡市太湖新城和风路与清舒交叉口东北100米</li>
<li>客服及报障电话:18806179528</li>
<li>客服及报障邮箱: office@2025wtcwuxi.com</li>
</ul>
</el-col>
<!-- <el-col :lg="4" :md="4" :xs="4">-->
<!-- <div>-->
<!-- <img class="mauto" src="/img/wb2.jpg"/>-->
<!-- <p class="text-center mt10">微博关注</p>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :lg="4" :md="4" :xs="4">-->
<!-- <div>-->
<!-- <img class="mauto" src="/img/wb2.jpg"/>-->
<!-- <p class="text-center mt10">微博关注</p>-->
<!-- </div>-->
<!-- </el-col>-->
<el-col :span="24" style="border-top: 1px solid #fff">
<div class="text-center copyright pd10">版权所有@无锡和畅赛事运营有限公司
<a target="_blank" href="https://beian.miit.gov.cn/">ICP备案号：苏ICP备2023054420号-2</a></div>
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a></div>
</el-col>
</el-row>
<el-row justify="space-between" align="middle" v-if="language===1">
<el-row v-if="language===1" align="middle" justify="space-between">
<el-col :span="14">
<ul>
<!-- <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>-->
<!-- </ul>-->
<div>
<img alt="" src="@/assets/pc/bottom_logo.png">
</div>
</el-col>
<el-col :span="6">
<ul style="text-align: right">
<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>
</ul>
</el-col>
<el-col :span="6">
<ul style="text-align: right">
<li>Telephone:086-18806179528</li>
<li>E-mail:office@2025wtcwuxi.com</li>
</ul>
</el-col>
<!-- <el-col :span="4">-->
<!-- <div>-->
<!-- <img class="mauto" src="/img/wb2.jpg"/>-->
<!-- <p class="text-center mt10">Weibo</p>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="4">-->
<!-- <div>-->
<!-- <img class="mauto" src="/img/wb2.jpg"/>-->
<!-- <p class="text-center mt10">Weibo</p>-->
<!-- </div>-->
<!-- </el-col>-->
<el-col :span="24" style="border-top: 1px solid #fff">
<div class="text-center copyright pd10">Copyright@Wuxi Hechang Sports Operations Co., Ltd
<a target="_blank" href="https://beian.miit.gov.cn/">ICP：苏ICP备2023054420号-2</a></div>
<a href="https://beian.miit.gov.cn/" target="_blank">ICP：苏ICP备2023054420号-2</a></div>
</el-col>
</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-->
<!-- 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>-->
<!-- &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>-->
<!-- <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-->
<!-- 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>-->
<!-- &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>
......@@ -168,14 +176,10 @@ const goAround = () => {
}
}
.copyright {
font-size: 14px;
opacity: 0.88;
color: #4C5359;
}
.footAll {
background: #E0E3E5;;
//background: #E0E3E5;
background: url("@/assets/pc/bottom_bg.png");
padding: 36px 0 5px;
p {
......@@ -190,8 +194,8 @@ const goAround = () => {
li {
line-height: 30px;
font-size: 14px;
opacity: 0.88;
color: #4C5359;
opacity: 1;
color: #fff;
a {
margin-left: 15px;
......@@ -208,6 +212,12 @@ const goAround = () => {
}
}
.copyright {
font-size: 14px;
//opacity: 0.88;
color: #fff;
}
.gradient-text {
font-family: FZJunHeiS-B-GB;
font-weight: 600;
......
src/layoutPc/components/indexSearch.vue
<template>
<el-dialog
v-model="show" class="searchpp" width="80vw" append-to-body title="搜索"
v-model="show"
:close-on-click-modal="true"
:modal="false"
:show-close="true"
append-to-body
class="searchpp"
destroy-on-close
style="padding-top: 10px"
title="搜索"
top="80px"
destroy-on-close :show-close="true" :close-on-click-modal="true" :modal="false"
width="80vw"
>
<div class="searchBody">
<div class="searchline">
<el-input v-model="query.name" placeholder="请输入关键词搜索" @change="search" />
<el-input v-model="query.name" placeholder="请输入关键词搜索" @change="search"/>
<el-button :icon="Search" @click="search">搜索</el-button>
</div>
<div class="hotword" hidden>
......@@ -15,7 +23,7 @@
<span>2024年奥运会</span>
</div>
<h2>近期热门</h2>
<el-row class="newsimgcover" :gutter="20">
<el-row :gutter="20" class="newsimgcover">
<el-col v-for="(n,index) in hottest" v-show="index<4" :key="index" :span="6">
<div class="item shadow" @click="goDetail(n)">
<div class="imgbox"><img :src="fillImgUrl_webSite(n.picUrl)"></div>
......@@ -29,11 +37,12 @@
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {onMounted, ref} from 'vue'
import {Search} from '@element-plus/icons-vue'
const router = useRouter()
import { getHottest } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {getHottest} from '@/apiPc/webSite'
import {useRouter} from 'vue-router'
const show = ref(false)
const query = ref({})
......@@ -61,6 +70,7 @@ function search() {
}
})
}
const goDetail = (n) => {
show.value = false
if (n.isOut == '1') {
......@@ -73,7 +83,7 @@ const goDetail = (n) => {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
h2 {
font-size: 24px;
margin: 30px 0 15px;
......
src/viewsPc/components/homeQuick.vue
......@@ -2,19 +2,35 @@
<div v-if="language === 0" class="itemBox">
<el-row :gutter="20">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">签证服务</div>
<div class="item bgImg1" @click="popRemark(0)">
<!-- <img src="@/assets/dance/btn01.png">-->
签证服务
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">酒店预订</div>
<div class="item bgImg2" @click="popRemark(1)">
<!-- <img src="@/assets/dance/btn02.png">-->
酒店预订
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div>
<div class="item bgImg3" @click="popRemark(2)">
<!-- <img src="@/assets/dance/btn03.png">-->
接送服务
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">票务服务</div>
<div class="item bgImg4" @click="popRemark(10)">
<!-- <img src="@/assets/dance/btn04.png">-->
票务服务
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">媒体注册</div>
<div class="item bgImg5" @click="goMedia">
<!-- <img src="@/assets/dance/btn07.png">-->
媒体注册
</div>
</el-col>
<!-- <el-col :sm="12" :lg="4" :xs="12">-->
<!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">周边活动</div>-->
......@@ -27,19 +43,34 @@
<div v-else class="itemBox_en">
<el-row :gutter="20" justify="space-around">
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">Visa Services</div>
<div class="item bgImg1" @click="popRemark(0)">
<!-- <img src="@/assets/dance/btn01.png">-->
Visa Services
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div>
<div class="item bgImg2" @click="popRemark(1)">
<!-- <img src="@/assets/dance/btn02.png">-->
HOTEL RESERVATION
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div>
<div class="item bgImg3" @click="popRemark(2)">
<!-- <img src="@/assets/dance/btn03.png">-->
TRANSPORTATION RESERVATION
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">TICKET SERVICES</div>
<div class="item bgImg4" @click="popRemark(10)">
<!-- <img src="@/assets/dance/btn04.png">-->
TICKET SERVICES
</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12">
<div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">Media Registration</div>
<div class="item bgImg5" @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>-->
......@@ -168,7 +199,7 @@ function goMedia() {
}
function popRemark(type) {
if(!matchId.value){
if (!matchId.value) {
return;
}
if (!form.value) {
......@@ -281,7 +312,7 @@ function goBooking(n, f) {
<style lang="scss" scoped>
.itemBox, .itemBox_en {
padding: 20px;
background: #fff;
background: #211D50;
box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08);
border-radius: 20px;
}
......@@ -298,18 +329,51 @@ function goBooking(n, f) {
align-items: center;
justify-content: center;
font-size: 20px;
background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
//background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
background-size: 100% 100%;
border-radius: 15px;
gap: 10px;
color: #fff;
height: 95px;
img {
object-fit: contain;
width: 75px;
height: 75px;
&:hover {
box-shadow: 0 0 10px #eee;
//img {
// transform: rotateY(180deg);
//}
//
//p {
// color: #000;
//}
}
}
.bgImg1 {
background: url("@/assets/pc/btn_bg01.png") no-repeat;
background-size: 100%;
}
.bgImg2 {
background: url("@/assets/pc/btn_bg02.png") no-repeat;
background-size: 100%;
}
.bgImg3 {
background: url("@/assets/pc/btn_bg03.png") no-repeat;
background-size: 100%;
}
.bgImg4 {
background: url("@/assets/pc/btn_bg04.png") no-repeat;
background-size: 100%;
}
.bgImg5 {
background: url("@/assets/pc/btn_bg05.png") no-repeat;
background-size: 100%;
}
.itemBox_en .item {
flex-direction: column;
text-align: center;
......@@ -324,13 +388,13 @@ function goBooking(n, f) {
&:hover {
box-shadow: 0 0 10px #eee;
img {
transform: rotateY(180deg);
}
p {
color: #000;
}
//img {
// transform: rotateY(180deg);
//}
//
//p {
// color: #000;
//}
}
}
......@@ -353,5 +417,7 @@ function goBooking(n, f) {
max-width: 50%;
flex: 0 0 50%;
}
}
</style>
......
vite.config.js
......@@ -83,11 +83,11 @@ export default defineConfig(({mode, command}) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
},
'/dev-api': {
target: 'http://192.168.1.118:8082/',
// target: 'http://192.168.1.118:8082/',
// target: 'http://192.168.1.131:8081/',
// target: 'https://jijin.wtwuxicenter.com/stage-api',
// target: 'https://tk005.wxjylt.com/stage-api',
// target: 'http://124.70.181.90:1880/stage-api',
// target: 'https://sys.2025wtcwuxi.com/stage-api/',
target: 'https://sys.2025wtcwuxi.com/stage-api/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
},
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!