zhuo/Doomsday_Survival_Manual
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成任务16：编写 04_长期发展/环境保护.md

Browse Source
This commit is contained in:
root
2026-05-23 16:51:48 +00:00
parent 33ea0114ea
commit c8cd92ba7c
734 changed files with 188060 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
out_app_html/bag/index.html Normal file
View File

@@ -0,0 +1,449 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>末日求生 - 背包</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
background: linear-gradient(135deg, #2d1b0e 0%, #4a2c18 50%, #6b390f 100%);
min-height: 100vh;
color: #fff;
}
/* 顶部导航栏 */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 86, 0, 0.3);
backdrop-filter: blur(10px);
border-bottom: 2px solid #ff8c3a;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
}
.nav-logo {
font-size: 20px;
font-weight: bold;
color: #ffcc99;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
/* 内容区域 */
.content-container {
padding-top: 70px;
padding-bottom: 30px;
}
/* 物资统计卡片 */
.stats-card {
background: rgba(255, 86, 0, 0.1);
border: 3px solid #ff8c3a;
border-radius: 15px;
margin: 15px;
padding: 20px;
box-shadow:
0 4px 20px rgba(255, 94, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.stats-title {
font-size: 18px;
font-weight: bold;
color: #ffcc99;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-item {
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 107, 0, 0.3);
border-radius: 10px;
padding: 12px;
}
.stat-label {
font-size: 12px;
color: #ff8c3a;
margin-bottom: 5px;
}
.stat-value {
font-size: 20px;
font-weight: bold;
color: #ffcc99;
}
/* 物资表格 */
.inventory-card {
background: rgba(255, 86, 0, 0.1);
border: 3px solid #ff8c3a;
border-radius: 15px;
margin: 15px;
overflow: hidden;
box-shadow:
0 4px 20px rgba(255, 94, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.inventory-header {
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr;
padding: 15px 20px;
background: rgba(255, 107, 0, 0.2);
border-bottom: 2px solid rgba(255, 107, 0, 0.3);
}
.inventory-header-item {
font-weight: bold;
color: #ffcc99;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
.inventory-item {
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr;
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 107, 0, 0.2);
transition: all 0.3s ease;
}
.inventory-item:hover {
background: rgba(255, 107, 0, 0.1);
}
.inventory-item.expiring {
background: rgba(255, 50, 0, 0.2);
border-left: 4px solid #ff3a00;
}
.inventory-item.expired {
background: rgba(255, 0, 0, 0.3);
border-left: 4px solid #ff0000;
}
.item-name {
color: #ffcc99;
display: flex;
align-items: center;
gap: 10px;
}
.item-icon {
width: 30px;
height: 30px;
background: rgba(255, 107, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.item-quantity,
.item-expire,
.item-status {
color: #ffcc99;
display: flex;
align-items: center;
justify-content: center;
}
.status-normal {
color: #5aff5a;
}
.status-warning {
color: #ffc107;
}
.status-danger {
color: #ff4d4d;
}
/* 过期提醒 */
.alert-card {
background: rgba(255, 50, 0, 0.2);
border: 3px solid #ff3a00;
border-radius: 15px;
margin: 15px;
padding: 20px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
.alert-title {
font-size: 18px;
font-weight: bold;
color: #ffcc99;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.alert-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
margin-bottom: 8px;
}
/* 底部标签页 */
.bottom-tabs {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: rgba(255, 86, 0, 0.3);
backdrop-filter: blur(10px);
border-top: 2px solid #ff8c3a;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
}
.tab-item {
padding: 15px 20px;
background: rgba(255, 86, 0, 0.3);
border: 2px solid #ff8c3a;
border-radius: 25px;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-item.active {
background: linear-gradient(180deg, #ff8c3a 0%, #ff5e00 100%);
box-shadow:
0 4px 15px rgba(255, 94, 0, 0.6),
inset 0 2px 5px rgba(255, 255, 255, 0.3);
}
.tab-item:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(255, 94, 0, 0.8),
inset 0 2px 5px rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="top-nav">
<div class="nav-logo">🎒末日求生背包</div>
</nav>
<!-- 内容区域 -->
<div class="content-container">
<!-- 物资统计 -->
<div class="stats-card">
<div class="stats-title">物资统计</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-label">总物资种类</div>
<div class="stat-value">18</div>
</div>
<div class="stat-item">
<div class="stat-label">总库存数量</div>
<div class="stat-value">145</div>
</div>
<div class="stat-item">
<div class="stat-label">即将过期</div>
<div class="stat-value">5</div>
</div>
<div class="stat-item">
<div class="stat-label">已过期</div>
<div class="stat-value">2</div>
</div>
</div>
</div>
<!-- 过期提醒 -->
<div class="alert-card">
<div class="alert-title">⏰ 过期提醒</div>
<div class="alert-item">
<span>急救医疗包</span>
<span class="status-danger">已过期3天</span>
</div>
<div class="alert-item">
<span>罐头食品</span>
<span class="status-warning">还剩2天过期</span>
</div>
<div class="alert-item">
<span>瓶装水</span>
<span class="status-warning">还剩3天过期</span>
</div>
</div>
<!-- 物资清单 -->
<div class="inventory-card">
<div class="inventory-header">
<div class="inventory-header-item">物资名称</div>
<div class="inventory-header-item">数量</div>
<div class="inventory-header-item">过期时间</div>
<div class="inventory-header-item">状态</div>
</div>
<div class="inventory-item">
<div class="item-name">
<div class="item-icon">🍞</div>
压缩饼干
</div>
<div class="item-quantity">12</div>
<div class="item-expire">2026-04-15</div>
<div class="item-status status-normal">安全</div>
</div>
<div class="inventory-item expiring">
<div class="item-name">
<div class="item-icon">🥫</div>
罐头食品
</div>
<div class="item-quantity">8</div>
<div class="item-expire">2026-03-27</div>
<div class="item-status status-warning">即将过期</div>
</div>
<div class="inventory-item expired">
<div class="item-name">
<div class="item-icon">🏥</div>
急救医疗包
</div>
<div class="item-quantity">1</div>
<div class="item-expire">2026-03-22</div>
<div class="item-status status-danger">已过期</div>
</div>
<div class="inventory-item">
<div class="item-name">
<div class="item-icon">💧</div>
瓶装水
</div>
<div class="item-quantity">24</div>
<div class="item-expire">2026-03-28</div>
<div class="item-status status-warning">即将过期</div>
</div>
<div class="inventory-item">
<div class="item-name">
<div class="item-icon">🔋</div>
电池
</div>
<div class="item-quantity">36</div>
<div class="item-expire">2026-06-10</div>
<div class="item-status status-normal">安全</div>
</div>
<div class="inventory-item">
<div class="item-name">
<div class="item-icon">🕯️</div>
蜡烛
</div>
<div class="item-quantity">18</div>
<div class="item-expire">2026-08-20</div>
<div class="item-status status-normal">安全</div>
</div>
<div class="inventory-item">
<div class="item-name">
<div class="item-icon">🧤</div>
医用手套
</div>
<div class="item-quantity">50</div>
<div class="item-expire">2026-07-05</div>
<div class="item-status status-normal">安全</div>
</div>
<div class="inventory-item">
<div class="item-name">
<div class="item-icon">📻</div>
收音机
</div>
<div class="item-quantity">2</div>
<div class="item-expire">2026-12-01</div>
<div class="item-status status-normal">安全</div>
</div>
</div>
</div>
<!-- 底部标签页 -->
<div class="bottom-tabs">
<div class="tab-item">首页</div>
<div class="tab-item active">背包</div>
<div class="tab-item">我的</div>
</div>
<script>
$(document).ready(function() {
// 标签页切换效果
$('.tab-item').on('click', function() {
$('.tab-item').removeClass('active');
$(this).addClass('active');
const tabName = $(this).text();
if (tabName === '首页') {
window.location.href = '../home/index.html';
} else if (tabName === '背包') {
// 已经在当前页面
} else if (tabName === '我的') {
window.location.href = '../profile/index.html';
}
});
// 模拟倒计时更新
function updateExpiryCountdown() {
const now = new Date();
const items = $('.inventory-item');
items.each(function() {
const expireDate = new Date($(this).find('.item-expire').text());
const diffDays = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24));
if (diffDays < 0) {
$(this).addClass('expired').removeClass('expiring');
$(this).find('.item-status').text('已过期' + Math.abs(diffDays) + '天');
} else if (diffDays <= 3) {
$(this).addClass('expiring').removeClass('expired');
$(this).find('.item-status').text('还剩' + diffDays + '天');
}
});
}
updateExpiryCountdown();
// 每小时更新一次倒计时
setInterval(updateExpiryCountdown, 3600000);
});
</script>
</body>
</html>