1.社区版块页面
shequ.vue:
<template> <view class="content"> <view class="card" v-for="(item,index) in shequ_data" :key=index > <view class="zuo"> <view class="fangkuang"> <view class="fk-top"> {{item.today_new_num}} </view> <view class="fk-bot"> 今日 </view> </view> </view> <view class="you"> <view class="shang"> {{item.title}} </view> <view class="zhong"> {{item.desc}} </view> <view class="xia"> 主题数:{{item.zhuti_num}},帖数:{{item.tiezi_num}} </view> </view> </view> <u-gap height="80" bg-color="#fff"></u-gap> <u-divider color="#6d6d6d" half-width="80" border-color="#6d6d6d">?玩蛇的胖纸为网络文学而开发</u-divider> <u-gap height="80" bg-color="#fff"></u-gap> </view> </template> <script> export default { data() { return { shequ_data:[ {title:"暗部智囊",desc:"对暗部主张的实现,对抵抗资本对创作者的压榨出谋划策。",today_new_num:"10",zhuti_num:"10",tiezi_num:"12"}, {title:"推书试读",desc:"对暗部主张的实现,对抵抗资本对创作者的压榨出谋划策。",today_new_num:"10",zhuti_num:"10",tiezi_num:"12"}, {title:"网文江湖",desc:"对暗部主张的实现,对抵抗资本对创作者的压榨出谋划策。",today_new_num:"10",zhuti_num:"10",tiezi_num:"12"}, {title:"业界招聘",desc:"对暗部主张的实现,对抵抗资本对创作者的压榨出谋划策。",today_new_num:"10",zhuti_num:"10",tiezi_num:"12"}, {title:"黑市置换",desc:"对暗部主张的实现,对抵抗资本对创作者的压榨出谋划策。",today_new_num:"10",zhuti_num:"10",tiezi_num:"12"} ] } }, methods: { } } </script> <style > .card{ width: 100%; height: 180upx; background-color: #f4f4f5; margin-top: 30upx; border-radius: 5px; display: flex; } .zuo{ width: 180upx; height: 100%; background-color: #000; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .fangkuang{ width: 150upx; height: 120upx; color: #fff; display: flex; flex-direction:column } .fk-top{ flex: 1; font-size: 16px; text-align: center; padding-top: 5upx; border-bottom:1px #fff solid; } .fk-bot{ flex: 1; font-size: 16px; text-align: center; font-weight: 1000; } .you{ flex: 1; flex-direction:column; width: 500upx; height: 100%; display: flex; } .shang{ height: 50upx; font-size: 15px; font-weight: 900; text-align: center; } .zhong{ height: 80upx; padding-left: 20upx; } .xia{ height: 50upx; padding-left: 20upx; } </style>
效果图: