| | |
| | | <template> |
| | | <!-- 带icon首页 --> |
| | | <div class="icon-card" :class="currentThemeMode === 'dark' ? 'card-dark' : ''"> |
| | | <a-card class="card-box"> |
| | | <div class="card-icon" :style="dynamicStyle"> |
| | |
| | | <div class="card-content"> |
| | | <p>{{ title }}</p> |
| | | <p> |
| | | <span>{{ metering }}</span> |
| | | <span class="metering" :style="{ color: colorBg }">{{ metering }}</span> |
| | | <span>{{ unit }}</span> |
| | | </p> |
| | | </div> |
| | |
| | | } |
| | | } |
| | | .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%; |
| | |
| | | line-height: 22px; |
| | | color: var(--color-text-1); |
| | | font-size: 12px; |
| | | .metering { |
| | | font-size: 14px; |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | } |
| | | </style> |