c0bf3ad3cf
- 全局为 html/body 添加 overflow-x: clip 兜底（不影响 sticky 定位） - 全局 img 与 cropper 容器限制最大宽度，大图在窄屏不再撑破布局 - URL 构造的参数编辑行在移动端改为纵向堆叠 - 时间戳页日期选择器窄屏占满可用宽度 - 首页标签行允许换行，避免超窄屏溢出
132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<template>
|
||
<div class="page-wrap">
|
||
<!-- 站点头部介绍 -->
|
||
<div class="hero">
|
||
<h1 class="hero-title">在线工具箱</h1>
|
||
<p class="hero-desc">
|
||
14 个常用工具，全部在浏览器本地完成计算与文件处理，不上传任何数据到服务器。
|
||
</p>
|
||
<div class="hero-badges">
|
||
<t-tag theme="success" variant="light">纯前端</t-tag>
|
||
<t-tag theme="primary" variant="light">数据不出浏览器</t-tag>
|
||
<t-tag theme="warning" variant="light">免费使用</t-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工具卡片导航 -->
|
||
<div class="tool-grid">
|
||
<router-link
|
||
v-for="tool in tools"
|
||
:key="tool.path"
|
||
:to="`/${tool.path}`"
|
||
class="tool-card"
|
||
>
|
||
<span class="tool-icon">
|
||
<component :is="tool.icon" />
|
||
</span>
|
||
<span class="tool-name">{{ tool.name }}</span>
|
||
<span class="tool-desc">{{ tool.desc }}</span>
|
||
<span class="tool-arrow">
|
||
<ChevronRightIcon />
|
||
</span>
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ChevronRightIcon } from 'tdesign-icons-vue-next'
|
||
import { tools } from '@/router/tools'
|
||
</script>
|
||
|
||
<style scoped>
|
||
.hero {
|
||
text-align: center;
|
||
padding: 24px 0 32px;
|
||
}
|
||
.hero-title {
|
||
margin: 0 0 8px;
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
color: var(--td-text-color-primary);
|
||
}
|
||
.hero-desc {
|
||
margin: 0 auto 14px;
|
||
max-width: 560px;
|
||
font-size: 14px;
|
||
color: var(--td-text-color-secondary);
|
||
}
|
||
.hero-badges {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 工具卡片栅格：响应式，移动端单列 */
|
||
.tool-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
.tool-card {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 18px;
|
||
border: 1px solid var(--td-border-level-1-color);
|
||
border-radius: 10px;
|
||
background: var(--td-bg-color-container);
|
||
text-decoration: none;
|
||
transition:
|
||
transform 0.15s,
|
||
box-shadow 0.15s,
|
||
border-color 0.15s;
|
||
}
|
||
.tool-card:hover {
|
||
transform: translateY(-3px);
|
||
border-color: var(--td-brand-color);
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||
}
|
||
html[theme-mode='dark'] .tool-card:hover {
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
|
||
}
|
||
.tool-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
color: var(--td-brand-color);
|
||
background: var(--td-brand-color-light);
|
||
}
|
||
.tool-name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--td-text-color-primary);
|
||
}
|
||
.tool-desc {
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--td-text-color-secondary);
|
||
}
|
||
.tool-arrow {
|
||
position: absolute;
|
||
right: 14px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--td-text-color-placeholder);
|
||
}
|
||
@media (max-width: 767px) {
|
||
.hero-title {
|
||
font-size: 24px;
|
||
}
|
||
.tool-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|