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.
177 lines
3.6 KiB
177 lines
3.6 KiB
<template> |
|
<!-- sdsd 345 --> |
|
<view class="activityCenter-page"> |
|
<image src="https://download.cyjyyjy.com/center-img.png" class="top-bg"></image> |
|
<view class="page-title" |
|
:style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'"> |
|
活动中心</view> |
|
<view class="activity-box"> |
|
<view class="activity-list acea-row" v-for="(item,index) in activity" :key="index" @tap="toActiveDetail" |
|
:data-id="item.id"> |
|
<image :src="item.images" mode="aspectFill" class="act-img"></image> |
|
<view class="act-con acea-row row-column-between"> |
|
<view class="title line2">{{item.name}}</view> |
|
<view class="act-time acea-row row-middle"> |
|
<image src="../../../static/images/act-time.png" mode="" class="time-img"></image> |
|
<view>{{item.activityStartTime.split(' ')[0]}}至{{item.activityEndTime.split(' ')[0]}}</view> |
|
</view> |
|
<view class="act-adress acea-row"> |
|
<image src="../../../static/images/act-address.png" mode="" class="address-img"></image> |
|
<view class="title-line line2">{{item.address}}</view> |
|
</view> |
|
<view class="acea-row row-between-wrapper act-price"> |
|
<text class="act-p">￥{{item.price}}</text> |
|
<text class="act-i">进行中</text> |
|
<view class="enter-btn">立即报名</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
getIndexData |
|
} from "@/api/home"; |
|
const app = getApp(); |
|
export default { |
|
data() { |
|
return { |
|
menuHeight: app.globalData.menuHeight, |
|
menuTop: app.globalData.menuTop, |
|
activity: [], //活动列表 |
|
}; |
|
}, |
|
mounted: function() { |
|
this.getIndexData() |
|
}, |
|
methods: { |
|
getIndexData() { |
|
getIndexData().then(res => { |
|
this.activity = res.data.recommendActivity.content |
|
}) |
|
}, |
|
toActiveDetail(e) { |
|
let id = e.currentTarget.dataset.id; |
|
uni.navigateTo({ |
|
url: '/pages/activity/detail/index?id=' + id |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.activityCenter-page { |
|
width: 100%; |
|
height: auto; |
|
background: #fff; |
|
position: relative; |
|
} |
|
|
|
.top-bg { |
|
width: 100%; |
|
height: 1210rpx; |
|
} |
|
|
|
.page-title { |
|
width: 100%; |
|
color: #fff; |
|
position: absolute; |
|
text-align: center; |
|
} |
|
|
|
.activity-box { |
|
width: 100%; |
|
height: auto; |
|
background: #FFF; |
|
position: absolute; |
|
top: 538rpx; |
|
border-radius: 30rpx 30rpx 0 0; |
|
padding: 32rpx 40rpx 0 40rpx; |
|
margin-bottom: 218rpx; |
|
} |
|
|
|
.activity-list { |
|
border-bottom: 1px solid #EEEEEE; |
|
padding: 20rpx 0; |
|
|
|
.act-img { |
|
width: 178rpx; |
|
height: 236rpx; |
|
margin-right: 20rpx; |
|
border-radius: 8rpx; |
|
} |
|
|
|
.act-con { |
|
width: 450rpx; |
|
height: 236rpx; |
|
padding: 5rpx 0; |
|
|
|
.title { |
|
font-size: 28rpx; |
|
font-weight: 600; |
|
color: #1D1D1D; |
|
} |
|
|
|
.act-time { |
|
font-size: 24rpx; |
|
color: #191919; |
|
|
|
.time-img { |
|
width: 18rpx; |
|
height: 22rpx; |
|
line-height: 34rpx; |
|
margin: 0rpx 16rpx 0 0; |
|
} |
|
} |
|
|
|
.act-adress { |
|
height: 67rpx; |
|
|
|
.address-img { |
|
width: 19rpx; |
|
height: 23rpx; |
|
margin: 7rpx 14rpx 40rpx 0; |
|
} |
|
|
|
.title-line { |
|
height: 68rpx; |
|
font-size: 24rpx; |
|
font-weight: 500; |
|
color: #191919; |
|
word-wrap: break-word; |
|
overflow: hidden; |
|
} |
|
} |
|
|
|
.act-price { |
|
width: 100%; |
|
|
|
.act-i { |
|
font-size: 24rpx; |
|
color: #FF5A0E; |
|
font-weight: 600; |
|
} |
|
|
|
.act-p { |
|
font-size: 32rpx; |
|
color: #2A2B2B; |
|
font-weight: 600; |
|
} |
|
|
|
.enter-btn { |
|
width: 138rpx; |
|
height: 40rpx; |
|
line-height: 40rpx; |
|
text-align: center; |
|
background: linear-gradient(39deg, #FF5A0D 0%, #FFAC85 100%); |
|
border-radius: 26rpx; |
|
color: #fff; |
|
font-size: 24rpx; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|