<template>
|
<div class="home">
|
<!-- 轮播图部分 -->
|
<section class="banner">
|
<el-carousel :interval="4000" type="card" height="350px">
|
<el-carousel-item v-for="(item, index) in carouselItems" :key="index">
|
<div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
|
<div class="carousel-text">
|
<h2>{{ item.title }}</h2>
|
<p>{{ item.description }}</p>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</section>
|
|
<!-- 公司简介部分 -->
|
<section class="company-intro">
|
<div class="container">
|
<h1 class="title">宁波德玛必利恩智能科技有限公司</h1>
|
<div class="intro-content">
|
<p> 成立于2017年，总部位于慈溪，荣获高新技术企业，注册资金3949 万元，公司股东有中信建投资本和鼎捷股份。公司现有员工238人，拥有慈溪和滁州两大制造基地，其中慈溪工厂占地4万余平，年产值6亿元。滁州工厂全称为德玛智能科技（滁州）有限公司，注册资金5000万元，位于安徽省滁州市南谯区乌衣镇文化路265号，工厂2万余平，产值可达4亿元.德玛公司是由汽车新能源三电、储能、动力总成等装配生产线的研发、设计、制造、安装调试及服务于一体的系统集成商。公司在发展过程中，不断采用当今最先进的工业发展技术，产品销往国内外一些知名企业，已成为行业中专业和可值得信赖的设备集成商。</p>
|
</div>
|
</div>
|
</section>
|
|
<!-- 公司数据展示 -->
|
<section class="company-data">
|
<div class="container">
|
<div class="data-grid">
|
<div class="data-item">
|
<h3>Vision</h3>
|
<p>愿景</p>
|
<H4>引领高端智能装备市场成为国内一流的智能装备制造服务商</H4>
|
</div>
|
<div class="data-item">
|
<h3>Mission</h3>
|
<p>使命</p>
|
<H4>用智慧创造高品质装备，解放人类劳动力</H4>
|
</div>
|
<div class="data-item">
|
<h3>Value</h3>
|
<p>价值观</p>
|
<H4>客户至上 以人为本 开拓创新 追求卓越</H4>
|
</div>
|
<div class="data-item">
|
<h3>Management Idea</h3>
|
<p>经营理念</p>
|
<H4>共创 共享 共赢 共融</H4>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<!-- 制造基地信息 -->
|
<section class="manufacturing-bases">
|
<div class="container">
|
<h2 class="section-title">制造基地</h2>
|
<div class="bases-grid">
|
<div class="base-card">
|
<h3>慈溪制造基地</h3>
|
<ul>
|
<li>占地面积：4万余平</li>
|
<li>年产值：6亿元</li>
|
<li>主要业务：汽车新能源三电、储能生产线</li>
|
</ul>
|
</div>
|
<div class="base-card">
|
<h3>滁州制造基地</h3>
|
<ul>
|
<li>注册资金：5000万元</li>
|
<li>占地面积：2万余平</li>
|
<li>年产值：4亿元</li>
|
<li>地址：安徽省滁州市南谯区乌衣镇文化路265号</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<!-- 业务范围 -->
|
<!-- <section class="business-scope">-->
|
<!-- <div class="container">-->
|
<!-- <h2 class="section-title">业务范围</h2>-->
|
<!-- <div class="scope-content">-->
|
<!-- <div class="scope-item">-->
|
<!-- <i class="fas fa-cog"></i>-->
|
<!-- <h4>研发设计</h4>-->
|
<!-- </div>-->
|
<!-- <div class="scope-item">-->
|
<!-- <i class="fas fa-industry"></i>-->
|
<!-- <h4>生产制造</h4>-->
|
<!-- </div>-->
|
<!-- <div class="scope-item">-->
|
<!-- <i class="fas fa-tools"></i>-->
|
<!-- <h4>安装调试</h4>-->
|
<!-- </div>-->
|
<!-- <div class="scope-item">-->
|
<!-- <i class="fas fa-handshake"></i>-->
|
<!-- <h4>售后服务</h4>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </section>-->
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Home',
|
data() {
|
return {
|
carouselItems: [
|
{
|
image: '/assets/images/HOME1.png',
|
title: '智能制造的引领者',
|
description: '专注于汽车新能源三电、储能生产线的研发与制造'
|
},
|
{
|
image: '/images/factory2.jpg',
|
title: '创新科技',
|
description: '持续创新，引领行业发展'
|
},
|
{
|
image: '/images/factory3.jpg',
|
title: '全球服务',
|
description: '为客户提供专业可靠的解决方案'
|
}
|
]
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.home {
|
width: 100%;
|
}
|
|
.container {
|
max-width: 1200px;
|
margin: 0 auto;
|
padding: 0 20px;
|
}
|
|
.company-intro {
|
background: linear-gradient(135deg, #f6f9fc, #e9f2f9);
|
padding: 80px 0;
|
}
|
|
.title {
|
font-size: 36px;
|
background: linear-gradient(45deg, #2c3e50, #3498db);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
margin-bottom: 50px;
|
}
|
|
.intro-content {
|
font-size: 16px;
|
line-height: 1.8;
|
color: #666;
|
text-align: center;
|
}
|
.title {
|
text-align: center;
|
}
|
|
.company-data {
|
padding: 60px 0;
|
background-color: #fff;
|
}
|
|
.data-grid {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 30px;
|
}
|
|
.data-item {
|
background: white;
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
border-radius: 15px;
|
padding: 30px;
|
transition: all 0.3s ease;
|
}
|
|
.data-item:hover {
|
transform: translateY(-10px);
|
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
|
}
|
|
.data-item h3 {
|
font-size: 32px;
|
background: linear-gradient(45deg, #2c3e50, #3498db);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.data-item p {
|
font-size: 16px;
|
color: #666;
|
}
|
|
@media (max-width: 768px) {
|
.data-grid {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
|
.title {
|
font-size: 24px;
|
}
|
}
|
|
@media (max-width: 480px) {
|
.data-grid {
|
grid-template-columns: 1fr;
|
}
|
}
|
|
.section-title {
|
font-size: 28px;
|
color: #2c3e50;
|
text-align: center;
|
margin-bottom: 40px;
|
position: relative;
|
padding-bottom: 15px;
|
}
|
|
.section-title::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 60px;
|
height: 3px;
|
background-color: #3498db;
|
}
|
|
.manufacturing-bases {
|
padding: 60px 0;
|
background-color: #f8f9fa;
|
}
|
|
.bases-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 30px;
|
margin-top: 40px;
|
}
|
|
.base-card {
|
background: white;
|
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
border-radius: 20px;
|
padding: 40px;
|
}
|
|
.base-card h3 {
|
color: #2c3e50;
|
font-size: 24px;
|
position: relative;
|
padding-bottom: 15px;
|
}
|
|
.base-card h3::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 50px;
|
height: 3px;
|
background: linear-gradient(45deg, #3498db, #2ecc71);
|
}
|
|
.base-card ul {
|
list-style: none;
|
padding: 0;
|
}
|
|
.base-card ul li {
|
margin-bottom: 10px;
|
color: #666;
|
position: relative;
|
padding-left: 20px;
|
}
|
|
.base-card ul li::before {
|
content: '•';
|
position: absolute;
|
left: 0;
|
color: #3498db;
|
}
|
|
.business-scope {
|
padding: 60px 0;
|
background-color: #fff;
|
}
|
|
.scope-content {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 30px;
|
margin-top: 40px;
|
}
|
|
.scope-item {
|
background: white;
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
border-radius: 15px;
|
overflow: hidden;
|
}
|
|
.scope-item:hover {
|
background: linear-gradient(135deg, #3498db, #2ecc71);
|
}
|
|
.scope-item i {
|
font-size: 46px;
|
background: linear-gradient(45deg, #3498db, #2ecc71);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
transition: all 0.3s ease;
|
}
|
|
.scope-item h4 {
|
font-size: 18px;
|
margin: 0;
|
}
|
|
@media (max-width: 768px) {
|
.bases-grid,
|
.scope-content {
|
grid-template-columns: 1fr;
|
}
|
}
|
|
.banner {
|
margin-bottom: 40px;
|
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
|
padding: 40px 0;
|
}
|
|
.carousel-content {
|
height: 100%;
|
background-size: cover;
|
background-position: center;
|
border-radius: 12px;
|
position: relative;
|
}
|
|
.carousel-text {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
padding: 30px;
|
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
color: white;
|
border-bottom-left-radius: 12px;
|
border-bottom-right-radius: 12px;
|
}
|
|
.carousel-text h2 {
|
font-size: 32px;
|
margin-bottom: 10px;
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
}
|
|
.carousel-text p {
|
font-size: 18px;
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
}
|
|
@media (max-width: 768px) {
|
.banner {
|
padding: 20px 0;
|
}
|
|
.carousel-text h2 {
|
font-size: 24px;
|
}
|
|
.carousel-text p {
|
font-size: 16px;
|
}
|
}
|
|
@keyframes fadeInUp {
|
from {
|
opacity: 0;
|
transform: translateY(20px);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
.data-item, .base-card, .scope-item {
|
animation: fadeInUp 0.6s ease-out forwards;
|
}
|
</style>
|
