首页普适优化

klp-ui/src/views/index.vue

@@ -1,51 +1,83 @@
 <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>
+    <div class="home-workspace">
+      <div class="workspace-shell">
+        <el-row :gutter="20" class="workspace-grid workspace-grid--top">
+          <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="6">
+            <div class="workspace-card summary-card">
+              <div class="module-title">
+                <h2>关于我们</h2>
+                <p>ABOUT US</p>
+              </div>
+              <div class="aboutus-left">
+                <p class="aboutus-lead">
+                  嘉祥科伦普重工有限公司是山东省重点工程项目，也是科伦普产品结构调整的重要工程项目，聚焦高铁装备、模具制造和涂镀新材料研发。
+                </p>
+                <div class="aboutus-metrics">
+                  <div class="metric-item">
+                    <span class="metric-label">成立时间</span>
+                    <span class="metric-value">2017年8月</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">注册资金</span>
+                    <span class="metric-value">33100万元</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">设计年产能</span>
+                    <span class="metric-value">150万吨</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">覆盖区域</span>
+                    <span class="metric-value">东北 华北 华东 华南等</span>
+                  </div>
+                </div>
+                <p class="aboutus-desc">
+                  工程采用外方技术总负责、关键设备整体引进、国内技术总成、自主创新等多种建设方案，既保证技术先进性，也兼顾人才培养与项目达产达效。
+                </p>
+                <p class="aboutus-desc">
+                  公司设计年产量150万吨，产品覆盖热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等多个大类。
+                </p>
+              </div>
+            </div>
+          </el-col>
 
-          <quick-access-group />
-        </el-col>
+          <el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="18">
+            <div class="workspace-card detail-card">
+              <div class="module-title">
+                <h2>企业介绍</h2>
+                <p>COMPANY PROFILE</p>
+              </div>
+              <div class="aboutus-right">
+                <div class="detail-section">
+                  <h3>企业概况</h3>
+                  <p class="aboutus-detail">
+                    嘉祥科伦普重工有限公司成立于2017年8月，注册资金33100万元，主要经营高铁设备、配件制造与销售，模具制造与销售，新材料技术研发，高性能有色金属及合金材料销售，机械零件、零部件加工与销售，金属材料制造与销售，锌铝镁新材料等。目前公司拥有10余项具有自主知识产权的发明专利技术，综合技术水平达国内领先，2024年公司主导产品国内市场占有率约占85%。2024年总资产5.98亿元，净资产4.49亿元，收入3.95亿元，公司现有员工238人，研究与试验发展人员57人，其中专职研究与试验发展人员52人，外聘专家5人。
+                  </p>
+                </div>
+                <div class="detail-section">
+                  <h3>项目建设</h3>
+                  <p class="aboutus-detail">
+                    2024年公司新建科伦普合金新材料研发项目，占地290亩，采用国内先进的镀层核心技术和热处理工艺，专业生产锌铝镁板材和镀铬板材。致力于打造国内工艺链条最完善、产品型号最丰富的涂镀新材料生产企业。全部投产后可实现新增销售收入80亿元，利税4.7亿元，带动就业约500人。项目主要生产的冷轧板、锌铝镁涂层板、镀铬涂层板、镀锡涂层板等产品，涵盖0.08MM-6.0MM区间60多种产品，是国内单个企业产品种类最多的项目。产品因其防锈、耐氧化、耐腐蚀、高电导、高稳定的优秀特性，广泛应用于建筑结构件、汽车制造、轻工家电、食品包装、医疗器械、电子通讯、航空航天领域。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
 
-        <!-- 右栏 -->
-        <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 class="workspace-card quick-card quick-card--full">
+        <div class="module-title module-title--inline">
+          <div>
+            <h2>快捷入口</h2>
+            <p>WORKSPACE</p>
+          </div>
+          <span class="module-title-tip">支持按权限自动展示，并可配置本人常用入口</span>
+        </div>
+        <quick-access-group />
+      </div>
     </div>
-
-    <!-- <AllApplications />    
-    <el-row :gutter="10">
-      <el-col :span="18">
-        <el-empty description="办公模块定制开发中"></el-empty>
-      </el-col>
-      <el-col :span="6">
-        <mini-calendar />
-      </el-col>
-    </el-row> -->
   </div>
 </template>
 
@@ -67,7 +99,7 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-editor-container {
-  background-color: #fff;
+  background: #f5f7fa;
   position: relative;
 
   img {
@@ -82,111 +114,270 @@ export default {
   }
 }
 
-// 关于我们区域样式
-.aboutus {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
+.home-workspace {
+  padding: 0 60px 32px;
+}
 
-  // 标题
-  .aboutus-title {
-    margin-bottom: 25px;
-    h2 {
-      font-size: 28px;
-      color: #333;
-      margin: 0;
-    }
-    p {
-      font-size: 14px;
-      color: #999;
-      margin: 5px 0 0 0;
-    }
+.workspace-shell {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  margin-top: -36px;
+  position: relative;
+}
+
+.workspace-grid--top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  margin-bottom: 20px;
+}
+
+.workspace-grid--top > .el-col {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.workspace-card {
+  width: 100%;
+  height: 100%;
+  padding: 28px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.05);
+  border-radius: 18px;
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
+}
+
+.module-title {
+  margin-bottom: 20px;
+
+  h2 {
+    margin: 0;
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: 600;
+    color: #303133;
   }
 
-  // 左栏
-  .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;
-    }
+  p {
+    margin: 6px 0 0;
+    font-size: 13px;
+    line-height: 20px;
+    color: #909399;
+    letter-spacing: 1px;
   }
 }
 
-// 响应式适配
-@media (max-width: 1024px) {
-  .dashboard-editor-container {
-    .aboutus {
-      padding: 20px 25px;
+.module-title--inline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
 
-      .el-row {
-        .el-col:first-child {
-          margin-bottom: 30px;
-        }
-      }
-    }
+.module-title-tip {
+  flex: 0 0 auto;
+  font-size: 13px;
+  line-height: 20px;
+  color: #909399;
+  padding-top: 8px;
+}
+
+.aboutus-left {
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.aboutus-lead {
+  margin: 0;
+  color: #303133;
+  font-size: 15px;
+  line-height: 28px;
+  font-weight: 500;
+}
+
+.aboutus-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin: 18px 0;
+}
+
+.metric-item {
+  min-width: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
+  border: 1px solid #eef2f7;
+}
+
+.metric-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #909399;
+}
+
+.metric-value {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.aboutus-desc,
+.aboutus-detail {
+  margin: 0;
+  color: #606266;
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.aboutus-desc + .aboutus-desc,
+.aboutus-detail + .aboutus-detail {
+  margin-top: 16px;
+}
+
+.aboutus-right {
+  display: block;
+}
+
+.quick-card {
+  margin-top: 20px;
+  padding: 20px 20px 16px;
+}
+
+.quick-card--full {
+  width: 100%;
+}
+
+.quick-card .module-title {
+  margin-bottom: 14px;
+}
+
+.summary-card {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-card {
+  margin-top: 0;
+}
+
+.detail-section + .detail-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #ebeef5;
+}
+
+.detail-section h3 {
+  margin: 0 0 10px;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.detail-section .aboutus-detail {
+  font-size: 15px;
+  line-height: 28px;
+  color: #5f6b7a;
+}
+
+@media (max-width: 1024px) {
+  .home-workspace {
+    padding: 0 36px 28px;
+  }
+
+  .workspace-shell {
+    margin-top: -20px;
+  }
+
+  .workspace-card {
+    padding: 20px;
+  }
+
+  .quick-card {
+    padding: 18px 18px 14px;
+  }
+
+  .workspace-grid--top > .el-col {
+    margin-bottom: 16px;
+  }
+
+  .module-title h2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .aboutus-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .home-workspace {
+    padding: 0 28px 24px;
+  }
+
+  .workspace-shell {
+    margin-top: 12px;
+  }
+
+  .workspace-card {
+    padding: 18px 16px;
+    border-radius: 14px;
+  }
+
+  .quick-card {
+    padding: 16px 14px 12px;
+  }
+
+  .workspace-grid--top {
+    display: block;
+    margin-bottom: 16px;
+  }
+
+  .workspace-grid--top > .el-col {
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  .module-title--inline {
+    display: block;
+  }
+
+  .module-title-tip {
+    display: block;
+    margin-top: 8px;
+    padding-top: 0;
+  }
+
+  .detail-card {
+    margin-top: 0;
+  }
+
+  .detail-section + .detail-section {
+    margin-top: 18px;
+    padding-top: 18px;
+  }
+
+  .quick-card {
+    margin-top: 12px;
+  }
+
+
+  .aboutus-lead {
+    font-size: 14px;
+    line-height: 26px;
+  }
+
+  .detail-section .aboutus-detail {
+    font-size: 14px;
+    line-height: 26px;
   }
 }
 </style>