1227 lines
27 KiB
Vue
1227 lines
27 KiB
Vue
<template>
|
||
<view class="box flex justify-start flex-column align-items">
|
||
<view class="swiper">
|
||
<u-swiper :list="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.title}}</span>
|
||
<view class="flex w-100 align-items" style="margin-top:28rpx;justify-content: space-between;">
|
||
<span class="first-money" v-if="detail.feel == 0" style="font-size: 28rpx;">￥{{detail.price}}<span
|
||
class="wangqi">(往期课程)</span></span>
|
||
<span class="first-money" v-if="detail.feel == 1">免费<span class="wangqi">(往期课程)</span></span>
|
||
|
||
<view class="flex align-items justify-center"
|
||
style="width: 30%;justify-content: flex-end;margin-right: 24rpx;">
|
||
<!-- <span
|
||
class="first-mine">{{ Number(detail.sign_num + detail.virtual_num)}}/{{detail.limit_num}}</span> -->
|
||
<span
|
||
class="first-mine">{{detail.limit_num}}/{{detail.limit_num}}</span>
|
||
<span class="first-txt">名额</span>
|
||
<image src="../../static/center/minge.png" mode="" class="icon-size"></image>
|
||
</view>
|
||
</view>
|
||
<span class="line"></span>
|
||
<span class="first-image flex align-items"
|
||
@click.stop="toMap(detail.latitude,detail.longitude,detail.address_detail)">
|
||
<image src="../../static/center/address.png" mode="" class="icon-size"></image>
|
||
{{detail.address_detail}}
|
||
</span>
|
||
<span class="first-image flex align-items" @click.stop="callPhone(detail.user.mobile)"
|
||
v-if="detail.user.mobile">
|
||
<image src="../../static/tel.png" mode="" class="icon-size"></image>
|
||
<!-- <span>{{detail.user.realname || detail.user.nickname || '未知'}}/{{detail.user.mobile || '未知'}}</span> -->
|
||
<span>{{mobile}}</span>
|
||
</span>
|
||
<span class="first-image flex align-items" @click.stop="callPhone(detail.user.mobile)">
|
||
<span>联系客服</span>
|
||
</span>
|
||
<span class="line"></span>
|
||
<view class="flex flex-column gj">
|
||
<span class="title">
|
||
<span style="font-size: 32rpx;">
|
||
共计{{formattedTimeList.length}}节
|
||
</span>
|
||
<span style="margin-left: 12rpx;">
|
||
({{formattedTime.formattedTime}})
|
||
</span>
|
||
</span>
|
||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="flex flex-column align-items scroll">
|
||
<span v-for="(item,index) in formattedTimeList" :key="index"> {{ item.formattedTime }}</span>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- <span class="first-image flex align-items">
|
||
<image src="../../static/center/class.png" mode="" class="icon-size"></image>
|
||
<span>课时安排</span>
|
||
<image src="../../static/my/right.png" mode="" style="width: 24rpx;height: 24rpx;margin-left: 12rpx;"></image>
|
||
</span> -->
|
||
</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.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="six flex flex-column" style="justify-content: flex-start;background: white;">
|
||
<view class="six-header flex align-items space-between">
|
||
<image src="../../static/center/xuzhi.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
|
||
</view>
|
||
<view class="six-center flex first-txt flex-column">
|
||
<u-parse :content="detail.notice" :tagStyle="style"></u-parse>
|
||
<!-- <rich-text :nodes="detail.notice" style="width: 100%;" :tagStyle="style"></rich-text> -->
|
||
|
||
</view>
|
||
</view>
|
||
<view class="four flex justify-start align-items flex-column">
|
||
<view class="four-box flex justify-start align-items w-100" @click="toTeacher(detail.teacher.id)">
|
||
<view class="four-header flex align-items w-100" style="justify-content: space-between;">
|
||
<view class="flex align-items" style="justify-content: start; width: 70%;">
|
||
<image :src="detail.teacher.head_image" mode="" style="width: 100rpx; height: 125rpx;">
|
||
</image>
|
||
<span class="flex justify-center flex-column"
|
||
style="align-items: flex-start;margin-left: 18rpx;">
|
||
<span class="four-name">{{detail.teacher.name}}</span>
|
||
<span class="jigou">{{detail.shop.name}}</span>
|
||
<span class="flex align-items rate">
|
||
<u-rate :count="count" active-color="#FFBC2C" v-model="detail.teacher.teacher_star"
|
||
allowHalf="true" readonly></u-rate>
|
||
{{detail.teacher.teacher_star}}分
|
||
</span>
|
||
|
||
</span>
|
||
</view>
|
||
<view class="four-right flex flex-column align-items">
|
||
<image src="../../static/center/teacher.png" mode="" style="width: 168rpx; height: 48rpx;">
|
||
</image>
|
||
<span class="teacher-detail flex align-items">教师详情
|
||
<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;">
|
||
</image>
|
||
</span>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<span class="line" style="width: 93%;"></span>
|
||
<span class="tt-detail flex ">
|
||
<span>教师简介:</span>
|
||
<!-- <span v-html="detail.teacher.content"></span> -->
|
||
<u-parse :content="detail.teacher.content"></u-parse>
|
||
</span>
|
||
</view>
|
||
<!-- 机构 -->
|
||
<view class="five flex align-items">
|
||
<view class="five-box flex ">
|
||
<view class="five-left flex align-items" style="justify-content: space-around;"
|
||
@click="toMeDetail()">
|
||
<image :src="detail.shop.logo" mode="" style="width: 78rpx; height: 78rpx;">
|
||
</image>
|
||
<span class="flex flex-column justify-center"
|
||
style="align-items: left; margin-left: 24rpx;width: 550rpx;">
|
||
<span class="five-name">{{detail.shop.name}}</span>
|
||
<span class="five-address white-space">{{detail.shop.address_detail}}</span>
|
||
</span>
|
||
</view>
|
||
<!-- <span class="five-right flex align-items" @click="toMeDetail()">
|
||
更多课程
|
||
<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;"></image>
|
||
</span> -->
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="footer flex align-items" style="justify-content: space-between;">
|
||
<view class="footer-left">
|
||
<view @click="toIndex">
|
||
<image src="../../static/center/home.png" mode=""></image>
|
||
<span>首页</span>
|
||
</view>
|
||
<button open-type="share" class="no-border-button" plain="true">
|
||
<view class="">
|
||
<image src="../../static/center/share.png" mode=""></image>
|
||
<span>分享</span>
|
||
</view>
|
||
</button>
|
||
<view v-if="is_collect == 0" @click="Collect(1)">
|
||
<image src="../../static/center/Collect.png" mode=""></image>
|
||
<span>收藏</span>
|
||
</view>
|
||
<view v-if="is_collect != 0" @click="Collect(0)">
|
||
<image src="../../static/center/Collected.png" mode=""></image>
|
||
<span>已收藏</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import indexBackgroundImage from "@/static/center/firstBack.png"
|
||
import dayjs from 'dayjs';
|
||
export default {
|
||
|
||
computed: {
|
||
formattedTimeList() {
|
||
return this.timeList.map(item => {
|
||
const startTime = dayjs.unix(item.start_time).format('YYYY-MM-DD HH:mm:ss');
|
||
const endTime = dayjs.unix(item.end_time).format('HH:mm:ss');
|
||
return {
|
||
formattedTime: `${startTime}~${endTime}`
|
||
};
|
||
});
|
||
},
|
||
formattedTime() {
|
||
const startTime = dayjs.unix(this.detail.start_time).format('YYYY-MM-DD');
|
||
const endTime = dayjs.unix(this.detail.end_time).format('YYYY-MM-DD');
|
||
return {
|
||
formattedTime: `${startTime}~${endTime}`
|
||
};
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
style: {
|
||
// 字符串的形式
|
||
img: 'width: 100%',
|
||
},
|
||
show: false,
|
||
buyShow: false,
|
||
type: 0, // 0 支付 1 立即购买 2 预约 3确认时间
|
||
id: 1,
|
||
count: 5,
|
||
value: 5,
|
||
order_no: '',
|
||
PayPirce: 0,
|
||
notice: '',
|
||
detail: {},
|
||
people: {},
|
||
virtual_people: 0,
|
||
popupStyle: {
|
||
width: '100%',
|
||
// height: '564rpx',
|
||
margin: '0 auto', // 水平居中
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center'
|
||
},
|
||
timeList: [],
|
||
selectedTime: null,
|
||
// indexBackgroundImage: indexBackgroundImage,
|
||
is_collect: 0,
|
||
orderId: "",
|
||
classes_lib_spec_id: '',
|
||
order_no2: '',
|
||
mobile:'',
|
||
is_show_model: false //是否显示分享模态窗
|
||
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: this.detail.title,//分享的标题
|
||
imageUrl: this.detail.headimage,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
|
||
query: `id=${this.id}`
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id
|
||
this.getDetail()
|
||
this.getTime()
|
||
},
|
||
|
||
methods: {
|
||
// 时间转换函数
|
||
timeago(timestamp) {
|
||
const now = new Date().getTime(); // 当前时间（毫秒）
|
||
const diff = (now - timestamp * 1000) / 1000; // 时间差（秒）
|
||
|
||
if (diff < 60) {
|
||
return `${Math.floor(diff)}秒前`;
|
||
} else if (diff < 3600) {
|
||
return `${Math.floor(diff / 60)}分钟前`;
|
||
} else if (diff < 86400) {
|
||
return `${Math.floor(diff / 3600)}小时前`;
|
||
} else if (diff < 2592000) { // 30天
|
||
return `${Math.floor(diff / 86400)}天前`;
|
||
} else {
|
||
return `${Math.floor(diff / 2592000)}个月前`;
|
||
}
|
||
},
|
||
|
||
sharePoster() {
|
||
//获取带参数二维码并传递
|
||
this.is_show_model = false
|
||
this.$refs.poster.showCanvas()
|
||
},
|
||
|
||
// 获取课时规格
|
||
getTime() {
|
||
uni.$u.http.get('/api/school/classes/spec', {
|
||
params: {
|
||
id: this.id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
|
||
this.timeList = res.data.spec;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
uni.showToast({
|
||
title: '请求失败，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
// 获取详情
|
||
getDetail() {
|
||
uni.$u.http.get('/api/school/classes/detail', {
|
||
params: {
|
||
id: this.id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.detail = res.data.detail
|
||
this.notice = res.data.detail.notice.replace(/<[^>]*>/g, '')
|
||
this.virtual_people = res.data.detail.views
|
||
if (res.data.detail.is_collect != 0) {
|
||
this.is_collect = 1
|
||
} else {
|
||
this.is_collect = 0
|
||
}
|
||
if (this.detail.user.realname) {
|
||
this.detail.user.realname = this.detail.user.realname.slice(0, 1) + 'XX';
|
||
}
|
||
this.mobile = this.detail.user.mobile.slice(0, 3) + 'XXXX' + this.detail.user
|
||
.mobile.slice(7);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
}).catch(error => {});
|
||
},
|
||
// 教师详情
|
||
toTeacher(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/center/teacherDetail?id=${id}`
|
||
})
|
||
},
|
||
// 导航
|
||
toMap(latitude, longitude, name) {
|
||
uni.openLocation({
|
||
latitude: parseFloat(latitude),
|
||
longitude: parseFloat(longitude),
|
||
name: name,
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
// 机构详情
|
||
toMeDetail() {
|
||
const jigouId = this.detail.shop.id
|
||
uni.navigateTo({
|
||
url: "/pages/center/MechanismDetail?id=" + jigouId
|
||
})
|
||
},
|
||
|
||
// 返回首页
|
||
toIndex() {
|
||
uni.switchTab({
|
||
url: "/pages/index/index"
|
||
})
|
||
},
|
||
// 收藏和取消
|
||
Collect(number) {
|
||
uni.$u.http.post('/api/school/classes/collect', {
|
||
id: this.id,
|
||
is_collect: number
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.is_collect = number
|
||
if (number == 0) {
|
||
uni.showToast({
|
||
title: '取消收藏',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '收藏成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// _this.$api.toast(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
|
||
});
|
||
},
|
||
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;
|
||
}
|
||
|
||
.white-space {
|
||
overflow: hidden;
|
||
/* 确保超出容器的文本被隐藏 */
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示被截断的文本 */
|
||
width: 100%;
|
||
}
|
||
|
||
.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: 90%;
|
||
background: #FFFFFF;
|
||
padding-left: 24rpx;
|
||
margin-top: 24rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.first-name {
|
||
width: 100%;
|
||
height: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 38rpx;
|
||
color: #343434;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.first-money {
|
||
height: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 36rpx;
|
||
color: #FF2323;
|
||
margin-bottom: 19rpx;
|
||
}
|
||
|
||
.first-mine {
|
||
height: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
|
||
}
|
||
|
||
.first-txt {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
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: 24rpx;
|
||
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 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.four {
|
||
margin-top: 42rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
width: 93%;
|
||
// height: 338rpx;
|
||
|
||
.four-box {
|
||
.four-header {
|
||
padding: 32rpx 34rpx 15rpx 24rpx;
|
||
|
||
.four-name {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 36rpx;
|
||
color: #4974FF;
|
||
}
|
||
|
||
.jigou {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 24rpx;
|
||
color: #008CFF;
|
||
line-height: 26rpx;
|
||
margin: 8rpx 0 12rpx 0;
|
||
}
|
||
|
||
.rate {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #FFBC2C;
|
||
line-height: 26rpx;
|
||
}
|
||
|
||
.teacher-detail {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #008CFF;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.four-right {
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
height: 115rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.tt-detail {
|
||
width: 93%;
|
||
padding: 0rpx 24rpx 18rpx 24rpx;
|
||
justify-content: flex-start;
|
||
align-items: left;
|
||
flex-flow: column;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
|
||
span {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 4;
|
||
font-size: 32rpx;
|
||
/* 设置行数 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 1.5em;
|
||
/* 根据需要调整行高 */
|
||
max-height: 6em;
|
||
/* 行高 * 行数 */
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.five {
|
||
width: 93%;
|
||
height: 126rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.five-box {
|
||
padding: 24rpx;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.five-left {
|
||
.five-name {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #4974FF;
|
||
}
|
||
|
||
.five-address {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
}
|
||
|
||
.five-right {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
width: 21%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.six {
|
||
margin-bottom: 106rpx;
|
||
width: 100%;
|
||
background: linear-gradient(to bottom, #F1F2F8 0%, #FFFFFF 20%, #FFFFFF 80%, #FFFFFF 100%);
|
||
align-items: center;
|
||
|
||
|
||
.six-header {
|
||
width: 93%;
|
||
padding-top: 64rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #008CFF;
|
||
// background: linear-gradient(to bottom, #F1F2F8 0%, #ffffff 24%, #FFFFFF 100%);
|
||
}
|
||
|
||
.six-box {
|
||
width: 93%;
|
||
margin: 12rpx 0 0 24rpx;
|
||
}
|
||
|
||
.six-center {
|
||
width: 670rpx;
|
||
margin-top: 41rpx;
|
||
|
||
|
||
.s-header {
|
||
padding: 24rpx;
|
||
width: 642rpx;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
|
||
.s-footer {
|
||
padding: 24rpx;
|
||
width: 642rpx;
|
||
|
||
span {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
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;
|
||
/* 定位在左边 */
|
||
|
||
.footer-left {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 60rpx;
|
||
display: flex;
|
||
|
||
view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-flow: column;
|
||
// margin-right: 42rpx;
|
||
width: 100rpx;
|
||
|
||
span {
|
||
text-align: center;
|
||
width: 100rpx;
|
||
height: 34rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #777777;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.footer-right {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.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: 24rpx;
|
||
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: 24rpx;
|
||
color: #7A7A7A;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.time {
|
||
margin: 12rpx 0 73rpx 0;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
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: 24rpx;
|
||
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;
|
||
}
|
||
|
||
|
||
.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: 24rpx;
|
||
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: 24rpx;
|
||
color: #FFFFFF;
|
||
cursor: pointer;
|
||
margin: 24rpx 32rpx 0 0;
|
||
|
||
}
|
||
}
|
||
|
||
.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: 24rpx;
|
||
color: #4B4B4B;
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
width: 642rpx;
|
||
max-height: 340rpx;
|
||
|
||
span {
|
||
margin: 24rpx;
|
||
width: 600rpx;
|
||
height: 56rpx;
|
||
background: #E8E8E8;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
}
|
||
}
|
||
|
||
/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;
|
||
}
|
||
|
||
.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: 24rpx;
|
||
color: #777777;
|
||
}
|
||
}
|
||
|
||
/deep/ ._root {
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.wangqi {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 24rpx;
|
||
color: #343434;
|
||
margin-left: 12rpx;
|
||
}
|
||
</style> |