1085 lines
22 KiB
Vue
1085 lines
22 KiB
Vue
<template>
|
||
<view class="box flex justify-start flex-column align-items" :class="{ 'no-scroll': overlay }">
|
||
<view class="swiper">
|
||
<image :src="detail.detail.headimage" mode="" style="width: 750rpx;height: 450rpx;"></image>
|
||
<!-- <u-swiper :list="detail.detail.images" indicator indicatorMode="line" height="450rpx" circular></u-swiper> -->
|
||
</view>
|
||
<view class="con-center w-100 flex justify-center flex-column align-items flex-start">
|
||
<view class="first-box flex flex-start flex-column justify-start">
|
||
<span class="first-name">{{'' + detail.detail.title}}</span>
|
||
<span class="line"></span>
|
||
<span class="huodong text-blue">活动介绍</span>
|
||
<view class="line-title">
|
||
<span class="title">活动时间:</span>
|
||
<span class="conter">{{'' + detail.detail.start_time_text}} - {{detail.detail.end_time_text}}</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">报名时间:</span>
|
||
<span class="conter">{{'' + detail.detail.sign_start_time_text}} - {{detail.detail.sign_end_time_text}}</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">报名费用:</span>
|
||
<span class="conter" style="color: #FF5F5F;" v-if="detail.detail.feel == 2">{{'' + detail.detail.price + '元'}}</span>
|
||
<span class="conter" style="color: #FF5F5F;" v-if="detail.detail.feel == 1">公益</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">活动人数:</span>
|
||
<span class="conter">{{'' + detail.detail.people_num}}</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">可参与人数:</span>
|
||
<span class="conter">{{'' + detail.detail.stock}}</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">已参加人数:</span>
|
||
<span class="conter">{{'' + detail.detail.sale}}</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">活动项目:</span>
|
||
<span class="conter">{{'' + detail.detail.item}}</span>
|
||
</view>
|
||
<view class="line-title flex align-items"
|
||
@click.stop="toMap(detail.detail.latitude,detail.detail.longitude,detail.detail.address_detail)">
|
||
<span class="title">活动地址:</span>
|
||
<span class="conter flex align-items ">
|
||
<span class="white-space" style="width: 500rpx;">{{'' + detail.detail.address_detail}}</span>
|
||
<image src="../../static/center/address.png" mode="" class="icon-size"></image>
|
||
</span>
|
||
</view>
|
||
<view class="line-title">
|
||
<span class="title">活动项目:</span>
|
||
<span class="status" v-if="detail.status == -3" style="color: #FF0000;">已取消</span>
|
||
<span class="status text-blue" v-if="detail.status == 0" >待支付</span>
|
||
<span class="status text-blue" v-if="detail.status == 2" >待审核</span>
|
||
<span class="status text-blue" v-if="detail.status == 3">已预约</span>
|
||
<span class="status" v-if="detail.status == 4" style="color: #FF0000;">售后中</span>
|
||
<span class="status" v-if="detail.status == 5" style="color: #FF0000;">退款中</span>
|
||
<span class="status" v-if="detail.status == 6" style="color: #FF0000;">已退款</span>
|
||
<span class="status" v-if="detail.status == 9" style="color: #34DC12;">已完成</span>
|
||
</view>
|
||
<view class="flex justify-center flex-column align-items w-100" v-if="detail.status == 3">
|
||
<image :src="detail.codeimage" mode="" style="width: 376rpx; height: 376rpx;"></image>
|
||
<span style="margin: 34rpx 0;font-weight: 800;font-size: 38rpx;color: #343434;">核销二维码</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 课程详情 -->
|
||
<view class="six flex flex-column" style="justify-content: flex-start;">
|
||
<view class="six-header flex align-items space-between">
|
||
<!-- <image src="../../static/center/kecheng.png" mode="" style="width: 168rpx; height: 48rpx;"></image> -->
|
||
活动详情
|
||
</view>
|
||
<view class="six-center flex first-txt flex-column">
|
||
<!-- <rich-text :nodes="detail.content" style="width: 100%;" :tagStyle="style"></rich-text> -->
|
||
<u-parse :content="detail.detail.content" :tagStyle="style"></u-parse>
|
||
<!-- <view class="s-header flex justify-start flex-column">
|
||
<span>单门课程报名费用：499元/10小时，共5节课</span>
|
||
<span>上课时间：每周对应固定时间晚上19：00-21：00</span>
|
||
<span>上课人数：每门课程10人起</span>
|
||
<span>上课地点：</span>
|
||
<span>洛阳市老城区同化街1654号</span>
|
||
</view>
|
||
<image src="../../static/center/detail.png" mode="" style="width: 644rpx; height: 1054rpx;"></image> -->
|
||
</view>
|
||
</view>
|
||
<view class="footer flex align-items">
|
||
<view class="footer-left">
|
||
<view class="flex flex-column white-space" style="align-items: flex-start;">
|
||
<span class="feiyong white-space flex flex-start" style="flex-flow: row;">
|
||
{{detail.detail.item}}
|
||
</span>
|
||
<view class="flex align-items">
|
||
<span class="tips">{{detail.orderitem.limit_num}}人</span>
|
||
<span class="tips" style="margin: 0 24rpx;">{{detail.orderitem.age}}岁</span>
|
||
<span class="tips" v-if="detail.orderitem.sex == 3">男女不限</span>
|
||
<span class="tips" v-else>{{detail.orderitem.sex == 1 ? "男" : "女"}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer-right flex justify-center align-items" v-if="detail.detail.feel == 1">
|
||
<span style="color: #FF5F5F;">公 益 </span>
|
||
</view>
|
||
<view class="footer-right flex justify-center flex-column align-items" v-if="detail.detail.feel == 2">
|
||
<span class="price">{{'￥' + detail.orderitem.price}}</span>
|
||
<span class="title">报名费用</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
detail: '',
|
||
selectedIndex: 0, // 默认选中第一个
|
||
listOrder_no: '',
|
||
price: '',
|
||
order_no:'',
|
||
skuId:'',
|
||
uloadingShow:false,
|
||
buyShow:false,
|
||
PayPirce:'',
|
||
popupStyle: {
|
||
width: '100%',
|
||
height: '570rpx',
|
||
margin: '0 auto', // 水平居中
|
||
display: 'flex',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center'
|
||
},
|
||
skuList:[] //规格
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.userInfo = uni.getStorageSync("userInfo")
|
||
this.id = options.id
|
||
this.getDetail()
|
||
|
||
},
|
||
methods: {
|
||
|
||
|
||
// 获取详情
|
||
getDetail() {
|
||
uni.$u.http.get('/api/school.activity.order/detail', {
|
||
params: {
|
||
id: this.id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.detail = res.data.detail;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
// 处理错误
|
||
console.error('获取详情失败:', error);
|
||
});
|
||
},
|
||
|
||
|
||
// 导航
|
||
toMap(latitude, longitude, name) {
|
||
uni.openLocation({
|
||
latitude: parseFloat(latitude),
|
||
longitude: parseFloat(longitude),
|
||
name: name,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
callPhone(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.w-100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-start {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.justify-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.align-items {
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-column {
|
||
flex-flow: column;
|
||
}
|
||
|
||
.justify-start {
|
||
justify-content: start;
|
||
}
|
||
|
||
|
||
.con-center {
|
||
background: linear-gradient(to bottom,
|
||
#F1F2F8 0%,
|
||
#F1F2F8 10%,
|
||
#FFFFFF 50%,
|
||
#FFFFFF 95%);
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 450rpx;
|
||
}
|
||
|
||
.box {
|
||
position: relative;
|
||
}
|
||
|
||
.first-box {
|
||
width: 690rpx;
|
||
background: #FFFFFF;
|
||
padding-left: 24rpx;
|
||
margin-top: 24rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.huodong {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
margin: 23rpx 0;
|
||
|
||
}
|
||
|
||
.line-row {
|
||
width: 642rpx;
|
||
height: 1rpx;
|
||
background: #D9D9D9;
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.center {
|
||
margin-left: 24rpx;
|
||
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #343434;
|
||
}
|
||
|
||
.cen-tit {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
margin-top: 39rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
.btn1 {
|
||
width: 138rpx;
|
||
height: 48rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.btn {
|
||
width: 138rpx;
|
||
height: 48rpx;
|
||
background: #D9D9D9;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.price {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #FF5F5F;
|
||
margin-top: 39rpx;
|
||
}
|
||
}
|
||
|
||
.line-title {
|
||
margin-bottom: 18rpx;
|
||
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.conter {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
.status{
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.first-name {
|
||
width: 100%;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #343434;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.first-money {
|
||
height: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #FF2323;
|
||
}
|
||
|
||
.first-mine {
|
||
height: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
|
||
}
|
||
|
||
.first-txt {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
margin: 0 6rpx;
|
||
}
|
||
|
||
.first-image {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
margin: 16rpx 0 16rpx 0;
|
||
}
|
||
}
|
||
|
||
.second-box {
|
||
width: 90%;
|
||
margin-top: 42rpx;
|
||
// background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding-left: 24rpx;
|
||
position: relative;
|
||
|
||
.second-title {
|
||
// margin: 17rpx 35rpx 15rpx 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.second {
|
||
padding: 24rpx 23rpx 0 0rpx;
|
||
margin-top: 32rpx;
|
||
|
||
view {
|
||
width: 20%;
|
||
margin: 24rpx 0 0 0;
|
||
}
|
||
|
||
image {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
}
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
}
|
||
|
||
.number {
|
||
width: 108rpx;
|
||
color: #FF4949;
|
||
font-size: 42rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.third {
|
||
margin-top: 24rpx;
|
||
width: 93%;
|
||
|
||
.third-header {
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #008CFF;
|
||
}
|
||
|
||
.third-box {
|
||
margin: 12rpx 0 0 24rpx;
|
||
}
|
||
|
||
.third-center {
|
||
margin-top: 28rpx;
|
||
width: 100%;
|
||
height: 242rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.scroll-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
animation: scroll 12s linear infinite;
|
||
}
|
||
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(calc(-100% + 8 * 100px));
|
||
/* 8 * 100px 是假设每个项目的宽度为 100px */
|
||
}
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
width: 94%;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 22rpx 24rpx 24rpx 24rpx;
|
||
height: 32rpx;
|
||
|
||
/* 假设每条数据的高度为60rpx */
|
||
}
|
||
|
||
.item image {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.line-colum {
|
||
margin: 0 10rpx;
|
||
border-left: 1rpx solid #ccc;
|
||
height: 42rpx;
|
||
}
|
||
|
||
.item span {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(-240rpx);
|
||
/* 总高度为 4 * 60rpx = 240rpx */
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.six {
|
||
margin-bottom: 106rpx;
|
||
width: 100%;
|
||
background: linear-gradient(to bottom, #F1F2F8 0%, #FFFFFF 1%, #FFFFFF 100%);
|
||
align-items: center;
|
||
|
||
|
||
.six-header {
|
||
width: 93%;
|
||
padding-top: 64rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #008CFF;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 42rpx;
|
||
color: #008CFF;
|
||
// background: linear-gradient(to bottom, #F1F2F8 0%, #ffffff 24%, #FFFFFF 100%);
|
||
}
|
||
|
||
.six-box {
|
||
width: 93%;
|
||
margin: 12rpx 0 0 24rpx;
|
||
}
|
||
|
||
.six-center {
|
||
width: 93%;
|
||
margin-top: 41rpx;
|
||
|
||
|
||
.s-header {
|
||
padding: 24rpx;
|
||
width: 642rpx;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
|
||
.s-footer {
|
||
padding: 24rpx;
|
||
width: 642rpx;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
|
||
.s-footer .h4 {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #656565;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.line {
|
||
width: 95%;
|
||
height: 1rpx;
|
||
background: #D9D9D9;
|
||
margin: 19rpx 0 19rpx 0;
|
||
}
|
||
|
||
.icon-size {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: 166rpx;
|
||
background: #ffffff;
|
||
// box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
position: sticky;
|
||
z-index: 99;
|
||
/* 绝对定位 */
|
||
bottom: 0;
|
||
/* 定位在底部 */
|
||
left: 0;
|
||
justify-content: space-evenly;
|
||
/* 定位在左边 */
|
||
|
||
.footer-left {
|
||
// position: absolute;
|
||
// top: 24rpx;
|
||
// left: 30rpx;
|
||
display: flex;
|
||
width: 60%;
|
||
|
||
view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// margin-right: 42rpx;
|
||
|
||
// span {
|
||
// text-align: center;
|
||
// }
|
||
}
|
||
|
||
.feiyong {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #343434;
|
||
|
||
.price {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #FF5F5F;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.footer-right {
|
||
// position: absolute;
|
||
// top: 27rpx;
|
||
// right: 30rpx;
|
||
|
||
span {
|
||
font-family: Kingnamype Yuanmo SC, Kingnamype Yuanmo SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
letter-spacing: 6rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
.price{
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #FF0000;
|
||
}
|
||
.title{
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
|
||
.footer-right1 {
|
||
position: absolute;
|
||
top: 27rpx;
|
||
right: 30rpx;
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
background: #008CFF;
|
||
border-radius: 401rpx 401rpx 401rpx 401rpx;
|
||
|
||
span {
|
||
font-family: Kingnamype Yuanmo SC, Kingnamype Yuanmo SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
letter-spacing: 6rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.share {
|
||
position: fixed;
|
||
color: #FFFFFF;
|
||
right: 0;
|
||
bottom: 190rpx;
|
||
background: linear-gradient(to bottom right, #FE726B, #FE956B);
|
||
padding: 10rpx 10rpx 10rpx 20rpx;
|
||
border-top-left-radius: 50px;
|
||
border-bottom-left-radius: 50px;
|
||
box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
|
||
}
|
||
|
||
.cancel {
|
||
width: 100vw;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
background: #FFFFFF;
|
||
color: red;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.md-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 50rpx 0;
|
||
background-color: white;
|
||
}
|
||
|
||
.md-content-item {
|
||
margin: 0 70rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.md-content-item image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.md-content-item view {
|
||
margin-top: 15rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.sharebtn {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.cu-modal {
|
||
position: fixed;
|
||
bottom: 166rpx;
|
||
left: 0;
|
||
z-index: 999999;
|
||
}
|
||
|
||
.gj {
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #4B4B4B;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
color: #4B4B4B;
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
width: 642rpx;
|
||
max-height: 340rpx;
|
||
|
||
view {
|
||
margin: 24rpx;
|
||
width: 600rpx;
|
||
height: 56rpx;
|
||
background: #E8E8E8;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.red {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FF5F5F;
|
||
}
|
||
|
||
.lan {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #008CFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ ::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
width: 4px !important;
|
||
height: 1px !important;
|
||
overflow: auto !important;
|
||
background: #ccc !important;
|
||
-webkit-appearance: auto !important;
|
||
display: block;
|
||
}
|
||
|
||
/deep/ ::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px !important;
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
|
||
background: #7b7979 !important;
|
||
}
|
||
|
||
/deep/ ::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
|
||
// border-radius: 10px !important;
|
||
background: #FFFFFF !important;
|
||
}
|
||
|
||
.Poster {
|
||
position: relative;
|
||
top: 21rpx;
|
||
left: 30rpx;
|
||
width: 690rpx;
|
||
}
|
||
|
||
.posterClose {
|
||
position: absolute;
|
||
right: 8rpx;
|
||
top: 8rpx;
|
||
}
|
||
|
||
.pos {
|
||
position: relative;
|
||
}
|
||
|
||
.btnList {
|
||
width: 690rpx;
|
||
position: absolute;
|
||
bottom: 150rpx;
|
||
left: 30rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
span {
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 401rpx 401rpx 401rpx 401rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #008CFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.save {}
|
||
}
|
||
|
||
.no-scroll {
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
}
|
||
|
||
.no-border-button {
|
||
background-color: transparent;
|
||
/* 去掉背景色 */
|
||
border: none;
|
||
/* 去掉边框 */
|
||
padding: 0;
|
||
/* 去掉内边距 */
|
||
margin: 0;
|
||
/* 去掉外边距 */
|
||
display: inline-flex;
|
||
/* 使按钮内容居中 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
flex-flow: column;
|
||
height: 110rpx;
|
||
line-height: inherit;
|
||
|
||
span {
|
||
text-align: center;
|
||
width: 48rpx;
|
||
height: 34rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #777777;
|
||
}
|
||
}
|
||
.popupBox {
|
||
// height: 365rpx;
|
||
margin-top: 22rpx;
|
||
width: 750rpx;
|
||
|
||
.pop-header {
|
||
width: 93%;
|
||
padding-top: 32rpx;
|
||
padding-bottom: 17rpx;
|
||
|
||
border-bottom: 2rpx solid #D9D9D9;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #343434;
|
||
}
|
||
}
|
||
|
||
.popup {
|
||
display: flex;
|
||
align-items: self-start;
|
||
justify-content: center;
|
||
padding-top: 21rpx;
|
||
|
||
.popur-right {
|
||
align-items: self-start;
|
||
margin-left: 24rpx;
|
||
width: 418rpx;
|
||
|
||
.name {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #343434;
|
||
}
|
||
|
||
.address {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
margin: 16rpx 0 12rpx 0;
|
||
overflow: hidden;
|
||
/* 确保超出容器的文本被隐藏 */
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示被截断的文本 */
|
||
width: 100%;
|
||
}
|
||
|
||
.date {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.time {
|
||
margin: 24rpx 0;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.line-row {
|
||
width: 418rpx;
|
||
height: 1rpx;
|
||
background: #008CFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.price {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
margin-top: 23rpx;
|
||
align-self: flex-end;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 36rpx;
|
||
color: #FF2323;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.popup-footer {
|
||
margin-top: 42rpx;
|
||
span{
|
||
width: 642rpx;
|
||
height: 80rpx;
|
||
background: #008CFF;
|
||
border-radius: 401rpx 401rpx 401rpx 401rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
line-height: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
|
||
.line {
|
||
width: 642rpx;
|
||
height: 1rpx;
|
||
background: #D9D9D9;
|
||
box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.times {
|
||
width: 93%;
|
||
|
||
.selectTime {
|
||
width: 288rpx;
|
||
height: 50rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 1rpx solid #D9D9D9;
|
||
color: #4B4B4B;
|
||
font-family: 'PingFang SC', 'PingFang SC';
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
padding-left: 15rpx;
|
||
cursor: pointer;
|
||
margin: 24rpx 32rpx 0 0;
|
||
white-space: nowrap;
|
||
/* 防止文本换行 */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分显示省略号 */
|
||
overflow: hidden;
|
||
/* 隐藏超出部分 */
|
||
text-align: left;
|
||
/* 文字靠左对齐 */
|
||
line-height: 50rpx;
|
||
/* 垂直居中对齐 */
|
||
box-sizing: border-box;
|
||
/* 确保 padding 和 border 不影响宽度和高度 */
|
||
display: inline-block;
|
||
/* 确保容器内文字正确对齐 */
|
||
}
|
||
|
||
}
|
||
|
||
.selectTime.selected {
|
||
width: 288rpx;
|
||
height: 50rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
background: #008CFF;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
cursor: pointer;
|
||
margin: 24rpx 32rpx 0 0;
|
||
|
||
}
|
||
}
|
||
</style> |