1418 lines
35 KiB
Vue
1418 lines
35 KiB
Vue
<template>
|
||
<view class="index" :style="[theme]">
|
||
<view class="onecontent">
|
||
<view class="onecontentone flex-start">
|
||
<image class="onecontentone_image" :src="listdata.img" mode="aspectFill"></image>
|
||
<view class="onecontentone_one flex-colum-start">
|
||
<text class="onecontentone_one_top">{{listdata.title}}</text>
|
||
<view class="onecontentone_one_view flex-between">
|
||
<view class="onecontentone_one_viewtext">
|
||
<text>¥</text>{{listdata.price}}
|
||
</view>
|
||
<view class="onecontentone_one_ts" @click="infoshow = true">
|
||
查看详情
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="onecontenttow ">
|
||
<view class="onecontenttowone flex-start">
|
||
<view class="onecontenttowone_one">
|
||
预约时间<text>（必填）</text>
|
||
</view>
|
||
</view>
|
||
<view class="onecontenttowthere flex-start">
|
||
<view class="positionfixedbox flex-between">
|
||
<view class="positionfixedbox_one flex-between" @click="calendarshow = true">
|
||
<view class="positionfixedbox_onebox flex-start">
|
||
<text>{{lists.start}}</text>
|
||
<text>周{{lists.weekstart}}</text>
|
||
</view>
|
||
<view class="positionfixedbox_onebox_box">
|
||
{{lists.long}}晚
|
||
</view>
|
||
<view class="positionfixedbox_onebox flex-start" style="margin-right: 28rpx;">
|
||
<text>{{lists.end}}</text>
|
||
<text>周{{lists.weekend}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="positionfixedbox_tow flex-start" @click="popupshow = true">
|
||
{{among}}间·{{adult + children}}人
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="onecontenttowthereflex-center" style="text-align: center; color: #ccc; padding-top: 20rpx;"
|
||
v-if="listdata.residue_number <= 0">
|
||
暂无剩余房间
|
||
</view>
|
||
</view>
|
||
<view class="onecontentfour">
|
||
<view class="onecontentfourone flex-start">
|
||
<view class="onecontentfourone_one">
|
||
备注
|
||
</view>
|
||
</view>
|
||
<u--textarea v-model="remark" placeholder="请输入内容" autoHeight></u--textarea>
|
||
</view>
|
||
<view class="onecontentfour">
|
||
<view class="onecontentfourone flex-start">
|
||
<view class="onecontentfourone_one">
|
||
详情
|
||
</view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.meals">
|
||
<view class="infofourrect_one">
|
||
餐品饮品
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.meals"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.cost">
|
||
<view class="infofourrect_one">
|
||
费用政策
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.cost"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.amenity">
|
||
<view class="infofourrect_one">
|
||
便利设施
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.amenity"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.outdoor">
|
||
<view class="infofourrect_one">
|
||
室外景观
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.outdoor"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.media">
|
||
<view class="infofourrect_one">
|
||
媒体科技
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.media"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.bathroom">
|
||
<view class="infofourrect_one">
|
||
浴室配套
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.bathroom"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.otherdevice">
|
||
<view class="infofourrect_one">
|
||
其他设备
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.otherdevice"></view>
|
||
</view>
|
||
</view>
|
||
<view :style="{height:height}"></view>
|
||
<view class="fixedview flex-between">
|
||
<view class="fixedview_one flex-start">
|
||
<view class="fixedview_oneone">
|
||
应付金额：
|
||
</view>
|
||
<view class="fixedview_onetow">
|
||
<text>¥</text>{{allamounts.price.price}}
|
||
</view>
|
||
</view>
|
||
<view class="fixedview_tow" style="background: #ccc;" v-if="listdata.residue_number <= 0">
|
||
立即预约
|
||
</view>
|
||
<view class="fixedview_tow" @click="requestSubscribeMessage" v-else>
|
||
立即预约
|
||
</view>
|
||
|
||
</view>
|
||
<u-overlay :show="infoshow" @click="infoshow = false">
|
||
<view class="infowarp">
|
||
<view class="inforect" @tap.stop>
|
||
<view class="infotowrect flex-start">
|
||
<image :src="listdata.img" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="infothererect flex-colum-start">
|
||
<view class="infothererect_one">
|
||
{{listdata.title}}
|
||
</view>
|
||
</view>
|
||
<view class="infofiverect">
|
||
<view class="infofiverectone">
|
||
设施详情
|
||
</view>
|
||
<view class="infofiverectoneitems flex-between">
|
||
<view class="infofiverectoneitem flex-start" v-for="(item,index) in listdata.label"
|
||
:key="index">
|
||
<image :src="item.img" mode="widthFix"></image>
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.meals">
|
||
<view class="infofourrect_one">
|
||
餐品饮品
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.meals"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.cost">
|
||
<view class="infofourrect_one">
|
||
费用政策
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.cost"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.amenity">
|
||
<view class="infofourrect_one">
|
||
便利设施
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.amenity"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.outdoor">
|
||
<view class="infofourrect_one">
|
||
室外景观
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.outdoor"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.media">
|
||
<view class="infofourrect_one">
|
||
媒体科技
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.media"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.bathroom">
|
||
<view class="infofourrect_one">
|
||
浴室配套
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.bathroom"></view>
|
||
</view>
|
||
<view class="infofourrect flex-start" v-if="listdata.otherdevice">
|
||
<view class="infofourrect_one">
|
||
其他设备
|
||
</view>
|
||
<view class="infofourrect_yow" v-html="listdata.otherdevice"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-overlay>
|
||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||
<view class="warp">
|
||
<view class="rect" @tap.stop>
|
||
<view class="onerect flex-start">
|
||
<image class="onecontentone_image" :src="listdata.img" mode="aspectFill"></image>
|
||
<view class="nonecontentone_view">{{listdata.title}}</view>
|
||
<view class="onerecticon">
|
||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||
size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="towrect">
|
||
<view class="towrect_one">
|
||
预约时间
|
||
</view>
|
||
<view class="towrect_tow">
|
||
{{lists.start}}周{{lists.weekstart}}{{lists.long}}晚{{lists.end}}周{{lists.weekend}}{{among}}间·{{adult + children}}人
|
||
</view>
|
||
</view>
|
||
<view class="fuorrect flex-between">
|
||
<view class="fuorrect_one">
|
||
合计
|
||
</view>
|
||
<view class="fuorrect_tow">
|
||
¥{{listdata.price}}
|
||
</view>
|
||
</view>
|
||
<view class="fvirect flex-center" @click="requestSubscribeMessage">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-overlay>
|
||
<u-calendar mode="range" color="#76903C" @confirm="confirm" :show="calendarshow"
|
||
@close="calendarshow = false"></u-calendar>
|
||
<u-popup :show="popupshow" @close="popupclose" :round="10">
|
||
<view class="classpopupshow flex-colum">
|
||
<view class="classpopupshowbox flex-between">
|
||
<view class="flex-colum-start">
|
||
<text class="classpopupshowboxflex-colum_one">成人</text>
|
||
</view>
|
||
<view class="classpopupshowboxnumber">
|
||
<u-number-box v-model="adult" :min="0" :max="10">
|
||
<view slot="minus" class="minus">
|
||
<u-icon name="minus" size="12"></u-icon>
|
||
</view>
|
||
<text slot="input" style="width: 50px;text-align: center;" class="input">{{adult}}</text>
|
||
<view slot="plus" class="plus">
|
||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||
</view>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
<view class="classpopupshowbox flex-between">
|
||
<view class="flex-colum-start">
|
||
<text class="classpopupshowboxflex-colum_one">婴儿</text>
|
||
<text class="classpopupshowboxflex-colum_tow">2-12岁</text>
|
||
</view>
|
||
<view class="classpopupshowboxnumber">
|
||
<u-number-box v-model="children" :min="0" :max="10">
|
||
<view slot="minus" class="minus">
|
||
<u-icon name="minus" size="12"></u-icon>
|
||
</view>
|
||
<text slot="input" style="width: 50px;text-align: center;" class="input">{{children}}</text>
|
||
<view slot="plus" class="plus">
|
||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||
</view>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
<view class="classpopupshowbox flex-between">
|
||
<view class="flex-colum-start">
|
||
<text class="classpopupshowboxflex-colum_one">床位数</text>
|
||
</view>
|
||
<view class="classpopupshowboxnumber">
|
||
<u-number-box v-model="bed" :min="0" :max="10">
|
||
<view slot="minus" class="minus">
|
||
<u-icon name="minus" size="12"></u-icon>
|
||
</view>
|
||
<text slot="input" style="width: 50px;text-align: center;" class="input">{{bed}}</text>
|
||
<view slot="plus" class="plus">
|
||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||
</view>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
<view class="classpopupshowbox flex-between">
|
||
<view class="flex-colum-start">
|
||
<text class="classpopupshowboxflex-colum_one">房间数量</text>
|
||
</view>
|
||
<view class="classpopupshowboxnumber">
|
||
<u-number-box v-model="among" :min="0" :max="10">
|
||
<view slot="minus" class="minus">
|
||
<u-icon name="minus" size="12"></u-icon>
|
||
</view>
|
||
<text slot="input" style="width: 50px;text-align: center;" class="input">{{among}}</text>
|
||
<view slot="plus" class="plus">
|
||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||
</view>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dayjs from "dayjs";
|
||
export default {
|
||
data() {
|
||
return {
|
||
adult: 1, //可住成人
|
||
children: 0, //可住儿童
|
||
bed: 1, //床位
|
||
among: 1, //间数
|
||
overlayshow: false,
|
||
popupshow: false, //选择人数
|
||
infoshow: false,
|
||
numberbox: 1,
|
||
height: '',
|
||
calendarshow: false,
|
||
listhairstylistshow: -1,
|
||
reservationlist: [],
|
||
day_time: '', //日期
|
||
day_hour: '', //小时
|
||
people_id: '', //发型师id
|
||
inifid: '',
|
||
listdata: {},
|
||
lists: {
|
||
long: '', //多少天
|
||
start: '',
|
||
end: '',
|
||
weekstart: '',
|
||
weekend: '',
|
||
},
|
||
remark: "",
|
||
allamounts: {
|
||
price: ''
|
||
} //所有金钱
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
console.log(e)
|
||
this.inifid = e.id
|
||
this.lists.start = e.start_time ? e.start_time : dayjs(new Date()).format("YYYY-MM-DD");
|
||
this.lists.end = e.end_time ? e.end_time : dayjs(new Date(this.lists.start).getTime() + 86400000).format(
|
||
'YYYY-MM-DD');
|
||
this.lists.long = e.long ? e.long : 1
|
||
this.lists.weekstart = this.getweekday(this.lists.start)
|
||
this.lists.weekend = this.getweekday(this.lists.end)
|
||
this.adult = e.adult ? Number(e.adult) : 1, //可住成人
|
||
this.children = e.children ? Number(e.children) : 0, //可住儿童
|
||
this.bed = e.bed ? e.bed : 1, //床位
|
||
this.among = e.among ? e.among : 1, //间数
|
||
this.reservationdetail() //详情
|
||
},
|
||
computed: {
|
||
theme() {
|
||
return this.$store.getters.theme
|
||
},
|
||
},
|
||
mounted() {
|
||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||
query.boundingClientRect(ele => {
|
||
var that = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.height = (ele.height) + "px";
|
||
that = null;
|
||
}
|
||
})
|
||
}).exec();
|
||
},
|
||
methods: {
|
||
getweekday(date) {
|
||
var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
|
||
var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
|
||
return week;
|
||
},
|
||
confirm(e) {
|
||
this.lists.long = e.length - 1
|
||
this.lists.start = e[0]
|
||
this.lists.end = e[this.lists.long - 1]
|
||
this.lists.weekstart = this.getweekday(this.lists.start)
|
||
this.lists.weekend = this.getweekday(this.lists.end)
|
||
this.calendarshow = false
|
||
this.reservationdetail()
|
||
},
|
||
popupclose() {
|
||
this.popupshow = false
|
||
this.reservationdetail()
|
||
},
|
||
async reservationdetail() {
|
||
let res = await this.api.reservationhoteldetial({
|
||
hotel_id: this.inifid,
|
||
start_time: this.lists.start, //开始时间
|
||
end_time: this.lists.end, //结束时间
|
||
adult: this.adult, //可住成人
|
||
children: this.children, //可住儿童
|
||
bed: this.bed, //床位数
|
||
capacity_people: this.adult + this.children, //可住人数
|
||
among: this.among //
|
||
})
|
||
this.listdata = res
|
||
this.listdata.details = res.house_details.replace(/\<img/g,
|
||
'<img style="max-width:100%;height:auto" ');
|
||
this.reservationhotelconfirm()
|
||
},
|
||
requestSubscribeMessage() {
|
||
var this_ = this
|
||
// #ifdef H5
|
||
this_.overlayshowclick(0)
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
var tmplIds = uni.cache.get('loginuser').style_type == 'Hotel' ? '35eHb-4ubBqSY4k8FS6HEzDX32GO5eXMjo9fkWYMTzA' : '82MEoVTs2rnLk6RR9jcnjZSnFurao3aqKp1EzSojuwU'
|
||
uni.getSetting({
|
||
withSubscriptions: true,
|
||
success(res) {
|
||
// 调起授权界面弹窗
|
||
if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
|
||
if (res.subscriptionsSetting.itemSettings !=
|
||
null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
|
||
let moIdState = res.subscriptionsSetting.itemSettings[tmplIds]; // 用户同意的消息模板id
|
||
if (moIdState === 'accept') {
|
||
uni.requestSubscribeMessage({ // 调起消息订阅界面
|
||
tmplIds: [tmplIds],
|
||
success(res) {
|
||
if (res[tmplIds] == 'accept') {
|
||
this_.overlayshowclick(1)
|
||
} else if (res[tmplIds] == 'reject') {
|
||
this_.overlayshowclick(0)
|
||
} else if (res[tmplIds] == 'ban') {
|
||
this_.overlayshowclick(0)
|
||
} else if (res[tmplIds] == 'accept') {
|
||
this_.overlayshowclick(0)
|
||
} else {
|
||
this_.overlayshowclick(0)
|
||
}
|
||
},
|
||
fail(er) {
|
||
this_.overlayshowclick(0)
|
||
console.log(er);
|
||
}
|
||
})
|
||
|
||
} else if (moIdState === 'reject') {
|
||
console.log("拒绝消息推送");
|
||
this_.overlayshowclick(0)
|
||
|
||
} else if (moIdState === 'ban') {
|
||
console.log("已被后台封禁");
|
||
this_.overlayshowclick(0)
|
||
}
|
||
} else {
|
||
// 当用户没有点击 ’总是保持以上选择，不再询问‘ 按钮。那每次执到这都会拉起授权弹窗
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请授权开通服务通知',
|
||
showCancel: true,
|
||
success: function(ress) {
|
||
if (ress.confirm) {
|
||
// console.log('用户点击确定')
|
||
uni.requestSubscribeMessage({ // 调起消息订阅界面
|
||
tmplIds: [tmplIds],
|
||
success(res) {
|
||
if (res[tmplIds] == 'accept') {
|
||
this_.overlayshowclick(1)
|
||
} else if (res[tmplIds] == 'reject') {
|
||
this_.overlayshowclick(0)
|
||
} else if (res[tmplIds] == 'ban') {
|
||
this_.overlayshowclick(0)
|
||
} else if (res[tmplIds] == 'accept') {
|
||
this_.overlayshowclick(0)
|
||
} else {
|
||
this_.overlayshowclick(0)
|
||
}
|
||
},
|
||
fail(er) {
|
||
this_.overlayshowclick(0)
|
||
console.log(er);
|
||
}
|
||
})
|
||
|
||
} else if (ress.cancel) {
|
||
this_.overlayshowclick(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this_.overlayshowclick(0)
|
||
}
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
async reservationhotelconfirm(e) { //获取他的价格
|
||
let res = await this.api.reservationhotelconfirm({
|
||
hotel_id: this.inifid,
|
||
number: this.among,
|
||
start_time: this.lists.start, //开始时间
|
||
end_time: this.lists.end, //结束时间
|
||
})
|
||
this.allamounts = res
|
||
},
|
||
async overlayshowclick(e) {
|
||
let res = await this.api.useruserinfo() //p判断是否完成手机号
|
||
uni.cache.set('loginuser', res);
|
||
if (res.userinfo.mobile) {
|
||
uni.pro.navigateTo('order/confirmhotel', {
|
||
start_time: this.lists.start, //开始时间
|
||
end_time: this.lists.end, //结束时间
|
||
hotel_id:this.inifid,
|
||
number: this.among,
|
||
long: this.lists.long,
|
||
adult:this.adult,
|
||
children:this.children
|
||
|
||
})
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认订单需要获取您的手机号',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/my/setup/index'
|
||
});
|
||
} else if (res.cancel) {}
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
/deep/ .mystyle {
|
||
width: 100% !important;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.index {
|
||
padding: 32rpx 28rpx;
|
||
|
||
.onecontent {
|
||
width: 100%;
|
||
padding: 26rpx 32rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.onecontentone {
|
||
flex-wrap: nowrap;
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
|
||
.onecontentone_image {
|
||
width: 176rpx;
|
||
height: 176rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.nonecontentone_view {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
}
|
||
|
||
.onecontentone_one {
|
||
position: relative;
|
||
justify-content: flex-start;
|
||
flex: 1;
|
||
margin-left: 24rpx;
|
||
height: 176rpx;
|
||
|
||
.onecontentone_one_top {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.onecontentone_one_view {
|
||
margin-top: 32rpx;
|
||
width: 100%;
|
||
|
||
.onecontentone_one_viewtext {
|
||
text {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
font-size: 40rpx;
|
||
font-family: SourceHanSansCN-Bold-,
|
||
SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.onecontentone_one_ts {
|
||
padding: 8rpx 22rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 28rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.onecontenttow {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
padding: 24rpx 0 32rpx 0;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.onecontenttowone::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4rpx;
|
||
height: 24rpx;
|
||
background: var(--bg-color-button);
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.onecontenttowone {
|
||
padding: 0 32rpx;
|
||
|
||
.onecontenttowone_one {
|
||
margin-left: 16rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
|
||
text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.onecontenttowtow {
|
||
margin-top: 32rpx;
|
||
padding: 0 0 0 32rpx;
|
||
|
||
.onecontenttowtow_item {
|
||
flex: 1;
|
||
flex-wrap: nowrap;
|
||
|
||
.onecontenttowtow_item_one:nth-child(1) {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.onecontenttowtow_item_one {
|
||
padding: 6rpx;
|
||
|
||
.onecontenttowtow_item_one_textone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.onecontenttowtow_item_one_texttow {
|
||
margin-top: 5rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.onecontenttowtow_item_ones {
|
||
padding: 6rpx;
|
||
border-radius: 10rpx;
|
||
background: var(--bg-color-buttontow);
|
||
|
||
.onecontenttowtow_item_one_textone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.onecontenttowtow_item_one_texttow {
|
||
margin-top: 5rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.onecontenttowtow_left {
|
||
width: 96rpx;
|
||
border-left: 1rpx solid #f9f9f9;
|
||
background: #FFFFFF;
|
||
box-shadow: -2rpx 0px 4rpx 2rpx rgba(193, 193, 193, 0.09);
|
||
|
||
.onecontenttowtow_lefttext {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.onecontenttowthere {
|
||
.positionfixedbox {
|
||
width: 100%;
|
||
padding: 28rpx 20rpx 0rpx 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 22rpx;
|
||
|
||
.positionfixedbox_one {
|
||
flex: auto;
|
||
|
||
.positionfixedbox_onebox_box::before {
|
||
position: absolute;
|
||
content: '';
|
||
display: inline-block;
|
||
width: 10rpx;
|
||
left: -10rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: 1rpx;
|
||
background: #76903C;
|
||
}
|
||
|
||
.positionfixedbox_onebox_box::after {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
content: '';
|
||
display: inline-block;
|
||
width: 10rpx;
|
||
height: 1rpx;
|
||
background: #76903C;
|
||
}
|
||
|
||
.positionfixedbox_onebox_box {
|
||
margin: 0 10rpx;
|
||
position: relative;
|
||
width: 50rpx;
|
||
height: 40rpx;
|
||
background: #F6FAF2;
|
||
border-radius: 14rpx;
|
||
border: 2rpx solid #76903C;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #76903C;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.positionfixedbox_onebox {
|
||
text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
text:nth-child(2) {
|
||
margin-left: 10rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.positionfixedbox_tow::before {
|
||
content: '';
|
||
margin-right: 26rpx;
|
||
display: inline-block;
|
||
width: 0rpx;
|
||
height: 40rpx;
|
||
opacity: 1;
|
||
border: 2rpx solid #707070;
|
||
}
|
||
|
||
.positionfixedbox_tow {
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.onecontenttere {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.onecontentterewone::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4rpx;
|
||
height: 24rpx;
|
||
background: var(--bg-color-button);
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.onecontentterewone {
|
||
.onecontenttereone_one {
|
||
margin-left: 16rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
|
||
text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.onecontentterewtow {
|
||
|
||
|
||
.onecontentterewtow_item {
|
||
width: 22%;
|
||
margin: 0 1.5%;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 10rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border: 2rpx solid #F7F7F7;
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
text {
|
||
text-align: center;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.onecontentterewtowviews {
|
||
margin-top: 14rpx;
|
||
padding: 4rpx 10rpx;
|
||
font-size: 16rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
background: #F7F7F7;
|
||
border-radius: 16rpx;
|
||
|
||
text {
|
||
color: #999999;
|
||
background: #F7F7F7;
|
||
}
|
||
}
|
||
|
||
.onecontentterewtowview {
|
||
margin-top: 14rpx;
|
||
padding: 4rpx 16rpx;
|
||
font-size: 16rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
background: var(--bg-color-button);
|
||
border-radius: 24rpx;
|
||
|
||
text {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.onecontentterewtow_items {
|
||
width: 22%;
|
||
margin: 0 1.5%;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 10rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border: 1rpx solid var(--bg-color-buttontow);
|
||
|
||
image {
|
||
border-radius: 50%;
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
|
||
text {
|
||
text-align: center;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.onecontentterewtowviews {
|
||
margin-top: 14rpx;
|
||
padding: 4rpx 16rpx;
|
||
font-size: 16rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
background: #F7F7F7;
|
||
border-radius: 24rpx;
|
||
|
||
text {
|
||
color: #999999;
|
||
background: #F7F7F7;
|
||
}
|
||
}
|
||
|
||
.onecontentterewtowview {
|
||
margin-top: 14rpx;
|
||
padding: 4rpx 16rpx;
|
||
font-size: 16rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
background: var(--bg-color-button);
|
||
border-radius: 24rpx;
|
||
|
||
text {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.introduction {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.introduction_one {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.introduction_yow {
|
||
margin-top: 18rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
width: 100%;
|
||
|
||
/deep/ [alt] {
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/ img {
|
||
width: 100%;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/ p {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.onecontentfour {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.onecontentfourone::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4rpx;
|
||
height: 24rpx;
|
||
background: var(--bg-color-button);
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.onecontentfourone {
|
||
padding-bottom: 16rpx;
|
||
|
||
.onecontentfourone_one {
|
||
margin-left: 16rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
|
||
text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.infofourrect {
|
||
flex-wrap: nowrap;
|
||
margin-top: 16rpx;
|
||
|
||
.infofourrect_one {
|
||
width: 160rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.infofourrect_yow {
|
||
margin-left: 30rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.fixedview {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 24rpx 28rpx;
|
||
background: #FFFFFF;
|
||
z-index: 999;
|
||
|
||
.fixedview_one {
|
||
.fixedview_oneone {
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.fixedview_onetow {
|
||
font-size: 44rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #F45C4C;
|
||
font-weight: bold;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixedview_tow {
|
||
background: var(--bg-color-button);
|
||
border-radius: 34rpx;
|
||
padding: 10rpx 44rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
|
||
.classpopupshow {
|
||
.classpopupshowbox {
|
||
width: 100%;
|
||
padding: 16rpx 60rpx;
|
||
border-bottom: 2rpx solid #F0F0F0;
|
||
|
||
.flex-colum-start {
|
||
.classpopupshowboxflex-colum_one {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.classpopupshowboxflex-colum_tow {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.classpopupshowboxnumber {
|
||
.minus {
|
||
padding: 20rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-width: 1px;
|
||
border-color: #CDCDCD;
|
||
border-style: solid;
|
||
border-top-left-radius: 100px;
|
||
border-top-right-radius: 100px;
|
||
border-bottom-left-radius: 100px;
|
||
border-bottom-right-radius: 100px;
|
||
@include flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.input {
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.plus {
|
||
padding: 20rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background-color: #555656;
|
||
border-radius: 50%;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.infowarp {
|
||
position: relative;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
.inforect {
|
||
position: absolute;
|
||
bottom: 0;
|
||
height: 1054rpx;
|
||
|
||
overflow: auto;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 60rpx 60rpx 0px 0px;
|
||
|
||
|
||
.onerect {
|
||
width: 100%;
|
||
position: relative;
|
||
padding-bottom: 34rpx;
|
||
border-bottom: 1rpx solid #F7F7F7;
|
||
|
||
view {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.onerecticon {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.infotowrect {
|
||
width: 100%;
|
||
border-radius: 18rpx;
|
||
height: 640rpx;
|
||
|
||
image {
|
||
border-radius: 18rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.infothererect {
|
||
padding: 32rpx 60rpx 32rpx 12rpx;
|
||
padding-bottom: 16rpx;
|
||
|
||
.infothererect_one {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
|
||
.infofiverect {
|
||
padding: 0 28rpx;
|
||
|
||
.infofiverectone {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.infofiverectoneitems {
|
||
.infofiverectoneitem {
|
||
width: 33%;
|
||
margin-top: 32rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: auto;
|
||
}
|
||
|
||
text {
|
||
margin-left: 10rpx;
|
||
width: 75%;
|
||
white-space: nowrap; //（不换行）
|
||
text-overflow: ellipsis; // (省略号）
|
||
overflow: hidden; //（多余部分隐藏）
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.infofiverectoneitems::after {
|
||
content: '';
|
||
flex: auto;
|
||
}
|
||
|
||
}
|
||
|
||
.infofourrect {
|
||
flex-wrap: nowrap;
|
||
margin-top: 16rpx;
|
||
padding: 0 28rpx;
|
||
|
||
.infofourrect_one {
|
||
width: 140rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.infofourrect_yow {
|
||
margin-left: 30rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.warp {
|
||
position: relative;
|
||
height: 100%;
|
||
|
||
.rect {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 60rpx 60rpx 0px 0px;
|
||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||
|
||
.onerect {
|
||
width: 100%;
|
||
position: relative;
|
||
padding-bottom: 34rpx;
|
||
border-bottom: 1rpx solid #F7F7F7;
|
||
|
||
image {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.nonecontentone_view {
|
||
width: 70%;
|
||
|
||
margin-left: 16rpx;
|
||
height: 124rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.onerecticon {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.towrect {
|
||
padding-bottom: 34rpx;
|
||
border-bottom: 1rpx solid #F7F7F7;
|
||
padding-top: 34rpx;
|
||
|
||
.towrect_one {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.towrect_tow {
|
||
margin-top: 16rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid var(--bg-color-button);
|
||
padding: 8rpx 26rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: var(--bg-color-button);
|
||
|
||
}
|
||
}
|
||
|
||
.thererect {
|
||
padding: 34rpx 0;
|
||
border-bottom: 1rpx solid #F7F7F7;
|
||
border-top: 1rpx solid #F7F7F7;
|
||
|
||
.thererect_one {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.thererect_tow {}
|
||
}
|
||
|
||
.fuorrect {
|
||
margin-top: 32rpx;
|
||
|
||
.fuorrect_one {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.fuorrect_tow {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.fvirect {
|
||
margin-top: 200rpx;
|
||
padding: 16rpx;
|
||
text-align: center;
|
||
background: var(--bg-color-button);
|
||
border-radius: 40rpx;
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |