ucard-person-app-front/pages/mine/components/InfoRow.vue

<template>
    <view :class="['info-row', { 'info-row-last': isLast }]">
        <view class="info-icon">
            <cwg-icon :name="icon" :size="20" color="#9ca3af" />
        </view>
        <view class="info-content">
            <text class="info-label">{{ label }}</text>
            <text class="info-value">{{ value || '-' }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
interface Props {
    icon: string;
    label: string;
    value: string;
    isLast?: boolean;
}

defineProps<Props>();
</script>

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

.info-row {
    display: flex;
    align-items: center;
    gap: px2rpx(12);
    padding: px2rpx(12) 0;
    border-bottom: 1px solid #f9fafb;
}

.info-row-last {
    border-bottom: none;
}

.info-icon {
    flex-shrink: 0;
    width: px2rpx(24);
    height: px2rpx(24);
}

.info-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: px2rpx(12);
    color: #6b7280;
    margin-bottom: px2rpx(4);
}

.info-value {
    font-size: px2rpx(14);
    color: #111827;
}
</style>