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.
133 lines
2.6 KiB
133 lines
2.6 KiB
<template> |
|
<view class="activate-list-box"> |
|
<view class="activate-list"> |
|
<view class="activate-item" |
|
v-for="(item,index) in list" :key="index" |
|
@click="itemClick(item)" |
|
> |
|
<image :src="item.images"></image> |
|
<view class="title line2">{{item.name}}</view> |
|
<view class="desc" v-if="showDesc"> |
|
自1992年创立的莫斯科国际平面设计大赛双年展至今已进入18届 |
|
</view> |
|
<view class="btn-box acea-row row-between-wrapper" v-if="showAuth"> |
|
<view class="auth">{{item.cateName}}</view> |
|
<view class="btn">即刻报名</view> |
|
</view> |
|
<view class="match-bottom acea-row row-between-wrapper" v-if="!showAuth"> |
|
<view class="mb-left acea-row"> |
|
<view class="acea-row row-middle"> |
|
<text>300</text> |
|
<image src="../../../static/images/eye.png"></image> |
|
</view> |
|
<view class="time">2023-02-23 </view> |
|
</view> |
|
<view class="btn-box"> |
|
<view class="btn" v-if="index%2 == 0">进行中</view> |
|
<view class="btn btn-disabled" v-if="index%2 !== 0">已结束</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default{ |
|
props: { |
|
list: { |
|
type: Array, |
|
default: ()=> [] |
|
}, |
|
showDesc: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
showAuth: { |
|
type: Boolean, |
|
default: true |
|
} |
|
}, |
|
data(){ |
|
return { |
|
|
|
} |
|
}, |
|
methods: { |
|
itemClick(item){ |
|
this.$yrouter.push({ |
|
path: '/pages/home/activityDetail/index', |
|
query: { |
|
id: item.id |
|
} |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.activate-list-box{ |
|
width: 100%; |
|
.activate-list{ |
|
width: 100%; |
|
.activate-item{ |
|
width: 100%; |
|
padding: 30rpx 40rpx; |
|
background: #fff; |
|
border-bottom: 26rpx solid #F7F7F7; |
|
image{ |
|
width: 100%; |
|
height: 480rpx; |
|
} |
|
.title{ |
|
width: 100%; |
|
font-size: 44rpx; |
|
color: #212121; |
|
font-weight: 500; |
|
margin: 30rpx 0 10rpx; |
|
} |
|
.desc{ |
|
font-size: 32rpx; |
|
color: #9F9F9F; |
|
margin-bottom: 10rpx; |
|
} |
|
.btn-box{ |
|
.auth{ |
|
color: #9F9F9F; |
|
font-size: 32rpx; |
|
} |
|
.btn{ |
|
width: 214rpx; |
|
height: 54rpx; |
|
border: 2rpx solid #000000; |
|
border-radius: 25px; |
|
text-align: center; |
|
line-height: 54rpx; |
|
font-size: 24rpx; |
|
color: #000; |
|
} |
|
.btn-disabled{ |
|
background: #7E7E7E; |
|
color: #fff; |
|
border-color: #7E7E7E; |
|
} |
|
} |
|
.match-bottom{ |
|
.mb-left{ |
|
font-size: 24rpx; |
|
color: #707070; |
|
image{ |
|
width: 24rpx; |
|
height: 24rpx; |
|
margin-left: 10rpx; |
|
} |
|
.time{ |
|
margin-left: 36rpx; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|