Billion-Mes.git

hdy

4 天以前 51eb318f6df9ebc7d1ff47522e33b2ee7cea1ba8

提交 \| 用户 \| 时间
a6316e	1	<template>
1e2ff5	2	<div class="home">
H	3	<!-- 轮播图部分 -->
	4	<section class="banner">
	5	<el-carousel :interval="4000" type="card" height="350px">
	6	<el-carousel-item v-for="(item, index) in carouselItems" :key="index">
	7	<div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
	8	<div class="carousel-text">
	9	<h2>{{ item.title }}</h2>
	10	<p>{{ item.description }}</p>
	11	</div>
	12	</div>
	13	</el-carousel-item>
	14	</el-carousel>
	15	</section>
a6316e	16
1e2ff5	17	<!-- 公司简介部分 -->
H	18	<section class="company-intro">
	19	<div class="container">
	20	<h1 class="title">宁波德玛必利恩智能科技有限公司</h1>
	21	<div class="intro-content">
	22	<p> 成立于2017年，总部位于慈溪，荣获高新技术企业，注册资金3949 万元，公司股东有中信建投资本和鼎捷股份。公司现有员工238人，拥有慈溪和滁州两大制造基地，其中慈溪工厂占地4万余平，年产值6亿元。滁州工厂全称为德玛智能科技（滁州）有限公司，注册资金5000万元，位于安徽省滁州市南谯区乌衣镇文化路265号，工厂2万余平，产值可达4亿元.德玛公司是由汽车新能源三电、储能、动力总成等装配生产线的研发、设计、制造、安装调试及服务于一体的系统集成商。公司在发展过程中，不断采用当今最先进的工业发展技术，产品销往国内外一些知名企业，已成为行业中专业和可值得信赖的设备集成商。</p>
	23	</div>
	24	</div>
	25	</section>
a6316e	26
1e2ff5	27	<!-- 公司数据展示 -->
H	28	<section class="company-data">
	29	<div class="container">
	30	<div class="data-grid">
	31	<div class="data-item">
	32	<h3>Vision</h3>
	33	<p>愿景</p>
	34	<H4>引领高端智能装备市场成为国内一流的智能装备制造服务商</H4>
	35	</div>
	36	<div class="data-item">
	37	<h3>Mission</h3>
	38	<p>使命</p>
	39	<H4>用智慧创造高品质装备，解放人类劳动力</H4>
	40	</div>
	41	<div class="data-item">
	42	<h3>Value</h3>
	43	<p>价值观</p>
	44	<H4>客户至上以人为本开拓创新追求卓越</H4>
	45	</div>
	46	<div class="data-item">
	47	<h3>Management Idea</h3>
	48	<p>经营理念</p>
	49	<H4>共创共享共赢共融</H4>
	50	</div>
	51	</div>
	52	</div>
	53	</section>
	54
	55	<!-- 制造基地信息 -->
	56	<section class="manufacturing-bases">
	57	<div class="container">
	58	<h2 class="section-title">制造基地</h2>
	59	<div class="bases-grid">
	60	<div class="base-card">
	61	<h3>慈溪制造基地</h3>
a6316e	62	<ul>
1e2ff5	63	<li>占地面积：4万余平</li>
H	64	<li>年产值：6亿元</li>
	65	<li>主要业务：汽车新能源三电、储能生产线</li>
a6316e	66	</ul>
1e2ff5	67	</div>
H	68	<div class="base-card">
	69	<h3>滁州制造基地</h3>
a6316e	70	<ul>
1e2ff5	71	<li>注册资金：5000万元</li>
H	72	<li>占地面积：2万余平</li>
	73	<li>年产值：4亿元</li>
	74	<li>地址：安徽省滁州市南谯区乌衣镇文化路265号</li>
a6316e	75	</ul>
A	76	</div>
1e2ff5	77	</div>
H	78	</div>
	79	</section>
a6316e	80
1e2ff5	81	<!-- 业务范围 -->
H	82	<!-- <section class="business-scope">-->
	83	<!-- <div class="container">-->
	84	<!-- <h2 class="section-title">业务范围</h2>-->
	85	<!-- <div class="scope-content">-->
	86	<!-- <div class="scope-item">-->
	87	<!-- <i class="fas fa-cog"></i>-->
	88	<!-- <h4>研发设计</h4>-->
	89	<!-- </div>-->
	90	<!-- <div class="scope-item">-->
	91	<!-- <i class="fas fa-industry"></i>-->
	92	<!-- <h4>生产制造</h4>-->
	93	<!-- </div>-->
	94	<!-- <div class="scope-item">-->
	95	<!-- <i class="fas fa-tools"></i>-->
	96	<!-- <h4>安装调试</h4>-->
	97	<!-- </div>-->
	98	<!-- <div class="scope-item">-->
	99	<!-- <i class="fas fa-handshake"></i>-->
	100	<!-- <h4>售后服务</h4>-->
	101	<!-- </div>-->
	102	<!-- </div>-->
	103	<!-- </div>-->
	104	<!-- </section>-->
a6316e	105	</div>
A	106	</template>
	107
	108	<script>
	109	export default {
1e2ff5	110	name: 'Home',
a6316e	111	data() {
A	112	return {
1e2ff5	113	carouselItems: [
H	114	{
	115	image: '/assets/images/HOME1.png',
	116	title: '智能制造的引领者',
	117	description: '专注于汽车新能源三电、储能生产线的研发与制造'
	118	},
	119	{
	120	image: '/images/factory2.jpg',
	121	title: '创新科技',
	122	description: '持续创新，引领行业发展'
	123	},
	124	{
	125	image: '/images/factory3.jpg',
	126	title: '全球服务',
	127	description: '为客户提供专业可靠的解决方案'
	128	}
	129	]
a6316e	130	}
A	131	}
	132	}
1e2ff5	133	</script>
a6316e	134
1e2ff5	135	<style scoped>
H	136	.home {
	137	width: 100%;
	138	}
	139
	140	.container {
	141	max-width: 1200px;
	142	margin: 0 auto;
	143	padding: 0 20px;
	144	}
	145
	146	.company-intro {
	147	background: linear-gradient(135deg, #f6f9fc, #e9f2f9);
	148	padding: 80px 0;
	149	}
	150
	151	.title {
	152	font-size: 36px;
	153	background: linear-gradient(45deg, #2c3e50, #3498db);
	154	-webkit-background-clip: text;
	155	-webkit-text-fill-color: transparent;
	156	margin-bottom: 50px;
	157	}
	158
	159	.intro-content {
	160	font-size: 16px;
	161	line-height: 1.8;
	162	color: #666;
	163	text-align: center;
	164	}
	165	.title {
	166	text-align: center;
	167	}
	168
	169	.company-data {
	170	padding: 60px 0;
	171	background-color: #fff;
	172	}
	173
	174	.data-grid {
	175	display: grid;
	176	grid-template-columns: repeat(4, 1fr);
	177	gap: 30px;
	178	}
	179
	180	.data-item {
	181	background: white;
	182	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	183	border-radius: 15px;
	184	padding: 30px;
	185	transition: all 0.3s ease;
	186	}
	187
	188	.data-item:hover {
	189	transform: translateY(-10px);
	190	box-shadow: 0 15px 30px rgba(0,0,0,0.15);
	191	}
	192
	193	.data-item h3 {
	194	font-size: 32px;
	195	background: linear-gradient(45deg, #2c3e50, #3498db);
	196	-webkit-background-clip: text;
	197	-webkit-text-fill-color: transparent;
	198	}
	199
	200	.data-item p {
	201	font-size: 16px;
	202	color: #666;
	203	}
	204
	205	@media (max-width: 768px) {
	206	.data-grid {
	207	grid-template-columns: repeat(2, 1fr);
	208	}
	209
	210	.title {
	211	font-size: 24px;
	212	}
	213	}
	214
	215	@media (max-width: 480px) {
	216	.data-grid {
	217	grid-template-columns: 1fr;
	218	}
	219	}
	220
	221	.section-title {
	222	font-size: 28px;
	223	color: #2c3e50;
	224	text-align: center;
	225	margin-bottom: 40px;
	226	position: relative;
	227	padding-bottom: 15px;
	228	}
	229
	230	.section-title::after {
	231	content: '';
	232	position: absolute;
	233	bottom: 0;
	234	left: 50%;
	235	transform: translateX(-50%);
	236	width: 60px;
	237	height: 3px;
	238	background-color: #3498db;
	239	}
	240
	241	.manufacturing-bases {
	242	padding: 60px 0;
	243	background-color: #f8f9fa;
	244	}
	245
	246	.bases-grid {
	247	display: grid;
	248	grid-template-columns: repeat(2, 1fr);
	249	gap: 30px;
	250	margin-top: 40px;
	251	}
	252
	253	.base-card {
	254	background: white;
	255	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	256	border-radius: 20px;
	257	padding: 40px;
	258	}
	259
	260	.base-card h3 {
	261	color: #2c3e50;
	262	font-size: 24px;
	263	position: relative;
	264	padding-bottom: 15px;
	265	}
	266
	267	.base-card h3::after {
	268	content: '';
	269	position: absolute;
	270	bottom: 0;
	271	left: 0;
	272	width: 50px;
	273	height: 3px;
	274	background: linear-gradient(45deg, #3498db, #2ecc71);
	275	}
	276
	277	.base-card ul {
	278	list-style: none;
	279	padding: 0;
	280	}
	281
	282	.base-card ul li {
	283	margin-bottom: 10px;
	284	color: #666;
	285	position: relative;
	286	padding-left: 20px;
	287	}
	288
	289	.base-card ul li::before {
	290	content: '•';
	291	position: absolute;
	292	left: 0;
	293	color: #3498db;
	294	}
	295
	296	.business-scope {
	297	padding: 60px 0;
	298	background-color: #fff;
	299	}
	300
	301	.scope-content {
	302	display: grid;
	303	grid-template-columns: repeat(4, 1fr);
	304	gap: 30px;
	305	margin-top: 40px;
	306	}
	307
	308	.scope-item {
	309	background: white;
	310	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	311	border-radius: 15px;
	312	overflow: hidden;
	313	}
	314
	315	.scope-item:hover {
	316	background: linear-gradient(135deg, #3498db, #2ecc71);
	317	}
	318
	319	.scope-item i {
	320	font-size: 46px;
	321	background: linear-gradient(45deg, #3498db, #2ecc71);
	322	-webkit-background-clip: text;
	323	-webkit-text-fill-color: transparent;
	324	transition: all 0.3s ease;
	325	}
	326
	327	.scope-item h4 {
	328	font-size: 18px;
	329	margin: 0;
	330	}
	331
	332	@media (max-width: 768px) {
	333	.bases-grid,
	334	.scope-content {
	335	grid-template-columns: 1fr;
	336	}
	337	}
	338
	339	.banner {
	340	margin-bottom: 40px;
	341	background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
	342	padding: 40px 0;
	343	}
	344
	345	.carousel-content {
	346	height: 100%;
	347	background-size: cover;
	348	background-position: center;
	349	border-radius: 12px;
	350	position: relative;
	351	}
	352
	353	.carousel-text {
	354	position: absolute;
	355	bottom: 0;
	356	left: 0;
	357	right: 0;
	358	padding: 30px;
	359	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	360	color: white;
	361	border-bottom-left-radius: 12px;
	362	border-bottom-right-radius: 12px;
	363	}
	364
	365	.carousel-text h2 {
	366	font-size: 32px;
	367	margin-bottom: 10px;
	368	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	369	}
	370
	371	.carousel-text p {
	372	font-size: 18px;
	373	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	374	}
	375
	376	@media (max-width: 768px) {
	377	.banner {
	378	padding: 20px 0;
	379	}
	380
	381	.carousel-text h2 {
	382	font-size: 24px;
	383	}
	384
	385	.carousel-text p {
	386	font-size: 16px;
	387	}
	388	}
	389
	390	@keyframes fadeInUp {
	391	from {
	392	opacity: 0;
	393	transform: translateY(20px);
	394	}
	395	to {
	396	opacity: 1;
	397	transform: translateY(0);
	398	}
	399	}
	400
	401	.data-item, .base-card, .scope-item {
	402	animation: fadeInUp 0.6s ease-out forwards;
	403	}
	404	</style>