Ubuntu
72 lines
2.9 KiB
HTML
72 lines
2.9 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>图标预览</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
|
|
.icon-item { text-align: center; }
|
|
.icon-name { margin-top: 10px; font-size: 14px; color: #333; }
|
|
.icon-pair { display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
|
.icon-label { font-size: 12px; color: #666; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>底部导航图标预览</h1>
|
|
<div class="icon-grid">
|
|
|
|
<div class="icon-item">
|
|
<div class="icon-pair">
|
|
<div class="icon-label">默认</div>
|
|
<img src="home.png" alt="home" width="48" height="48">
|
|
<div class="icon-label">激活</div>
|
|
<img src="home-active.png" alt="home-active" width="48" height="48">
|
|
</div>
|
|
<div class="icon-name">home</div>
|
|
</div>
|
|
|
|
<div class="icon-item">
|
|
<div class="icon-pair">
|
|
<div class="icon-label">默认</div>
|
|
<img src="project.png" alt="project" width="48" height="48">
|
|
<div class="icon-label">激活</div>
|
|
<img src="project-active.png" alt="project-active" width="48" height="48">
|
|
</div>
|
|
<div class="icon-name">project</div>
|
|
</div>
|
|
|
|
<div class="icon-item">
|
|
<div class="icon-pair">
|
|
<div class="icon-label">默认</div>
|
|
<img src="wechat.png" alt="wechat" width="48" height="48">
|
|
<div class="icon-label">激活</div>
|
|
<img src="wechat-active.png" alt="wechat-active" width="48" height="48">
|
|
</div>
|
|
<div class="icon-name">wechat</div>
|
|
</div>
|
|
|
|
<div class="icon-item">
|
|
<div class="icon-pair">
|
|
<div class="icon-label">默认</div>
|
|
<img src="tree.png" alt="tree" width="48" height="48">
|
|
<div class="icon-label">激活</div>
|
|
<img src="tree-active.png" alt="tree-active" width="48" height="48">
|
|
</div>
|
|
<div class="icon-name">tree</div>
|
|
</div>
|
|
|
|
<div class="icon-item">
|
|
<div class="icon-pair">
|
|
<div class="icon-label">默认</div>
|
|
<img src="mine.png" alt="mine" width="48" height="48">
|
|
<div class="icon-label">激活</div>
|
|
<img src="mine-active.png" alt="mine-active" width="48" height="48">
|
|
</div>
|
|
<div class="icon-name">mine</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|