zhangxiao
2024-08-26 57b66478e7e335379435b31c20da4619bd1411f5
src/views/components/the-icon-card/index.vue
@@ -1,4 +1,5 @@
<template>
    <!-- 带icon首页 -->
    <div class="icon-card" :class="currentThemeMode === 'dark' ? 'card-dark' : ''">
        <a-card class="card-box">
            <div class="card-icon" :style="dynamicStyle">
@@ -8,7 +9,7 @@
            <div class="card-content">
                <p>{{ title }}</p>
                <p>
                    <span>{{ metering }}</span>
                    <span class="metering" :style="{ color: colorBg }">{{ metering }}</span>
                    <span>{{ unit }}</span>
                </p>
            </div>
@@ -54,13 +55,17 @@
    }
}
.icon-card {
    min-width: 88px;
    max-width: 208px;
    // min-width: 88px;
    // max-width: 208px;
    width: 100%;
    min-height: 77px;
    border-radius: 4px;
    box-sizing: border-box;
    margin-right: 10px;
    flex: 1;
    &:last-child {
        margin-right: 0;
    }
    .card-box {
        width: 100%;
        height: 100%;
@@ -86,6 +91,10 @@
        line-height: 22px;
        color: var(--color-text-1);
        font-size: 12px;
        .metering {
            font-size: 14px;
            margin-right: 4px;
        }
    }
}
</style>