<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
<title>海尔智能厨电烟台工厂生产线</title>
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
font-family: "Microsoft YaHei", sans-serif; /* 统一微软雅黑 */
|
}
|
html, body {
|
width: 100%;
|
height: 100%;
|
overflow: hidden; /* 禁止滚动，确保全屏显示 */
|
}
|
.top-bar {
|
width: auto;
|
height: 18vh;
|
background-color: #6B21A8;
|
color: white;
|
display: flex;
|
align-items: center;
|
padding: 0 0 0 0vw;
|
/* 确保头部在左上角，不随滚动移动 */
|
position: relative;
|
top: 0;
|
left: 0;
|
}
|
.brand {
|
font-size: 5.5vh; /* 品牌名字体大小按屏幕比例，贴近原图 */
|
font-weight: bold;
|
padding: 0 0 0 0vw;
|
margin-bottom: 10vh;
|
margin-left: 2vh;
|
width: 12vw; /* 固定品牌名区域宽度，避免挤压主标题 */
|
}
|
.main-title {
|
font-size: 5vh; /* 主标题字体大小按屏幕比例，与原图匹配 */
|
font-weight: bold;
|
text-align: center;
|
flex: 1; /* 占据剩余空间，确保居中 */
|
white-space: nowrap; /* 禁止换行，保持一行显示 */
|
overflow: hidden;
|
text-overflow: ellipsis;
|
margin-left: -21vh;
|
}
|
.content {
|
width: 100%;
|
height: 90vh; /* 内容区占剩余高度 */
|
display: flex;
|
padding: 2vh 2vw;
|
}
|
.left-section {
|
flex: 3; /* 左侧占3份（五分之三） */
|
display: flex;
|
flex-direction: column;
|
padding: 0 1vw;
|
}
|
.right-section {
|
flex: 2; /* 右侧占2份（五分之二） */
|
display: flex;
|
flex-direction: column;
|
padding: 0 1vw;
|
}
|
.section-title {
|
height: 6vh; /* 标题高度统一，与原图对齐 */
|
line-height: 6vh; /* 垂直居中 */
|
font-size: 4.5vh; /* 标题字体大小按比例 */
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 5vh;
|
}
|
/* 产线全景图标题（放在图片上方） */
|
.production-title {
|
margin-top: 5%; /* 按需求保留顶部间距 */
|
font-size: 4.5vh;
|
font-weight: bold;
|
text-align: center; /* 标题居中 */
|
margin-bottom: 2vh; /* 标题与图片之间的间距 */
|
position: relative;
|
}
|
/* 产线图片（位于标题下方） */
|
.production-image {
|
width: 103%;
|
height: calc(100% - 8vh);
|
object-fit: contain;
|
margin-top: -10%;
|
}
|
.intro-text {
|
height: calc(100% - 8vh);
|
font-size: 2.5vh;
|
line-height: 2.5;
|
overflow: auto;
|
/* 核心调整：文字范围向右偏移 */
|
margin-left: 15%; /* 相对于父容器右侧区域，左侧留15%空白，文字整体右移 */
|
max-width: 80%; /* 限制最大宽度，避免文字溢出右侧 */
|
}
|
.section-title2 {
|
height: 6vh; /* 标题高度统一，与原图对齐 */
|
line-height: 6vh; /* 垂直居中 */
|
font-size: 4.5vh; /* 标题字体大小按比例 */
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 9vh;
|
margin-left: 15%; /* 相对于父容器右侧区域，左侧留15%空白，文字整体右移 */
|
max-width: 85%; /* 限制最大宽度，避免文字溢出右侧 */
|
}
|
</style>
|
</head>
|
<body>
|
<div class="top-bar">
|
<div class="brand">Casarte</div>
|
<div class="main-title">海尔智能厨电烟台工厂全自动玻璃深加工生产线二期</div>
|
</div>
|
<div class="content">
|
<div class="left-section">
|
<div class="section-title"><P class="production-title" style="margin-top: 3%;">产线全景图</P></div>
|
<img src="../img/二期副屏设备图.png" alt="产线全景图" class="production-image">
|
</div>
|
<div class="right-section">
|
<div class="section-title2"><P style="margin-top: 5%;">二期项目简介</p></div>
|
<div class="intro-text">
|
<p> 海尔智能厨电烟台工厂二期全自动玻璃智能生产线是海尔集团全资投资建设。系国内（厂内）第二条全自动厨电玻璃智能生产线。计划产能150万片/年。</p>
|
<p> 生产线主要由30多台套全自动化设备组成，通过MES生产管理系统调度生产线设备进行全自动生产，将原片玻璃从仓储-自动上线开始，经过冷加工的切-磨-钻-洗等流程加工，再辅以激光内切-高温丝印-钢化-低温二次丝印-覆膜-堆垛下线等工序一次成型，实现全流程智能无人化生产。</p>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
