优化数值显示组件显示细节

Tevin

2022-08-23 2e960901795b52e1a554a9f6fefb6424ff92a901

优化数值显示组件显示细节

 common/Tools.js

@@ -516,6 +516,23 @@
        return /^1[3456789]\d{9}$/.test('' + phone);
    }

    /**
     * 转换周数到日期
     * @param year
     * @param week
     * @param weekDay 需要输出星期几对应的日期 (1~7)
     * @return {Date}
     */
    static transWeekIndexToDate(year, week, weekDay) {
        const yearStart = moment([year, 0, 1]);
        const dayLong = 24 * 60 * 60 * 1000;
        const firstWeekLong = (7 - yearStart.day()) * dayLong;
        const weeksLong = (week - 1) * 7 * dayLong;
        const weekDayLong = weekDay * dayLong;
        const dayTimestamp = yearStart.valueOf() + firstWeekLong + weeksLong + weekDayLong;
        return moment(dayTimestamp).format('YYYY-MM-DD');
    }

}

// h5 中，实现 rem 转换 px
@@ -531,4 +548,6 @@
        const px = (value - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
        console.info(Math.round(px) + 'px');
    };
}
}

global.Tools = Tools;

 layout/numerical/CNumerical.vue

@@ -7,11 +7,18 @@
    <view class="c-numerical at-row at-row--wrap">
        <view
            class="at-col"
            v-for="(item,index) in values"
            v-for="(item,index) in values2"
            :key="index"
            :class="'at-col-' + valueFlex[index]"
        >
            <view class="c-numerical-value">{{item.value}}</view>
            <view class="c-numerical-value">
                <text>{{item.integer}}</text>
                <text
                    class="c-numerical-decimal"
                    :class="item.integer.length>6?'small':''"
                    v-if="item.decimal.length>0"
                >.{{item.decimal}}</text>
            </view>
            <view class="c-numerical-title">{{item.title}}</view>
        </view>
    </view>
@@ -29,6 +36,15 @@
        values: Array,
    },
    computed: {
        values2() {
            return (
                this.values.map(item => ({
                    ...item,
                    integer: (item.value + '').split('.')[0] || '',
                    decimal: (item.value + '').split('.')[1] || '',
                })) || []
            );
        },
        valueFlex() {
            return this.values.map((item, index) => {
                const surplus = this.values.length % 3;

 layout/numerical/cNumerical.scss

@@ -13,9 +13,17 @@
    .c-numerical-value {
        font-size: 40px;
        line-height: 60px;
        .c-numerical-decimal {
            &.small {
                font-size: 30px;
            }
            &.off {
                display: none;
            }
        }
    }
    .c-numerical-title {
        font-size: 32px;
        font-size: 30px;
        color: #666;
    }
}

 plugins/echarts/CECharts.weapp.vue

@@ -5,7 +5,6 @@

<template>
    <view class="c-echarts">
        123
        <canvas
            class="c-echarts-canvas"
            type="2d"