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 291 additions and 135 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,63 +130,82 @@ 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);
}
.el-menu--horizontal {
border: none;
}
}
.home-menu {
.el-menu {color: #000;}
.el-menu--horizontal>.el-menu-item {
transition: none;color: #000;padding: 6px 0 ;margin: 0 10px;
.el-menu {
color: #000;
}
.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 {
border-bottom: none;
color: var(--el-color-primary);
}
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
color: #453DEA;
}
.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;
gap: 30px;
}
}
//思源宋体
@font-face {
font-family: SC-song;
......@@ -232,52 +263,95 @@ li.el-select-dropdown__item {
.el-dialog__headerbtn .el-dialog__close {
font-size: 33px;
}
&.el-dialog {
padding: 0 100px;
--el-dialog-title-font-size: 40px;
--el-dialog-padding-primary: 50px 20px 0 0;
box-shadow: 0 2000px 0 2000px rgba(0, 0, 0, 0.6);
}
.el-dialog__headerbtn {
right: 20px;
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{
background: rgba(50, 177, 108, 0.2);
color:rgba(50, 177, 108, 1);
.tag1 {
background: rgba(50, 177, 108, 0.2);
color: rgba(50, 177, 108, 1);
}
.tag2{
background-color: rgba(243, 152, 0, 0.2);
.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/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>
......@@ -23,17 +31,18 @@
</div>
</el-col>
</el-row>
</div>
</el-dialog>
</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;
......@@ -83,11 +93,11 @@ h2 {
margin: 0;
font-size: 18px;
color: #7B7F83;
span {
margin-right: 20px;
cursor: pointer;
&:hover {
text-decoration: underline;
}
......@@ -103,14 +113,14 @@ h2 {
height: 60px;
margin: 30px 0;
background: #F8F8F8;
.el-input {
border: none;
background: transparent;
outline: none;
font-size: 18px;
}
.el-button {
width: 130px;
font-size: 20px;
......@@ -120,7 +130,7 @@ h2 {
background: #000;;
border-radius: 0px 5px 5px 0px;
}
:deep(.el-input__wrapper) {
background-color: transparent;
box-shadow: none;
......
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,24 +43,39 @@
<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>-->
<!-- </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>-->
......@@ -101,7 +132,7 @@ watch(matchId, (val) => {
console.log(err)
form.value = null
})
match.getInfoByCptId({cptId: props.matchId}).then((res) => {
liveData.value = res.data || {}
})
......@@ -110,9 +141,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)
......@@ -136,7 +167,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.')
}
function applyInvitation() {
......@@ -163,19 +194,19 @@ function goMedia() {
useStore.setVisitor()
return
}
proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value})
}
function popRemark(type) {
if(!matchId.value){
if (!matchId.value) {
return;
}
if (!form.value) {
building()
return
}
if (type == '0') {
// ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.')
// return;
......@@ -188,7 +219,7 @@ function popRemark(type) {
building()
return
}
if (!useStore.user) {
// ElMessage({
// type: 'warning',
......@@ -197,12 +228,12 @@ function popRemark(type) {
useStore.setVisitor()
return
}
applyInvitation()
return
}
}
if ((form.value.isJdView == 0 && type == '1')
|| (form.value.isCarView == 0 && type == '2')
|| (form.value.isFoodView == 0 && type == '3')
......@@ -213,7 +244,7 @@ function popRemark(type) {
building()
return
}
if (type == '2') {
if (!useStore.user) {
// ElMessage({
......@@ -223,12 +254,12 @@ function popRemark(type) {
useStore.setVisitor()
return
}
emit("pickUp")
return;
}
const params = {
matchId: props.matchId,
title: language.value == 0 ? '预订说明' : 'Booking Instructions',
......@@ -236,7 +267,7 @@ function popRemark(type) {
cptName: props.cptName
}
proxy.$refs['orderRemarkRef'].open(params)
// goBooking(type)
}
......@@ -244,7 +275,7 @@ function goBooking(n, f) {
switch (n) {
case 10:
// 票务
// router.push({
// path: `/booking/ticket/${props.matchId}`,
// params: {id:props.matchId},
......@@ -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,39 +329,72 @@ 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;
img {
object-fit: contain;
width: 75px;
height: 75px;
color: #fff;
height: 95px;
&: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;
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;
}
//img {
// transform: rotateY(180deg);
//}
//
//p {
// color: #000;
//}
}
}
......@@ -343,7 +407,7 @@ function goBooking(n, f) {
height: auto !important;
padding: 15px 0;
margin: 10px 0;
img {
width: 50px;
height: 50px
......@@ -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!