jiazhipeng
1 year ago
12 changed files with 1779 additions and 69 deletions
@ -0,0 +1,761 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="swipe-box"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="swiperChange"> |
|||
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
|||
<view class="swiper-item"> |
|||
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer"> |
|||
{{swiperCurrent}}/{{info.list_images.split(',').length}} |
|||
</view> |
|||
|
|||
<view class="collect" @click.stop="collect()"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail-container"> |
|||
<view class="common-container info-container"> |
|||
<view> |
|||
<view class="info-title text-overflowRows">{{info.title}}</view> |
|||
</view> |
|||
<view class="flex-between time-container"> |
|||
<view class="flex-1 w-1rpx"> |
|||
<view class="tag-container no-scrollbar" v-if="info.label"> |
|||
<view class="tag" v-for="(tag,tagIndex) in info.label.split(',')" :key="tagIndex">{{tag}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="policy-btn flex-shrink-0 flex flex-items-center" style="justify-content: flex-end;" @click="goPolicy"> |
|||
设施/政策 |
|||
<uni-icons color="#71B580" style="height: 35rpx;" type="right" size="12"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="flex-between"> |
|||
<view class="address-container flex flex-shrink-0 flex-between" @click="goMap"> |
|||
<view class="address-title text-overflowRows"> |
|||
{{info.address}} |
|||
</view> |
|||
<view class="flex-column flex-center"> |
|||
<image :src="showImg('/uploads/20240827/5b19517f2a630f3a766ea03ac621a3be.png')"> |
|||
<view class="tip" style="padding-top: 11rpx;">地图</view> |
|||
</view> |
|||
</view> |
|||
<view class="phone-container flex-column flex-center" @click="callPhone"> |
|||
<image :src="showImg('/uploads/20240829/b38a84c91eef12d3040deaef50eaf697.png')"> |
|||
<view class="tip" style="padding-top: 11rpx;">电话</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view class="common-container hotel-container" style="padding: 0;background: none;"> |
|||
<view class="order-time flex-between" style="justify-content: space-around;" |
|||
@click="openCalendar()"> |
|||
<view class="time"> |
|||
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.startDay).Format('MM-dd')}}</view> |
|||
<view style="padding:0 14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }}</view> |
|||
<view style="color: #71B580;">入住</view> |
|||
</view> |
|||
<view class="cal-day"> |
|||
共{{selectDate.differDays}}晚 |
|||
</view> |
|||
<view class="time"> |
|||
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.endDay).Format('MM-dd')}}</view> |
|||
<view style="padding:0 14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view> |
|||
<view style="color: #71B580;">离店</view> |
|||
</view> |
|||
</view> |
|||
<view style="padding:0 34rpx;"> |
|||
<view v-for="(item, index) in sku" :key="index"> |
|||
<view class="scenic-item flex" v-if="(!showMore&&index<=2)||showMore"> |
|||
<view class="scenic-image flex-shrink-0"> |
|||
<image style="width: 100%;height: 100%;" :src="showImg(item.image)"></image> |
|||
</view> |
|||
<view class="flex-1 w-1rpx flex-column" style="padding: 14rpx;justify-content: space-between;"> |
|||
<view class="flex flex-items-center" @click="viewDetail(item)"> |
|||
<view class="scenic-title text-overflow">{{item.title}}</view> |
|||
<uni-icons style="height: 40rpx;font-weight: bold;" type="right" size="15"></uni-icons> |
|||
</view> |
|||
<view> |
|||
<view class="scenic-content text-overflowRows"> |
|||
<text>{{item.showTag}}</text> |
|||
<text>{{item.lastShowTag}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="price-container"> |
|||
<view class="price">{{item.price/100}}</view> |
|||
<view class="btn" @click="goOrder(item)">预定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="showMore" v-if="!showMore&&sku.length>3" @click="changeShowMore"> |
|||
查看剩余房型 |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="padding: 0rpx 29rpx;"> |
|||
<view class="box-title">酒店介绍</view> |
|||
<view class="common-container" style="padding: 30rpx 40rpx;"> |
|||
<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view> |
|||
</view> |
|||
<view class="box-title">设施与政策</view> |
|||
<view class="common-container policy-container" style="padding: 30rpx 40rpx;"> |
|||
<view class="common-container1"> |
|||
<view class="info-title1 box-title1 text-overflowRows">{{info.title}}</view> |
|||
<view class="flex-between phone-container1"> |
|||
<view> |
|||
联系电话：{{info.tel}} |
|||
</view> |
|||
<view @click="callPhone"> |
|||
<image :src="showImg('/uploads/20240830/8b5750ff23837fe4a187e13775f9424c.png')"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="common-container1"> |
|||
<view class="box-title1">服务设施</view> |
|||
<view style="padding-top: 34rpx;" v-html="formateRichText(info.cost_content)"></view> |
|||
</view> |
|||
<view class="common-container1"> |
|||
<view class="box-title1">入住须知</view> |
|||
<view style="padding-top: 34rpx;" v-html="formateRichText(info.describe_content)"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 酒店详情弹窗 --> |
|||
<uni-popup ref="popupRule" type="bottom" :safe-area="false" background-color="#F7F7F7"> |
|||
<view class="popup-content-date" > |
|||
<view class="popup-content-title flex"> |
|||
<view class="flex-1 w-1rpx text-overflow"> |
|||
{{skuInfo.title}} |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule" |
|||
style="width: 31rpx;height: 31rpx;" class="flex-shrink-0"> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="swipe-box" style="height: 347rpx;" v-if="skuInfo.list_images"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="popSwiperChange" :current="0"> |
|||
<swiper-item v-for="(item, index) in skuInfo.list_images.split(',')" :key="item.id"> |
|||
<view class="swiper-item" style="height: 347rpx;"> |
|||
<image class="item-img pop-swiper-image" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer" style="right:30rpx;bottom: 20rpx;"> |
|||
{{popSwiperCurrent}}/{{skuInfo.list_images.split(',').length}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="pop-detail-container"> |
|||
<view class="pop-detail-title">房型信息</view> |
|||
<view v-html="formateRichText(skuInfo.use_explain)"></view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="false" |
|||
:insert="false" :range="true" :startDate="calendarParam.startDate" |
|||
:endDate="calendarParam.endDate" @confirm="confirmCalendar"/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
headImg: "https://tongli.sz-trip.com/uploads/20240826/8653c32761e01ee683505eddba1ae22b.png", |
|||
id: null, |
|||
swiperCurrent: 1, |
|||
popSwiperCurrent: 1, |
|||
info: {list_images:''}, |
|||
sku: [], |
|||
showMore: false, |
|||
skuInfo: {}, // 预定门票 |
|||
|
|||
selectDate: { |
|||
startDay:new Date().Format('yyyy-MM-dd'), |
|||
endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'), |
|||
differDays: 1 |
|||
}, |
|||
|
|||
minSeldDate: new Date().Format('yyyy-MM-dd'), |
|||
maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'), |
|||
calendarParam: { |
|||
stratDate:'',endDate: '', selected: [] |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
onShow(options) { |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
this.getGoodsList() |
|||
}, |
|||
methods: { |
|||
swiperChange (e) { |
|||
this.swiperCurrent = e.detail.current+1 |
|||
}, |
|||
popSwiperChange (e) { |
|||
this.popSwiperCurrent = e.detail.current+1 |
|||
}, |
|||
changeShowMore () { |
|||
this.showMore = !this.showMore |
|||
}, |
|||
goPolicy () { |
|||
uni.navigateTo({ |
|||
url:`/subPackages/hotelHomestay/policy?id=${this.id}` |
|||
}) |
|||
}, |
|||
callPhone () { |
|||
let _this = this |
|||
uni.showActionSheet({ |
|||
itemList: [this.info.tel,'呼叫'], |
|||
success: function (res) { |
|||
_this.clickPhone(_this.info.tel) |
|||
} |
|||
}); |
|||
// this.clickPhone(this.info.tel) |
|||
}, |
|||
|
|||
goMap () { |
|||
uni.openLocation({ |
|||
latitude: Number(this.info.lat), |
|||
longitude: Number(this.info.lon), |
|||
name: this.info.title, |
|||
address: this.info.address, |
|||
success: function () { |
|||
console.log('success'); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 获取景点信息 |
|||
getInfo() { |
|||
this.Post({id: this.id},'/api/scenic/getScenicById').then(res => { |
|||
if (res.data.flag == 0) { |
|||
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
|||
setTimeout(() => {this.goBack()}, 2000) |
|||
} |
|||
let info = res.data; |
|||
try { |
|||
info.times_list_info = JSON.parse(info.times_list)[0] |
|||
} catch(e) { |
|||
console.log(e) |
|||
info.times_list_info = {start:'',end:''} |
|||
} |
|||
this.info = info |
|||
console.log(info) |
|||
}); |
|||
}, |
|||
// 根据景点id获取商品列表 |
|||
getGoodsList(){ |
|||
this.Post({ |
|||
scenic_id: this.id |
|||
},'/api/scenic/getGoodsByScenicId').then(res => { |
|||
let result = res.data || [] |
|||
let data = [] |
|||
result.forEach(item=>{ |
|||
item.specifications.forEach(v=>{ |
|||
let showTag = '' |
|||
let lastShowTag = '' |
|||
if (v.specifications_new_tag) { |
|||
let tags = v.specifications_new_tag.split(',') |
|||
showTag = (tags.slice(0,-1)||[]).join(' | ') |
|||
if (tags.length>1) { |
|||
showTag += ' | ' |
|||
} |
|||
lastShowTag = tags[tags.length-1]||'' |
|||
} |
|||
v.showTag = showTag |
|||
v.lastShowTag = lastShowTag |
|||
data.push(v) |
|||
}) |
|||
|
|||
}) |
|||
// this.sku = data |
|||
this.sku = [...data,...data,...data,...data] |
|||
}) |
|||
}, |
|||
// 收藏 |
|||
collect() { |
|||
this.Post({type: 4,id: this.id},'/api/scenic/collect').then(res => { |
|||
if (res) { |
|||
uni.showToast({title: res.msg,icon: 'none'}); |
|||
this.info.is_collect = !this.info.is_collect |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
calDate (startDate, endDate) { |
|||
var start = new Date(startDate); |
|||
var end = new Date(endDate); |
|||
var diff = end - start; |
|||
var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数差 |
|||
return days; |
|||
}, |
|||
openCalendar () { |
|||
this.calendarParam = { |
|||
startDate: this.minSeldDate, |
|||
endDate: this.maxSeldDate, |
|||
// selected: this.allSeldDate.filter(v=>v.store>0).map(v=>{ |
|||
// return { |
|||
// date: v.date, |
|||
// info: '￥'+this.showNoPriceNew(v.money), |
|||
// notNeedDot:true, |
|||
// } |
|||
// }) |
|||
} |
|||
this.$refs.calendar.open(); |
|||
}, |
|||
confirmCalendar (val) { |
|||
if (val.range.data.length<2) { |
|||
uni.showToast({ |
|||
title:'请选择日期', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.selectDate.startDay = val.range.before |
|||
this.selectDate.endDay = val.range.after |
|||
this.selectDate.differDays = this.calDate(this.selectDate.startDay,this.selectDate.endDay) |
|||
}, |
|||
|
|||
// 查看房型 |
|||
viewDetail (item) { |
|||
this.skuInfo = item |
|||
this.popSwiperCurrent = 1 |
|||
this.openPopRule() |
|||
}, |
|||
|
|||
// 预定 |
|||
goOrder (item) { |
|||
// if (item.xx) { |
|||
// return |
|||
// } |
|||
|
|||
let param = { |
|||
skuInfo: item, |
|||
selectDate: this.selectDate |
|||
} |
|||
uni.setStorageSync('hotelOrderInfo', JSON.stringify(param)) |
|||
uni.navigateTo({ |
|||
url:`/subPackages/hotelHomestay/order` |
|||
}) |
|||
}, |
|||
|
|||
|
|||
closePopupRule() { |
|||
this.$refs.popupRule.close() |
|||
}, |
|||
openPopRule(){ |
|||
this.$refs.popupRule.open() |
|||
}, |
|||
// 价格格式 |
|||
showNoPriceNew(price) { |
|||
if (price && price > 0) { |
|||
return (price / 100) |
|||
} else { |
|||
return '0' |
|||
} |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F8F8F8; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 484rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item-num { |
|||
width: 90rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
|
|||
.collect{ |
|||
position: absolute; |
|||
right: 36rpx; |
|||
top: 36rpx; |
|||
font-size: 23rpx; |
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.swiper-pointer{ |
|||
position: absolute; |
|||
right: 36rpx; |
|||
bottom: 80rpx; |
|||
background: rgba(22,22,22,0.5); |
|||
border-radius: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 6rpx 14rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.swiper { |
|||
height: 484rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 484rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 484rpx; |
|||
} |
|||
.item-img.pop-swiper-image{ |
|||
height: 347rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.detail-container{ |
|||
width: 100%; |
|||
z-index: 2; |
|||
position: relative; |
|||
top: -52rpx; |
|||
} |
|||
|
|||
.common-container{ |
|||
background: white; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
padding: 22rpx 26rpx; |
|||
} |
|||
|
|||
|
|||
.info-container{ |
|||
font-family: PingFang; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
padding: 36rpx 29rpx; |
|||
.time-container{ |
|||
padding: 22rpx 0; |
|||
|
|||
.tag-container{ |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
overflow-x: auto; |
|||
.tag{ |
|||
border-radius: 5rpx 4rpx 4rpx 5rpx; |
|||
border: 1px solid #71B580; |
|||
|
|||
padding: 7rpx 14rpx; |
|||
|
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #71B580; |
|||
text-align: center; |
|||
margin-right: 15rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
.policy-btn{ |
|||
width: 160rpx; |
|||
height: 35rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
text-align: right; |
|||
color: #71B580; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.info-title{ |
|||
width: 100%; |
|||
height: 85rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.address-container{ |
|||
width: 587rpx; |
|||
height: 107rpx; |
|||
border-radius: 20rpx; |
|||
padding: 25rpx 20rpx 25rpx 33rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
background-color: #E8F6EB; |
|||
background-image: url('https://tongli.sz-trip.com/uploads/20240830/e8089886a03786e925bd4d4bbc441320.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
.tip{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
.phone-container{ |
|||
width: 93rpx; |
|||
height: 107rpx; |
|||
background: #E8F6EB; |
|||
border-radius: 20rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
.tip{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hotel-container{ |
|||
.order-time{ |
|||
height: 107rpx; |
|||
background: linear-gradient(180deg, #FFFFFF, #F7F7F7); |
|||
.time{ |
|||
display: flex; |
|||
font-family: PingFang SC; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.cal-day{ |
|||
background: #E8F6EB; |
|||
border-radius: 17rpx; |
|||
padding: 5rpx 16rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
} |
|||
.showMore{ |
|||
width: 100%; |
|||
height: 67rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
line-height: 67rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.box-title { |
|||
margin: 52rpx 0 26rpx 12rpx; |
|||
font-family: PingFang; |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.address-icon{ |
|||
margin-right: 9rpx; |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
|
|||
.scenic-item{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: 213rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 7rpx; |
|||
margin-bottom: 20rpx; |
|||
.scenic-image{ |
|||
width: 173rpx; |
|||
height: 100%; |
|||
flex-shrink: 0; |
|||
image{ |
|||
border-radius: 20rpx; |
|||
} |
|||
} |
|||
.scenic-title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
flex-shrink: 0; |
|||
max-width: 90%; |
|||
} |
|||
.scenic-content{ |
|||
width: 100%; |
|||
height: 66rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
line-height: 33rpx; |
|||
text:last-of-type{ |
|||
color: #71B580; |
|||
} |
|||
} |
|||
|
|||
.price-container{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
.price{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #D60000; |
|||
padding-right: 20rpx; |
|||
} |
|||
.price::before{ |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
.btn{ |
|||
width: 120rpx; |
|||
height: 47rpx; |
|||
background: linear-gradient(90deg, #FD6F34, #F4A61F); |
|||
border-radius: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.bottom { |
|||
.notice { |
|||
font-weight: 400; |
|||
color: #0B898E; |
|||
} |
|||
} |
|||
|
|||
.popup-content-date{ |
|||
position: relative; |
|||
background: #F7F7F7; |
|||
top: -33rpx; |
|||
padding: 25rpx 44rpx; |
|||
border-radius: 33rpx; |
|||
.popup-content-title{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
padding-bottom: 26rpx; |
|||
} |
|||
|
|||
.pop-detail-container{ |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
padding: 20rpx; |
|||
margin-top: 26rpx; |
|||
max-height: 600rpx; |
|||
.pop-detail-title{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.policy-container{ |
|||
.common-container1{ |
|||
width: 100%; |
|||
background: white; |
|||
border-radius: 13rpx; |
|||
margin-bottom: 20rpx; |
|||
padding: 20rpx 18rpx; |
|||
} |
|||
|
|||
.box-title1 { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
} |
|||
.info-title1{ |
|||
height: 88rpx; |
|||
} |
|||
.phone-container1{ |
|||
padding-top: 20rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
image{ |
|||
width: 33.33rpx; |
|||
height: 33.33rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,600 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="detail-container"> |
|||
<view class="common-container info-container"> |
|||
<view class="flex-between" style="align-items: flex-start;"> |
|||
<view class="info-title text-overflowRows">{{skuInfo.title}}</view> |
|||
<view class="policy-btn flex-shrink-0 flex flex-items-center" @click="openPopRule"> |
|||
房型信息 |
|||
<uni-icons color="#71B580" style="height: 32rpx;" type="right" size="12"></uni-icons> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="tag-container text-overflow"> |
|||
<text>{{skuInfo.showTag}}</text> |
|||
<text>{{skuInfo.lastShowTag}}</text> |
|||
</view> |
|||
|
|||
<view class="order-time flex-between" style="justify-content: space-around;"> |
|||
<view class="time"> |
|||
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.startDay).Format('MM-dd')}}</view> |
|||
<view style="padding-left:14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }}</view> |
|||
<view>入住</view> |
|||
</view> |
|||
<view class="cal-day"> |
|||
共{{selectDate.differDays}}晚 |
|||
</view> |
|||
<view class="time"> |
|||
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.endDay).Format('MM-dd')}}</view> |
|||
<view style="padding-left:14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view> |
|||
<view>离店</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="notice-container"> |
|||
<view class="flex"> |
|||
<view class="flex-shrink-0" style="padding-top: 4rpx;"> |
|||
<image :src="showImg('/uploads/20240830/aa84c8b1de80651f645fed67a1997ced.png')"></image> |
|||
</view> |
|||
<view class="flex-1 w-1rpx" style="padding-left: 14rpx;"> |
|||
<view>订单确认后，您在{{new Date(selectDate.startDay).Format('yyyy年MM月dd日')}}20:00前之免费取消或 变更订单，20:00后将收取30%房费作为违约费用。</view> |
|||
<view style="color: #F84A56;">预期不可取消或/修改，扣取全额房费</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="flex" style="padding-top: 22rpx;"> |
|||
<view class="flex-shrink-0" style="padding-top: 4rpx;"> |
|||
<image :src="showImg('/uploads/20240830/59d2f01f0391f72a537cc9004bc2071d.png')"></image> |
|||
</view> |
|||
<view class="flex-1 w-1rpx" style="padding-left: 14rpx;"> |
|||
<view>证件要求：大陆居民身份证登记入住</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="common-container form-container"> |
|||
<view class="form-title"> |
|||
<text style="font-weight: bold;font-size: 35rpx;padding-right: 28rpx;">预定信息</text> |
|||
<text>姓名需与证件一致</text> |
|||
</view> |
|||
<view class="btn-box flex-column"> |
|||
<view class="line w-full" style="border-top: none;"> |
|||
<view class="left">房间数</view> |
|||
<view class="input flex" style="justify-content: flex-end;"> |
|||
<view class="num-box"> |
|||
<view :class="['ctrl',buyNum>1?'':'disabled']" @click="reduce()">-</view> |
|||
<input class="num" type="text" v-model="buyNum" :disabled='true' /> |
|||
<view :class="['ctrl']" @click="plus()">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="line w-full" v-for="(user,index) in roomUser" :key="index"> |
|||
<view class="left">房间{{index+1}}</view> |
|||
<input class="input" type="text" placeholder="请输入住客姓名" v-model="user.name" /> |
|||
</view> |
|||
<view class="line w-full"> |
|||
<view class="left">联系电话</view> |
|||
<view class="flex flex-items-center input"> |
|||
<input class="input" type="text" placeholder="请输入联系手机号" v-model="phone" /> |
|||
<uni-icons v-if="phone.length>0" style="margin-left: 30rpx;" |
|||
type="closeempty" size="14" @click="phone = ''"></uni-icons> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view class="btn-list"> |
|||
<view class="price-box"> |
|||
<view class="text">合计:</view> |
|||
<view class="price">{{ total() }}</view> |
|||
<!-- <view class="post-text" v-if="sendType==1&&post">含邮费:¥{{ post / 100 }}</view> --> |
|||
</view> |
|||
<view class="btn" @click="order()">立即预订</view> |
|||
</view> |
|||
|
|||
<!-- 酒店详情弹窗 --> |
|||
<uni-popup ref="popupRule" type="bottom" :safe-area="false" background-color="#F7F7F7"> |
|||
<view class="popup-content-date" > |
|||
<view class="popup-content-title flex"> |
|||
<view class="flex-1 w-1rpx text-overflow"> |
|||
{{skuInfo.title}} |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule" |
|||
style="width: 31rpx;height: 31rpx;" class="flex-shrink-0"> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="swipe-box" style="height: 347rpx;" v-if="skuInfo.list_images"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="popSwiperChange" :current="0"> |
|||
<swiper-item v-for="(item, index) in skuInfo.list_images.split(',')" :key="item.id"> |
|||
<view class="swiper-item" style="height: 347rpx;"> |
|||
<image class="item-img pop-swiper-image" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer" style="right:30rpx;bottom: 20rpx;"> |
|||
{{popSwiperCurrent}}/{{skuInfo.list_images.split(',').length}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="pop-detail-container"> |
|||
<view class="pop-detail-title">房型信息</view> |
|||
<view v-html="formateRichText(skuInfo.use_explain)"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
popSwiperCurrent: 1, |
|||
|
|||
skuInfo: {}, // 酒店信息 |
|||
|
|||
selectDate: { |
|||
startDay:new Date().Format('yyyy-MM-dd'), |
|||
endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'), |
|||
differDays: 1 |
|||
}, |
|||
|
|||
phone: '', |
|||
buyNum: 1, |
|||
roomUser: [{ |
|||
name: '' |
|||
}] |
|||
|
|||
|
|||
} |
|||
}, |
|||
onShow(options) { |
|||
}, |
|||
onLoad(options) { |
|||
this.initOrderDate() |
|||
}, |
|||
methods: { |
|||
popSwiperChange (e) { |
|||
this.popSwiperCurrent = e.detail.current+1 |
|||
}, |
|||
|
|||
// 初始化 |
|||
initOrderDate () { |
|||
let data = {} |
|||
try { |
|||
data = JSON.parse(uni.getStorageSync('hotelOrderInfo')); |
|||
} catch (e) { |
|||
data = {} |
|||
setTimeout(()=>{ |
|||
uni.navigateBack() |
|||
},1000) |
|||
} |
|||
|
|||
this.skuInfo = data.skuInfo |
|||
this.selectDate = data.selectDate |
|||
this.buyNum = 1 |
|||
this.roomUser = [{name: ''}] |
|||
|
|||
}, |
|||
// 查看房型 |
|||
viewDetail () { |
|||
this.popSwiperCurrent = 1 |
|||
this.openPopRule() |
|||
}, |
|||
|
|||
plus() { |
|||
this.buyNum += 1; |
|||
this.roomUser.push({name: ''}) |
|||
}, |
|||
reduce() { |
|||
if (this.buyNum > 1) { |
|||
this.buyNum -= 1; |
|||
this.roomUser.pop() |
|||
} |
|||
}, |
|||
|
|||
total () { |
|||
return this.skuInfo.price/100 * this.buyNum || 0 |
|||
}, |
|||
|
|||
order () { |
|||
// 校验 |
|||
if (!this.isTel(this.phone)){ |
|||
uni.showToast({ |
|||
title: '请输入自提人手机号', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
if (this.roomUser.some(v=>v.trim().length<0)) { |
|||
uni.showToast({ |
|||
title: '请输入住客姓名', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
let goods = [] |
|||
let goodsItem = { |
|||
num:this.buyNum, |
|||
specifications_id: this.skuInfo.id, |
|||
start_date: this.selectDate.startDay, |
|||
end_date: this.selectDate.endDay, |
|||
customer_name: this.roomUser.map(v=>v.name).join('、'), |
|||
reserve_mobile: this.phone, |
|||
} |
|||
goods.push(goodsItem) |
|||
|
|||
let data = { |
|||
goods: goods, |
|||
reserve_phone: this.phone, |
|||
} |
|||
|
|||
return |
|||
this.Post({ |
|||
method: 'POST', |
|||
data: JSON.stringify(data) |
|||
},'/api/order/place').then(res => { |
|||
console.log('成功'); |
|||
if(res.code == 200){ |
|||
uni.removeStorageSync('hotelOrderInfo') |
|||
this.Post({ |
|||
order_id: res.data.order_id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
},'/api/pay/unify').then(res => { |
|||
if(res.data){ |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp, |
|||
complete() { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
|
|||
closePopupRule() { |
|||
this.$refs.popupRule.close() |
|||
}, |
|||
openPopRule(){ |
|||
this.$refs.popupRule.open() |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F8F8F8; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 484rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item-num { |
|||
width: 90rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
|
|||
.collect{ |
|||
position: absolute; |
|||
right: 36rpx; |
|||
top: 36rpx; |
|||
font-size: 23rpx; |
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.swiper-pointer{ |
|||
position: absolute; |
|||
right: 36rpx; |
|||
bottom: 80rpx; |
|||
background: rgba(22,22,22,0.5); |
|||
border-radius: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 6rpx 14rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.swiper { |
|||
height: 484rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 484rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 484rpx; |
|||
} |
|||
.item-img.pop-swiper-image{ |
|||
height: 347rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.detail-container{ |
|||
width: 100%; |
|||
padding: 26rpx; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.common-container{ |
|||
background: white; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
padding: 22rpx 26rpx; |
|||
} |
|||
|
|||
|
|||
.info-container{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
|
|||
.info-title{ |
|||
width: 100%; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.policy-btn{ |
|||
width: 160rpx; |
|||
height: 35rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
.tag-container{ |
|||
width: 100%; |
|||
padding: 35rpx 0; |
|||
} |
|||
|
|||
.time-container{ |
|||
padding: 22rpx 0; |
|||
|
|||
} |
|||
|
|||
.notice-container{ |
|||
background:rgba(232, 246, 235, 0.7); |
|||
border-radius: 13rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
color: #000000; |
|||
padding: 22rpx 16rpx; |
|||
margin-top: 28rpx; |
|||
image{ |
|||
width: 25rpx; |
|||
height: 25rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.order-time{ |
|||
.time{ |
|||
display: flex; |
|||
font-family: PingFang SC; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.cal-day{ |
|||
background: #E8F6EB; |
|||
border-radius: 17rpx; |
|||
padding: 5rpx 16rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
|
|||
.popup-content-date{ |
|||
position: relative; |
|||
background: #F7F7F7; |
|||
top: -33rpx; |
|||
padding: 25rpx 44rpx; |
|||
border-radius: 33rpx; |
|||
.popup-content-title{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
padding-bottom: 26rpx; |
|||
} |
|||
|
|||
.pop-detail-container{ |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
padding: 20rpx; |
|||
margin-top: 26rpx; |
|||
max-height: 600rpx; |
|||
.pop-detail-title{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.btn-list { |
|||
width: 100%; |
|||
height: 166rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5); |
|||
display: flex; |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 20rpx 20rpx; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.btn { |
|||
width: 294rpx; |
|||
height: 88rpx; |
|||
background: #F84A56; |
|||
border-radius: 43rpx; |
|||
text-align: center; |
|||
line-height: 88rpx; |
|||
|
|||
font-size: 36rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
|
|||
} |
|||
.price-box { |
|||
display: flex; |
|||
align-items: center; |
|||
.text { |
|||
font-size: 29rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
.price { |
|||
margin-left: 15rpx; |
|||
font-size: 36rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #fc5109; |
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
color: #fc5109; |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
.post-text { |
|||
margin-left: 15rpx; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-container{ |
|||
.form-title{ |
|||
font-family: PingFang SC; |
|||
color: #000000; |
|||
font-weight: 500; |
|||
font-size: 23rpx; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
.left{ |
|||
width: 160rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #000000; |
|||
flex-shrink: 0; |
|||
} |
|||
.line{ |
|||
display: flex; |
|||
align-items: center; |
|||
border-top:1rpx solid #D8D8D8; |
|||
height: 92rpx; |
|||
} |
|||
.input{ |
|||
flex: 1; |
|||
} |
|||
input{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 29rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.num-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 20rpx; |
|||
width: 160rpx; |
|||
justify-content: space-between; |
|||
.num { |
|||
text-align: center; |
|||
width: 50rpx; |
|||
} |
|||
.ctrl { |
|||
width: 47rpx; |
|||
height: 47rpx; |
|||
background: #71B580; |
|||
border-radius: 50%; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 34rpx; |
|||
color: #FFFFFF; |
|||
line-height: 42rpx; |
|||
text-align: center; |
|||
} |
|||
.ctrl.disabled{ |
|||
background: #E8E8E8; |
|||
color: #999999; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
|
|||
<view class="common-container"> |
|||
<view class="info-title box-title text-overflowRows">{{info.title}}</view> |
|||
<view class="flex-between phone-container"> |
|||
<view> |
|||
联系电话：{{info.tel}} |
|||
</view> |
|||
<view @click="callPhone"> |
|||
<image :src="showImg('/uploads/20240830/8b5750ff23837fe4a187e13775f9424c.png')"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="common-container"> |
|||
<view class="box-title">服务设施</view> |
|||
<view style="padding-top: 34rpx;" v-html="formateRichText(info.cost_content)"></view> |
|||
</view> |
|||
<view class="common-container"> |
|||
<view class="box-title">入住须知</view> |
|||
<view style="padding-top: 34rpx;" v-html="formateRichText(info.describe_content)"></view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
info: {}, |
|||
} |
|||
}, |
|||
onShow(options) { |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
}, |
|||
methods: { |
|||
callPhone () { |
|||
let _this = this |
|||
uni.showActionSheet({ |
|||
itemList: [this.info.tel,'呼叫'], |
|||
success: function (res) { |
|||
_this.clickPhone(_this.info.tel) |
|||
} |
|||
}); |
|||
// this.clickPhone(this.info.tel) |
|||
}, |
|||
// 获取景点信息 |
|||
getInfo() { |
|||
this.Post({id: this.id},'/api/scenic/getScenicById').then(res => { |
|||
if (res.data.flag == 0) { |
|||
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
|||
setTimeout(() => {this.goBack()}, 2000) |
|||
} |
|||
this.info = res.data |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F7F7F7; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
|
|||
.common-container{ |
|||
width: 100%; |
|||
background: white; |
|||
border-radius: 13rpx; |
|||
margin-bottom: 20rpx; |
|||
padding: 20rpx 18rpx; |
|||
} |
|||
|
|||
.box-title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
} |
|||
.info-title{ |
|||
height: 88rpx; |
|||
} |
|||
.phone-container{ |
|||
padding-top: 20rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
image{ |
|||
width: 33.33rpx; |
|||
height: 33.33rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue