gypsy-crm-frontend-vu/components/cwg-label-line-value.vue

<template>
    <view class="info-item">
        <view class="label">{{ label }}</view>
        <view class="line"></view>
        <view class="value">
            <slot name="operation1" />
            <view>{{ value }}</view>
            <slot name="operation" />
        </view>
    </view>
</template>

<script setup>

const props = defineProps({
    label: {
        type: String,
        required: ""
    },
    value: {
        type: String,
        required: "--"
    },
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.info-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: px2rpx(14);
    line-height: px2rpx(24);

    .label {
        color: var(--bs-emphasis-color);
      white-space: nowrap;
    }
    .line {
        flex: 1;
        height: 1px;
        border-top: 1px dashed var(--bs-border-color);
        margin-bottom: px2rpx(1);

    }
    .value {
        display: flex;
        align-items: flex-end;
        max-width: 50%;
        font-weight: 500;
        color: var(--bs-emphasis-color) !important;
    }
}
</style>