wip: 图标

src/assets/css/theme.scss

@@ -20,3 +20,8 @@ $left-width: 220px;
   --content-bg: #0C1425;
   --primary: #007bd3;
 }
+.title-icon {
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+}

src/route/white-list.js

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-18 09:40:26
  * @LastEditors: wjc
- * @LastEditTime: 2025-11-17 16:30:37
+ * @LastEditTime: 2025-11-18 17:37:59
  * @Description: 白名单菜单
  */
 import _import from './_import'
@@ -41,7 +41,7 @@ export default [
   },
   {
     path: '/hui-jia',
-    component: () => import('@/views/hui-jia/index.vue'),
+    component: () => import('@/views/hui-jia/b1-screen/index.vue'),
     meta: {
       title: '绘家科技',
       hideInMenu: false,

src/views/hui-jia/b1-screen/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="b1-screen">
+    <div>1</div>
+    <div>2</div>
+    <implementationTotal />
+    <Market />
+    <implementationIng />
+    <implementationNowYear />
+  </div>
+</template>
+
+<script>
+  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"
+
+  export default {
+    name: "B1Screen",
+    components: {
+      implementationTotal,
+      implementationIng,
+      implementationNowYear,
+      Market,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .b1-screen {
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 20px;
+    .now-year-container {
+      grid-column: 1 / span 2;
+      grid-row: 1 / span 2;
+    }
+  }
+</style>

src/views/hui-jia/components/implementary/ing.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="implementing-container">
     <div class="implementing-title">
-      <i class="iconfont icon-task"></i>
+      <img src="@/assets/images/nz.png" class="title-icon" />
       进行中的实施服务
     </div>
     <div class="implementing-list">

src/views/hui-jia/components/implementary/now-year.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="now-year-container">
     <div class="now-year-title">
-      <i class="iconfont icon-bar-chart"></i>
+      <img src="@/assets/images/shb.png" class="title-icon" />
       实施服务（今年数据）
     </div>
     <div class="chart-container">

src/views/hui-jia/components/implementary/total.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="total-container">
-    <div class="total-title">实施服务（汇总数据）</div>
+    <div class="total-title">
+      <img src="@/assets/images/tj.png" class="title-icon" />
+      实施服务（汇总数据
+    </div>
     <div class="total-grid">
       <div class="total-item">
         <div class="total-label">城市总数</div>
@@ -39,183 +42,181 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { api } from '@/api'
-
-export default {
-  name: 'ImplementationTotal',
-  data () {
-    return {
-      cityCount: 99,
-      enterpriseCount: 99,
-      contractCount: 99,
-      performanceCount: 99,
-      serviceHours: 99,
-      projectCount: 99,
-      signedUserCount: 99,
-      implementationUserCount: 99,
-      timer: null
-    }
-  },
-  computed: {
-    ...mapState([
-      'entCode',
-      'communityId'
-    ])
-  },
-  mounted () {
-    this.init()
-    // 设置定时刷新
-    this.timer = setInterval(() => {
-      this.init()
-    }, 60000) // 每分钟刷新一次
-  },
-  beforeDestroy () {
-    if (this.timer) {
-      clearInterval(this.timer)
-    }
-  },
-  methods: {
-    // 初始化数据
-    async init () {
-      try {
-        const params = {
-          entCode: this.entCode,
-          communityId: this.communityId
-        }
-        // 这里应该调用实际的API获取数据
-        // const res = await api.getImplementationTotal(params)
-        // 暂时使用模拟数据
-        this.updateData()
-      } catch (error) {
-        console.error('获取实施服务汇总数据失败:', error)
+  import { mapState } from "vuex"
+  import { api } from "@/api"
+
+  export default {
+    name: "ImplementationTotal",
+    data() {
+      return {
+        cityCount: 99,
+        enterpriseCount: 99,
+        contractCount: 99,
+        performanceCount: 99,
+        serviceHours: 99,
+        projectCount: 99,
+        signedUserCount: 99,
+        implementationUserCount: 99,
+        timer: null,
       }
     },
-    // 更新数据
-    updateData () {
-      // 这里可以根据实际API返回的数据进行更新
-      // 目前使用固定值展示
-      this.cityCount = 99
-      this.enterpriseCount = 99
-      this.contractCount = 99
-      this.performanceCount = 99
-      this.serviceHours = 99
-      this.projectCount = 99
-      this.signedUserCount = 99
-      this.implementationUserCount = 99
+    computed: {
+      ...mapState(["entCode", "communityId"]),
     },
-    // 格式化数字显示
-    formatNumber (num) {
-      if (num >= 10000) {
-        return (num / 10000).toFixed(1) + '万'
+    mounted() {
+      this.init()
+      // 设置定时刷新
+      this.timer = setInterval(() => {
+        this.init()
+      }, 60000) // 每分钟刷新一次
+    },
+    beforeDestroy() {
+      if (this.timer) {
+        clearInterval(this.timer)
       }
-      return num.toString()
-    }
+    },
+    methods: {
+      // 初始化数据
+      async init() {
+        try {
+          const params = {
+            entCode: this.entCode,
+            communityId: this.communityId,
+          }
+          // 这里应该调用实际的API获取数据
+          // const res = await api.getImplementationTotal(params)
+          // 暂时使用模拟数据
+          this.updateData()
+        } catch (error) {
+          console.error("获取实施服务汇总数据失败:", error)
+        }
+      },
+      // 更新数据
+      updateData() {
+        // 这里可以根据实际API返回的数据进行更新
+        // 目前使用固定值展示
+        this.cityCount = 99
+        this.enterpriseCount = 99
+        this.contractCount = 99
+        this.performanceCount = 99
+        this.serviceHours = 99
+        this.projectCount = 99
+        this.signedUserCount = 99
+        this.implementationUserCount = 99
+      },
+      // 格式化数字显示
+      formatNumber(num) {
+        if (num >= 10000) {
+          return (num / 10000).toFixed(1) + "万"
+        }
+        return num.toString()
+      },
+    },
   }
-}
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/css/theme.scss";
-
-.total-container {
-  background: var(--title-bg);
-  border-radius: 4px;
-  padding: 20px;
-  position: relative;
-  overflow: hidden;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #409eff, transparent);
-  }
-  
-  .total-title {
-    font-size: 18px;
-    font-weight: 500;
-    color: var(--title-primary);
-    margin-bottom: 20px;
-    text-align: center;
-  }
-  
-  .total-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(4, 1fr);
-    gap: 16px;
-  }
-  
-  .total-item {
-    background: var(--content-bg);
-    border-radius: 6px;
-    padding: 16px;
-    text-align: center;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(64, 158, 255, 0.1);
-    
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
-      border-color: rgba(64, 158, 255, 0.3);
+  @import "@/assets/css/theme.scss";
+
+  .total-container {
+    background: var(--title-bg);
+    border-radius: 4px;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, #409eff, transparent);
     }
-    
-    .total-label {
-      font-size: 14px;
-      color: #a0b3d6;
-      margin-bottom: 8px;
+
+    .total-title {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--title-primary);
+      margin-bottom: 20px;
     }
-    
-    .total-value {
-      font-size: 28px;
-      font-weight: bold;
-      color: #ffffff;
-      line-height: 1.2;
-      // 添加数字闪烁动画
-      animation: pulse 2s infinite;
+
+    .total-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, 1fr);
+      gap: 16px;
     }
-  }
-}
 
-@keyframes pulse {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.9;
-    transform: scale(1.02);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+    .total-item {
+      background: var(--content-bg);
+      border-radius: 6px;
+      padding: 16px;
+      text-align: center;
+      transition: all 0.3s ease;
+      border: 1px solid rgba(64, 158, 255, 0.1);
 
-// 响应式设计
-@media (max-width: 1200px) {
-  .total-grid {
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+        border-color: rgba(64, 158, 255, 0.3);
+      }
+
+      .total-label {
+        font-size: 14px;
+        color: #a0b3d6;
+        margin-bottom: 8px;
+      }
+
+      .total-value {
+        font-size: 28px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 1.2;
+        // 添加数字闪烁动画
+        animation: pulse 2s infinite;
+      }
+    }
   }
-  
-  .total-value {
-    font-size: 24px !important;
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.9;
+      transform: scale(1.02);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-}
 
-@media (max-width: 768px) {
-  .total-grid {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(4, 1fr);
+  // 响应式设计
+  @media (max-width: 1200px) {
+    .total-grid {
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+    }
+
+    .total-value {
+      font-size: 24px !important;
+    }
   }
-  
-  .total-value {
-    font-size: 20px !important;
+
+  @media (max-width: 768px) {
+    .total-grid {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, 1fr);
+    }
+
+    .total-value {
+      font-size: 20px !important;
+    }
   }
-}
-</style>
+</style>

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

@@ -276,7 +276,7 @@
 
   .market-container {
     background: #0d1629;
-    border-radius: 8px;
+    border-radius: 4px;
     border: 1px solid rgba(64, 158, 255, 0.2);
     height: 100%;
     display: flex;
@@ -284,6 +284,7 @@
   }
 
   .market-title {
+    border-radius: 4px;
     background: var(--title-bg);
     padding: 20px;
     font-size: 18px;