fix: 组件

zhangxiao

2024-08-21 406a398a94d54b854472063f219ae87e8fcf4a98

 src/views/oneThree/comprehensiveQuery/index.vue

@@ -0,0 +1,86 @@
<template>
    <!-- 综合查询 -->
    <div class="comprehensiveQuery">
        <div class="top-title">
            <the-icon-card
                v-for="(item, index) in dataList"
                :key="index"
                :title="item.title"
                :icon="item.icon"
                :unit="item.unit"
                :metering="item.metering"
                :colorBg="item.colorBg"
            ></the-icon-card>
        </div>
        <div></div>
        <div>
            <the-box-card></the-box-card>
        </div>
    </div>
</template>

<script lang="ts" setup name="TheIconCard">
import { useTheme } from "@/hooks/useTheme";
import { Svg } from "@easyfe/admin-component";

const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
const dataList = reactive([
    {
        title: "实有房屋",
        icon: "icon-house",
        unit: "栋",
        metering: 110,
        colorBg: "#2e85ff"
    },
    {
        title: "自主",
        icon: "icon-people",
        unit: "栋",
        metering: 10,
        colorBg: "#30C1A9"
    },
    {
        title: "出租",
        icon: "icon-house",
        unit: "栋",
        metering: 220,
        colorBg: "#E36B4D"
    },
    {
        title: "实有人口",
        icon: "icon-people",
        unit: "人",
        metering: 420,
        colorBg: "#2E85FF"
    },
    {
        title: "流动人员",
        icon: "icon-people",
        unit: "人",
        metering: 220,
        colorBg: "#30C1A9"
    },
    {
        title: "实有单位",
        icon: "menu-house",
        unit: "个",
        metering: 220,
        colorBg: "#FF4343"
    },
    {
        title: "再业",
        icon: "menu-house",
        unit: "个",
        metering: 220,
        colorBg: "#9747FF"
    }
]);
</script>

<style lang="scss" scoped>
.comprehensiveQuery {
    .top-title {
        display: flex;
    }
}
</style>