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
import request from '@/utils/request'
export function getHotelList(params) {
return request({
// url: `/logex/activityHotel/list`,
url: `/league/competition/webList`,
method: 'get',
params: params
})
}
......
src/viewsPc/booking/dinner.vue
<template>
<div>
<div>
<div class="banner">
<img src="@/assets/booking/cy_text.png">
</div>
<div class="box">
<div class="searchBar">
<el-input placeholder="请输入关键字搜索" v-model="query.name" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search">搜索</el-button>
</div>
</div>
<div class="box">
<el-card class="mt30"></el-card>
<el-row :gutter="20">
<el-col :span="12" v-for="(h,index) in list" class="mb20">
<el-card>
<!-- 酒店列表-->
<el-row class="hotel" align="middle">
<el-col :span="12">
<img/>
</el-col>
<el-col :span="12">
<h3>{{h.name}}</h3>
<p>
<el-icon><LocationFilled /></el-icon>
{{h.address}}
</p>
<div class="price">¥<span>450</span><i>起</i></div>
<el-button class="btn-lineG" round type="primary" size="large">立即预约 ⇀</el-button>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script setup>
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
const query = ref({
name:''
})
const list = ref([''])
onMounted(()=>{
getList()
})
function getList() {
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
})
}
</script>
<style scoped>
<style scoped lang="scss">
.hotel{}
.banner{height: 140px;background-size: cover;text-align: center;
background: url("@/assets/booking/cy_bg.png") center;display: flex;align-items: center;
justify-content: center;
img{display: block;margin:-30px auto 0;width: auto;}
}
.searchBar{position: relative;top: -30px;
background: #FFFFFF;display: flex;padding: 20px;
border-radius: 10px;}
.no-border{border: none;background: #F5F7F9;
:deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
}
</style>
......
src/viewsPc/booking/hotel.vue
......@@ -12,13 +12,13 @@
</div>
<div class="box">
<el-card v-for="(h,index) in list">
<el-card v-for="(h,index) in list" class="mb20">
<!-- 酒店列表-->
<div>
<div>
<el-row class="hotel" align="middle">
<el-col :span="8">
<img/>
</div>
<div>
</el-col>
<el-col :span="8">
<h3>{{h.name}}</h3>
<div>
<img src="@/assets/booking/star.png">
......@@ -30,8 +30,12 @@
<el-icon><LocationFilled /></el-icon>
{{h.address}}
</p>
</div>
</div>
</el-col>
<el-col :span="8" class="text-right">
<div class="price">¥<span>450</span><i>起</i></div>
<el-button class="btn-lineG w200px" round type="primary" size="large">立即预约 ⇀</el-button>
</el-col>
</el-row>
</el-card>
</div>
......@@ -39,19 +43,25 @@
</template>
<script setup>
import {onMounted} from "@vue/runtime-core";
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
const query = ref({
name:''
})
const list = ref([''])
onMounted(()=>{
getList()
})
function getList() {
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
})
}
</script>
<style scoped lang="scss">
.hotel{}
.banner{height: 140px;background-size: cover;text-align: center;
background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
justify-content: center;
......
src/viewsPc/components/homeQuick.vue
......@@ -2,30 +2,69 @@
<div class="itemBox" v-if="language == 0">
<el-row :gutter="20">
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn01.png">酒店预订</div>
<div class="item" @click="goBooking(1)"><img src="@/assets/dance/btn01.png">酒店预订</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn02.png">车辆预约</div>
<div class="item" @click="goBooking(2)"><img src="@/assets/dance/btn02.png">车辆预约</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn03.png">餐饮预约</div>
<div class="item" @click="goBooking(3)"><img src="@/assets/dance/btn03.png">餐饮预约</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn04.png">票务预订</div>
<div class="item" @click="goBooking(0)"><img src="@/assets/dance/btn04.png">票务预订</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn05.png">化妆预约</div>
<div class="item" @click="goBooking(4)"><img src="@/assets/dance/btn05.png">化妆预约</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn06.png">拍照预约</div>
<div class="item" @click="goBooking(5)"><img src="@/assets/dance/btn06.png">拍照预约</div>
</el-col>
</el-row>
</div>
<div class="itemBox_en" v-else>
<el-row :gutter="20">
<el-col :sm="12" :lg="8">
<div class="item_en" @click="goBooking(1)"><img src="@/assets/dance/btn01.png">
<p>Hotel Reservation</p>
</div></el-col>
<el-col :sm="12" :lg="8">
<div class="item_en" @click="goBooking(2)"><img src="@/assets/dance/btn02.png">
<p>Vehicle Reservation</p>
</div></el-col>
<el-col :sm="12" :lg="8">
<div class="item_en" @click="goBooking(3)"><img src="@/assets/dance/btn03.png">
<p>Dining Reservation</p>
</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item_en" @click="goBooking(0)"><img src="@/assets/dance/btn04.png">
<p>Ticket Booking</p>
</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item_en" @click="goBooking(4)"><img src="@/assets/dance/btn05.png">
<p>Makeup Appointment</p>
</div></el-col>
<el-col :sm="12" :lg="8">
<div class="item_en" @click="goBooking(5)"><img src="@/assets/dance/btn06.png">
<p>Photography Appointment</p>
</div></el-col>
</el-row>
</div>
</template>
<script setup>
import {useStorage} from "@vueuse/core/index";
import {useRouter} from "vue-router";
const router = useRouter()
import {useStorage} from "@vueuse/core/index";
const props = defineProps({
matchId: {
type: String,
required: true,
default: '0'
}
})
const language= useStorage('language',0)
function goBooking(n) {
switch (n) {
......@@ -61,4 +100,31 @@ function goBooking(n) {
.itemBox {
padding: 20px 40px;
}
.itemBox_en{
padding: 20px 40px;
p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;}
}
.item {
box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
margin: 10px 0;
display: flex;
align-items: center;
font-size: 22px;
background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
background-size: 100% 100%;
border-radius: 15px;
img {
margin: 0 5%;
}
}
.item_en{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;
display: flex;align-items: center;text-align: center;
font-size: 18px; flex-direction: column;padding: 35px 10px 20px;
background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
background-size: cover;
position: relative;
border-radius: 15px;
img{position: absolute;top: -30px}
}
</style>
......
src/viewsPc/index.vue
......@@ -579,20 +579,7 @@ const popWeather = () => {
align-items: center;
}
.item {
box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
margin: 10px 0;
display: flex;
align-items: center;
font-size: 22px;
background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
background-size: 100% 100%;
border-radius: 15px;
img {
margin: 0 5%;
}
}
}
.app-main {
......
src/viewsPc/index_en.vue
......@@ -53,37 +53,7 @@
</div>
</el-col>
<el-col :sm="24" :lg="14">
<div class="itemBox">
<el-row :gutter="20">
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn01.png">
<p>Hotel Reservation</p>
</div></el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn02.png">
<p>Vehicle Reservation</p>
</div></el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn03.png">
<p>Dining Reservation</p>
</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn04.png">
<p>Ticket Booking</p>
</div>
</el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn05.png">
<p>Makeup Appointment</p>
</div></el-col>
<el-col :sm="12" :lg="8">
<div class="item"><img src="@/assets/dance/btn06.png">
<p>Photography Appointment</p>
</div></el-col>
</el-row>
</div>
<HomeQuick :match-id="matchData?.id"/>
</el-col>
</el-row>
</div>
......@@ -408,6 +378,7 @@
</div>
</template>
<script setup>
import HomeQuick from '@/viewsPc/components/homeQuick'
import { ref, nextTick, onMounted, watch } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite'
......@@ -549,24 +520,11 @@ const popWeather = () => {
justify-content: space-between;
img{margin: 5% 0}
}
.itemBox{
padding: 20px 40px;
p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;}
}
border-radius: 15px;
.zn-btn{background: #FFFFFF;
font-size: 18px; width: fit-content;
color: #453DEA;
border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;}
.item{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;
display: flex;align-items: center;text-align: center;
font-size: 18px; flex-direction: column;padding: 35px 10px 20px;
background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
background-size: cover;
position: relative;
border-radius: 15px;
img{position: absolute;top: -30px}
}
}
.app-main {
......
vite.config.js
......@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
},
'/dev-api': {
// target: 'http://192.168.1.118:8081/',
target: 'https://dance.itechtop.cn/stage-api',
target: 'http://192.168.1.118:8081/',
// target: 'https://dance.itechtop.cn/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!