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
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,15 +130,18 @@ li.el-select-dropdown__item { ...@@ -122,15 +130,18 @@ 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);
...@@ -143,14 +154,20 @@ li.el-select-dropdown__item { ...@@ -143,14 +154,20 @@ li.el-select-dropdown__item {
143 154
144 .home-menu { 155 .home-menu {
145 156
146 .el-menu {color: #000;} 157 .el-menu {
158 color: #000;
159 }
147 160
148 .el-menu--horizontal>.el-menu-item { 161 .el-menu--horizontal > .el-menu-item {
149 transition: none;color: #000;padding: 6px 0 ;margin: 0 10px; 162 transition: none;
163 color: #000;
164 padding: 6px 0;
165 margin: 0 10px;
150 } 166 }
151 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 {
...@@ -164,21 +181,31 @@ li.el-select-dropdown__item { ...@@ -164,21 +181,31 @@ li.el-select-dropdown__item {
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);
187 }
188
189 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
190 background: transparent;
168 } 191 }
169 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;
...@@ -245,39 +276,82 @@ li.el-select-dropdown__item { ...@@ -245,39 +276,82 @@ li.el-select-dropdown__item {
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;
267 } 327 }
268 h3{position: absolute;bottom: 0;color: #fff; 328 }
269 font-size: 36px;margin: 0; 329
270 text-align: center;width: 100%;padding: 60px 0 40px; 330 h3 {
271 background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0)); 331 position: absolute;
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
363 .tag1 {
289 background: rgba(50, 177, 108, 0.2); 364 background: rgba(50, 177, 108, 0.2);
290 color:rgba(50, 177, 108, 1); 365 color: rgba(50, 177, 108, 1);
291 } 366 }
292 .tag2{ 367
368 .tag2 {
293 background-color: rgba(243, 152, 0, 0.2); 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/AppBottom.vue
1 <template> 1 <template>
2 <div class="footAll"> 2 <div class="footAll">
3 <div class="box" style="max-width: 90%"> 3 <div class="box" style="max-width: 90%">
4 <el-row v-if="language==0" justify="space-between" align="middle"> 4 <el-row v-if="language==0" align="middle" justify="space-between">
5 <el-col :lg="10" :md="10" :xs="10"> 5 <el-col :lg="10" :md="10" :xs="10">
6 <ul> 6 <div>
7 <li>邮编：214000</li> 7 <img alt="" src="@/assets/pc/bottom_logo.png">
8 <li>微信: 18806179528</li> 8 </div>
9 <!-- <li>QQ: 497118883</li>-->
10 <li>江苏省 无锡市太湖新城和风路与清舒交叉口东北100米</li>
11 </ul>
12 </el-col> 9 </el-col>
13 <el-col :lg="10" :md="10" :xs="10"> 10 <el-col :lg="10" :md="10" :xs="10">
14 <ul style="text-align: right"> 11 <ul style="text-align: right">
12 <li>邮编：214000</li>
13 <li>微信: 18806179528</li>
14 <!-- <li>QQ: 497118883</li>-->
15 <li>江苏省 无锡市太湖新城和风路与清舒交叉口东北100米</li>
15 <li>客服及报障电话:18806179528</li> 16 <li>客服及报障电话:18806179528</li>
16 <li>客服及报障邮箱: office@2025wtcwuxi.com</li> 17 <li>客服及报障邮箱: office@2025wtcwuxi.com</li>
17 </ul> 18 </ul>
18 </el-col> 19 </el-col>
19 <!-- <el-col :lg="4" :md="4" :xs="4">--> 20 <!-- <el-col :lg="4" :md="4" :xs="4">-->
20 <!-- <div>--> 21 <!-- <div>-->
21 <!-- <img class="mauto" src="/img/wb2.jpg"/>--> 22 <!-- <img class="mauto" src="/img/wb2.jpg"/>-->
22 <!-- <p class="text-center mt10">微博关注</p>--> 23 <!-- <p class="text-center mt10">微博关注</p>-->
23 <!-- </div>--> 24 <!-- </div>-->
24 <!-- </el-col>--> 25 <!-- </el-col>-->
25 <el-col :span="24" style="border-top: 1px solid #fff"> 26 <el-col :span="24" style="border-top: 1px solid #fff">
26 <div class="text-center copyright pd10">版权所有@无锡和畅赛事运营有限公司 27 <div class="text-center copyright pd10">版权所有@无锡和畅赛事运营有限公司
27 <a target="_blank" href="https://beian.miit.gov.cn/">ICP备案号：苏ICP备2023054420号-2</a></div> 28 <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a></div>
28 </el-col> 29 </el-col>
29 </el-row> 30 </el-row>
30 31
31 <el-row justify="space-between" align="middle" v-if="language===1"> 32 <el-row v-if="language===1" align="middle" justify="space-between">
32 <el-col :span="14"> 33 <el-col :span="14">
33 <ul> 34 <!-- <ul>-->
35 <!-- <li>Postal code：214000</li>-->
36 <!-- <li>Address：100 meters northeast of the intersection of Hefeng Road and Qingshu, the Taihu Lake New Town,-->
37 <!-- Wuxi, Jiangsu-->
38 <!-- </li>-->
39 <!-- </ul>-->
40 <div>
41 <img alt="" src="@/assets/pc/bottom_logo.png">
42 </div>
43 </el-col>
44 <el-col :span="6">
45 <ul style="text-align: right">
34 <li>Postal code：214000</li> 46 <li>Postal code：214000</li>
35 <li>Address：100 meters northeast of the intersection of Hefeng Road and Qingshu, the Taihu Lake New Town, 47 <li>Address：100 meters northeast of the intersection of Hefeng Road and Qingshu, the Taihu Lake New Town,
36 Wuxi, Jiangsu 48 Wuxi, Jiangsu
37 </li> 49 </li>
38 </ul>
39 </el-col>
40 <el-col :span="6">
41 <ul style="text-align: right">
42 <li>Telephone:086-18806179528</li> 50 <li>Telephone:086-18806179528</li>
43 <li>E-mail:office@2025wtcwuxi.com</li> 51 <li>E-mail:office@2025wtcwuxi.com</li>
44 </ul> 52 </ul>
45 </el-col> 53 </el-col>
46 <!-- <el-col :span="4">--> 54 <!-- <el-col :span="4">-->
47 <!-- <div>--> 55 <!-- <div>-->
48 <!-- <img class="mauto" src="/img/wb2.jpg"/>--> 56 <!-- <img class="mauto" src="/img/wb2.jpg"/>-->
49 <!-- <p class="text-center mt10">Weibo</p>--> 57 <!-- <p class="text-center mt10">Weibo</p>-->
50 <!-- </div>--> 58 <!-- </div>-->
51 <!-- </el-col>--> 59 <!-- </el-col>-->
52 <el-col :span="24" style="border-top: 1px solid #fff"> 60 <el-col :span="24" style="border-top: 1px solid #fff">
53 <div class="text-center copyright pd10">Copyright@Wuxi Hechang Sports Operations Co., Ltd 61 <div class="text-center copyright pd10">Copyright@Wuxi Hechang Sports Operations Co., Ltd
54 <a target="_blank" href="https://beian.miit.gov.cn/">ICP：苏ICP备2023054420号-2</a></div> 62 <a href="https://beian.miit.gov.cn/" target="_blank">ICP：苏ICP备2023054420号-2</a></div>
55 </el-col> 63 </el-col>
56 </el-row> 64 </el-row>
57 </div> 65 </div>
58 </div> 66 </div>
59 <!-- <div class="fixed-right forPc">--> 67 <!-- <div class="fixed-right forPc">-->
60 <!-- <div class="mlb" v-if="language===0">--> 68 <!-- <div class="mlb" v-if="language===0">-->
61 <!-- <div @click="goAround" class="mb10 pb5">--> 69 <!-- <div @click="goAround" class="mb10 pb5">-->
62 <!-- <a>--> 70 <!-- <a>-->
63 <!-- <img class="kf" src="@/assets/logo/btn02.png"/>--> 71 <!-- <img class="kf" src="@/assets/logo/btn02.png"/>-->
64 <!-- <div class="text-center mt10">周边活动</div>--> 72 <!-- <div class="text-center mt10">周边活动</div>-->
65 <!-- </a>--> 73 <!-- </a>-->
66 <!-- </div>--> 74 <!-- </div>-->
67 <!-- <div--> 75 <!-- <div-->
68 <!-- style="display: none" title="客服"--> 76 <!-- style="display: none" title="客服"-->
69 <!-- 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')"--> 77 <!-- 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')"-->
70 <!-- >--> 78 <!-- >-->
71 <!-- <img class="kf" src="@/assets/logo/btn01.png"/>--> 79 <!-- <img class="kf" src="@/assets/logo/btn01.png"/>-->
72 <!-- <div class="text-center mt10">在线客服</div>--> 80 <!-- <div class="text-center mt10">在线客服</div>-->
73 <!-- </div>--> 81 <!-- </div>-->
74 <!-- &lt;!&ndash; <div @click="goHelpZH">&ndash;&gt;--> 82 <!-- &lt;!&ndash; <div @click="goHelpZH">&ndash;&gt;-->
75 <!-- &lt;!&ndash; <a>&ndash;&gt;--> 83 <!-- &lt;!&ndash; <a>&ndash;&gt;-->
76 <!-- &lt;!&ndash; <img class="kf" src="@/assets/logo/btn02.png"/>&ndash;&gt;--> 84 <!-- &lt;!&ndash; <img class="kf" src="@/assets/logo/btn02.png"/>&ndash;&gt;-->
77 <!-- &lt;!&ndash; <div class="text-center mt10">周边活动</div>&ndash;&gt;--> 85 <!-- &lt;!&ndash; <div class="text-center mt10">周边活动</div>&ndash;&gt;-->
78 <!-- &lt;!&ndash; </a>&ndash;&gt;--> 86 <!-- &lt;!&ndash; </a>&ndash;&gt;-->
79 <!-- &lt;!&ndash; </div>&ndash;&gt;--> 87 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
80 <!-- </div>--> 88 <!-- </div>-->
81 <!-- <div class="mlb" v-else>--> 89 <!-- <div class="mlb" v-else>-->
82 <!-- <div @click="goAround" class="mb10 pb5">--> 90 <!-- <div @click="goAround" class="mb10 pb5">-->
83 <!-- <a>--> 91 <!-- <a>-->
84 <!-- <img class="kf" src="@/assets/logo/btn02.png"/>--> 92 <!-- <img class="kf" src="@/assets/logo/btn02.png"/>-->
85 <!-- <div class="text-center mt10">ACTIVITIES</div>--> 93 <!-- <div class="text-center mt10">ACTIVITIES</div>-->
86 <!-- </a>--> 94 <!-- </a>-->
87 <!-- </div>--> 95 <!-- </div>-->
88 <!--&lt;!&ndash; <div&ndash;&gt;--> 96 <!--&lt;!&ndash; <div&ndash;&gt;-->
89 <!--&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;--> 97 <!--&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;-->
90 <!--&lt;!&ndash; title="Live Chat">&ndash;&gt;--> 98 <!--&lt;!&ndash; title="Live Chat">&ndash;&gt;-->
91 <!--&lt;!&ndash; <img class="kf" src="@/assets/logo/btn01.png"/>&ndash;&gt;--> 99 <!--&lt;!&ndash; <img class="kf" src="@/assets/logo/btn01.png"/>&ndash;&gt;-->
92 <!--&lt;!&ndash; <div class="text-center ">LIVE CHAT</div>&ndash;&gt;--> 100 <!--&lt;!&ndash; <div class="text-center ">LIVE CHAT</div>&ndash;&gt;-->
93 <!--&lt;!&ndash; </div>&ndash;&gt;--> 101 <!--&lt;!&ndash; </div>&ndash;&gt;-->
94 <!-- &lt;!&ndash; <div @click="goHelp">&ndash;&gt;--> 102 <!-- &lt;!&ndash; <div @click="goHelp">&ndash;&gt;-->
95 <!-- &lt;!&ndash; <img class="kf" src="@/assets/logo/btn02.png"/>&ndash;&gt;--> 103 <!-- &lt;!&ndash; <img class="kf" src="@/assets/logo/btn02.png"/>&ndash;&gt;-->
96 <!-- &lt;!&ndash; <div class="text-center uppercase">Video Guide</div>&ndash;&gt;--> 104 <!-- &lt;!&ndash; <div class="text-center uppercase">Video Guide</div>&ndash;&gt;-->
97 <!-- &lt;!&ndash; </div>&ndash;&gt;--> 105 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
98 <!-- </div>--> 106 <!-- </div>-->
99 <!-- </div>--> 107 <!-- </div>-->
100 </template> 108 </template>
101 109
102 <script setup> 110 <script setup>
...@@ -168,14 +176,10 @@ const goAround = () => { ...@@ -168,14 +176,10 @@ const goAround = () => {
168 } 176 }
169 } 177 }
170 178
171 .copyright {
172 font-size: 14px;
173 opacity: 0.88;
174 color: #4C5359;
175 }
176 179
177 .footAll { 180 .footAll {
178 background: #E0E3E5;; 181 //background: #E0E3E5;
182 background: url("@/assets/pc/bottom_bg.png");
179 padding: 36px 0 5px; 183 padding: 36px 0 5px;
180 184
181 p { 185 p {
...@@ -190,8 +194,8 @@ const goAround = () => { ...@@ -190,8 +194,8 @@ const goAround = () => {
190 li { 194 li {
191 line-height: 30px; 195 line-height: 30px;
192 font-size: 14px; 196 font-size: 14px;
193 opacity: 0.88; 197 opacity: 1;
194 color: #4C5359; 198 color: #fff;
195 199
196 a { 200 a {
197 margin-left: 15px; 201 margin-left: 15px;
...@@ -208,6 +212,12 @@ const goAround = () => { ...@@ -208,6 +212,12 @@ const goAround = () => {
208 } 212 }
209 } 213 }
210 214
215 .copyright {
216 font-size: 14px;
217 //opacity: 0.88;
218 color: #fff;
219 }
220
211 .gradient-text { 221 .gradient-text {
212 font-family: FZJunHeiS-B-GB; 222 font-family: FZJunHeiS-B-GB;
213 font-weight: 600; 223 font-weight: 600;
......
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>
...@@ -29,11 +37,12 @@ ...@@ -29,11 +37,12 @@
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;
......
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,19 +43,34 @@ ...@@ -27,19 +43,34 @@
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>-->
...@@ -168,7 +199,7 @@ function goMedia() { ...@@ -168,7 +199,7 @@ function goMedia() {
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) {
...@@ -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,18 +329,51 @@ function goBooking(n, f) { ...@@ -298,18 +329,51 @@ 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;
336 color: #fff;
337 height: 95px;
305 338
306 img { 339 &:hover {
307 object-fit: contain; 340 box-shadow: 0 0 10px #eee;
308 width: 75px; 341
309 height: 75px; 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;
...@@ -324,13 +388,13 @@ function goBooking(n, f) { ...@@ -324,13 +388,13 @@ function goBooking(n, f) {
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
...@@ -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!