1、less覆盖标签达到不同类型显示不同样式

<view class="view_ll {{isOther? 'other_view_ll' : ''}}">
    <view class="detial_ll">
        <view class="tip_tv">测试文案1</view>
        <view class="icon_tv">测试文案2</view>
    </view>
</view>

.view_ll {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    margin-top: 60rpx;
    .detial_ll {
        .tip_tv {
            font-size: 35rpx;
            color: orange;
        }
        .icon_tv {
            font-size: 35rpx;
            color: red;
        }
    }
    &.other_view_ll {
        .tip_tv {
            color: green;
        }
        .icon_tv {
            color: blue;
        }
    }
}

isOther = false时

isOther = false

isOther = true时

isOther = true

2、文案左边添加标签

需要注意标签居中情况

image.png

<view class="view_ll">
    <text class="tv">标签</text>
    左边的标签不居中。左边的标签不居中。
</view>

.view_ll {
    line-height: 60rpx;
    font-size: 50rpx;
    .tv {
        display: inline-block;
        padding: 5rpx 10rpx;
        margin-left: 10rpx;
        line-height: 32rpx;
        background: red;
        font-size: 30rpx;
        color: white;
        position: relative;
        top: -8rpx;
    }
}