feat(首页): 重构首页布局并添加关于我们模块

- 重构StatisticGroup组件布局，简化列配置
- 添加公司介绍图片和关于我们模块
- 移除未使用的组件和代码
- 更新样式以适应新的布局

klp-ui/src/components/HomeModules/StatisticGroup.vue

@@ -1,8 +1,8 @@
 <template>
   <el-row :gutter="10" class="panel-group">
-    <el-col v-loading="loading" :xs="12" :sm="12" :md="8" :lg="4" :xl="4" class="card-panel-col"
+    <el-col v-loading="loading" :span="12" class="card-panel-col"
       v-for="(item, index) in statsData" :key="index">
-      <div class="card-panel" @click="handleSetLineChartData(item.type)">
+      <div class="card-panel">
         <div class="card-panel-icon-wrapper" :class="item.iconClass">
           <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
         </div>

klp-ui/src/views/index.vue

@@ -1,73 +1,84 @@
 <template>
   <div class="dashboard-editor-container">
+    <img src="http://kelunpuzhonggong.com/upload/img/20250427091033.jpg" alt="">
+    
+    <div class="aboutus">
+      <el-row :gutter="30">
+        <!-- 左栏 -->
+        <el-col :span="12" :xs="24">
+           <div class="aboutus-title">
+            <h2>关于我们</h2>
+            <p>ABOUT US</p>
+          </div>
+          <div class="aboutus-left">
+            <p class="aboutus-desc">
+              嘉祥科伦普重工有限公司是山东省重点工程项目，是济宁市工程之一，也是科伦普产品结构调整重要的工程项目。工程采用了外方技术总负责、关键设备整体引进、点菜集成、国内技术总成、自主创新、单体设备引进等多种建设方案，保证了技术先进和人才的培养，确保工程投产后达产达效。
+            </p>
+            <p class="aboutus-desc">
+              科伦普冷轧重工有限公司是设计年产量150万吨，能向广大用户提供热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等各大类产品。产品覆盖东北、华北、华东、华南等地区。
+            </p>
+          </div>
 
           <statistic-group />
+        </el-col>
 
-    <AllApplications />    
+        <!-- 右栏 -->
+        <el-col :span="12" :xs="24">
+          <img src="http://kelunpuzhonggong.com/upload/img/20251015103934.jpg" alt="">
+          <!-- <div class="aboutus-right">
+            <p class="aboutus-detail">
+              嘉祥科伦普重工有限公司成立于2017年8月，注册资金33100万元，主要经营高铁设备、配件制造与销售，模具制造与销售，新材料技术研发，高性能有色金属及合金材料销售，机械零件、零部件加工与销售，金属材料制造与销售，锌铝镁新材料等。目前公司拥有10余项具有自主知识产权的发明专利技术，综合技术水平达国内领先，2024年公司主导产品国内市场占有率约占85%。2024年总资产5.98亿元，净资产4.49亿元，收入3.95亿元，公司现有员工238人，研究与试验发展人员57人，其中专职研究与试验发展人员52人，外聘专家5人。
+            </p>
+            <p class="aboutus-detail">
+              2024年公司新建科伦普合金新材料研发项目，占地290亩，采用国内先进的镀层核心技术和热处理工艺，专业生产锌铝镁板材和镀铬板材。致力于打造国内工艺链条最完善、产品型号最丰富的涂镀新材料生产企业。全部投产后可实现新增销售收入80亿元，利税4.7亿元，带动就业约500人。项目主要生产的冷轧板、锌铝镁涂层板、镀铬涂层板、镀锡涂层板等产品，涵盖0.08MM-6.0MM区间60多种产品，是国内单个企业产品种类最多的项目。产品因其防锈、耐氧化、耐腐蚀、高电导、高稳定的优秀特性，广泛应用于建筑结构件、汽车制造、轻工家电、食品包装、医疗器械、电子通讯、航空航天领域。
+            </p>
+          </div> -->
+        </el-col>
+      </el-row>
+    </div>
 
+    <!-- <div>
+      <statistic-group />
+    </div> -->
+    
+    <!-- <AllApplications />    
     <el-row :gutter="10">
       <el-col :span="18">
-        <!-- <flow-table /> -->
         <el-empty description="办公模块定制开发中"></el-empty>
       </el-col>
       <el-col :span="6">
         <mini-calendar />
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
 <script>
 import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
-import AllApplications from '@/components/HomeModules/AllApplications.vue'
+// import AllApplications from '@/components/HomeModules/AllApplications.vue'
-import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue'
+// import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
 
 export default { 
   name: 'Index',
   components: {
     // PanelGroup,
     StatisticGroup,
-    AllApplications,
+    // AllApplications,
-    MiniCalendar,
+    // MiniCalendar,
   },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 32px;
+  background-color: #fff;
-  background-color: rgb(240, 242, 245);
   position: relative;
 
+  img {
+    width: 100%;
+    height: auto;
+  }
+
   .chart-wrapper {
     background: #fff;
     padding: 16px 16px 0;
@@ -75,9 +86,111 @@ export default {
   }
 }
 
-@media (max-width:1024px) {
+// 关于我们区域样式
-  .chart-wrapper {
+.aboutus {
-    padding: 8px;
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  // 标题
+  .aboutus-title {
+    margin-bottom: 25px;
+    h2 {
+      font-size: 28px;
+      color: #333;
+      margin: 0;
+    }
+    p {
+      font-size: 14px;
+      color: #999;
+      margin: 5px 0 0 0;
+    }
+  }
+
+  // 左栏
+  .aboutus-left {
+    text-indent: 2em;
+    line-height: 2em;
+    font-size: 14px;
+
+    .aboutus-desc {
+      color: #666;
+      line-height: 1.8;
+      margin-bottom: 18px;
+    }
+
+    // 特色模块
+    .aboutus-features {
+      display: flex;
+      justify-content: space-between;
+      margin: 30px 0;
+
+      .feature-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .feature-icon {
+          width: 42px;
+          height: 42px;
+          border-radius: 50%;
+          background-color: #9370db; // 截图紫色图标背景
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 10px;
+
+          .icon {
+            color: #fff;
+            font-size: 22px;
+          }
+        }
+
+        .feature-text {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
+
+    // 按钮
+    .read-more-btn {
+      border: 1px solid #333;
+      background: transparent;
+      padding: 8px 22px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background 0.3s;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+
+  // 右栏
+  .aboutus-right {
+    .aboutus-detail {
+      font-size: 14px;
+      color: #666;
+      line-height: 1.8;
+      margin-bottom: 18px;
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 1024px) {
+  .dashboard-editor-container {
+    .aboutus {
+      padding: 20px 25px;
+
+      .el-row {
+        .el-col:first-child {
+          margin-bottom: 30px;
+        }
+      }
+    }
   }
 }
 </style>