列表页面布局

标签：技术   tle   css   rgba   position   image   osi   ffffff   高度   

html

<view class="item">
    <view class="line-date">帮扶日期:2019-12-27</view>
    <view class="line-person">被帮扶人:张三</view>
    <view class="line-title">帮扶主题:企业爱心送温暖，1000元慰问金。</view>
    <view class="tag">企业帮扶</view>
</view>

<view class="item">
    <view class="line-date">帮扶日期:2019-12-27</view>
    <view class="line-person">被帮扶人:张三</view>
    <view class="line-title">帮扶主题:企业爱心送温暖，1000元慰问金。</view>
    <view class="tag">企业帮扶</view>
</view>

css

page {
    background-color: #f6f6f6;
}

.item {
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    width: 710rpx;
    height: 225rpx;
    border-radius: 6rpx;
    // border: 1rpx solid red;
    background-color: #ffffff;
    padding-left: 40rpx;
    padding-top: 40rpx;
    position: relative;
    .tag {
        height: 70rpx;
        padding-left:50rpx;
        padding-right: 30rpx;
        background: rgba(78, 135, 241, 1);
        border-radius: 0px 6rpx 0px 50rpx;
        font-size:28rpx;
        line-height: 70rpx;
        font-weight:500;
        color:rgba(255,255,255,1);
        position: absolute;
        right: 0;
        top:0;
    }
    .line-date {
        height: 28rpx;
        line-height: 28rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
    }

    .line-person {
        height: 26rpx; /** 高度控制好，否则页面不准 */
        margin-top: 40rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 26rpx;
    }

    .line-title {
        margin-top: 30rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 26rpx;
    }
}

列表页面布局

标签：技术   tle   css   rgba   position   image   osi   ffffff   高度   

原文地址：https://www.cnblogs.com/jiqing9006/p/13036601.html