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.
 
 
 
 

95 lines
2.1 KiB

<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>