384 lines
9.3 KiB
Vue
384 lines
9.3 KiB
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>
|