wip b2 小组件ui开发完成

src/views/hui-jia/components/hardware.vue

@@ -0,0 +1,504 @@
+<template>
+  <div class="hardware-data">
+    <!-- 标题 -->
+    <div class="module-title">硬件数据</div>
+
+    <!-- 智能电表部分 -->
+    <div class="data-section">
+      <div class="device-info">
+        <div class="device-icon electric"></div>
+        <div>
+          <div class="device-count">8921</div>
+          <div class="device-name">智能电表</div>
+        </div>
+      </div>
+      <div class="data-cards">
+        <div class="data-card">
+          <div class="data-label">年度用电</div>
+          <div>
+            <div class="data-value">428921</div>
+            <div class="data-unit">kW·h</div>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="data-label">月均用电</div>
+          <div>
+            <div class="data-value">18921</div>
+            <div class="data-unit">kW·h</div>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="data-label">日均用电</div>
+          <div>
+            <div class="data-value">8921</div>
+            <div class="data-unit">kW·h</div>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="data-label">开关次数</div>
+          <div>
+            <div class="data-value">887</div>
+            <div class="data-unit">近12个月</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="charts-container">
+      <div ref="powerChart" class="chart-item"></div>
+      <div ref="waterChart" class="chart-item"></div>
+    </div>
+
+    <!-- 智能水表部分 -->
+    <div class="data-section">
+      <div class="device-info">
+        <div class="device-icon water"></div>
+        <div class="device-name">智能水表</div>
+        <div class="device-count">8921</div>
+      </div>
+      <div class="data-cards">
+        <div class="data-card">
+          <div class="data-label">年度用水</div>
+          <div>
+            <div class="data-value">89321</div>
+            <div class="data-unit">m³</div>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="data-label">月均用水</div>
+          <div>
+            <div class="data-value">9212</div>
+            <div class="data-unit">m³</div>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="data-label">日均用水</div>
+          <div>
+            <div class="data-value">921</div>
+            <div class="data-unit">m³</div>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="data-label">开关次数</div>
+          <div>
+            <div class="data-value">887</div>
+            <div class="data-unit">近12个月</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from "echarts"
+  export default {
+    name: "HardwareData",
+    data() {
+      return {
+        powerChartInstance: null,
+        waterChartInstance: null,
+        // 模拟月度数据
+        monthlyData: [
+          { month: "十二月", power: 220000, water: 180000 },
+          { month: "一月", power: 210000, water: 170000 },
+          { month: "二月", power: 230000, water: 190000 },
+          { month: "三月", power: 225000, water: 185000 },
+          { month: "四月", power: 215000, water: 175000 },
+          { month: "五月", power: 200000, water: 160000 },
+          { month: "六月", power: 205000, water: 165000 },
+          { month: "七月", power: 210000, water: 170000 },
+          { month: "八月", power: 215000, water: 175000 },
+          { month: "九月", power: 220000, water: 180000 },
+          { month: "十月", power: 225000, water: 185000 },
+          { month: "十一月", power: 230000, water: 190000 },
+        ],
+      }
+    },
+    mounted() {
+      this.initPowerChart()
+      this.initWaterChart()
+      window.addEventListener("resize", this.handleResize)
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", this.handleResize)
+      if (this.powerChartInstance) {
+        this.powerChartInstance.dispose()
+      }
+      if (this.waterChartInstance) {
+        this.waterChartInstance.dispose()
+      }
+    },
+    methods: {
+      // 初始化用电量柱状图
+      initPowerChart() {
+        this.powerChartInstance = echarts.init(this.$refs.powerChart)
+
+        const option = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(0, 0, 0, 0.8)",
+            borderColor: "rgba(64, 158, 255, 0.3)",
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: (params) => {
+              let result = ``
+              params.forEach((param) => {
+                result += `${param.name}<br/>${
+                  param.seriesName
+                }: ${param.value.toLocaleString()}<br/>`
+              })
+              return result
+            },
+          },
+          grid: {
+            left: "1%",
+            right: "1%",
+            top: "5%",
+            bottom: "2%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: this.monthlyData.map((item) => item.month),
+            axisLine: {
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.3)",
+                type: "dashed",
+              },
+            },
+            axisLabel: {
+              color: "rgba(160, 179, 214, 0.7)",
+              fontSize: 11,
+              interval: 0,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              // 将坐标轴内的线设置为虚线
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.3)",
+                type: "dashed",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(160, 179, 214, 0.7)",
+              fontSize: 11,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.1)",
+                type: "dashed",
+                width: 1,
+              },
+            },
+          },
+          series: [
+            {
+              name: "用电量",
+              type: "bar",
+              data: this.monthlyData.map((item) => item.power),
+              barWidth: "30%",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+                  { offset: 0, color: "#FCE2B4" },
+                  { offset: 1, color: "#F66757" },
+                ]),
+                borderRadius: [20, 20, 0, 0],
+              },
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 10,
+                formatter: (params) =>
+                  params.value >= 10000
+                    ? (params.value / 10000).toFixed(1) + "万"
+                    : params.value,
+              },
+            },
+          ],
+        }
+
+        this.powerChartInstance.setOption(option)
+      },
+
+      // 初始化用水量柱状图
+      initWaterChart() {
+        this.waterChartInstance = echarts.init(this.$refs.waterChart)
+
+        const option = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(0, 0, 0, 0.8)",
+            borderColor: "rgba(64, 158, 255, 0.3)",
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: (params) => {
+              let result = ``
+              params.forEach((param) => {
+                result += `${param.name}<br/>${
+                  param.seriesName
+                }: ${param.value.toLocaleString()}<br/>`
+              })
+              return result
+            },
+          },
+          grid: {
+            left: "1%",
+            right: "1%",
+            top: "2%",
+            bottom: "5%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: this.monthlyData.map((item) => item.month),
+            axisLine: {
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.3)",
+                type: "dashed",
+              },
+            },
+            axisLabel: {
+              color: "rgba(160, 179, 214, 0.7)",
+              fontSize: 11,
+              interval: 0,
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              // 将坐标轴内的线设置为虚线
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.3)",
+                type: "dashed",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            // 反转 y 轴的 min 和 max，实现“倒立”
+            min: 400000,
+            max: 0,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(160, 179, 214, 0.7)",
+              fontSize: 11,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.1)",
+                type: "dashed",
+                width: 1,
+              },
+            },
+          },
+          series: [
+            {
+              name: "用水量",
+              type: "bar",
+              data: this.monthlyData.map((item) => item.water),
+              barWidth: "30%",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#3AB3E3" },
+                  { offset: 1, color: "#1620D4" },
+                ]),
+                borderRadius: [0, 0, 20, 20],
+              },
+              label: {
+                show: true,
+                position: "bottom",
+                color: "#fff",
+                fontSize: 10,
+                formatter: (params) =>
+                  params.value >= 10000
+                    ? (params.value / 10000).toFixed(1) + "万"
+                    : params.value,
+              },
+            },
+          ],
+        }
+
+        this.waterChartInstance.setOption(option)
+      },
+
+      handleResize() {
+        if (this.powerChartInstance) {
+          this.powerChartInstance.resize()
+        }
+        if (this.waterChartInstance) {
+          this.waterChartInstance.resize()
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/css/theme.scss";
+
+  .hardware-data {
+    background: var(--content-bg);
+    border-radius: 4px;
+    padding: 20px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .module-title {
+    color: var(--title-primary);
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .data-section {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
+
+  .device-info {
+    text-align: right;
+    background: var(--title-bg);
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    justify-content: space-between;
+    border: 1px solid rgba(64, 158, 255, 0.1);
+    border-radius: 6px;
+    padding: 16px;
+  }
+
+  .device-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .device-icon.electric {
+    background: linear-gradient(135deg, #ff8c00 0%, #ffd700 100%);
+  }
+
+  .device-icon.water {
+    background: linear-gradient(135deg, #00bfff 0%, #87ceeb 100%);
+  }
+
+  .device-icon::after {
+    content: "";
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .device-icon.electric::after {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C13.1 2 14 .9 14 0H10C10 .9 10.9 2 12 2M15.78 9H14.22L14 12H10L9.78 9H8.22L7.79 14H9.2L9.5 17H14.5L14.8 14H16.21L15.78 9M12 4C10.9 4 10 4.9 10 6S10.9 8 12 8 14 7.1 14 6 13.1 4 12 4Z"/></svg>');
+  }
+
+  .device-icon.water::after {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C13.1 2 14 .9 14 0H10C10 .9 10.9 2 12 2M12 18.5C11.45 18.5 11 18.05 11 17.5C11 16.95 11.45 16.5 12 16.5C12.55 16.5 13 16.95 13 17.5C13 18.05 12.55 18.5 12 18.5M12 12C9.79 12 8 13.79 8 16H16C16 13.79 14.21 12 12 12M12 4C9.79 4 8 5.79 8 8H16C16 5.79 14.21 4 12 4M3 20V22H13V20H3M16.5 18.21L17.79 16.93L19.5 18.65L23.07 15.07L24.5 16.45L19.5 21.45L16.5 18.21Z"/></svg>');
+  }
+
+  .device-name {
+    color: #fea373;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .device-count {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .data-cards {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // gap: 20px;
+    flex-wrap: wrap;
+    background: var(--title-bg);
+    border: 1px solid rgba(64, 158, 255, 0.1);
+    border-radius: 6px;
+  }
+
+  .data-card {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-right: 1px solid rgba(64, 158, 255, 0.3);
+    text-align: right;
+    padding: 10px 20px;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .data-label {
+    color: var(--primary);
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .data-value {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+
+  .data-unit {
+    color: #fea373;
+    font-size: 16px;
+  }
+
+  /* 修改为两个图表容器 */
+  .charts-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    // min-height: 600px;
+  }
+
+  .chart-item {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+  }
+</style>

src/views/hui-jia/components/market.vue

@@ -36,7 +36,7 @@
             "新增户数",
           ],
           lastMonthData: [-9, -9, -9, -9, -3, -12], // 上月数据
-          thisMonthData: [9, 9, 0, 1, 9, 10], // 本月数据
+          thisMonthData: [9, 9, 1, 1, 9, 10], // 本月数据
         },
         timer: null,
       }
@@ -173,6 +173,7 @@
                   { offset: 0, color: "#FCE2B4" },
                   { offset: 1, color: "#F66757" },
                 ]),
+                borderRadius: [20, 0, 0, 20],
               },
               label: {
                 show: true,
@@ -202,6 +203,7 @@
                   { offset: 0, color: "#3AB3E3" },
                   { offset: 1, color: "#1620D4" },
                 ]),
+                borderRadius: [0, 20, 20, 0],
               },
               label: {
                 show: true,
@@ -323,34 +325,4 @@
     height: 100%;
     min-height: 400px;
   }
-
-  // 响应式设计
-  @media (max-width: 1200px) {
-    .market-container {
-      padding: 16px;
-    }
-
-    .market-title {
-      font-size: 16px;
-      margin-bottom: 16px;
-    }
-
-    .chart {
-      min-height: 350px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .market-container {
-      padding: 12px;
-    }
-
-    .market-title {
-      font-size: 14px;
-    }
-
-    .chart {
-      min-height: 300px;
-    }
-  }
 </style>

src/views/hui-jia/components/smart.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="smart-door">
+    <!-- 标题 -->
+    <div class="module-title">智能门禁</div>
+
+    <!-- 数据卡片 -->
+    <div class="data-cards">
+      <div class="data-card">
+        <div class="data-info">
+          <i class="iconfont icon-door"></i>
+          <div class="data-label">门禁设备</div>
+        </div>
+        <div class="data-value">{{ doorDevices }}</div>
+      </div>
+
+      <div class="data-card">
+        <div class="data-info">
+          <i class="iconfont icon-project"></i>
+          <div class="data-label">开通项目</div>
+        </div>
+        <div class="data-value">{{ activeProjects }}</div>
+      </div>
+
+      <div class="data-card">
+        <div class="data-info">
+          <i class="iconfont icon-access"></i>
+          <div class="data-label">出入次数</div>
+        </div>
+        <div class="data-value">{{ accessTimes }}</div>
+      </div>
+    </div>
+
+    <!-- 通行流量趋势图 -->
+    <div class="chart-section">
+      <div class="chart-title">日通行流量趋势</div>
+      <div ref="trafficChart" class="traffic-chart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "SmartDoor",
+    data() {
+      return {
+        doorDevices: "921",
+        activeProjects: "92",
+        accessTimes: "900000",
+        chartInstance: null,
+        // 模拟的通行流量数据
+        trafficData: [
+          { time: "01:00", count: 150 },
+          { time: "04:00", count: 250 },
+          { time: "07:00", count: 420 },
+          { time: "10:00", count: 380 },
+          { time: "13:00", count: 320 },
+          { time: "16:00", count: 230 },
+          { time: "19:00", count: 220 },
+          { time: "22:00", count: 300 },
+        ],
+      }
+    },
+    mounted() {
+      this.initChart()
+      window.addEventListener("resize", this.handleResize)
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", this.handleResize)
+      if (this.chartInstance) {
+        this.chartInstance.dispose()
+      }
+    },
+    methods: {
+      initChart() {
+        const echarts = require("echarts")
+        this.chartInstance = echarts.init(this.$refs.trafficChart)
+
+        const option = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(0, 0, 0, 0.8)",
+            borderColor: "rgba(64, 158, 255, 0.3)",
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: (params) => {
+              return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}`
+            },
+          },
+          legend: {
+            data: ["开门次数"],
+            textStyle: {
+              color: "#fff",
+            },
+            top: "0%",
+            right: "0%",
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "10%",
+            top: "20%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: this.trafficData.map((item) => item.time),
+            axisLine: {
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.6)",
+              },
+            },
+            axisLabel: {
+              color: "rgba(160, 179, 214, 0.7)",
+              fontSize: 14,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              // 将坐标轴内的线设置为虚线
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.3)",
+                type: "dashed",
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(160, 179, 214, 0.7)",
+              fontSize: 12,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              // 将坐标轴内的线设置为虚线
+              lineStyle: {
+                color: "rgba(160, 179, 214, 0.3)",
+                type: "dashed",
+              },
+            },
+          },
+          series: [
+            {
+              name: "开门次数",
+              type: "bar",
+              data: this.trafficData.map((item) => item.count),
+              barWidth: "30%",
+              // 添加标签配置，设置颜色为白色
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 14,
+              },
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  { offset: 0, color: "#F6688B" },
+                  { offset: 1, color: "#F89877" },
+                ]),
+              },
+            },
+          ],
+        }
+
+        this.chartInstance.setOption(option)
+      },
+      handleResize() {
+        if (this.chartInstance) {
+          this.chartInstance.resize()
+        }
+      },
+      // 模拟数据更新方法
+      updateData() {
+        // 这里可以根据实际需求从API获取数据
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/css/theme.scss";
+
+  .smart-door {
+    background: var(--content-bg);
+    border-radius: 4px;
+    padding: 20px;
+    height: 100%;
+  }
+
+  .module-title {
+    color: var(--title-primary);
+    margin-bottom: 20px;
+  }
+
+  .data-cards {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+    padding: 10px 20px;
+    margin: 36px auto;
+    background: var(--title-bg);
+    border: 1px solid rgba(64, 158, 255, 0.1);
+    border-radius: 6px;
+  }
+
+  .data-card {
+    flex: 1;
+    min-width: 200px;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &:nth-child(1) {
+      border-right: 1px solid rgba(64, 158, 255, 0.1);
+    }
+    &:nth-child(2) {
+      border-right: 1px solid rgba(64, 158, 255, 0.1);
+    }
+
+    .iconfont {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%);
+      border-radius: 6px;
+      font-size: 20px;
+      color: #ffffff;
+    }
+
+    .data-info {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .data-label {
+      font-size: 14px;
+      color: var(--primary);
+      margin-bottom: 4px;
+    }
+
+    .data-value {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--title-primary, #ffffff);
+    }
+  }
+
+  .chart-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chart-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    margin-bottom: 16px;
+  }
+
+  .traffic-chart {
+    flex: 1;
+    width: 100%;
+    min-height: 250px;
+  }
+</style>

src/views/hui-jia/components/work-card.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="work-card">
+    <div class="work-card-item" v-for="item in dataList" :key="item.title">
+      <div class="card-header">
+        <!-- <i class="iconfont" :class="iconName"></i> -->
+        <span class="card-title">{{ item.title }}</span>
+      </div>
+      <div class="card-content">
+        <div class="card-subtitle">{{ item.subtitle }}</div>
+        <div class="card-value">{{ formatNumber(item.value) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "WorkCard",
+    props: {
+      iconName: {
+        type: String,
+        required: true,
+        default: "icon-enterprise",
+      },
+      title: {
+        type: String,
+        required: true,
+      },
+      subtitle: {
+        type: String,
+        required: true,
+      },
+      value: {
+        type: [Number, String],
+        required: true,
+        default: 0,
+      },
+    },
+    data() {
+      return {
+        dataList: [
+          {
+            title: "数电票业务",
+            subtitle: "已开发票数",
+            value: 345345,
+          },
+          {
+            title: "道闸系统",
+            subtitle: "设备数量",
+            value: 453,
+          },
+          {
+            title: "智慧二维码",
+            subtitle: "配置数量",
+            value: 45,
+          },
+          {
+            title: "短信业务",
+            subtitle: "销售数量",
+            value: 3456,
+          },
+          {
+            title: "房屋租售",
+            subtitle: "发布资产数",
+            value: 887,
+          },
+          {
+            title: "业委会",
+            subtitle: "开通数量",
+            value: 34,
+          },
+        ],
+      }
+    },
+    methods: {
+      // 格式化数字显示
+      formatNumber(num) {
+        if (typeof num === "string") {
+          return num
+        }
+        // 如果数字是整数，直接返回字符串形式
+        return num.toString()
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/css/theme.scss";
+
+  .work-card {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+  }
+
+  .work-card-item {
+    background: var(--content-bg);
+    border-radius: 4px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 20px;
+    background: var(--title-bg);
+
+    .iconfont {
+      font-size: 24px;
+      margin-right: 10px;
+      // 根据不同图标使用不同颜色
+      color: var(--primary-color, #409eff);
+    }
+
+    .card-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--title-primary);
+    }
+  }
+
+  .card-content {
+    display: flex;
+    align-items: flex-end;
+    padding: 20px;
+    .card-subtitle {
+      font-size: 14px;
+      color: #82d1f6;
+    }
+
+    .card-value {
+      margin-left: 12px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: 1px;
+    }
+  }
+</style>

src/views/hui-jia/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-11-17 16:26:35
  * @LastEditors: wjc
- * @LastEditTime: 2025-11-18 10:10:35
+ * @LastEditTime: 2025-11-18 15:51:58
  * @Description:
 -->
 <template>
@@ -11,6 +11,9 @@
     <implementationIng />
     <implementationNowYear />
     <Market />
+    <WorkCard />
+    <Smart />
+    <Hardware />
   </div>
 </template>
 
@@ -20,13 +23,19 @@ import implementationTotal from './components/implementary/total.vue'
 import implementationIng from './components/implementary/ing.vue'
 import implementationNowYear from './components/implementary/now-year.vue'
 import Market from './components/market.vue'
+import WorkCard from './components/work-card.vue'
+import Smart from './components/smart.vue'
+import Hardware from './components/hardware.vue'
 
 export default {
   components: {
     implementationTotal,
     implementationIng,
     implementationNowYear,
-    Market
+    Market,
+    WorkCard,
+    Smart,
+    Hardware
   }
 }
 </script>