131 lines
2.9 KiB
Vue
131 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="integralTask">
|
|||
|
|
<div class="img-bg">
|
|||
|
|
<img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="title">任务大厅</div>
|
|||
|
|
<div class="card-list">
|
|||
|
|
<div class="card">
|
|||
|
|
<h4>10月31日线下公益宣传</h4>
|
|||
|
|
<p>
|
|||
|
|
百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办…
|
|||
|
|
</p>
|
|||
|
|
<div class="imgs">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="time">
|
|||
|
|
<div class="goin">
|
|||
|
|
<img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
|
|||
|
|
<span class="label">进场时间：</span>
|
|||
|
|
<span class="value">2020-12-11 10:10 至 2020-12-11 10:10</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="exit">
|
|||
|
|
<img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
|
|||
|
|
<span class="label">离场时间：</span>
|
|||
|
|
<span class="value">2020-12-11 10:10 至 2020-12-11 10:10</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="type">
|
|||
|
|
<img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
|
|||
|
|
<span class="label">任务类型：</span>
|
|||
|
|
<span class="value">报名得积分</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'integralTask',
|
|||
|
|
appName: '功德银行',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: '功德银行'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.integralTask {
|
|||
|
|
.img-bg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 216px;
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 34px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #222222;
|
|||
|
|
padding: 0 32px;
|
|||
|
|
margin-top: 32px;
|
|||
|
|
}
|
|||
|
|
.card-list {
|
|||
|
|
padding: 24px 32px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.card {
|
|||
|
|
background: #FFF;
|
|||
|
|
color: #333333;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
h4 {
|
|||
|
|
padding: 24px 24px 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 34px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
.imgs {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
padding: 0 24px 24px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-top: 2px solid #EEEEEE;
|
|||
|
|
& > div {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
.goin,
|
|||
|
|
.exit,
|
|||
|
|
.type {
|
|||
|
|
img {
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
vertical-align: bottom;
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
.value {
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|