<template>
    <!-- 全局标题+内容样式 -->
    <text class="txt" :class="class" :style="style">
        <text class="mocp-color-text-5" :style="getLabelStyle" v-if="label">{{ label }}</text>
        <text class="mocp-color-text-4" :style="getValueStyle" v-if="value">{{ value }}</text>
    </text>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    class: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: ''
    },
    labelSize: {
        type: Number,
        default: 28
    },
    value: {
        type: [String, Number],
        default: ''
    },
    valueSize: {
        type: Number,
        default: 28
    }
})
const getLabelStyle = computed(() => {
    return {
        fontSize: ps.labelSize + 'rpx'
    }
})
const getValueStyle = computed(() => {
    return {
        fontSize: ps.valueSize + 'rpx'
    }
})
</script>
<style lang="scss" scoped></style>
