<template>
    <div class="page">
        <div class="message">
            <div class="message-top">
                <span>系统消息</span>
                <span>2022-03-22 08:30:40</span>
            </div>
            <div class="message-title">大标题文案大标题文案大标题文案大标题大标题文案大标题文案大标题文案大标题</div>
            <div class="message-sub">小标题文案小标题文案小标题文案小标</div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.page {
    padding: 16px;
    background-color: @bg;
}

.message {
    background-color: @bg2;
    padding: 0 16px;
    border-radius: 12px;
    .message-top {
        padding: 12px 0 14px;
        .flex();
        justify-content: space-between;
        font-size: 12px;
        color: #ffffff;
        line-height: 20px;
    }

    .message-title {
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
    }
    .message-sub {
        padding: 10px 0 14px;
        font-size: 14px;
        color: #ffffff40;
        line-height: 20px;
    }
}
</style>
