Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
29d49653 by 杨炀
Options

no message

1 parent 7e1d5ab2
Inline Side-by-side
Showing 9 changed files with 168 additions and 81 deletions
src/apiPc/booking.js
1 import request from '@/utils/request'
2 export function getHotelList(params) {
3 return request({
4 // url: `/logex/activityHotel/list`,
5 url: `/league/competition/webList`,
6 method: 'get',
7 params: params
8 })
9 }
......
src/viewsPc/booking/dinner.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="banner">
4 <img src="@/assets/booking/cy_text.png">
5 </div>
6 <div class="box">
7 <div class="searchBar">
8 <el-input placeholder="请输入关键字搜索" v-model="query.name" class="no-border">
9 </el-input>
10 <el-button size="large" type="primary" class="btn-lineG" icon="search">搜索</el-button>
11 </div>
12 </div>
13
3 <div class="box"> 14 <div class="box">
4 <el-card class="mt30"></el-card> 15 <el-row :gutter="20">
16 <el-col :span="12" v-for="(h,index) in list" class="mb20">
17 <el-card>
18 <!-- 酒店列表-->
19 <el-row class="hotel" align="middle">
20 <el-col :span="12">
21 <img/>
22 </el-col>
23 <el-col :span="12">
24 <h3>{{h.name}}</h3>
25 <p>
26 <el-icon><LocationFilled /></el-icon>
27 {{h.address}}
28 </p>
29 <div class="price">¥<span>450</span><i>起</i></div>
30 <el-button class="btn-lineG" round type="primary" size="large">立即预约 ⇀</el-button>
31
32 </el-col>
33 </el-row>
34 </el-card>
35 </el-col>
36 </el-row>
5 37
6 </div> 38 </div>
7 39
8 </div> 40 </div>
9 </template> 41 </template>
10 42
11 <script setup> 43 <script setup>
44 import {onMounted} from "@vue/runtime-core"
45 import * as booking from "@/apiPc/booking"
46 const query = ref({
47 name:''
48 })
49 const list = ref([''])
50 onMounted(()=>{
51 getList()
52 })
12 53
54 function getList() {
55 booking.getHotelList(query.value).then(res=>{
56 list.value = res.rows
57 })
58 }
13 </script> 59 </script>
14 60
15 <style scoped> 61 <style scoped lang="scss">
16 62 .hotel{}
63 .banner{height: 140px;background-size: cover;text-align: center;
64 background: url("@/assets/booking/cy_bg.png") center;display: flex;align-items: center;
65 justify-content: center;
66 img{display: block;margin:-30px auto 0;width: auto;}
67 }
68 .searchBar{position: relative;top: -30px;
69 background: #FFFFFF;display: flex;padding: 20px;
70 border-radius: 10px;}
71 .no-border{border: none;background: #F5F7F9;
72 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
73 }
17 </style> 74 </style>
......
src/viewsPc/booking/hotel.vue
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
12 </div> 12 </div>
13 13
14 <div class="box"> 14 <div class="box">
15 <el-card v-for="(h,index) in list"> 15 <el-card v-for="(h,index) in list" class="mb20">
16 <!-- 酒店列表--> 16 <!-- 酒店列表-->
17 <div> 17 <el-row class="hotel" align="middle">
18 <div> 18 <el-col :span="8">
19 <img/> 19 <img/>
20 </div> 20 </el-col>
21 <div> 21 <el-col :span="8">
22 <h3>{{h.name}}</h3> 22 <h3>{{h.name}}</h3>
23 <div> 23 <div>
24 <img src="@/assets/booking/star.png"> 24 <img src="@/assets/booking/star.png">
...@@ -30,8 +30,12 @@ ...@@ -30,8 +30,12 @@
30 <el-icon><LocationFilled /></el-icon> 30 <el-icon><LocationFilled /></el-icon>
31 {{h.address}} 31 {{h.address}}
32 </p> 32 </p>
33 </div> 33 </el-col>
34 </div> 34 <el-col :span="8" class="text-right">
35 <div class="price">¥<span>450</span><i>起</i></div>
36 <el-button class="btn-lineG w200px" round type="primary" size="large">立即预约 ⇀</el-button>
37 </el-col>
38 </el-row>
35 </el-card> 39 </el-card>
36 </div> 40 </div>
37 41
...@@ -39,19 +43,25 @@ ...@@ -39,19 +43,25 @@
39 </template> 43 </template>
40 44
41 <script setup> 45 <script setup>
42 import {onMounted} from "@vue/runtime-core"; 46 import {onMounted} from "@vue/runtime-core"
43 47 import * as booking from "@/apiPc/booking"
44 const query = ref({ 48 const query = ref({
45 name:'' 49 name:''
46 }) 50 })
47 const list = ref(['']) 51 const list = ref([''])
48 onMounted(()=>{ 52 onMounted(()=>{
49 53 getList()
50 }) 54 })
51 55
56 function getList() {
57 booking.getHotelList(query.value).then(res=>{
58 list.value = res.rows
59 })
60 }
52 </script> 61 </script>
53 62
54 <style scoped lang="scss"> 63 <style scoped lang="scss">
64 .hotel{}
55 .banner{height: 140px;background-size: cover;text-align: center; 65 .banner{height: 140px;background-size: cover;text-align: center;
56 background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center; 66 background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
57 justify-content: center; 67 justify-content: center;
......
src/viewsPc/components/homeQuick.vue
...@@ -2,30 +2,69 @@ ...@@ -2,30 +2,69 @@
2 <div class="itemBox" v-if="language == 0"> 2 <div class="itemBox" v-if="language == 0">
3 <el-row :gutter="20"> 3 <el-row :gutter="20">
4 <el-col :sm="12" :lg="8"> 4 <el-col :sm="12" :lg="8">
5 <div class="item"><img src="@/assets/dance/btn01.png">酒店预订</div> 5 <div class="item" @click="goBooking(1)"><img src="@/assets/dance/btn01.png">酒店预订</div>
6 </el-col> 6 </el-col>
7 <el-col :sm="12" :lg="8"> 7 <el-col :sm="12" :lg="8">
8 <div class="item"><img src="@/assets/dance/btn02.png">车辆预约</div> 8 <div class="item" @click="goBooking(2)"><img src="@/assets/dance/btn02.png">车辆预约</div>
9 </el-col> 9 </el-col>
10 <el-col :sm="12" :lg="8"> 10 <el-col :sm="12" :lg="8">
11 <div class="item"><img src="@/assets/dance/btn03.png">餐饮预约</div> 11 <div class="item" @click="goBooking(3)"><img src="@/assets/dance/btn03.png">餐饮预约</div>
12 </el-col> 12 </el-col>
13 <el-col :sm="12" :lg="8"> 13 <el-col :sm="12" :lg="8">
14 <div class="item"><img src="@/assets/dance/btn04.png">票务预订</div> 14 <div class="item" @click="goBooking(0)"><img src="@/assets/dance/btn04.png">票务预订</div>
15 </el-col> 15 </el-col>
16 <el-col :sm="12" :lg="8"> 16 <el-col :sm="12" :lg="8">
17 <div class="item"><img src="@/assets/dance/btn05.png">化妆预约</div> 17 <div class="item" @click="goBooking(4)"><img src="@/assets/dance/btn05.png">化妆预约</div>
18 </el-col> 18 </el-col>
19 <el-col :sm="12" :lg="8"> 19 <el-col :sm="12" :lg="8">
20 <div class="item"><img src="@/assets/dance/btn06.png">拍照预约</div> 20 <div class="item" @click="goBooking(5)"><img src="@/assets/dance/btn06.png">拍照预约</div>
21 </el-col> 21 </el-col>
22 </el-row> 22 </el-row>
23 </div> 23 </div>
24 <div class="itemBox_en" v-else>
25 <el-row :gutter="20">
26 <el-col :sm="12" :lg="8">
27 <div class="item_en" @click="goBooking(1)"><img src="@/assets/dance/btn01.png">
28 <p>Hotel Reservation</p>
29 </div></el-col>
30 <el-col :sm="12" :lg="8">
31 <div class="item_en" @click="goBooking(2)"><img src="@/assets/dance/btn02.png">
32 <p>Vehicle Reservation</p>
33 </div></el-col>
34 <el-col :sm="12" :lg="8">
35 <div class="item_en" @click="goBooking(3)"><img src="@/assets/dance/btn03.png">
36 <p>Dining Reservation</p>
37 </div>
38 </el-col>
39 <el-col :sm="12" :lg="8">
40 <div class="item_en" @click="goBooking(0)"><img src="@/assets/dance/btn04.png">
41 <p>Ticket Booking</p>
42 </div>
43 </el-col>
44 <el-col :sm="12" :lg="8">
45 <div class="item_en" @click="goBooking(4)"><img src="@/assets/dance/btn05.png">
46 <p>Makeup Appointment</p>
47 </div></el-col>
48 <el-col :sm="12" :lg="8">
49 <div class="item_en" @click="goBooking(5)"><img src="@/assets/dance/btn06.png">
50 <p>Photography Appointment</p>
51 </div></el-col>
52 </el-row>
53 </div>
24 </template> 54 </template>
25 55
26 <script setup> 56 <script setup>
27 import {useStorage} from "@vueuse/core/index"; 57 import {useRouter} from "vue-router";
28 58
59 const router = useRouter()
60 import {useStorage} from "@vueuse/core/index";
61 const props = defineProps({
62 matchId: {
63 type: String,
64 required: true,
65 default: '0'
66 }
67 })
29 const language= useStorage('language',0) 68 const language= useStorage('language',0)
30 function goBooking(n) { 69 function goBooking(n) {
31 switch (n) { 70 switch (n) {
...@@ -61,4 +100,31 @@ function goBooking(n) { ...@@ -61,4 +100,31 @@ function goBooking(n) {
61 .itemBox { 100 .itemBox {
62 padding: 20px 40px; 101 padding: 20px 40px;
63 } 102 }
103 .itemBox_en{
104 padding: 20px 40px;
105 p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;}
106 }
107 .item {
108 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
109 margin: 10px 0;
110 display: flex;
111 align-items: center;
112 font-size: 22px;
113 background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
114 background-size: 100% 100%;
115 border-radius: 15px;
116
117 img {
118 margin: 0 5%;
119 }
120 }
121 .item_en{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;
122 display: flex;align-items: center;text-align: center;
123 font-size: 18px; flex-direction: column;padding: 35px 10px 20px;
124 background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
125 background-size: cover;
126 position: relative;
127 border-radius: 15px;
128 img{position: absolute;top: -30px}
129 }
64 </style> 130 </style>
......
src/viewsPc/index.vue
...@@ -579,20 +579,7 @@ const popWeather = () => { ...@@ -579,20 +579,7 @@ const popWeather = () => {
579 align-items: center; 579 align-items: center;
580 } 580 }
581 581
582 .item {
583 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
584 margin: 10px 0;
585 display: flex;
586 align-items: center;
587 font-size: 22px;
588 background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
589 background-size: 100% 100%;
590 border-radius: 15px;
591 582
592 img {
593 margin: 0 5%;
594 }
595 }
596 } 583 }
597 584
598 .app-main { 585 .app-main {
......
src/viewsPc/index_en.vue
...@@ -53,37 +53,7 @@ ...@@ -53,37 +53,7 @@
53 </div> 53 </div>
54 </el-col> 54 </el-col>
55 <el-col :sm="24" :lg="14"> 55 <el-col :sm="24" :lg="14">
56 <div class="itemBox"> 56 <HomeQuick :match-id="matchData?.id"/>
57 <el-row :gutter="20">
58 <el-col :sm="12" :lg="8">
59 <div class="item"><img src="@/assets/dance/btn01.png">
60 <p>Hotel Reservation</p>
61 </div></el-col>
62 <el-col :sm="12" :lg="8">
63 <div class="item"><img src="@/assets/dance/btn02.png">
64 <p>Vehicle Reservation</p>
65 </div></el-col>
66 <el-col :sm="12" :lg="8">
67 <div class="item"><img src="@/assets/dance/btn03.png">
68 <p>Dining Reservation</p>
69 </div>
70 </el-col>
71 <el-col :sm="12" :lg="8">
72 <div class="item"><img src="@/assets/dance/btn04.png">
73 <p>Ticket Booking</p>
74 </div>
75 </el-col>
76 <el-col :sm="12" :lg="8">
77 <div class="item"><img src="@/assets/dance/btn05.png">
78 <p>Makeup Appointment</p>
79 </div></el-col>
80 <el-col :sm="12" :lg="8">
81 <div class="item"><img src="@/assets/dance/btn06.png">
82 <p>Photography Appointment</p>
83 </div></el-col>
84 </el-row>
85 </div>
86
87 </el-col> 57 </el-col>
88 </el-row> 58 </el-row>
89 </div> 59 </div>
...@@ -408,6 +378,7 @@ ...@@ -408,6 +378,7 @@
408 </div> 378 </div>
409 </template> 379 </template>
410 <script setup> 380 <script setup>
381 import HomeQuick from '@/viewsPc/components/homeQuick'
411 import { ref, nextTick, onMounted, watch } from 'vue' 382 import { ref, nextTick, onMounted, watch } from 'vue'
412 import { getCurrentInstance } from '@vue/runtime-core' 383 import { getCurrentInstance } from '@vue/runtime-core'
413 import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite' 384 import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite'
...@@ -549,24 +520,11 @@ const popWeather = () => { ...@@ -549,24 +520,11 @@ const popWeather = () => {
549 justify-content: space-between; 520 justify-content: space-between;
550 img{margin: 5% 0} 521 img{margin: 5% 0}
551 } 522 }
552 .itemBox{
553 padding: 20px 40px;
554 p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;}
555 }
556 border-radius: 15px; 523 border-radius: 15px;
557 .zn-btn{background: #FFFFFF; 524 .zn-btn{background: #FFFFFF;
558 font-size: 18px; width: fit-content; 525 font-size: 18px; width: fit-content;
559 color: #453DEA; 526 color: #453DEA;
560 border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;} 527 border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;}
561 .item{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;
562 display: flex;align-items: center;text-align: center;
563 font-size: 18px; flex-direction: column;padding: 35px 10px 20px;
564 background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
565 background-size: cover;
566 position: relative;
567 border-radius: 15px;
568 img{position: absolute;top: -30px}
569 }
570 } 528 }
571 529
572 .app-main { 530 .app-main {
......
vite.config.js
...@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => { ...@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => {
82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
83 }, 83 },
84 '/dev-api': { 84 '/dev-api': {
85 // target: 'http://192.168.1.118:8081/', 85 target: 'http://192.168.1.118:8081/',
86 target: 'https://dance.itechtop.cn/stage-api', 86 // target: 'https://dance.itechtop.cn/stage-api',
87 changeOrigin: true, 87 changeOrigin: true,
88 rewrite: (p) => p.replace(/^\/dev-api/, '') 88 rewrite: (p) => p.replace(/^\/dev-api/, '')
89 } 89 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!