water_affairs/control/modules/controlItem.vue

<template>
    <view class="controlItem" hover-class="navigator-hover">
        <view class="funcname u-line-1" :style="{ paddingRight: item.isfeedback ? '10px' : '' }">
            {{ item.funcname }}
        </view>
        <view class="row">
            <view class="value u-line-1">{{ item.showValue || item.params.lastvalue || ' --' }}</view>
            <view class="unit u-line-1">{{ item.params.unit }}</view>
        </view>
        <view v-if="item.isfeedback" class="dot" />
    </view>
</template>

<script>
export default {
    name: "ControlItem",
    props: {
        item: Object
    }
}
</script>

<style lang="scss" scoped>
.controlItem {
    position: relative;
    width: 175px;
    height: 60px;
    border-radius: 4px;
    padding: 4px 6px 0;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 5px;

    .funcname {
        font-size: 15px;
        color: #333;
    }

    .dot {
        position: absolute;
        right: 2px;
        top: 2px;
        width: 10px;
        height: 10px;
        background: #D9001B;
        border-radius: 50%;
    }

    .row {
        display: flex;
        margin-top: 10px;
        align-items: flex-end;

        .value {
            width: 0;
            flex: 1;
            color: #333;
            font-size: 16px;
            flex-shrink: 0;
            font-weight: bold;
        }

        .unit {
            font-size: 12px;
            color: #666;
            flex-shrink: 0;
            max-width: 50px;
        }
    }
}
</style>