feat: 增加主题配色、增加组件

zhangnuoyan

2024-08-24 392765e4c6823745345fe349e5422e1b98ca8f09

 src/views/components/the-box-card/index.vue

@@ -1,37 +1,63 @@
<template>
    <!-- 小卡片 -->
    <div class="the-box-card" :class="currentThemeMode === 'dark' ? 'box-card-dark' : ''">
        <a-card class="card-box">
        <a-card class="card-box card-bg-1">
            <div class="card-title">
                <div class="title-left">
                    <icon-home />
                    <div style="margin-left: 10px">A小区</div>
                    <div style="margin-left: 10px">{{ title }}</div>
                </div>
                <div class="card-more">详情 ></div>
                <div class="card-more" @click="handleDetails">详情 ></div>
            </div>
            <div class="card-content">
                <div :span="8" class="card-box-col">
                <div :span="8" class="card-box-col" @click="handleClick">
                    <div class="card-box-title">
                        <div>实用人口</div>
                        <div>{{ unitTitle }}</div>
                        <div>></div>
                    </div>
                    <div>2323 人</div>
                    <div class="title-people">
                        {{ unitNum }} <span>{{ unit }}</span>
                    </div>
                </div>
                <div :span="8" class="card-box-col">
                <div :span="8" class="card-box-col" @click="handleClick">
                    <div class="card-box-title">
                        <div>实用人口</div>
                        <div>{{ unitTitle }}</div>
                        <div>></div>
                    </div>
                    <div>2323 人</div>
                    <div class="title-people">
                        {{ unitNum }} <span>{{ unit }}</span>
                    </div>
                </div>
                <div :span="8" class="card-box-col">
                <div :span="8" class="card-box-col" @click="handleClick">
                    <div class="card-box-title">
                        <div>实用人口</div>
                        <div>{{ unitTitle }}</div>
                        <div>></div>
                    </div>
                    <div>2323 人</div>
                    <div class="title-people">
                        {{ unitNum }} <span>{{ unit }}</span>
                    </div>
                </div>
            </div>
            <div class="card-content"></div>
            <div class="card-content-footer">
                <div class="card-footer-box">
                    <div><span>实名</span> | <span>未实名</span>：</div>
                    <div>
                        <span>{{ name }}</span> | <span>{{ notName }}</span>
                    </div>
                </div>
                <div class="card-footer-box">
                    <div><span>出租</span> | <span>空置</span> | <span>自住</span>：</div>
                    <div>
                        <span>{{ hire }}</span> | <span>{{ vacant }}</span> | <span>{{ selfOccupation }}</span>
                    </div>
                </div>
                <div class="card-footer-box">
                    <div><span>在业</span> | <span>关闭</span>：</div>
                    <div>
                        <span>{{ service }}</span> | <span>{{ closes }}</span>
                    </div>
                </div>
            </div>
        </a-card>
    </div>
</template>
@@ -44,16 +70,45 @@
    defineProps<{
        icon?: string;
        title?: string;
        unitTitle?: string;
        unitNum?: number;
        unit?: string;
        metering?: number;
        name?: number;
        notName?: number;
        hire?: number;
        vacant?: number;
        selfOccupation?: number;
        service?: number;
        closes?: number;
    }>(),
    {
        icon: "",
        title: "",
        unit: "",
        metering: 0
        icon: "", //图标
        title: "", //标题
        unitTitle: "", //单位标题
        unitNum: 0, //单位数量
        unit: "", //单位
        name: 0, //实名
        notName: 0, //未实名
        hire: 0, //出租
        vacant: 0, //空置
        selfOccupation: 0, //自住
        service: 0, //在业
        closes: 0 //关闭
    }
);
const data = reactive({
    icon: "",
    title: "",
    unitTitle: "",
    unit: "",
    name: "",
    notName: "",
    hire: 0,
    vacant: 0,
    selfOccupation: 0,
    service: 0,
    closes: 0
});
// const dateType = ref("hour");

// const emits = defineEmits<{
@@ -63,6 +118,16 @@
// function initChart(v: any) {
//     emits("init", v);
// }
const emits = defineEmits<{
    (e: "handleDetails", data: object): void;
    (e: "handleClick", data: object): void;
}>();
const handleDetails = (item: any) => {
    emits("handleDetails", item);
};
const handleClick = (item: any) => {
    emits("handleClick", item);
};
</script>
<style lang="scss" scoped>
.box-card-dark {
@@ -91,6 +156,7 @@
        .card-more {
            color: var(--color-text-3);
            font-size: 14px;
            cursor: pointer;
        }
    }
    .card-content {
@@ -105,14 +171,29 @@
            height: 70px;
            border-radius: 5px;
            padding: 10px;
            line-height: 24px;
            line-height: 26px;
            cursor: pointer;
            .card-box-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--color-text-3);
                color: var(--color-text-1);
                font-size: 14px;
            }
            .title-people {
                color: #ffbd43;
                font-size: 14px;
            }
        }
    }
    .card-content-footer {
        margin-top: 10px;
        line-height: 24px;
        .card-footer-box {
            display: flex;
            align-items: center;
            color: var(--color-text-1);
            font-size: 14px;
        }
    }

@@ -124,12 +205,6 @@
        // display: flex;
        // align-items: center;
        // justify-content: center;
    }
    .card-content {
        // margin-left: 20px;
        // line-height: 22px;
        // color: var(--color-text-1);
        // font-size: 12px;
    }
}
</style>