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
1 <template> 1 <template>
2 <router-view /> 2 <router-view/>
3 <reset-pwd ref="resetPwdRef" /> 3 <reset-pwd ref="resetPwdRef"/>
4 </template> 4 </template>
5 5
6 <script setup> 6 <script setup>
7 import { nextTick, onMounted, watch} from 'vue' 7 import {nextTick, onMounted, watch} from 'vue'
8 import { handleThemeStyle } from '@/utils/theme' 8 import {handleThemeStyle} from '@/utils/theme'
9 import useSettingsStore from '@/store/modules/settings' 9 import useSettingsStore from '@/store/modules/settings'
10 import ResetPwd from '@/views/system/user/profile/components/resetPwd' 10 import ResetPwd from '@/views/system/user/profile/components/resetPwd'
11 import useUserStore from '@/store/modules/user' 11 import useUserStore from '@/store/modules/user'
12 import { getCurrentInstance } from '@vue/runtime-core' 12 import {getCurrentInstance} from '@vue/runtime-core'
13 import {useStorage} from "@vueuse/core"; 13 import {useStorage} from "@vueuse/core";
14 14
15 const userStore = useUserStore() 15 const userStore = useUserStore()
16 const { proxy } = getCurrentInstance() 16 const {proxy} = getCurrentInstance()
17 const language= useStorage('language',0) 17 const language = useStorage('language', 0)
18 18
19 onMounted(() => { 19 onMounted(() => {
20 document.body.style.setProperty('--el-color-primary', '#0540EC') 20 document.body.style.setProperty('--el-color-primary', '#0540EC')
...@@ -26,7 +26,7 @@ onMounted(() => { ...@@ -26,7 +26,7 @@ onMounted(() => {
26 }) 26 })
27 }) 27 })
28 28
29 watch(language,(val)=>{ 29 watch(language, (val) => {
30 location.reload() 30 location.reload()
31 }) 31 })
32 32
...@@ -46,7 +46,7 @@ watch(language,(val)=>{ ...@@ -46,7 +46,7 @@ watch(language,(val)=>{
46 --el-fill-color-light: #faf5f5; 46 --el-fill-color-light: #faf5f5;
47 --el-button-hover-border-color: #94080B; 47 --el-button-hover-border-color: #94080B;
48 --el-button-hover-bg-color: rgba(148, 8, 11, 0.3); 48 --el-button-hover-bg-color: rgba(148, 8, 11, 0.3);
49 --el-fill-color-lighter: #F6F9FE!important; 49 --el-fill-color-lighter: #F6F9FE !important;
50 } 50 }
51 51
52 .el-button:focus, .el-button:hover { 52 .el-button:focus, .el-button:hover {
...@@ -58,29 +58,34 @@ watch(language,(val)=>{ ...@@ -58,29 +58,34 @@ watch(language,(val)=>{
58 width: 1600px; 58 width: 1600px;
59 margin: auto; 59 margin: auto;
60 } 60 }
61
61 @media screen and (max-width: 1650px) { 62 @media screen and (max-width: 1650px) {
62 .box { 63 .box {
63 width: 1200px; 64 width: 1200px;
64 } 65 }
65 } 66 }
67
66 @media screen and (max-width: 1200px) { 68 @media screen and (max-width: 1200px) {
67 .box { 69 .box {
68 width: 860px; 70 width: 860px;
69 } 71 }
70 } 72 }
73
71 @media screen and (max-width: 900px) { 74 @media screen and (max-width: 900px) {
72 .box { 75 .box {
73 width: 750px; 76 width: 750px;
74 } 77 }
75 } 78 }
76 79
77 .app-main {min-height: 75vh; 80 .app-main {
81 min-height: 75vh;
78 background: #F4F4F4; 82 background: #F4F4F4;
79 } 83 }
80 84
81 .el-breadcrumb__inner { 85 .el-breadcrumb__inner {
82 display: flex; 86 display: flex;
83 87
88
84 .el-icon { 89 .el-icon {
85 margin: 0 4px; 90 margin: 0 4px;
86 } 91 }
...@@ -97,24 +102,27 @@ li.el-select-dropdown__item { ...@@ -97,24 +102,27 @@ li.el-select-dropdown__item {
97 .el-popper .el-menu { 102 .el-popper .el-menu {
98 background: #fff; 103 background: #fff;
99 } 104 }
105
100 .el-popper .el-menu--horizontal .el-menu .el-menu-item { 106 .el-popper .el-menu--horizontal .el-menu .el-menu-item {
101 background: transparent; 107 background: transparent;
102 justify-content: center; 108 justify-content: center;
103 height: 50px; 109 height: 50px;
104 font-size: 18px; 110 font-size: 18px;
105 } 111 }
112
106 .el-popper .el-menu--horizontal .el-menu .el-sub-menu .el-sub-menu__title { 113 .el-popper .el-menu--horizontal .el-menu .el-sub-menu .el-sub-menu__title {
107 background: transparent; 114 background: transparent;
108 justify-content: center; 115 justify-content: center;
109 height: 50px; 116 height: 50px;
110 font-size: 18px; 117 font-size: 18px;
111 } 118 }
112 .el-popper .el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title { 119
120 .el-popper .el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
113 121
114 } 122 }
115 123
116 .el-popper .el-menu--horizontal .el-menu .el-menu-item.is-active { 124 .el-popper .el-menu--horizontal .el-menu .el-menu-item.is-active {
117 color:var(--el-color-primary); 125 color: var(--el-color-primary);
118 } 126 }
119 127
120 .el-popper, .el-menu--popup { 128 .el-popper, .el-menu--popup {
...@@ -122,63 +130,82 @@ li.el-select-dropdown__item { ...@@ -122,63 +130,82 @@ li.el-select-dropdown__item {
122 } 130 }
123 131
124 :deep(.el-menu--popup) { 132 :deep(.el-menu--popup) {
125 min-width: 130px;padding: 0; 133 min-width: 130px;
134 padding: 0;
126 } 135 }
127 136
128 .el-popper.is-light.is-pure { 137 .el-popper.is-light.is-pure {
129 border: none; 138 border: none;
130 } 139 }
131 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{ 140
141 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
132 background-color: transparent; 142 background-color: transparent;
133 } 143 }
144
134 .el-popper { 145 .el-popper {
135 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { 146 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
136 color: var(--el-color-primary); 147 color: var(--el-color-primary);
137 } 148 }
138 149
139 .el-menu--horizontal { 150 .el-menu--horizontal {
140 border: none; 151 border: none;
141 } 152 }
142 } 153 }
143 154
144 .home-menu { 155 .home-menu {
145 156
146 .el-menu {color: #000;} 157 .el-menu {
147 158 color: #000;
148 .el-menu--horizontal>.el-menu-item {
149 transition: none;color: #000;padding: 6px 0 ;margin: 0 10px;
150 } 159 }
151 160
161 .el-menu--horizontal > .el-menu-item {
162 transition: none;
163 color: #000;
164 padding: 6px 0;
165 margin: 0 10px;
166 }
167
152 .el-sub-menu .el-sub-menu__title { 168 .el-sub-menu .el-sub-menu__title {
153 font-size: 16px;color: #000; 169 font-size: 16px;
170 color: #000;
154 } 171 }
155 172
156 .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title { 173 .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
157 border-bottom: none; 174 border-bottom: none;
158 color: var(--el-color-primary); 175 color: var(--el-color-primary);
159 } 176 }
160 177
161 .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover { 178 .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
162 color: #453DEA; 179 color: #453DEA;
163 } 180 }
164 181
165 182
166 .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { 183 .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
167 color:#000;background: transparent;filter: drop-shadow(0 0 1px #000); 184 color: #fff;
185 background: transparent;
186 filter: drop-shadow(0 0 1px #fff);
168 } 187 }
169 188
189 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
190 background: transparent;
191 }
192
170 .el-menu--horizontal > .el-menu-item.is-active { 193 .el-menu--horizontal > .el-menu-item.is-active {
171 border-bottom: 2px solid #000;color: #000!important; 194 border-bottom: 2px solid #fff;
195 color: #fff !important;
172 } 196 }
173 197
174 .el-menu--horizontal { 198 .el-menu--horizontal {
175 height: 35px; 199 height: 35px;
176 border-bottom: none; 200 border-bottom: none;
177 justify-content: start; gap: 40px; 201 justify-content: start;
202 gap: 40px;
178 } 203 }
179 204
180 .el-menu--horizontal > .el-menu-item { 205 .el-menu--horizontal > .el-menu-item {
181 font-size: 16px;font-family: PingFang SC; 206 font-size: 16px;
207 font-family: PingFang SC;
208 color: #fff;
182 } 209 }
183 } 210 }
184 211
...@@ -195,8 +222,10 @@ li.el-select-dropdown__item { ...@@ -195,8 +222,10 @@ li.el-select-dropdown__item {
195 } 222 }
196 223
197 @media (max-width: 1440px) { 224 @media (max-width: 1440px) {
198 .fixed_nav{ transform: scale(0.8); 225 .fixed_nav {
199 transform-origin: left;} 226 transform: scale(0.8);
227 transform-origin: left;
228 }
200 .home-menu .el-menu--horizontal > .el-menu-item { 229 .home-menu .el-menu--horizontal > .el-menu-item {
201 font-size: 16px; 230 font-size: 16px;
202 //padding: 0 10px; 231 //padding: 0 10px;
...@@ -211,11 +240,13 @@ li.el-select-dropdown__item { ...@@ -211,11 +240,13 @@ li.el-select-dropdown__item {
211 font-size: 16px; 240 font-size: 16px;
212 } 241 }
213 } 242 }
243
214 @media (max-width: 1200px) { 244 @media (max-width: 1200px) {
215 .home-menu .el-menu--horizontal { 245 .home-menu .el-menu--horizontal {
216 gap: 30px; 246 gap: 30px;
217 } 247 }
218 } 248 }
249
219 //思源宋体 250 //思源宋体
220 @font-face { 251 @font-face {
221 font-family: SC-song; 252 font-family: SC-song;
...@@ -232,52 +263,95 @@ li.el-select-dropdown__item { ...@@ -232,52 +263,95 @@ li.el-select-dropdown__item {
232 .el-dialog__headerbtn .el-dialog__close { 263 .el-dialog__headerbtn .el-dialog__close {
233 font-size: 33px; 264 font-size: 33px;
234 } 265 }
235 266
236 &.el-dialog { 267 &.el-dialog {
237 padding: 0 100px; 268 padding: 0 100px;
238 --el-dialog-title-font-size: 40px; 269 --el-dialog-title-font-size: 40px;
239 --el-dialog-padding-primary: 50px 20px 0 0; 270 --el-dialog-padding-primary: 50px 20px 0 0;
240 box-shadow: 0 2000px 0 2000px rgba(0, 0, 0, 0.6); 271 box-shadow: 0 2000px 0 2000px rgba(0, 0, 0, 0.6);
241 } 272 }
242 273
243 .el-dialog__headerbtn { 274 .el-dialog__headerbtn {
244 right: 20px; 275 right: 20px;
245 top: 30px; 276 top: 30px;
246 } 277 }
247 } 278 }
248 .searchPark{padding: 10px 20px;height: 100%; 279
280 .searchPark {
281 padding: 10px 20px;
282 height: 100%;
249 background: #F6F6F6; 283 background: #F6F6F6;
250 .el-input__suffix{color:var(--el-color-primary)} 284
251 .el-icon{color:var(--el-color-primary)} 285 .el-input__suffix {
252 .el-input{--el-input-icon-color:var(--el-color-primary)} 286 color: var(--el-color-primary)
287 }
288
289 .el-icon {
290 color: var(--el-color-primary)
291 }
292
293 .el-input {
294 --el-input-icon-color: var(--el-color-primary)
295 }
253 } 296 }
254 .flexformItem{ 297
255 display: flex;width: 100%; 298 .flexformItem {
256 .el-date-editor{ 299 display: flex;
257 --el-date-editor-width:100% 300 width: 100%;
301
302 .el-date-editor {
303 --el-date-editor-width: 100%
304 }
305
306 .el-input__suffix {
307 color: var(--el-color-primary)
308 }
309
310 .el-icon {
311 color: var(--el-color-primary)
312 }
313
314 .el-input {
315 --el-input-icon-color: var(--el-color-primary)
258 } 316 }
259 .el-input__suffix{color:var(--el-color-primary)}
260 .el-icon{color:var(--el-color-primary)}
261 .el-input{--el-input-icon-color:var(--el-color-primary)}
262 } 317 }
263 318
264 .topBanner{ 319 .topBanner {
265 .imgbox{position: relative;height: 100%; 320 .imgbox {
266 img{height: 100%;object-fit: cover;} 321 position: relative;
322 height: 100%;
323
324 img {
325 height: 100%;
326 object-fit: cover;
327 }
267 } 328 }
268 h3{position: absolute;bottom: 0;color: #fff; 329
269 font-size: 36px;margin: 0; 330 h3 {
270 text-align: center;width: 100%;padding: 60px 0 40px; 331 position: absolute;
271 background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0)); 332 bottom: 0;
333 color: #fff;
334 font-size: 36px;
335 margin: 0;
336 text-align: center;
337 width: 100%;
338 padding: 60px 0 40px;
339 background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
272 } 340 }
273 } 341 }
274 .tablebody{width: 100%;overflow: auto} 342
343 .tablebody {
344 width: 100%;
345 overflow: auto
346 }
275 347
276 @media (max-width: 800px) { 348 @media (max-width: 800px) {
277 .box{width: 96%} 349 .box {
350 width: 96%
351 }
278 } 352 }
279 353
280 .hz-tag{ 354 .hz-tag {
281 border-radius: 13px; 355 border-radius: 13px;
282 height: 25px; 356 height: 25px;
283 line-height: 25px; 357 line-height: 25px;
...@@ -285,35 +359,41 @@ li.el-select-dropdown__item { ...@@ -285,35 +359,41 @@ li.el-select-dropdown__item {
285 font-weight: 400; 359 font-weight: 400;
286 padding: 0 15px; 360 padding: 0 15px;
287 } 361 }
288 .tag1{ 362
289 background: rgba(50, 177, 108, 0.2); 363 .tag1 {
290 color:rgba(50, 177, 108, 1); 364 background: rgba(50, 177, 108, 0.2);
365 color: rgba(50, 177, 108, 1);
291 } 366 }
292 .tag2{ 367
293 background-color: rgba(243, 152, 0, 0.2); 368 .tag2 {
369 background-color: rgba(243, 152, 0, 0.2);
294 color: #F39800; 370 color: #F39800;
295 } 371 }
296 .tag3{ 372
373 .tag3 {
297 background-color: rgba(0, 160, 233, 0.2); 374 background-color: rgba(0, 160, 233, 0.2);
298 color: #00A0E9; 375 color: #00A0E9;
299 } 376 }
300 .tag4{ 377
378 .tag4 {
301 background-color: rgba(247, 64, 166, 0.2); 379 background-color: rgba(247, 64, 166, 0.2);
302 color: #F740A6; 380 color: #F740A6;
303 } 381 }
304 .hz-row{ 382
383 .hz-row {
305 font-size: 14px; 384 font-size: 14px;
306 font-weight: 400; 385 font-weight: 400;
307 color: #929AA0; 386 color: #929AA0;
308 margin-bottom: 16px; 387 margin-bottom: 16px;
309 388
310 } 389 }
311 .sign{ 390
391 .sign {
312 color: #493CEB; 392 color: #493CEB;
313 } 393 }
314 394
315 .s{ 395 .s {
316 cursor:pointer 396 cursor: pointer
317 } 397 }
318 398
319 </style> 399 </style>
......
src/layoutPc/components/indexSearch.vue
1 <template> 1 <template>
2 <el-dialog 2 <el-dialog
3 v-model="show" class="searchpp" width="80vw" append-to-body title="搜索" 3 v-model="show"
4 :close-on-click-modal="true"
5 :modal="false"
6 :show-close="true"
7 append-to-body
8 class="searchpp"
9 destroy-on-close
10 style="padding-top: 10px"
11 title="搜索"
4 top="80px" 12 top="80px"
5 destroy-on-close :show-close="true" :close-on-click-modal="true" :modal="false" 13 width="80vw"
6 > 14 >
7 <div class="searchBody"> 15 <div class="searchBody">
8 <div class="searchline"> 16 <div class="searchline">
9 <el-input v-model="query.name" placeholder="请输入关键词搜索" @change="search" /> 17 <el-input v-model="query.name" placeholder="请输入关键词搜索" @change="search"/>
10 <el-button :icon="Search" @click="search">搜索</el-button> 18 <el-button :icon="Search" @click="search">搜索</el-button>
11 </div> 19 </div>
12 <div class="hotword" hidden> 20 <div class="hotword" hidden>
...@@ -15,7 +23,7 @@ ...@@ -15,7 +23,7 @@
15 <span>2024年奥运会</span> 23 <span>2024年奥运会</span>
16 </div> 24 </div>
17 <h2>近期热门</h2> 25 <h2>近期热门</h2>
18 <el-row class="newsimgcover" :gutter="20"> 26 <el-row :gutter="20" class="newsimgcover">
19 <el-col v-for="(n,index) in hottest" v-show="index<4" :key="index" :span="6"> 27 <el-col v-for="(n,index) in hottest" v-show="index<4" :key="index" :span="6">
20 <div class="item shadow" @click="goDetail(n)"> 28 <div class="item shadow" @click="goDetail(n)">
21 <div class="imgbox"><img :src="fillImgUrl_webSite(n.picUrl)"></div> 29 <div class="imgbox"><img :src="fillImgUrl_webSite(n.picUrl)"></div>
...@@ -23,17 +31,18 @@ ...@@ -23,17 +31,18 @@
23 </div> 31 </div>
24 </el-col> 32 </el-col>
25 </el-row> 33 </el-row>
26 34
27 </div> 35 </div>
28 </el-dialog> 36 </el-dialog>
29 </template> 37 </template>
30 38
31 <script setup> 39 <script setup>
32 import { onMounted, ref } from 'vue' 40 import {onMounted, ref} from 'vue'
33 import { Search } from '@element-plus/icons-vue' 41 import {Search} from '@element-plus/icons-vue'
42
34 const router = useRouter() 43 const router = useRouter()
35 import { getHottest } from '@/apiPc/webSite' 44 import {getHottest} from '@/apiPc/webSite'
36 import { useRouter } from 'vue-router' 45 import {useRouter} from 'vue-router'
37 46
38 const show = ref(false) 47 const show = ref(false)
39 const query = ref({}) 48 const query = ref({})
...@@ -61,6 +70,7 @@ function search() { ...@@ -61,6 +70,7 @@ function search() {
61 } 70 }
62 }) 71 })
63 } 72 }
73
64 const goDetail = (n) => { 74 const goDetail = (n) => {
65 show.value = false 75 show.value = false
66 if (n.isOut == '1') { 76 if (n.isOut == '1') {
...@@ -73,7 +83,7 @@ const goDetail = (n) => { ...@@ -73,7 +83,7 @@ const goDetail = (n) => {
73 } 83 }
74 </script> 84 </script>
75 85
76 <style scoped lang="scss"> 86 <style lang="scss" scoped>
77 h2 { 87 h2 {
78 font-size: 24px; 88 font-size: 24px;
79 margin: 30px 0 15px; 89 margin: 30px 0 15px;
...@@ -83,11 +93,11 @@ h2 { ...@@ -83,11 +93,11 @@ h2 {
83 margin: 0; 93 margin: 0;
84 font-size: 18px; 94 font-size: 18px;
85 color: #7B7F83; 95 color: #7B7F83;
86 96
87 span { 97 span {
88 margin-right: 20px; 98 margin-right: 20px;
89 cursor: pointer; 99 cursor: pointer;
90 100
91 &:hover { 101 &:hover {
92 text-decoration: underline; 102 text-decoration: underline;
93 } 103 }
...@@ -103,14 +113,14 @@ h2 { ...@@ -103,14 +113,14 @@ h2 {
103 height: 60px; 113 height: 60px;
104 margin: 30px 0; 114 margin: 30px 0;
105 background: #F8F8F8; 115 background: #F8F8F8;
106 116
107 .el-input { 117 .el-input {
108 border: none; 118 border: none;
109 background: transparent; 119 background: transparent;
110 outline: none; 120 outline: none;
111 font-size: 18px; 121 font-size: 18px;
112 } 122 }
113 123
114 .el-button { 124 .el-button {
115 width: 130px; 125 width: 130px;
116 font-size: 20px; 126 font-size: 20px;
...@@ -120,7 +130,7 @@ h2 { ...@@ -120,7 +130,7 @@ h2 {
120 background: #000;; 130 background: #000;;
121 border-radius: 0px 5px 5px 0px; 131 border-radius: 0px 5px 5px 0px;
122 } 132 }
123 133
124 :deep(.el-input__wrapper) { 134 :deep(.el-input__wrapper) {
125 background-color: transparent; 135 background-color: transparent;
126 box-shadow: none; 136 box-shadow: none;
......
src/viewsPc/components/homeQuick.vue
...@@ -2,19 +2,35 @@ ...@@ -2,19 +2,35 @@
2 <div v-if="language === 0" class="itemBox"> 2 <div v-if="language === 0" class="itemBox">
3 <el-row :gutter="20"> 3 <el-row :gutter="20">
4 <el-col :lg="4" :sm="12" :xs="12"> 4 <el-col :lg="4" :sm="12" :xs="12">
5 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">签证服务</div> 5 <div class="item bgImg1" @click="popRemark(0)">
6 <!-- <img src="@/assets/dance/btn01.png">-->
7 签证服务
8 </div>
6 </el-col> 9 </el-col>
7 <el-col :lg="4" :sm="12" :xs="12"> 10 <el-col :lg="4" :sm="12" :xs="12">
8 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">酒店预订</div> 11 <div class="item bgImg2" @click="popRemark(1)">
12 <!-- <img src="@/assets/dance/btn02.png">-->
13 酒店预订
14 </div>
9 </el-col> 15 </el-col>
10 <el-col :lg="4" :sm="12" :xs="12"> 16 <el-col :lg="4" :sm="12" :xs="12">
11 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div> 17 <div class="item bgImg3" @click="popRemark(2)">
18 <!-- <img src="@/assets/dance/btn03.png">-->
19 接送服务
20 </div>
21
12 </el-col> 22 </el-col>
13 <el-col :lg="4" :sm="12" :xs="12"> 23 <el-col :lg="4" :sm="12" :xs="12">
14 <div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">票务服务</div> 24 <div class="item bgImg4" @click="popRemark(10)">
25 <!-- <img src="@/assets/dance/btn04.png">-->
26 票务服务
27 </div>
15 </el-col> 28 </el-col>
16 <el-col :lg="4" :sm="12" :xs="12"> 29 <el-col :lg="4" :sm="12" :xs="12">
17 <div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">媒体注册</div> 30 <div class="item bgImg5" @click="goMedia">
31 <!-- <img src="@/assets/dance/btn07.png">-->
32 媒体注册
33 </div>
18 </el-col> 34 </el-col>
19 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 35 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
20 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">周边活动</div>--> 36 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">周边活动</div>-->
...@@ -27,24 +43,39 @@ ...@@ -27,24 +43,39 @@
27 <div v-else class="itemBox_en"> 43 <div v-else class="itemBox_en">
28 <el-row :gutter="20" justify="space-around"> 44 <el-row :gutter="20" justify="space-around">
29 <el-col :lg="4" :sm="12" :xs="12"> 45 <el-col :lg="4" :sm="12" :xs="12">
30 <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn01.png">Visa Services</div> 46 <div class="item bgImg1" @click="popRemark(0)">
47 <!-- <img src="@/assets/dance/btn01.png">-->
48 Visa Services
49 </div>
31 </el-col> 50 </el-col>
32 <el-col :lg="4" :sm="12" :xs="12"> 51 <el-col :lg="4" :sm="12" :xs="12">
33 <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div> 52 <div class="item bgImg2" @click="popRemark(1)">
53 <!-- <img src="@/assets/dance/btn02.png">-->
54 HOTEL RESERVATION
55 </div>
34 </el-col> 56 </el-col>
35 <el-col :lg="4" :sm="12" :xs="12"> 57 <el-col :lg="4" :sm="12" :xs="12">
36 <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div> 58 <div class="item bgImg3" @click="popRemark(2)">
59 <!-- <img src="@/assets/dance/btn03.png">-->
60 TRANSPORTATION RESERVATION
61 </div>
37 </el-col> 62 </el-col>
38 <el-col :lg="4" :sm="12" :xs="12"> 63 <el-col :lg="4" :sm="12" :xs="12">
39 <div class="item" @click="popRemark(10)"><img src="@/assets/dance/btn04.png">TICKET SERVICES</div> 64 <div class="item bgImg4" @click="popRemark(10)">
65 <!-- <img src="@/assets/dance/btn04.png">-->
66 TICKET SERVICES
67 </div>
40 </el-col> 68 </el-col>
41 <el-col :lg="4" :sm="12" :xs="12"> 69 <el-col :lg="4" :sm="12" :xs="12">
42 <div class="item" @click="goMedia"><img src="@/assets/dance/btn07.png">Media Registration</div> 70 <div class="item bgImg5" @click="goMedia">
71 <!-- <img src="@/assets/dance/btn07.png">-->
72 Media Registration
73 </div>
43 </el-col> 74 </el-col>
44 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 75 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
45 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>--> 76 <!-- <div class="item" @click="goAround"><img src="@/assets/dance/btn06.png">Around Activity</div>-->
46 <!-- </el-col>--> 77 <!-- </el-col>-->
47 78
48 <!-- <el-col :sm="12" :lg="4" :xs="12">--> 79 <!-- <el-col :sm="12" :lg="4" :xs="12">-->
49 <!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>--> 80 <!-- <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>-->
50 <!-- </el-col>--> 81 <!-- </el-col>-->
...@@ -101,7 +132,7 @@ watch(matchId, (val) => { ...@@ -101,7 +132,7 @@ watch(matchId, (val) => {
101 console.log(err) 132 console.log(err)
102 form.value = null 133 form.value = null
103 }) 134 })
104 135
105 match.getInfoByCptId({cptId: props.matchId}).then((res) => { 136 match.getInfoByCptId({cptId: props.matchId}).then((res) => {
106 liveData.value = res.data || {} 137 liveData.value = res.data || {}
107 }) 138 })
...@@ -110,9 +141,9 @@ watch(matchId, (val) => { ...@@ -110,9 +141,9 @@ watch(matchId, (val) => {
110 141
111 const liveClick = () => { 142 const liveClick = () => {
112 if (liveData.value.videoStatus == "1") { 143 if (liveData.value.videoStatus == "1") {
113 144
114 if (language.value == 0) { 145 if (language.value == 0) {
115 146
116 window.open(liveData.value.videoUrlCn) 147 window.open(liveData.value.videoUrlCn)
117 } else { 148 } else {
118 window.open(liveData.value.videoUrlEn) 149 window.open(liveData.value.videoUrlEn)
...@@ -136,7 +167,7 @@ onMounted(() => { ...@@ -136,7 +167,7 @@ onMounted(() => {
136 167
137 function building() { 168 function building() {
138 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.') 169 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
139 170
140 } 171 }
141 172
142 function applyInvitation() { 173 function applyInvitation() {
...@@ -163,19 +194,19 @@ function goMedia() { ...@@ -163,19 +194,19 @@ function goMedia() {
163 useStore.setVisitor() 194 useStore.setVisitor()
164 return 195 return
165 } 196 }
166 197
167 proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value}) 198 proxy.$refs['mediaRegisterRef'].open({cptId: matchId.value})
168 } 199 }
169 200
170 function popRemark(type) { 201 function popRemark(type) {
171 if(!matchId.value){ 202 if (!matchId.value) {
172 return; 203 return;
173 } 204 }
174 if (!form.value) { 205 if (!form.value) {
175 building() 206 building()
176 return 207 return
177 } 208 }
178 209
179 if (type == '0') { 210 if (type == '0') {
180 // ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.') 211 // ElMessage.warning('The visa invitation letter application will be available soon. Thank you for your patience.')
181 // return; 212 // return;
...@@ -188,7 +219,7 @@ function popRemark(type) { ...@@ -188,7 +219,7 @@ function popRemark(type) {
188 building() 219 building()
189 return 220 return
190 } 221 }
191 222
192 if (!useStore.user) { 223 if (!useStore.user) {
193 // ElMessage({ 224 // ElMessage({
194 // type: 'warning', 225 // type: 'warning',
...@@ -197,12 +228,12 @@ function popRemark(type) { ...@@ -197,12 +228,12 @@ function popRemark(type) {
197 useStore.setVisitor() 228 useStore.setVisitor()
198 return 229 return
199 } 230 }
200 231
201 applyInvitation() 232 applyInvitation()
202 return 233 return
203 } 234 }
204 } 235 }
205 236
206 if ((form.value.isJdView == 0 && type == '1') 237 if ((form.value.isJdView == 0 && type == '1')
207 || (form.value.isCarView == 0 && type == '2') 238 || (form.value.isCarView == 0 && type == '2')
208 || (form.value.isFoodView == 0 && type == '3') 239 || (form.value.isFoodView == 0 && type == '3')
...@@ -213,7 +244,7 @@ function popRemark(type) { ...@@ -213,7 +244,7 @@ function popRemark(type) {
213 building() 244 building()
214 return 245 return
215 } 246 }
216 247
217 if (type == '2') { 248 if (type == '2') {
218 if (!useStore.user) { 249 if (!useStore.user) {
219 // ElMessage({ 250 // ElMessage({
...@@ -223,12 +254,12 @@ function popRemark(type) { ...@@ -223,12 +254,12 @@ function popRemark(type) {
223 useStore.setVisitor() 254 useStore.setVisitor()
224 return 255 return
225 } 256 }
226 257
227 emit("pickUp") 258 emit("pickUp")
228 return; 259 return;
229 } 260 }
230 261
231 262
232 const params = { 263 const params = {
233 matchId: props.matchId, 264 matchId: props.matchId,
234 title: language.value == 0 ? '预订说明' : 'Booking Instructions', 265 title: language.value == 0 ? '预订说明' : 'Booking Instructions',
...@@ -236,7 +267,7 @@ function popRemark(type) { ...@@ -236,7 +267,7 @@ function popRemark(type) {
236 cptName: props.cptName 267 cptName: props.cptName
237 } 268 }
238 proxy.$refs['orderRemarkRef'].open(params) 269 proxy.$refs['orderRemarkRef'].open(params)
239 270
240 // goBooking(type) 271 // goBooking(type)
241 } 272 }
242 273
...@@ -244,7 +275,7 @@ function goBooking(n, f) { ...@@ -244,7 +275,7 @@ function goBooking(n, f) {
244 switch (n) { 275 switch (n) {
245 case 10: 276 case 10:
246 // 票务 277 // 票务
247 278
248 // router.push({ 279 // router.push({
249 // path: `/booking/ticket/${props.matchId}`, 280 // path: `/booking/ticket/${props.matchId}`,
250 // params: {id:props.matchId}, 281 // params: {id:props.matchId},
...@@ -281,7 +312,7 @@ function goBooking(n, f) { ...@@ -281,7 +312,7 @@ function goBooking(n, f) {
281 <style lang="scss" scoped> 312 <style lang="scss" scoped>
282 .itemBox, .itemBox_en { 313 .itemBox, .itemBox_en {
283 padding: 20px; 314 padding: 20px;
284 background: #fff; 315 background: #211D50;
285 box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08); 316 box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08);
286 border-radius: 20px; 317 border-radius: 20px;
287 } 318 }
...@@ -298,39 +329,72 @@ function goBooking(n, f) { ...@@ -298,39 +329,72 @@ function goBooking(n, f) {
298 align-items: center; 329 align-items: center;
299 justify-content: center; 330 justify-content: center;
300 font-size: 20px; 331 font-size: 20px;
301 background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF; 332 //background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
302 background-size: 100% 100%; 333 background-size: 100% 100%;
303 border-radius: 15px; 334 border-radius: 15px;
304 gap: 10px; 335 gap: 10px;
305 336 color: #fff;
306 img { 337 height: 95px;
307 object-fit: contain; 338
308 width: 75px; 339 &:hover {
309 height: 75px; 340 box-shadow: 0 0 10px #eee;
341
342 //img {
343 // transform: rotateY(180deg);
344 //}
345 //
346 //p {
347 // color: #000;
348 //}
310 } 349 }
311 } 350 }
312 351
352 .bgImg1 {
353 background: url("@/assets/pc/btn_bg01.png") no-repeat;
354 background-size: 100%;
355 }
356
357 .bgImg2 {
358 background: url("@/assets/pc/btn_bg02.png") no-repeat;
359 background-size: 100%;
360 }
361
362 .bgImg3 {
363 background: url("@/assets/pc/btn_bg03.png") no-repeat;
364 background-size: 100%;
365 }
366
367 .bgImg4 {
368 background: url("@/assets/pc/btn_bg04.png") no-repeat;
369 background-size: 100%;
370 }
371
372 .bgImg5 {
373 background: url("@/assets/pc/btn_bg05.png") no-repeat;
374 background-size: 100%;
375 }
376
313 .itemBox_en .item { 377 .itemBox_en .item {
314 flex-direction: column; 378 flex-direction: column;
315 text-align: center; 379 text-align: center;
316 text-transform: uppercase; 380 text-transform: uppercase;
317 height: 100%; 381 height: 100%;
318 382
319 img { 383 img {
320 position: relative; 384 position: relative;
321 transition: all 0.2s; 385 transition: all 0.2s;
322 } 386 }
323 387
324 &:hover { 388 &:hover {
325 box-shadow: 0 0 10px #eee; 389 box-shadow: 0 0 10px #eee;
326 390
327 img { 391 //img {
328 transform: rotateY(180deg); 392 // transform: rotateY(180deg);
329 } 393 //}
330 394 //
331 p { 395 //p {
332 color: #000; 396 // color: #000;
333 } 397 //}
334 } 398 }
335 } 399 }
336 400
...@@ -343,7 +407,7 @@ function goBooking(n, f) { ...@@ -343,7 +407,7 @@ function goBooking(n, f) {
343 height: auto !important; 407 height: auto !important;
344 padding: 15px 0; 408 padding: 15px 0;
345 margin: 10px 0; 409 margin: 10px 0;
346 410
347 img { 411 img {
348 width: 50px; 412 width: 50px;
349 height: 50px 413 height: 50px
...@@ -353,5 +417,7 @@ function goBooking(n, f) { ...@@ -353,5 +417,7 @@ function goBooking(n, f) {
353 max-width: 50%; 417 max-width: 50%;
354 flex: 0 0 50%; 418 flex: 0 0 50%;
355 } 419 }
420
421
356 } 422 }
357 </style> 423 </style>
......
vite.config.js
...@@ -83,11 +83,11 @@ export default defineConfig(({mode, command}) => { ...@@ -83,11 +83,11 @@ export default defineConfig(({mode, command}) => {
83 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 83 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
84 }, 84 },
85 '/dev-api': { 85 '/dev-api': {
86 target: 'http://192.168.1.118:8082/', 86 // target: 'http://192.168.1.118:8082/',
87 // target: 'http://192.168.1.131:8081/', 87 // target: 'http://192.168.1.131:8081/',
88 // target: 'https://jijin.wtwuxicenter.com/stage-api', 88 // target: 'https://tk005.wxjylt.com/stage-api',
89 // target: 'http://124.70.181.90:1880/stage-api', 89 // target: 'http://124.70.181.90:1880/stage-api',
90 // target: 'https://sys.2025wtcwuxi.com/stage-api/', 90 target: 'https://sys.2025wtcwuxi.com/stage-api/',
91 changeOrigin: true, 91 changeOrigin: true,
92 rewrite: (p) => p.replace(/^\/dev-api/, '') 92 rewrite: (p) => p.replace(/^\/dev-api/, '')
93 }, 93 },
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!