功德银行
This commit is contained in:
shijingjing
@@ -1,25 +1,72 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AppNewFarmerBank">
|
<div class="AppNewFarmerBank">
|
||||||
<AiEmpty img='https://cdn.cunwuyun.cn/fengdu/mdpi_img-jianshezhong.png' :description="`丰收号 内容建设中…`" class="emptyWrap"></AiEmpty>
|
<div class="swiper-content">
|
||||||
|
<img src="https://cdn.cunwuyun.cn/fengdu/img-gongdeyinhang.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="welcome">
|
||||||
|
<div class="welcome-user">
|
||||||
|
<span class="name">汪周文</span>，欢迎进入新华街社区！
|
||||||
|
</div>
|
||||||
|
<div class="signin">签到</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-list">
|
||||||
|
<div class="jfsq">
|
||||||
|
<p>积分申请</p>
|
||||||
|
<h4>好事自荐得积分</h4>
|
||||||
|
</div>
|
||||||
|
<div class="jsrw">
|
||||||
|
<p>积分任务</p>
|
||||||
|
<h4>完成任务得积分</h4>
|
||||||
|
</div>
|
||||||
|
<div class="jfph">
|
||||||
|
<p>积分排行</p>
|
||||||
|
<h4>社区荣誉榜</h4>
|
||||||
|
</div>
|
||||||
|
<div class="jfsc">
|
||||||
|
<p>积分商城</p>
|
||||||
|
<h4>兑换得好物</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="handpick">
|
||||||
|
<div class="title">精选动态</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="top">
|
||||||
|
<div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
|
||||||
|
<div class="right">
|
||||||
|
<img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png" alt="">
|
||||||
|
<span>99+</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "AppNewFarmerBank",
|
name: "AppNewFarmerBank",
|
||||||
appName: "丰收银行",
|
appName: "功德银行",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getList(e) {
|
||||||
|
// console.log(e);
|
||||||
|
},
|
||||||
|
handleBannerClick() {
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
uni.setNavigationBarTitle({
|
uni.setNavigationBarTitle({
|
||||||
title: '建设中'
|
title: '功德银行'
|
||||||
});
|
});
|
||||||
|
this.getList()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -27,11 +74,138 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.AppNewFarmerBank {
|
.AppNewFarmerBank {
|
||||||
|
|
||||||
::v-deep .emptyWrap .emptyImg {
|
.swiper-content {
|
||||||
width: 442px;
|
width: 100%;
|
||||||
height: 312px;
|
height: 300px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
padding: 0 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFF;
|
||||||
|
.signin {
|
||||||
|
width: 104px;
|
||||||
|
height: 52px;
|
||||||
|
line-height: 52px;
|
||||||
|
border: 2px solid #2D7DFF;
|
||||||
|
border-radius: 40px;
|
||||||
|
color: #2D7DFF;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.welcome-user {
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
.name {
|
||||||
|
color: #2D7DFF;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list {
|
||||||
|
background: #FFF;
|
||||||
|
padding: 0 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.jfsq,
|
||||||
|
.jsrw,
|
||||||
|
.jfph,
|
||||||
|
.jfsc {
|
||||||
|
width: 328px;
|
||||||
|
height: 144px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
p {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jfsq {
|
||||||
|
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenshenqing.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #DF863E;
|
||||||
|
}
|
||||||
|
.jsrw {
|
||||||
|
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenrenwu.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #2D7DFF;
|
||||||
|
}
|
||||||
|
.jfph {
|
||||||
|
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenpaihang.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #338A77;
|
||||||
|
}
|
||||||
|
.jfsc {
|
||||||
|
background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenshangcheng.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #D9606E;
|
||||||
|
}
|
||||||
|
& > div:nth-child(2n+1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.handpick {
|
||||||
|
padding: 0 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 32px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFF;
|
||||||
|
border-radius: 12px;
|
||||||
|
// margin-bottom: 24px;
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left {
|
||||||
|
width: 562px;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 52px;
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 202px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user