1092 lines
26 KiB
Vue
1092 lines
26 KiB
Vue
<template>
|
|
<view class="recharge flex align-items justify-start flex-column"
|
|
:style="{ backgroundImage: `url(${backgroundImage})`,zIndex:'-1', backgroundPosition: 'top', backgroundRepeat: 'no-repeat', backgroundSize: '100%' }">
|
|
<view class="group flex align-items" @click.stop="toGroup(topImg.url)" v-if = show
|
|
:style="{ backgroundImage:`url(${groupImage})`, backgroundPosition: 'top', marginTop: capsuleHeight(), backgroundRepeat: 'no-repeat', backgroundSize: '90%' }">
|
|
<view class="g-left flex flex-column">
|
|
<span style="margin: 0 0 8rpx 0;">一键进群</span>
|
|
<span style="font-size: 28rpx;font-weight: 400;">及时接收课程信息</span>
|
|
</view>
|
|
<view class="g-center flex justify-center align-items">
|
|
进入群聊
|
|
</view>
|
|
<view class="g-right flex align-items justify-center" @click.stop="show = false">
|
|
<u-icon name="close" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="box":style="{ marginTop: show ? '34rpx' : capsuleHeight() }">
|
|
<view class="swiper-box">
|
|
<MySwiper :list="swiperList"></MySwiper>
|
|
</view>
|
|
<view class="flex align-items space-between" style="margin-top: 42rpx;">
|
|
<view class="f-left flex align-items " @click="toAbout()" style="background: #B0FE91;">
|
|
<view class="flex flex-column justify-center">
|
|
<span
|
|
style="font-weight: bold;font-size: 36rpx;line-height: 42rpx;height: 54rpx;width: 144rpx;">关于夜校</span>
|
|
<span>您找到宝藏啦~</span>
|
|
</view>
|
|
<image src="/static/index/f-left.png" mode=""
|
|
style="width: 84rpx;height: 84rpx;margin-left: 24rpx;"></image>
|
|
</view>
|
|
<view class="f-left flex align-items" @click="toApply()" style="background: #BEF6FF;">
|
|
<view class="flex flex-column justify-center">
|
|
<span
|
|
style="font-weight: bold;font-size: 36rpx;line-height: 42rpx;height: 54rpx;width: 144rpx;">申请入驻</span>
|
|
<span>期待您的加入</span>
|
|
</view>
|
|
<image src="/static/index/f-right.png" mode=""
|
|
style="width: 84rpx;height: 84rpx;margin-left: 24rpx;"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 热门课程 -->
|
|
<view class="hot flex flex-column">
|
|
<view class="hot-top flex align-items space-between">
|
|
<view class="left flex align-items">
|
|
<span>热门课程</span>
|
|
</view>
|
|
<view class="flex align-items" @click="toCenter()">
|
|
<span class="more flex align-items justify-center">查看更多</span>
|
|
<u-icon name="arrow-right" size="12"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="content flex align-items flex-column">
|
|
<view class="flex align-items flex-column w-100 bbb" v-for="(item,index) in hotList" :key="index"
|
|
@click="detail(item.id)">
|
|
<view class="top flex align-items" style="justify-content: space-around;margin-top: 24rpx;">
|
|
<view class="left">
|
|
<image :src="item.headimage" mode=""
|
|
style="width: 240rpx; height: 196rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;">
|
|
</image>
|
|
</view>
|
|
<view class="right flex flex-column " style="align-items: self-start;">
|
|
<span class="title white-space">{{item.title}}</span>
|
|
<view class=" row flex flex align-items">
|
|
<span
|
|
class="remen flex justify-center align-items">{{item.classes_type_name}}</span>
|
|
<span
|
|
style="background: #FFF1ED;color: #FF4810;margin-left:8rpx; max-width: 170rpx;"
|
|
class="remen flex justify-center align-items">
|
|
<span class="white-space">{{item.shop.name}}</span>
|
|
</span>
|
|
</view>
|
|
<view class="flex flex-column pos">
|
|
<view class=" time flex align-items white-space">
|
|
<image src="../../static/index/clock.png" mode=""
|
|
style="width: 24rpx;height: 24rpx;"></image>
|
|
<span class="white-space" style="margin-left: 8rpx;">{{item.start_time_text}}
|
|
</span>
|
|
</view>
|
|
<view class="address flex align-items white-space">
|
|
<image src="../../static/index/address.png" mode=""
|
|
style="width: 24rpx;height: 24rpx;"></image>
|
|
<span class="white-space"
|
|
style="margin-left: 8rpx; width: 220rpx;">{{item.address_detail}}</span>
|
|
</view>
|
|
<span class=" ab flex align-items" v-if="item.feel == 0" style="">
|
|
<span class="m">￥</span>
|
|
<span class="money">{{item.price}}</span>
|
|
</span>
|
|
<span class="ab no flex align-items" v-if="item.feel == 1">公益</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<span style="width: 626rpx;height: 2rpx;background: #EEEEEE;margin: 32rpx 0 0 0;"></span>
|
|
<view class="bottom flex align-items">
|
|
<view class="flex align-items">
|
|
<span class="flex align-items" style="width: 200rpx;">
|
|
<u-avatar-group :urls="item.unpaid_user_data"
|
|
:extraValue="item.unpaid_user_data.length - 5" keyName="head_image" size="24"
|
|
gap="0.4"></u-avatar-group>
|
|
</span>
|
|
<view class="number flex align-items">
|
|
{{'已报名: ' + Number(item.sign_num + item.virtual_num)}}/{{item.limit_num}}
|
|
</view>
|
|
</view>
|
|
<span class="part flex justify-center align-items">
|
|
报名参加
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="jianbian flex flex-column align-items">
|
|
<!-- 名师 -->
|
|
<view class="teacher flex flex-column">
|
|
<view class="teacher-top">
|
|
<view class="left flex align-items">
|
|
<span>名师展示</span>
|
|
</view>
|
|
</view>
|
|
<view class="teaBox flex align-items" style="overflow-y: hidden;">
|
|
<view class="tea flex align-items" style="align-items: self-start;"
|
|
v-for="(item,index) in teacherList" :key="index" @click="toTeacher(item.id)">
|
|
<view class="teaDetail flex align-items flex-column">
|
|
<view class="tea-top flex align-items">
|
|
<image :src="item.head_image" mode=""
|
|
style="width: 112rpx;height: 112rpx;border-radius: 100%;"></image>
|
|
<view class="tea-right flex flex-column ">
|
|
<span class="name">{{item.name}}</span>
|
|
<span class="mechanism">{{item.shop.name}}</span>
|
|
</view>
|
|
</view>
|
|
<view class="detail" style="overflow: auto;padding: 20rpx 0rpx 0rpx 20rpx;">
|
|
<u-parse :content="item.expert_content" :tagStyle="style" style="font-size: 12px;line-height: 40rpx;"></u-parse>
|
|
<!-- <view class="" style="margin-top: 40rpx;">
|
|
<image src="/static/index/polygon.png" mode="" style="width: 20rpx;height: 16rpx;">
|
|
</image>
|
|
<span>本科学习数字媒体艺术专业</span>
|
|
</view>
|
|
<view class="white-space" style="margin-top: 12rpx; margin-bottom: 12rpx;">
|
|
<image src="/static/index/polygon.png" mode="" style="width: 20rpx;height: 16rpx;">
|
|
</image>
|
|
<span>带领学生参加全国中职技能大赛获得市级视频剪带领学生参加全国中职技能大赛获得市级视频剪...</span>
|
|
</view>
|
|
<view class="" style="margin-bottom: 40rpx;">
|
|
<image src="/static/index/polygon.png" mode="" style="width: 20rpx;height: 16rpx;">
|
|
</image>
|
|
<span>参与省级教师培训活动并获得考核培训证书</span>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 往期课程 -->
|
|
<view class="wangqi flex flex-column">
|
|
<view class="wq-top flex align-items space-between">
|
|
<view class="left flex align-items">
|
|
<span>往期课程</span>
|
|
</view>
|
|
<view class="flex align-items" @click="toWq()">
|
|
<span class="more flex align-items justify-center">查看更多</span>
|
|
<u-icon name="arrow-right" size="12"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="wqBox">
|
|
<view class="con-center flex" v-for="(item,index) in wqList.data" :key="index" @click="Wqdetail(item.id)">
|
|
<span class="mask">
|
|
<image :src="item.headimage" mode=""
|
|
style="width: 240rpx; height: 196rpx;border-radius: 16rpx;"></image>
|
|
</span>
|
|
<view class="wq-right flex flex-column">
|
|
<span class="white-space title">{{item.title}}</span>
|
|
<view class="hot flex align-items">
|
|
<image src="/static/index/fire.png" mode="" style="width: 22rpx; height: 24rpx;">
|
|
</image>
|
|
<span>{{'已报名 ' + item.limit_num + '/' + item.limit_num}}</span>
|
|
</view>
|
|
<view class="length flex align-items">
|
|
<image src="/static/index/report.png" mode="" style="width: 24rpx; height: 24rpx;">
|
|
</image>
|
|
<span>共计{{item.spec_number}}节课程</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tab-bar :tabBarShow="0"></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MySwiper from '@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue'
|
|
export default {
|
|
components: {
|
|
MySwiper
|
|
},
|
|
data() {
|
|
return {
|
|
topImg: {},
|
|
swiperList: [],
|
|
teacherList: [],
|
|
wqList: [],
|
|
hotList: [],
|
|
unread_number: '',
|
|
count: 5,
|
|
current: 0,
|
|
autoplay: true,
|
|
scrollTop: 0,
|
|
dotsShow: true,
|
|
videoList: [],
|
|
currentItemType: '',
|
|
videoAutoplay: false,
|
|
show:true,
|
|
backgroundImage: 'https://testy.hschool.com.cn/uploads/20250219/4554df3bea7bd9cdbd75462ceedb8ea7.png',
|
|
groupImage: 'https://testy.hschool.com.cn/uploads/20250219/5b09b1878ab6d7774540f0d1a8c6675a.png'
|
|
};
|
|
},
|
|
onLoad() {
|
|
uni.hideTabBar()
|
|
},
|
|
mounted() {
|
|
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
|
|
},
|
|
onShow() {
|
|
this.getinit()
|
|
this.getHotList()
|
|
this.getTeacherList()
|
|
this.getWqList()
|
|
},
|
|
beforeDestroy() {
|
|
this.autoplay = false
|
|
|
|
},
|
|
methods: {
|
|
// 获取胶囊高度
|
|
capsuleHeight() {
|
|
if (uni?.getMenuButtonBoundingClientRect()) {
|
|
return `${uni.getMenuButtonBoundingClientRect().height* 2 + uni.getMenuButtonBoundingClientRect().top * 2 + 26}rpx`;
|
|
} else {
|
|
return `180rpx`;
|
|
}
|
|
},
|
|
click(e) {
|
|
// console.log(e, 'e')
|
|
// const currentIndex = e || 0;
|
|
// // 获取当前轮播图的路径
|
|
// const path = this.swiperList[currentIndex].url;
|
|
// // 进行页面跳转
|
|
// if (this.swiperList[currentIndex].showtype == 'video') {
|
|
// console.log('Clicked video:', this.swiperList[currentIndex].image);
|
|
// } else {
|
|
// uni.navigateTo({
|
|
// url: path
|
|
// });
|
|
// }
|
|
uni.navigateTo({
|
|
url: e
|
|
});
|
|
},
|
|
|
|
handleChange(e) {
|
|
const currentIndex = e.detail.current;
|
|
const currentItem = [...this.swiperList, ...this.videoList][currentIndex];
|
|
this.currentItemType = currentItem.showtype;
|
|
|
|
if (this.currentItemType === 'video') {
|
|
// 暂停所有视频
|
|
this.videoList.forEach((videoItem, index) => {
|
|
if (index !== currentIndex) {
|
|
const videoContext = uni.createVideoContext(`myVideo${index}`);
|
|
videoContext.pause();
|
|
}
|
|
});
|
|
|
|
// 播放当前视频
|
|
this.videoAutoplay = true;
|
|
this.autoplay = false;
|
|
this.dotsShow = false;
|
|
const currentVideoContext = uni.createVideoContext(`myVideo${currentIndex}`);
|
|
currentVideoContext.play();
|
|
} else {
|
|
// 暂停所有视频
|
|
this.videoList.forEach((videoItem, index) => {
|
|
const videoContext = uni.createVideoContext(`myVideo${index}`);
|
|
videoContext.pause();
|
|
});
|
|
|
|
this.videoAutoplay = false;
|
|
this.autoplay = true;
|
|
this.dotsShow = true;
|
|
}
|
|
},
|
|
// 获取首页信息C
|
|
getinit() {
|
|
uni.$u.http.get('/api/index/init', {}).then(res => {
|
|
if (res.code == 1) {
|
|
this.topImg = res.data.home_data.top_image
|
|
this.swiperList = res.data.home_data.top_images.list
|
|
// this.swiperList = res.data.home_data.top_images.list.filter(item => item.showtype ===
|
|
// 'image');
|
|
// this.videoList = res.data.home_data.top_images.list.filter(item => item.showtype ===
|
|
// 'video');
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
// 入驻
|
|
toApply() {
|
|
const token = uni.getStorageSync('token')
|
|
if (token) {
|
|
uni.navigateTo({
|
|
url: "/pages/index/Apply"
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '请登录',
|
|
icon: 'none',
|
|
duration: 2000,
|
|
complete: function() {
|
|
setTimeout(function() {
|
|
uni.switchTab({
|
|
url: '/pages/my/index',
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
// 关于我们
|
|
toAbout() {
|
|
uni.navigateTo({
|
|
url: "/packageA/index/About"
|
|
})
|
|
},
|
|
// 一键进群
|
|
toGroup(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
toCenter() {
|
|
uni.reLaunch({
|
|
url: "/pages/center/index"
|
|
})
|
|
},
|
|
toWq() {
|
|
uni.navigateTo({
|
|
url: "/pages/index/previousList"
|
|
})
|
|
},
|
|
// 获取往期课程
|
|
getWqList() {
|
|
uni.$u.http.get('/api/school/classes/classes_list', {
|
|
params: {
|
|
page: 1,
|
|
limit: 6,
|
|
order: 'normal',
|
|
is_expire: 1
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.wqList = res.data.list
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
// 获取名师
|
|
getTeacherList() {
|
|
uni.$u.http.get('/api/school/teacher/teacher_list', {
|
|
params: {
|
|
page: 1,
|
|
limit: 10,
|
|
recommend: 1
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.teacherList = res.data.list
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
// 教师详情
|
|
toTeacher(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/center/teacherDetail?id=${id}`
|
|
})
|
|
},
|
|
// 获取报名详情
|
|
getPeople(id) {
|
|
return uni.$u.http.get('/api/school/classes/people', {
|
|
params: {
|
|
id: id,
|
|
have_real: 1
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
return res.data.unpaid_user_data;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
throw new Error(res.msg); // 抛出错误以便 catch 捕获
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
throw error; // 抛出错误以便 catch 捕获
|
|
});
|
|
},
|
|
|
|
// 获取热门课程
|
|
getHotList() {
|
|
uni.$u.http.get('/api/school/classes/classes_list', {
|
|
params: {
|
|
page: 1,
|
|
limit: 6,
|
|
order: 'hot',
|
|
has_shop: 1,
|
|
is_expire: 2
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
const list = res.data.list.data || [];
|
|
const promises = list.map(item => {
|
|
return this.getPeople(item.id).then(peopleData => {
|
|
item.unpaid_user_data = peopleData;
|
|
}).catch(error => {
|
|
console.error(`Failed to get people data for id ${item.id}:`,
|
|
error);
|
|
});
|
|
});
|
|
|
|
// 等待所有异步操作完成
|
|
Promise.all(promises).then(() => {
|
|
this.hotList = list;
|
|
}).catch(error => {
|
|
console.error('Error in fetching people data:', error);
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
// 跳转详情
|
|
detail(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/center/detail?id=" + id
|
|
})
|
|
},
|
|
// 跳转往期详情
|
|
Wqdetail(id) {
|
|
uni.navigateTo({
|
|
url: "/packageA/index/previousDetail?id=" + id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.align-items {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-content: start;
|
|
}
|
|
|
|
.mar-top-30 {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.recharge {
|
|
width: 750rpx;
|
|
background-color: #F2F2F2;
|
|
|
|
.group {
|
|
width: 100%;
|
|
height: 152rpx;
|
|
position: relative;
|
|
|
|
.g-left {
|
|
margin-left: 176rpx;
|
|
|
|
span {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-size: 36rpx;
|
|
color: #242623;
|
|
}
|
|
}
|
|
|
|
.g-center {
|
|
width: 176rpx;
|
|
height: 64rpx;
|
|
margin-left: 56rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
|
|
.g-right {
|
|
position: absolute;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
top: 0;
|
|
right: 50rpx;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
width: 690rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.hot {
|
|
margin-top: 66rpx;
|
|
|
|
.hot-top {
|
|
|
|
// padding-bottom: 12rpx;
|
|
// border-bottom: 2rpx solid red;
|
|
.left {
|
|
background-image: url("/static/footer.png");
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
|
|
span {
|
|
width: 160rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #222222;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.more {
|
|
width: 104rpx;
|
|
height: 40rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.content {
|
|
// height: 462rpx;
|
|
// overflow-x: auto;
|
|
/* 允许横向滚动 */
|
|
// white-space: nowrap;
|
|
|
|
|
|
width: 690rpx;
|
|
|
|
.bbb {
|
|
background: #FFFFFF;
|
|
margin-top: 24rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.right {
|
|
margin-left: 24rpx;
|
|
width: 338rpx;
|
|
|
|
.title {
|
|
width: 338rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 34rpx;
|
|
color: #343434;
|
|
}
|
|
|
|
.row {
|
|
margin: 10rpx 0 26rpx 0;
|
|
|
|
.remen {
|
|
// width: 136rpx;
|
|
height: 40rpx;
|
|
background: #EBFAF5;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #14BC84;
|
|
line-height: 28rpx;
|
|
padding: 2rpx 8rpx;
|
|
}
|
|
|
|
.line-colum {
|
|
width: 1rpx;
|
|
height: 32rpx;
|
|
background: #7A7A7A;
|
|
margin: 0 13rpx;
|
|
}
|
|
|
|
.name {
|
|
width: 110rpx;
|
|
height: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
|
|
.line-row {
|
|
width: 338rpx;
|
|
height: 1rpx;
|
|
background: #E4E4E4;
|
|
}
|
|
|
|
.jigou {
|
|
width: 312rpx;
|
|
// height: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #7A7A7A;
|
|
margin: 4rpx 0 14rpx 0;
|
|
}
|
|
|
|
.time {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #A4A4A4;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.address {
|
|
|
|
width: 350rpx;
|
|
height: 40rpx;
|
|
margin-top: 8rpx;
|
|
|
|
span {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #A4A4A4;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
margin: 32rpx 0 32rpx 0;
|
|
width: 626rpx;
|
|
|
|
.number {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
line-height: 30rpx;
|
|
width: 242rpx;
|
|
margin-left: 42rpx;
|
|
}
|
|
|
|
.text {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 26rpx;
|
|
color: #7A7A7A;
|
|
}
|
|
|
|
.money {
|
|
width: 150rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 36rpx;
|
|
color: #FF2323;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.ovr {
|
|
width: 312rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin-top: 18rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
}
|
|
|
|
.content-footer {
|
|
width: 690rpx;
|
|
justify-content: space-between;
|
|
margin-top: 42rpx;
|
|
|
|
.line-left,
|
|
.line-right {
|
|
width: 221rpx;
|
|
height: 1rpx;
|
|
background: #7A7A7A;
|
|
}
|
|
|
|
.line-text {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 800;
|
|
font-size: 32rpx;
|
|
color: #FF4023;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.con-center {
|
|
width: 690rpx;
|
|
height: 260rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.mask {
|
|
margin: 32rpx;
|
|
}
|
|
|
|
.wq-right {
|
|
margin-top: 32rpx;
|
|
.title {
|
|
width: 354rpx;
|
|
height: 54rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.hot {
|
|
width: 230rpx;
|
|
height: 48rpx;
|
|
background: #FFF1ED;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
margin-top: 8rpx;
|
|
image{
|
|
margin: 0 8rpx 0 16rpx;
|
|
}
|
|
|
|
span {
|
|
min-width: 155rpx;
|
|
height: 36rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF4810;
|
|
}
|
|
}
|
|
|
|
.length {
|
|
width: 354rpx;
|
|
height: 40rpx;
|
|
margin-top: 24rpx;
|
|
image{
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
span {
|
|
width: 318rpx;
|
|
height: 40rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #A4A4A4;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.white-space {
|
|
overflow: hidden;
|
|
/* 确保超出容器的文本被隐藏 */
|
|
white-space: nowrap;
|
|
/* 确保文本在一行内显示 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号表示被截断的文本 */
|
|
width: 100%;
|
|
}
|
|
|
|
.teacher {
|
|
width: 690rpx;
|
|
margin-top: 64rpx;
|
|
|
|
.teacher-top {
|
|
.left {
|
|
background-image: url("/static/footer.png");
|
|
background-repeat: no-repeat;
|
|
background-position: left bottom;
|
|
|
|
span {
|
|
width: 160rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #222222;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.teaBox {
|
|
margin-top: 24rpx;
|
|
// height: 462rpx;
|
|
// overflow-x: auto;
|
|
// /* 允许横向滚动 */
|
|
// white-space: inherit;
|
|
}
|
|
|
|
.tea {
|
|
width: 640rpx;
|
|
height: 396rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin-right: 24rpx;
|
|
|
|
.teaDetail {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// padding: 32rpx 24rpx;
|
|
.tea-top {
|
|
image {
|
|
margin: 32rpx;
|
|
}
|
|
}
|
|
|
|
.tea-right {
|
|
|
|
.name {
|
|
width: 432rpx;
|
|
height: 60rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #000000;
|
|
line-height: 47rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mechanism {
|
|
width: 432rpx;
|
|
height: 42rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
line-height: 33rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("/static/index/mask.png") no-repeat left bottom, rgba(190, 238, 3, 0.14);
|
|
|
|
view {
|
|
height: 36rpx;
|
|
width: 608rpx;
|
|
margin-left: 32rpx;
|
|
|
|
span {
|
|
width: 548rpx;
|
|
height: 36rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #222222;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.wqBox {
|
|
margin-bottom: 30rpx
|
|
}
|
|
|
|
.wangqi {
|
|
margin-top: 66rpx;
|
|
width: 690rpx;
|
|
|
|
.wq-top {
|
|
.left {
|
|
background-image: url("/static/footer.png");
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
|
|
span {
|
|
width: 160rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #222222;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.more {
|
|
width: 104rpx;
|
|
height: 40rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
line-height: 30rpx;
|
|
text-align: right;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
.jianbian {
|
|
width: 750rpx;
|
|
// background: linear-gradient(180deg, #F1F2F8 0%, #FFFFFF 100%);
|
|
margin-bottom: 200rpx;
|
|
}
|
|
|
|
.f-left {
|
|
width: 330rpx;
|
|
height: 176rpx;
|
|
border-radius: 16rpx;
|
|
|
|
view {
|
|
margin-left: 32rpx;
|
|
|
|
span {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #242623;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pos {
|
|
position: relative;
|
|
|
|
.ab {
|
|
position: absolute;
|
|
right: 0%;
|
|
bottom: 0%;
|
|
}
|
|
|
|
.m {
|
|
width: 28rpx;
|
|
height: 42rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #FF4810;
|
|
}
|
|
.money {
|
|
width: 68rpx;
|
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #FF4810;
|
|
}
|
|
.no {
|
|
width: 64rpx;
|
|
height: 48rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FF4810;
|
|
line-height: 38rpx;
|
|
}
|
|
}
|
|
.part {
|
|
width: 176rpx;
|
|
height: 64rpx;
|
|
background: #BEEE03;
|
|
border-radius: 200rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
line-height: 33rpx;
|
|
}
|
|
.swiper-box {
|
|
height: 296rpx;
|
|
}
|
|
</style> |