Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
13a27606 by zhangmeng
Options

新数据

1 parent 682aad45
Expand all
Inline Side-by-side
Showing 6 changed files with 252 additions and 4 deletions
src/App.vue
......@@ -278,4 +278,40 @@ li.el-select-dropdown__item {
@media (max-width: 800px) {
.box{width: 96%}
}
.hz-tag{
border-radius: 13px;
height: 25px;
line-height: 25px;
font-size: 12px;
font-weight: 400;
padding: 0 15px;
}
.tag1{
background: rgba(50, 177, 108, 0.2);
color:rgba(50, 177, 108, 1);
}
.tag2{
background-color: rgba(243, 152, 0, 0.2);
color: #F39800;
}
.tag3{
background-color: rgba(0, 160, 233, 0.2);
color: #00A0E9;
}
.tag4{
background-color: rgba(247, 64, 166, 0.2);
color: #F740A6;
}
.hz-row{
font-size: 14px;
font-weight: 400;
color: #929AA0;
margin-bottom: 16px;
}
.sign{
color: #493CEB;
}
</style>
......
src/routerPc/en.js
......@@ -404,6 +404,12 @@ export const constantRoutes = [
meta: { title: 'Makeup Appointment' }
},
{
path: 'makeUp/:cptId/:id',
component: () => import('@/viewsPc/booking/makeUpDetail'),
name: 'makeUpDetail',
meta: { title: 'Makeup Appointment' }
},
{
path: 'photography/:cptId',
component: () => import('@/viewsPc/booking/photography'),
name: 'photography',
......
src/viewsPc/booking/makeUp.vue
<template>
<div>
<div>
<div class="banner">
<img src="@/assets/booking/hz_text.png">
</div>
<div class="box">
<el-card class="mt30"></el-card>
<div class="searchBar">
<el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language==0?'搜索':'Search' }}</el-button>
</div>
</div>
<div class="box" v-loading="loading">
<el-row style="width: 100%" :gutter="20">
<el-col :span="8" v-for="(h,index) in list" class="mb20" @click="goDetail(h)">
<el-card style="position: relative;">
<img class="w100 hz-img" :src="fillImgUrl(h.photos?.split(',')[0])"/>
<div class="yuyue">
30 个时间段可预约
</div>
<div class="hz-text">MANGO美妆工作室</div>
<el-row style="width: 100%;margin-bottom: 10px" :gutter="5" justify='space-between'>
<div class="hz-tag tag1">专业团体</div>
<div class="hz-tag tag2">金牌化妆师</div>
<div class="hz-tag tag3">大牌化妆品</div>
<div class="hz-tag tag4">连锁</div>
</el-row>
<div class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
成立 <span class="sign">6</span>年 |
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon><span class="sign">12</span>名化妆师
</div>
<div class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
1535652837
</div>
<div class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
{{h.address}}
</div>
<div style="text-align: center">
<el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</div>
</el-card>
</el-col>
</el-row>
<!-- <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)">-->
<!-- &lt;!&ndash; 酒店列表&ndash;&gt;-->
<!-- <el-row class="hotel" align="middle" :gutter="20">-->
<!-- <el-col :span="6">-->
<!-- <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <h3 class="esp">{{h.name}}</h3>-->
<!-- <div class="starBox">-->
<!-- <img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">-->
<!-- </div>-->
<!-- <div class="tagbox">-->
<!-- <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>-->
<!-- <a v-show="h.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>-->
<!-- </div>-->
<!-- <p class="esp addr">-->
<!-- <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>-->
<!-- {{h.address}}-->
<!-- </p>-->
<!-- </el-col>-->
<!-- <el-col :span="8" class="text-right">-->
<!-- <div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div>-->
<!-- <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-card>-->
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
<div style="height: 50px"></div>
</div>
</div>
</div>
</template>
<script setup>
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
import {useRouter,useRoute} from "vue-router";
import {useStorage} from "@vueuse/core/index";
const router = useRouter()
const route = useRoute()
const language= useStorage('language',0)
const query = ref({
name:''
})
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(()=>{
query.value.activityId = route.params.cptId
getList()
})
function getList() {
loading.value = true
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
loading.value = false
}).catch(e=>{
loading.value = false
})
}
function goDetail(item) {
router.push({
name:'makeUpDetail',
params:{
id:item.id,
},
query:{
id:item.id
}
})
}
</script>
<style scoped>
<style scoped lang="scss">
.hotel{
h3{margin: 0 0 20px;}
img.w100{object-fit: cover;aspect-ratio: 16/9}
.addr{font-size: 16px;color: #929AA0;font-weight: 400;}
.price{margin: 0 0 25px;
color: #FF8124;font-size: 18px;
span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
i{font-style: normal;color: #929AA0;}
}
}
.banner{height: 140px;background-size: cover;text-align: center;
background: url("@/assets/booking/hz_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;}
}
.starBox{
img{display: inline-block;margin-right: 4px}
}
.hz-img{
height: 218px;
width: 100%;
border-radius: 2px;
border: 0;
margin-bottom: 20px;
}
.yuyue{
width: 150px;
height: 30px;
background: #000000;
border-radius: 20px 0px 0px 2px;
padding-left: 15px;
opacity: 0.45;
color: #fff;
font-size: 14px;
line-height: 30px;
position: absolute;
top: 207px;
right:21px;
}
.hz-text{
font-size: 20px;
font-weight: 500;
color: #000;
margin-bottom: 8px;
}
//.hz-tag{
// border-radius: 13px;
// height: 25px;
// line-height: 25px;
// font-size: 12px;
// font-weight: 400;
// padding: 0 15px;
//}
//.tag1{
// background: rgba(50, 177, 108, 0.2);
// color:rgba(50, 177, 108, 1);
//}
//.tag2{
// background-color: rgba(243, 152, 0, 0.2);
// color: #F39800;
//}
//.tag3{
// background-color: rgba(0, 160, 233, 0.2);
// color: #00A0E9;
//}
//.tag4{
// background-color: rgba(247, 64, 166, 0.2);
// color: #F740A6;
//}
//
//.hz-row{
// font-size: 14px;
// font-weight: 400;
// color: #929AA0;
// margin-bottom: 16px;
// .sign{
// color: #493CEB;
// }
//}
//.tagbox{margin: 15px 0;
// a{color: #AFB5B9;font-size: 12px;}
// span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;}
// span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
// span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
// span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
// span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
//}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!