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.
203 lines
4.1 KiB
203 lines
4.1 KiB
<template>
|
|
<view class="cardList">
|
|
<view class="container"
|
|
@click="toDetail(item)"
|
|
v-for="(item, index) in cardListData" :key="index">
|
|
<view class="content" :class="['U','S'].includes(item.state) ? 'content_border' : ''">
|
|
<view class="left">
|
|
<img :src="item.image.split(',')[0]" alt="">
|
|
</view>
|
|
<view class="right">
|
|
<view class="detailed">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="date">{{item.startTime}}</view>
|
|
<view class="address">{{item.address}}</view>
|
|
</view>
|
|
<view class="price">
|
|
<view class="num-box">{{item.num}}/{{item.sum}}</view>
|
|
<view class="btn-box" v-if="item.state == 0">立即报名</view>
|
|
<view class="btn-box btn-box2" v-if="item.state == 1">已结束</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
cardListData: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
components: {
|
|
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
skip(val) {
|
|
uni.navigateTo({
|
|
url: '/pages_order/orderDetails'
|
|
})
|
|
},
|
|
toDetail({ id }) {
|
|
uni.navigateTo({
|
|
url:`/pages_order/huodong-detail?activityId=${id}`
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.cardList {
|
|
position: relative;
|
|
z-index: 9;
|
|
.container {
|
|
margin-top: 31rpx;
|
|
padding: 25rpx 0;
|
|
border-radius: 20rpx;
|
|
background: #1B1713;
|
|
|
|
.content_border {
|
|
border-bottom: 1px solid #2A2A2A;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
padding: 24rpx 35rpx;
|
|
|
|
.left {
|
|
width: 228rpx;
|
|
height: 228rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
margin-left: 26rpx;
|
|
color: $uni-text-color-grey;
|
|
font-size: 24rpx;
|
|
|
|
.detailed {
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
padding-top: 11rpx;
|
|
width: 380rpx;
|
|
overflow:hidden; //超出的文本隐藏
|
|
text-overflow:ellipsis; //溢出用省略号显示
|
|
white-space:nowrap; //溢出不换行
|
|
}
|
|
|
|
.date {
|
|
padding: 25rpx 0 19rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
background: url('@/static/image/cart/timeIcon.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 360rpx;
|
|
overflow:hidden; //超出的文本隐藏
|
|
text-overflow:ellipsis; //溢出用省略号显示
|
|
white-space:nowrap; //溢出不换行
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
background: url('@/static/image/cart/addressIcon.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 22rpx;
|
|
height: 26rpx;
|
|
margin-right: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 25rpx;
|
|
.num-box {
|
|
font-size: 27rpx;
|
|
color: #fff;
|
|
}
|
|
.btn-box {
|
|
width: 180rpx;
|
|
height: 54rpx;
|
|
background: url('@/static/image/member/btn-2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 54rpx;
|
|
}
|
|
.btn-box2 {
|
|
background: #34312E;
|
|
color: #AFAFAF;
|
|
border-radius: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-sp-area {
|
|
text-align: right;
|
|
padding-top: 20rpx;
|
|
|
|
.mini-btn {
|
|
width: 166rpx;
|
|
height: 53rpx;
|
|
line-height: 53rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 50rpx;
|
|
margin-left: 20rpx;
|
|
background-color: #34312E;
|
|
color: #AFAFAF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: $uni-color-primary !important;
|
|
}
|
|
</style>
|