From 57b66478e7e335379435b31c20da4619bd1411f5 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期一, 26 八月 2024 18:47:46 +0800
Subject: [PATCH] fix: 修改部分样式
---
src/views/components/the-icon-card/index.vue | 119 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 82 insertions(+), 37 deletions(-)
diff --git a/src/views/components/the-icon-card/index.vue b/src/views/components/the-icon-card/index.vue
index 8f598c6..5f8a559 100644
--- a/src/views/components/the-icon-card/index.vue
+++ b/src/views/components/the-icon-card/index.vue
@@ -1,54 +1,99 @@
<template>
- <div class="icon-card"></div>
+ <!-- 甯con棣栭〉 -->
+ <div class="icon-card" :class="currentThemeMode === 'dark' ? 'card-dark' : ''">
+ <a-card class="card-box">
+ <div class="card-icon" :style="dynamicStyle">
+ <Svg :name="icon" :width="26" :height="26"></Svg>
+ <!-- <img src="../../../assets/images/icon-house.png" alt="" /> -->
+ </div>
+ <div class="card-content">
+ <p>{{ title }}</p>
+ <p>
+ <span class="metering" :style="{ color: colorBg }">{{ metering }}</span>
+ <span>{{ unit }}</span>
+ </p>
+ </div>
+ </a-card>
+ </div>
</template>
-<script lang="ts" setup name="TheChartCard">
+<script lang="ts" setup name="TheIconCard">
+import { useTheme } from "@/hooks/useTheme";
+import { Svg } from "@easyfe/admin-component";
+
+const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
const props = withDefaults(
defineProps<{
- chartConfig?: ChartType;
+ icon?: string;
title?: string;
+ unit?: string;
+ metering?: number;
+ colorBg?: string;
}>(),
{
- chartConfig: undefined,
- title: ""
+ icon: "",
+ title: "",
+ unit: "",
+ metering: 0,
+ colorBg: "#fff"
}
);
-const dateType = ref("hour");
-const emits = defineEmits<{
- (e: "init", value: echarts.ECharts): void;
-}>();
-
-function initChart(v: any) {
- emits("init", v);
-}
+const colorBg = computed(() => {
+ return props.colorBg;
+});
+const dynamicStyle = {
+ backgroundColor: colorBg.value // 鍔ㄦ�佽儗鏅壊
+};
</script>
<style lang="scss" scoped>
-.icon-card {
- background-color: $bg2;
- width: 100%;
- padding: 24px;
- margin-top: 20px;
- .top {
+.card-dark {
+ .card-box {
+ border: 1px solid #0e9cff;
display: flex;
align-items: center;
- justify-content: space-between;
- padding-bottom: 20px;
- .left {
- font-size: 18px;
- font-weight: 700;
- position: relative;
- padding-left: 18px;
- &::before {
- position: absolute;
- top: 50%;
- left: 0;
- width: 8px;
- height: 8px;
- background-color: #315efb;
- border: 1px solid #b4c0da;
- transform: translateY(-50%);
- content: " ";
- }
+ // justify-content: center;
+ }
+}
+.icon-card {
+ // 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%;
+ }
+ .card-icon {
+ width: 50px;
+ height: 50px;
+
+ border-radius: 10px;
+ opacity: 1;
+ // background: #2e85ff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ :deep(.arco-card-body) {
+ display: flex;
+ align-items: center;
+ // justify-content: center;
+ }
+ .card-content {
+ margin-left: 20px;
+ line-height: 22px;
+ color: var(--color-text-1);
+ font-size: 12px;
+ .metering {
+ font-size: 14px;
+ margin-right: 4px;
}
}
}
--
Gitblit v1.8.0