Tools/ToolsWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改index 设置自动变化

Browse Source
This commit is contained in:
zhangyazhou
2024-08-22 20:33:21 +08:00
parent f64f800808
commit 1330008c05
3 changed files with 114 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@@ -6,6 +6,9 @@
<title>工具类网站</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
<style>
:root {
--tile-size: 120px; /* 固定宽度为120px */
}
body {
margin: 0;
font-family: Arial, sans-serif;
@@ -16,14 +19,17 @@
padding-top: 50px; /* 距离上边距50像素 */
}
.tile-container {
display: grid;
grid-template-columns: repeat(8, 1fr); /* 8列均分 */
gap: 2%; /* 磁贴之间的间距，按比例 */
width: 80vw; /* 容器宽度为视口宽度的80% */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr)); /* 自动填充列 */
max-width: 90%;
padding: 10px;
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-content: center;
}
.tile {
width: 10vw; /* 宽度为视口宽度的10% */
height: 10vw; /* 高度为视口宽度的10% */
width: var(--tile-size);
height: var(--tile-size);
color: #fff;
display: flex;
flex-direction: column;
@@ -34,40 +40,55 @@
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
background-color: #0078D7; /* 默认背景颜色 */
}
.tile:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.tile i {
font-size: 3vw; /* 图标大小为磁贴的30% */
margin-top: 10%; /* 保证图标在磁贴中间 */
font-size: calc(0.35 * var(--tile-size)); /* 图标大小为30px */
margin-bottom: 10px; /* 保证图标和文字之间的间距 */
}
.tile span {
font-size: 0.8vw; /* 工具名称字体大小适应磁贴 */
margin-top: 10px;
font-size: calc(0.11 * var(--tile-size)); /* 工具名称字体大小适应磁贴 */
}
</style>
</head>
<body>
<div class="tile-container">
<div class="tile" style="background-color: #0078D7;" onclick="window.open('tools/otp.html', '_blank')">
<div class="tile-container" id="tileContainer">
<div class="tile" style="background-color: #0078D7;" onclick="handleTileClick('otp.html')">
<i class="mdi mdi-qrcode"></i>
<span>OTP 认证<br>二维码生成器</span>
<span>OTP二维码生成器</span>
</div>
<div class="tile" style="background-color: #28a745; display: none;" onclick="window.open('tool2.html', '_blank')">
<i class="mdi mdi-cogs"></i>
<span>工具2</span>
<div class="tile" style="background-color: #28a745;" onclick="handleTileClick('text_to_qrcode.html')">
<i class="mdi mdi-qrcode-edit"></i>
<span>文字转二维码</span>
</div>
<div class="tile" style="background-color: #dc3545; display: none;" onclick="window.open('tool3.html', '_blank')">
<div class="tile" style="background-color: #dc3545; display: none" onclick="window.open('tool3.html', '_blank')">
<i class="mdi mdi-bell"></i>
<span>工具3</span>
</div>
<div class="tile" style="background-color: #fd7e14; display: none;" onclick="window.open('tool4.html', '_blank')">
<div class="tile" style="background-color: #fd7e14; display: none" onclick="window.open('tool4.html', '_blank')">
<i class="mdi mdi-calendar"></i>
<span>工具4</span>
</div>
<!-- 这里可以添加更多工具的磁贴，每个磁贴可以设置不同的背景颜色 -->
</div>
<script>
function handleTileClick(page) {
const currentPath = window.location.pathname;
let targetUrl;
if (currentPath.includes('index.html')) {
targetUrl = page;
} else {
targetUrl = `tools/${page}`;
}
window.open(targetUrl, '_blank');
}
</script>
</body>
</html>
</html>