多状态映射不同样式(scss语法)

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

示例代码如下:

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>
相关推荐
一只小风华~1 小时前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
程序媛李李李李李蕾2 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
2501_915909063 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero3 小时前
UniappDay04
vue.js·微信小程序·uni-app
猫和老许3 小时前
Vue 3 拖拽排序功能优化实现:从原理到实战应用
前端·javascript·vue.js
sq8003 小时前
ag-grid-vue3 降级,支持低版本浏览器
前端·javascript·vue.js
兔年鸿运Q小Q3 小时前
html转word下载
javascript·vue.js·word
你这个年龄怎么睡得着的3 小时前
玩转vite性能优化
前端·vue.js·vite
华洛3 小时前
Agent应用落地,必不可少的三大辅助系统
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的双向绑定已经能精确追踪变化,为什么还要用虚拟DOM?揭秘背后的性能哲学!
前端·javascript·vue.js