优化数值显示组件，支持点击事件

Tevin

2024-04-18 350d0dab6b45d17267b3291a19cd4aa2f28d9e77

优化数值显示组件，支持点击事件

 layout/numerical/CNumerical.vue

@@ -9,10 +9,14 @@
            class="at-col"
            v-for="(item,index) in values2"
            :key="index"
            :class="'at-col-' + valueFlex[index]"
            :class="'at-col-' + valueFlex[index] + ' ' + (!!item.onClick?'on-clickable':'')"
            @tap="evt => item.onClick && item.onClick(item)"
        >
            <view class="c-numerical-value">
                <text :class="item.textType?('m-text-'+item.textType):''">{{item.integer}}</text>
                <text :class="item.textType?('m-text-'+item.textType):''">
                    {{item.integer}}
                    <text class="c-numerical-more">&#187;</text>
                </text>
                <text
                    class="c-numerical-decimal"
                    :class="item.integer.length>6?'small':''"
@@ -33,8 +37,11 @@
    name: 'CNumerical',
    components: {},
    props: {
        // 数值集合，格式为：[{title, value, textType}]
        values: Array,
        // 数值集合，格式为：[{title, value, textType, onClick}]
        values: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        values2() {

 layout/numerical/cNumerical.scss

@@ -9,10 +9,23 @@
    text-align: center;
    .at-col {
        padding: 10px 0;
        &.on-clickable {
            &:active {
                background-color: #f2f2f2;
            }
            .c-numerical-more {
                display: inline;
            }
        }
    }
    .c-numerical-value {
        font-size: 40px;
        line-height: 60px;
        .c-numerical-more {
            display: none;
            margin-left: -8px;
            font-size: 36px;
        }
        .c-numerical-decimal {
            &.small {
                font-size: 30px;