多状态映射不同样式（scss语法）

白杨木影子被拉长2025-07-08 13:50

如设计图中，不同状态的卡片的标题对应着不同的背景色以及不同的标签样式，所以需要根据卡片的状态值来动态改变卡片的样式。

示例代码如下：

js 复制代码

<view class="card" v-for="(item, index) in list" :key="index">
    <view :class="['card-title', classMap[item.fine_type]]">
        <view>{{item.created_date}}</view>
        <view class="tag">{{item.type_text}}</view>
    </view>
    ...
</view>

js 复制代码

data() {
    return {
        classMap: {
            0: 'fine-status0',
            1: 'fine-status1',
            2: 'fine-status2',
            3: 'fine-status3',
            4: 'fine-status4',
        },
        ...
    }
}

js 复制代码

<style lang="scss">
    $fine-statuses: (
        0: (
            title-bgc: linear-gradient(90deg, #FFEBDC 0%, rgba(255, 241, 232, 0) 100%),
            tag-bgc: #FFF0E5,
            tag-color: #FF9B54
        ),
        1: (
            title-bgc: linear-gradient(90deg, #FFF7E9 0%, rgba(255, 247, 233, 0) 100%),
            tag-bgc: #FFF3E7,
            tag-color: #FF8000
        ),
        2: (
            title-bgc: linear-gradient(90deg, #FFF3F1 0%, rgba(255, 243, 241, 0) 100%),
            tag-bgc: #FFF1EF,
            tag-color: #FF5B3F
        ),
        3: (
            title-bgc: linear-gradient(90deg, #FFF9E7 0%, rgba(255, 249, 231, 0) 100%),
            tag-bgc: #FFF7DD,
            tag-color: #D9B31D
        ),
        4: (
            title-bgc: linear-gradient(90deg, #FFF1F4 0%, rgba(255, 241, 244, 0) 100%),
            tag-bgc: #FFE8ED,
            tag-color: #F94A6F
        )
    );

    // 动态生成 fine-status 样式
    @each $key, $value in $fine-statuses {
        .fine-status#{$key} {
            background: map-get($value, title-bgc);

            .tag {
                background: map-get($value, tag-bgc);
                color: map-get($value, tag-color);
            }
        }
    }
</style>