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

<template>
  <div class="dashboard-editor-container">
    <img src="http://xgyzhonggong.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">
              嘉祥鑫广宇有限公司成立于2019 年 03 月 12 日，注册地：山东省济宁市嘉祥县经济开发区，为有限责任公司，主营钢材、金属材料、钢结构、金属制品加工销售，和你研究的琛德实业同属嘉祥县钢铁加工产业链配套企业，服务鲁西南基建、机械制造、钢结构工程领域，是嘉祥县本地重点规上工业配套企业。
            </p>
            <p class="aboutus-desc">
              一般项目：金属材料销售；高性能有色金属及合金材料销售；钢压延加工；金属结构制造；金属结构销售；机械零件、零部件加工；机械零件、零部件销售；生产性废旧金属回收；普通货物仓储服务；装卸搬运；技术服务、技术开发、技术咨询、技术交流。
            </p>
          </div>

          <statistic-group />
        </el-col>

        <!-- 右栏 -->
        <el-col :span="12" :xs="24">
          <img src="http://xgyzhonggong.com/upload/img/20251015103934.jpg" alt="">
          <!-- <div class="aboutus-right">
            <p class="aboutus-detail">
              嘉祥鑫广宇有限公司成立于 2019 年 3 月 12 日，坐落于山东省济宁市嘉祥县经济开发区，为自然人控股的规模以上工业企业，厂区占地约 38 亩，配套钢结构加工车间、钢材仓储区等生产设施。公司主要从事金属材料、高性能合金材料、钢结构件及机械零部件的加工与销售，同时开展生产性废旧金属回收、普通货物仓储、货物进出口等业务，是嘉祥县本地钢铁加工产业链重要配套企业。
            </p>
            <p class="aboutus-detail">
              公司聚焦钢材加工及金属构件领域技术研发与产能升级，先后实施钢材及金属结构件加工技改、高性能合金材料扩产等县级工业项目，累计拥有钢结构加工、零部件配套相关实用新型专利 8 项。企业合规经营水平良好，获评 2023—2024 年度纳税信用 A 级纳税人、安全生产标准化三级企业，纳入嘉祥县工业企业 “亩产效益” 综合评价体系，为区域机械制造、基建工程领域提供稳定的金属配套服务。
            </p>
          </div> -->
        </el-col>
      </el-row>
    </div>

    <!-- <div>
      <statistic-group />
    </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>

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

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

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

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

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

// 关于我们区域样式
.aboutus {
  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>