kk_888
3 years ago
5 changed files with 190 additions and 23 deletions
@ -0,0 +1,145 @@ |
|||||||
|
<template> |
||||||
|
<!-- sdsd 345 --> |
||||||
|
<view class="activityCenter-page"> |
||||||
|
<image src="/static/images/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 3"> |
||||||
|
<image src="../../../static/images/business-img1.png" mode="" class="act-img"></image> |
||||||
|
<view class="act-con acea-row row-column-between"> |
||||||
|
<view class="title">云生态会员招募开始</view> |
||||||
|
<view class="act-time acea-row row-middle"> |
||||||
|
<image src="../../../static/images/act-time.png" mode="" class="time-img"></image> |
||||||
|
<view>12-23 00:00至11-25 23:00</view> |
||||||
|
</view> |
||||||
|
<view class="act-adress acea-row"> |
||||||
|
<image src="../../../static/images/act-address.png" mode="" class="address-img"></image> |
||||||
|
<view class="title-line">武汉市江夏区文化大道288号斤斤计较经济放假安排发金额为吉安打了个</view> |
||||||
|
</view> |
||||||
|
<view class="acea-row row-between-wrapper act-price"> |
||||||
|
<text class="act-p">¥888.00</text> |
||||||
|
<text class="act-i">进行中</text> |
||||||
|
<view class="enter-btn">立即报名</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
menuHeight: app.globalData.menuHeight, |
||||||
|
menuTop: app.globalData.menuTop, |
||||||
|
}; |
||||||
|
}, |
||||||
|
} |
||||||
|
</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; |
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
.act-con{ |
||||||
|
width: 450rpx; |
||||||
|
height: 236rpx; |
||||||
|
padding: 5rpx 0; |
||||||
|
.title{ |
||||||
|
width: 345rpx; |
||||||
|
height: 40rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 35rpx; |
||||||
|
color: #1D1D1D; |
||||||
|
} |
||||||
|
.act-time{ |
||||||
|
width: 345rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #191919; |
||||||
|
.time-img{ |
||||||
|
width: 18rpx; |
||||||
|
height: 22rpx; |
||||||
|
line-height: 34rpx; |
||||||
|
margin: 0rpx 16rpx 0 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.act-adress{ |
||||||
|
width: 345rpx; |
||||||
|
height: 67rpx; |
||||||
|
.address-img{ |
||||||
|
width: 19rpx; |
||||||
|
height: 23rpx; |
||||||
|
margin: 7rpx 14rpx 40rpx 0; |
||||||
|
} |
||||||
|
.title-line{ |
||||||
|
width: 308rpx; |
||||||
|
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> |
After Width: | Height: | Size: 326 KiB |
Loading…
Reference in new issue