3.页面绘制之社区版块页面

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>

效果图:

3.页面绘制之社区版块页面

 

3.页面绘制之社区版块页面

上一篇:pracle ddl 监控以及结果回写文件


下一篇:1.快速入门,主键策略以及自动填充