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.
134 lines
2.6 KiB
134 lines
2.6 KiB
3 years ago
|
<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>
|