klp-oa/klp-ui/src/views/index.vue

<template>
  <div class="dashboard-editor-container">
    <img src="http://kelunpuzhonggong.com/upload/img/20250427091033.jpg" alt="">
    <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>

          <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>

      <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>
  </div>
</template>

<script>
import QuickAccessGroup from '@/components/HomeModules/QuickAccessGroup.vue'
// import AllApplications from '@/components/HomeModules/AllApplications.vue'
// import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue'

export default { 
  name: 'Index',
  components: {
    // PanelGroup,
    QuickAccessGroup,
    // AllApplications,
    // MiniCalendar,
  },
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background: #f5f7fa;
  position: relative;

  img {
    width: 100%;
    height: auto;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.home-workspace {
  padding: 0 60px 32px;
}

.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;
  }

  p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: #909399;
    letter-spacing: 1px;
  }
}

.module-title--inline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.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>