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.
203 lines
4.9 KiB
203 lines
4.9 KiB
3 years ago
|
<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>
|