1154 lines
29 KiB
Vue
1154 lines
29 KiB
Vue
<template>
|
||
<view class="index" :style="[theme]">
|
||
<image class="index_top_imge" :src="lists.store.bananer[0]" mode="widthFix"></image>
|
||
<view class="index_box">
|
||
<view class="oneindex_box">
|
||
<view class="oneindex_box_image">
|
||
<image :src="lists.store.avatar" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="oneindex_box_text flex-colum-start">
|
||
<view class="oneindex_box_text_one">
|
||
{{lists.store.title}}
|
||
</view>
|
||
<view class="oneindex_box_text_tow flex-start">
|
||
<u-rate :count="count" v-model="lists.store.score" readonly active-color="#f1cb66"
|
||
inactive-color="#F1CB66"></u-rate>
|
||
<text class="oneindex_box_text_towtext">{{lists.store.score}}.0</text>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_box_text flex-between">
|
||
<view class="towindex_box_text_one">
|
||
营业时间：{{lists.store.b_hours}}
|
||
</view>
|
||
<view class="towindex_box_text_tow flex-start" @click="mobilemobile(lists.store.mobile)">
|
||
<u-icon name="phone-fill" color="#2ca248" size="22"></u-icon>
|
||
<text>联系商家</text>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_box_dw flex-start" @click="openmap">
|
||
<image src="@/static/positioning.png" mode="aspectFill"></image>
|
||
<text style="margin-left: 12rpx;">{{lists.store.address}}111</text>
|
||
</view>
|
||
<view class="towindex_box_bouttn flex-start">
|
||
<text v-for="(item,index) in lists.store.label" :key="index">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_box">
|
||
<view class="towindex_boxtop" @click="calendarshow = true">
|
||
<view class="towindex_boxtop_box flex-between">
|
||
<view class="towindex_boxtop_boxitem flex-start">
|
||
<view class="towindex_boxtop_boxitem_one flex-colum">
|
||
<view class="towindex_boxtop_boxitem_ones">
|
||
入驻
|
||
</view>
|
||
<view class="towindex_boxtop_boxitem_onestime">
|
||
<text>{{lists.start}}</text>
|
||
<text style="margin-left: 10rpx;">周{{lists.weekstart}}</text>
|
||
</view>
|
||
</view>
|
||
<text class="towindex_boxtop_boxitem_onehenggang"></text>
|
||
<view class="towindex_boxtop_boxitem_one flex-colum">
|
||
<view class="towindex_boxtop_boxitem_ones">
|
||
离店
|
||
</view>
|
||
<view class="towindex_boxtop_boxitem_onestime">
|
||
<text>{{lists.end}}</text>
|
||
<text style="margin-left: 10rpx;">周{{lists.weekend}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_boxtop_boxitemr flex-start">
|
||
<view class="towindex_boxtop_boxitemrview">
|
||
共<text class="towindex_boxtop_boxitemrtext">{{lists.long}}</text>晚
|
||
</view>
|
||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towindex_boxbottom_box flex-between" @click="popupshow = true">
|
||
<view class="towindex_boxbottom_boxone">
|
||
可住人数
|
||
</view>
|
||
<view class="towindex_boxbottom_boxtow flex-start">
|
||
<view class="towindex_boxbottom_boxtowtext">
|
||
{{among}}间·{{adult}}成人·{{children}}儿童
|
||
</view>
|
||
<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="op<=0" class="positionfixed">
|
||
<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 class="onecontent">
|
||
<view class="onecontent_tow">
|
||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||
:key="item.id" @click="orderswitch(item.id)">
|
||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="onecontent">
|
||
<view class="contenttext">
|
||
<text class="contenttexttext">{{list.position_nickname || '热门房型'}}</text>
|
||
</view>
|
||
<view class="onecontent_tow">
|
||
<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
|
||
:key="item.id" @click="orderswitch(item.id)">
|
||
<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontent">
|
||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
|
||
@click="eeInfo(item)">
|
||
|
||
<view class="towcontentitemtow flex-start">
|
||
<image class="towcontentitemtow_imge" style="z-index: 99;" :src="item.img" mode="widthFix"></image>
|
||
<view class="towcontentitemtow_one flex-colum-start">
|
||
<text class="towcontentitemtow_one_one">{{item.title}}</text>
|
||
<view class="towcontentitemtow_one_tow">
|
||
<text v-for="(labels,index3) in item.label" :key="index3" v-if="3 > index3"
|
||
style="margin-left: 10rpx;">{{labels.name}}</text>
|
||
</view>
|
||
<view class="towcontentitemtow_one_there flex-between">
|
||
<text>{{item.cancel_time}}</text>
|
||
<view class="towcontentitemtow_tow"
|
||
:class="item.residue_number <= 0 ? 'towcontentitemtow_tows':''">
|
||
预约
|
||
</view>
|
||
</view>
|
||
<view class="towcontentitemtow_one_feur flex-start">
|
||
<view class="flex-start" v-for="(service_ops,index2) in item.service_op" :key="index2"
|
||
style="margin-left: 4rpx;">
|
||
<u-icon name="checkmark-circle" color="#333333" size="14"></u-icon>
|
||
<text style="margin-left: 4rpx;">{{service_ops}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||
<image :src="bgnothave" mode="widthFix" style="margin-top: 100rpx;">
|
||
</image>
|
||
</view>
|
||
<u-loadmore :status="form.status" />
|
||
</view>
|
||
</view>
|
||
<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>
|
||
<u-calendar :show="calendarshow" color="#76903C" :mode="calendarmode" @close='calendarshow = false'
|
||
@confirm="confirm"></u-calendar>
|
||
<bottombbar :valuebbar='0'></bottombbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dayjs from "dayjs";
|
||
import bottombbar from '@/components/bottombbar.vue'
|
||
export default {
|
||
components: {
|
||
bottombbar
|
||
},
|
||
data() {
|
||
return {
|
||
adult: 1, //可住成人
|
||
children: 0, //可住儿童
|
||
bed: 1, //床位
|
||
among: 1, //间数
|
||
count: '',
|
||
valuenumberbox: 0,
|
||
popupshow: false,
|
||
lists: {
|
||
long: '', //多少天
|
||
start: '',
|
||
end: '',
|
||
weekstart: '',
|
||
weekend: '',
|
||
store: {
|
||
score: 1,
|
||
bananer: []
|
||
}
|
||
},
|
||
currentTime: "",
|
||
calendarshow: false,
|
||
calendarmode: 'range',
|
||
bgnothave: uni.getStorageSync('bgnothave'),
|
||
list: [],
|
||
is_end: false,
|
||
swiperCurrent: 0,
|
||
overlayshow: false,
|
||
swipercurrentdata: [],
|
||
like: '',
|
||
form: {
|
||
page: 1,
|
||
status: 'loadmore',
|
||
},
|
||
op: 1,
|
||
}
|
||
},
|
||
async onLoad(e) {
|
||
this.lists.start = dayjs(new Date()).format("YYYY-MM-DD");
|
||
this.lists.end = dayjs(new Date(this.lists.start).getTime() + 86400000).format('YYYY-MM-DD');
|
||
this.indexappclassindex()
|
||
},
|
||
onShow() {
|
||
this.reservationclassyy()
|
||
this.reservationlist()
|
||
this.$store.dispatch("actionsclassification");
|
||
},
|
||
computed: {
|
||
theme() {
|
||
return this.$store.getters.theme
|
||
},
|
||
},
|
||
onPageScroll(res) {
|
||
this.getElInfo()
|
||
},
|
||
onReachBottom() {
|
||
this.reservationlist()
|
||
},
|
||
methods: {
|
||
popupclose() {
|
||
this.popupshow = false
|
||
this.init_fn()
|
||
},
|
||
getElInfo() {
|
||
var that = this;
|
||
let query = uni.createSelectorQuery().in(this);
|
||
query.select('.content').boundingClientRect(data => {
|
||
// console.log('元素距离顶部的距离' + data.top)
|
||
that.op = data.top
|
||
// 这个
|
||
}).exec();
|
||
},
|
||
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.init_fn()
|
||
},
|
||
openmap() { //打开地图
|
||
uni.openLocation({
|
||
latitude: Number(this.lists.store.lat),
|
||
longitude: Number(this.lists.store.lng),
|
||
name: this.lists.store.title,
|
||
address: this.lists.store.address,
|
||
success: (res) => {
|
||
console.log('success');
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
eeInfo(e) { //查看订单详情
|
||
uni.pro.navigateTo('order/orderInfohotel', {
|
||
id: e.id,
|
||
start_time: this.lists.start,
|
||
end_time: this.lists.end,
|
||
long: this.lists.long,
|
||
weekstart: this.lists.weekstart,
|
||
weekend: this.lists.weekend,
|
||
adult: this.adult, //可住成人
|
||
children: this.children, //可住儿童
|
||
bed: this.bed, //床位
|
||
among: this.among, //间数
|
||
})
|
||
},
|
||
mobilemobile(e) { //打电话
|
||
uni.makePhoneCall({
|
||
phoneNumber: e //仅为示例
|
||
});
|
||
},
|
||
async indexappclassindex() { //店铺详情
|
||
let res = await this.api.indexnewappclassindex({
|
||
store_id: uni.cache.get('store_id')
|
||
})
|
||
try {
|
||
if (res) {
|
||
this.lists.store = res.store
|
||
this.count = Number(res.store.score)
|
||
this.lists.long = 1
|
||
this.lists.weekstart = this.getweekday(this.lists.start)
|
||
this.lists.weekend = this.getweekday(this.lists.end)
|
||
this.lists.describe = res.describe.replace(/\<img/g,
|
||
'<img style="max-width:100%;height:auto" ');
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
|
||
},
|
||
|
||
async reservationclassyy() {
|
||
let res = await this.api.reservationclassyy()
|
||
this.swipercurrentdata = [...[{
|
||
id: 0,
|
||
name: '全部'
|
||
}], ...res]
|
||
},
|
||
async reservationlist() {
|
||
let res = await this.api.reservationlist({
|
||
store_id: uni.getStorageSync('store_id'),
|
||
page: this.form.page,
|
||
like: this.like,
|
||
service_type_id: this.swiperCurrent,
|
||
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 //
|
||
})
|
||
if (res.length == 0) {
|
||
this.is_end = true
|
||
this.form.status = 'nomore'
|
||
return false;
|
||
} else {
|
||
this.form.status = 'loading';
|
||
this.form.page = ++this.form.page;
|
||
setTimeout(() => {
|
||
this.list = [...this.list, ...res];
|
||
if (res.length == 10) {
|
||
this.form.status = 'loading';
|
||
} else {
|
||
this.is_end = true;
|
||
this.form.status = 'nomore';
|
||
}
|
||
}, 500)
|
||
}
|
||
},
|
||
init_fn() {
|
||
this.list = []
|
||
this.is_end = false
|
||
this.form.page = 1
|
||
this.form.status = 'loadmore'
|
||
this.reservationlist()
|
||
},
|
||
orderswitch(e) {
|
||
this.swiperCurrent = e
|
||
this.init_fn()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
.index {
|
||
.index_top_imge {
|
||
width: auto;
|
||
height: auto;
|
||
z-index: 98;
|
||
}
|
||
|
||
.index_box {
|
||
position: relative;
|
||
z-index: 99;
|
||
margin-top: -45rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 26rpx 26rpx 0px 0px;
|
||
|
||
.oneindex_box {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 16rpx 28rpx 32rpx 28rpx;
|
||
|
||
.oneindex_box_image {
|
||
position: absolute;
|
||
left: 28rpx;
|
||
top: -30rpx;
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
border-radius: 16rpx;
|
||
|
||
image {
|
||
border-radius: 16rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.oneindex_box_text {
|
||
margin-left: 130rpx;
|
||
|
||
.oneindex_box_text_one {
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.oneindex_box_text_tow {
|
||
.oneindex_box_text_towtext {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #F1CB66;
|
||
}
|
||
}
|
||
}
|
||
|
||
.towindex_box_text {
|
||
margin-top: 6rpx;
|
||
|
||
.towindex_box_text_one {
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.towindex_box_text_tow {
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.towindex_box_dw {
|
||
image {
|
||
width: 25.37rpx;
|
||
height: 33.02rpx;
|
||
}
|
||
|
||
margin-top:16rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN,
|
||
Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.towindex_box_bouttn {
|
||
margin-top: 12rpx;
|
||
|
||
text:nth-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
text {
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
margin-left: 42rpx;
|
||
padding: 8rpx 14rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.towindex_box {
|
||
margin-top: 36rpx;
|
||
padding: 30rpx 32rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 22rpx;
|
||
|
||
.towindex_boxtop {
|
||
width: 100%;
|
||
border-bottom: 4rpx solid #F0F0F0;
|
||
|
||
.towindex_boxtop_box {
|
||
padding: 0 16rpx 12rpx 40rpx;
|
||
|
||
.towindex_boxtop_boxitem {
|
||
.towindex_boxtop_boxitem_onehenggang {
|
||
width: 30rpx;
|
||
height: 2rpx;
|
||
background: #000000;
|
||
margin: 45rpx 28rpx 0 28rpx;
|
||
}
|
||
|
||
.towindex_boxtop_boxitem_one {
|
||
.towindex_boxtop_boxitem_ones {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.towindex_boxtop_boxitem_onestime {
|
||
margin-top: 8rpx;
|
||
|
||
text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
text:nth-child(2) {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.towindex_boxtop_boxitemr {
|
||
margin-top: 45rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
.towindex_boxtop_boxitemrview {
|
||
.towindex_boxtop_boxitemrtext {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.towindex_boxbottom_box {
|
||
padding: 16rpx 16rpx 0rpx 40rpx;
|
||
|
||
.towindex_boxbottom_boxone {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.towindex_boxbottom_boxtow {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.positionfixed {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
padding: 0 28rpx 24rpx 28rpx;
|
||
z-index: 9999;
|
||
background: #f5f5f5;
|
||
|
||
.onecontent {
|
||
padding: 0 30rpx;
|
||
|
||
.contenttext {
|
||
.contenttexttext {
|
||
width: auto;
|
||
position: relative;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.contenttexttext::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5rpx;
|
||
right: -6rpx;
|
||
z-index: 0;
|
||
display: inline-block;
|
||
width: 118rpx;
|
||
height: 10rpx;
|
||
background: var(--bgbuttonbackground);
|
||
border-radius: 8rpx;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
.onecontent_tow {
|
||
padding: 0 18rpx;
|
||
margin-top: 32rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
overflow: auto;
|
||
|
||
.onecontent_tow_item:nth-child(1) {
|
||
margin: 0;
|
||
}
|
||
|
||
.onecontent_tow_item {
|
||
position: relative;
|
||
margin: 0 10rpx;
|
||
|
||
.onecontent_tow_itemtexts {
|
||
white-space: nowrap;
|
||
padding: 8rpx 18rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid var(--bg-color-button);
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: var(--bg-color-button);
|
||
|
||
white-space: nowrap;
|
||
padding: 4rpx 12rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #76903C;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #76903C;
|
||
}
|
||
|
||
.onecontent_tow_itemtext {
|
||
white-space: nowrap;
|
||
padding: 4rpx 12rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #E6E6E6;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
// .onecontent_tow_itemtexts::after {
|
||
// content: '';
|
||
// position: absolute;
|
||
// bottom: -10rpx;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 19.33rpx;
|
||
// height: 6.66rpx;
|
||
// background: url(https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/order1.png) no-repeat;
|
||
// background-size: 100% 100%;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.positionfixedbox {
|
||
width: 100%;
|
||
padding: 28rpx 20rpx 32rpx 20rpx;
|
||
background: #F6FAF2;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 28rpx;
|
||
|
||
.onecontent {
|
||
padding: 0 30rpx;
|
||
|
||
.contenttext {
|
||
.contenttexttext {
|
||
width: auto;
|
||
position: relative;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.contenttexttext::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5rpx;
|
||
right: -6rpx;
|
||
z-index: 0;
|
||
display: inline-block;
|
||
width: 118rpx;
|
||
height: 10rpx;
|
||
background: var(--bgbuttonbackground);
|
||
border-radius: 8rpx;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
.onecontent_tow {
|
||
padding: 0 18rpx;
|
||
margin-top: 32rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
overflow: auto;
|
||
|
||
.onecontent_tow_item:nth-child(1) {
|
||
margin: 0;
|
||
}
|
||
|
||
.onecontent_tow_item {
|
||
position: relative;
|
||
margin: 0 10rpx;
|
||
|
||
.onecontent_tow_itemtexts {
|
||
white-space: nowrap;
|
||
padding: 8rpx 18rpx;
|
||
background: #F7F7F7;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid var(--bg-color-button);
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: var(--bg-color-button);
|
||
|
||
white-space: nowrap;
|
||
padding: 4rpx 12rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #76903C;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #76903C;
|
||
}
|
||
|
||
.onecontent_tow_itemtext {
|
||
white-space: nowrap;
|
||
padding: 4rpx 12rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #E6E6E6;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontent {
|
||
z-index: 99;
|
||
padding: 0 28rpx;
|
||
|
||
.flex-colum_image {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
|
||
text {
|
||
margin-top: 30rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.towcontentitem {
|
||
margin-top: 32rpx;
|
||
padding: 32rpx 36rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
|
||
.towcontentitemone {
|
||
// padding-bottom: 16rpx;
|
||
// border-bottom: 1px solid #F6F6F6;
|
||
|
||
.towcontentitemone_one {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontentitemone_tow {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
|
||
.towcontentitemone_towimage {
|
||
margin-right: 10rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontentitemtow {
|
||
position: relative;
|
||
|
||
.towcontentitemtow_imge {
|
||
z-index: 99;
|
||
width: 196rpx;
|
||
height: 232rpx;
|
||
background: #666666;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.towcontentitemtow_one {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-left: 16rpx;
|
||
justify-content: space-around;
|
||
|
||
.towcontentitemtow_one_one {
|
||
width: 402rpx;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* 2行后省略号 */
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontentitemtow_one_tow {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.towcontentitemtow_one_there {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
|
||
text {
|
||
width: 75%;
|
||
overflow: hidden;
|
||
white-space: inherit;
|
||
text-overflow: ellipsis;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #76903C;
|
||
}
|
||
|
||
.towcontentitemtow_tow {
|
||
width: 98rpx;
|
||
height: 56rpx;
|
||
text-align: center;
|
||
line-height: 56rpx;
|
||
background: #76903C;
|
||
border-radius: 14rpx;
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
// background: var(--bg-color-button);
|
||
}
|
||
|
||
.towcontentitemtow_tows {
|
||
background: #ccc;
|
||
color: #666;
|
||
// background: var(--bg-color-button);
|
||
}
|
||
}
|
||
|
||
.towcontentitemtow_one_feur {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.towcontentitemthere {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.towcontentitemthereitem {
|
||
margin-left: 24rpx;
|
||
padding: 8rpx 32rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.towcontentitemthereitem_one {
|
||
background: linear-gradient(101deg, #FA8E5D 0%, #F45E4D 100%);
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.towcontentitemthereitem_tow {
|
||
background: #F6F6F6;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #999999;
|
||
}
|
||
|
||
.towcontentitemthereitem_there {
|
||
background: linear-gradient(101deg, #8083A7 0%, #4D4E64 100%);
|
||
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;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |