368 lines
9.7 KiB
HTML
368 lines
9.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>物流管理系统 - 首页</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 头部样式 */
|
|
header {
|
|
background-color: #34495e;
|
|
color: white;
|
|
padding: 15px 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
border-radius: 0 0 10px 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 轮播图样式 */
|
|
.carousel {
|
|
position: relative;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.carousel-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 1s ease-in-out;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.carousel-item.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.carousel-item:nth-child(1) {
|
|
background:
|
|
linear-gradient(rgba(52, 73, 94, 0.7), rgba(52, 73, 94, 0.7)),
|
|
url('https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8d2FyZWhvdXNlfHx8fHx8MTY5OTQwODQ0MQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080');
|
|
}
|
|
|
|
.carousel-item:nth-child(2) {
|
|
background:
|
|
linear-gradient(rgba(52, 73, 94, 0.7), rgba(52, 73, 94, 0.7)),
|
|
url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dHJ1Y2t8fHx8fHwxNjk5NDA4NDYy&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080');
|
|
}
|
|
|
|
.carousel-item:nth-child(3) {
|
|
background:
|
|
linear-gradient(rgba(52, 73, 94, 0.7), rgba(52, 73, 94, 0.7)),
|
|
url('https://images.unsplash.com/photo-1518458028785-8fbcd101ebb9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y29udGFpbmVyfHx8fHx8MTY5OTQwODQ3Mg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080');
|
|
}
|
|
|
|
.carousel-controls {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
}
|
|
|
|
.carousel-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carousel-indicator.active {
|
|
background-color: white;
|
|
}
|
|
|
|
/* 操作模块样式 */
|
|
.operations {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
color: #34495e;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #e0e6ed;
|
|
}
|
|
|
|
.operation-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.operation-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.operation-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
padding: 25px;
|
|
transition:
|
|
transform 0.3s,
|
|
box-shadow 0.3s;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.operation-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.operation-icon {
|
|
width: 70px;
|
|
height: 70px;
|
|
background-color: #eef5ff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.operation-icon i {
|
|
font-size: 32px;
|
|
color: #34495e;
|
|
}
|
|
|
|
.operation-title {
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
color: #34495e;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.operation-desc {
|
|
color: #7f8c8d;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.btn {
|
|
background-color: #34495e;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 25px;
|
|
border-radius: 25px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
width: 80%;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #2c3e50;
|
|
}
|
|
|
|
.check-operation {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 底部样式 */
|
|
footer {
|
|
margin-top: 40px;
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
font-size: 0.9rem;
|
|
padding: 20px;
|
|
border-top: 1px solid #e0e6ed;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.operation-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.carousel {
|
|
height: 200px;
|
|
}
|
|
|
|
.carousel-item {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header-content">
|
|
<div class="logo">物流管理系统</div>
|
|
<div class="user-info">
|
|
<img src="https://ui-avatars.com/api/?name=管理员&background=random" alt="用户头像" />
|
|
<span>管理员</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- 轮播图 -->
|
|
<div class="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<div>高效物流管理，提升运营效率</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div>智能仓储解决方案</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div>实时追踪，全程可视</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-controls">
|
|
<div class="carousel-indicator active"></div>
|
|
<div class="carousel-indicator"></div>
|
|
<div class="carousel-indicator"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作模块 -->
|
|
<div class="operations">
|
|
<h2 class="section-title">核心操作</h2>
|
|
<div class="operation-cards">
|
|
<!-- 验箱单独一行 -->
|
|
<div class="operation-card check-operation">
|
|
<div class="operation-icon">
|
|
<i>📦</i>
|
|
</div>
|
|
<h3 class="operation-title">验箱</h3>
|
|
<p class="operation-desc">对集装箱进行质量检查、状态评估和记录，确保运输安全</p>
|
|
<button class="btn">开始验箱</button>
|
|
</div>
|
|
|
|
<!-- 进场和出场在同一行 -->
|
|
<div class="operation-row">
|
|
<div class="operation-card">
|
|
<div class="operation-icon">
|
|
<i>⬇️</i>
|
|
</div>
|
|
<h3 class="operation-title">进场</h3>
|
|
<p class="operation-desc">记录集装箱进入仓库或场站的信息，包括时间、位置和状态</p>
|
|
<button class="btn">进场登记</button>
|
|
</div>
|
|
|
|
<div class="operation-card">
|
|
<div class="operation-icon">
|
|
<i>⬆️</i>
|
|
</div>
|
|
<h3 class="operation-title">出场</h3>
|
|
<p class="operation-desc">记录集装箱离开仓库或场站的信息，生成出库单据</p>
|
|
<button class="btn">出场登记</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 物流管理系统 | 版本 2.1.0</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// 轮播图功能
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const items = document.querySelectorAll('.carousel-item')
|
|
const indicators = document.querySelectorAll('.carousel-indicator')
|
|
let currentIndex = 0
|
|
|
|
function showSlide(index) {
|
|
// 隐藏所有幻灯片
|
|
items.forEach((item) => item.classList.remove('active'))
|
|
indicators.forEach((indicator) => indicator.classList.remove('active'))
|
|
|
|
// 显示当前幻灯片
|
|
items[index].classList.add('active')
|
|
indicators[index].classList.add('active')
|
|
|
|
currentIndex = index
|
|
}
|
|
|
|
// 添加指示器点击事件
|
|
indicators.forEach((indicator, index) => {
|
|
indicator.addEventListener('click', () => {
|
|
showSlide(index)
|
|
})
|
|
})
|
|
|
|
// 自动轮播
|
|
setInterval(() => {
|
|
let nextIndex = (currentIndex + 1) % items.length
|
|
showSlide(nextIndex)
|
|
}, 5000)
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|