appointment_weapp/pages/order/orderInfos.vue

1511 lines
36 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="index" :style="[theme]">
<view class="onecontent">
<view class="onecontentone flex-start">
<image class="onecontentone_image" :src="fuwuyuan.avatar" mode="aspectFill"></image>
<view class="onecontentone_one flex-colum-start">
<text class="onecontentone_one_top">{{fuwuyuan.nickname}}</text>
<view class="onecontentone_one_view"><text></text>{{fuwuyuan.position}}</view>
<view class="onecontentone_one_ts">
已选定
</view>
<!-- <view class="onecontentone_one_ts" @click="infoshow = true">
查看详情
</view> -->
</view>
</view>
</view>
<view class="onecontenttow">
<view class="onecontenttowone flex-start">
<view class="onecontenttowone_one">
预约时间<text>必填</text>
</view>
</view>
<view class="onecontenttowtow flex-between">
<view class="onecontenttowtow_item flex-between">
<view class=" flex-colum" v-for="(item,index) in reservationlist" :key="index"
:class="reservationshow == index ? 'onecontenttowtow_item_ones':'onecontenttowtow_item_one'"
@click="reservation(item,index)">
<text class="onecontenttowtow_item_one_textone">{{item.week}}</text>
<text class="onecontenttowtow_item_one_texttow">{{item.date.slice(5,10)}}</text>
</view>
</view>
<view class="onecontenttowtow_left flex-colum" @click="calendarshow = true">
<u-icon name="calendar" color="#b4b4b4" size="20"></u-icon>
<text class="onecontenttowtow_lefttext">选择</text>
</view>
</view>
<view class="onecontenttowthere flex-start" v-if="listday_time.length!=0">
<view v-for="(item,index) in listday_time" :key="index" @click="clicktime(item,index)"
:class="timeshow == index?'onecontenttowthere_items':'onecontenttowthere_item'">
{{item}}
</view>
</view>
<view class="onecontenttowthereflex-center" style="text-align: center; color: #ccc; padding-top: 20rpx;"
v-if="listday_time.length==0">
暂无预约时间
</view>
</view>
<view class="onecontenttow onecontenttows">
<view class="onecontenttowone flex-start" style="padding: 32rpx 32rpx 0 32rpx;">
<view class="onecontenttowone_one">
预约项目<text>(必填)</text>
</view>
</view>
<view class="content_box">
<view class="onecontent">
<view class="onecontent_tow">
<view ref="uTabs" class="onecontent_tow_item flex-colum"
v-for="(item,index) in swipercurrentdata" :key="index" @click="orderswitch(index)">
<view :class="swiperCurrent == index?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
{{item.name}}
</view>
<image class="onecontent_tow_itemtextsimges" v-if="swiperCurrent == index" :src="selected"
mode="aspectFill"></image>
</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,index1)" :class="eeInfoindexshow == index1?'towcontentitems':''">
<view class="towcontentitemtow flex-start">
<image class="towcontentitemtow_imge" :src="item.img" mode="aspectFill"></image>
<view class="towcontentitemtow_one flex-colum-start">
<text class="towcontentitemtow_one_one">{{item.title}}</text>
<text class="towcontentitemtow_one_tow"><text
style="font-size:28rpx;">¥{{item.price}}</text></text>
</view>
</view>
<view v-if="eeInfoindexshow == index1" class="towcontentitemtow_towposabslt"></view>
</view>
<view v-if="list.length==0 && is_end == true" class="flex-colum">
<image :src="bgnothave" mode="aspectFill"></image>
</view>
<u-loadmore style="padding-bottom: 10rpx;" :status="form.status" />
</view>
</view>
</view>
<view :style="{height:heights}"></view>
<view class="fixedview flex-between">
<view class="fixedview_one flex-start">
<view class="fixedview_oneone">
应付金额:
</view>
<view class="fixedview_onetow">
<text>¥</text>{{listdata.price}}
</view>
</view>
<view class="fixedview_tow" @click="overlayshow = true" v-if="listday_time.length!=0">
立即预约
</view>
<view class="fixedview_tow" style="background: #ccc;" v-else>
立即预约
</view>
</view>
<!-- <u-overlay :show="infoshow" @click="infoshow = false">
<view class="infowarp">
<view class="inforect" @tap.stop>
<view class="onerect flex-start">
<view>服务详情</view>
<u-icon @click="infoshow = false" class="onerecticon" name="close-circle-fill
" color="#000000" size="28"></u-icon>
</view>
<view class="infotowrect flex-start">
<image src="@/static/logo.png" mode="aspectFill"></image>
</view>
<view class="infothererect flex-colum-start">
<view class="infothererect_one">
【洗剪吹】新娘造型
</view>
<view class="infothererect_one">
¥120
</view>
</view>
<view class="infofourrect">
<view class="infofourrect_one">
【服务简介
</view>
<view class="infofourrect_yow">
烫发、编发、洗头、定型。
</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">
预约时间:{{day_time}}
</view>
<view class="towrect_tow">
<text>{{day_hour}}</text>
</view>
</view>
<view class="thererect flex-between">
<view class="thererect_one">
预约服务
</view>
<view class="thererect_tow">
<u-number-box v-model="numberbox" button-size="24" color="#ffffff" bgColor="#9397c1"
iconStyle="color: #fff" integer @change="numberboxchange"></u-number-box>
</view>
</view>
<view class="fuorrect flex-between">
<view class="fuorrect_one">
合计
</view>
<view class="fuorrect_tow">
¥{{listdata.price}}
</view>
</view>
<view v-if="mobiles" class="fvirect flex-center" @click="requestSubscribeMessage">
确定
</view>
<view v-else class="fvirect flex-center">
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
确定
</button>
</view>
</view>
</view>
</u-overlay>
<view class="">
<u-calendar mode="single" @confirm="confirm" :show="calendarshow"
@close="calendarshow = false"></u-calendar>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgnothave: uni.getStorageSync('bgnothave'),
mobiles: uni.cache.get('loginuser').userinfo.mobile,
selected: uni.getStorageSync('selected'),
// 因为内部的滑动机制限制请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值表示当前活动的tab选项
overlayshow: false,
infoshow: false,
eeInfoindexshow: 0,
swiperCurrent: 0,
numberbox: 1,
heights: '',
timeshow: '',
textarea: '',
reservationshow: 0,
calendarshow: false,
listhairstylistshow: -1,
reservationlist: [],
day_time: '', //日期
day_hour: '', //小时
people_id: '', //发型师id
inifid: '',
listdata: {},
remark: "",
listday_time: [],
list_Hairstylist: [],
nickname: '',
is_end: false,
form: {
page: 1,
status: 'loadmore',
},
fuwuyuan: {},
swipercurrentdata: [],
list: [],
}
},
async onLoad(e) {
this.inifid = e.id
this.confirm() //初始时间
this.init_fn() //数据
this.reservationclassyy() //全部
this.reservationpeopleinfo()
},
onShow() {
this.$store.dispatch('storeuseruserinfo')
},
onReachBottom() {
this.reservationlists()
},
computed: {
theme() {
return this.$store.getters.theme
},
},
mounted() {
//#ifdef MP-WEIXIN || H5
var query = uni.createSelectorQuery().in(this).select('.fixedview')
query.boundingClientRect(ele => {
var that = this;
uni.getSystemInfo({
success(res) {
that.heights = (ele.height) + "px";
that.height = (res.windowHeight - ele.height - (55 + that.HeighTpadding / 2)) +
"px";
console.log(res, ele, that.height)
that = null;
}
})
}).exec();
//#endif
//#ifdef MP-ALIPAY
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
var nodeData = ele[0]
var that = this;
uni.getSystemInfo({
success(res) {
that.heights = (nodeData.height) + "px";
that.height = (res.windowHeight - nodeData.height - (55 + that.HeighTpadding / 2)) +
"px";
console.log(res, nodeData, that.height)
that = null;
}
})
})
//#endif
},
methods: {
async getPhoneNumber(res) { // 获取手机号
var resdataa = res
// #ifdef MP-WEIXIN
uni.login({
provider: 'weixin',
success: async (data) => {
let resdata = await this.api.usergetwechatphone({
code: data.code,
iv: resdataa.detail.iv,
encryptedData: resdataa.detail.encryptedData
})
try {
this.mobiles = resdata.mobile
} catch (e) {
uni.showToast({
title: '获取失败'
})
}
}
});
// #endif
},
orderswitch(e) {
this.swiperCurrent = e
this.init_fn()
},
async reservationlists() {
let res = await this.api.reservationlist({
store_id: uni.getStorageSync('store_id'),
page: this.form.page,
like: this.like,
service_type_id: this.swiperCurrent
})
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]
this.listdata = this.list[0]
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.reservationlists()
},
async reservationclassyy() {
let res = await this.api.reservationclassyy()
this.swipercurrentdata = [...[{
id: 0,
name: '全部'
}], ...res]
},
async reservationpeopleinfo() {
let res = await this.api.reservationpeopleinfo({
people_id: this.inifid
})
this.fuwuyuan = res
},
async reservationdesignerviewtime() { //是否有时间
let res = await this.api.reservationdesignerviewtime({
people_id: this.inifid,
day_time: this.day_time,
store_id: uni.cache.get('store_id')
})
if (res.length != 0) {
this.listday_time = res
this.day_hour = res[0]
} else {
this.listday_time = []
}
// this.list_Hairstylist = res
},
reservation(a, b) {
this.reservationshow = b
this.day_time = a.date
this.reservationdesignerviewtime() //获取预约时间
this.timeshow = 0 //归零
},
clicklisthairstylist(a, b) {
if (a.is_select == 0) {
uni.showToast({
title: '该发型师以预约满'
})
} else {
this.listhairstylistshow = b
this.people_id = a.id
this.nickname = a.nickname
}
},
clicktime(a, b) {
this.timeshow = b
this.day_hour = a
},
numberboxchange(e) {
console.log('当前值为: ' + e.value)
},
requestSubscribeMessages() {
var this_ = this
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)
}
}
})
},
async overlayshowclick(e) {
let res = await this.api.useruserinfo() //p判断是否完成手机号
uni.cache.set('loginuser', res);
this.overlayshow = false
if (res.userinfo.mobile) {
let datares = await this.api.reservationdirectorder({
service_id: this.listdata.id,
number: this.numberbox,
mobile: uni.cache.get('loginuser').userinfo.mobile,
time: this.day_time + ' ' + this.day_hour,
remark: this.remark,
people_id: this.inifid,
username: this.fuwuyuan.nickname,
send_message: e
})
console.log(datares)
if (datares) {
uni.showToast({
title: '预约成功',
icon: 'none'
});
setTimeout(() => {
uni.pro.navigateTo('order/confirm', datares)
}, 2000);
}
// let data = {
// id: this.inifid,
// people_id: this.people_id == 0 ? 0 : this.people_id,
// day_time: this.day_time,
// day_hour: this.day_hour,
// nickname: this.nickname
// }
// uni.pro.navigateTo('order/confirm?url=' + encodeURIComponent(JSON.stringify(data)))
} else {
uni.showModal({
title: '提示',
content: '确认订单需要获取您的手机号',
success: function(res) {
if (res.confirm) {
uni.redirectTo({
url: '/pages/my/setup/index'
});
} else if (res.cancel) {}
}
});
}
},
eeInfo(e, c) { //查看订单详情
console.log(e, c)
this.eeInfoindexshow = c
this.listdata = e
},
confirm(e) {
if (e) {
this.calendarshow = false
console.log(new Date(e[0]));
var now = new Date(e[0]);
} else {
//获取当前年月日
var now = new Date();
// var year = now.getFullYear(); //得到年份
// var month = now.getMonth() + 1; //得到月份
// var date = now.getDate(); //得到日期
// data = year + "年" + month + "月" + date + "日";
}
this.reservationlist = []
for (let i = 0; i < 7; i++) {
var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
var year = date.getFullYear();
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
var day = (date.getDate()) > 9 ? (date.getDate()) : '0' + (date.getDate());
var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
// var weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
this.reservationlist.push({
date: year + "-" + month + "-" + day,
// date: month + "-" + day,
// day: day,
// weekday: weekDays[dt2.getDay()],
week: weekDay[dt2.getDay()],
});
}
this.day_time = this.reservationlist[0].date
this.reservationdesignerviewtime() //获取预约时间
}
}
}
</script>
<style lang="scss">
page {
background: #F6F6F6 !important;
}
/deep/ .mystyle {
width: 100% !important;
height: auto;
display: block;
}
.index {
padding: 32rpx 28rpx;
.onecontent {
width: 100%;
padding: 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: 116rpx;
height: 116rpx;
border-radius: 16rpx;
}
.nonecontentone_view {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.onecontentone_one {
position: relative;
justify-content: space-evenly;
flex: 1;
margin-left: 24rpx;
.onecontentone_one_ts {
padding: 8rpx 22rpx;
position: absolute;
top: -22rpx;
transform: translateY(-50%);
right: -28rpx;
background: var(--bg-color-button);
border-radius: 0px 12rpx 0px 12rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
}
.onecontentone_one_top {
font-size: 32rpx;
font-family: Roboto-Bold, Roboto;
font-weight: bold;
color: #333333;
}
.onecontentone_one_view {
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #999999;
}
}
}
}
.onecontenttows {
width: 100%;
padding: 0rpx !important;
background: #FFFFFF;
}
.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;
}
.content_box {
.onecontent {
width: 100%;
background: #FFFFFF;
padding: 10rpx 28rpx;
.onecontent_oen {
margin: 0 auto;
width: 100%;
height: 70rpx;
border-radius: 36rpx;
border: 2rpx solid #333333;
padding-right: 8rpx;
.onecontent_oen_input {
padding-left: 32rpx;
flex: 1;
}
.onecontent_oen_text {
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 56rpx;
width: 116rpx;
height: 56rpx;
background: #333333;
border-radius: 36rpx;
}
}
.onecontent_tow {
padding: 0 0 32rpx 0;
width: 100%;
display: flex;
overflow: auto;
.onecontent_tow_item {
position: relative;
margin: 0 16rpx;
.onecontent_tow_itemtexts {
white-space: nowrap;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #333333;
}
.onecontent_tow_itemtext {
white-space: nowrap;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.onecontent_tow_itemtextsimges {
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%);
width: 20rpx;
height: 8rpx;
background-size: 100% 100%;
}
}
}
}
.towcontent {
.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;
}
}
.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;
}
}
.towcontentitems {
width: 100%;
background: #FFFFFF;
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
}
.towcontentitem {
padding: 24rpx;
width: 100%;
position: relative;
border: 1px solid #F7F7F7;
.towcontentitemtow_towposabslt {
position: absolute;
right: 0;
top: 0;
width: 78rpx;
height: 50rpx;
background: url(@/static/towcontentitemtow_towposabslt.png) no-repeat;
background-size: cover;
}
.towcontentitemone {
.towcontentitemone_one {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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 {
width: 144rpx;
height: 144rpx;
background: #666666;
border-radius: 12rpx;
}
.towcontentitemtow_one {
margin-left: 32rpx;
width: 60%;
.towcontentitemtow_one_one {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.towcontentitemtow_one_tow {
margin-top: 24rpx;
font-size: 40rpx;
font-family: Roboto-Bold, Roboto;
font-weight: bold;
color: #FC5F69;
}
}
.towcontentitemtow_tow {
position: absolute;
bottom: 32rpx;
right: 0;
font-size: 28rpx;
font-family: Roboto-Regular, Roboto;
font-weight: 400;
color: #999999;
}
}
.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;
}
}
}
}
}
.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 {
margin-top: 10rpx;
.onecontenttowthere_item {
width: 17%;
margin: 0 4%;
margin-top: 24rpx;
padding: 8rpx 0;
text-align: center;
background: #F7F7F7;
border-radius: 8rpx;
border: 2rpx solid #F7F7F7;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #999999;
}
.onecontenttowthere_items {
width: 17%;
margin: 0rpx 4%;
margin-top: 24rpx;
padding: 8rpx 0;
text-align: center;
background: #F7F7F7;
text-align: center;
border-radius: 8rpx;
border: 1rpx solid var(--bg-color-buttontow);
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: var(--bg-color-buttontow);
}
}
}
.onecontenttere {
margin-top: 24rpx;
width: 100%;
padding: 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
.onecontentterewone::before {
content: '';
display: inline-block;
width: 4rpx;
height: 24rpx;
background: #1A1A1A;
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;
}
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 8rpx;
font-size: 16rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
background: #333333;
border-radius: 16rpx;
text {
color: #FFFFFF;
background: #333333;
}
}
}
.onecontentterewtow_items {
width: 22%;
margin: 0 1.5%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 20rpx;
padding: 20rpx 16rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx solid #333333;
image {
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 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 8rpx;
font-size: 16rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
background: #333333;
border-radius: 16rpx;
text {
color: #FFFFFF;
background: #333333;
}
}
}
}
}
.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: #1A1A1A;
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;
}
}
}
}
.fixedview {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 24rpx 28rpx;
background: #FFFFFF;
.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;
}
}
.infowarp {
position: relative;
height: 100%;
.inforect {
position: absolute;
bottom: 0;
width: 100%;
background: #FFFFFF;
border-radius: 60rpx 60rpx 0px 0px;
padding: 48rpx 32rpx 32rpx 32rpx;
.onerect {
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: 686rpx;
height: 640rpx;
image {
border-radius: 18rpx;
width: 100%;
height: 100%;
}
}
.infothererect {
padding-bottom: 16rpx;
border-bottom: 4rpx solid #F9F9F9;
.infothererect_one {
margin-top: 22rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
}
.infofourrect {
.infofourrect_one {
margin-top: 32rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.infofourrect_yow {
margin-top: 18rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #1A1A1A;
}
}
}
.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%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 16rpx;
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;
text {
background: #F7F7F7;
border-radius: 8rpx;
border: 2rpx solid #333333;
padding: 8rpx 26rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
}
}
.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;
button::after {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
button {
background-color: transparent !important;
padding: 0 !important;
color: #FFFFFF;
line-height: inherit !important;
margin: 0 !important;
width: 100% !important;
font-weight: 500 !important;
border-radius: none !important;
}
}
}
}
}
</style>