You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

202 lines
4.9 KiB

<template>
<view class="index">
<view class="tabs-box acea-row row-around row-middle">
<view class="tab-item" :class="active == 0 ? 'tab-item-active' : ''" @click="tabClick(0)">已报名</view>
<view class="tab-item" :class="active == 1 ? 'tab-item-active' : ''" @click="tabClick(1)">已完成</view>
<view class="tab-item" :class="active == 2 ? 'tab-item-active' : ''" @click="tabClick(2)">可报名</view>
</view>
<view class="course-list-box" v-if="active == 0 || active == 1">
<view class="course-item acea-row row-between">
<view class="course-item-l">
<view class="course-info">
<view class="course-name line1">【一代天骄王者少年】禪易课程教学易课程教学</view>
<view class="info-box">
<view class="">时间:2021.5.25-5.28 8:30-18:30</view>
<view class="">地点:湖北 武汉</view>
<view class="">座位号:8排8号</view>
<view class="">酒店安排:江汉区江汉路22号武汉大酒店0801号房</view>
</view>
</view>
</view>
<view class="course-item-r acea-row ">
<view class="saoyisao"><image src="../../../static/saoyisao-icon.png"></image></view>
<text>去签到</text>
</view>
</view>
</view>
<view class="knowledge-list" v-else>
<view class="knowledge-item acea-row" v-for="item in courseList" @click="toDetail(item.id)">
<view class="img-box">
<image :src="item.imageArr[0]" mode=""></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">{{item.courseName}}</view>
<view class="time">{{utils.spl(item.courseStartTime)[0]}}~{{utils.spl(item.courseEndTime)[0]}}</view>
<view class="address">{{item.coursePlace}}</view>
<view class="type-box acea-row row-between row-middle">
<view class="price">¥{{item.courseCharge}}</view>
<view class="signin-btn red">去报名</view>
</view>
</view>
</view>
<view class="knowledge-item acea-row">
<view class="img-box">
<image src="../../static/img1.png" mode=""></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">《阴阳五行》一个人的阴阳五的阴阳五行…</view>
<view class="time">2021-5-31-6.3 8:30-18:30</view>
<view class="address">中国 武汉</view>
<view class="type-box acea-row row-between row-middle">
<view class="price">¥3000</view>
<view class="signin-btn red">去报名</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
active : 0
}
},
methods:{
tabClick(idx){
this.active = idx
}
}
}
</script>
<style lang="less" scoped>
.tabs-box{
width: 100%;
height:98rpx;
font-size: 32rpx;
color: #222;
background: #fff;
border-top: 1px solid #f2f2f2;
.tab-item{
height: 100%;
line-height: 98rpx;
}
.tab-item-active{
font-size: 40rpx;
font-size: 500;
border-bottom: 4rpx solid #EB5744;
}
}
.course-list-box{
width: 100%;
.course-item{
width: 100%;
background: #fff;
padding: 24rpx 0 26rpx 30rpx;
margin-top: 28rpx;
.course-item-l{
width: 526rpx;
.info-box{
font-size: 26rpx;
color: #666666;
view{
line-height: 34rpx;
}
}
.course-name{
color: #333;
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
margin-bottom: 22rpx;
}
}
.course-item-r{
width: 182rpx;
flex-direction: column;
justify-content: center;
align-items: center;
color: #EB5744;
border-left: 1px solid #d8d8d8;
image{
width: 50rpx;
height: 50rpx;
margin-bottom: 6rpx;
}
}
}
}
.knowledge-list {
width: 100%;
margin-top: 50rpx;
.knowledge-item {
background: #fff;
padding: 32rpx;
margin-top: 28rpx;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
}
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 28rpx;
color: #333;
font-size: 500;
line-height: 40rpx;
}
.time,.address{
color: #999;
font-size: 24rpx;
margin-top: 5rpx;
line-height: 34rpx;
}
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 28rpx;
.price{
font-size: 36rpx;
color: #EA533E;
font-weight: 600;
}
.signin-btn{
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
}
.red{
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
}
}
}
}
</style>