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.
96 lines
2.1 KiB
96 lines
2.1 KiB
3 years ago
|
<template>
|
||
|
|
<view class="study-list uni-padding-wrap uni-common-mt">
|
||
|
|
<scroll-view class="scroll-view_H" scroll-x="true">
|
||
|
|
<view class="study-item scroll-view-item_H" v-for="(item,index) in list" :key="index" @click="toStudyDetail(item.id)">
|
||
|
|
<view class="day-box acea-row row-middle">
|
||
|
|
<image src="../../../static/date-icon.png" v-if="index%2 == 0"></image>
|
||
|
|
<image src="../../../static/date-icon2.png" v-if="index%2 != 0"></image>
|
||
|
|
<text>{{item.clockTimes}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="study-content">
|
||
|
|
<view class="study-title line1">{{item.listName}}</view>
|
||
|
|
<view class="study-time acea-row-nowrap row-between-wrapper">
|
||
|
|
<view>{{item.listStartTime}}开始</view>
|
||
|
|
<view>{{item.enterNum}}人已参与</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default{
|
||
|
|
props:{
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
toStudyDetail(id){
|
||
|
|
this.$yrouter.push({
|
||
|
|
path: '/pages/study/detail',
|
||
|
|
query: {
|
||
|
|
id:id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.study-list{
|
||
|
|
width: 100%;
|
||
|
|
.scroll-view_H{
|
||
|
|
white-space: nowrap;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.study-item{
|
||
|
|
width: 334rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
display: inline-block;
|
||
|
|
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%);
|
||
|
|
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
.day-box{
|
||
|
|
color: #E73D21;
|
||
|
|
font-size: 48rpx;
|
||
|
|
line-height: 58rpx;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
image{
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.study-content{
|
||
|
|
width: calc(100% - 12rpx);
|
||
|
|
background: #fff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999;
|
||
|
|
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin: 2rpx auto;
|
||
|
|
padding:16rpx 10rpx 10rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.study-title{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #222222;
|
||
|
|
line-height: 40rpx;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.study-item:nth-child(2n){
|
||
|
|
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%);
|
||
|
|
.day-box{
|
||
|
|
color: #557AB3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|