180 lines
8.5 KiB
HTML
180 lines
8.5 KiB
HTML
<!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>
|
|
<meta name="theme-color" content="#0f1419">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="stylesheet" href="移动端控件样式示例.css">
|
|
</head>
|
|
<body class="safe-area">
|
|
<div class="app-container">
|
|
<div class="status-bar">
|
|
<div class="network-status">
|
|
<div class="connection-dot"></div>
|
|
<span>在线</span>
|
|
</div>
|
|
<div class="app-version">v1.0.0</div>
|
|
</div>
|
|
|
|
<main class="main-content">
|
|
<h1 class="page-title">移动端控件样式示例</h1>
|
|
|
|
<div class="tab-container">
|
|
<div class="tab-header">
|
|
<div class="tab-item active" data-tab="tab1">卡片控件</div>
|
|
<div class="tab-item" data-tab="tab2">列表控件</div>
|
|
<div class="tab-item" data-tab="tab3">网格控件</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="tab1">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">基础卡片</h3>
|
|
<span class="card-subtitle">副标题</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>这是卡片内容区域，可以放置各种信息。卡片控件是移动端应用中最常用的容器之一。</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn btn-secondary">取消</button>
|
|
<button class="btn btn-primary">确定</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-card">
|
|
<div class="stats-title">统计项</div>
|
|
<div class="stats-value">100</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="tab2">
|
|
<div class="list-container">
|
|
<div class="list-item">
|
|
<div>
|
|
<div class="list-item-title">列表项1</div>
|
|
<div class="list-item-subtitle">描述信息</div>
|
|
</div>
|
|
<div class="list-item-value">值1</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>
|
|
<div class="list-item-title">列表项2</div>
|
|
<div class="list-item-subtitle">描述信息</div>
|
|
</div>
|
|
<div class="list-item-value">值2</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div>
|
|
<div class="list-item-title">列表项3</div>
|
|
<div class="list-item-subtitle">描述信息</div>
|
|
</div>
|
|
<div class="list-item-value">值3</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="history-list">
|
|
<div class="history-item">玩家攻击 A3: 命中机翼</div>
|
|
<div class="history-item hit">敌方攻击 B5: 命中机身</div>
|
|
<div class="history-item miss">玩家攻击 C7: 未命中</div>
|
|
<div class="history-item destroy">敌方攻击 D2: 击毁敌机！</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="tab3">
|
|
<div class="game-grid">
|
|
<div class="grid-container">
|
|
<!-- 生成10x10网格 -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const gridContainer = document.querySelector('#tab3 .grid-container');
|
|
for (let i = 0; i < 100; i++) {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'grid-cell';
|
|
cell.textContent = String.fromCharCode(65 + Math.floor(i / 10)) + (i % 10 + 1);
|
|
|
|
// 添加一些示例状态
|
|
if (i === 22) cell.classList.add('hit');
|
|
if (i === 45) cell.classList.add('miss');
|
|
if (i === 67) cell.classList.add('hit');
|
|
|
|
gridContainer.appendChild(cell);
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary">主要操作</button>
|
|
<button class="btn btn-success">成功操作</button>
|
|
<button class="btn btn-secondary">次要操作</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 动态星空背景 -->
|
|
<div class="star-field" id="starField"></div>
|
|
|
|
<!-- 网络状态指示器 -->
|
|
<div class="network-status-indicator"></div>
|
|
|
|
<!-- 回合指示器 -->
|
|
<div class="turn-indicator my-turn">我的回合</div>
|
|
|
|
<script>
|
|
// 页签切换功能
|
|
document.querySelectorAll('.tab-item').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const tabId = tab.dataset.tab;
|
|
|
|
// 更新标签状态
|
|
document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
|
|
// 更新内容显示
|
|
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
|
|
document.getElementById(tabId).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 触觉反馈
|
|
document.querySelectorAll('.btn, .list-item, .tab-item').forEach(element => {
|
|
element.addEventListener('click', () => {
|
|
if ('vibrate' in navigator) {
|
|
navigator.vibrate(10);
|
|
}
|
|
document.body.classList.add('haptic-feedback');
|
|
setTimeout(() => document.body.classList.remove('haptic-feedback'), 100);
|
|
});
|
|
});
|
|
|
|
// 创建动态星空背景
|
|
function createStarField() {
|
|
const starField = document.getElementById('starField');
|
|
const numStars = 50;
|
|
|
|
for (let i = 0; i < numStars; i++) {
|
|
const star = document.createElement('div');
|
|
star.className = 'star';
|
|
star.style.width = Math.random() * 3 + 'px';
|
|
star.style.height = star.style.width;
|
|
star.style.left = Math.random() * 100 + '%';
|
|
star.style.top = Math.random() * 100 + '%';
|
|
star.style.animationDelay = Math.random() * 3 + 's';
|
|
starField.appendChild(star);
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
createStarField();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |