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