Cx330/DreamLife_ToolBox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

去除无用代码，修改注释

Browse Source
This commit is contained in:
张梦南 2025-03-26 13:52:39 +08:00
parent b032b56929
commit d4d5f21984
8 changed files with 73 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/body.css
View File

@ -1,27 +1,25 @@
/* 基本样式重置 */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif; /* 设置页面的默认字体 */
font-family: Arial, sans-serif; /* 默认字体 */
background-color:#f4f4f4;
}
/* 禁用页面滚动样式 */
body.no-scroll {
overflow: hidden; /* 禁止页面滚动 */
overflow: hidden;
}
/* 主内容区 */
.main-content {
margin-left: 270px;
margin-right: 20px;
margin-top: 14px; /* 增加主内容区的上边距 */
margin-top: 14px; /* 主内容区的上边距 */
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1; /* 确保内容在侧边栏下方 */
position: relative; /* 确保相对定位 */
position: relative;
}
.content {

6
css/font.css
View File

@ -1,7 +1,7 @@
/* 使用 @font-face 引用本地字体 */
/* 引用本地字体 */
@font-face {
font-family: 'Pacifico'; /* 字体名称 */
src: url('../font/Pacifico.ttf') format('truetype'); /* 设置 .ttf 字体 */
font-family: 'Pacifico';
src: url('../font/Pacifico.ttf') format('truetype'); /* 自定义 .ttf 字体 */
font-weight: normal;
font-style: normal;
}

12
css/footer.css
View File

@ -2,15 +2,11 @@
footer {
background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */
color: white;
display: flex; /* 使用 flex 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
font-size: 14px;
max-height: 30px;
z-index: 2000; /* 提升侧边栏的层级 */
z-index: 2000;
}

18
css/header.css
View File

@ -11,7 +11,7 @@ header {
justify-content: space-between;
align-items: center;
z-index: 3000;
transition: all 1s ease; /* 为头部的尺寸变化和样式变化添加过渡效果 */
transition: all 1s ease; /* 过渡效果 */
}
/* 按钮的基础样式 */
@ -23,19 +23,18 @@ header .toggle-menu {
color: rgb(235, 10, 10);
cursor: pointer;
margin-right: 20px; /* 设置右边距 */
transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */
transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
}
/* 悬停效果，按钮背景颜色变化 */
header .toggle-menu:hover {
background-color: rgba(235, 10, 10, 0.1); /* 增加轻微的背景色变化 */
background-color: rgba(235, 10, 10, 0.1);
}
/* 头部全屏按钮样式（仅大屏幕显示） */
#fullscreen-button {
position: absolute;
right: 16px;
top: 0px;
background: none;
border: none;
cursor: pointer;
@ -47,7 +46,7 @@ header .toggle-menu:hover {
}
#fullscreen-button:hover {
transform: scale(1.20); /* 悬停时上下左右均匀放大 5% */
transform: scale(1.20); /* 悬停时上下左右均匀放大 20% */
}
#search-input {
@ -63,23 +62,22 @@ header .toggle-menu:hover {
text-align: center;
margin-bottom: 20px;
position: fixed; /* 固定定位 */
top: 10px; /* 初始位置距离顶部20px */
top: 10px; /* 初始位置距离顶部10px */
left: 50%;
transform: translateX(-50%); /* 居中显示 */
z-index: 3000; /* 确保在顶部 */
z-index: 3000;
}
/* 鼠标悬停时搜索框展开 */
#search-input:hover,
#search-input:focus {
width: 600px; /* 展开宽度 */
padding: 5px 20px; /* 调整内边距 */
width: 600px;
padding: 5px 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
#logo_head {
font-family: 'Pacifico', cursive; /* 使用本地字体 Pacifico */
margin: 0;
padding-left: 10px;
text-align: left;
font-size: 32px;

30
css/max_width.css
View File

@ -14,28 +14,28 @@
padding: 5px 15px;
top: 72px;
left: 50%; /* 使搜索框居中 */
z-index: 1000; /* 确保在顶部 */
z-index: 1000;
}
#search-input:hover,
#search-input:focus {
width: 60%; /* 展开宽度 */
padding: 5px 20px; /* 调整内边距 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
width: 60%;
padding: 5px 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* 小屏幕时侧边栏 */
.sidebar {
width: 80%; /* 设置侧边栏宽度为60% */
width: 80%;
bottom: 0;
transform: translateX(-100%); /* 默认隐藏侧边栏 */
z-index: 2000; /* 确保在顶部 */
z-index: 2000;
}
.sidebar.open {
transform: translateX(0);
bottom: 0;
width: 80%; /* 确保侧边栏在打开时宽度为60% */
width: 80%; /* 侧边栏在打开时宽度为80% */
}
.logo {
@ -44,17 +44,15 @@
/* 小屏幕时主内容区 */
.main-content {
margin-left: 0px; /* 小屏幕时移除左边距 */
margin-right: 0px; /* 小屏幕时右边距减小 */
margin-top: 80px; /* 小屏幕时稍微减小上边距 */
}
/* 小屏幕时头部 */
header {
height: 40px; /* 设置头部高度为50px */
justify-content: space-between; /* 保持头部内容在两端 */
align-items: center; /* 垂直居中内容 */
z-index: 3000; /* 确保在顶部 */
height: 40px;
justify-content: space-between;
align-items: center;
z-index: 3000;
}
/* 小屏幕时菜单按钮 */
header .toggle-menu {
@ -65,14 +63,14 @@
color: rgb(235, 10, 10);
cursor: pointer;
position: absolute;
top: 10px; /* 距离顶部20px */
right: 14px; /* 距离右侧20px */
top: 10px;
right: 14px;
transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */
}
/* 悬停效果，按钮背景颜色变化 */
header .toggle-menu:hover {
background-color: rgba(235, 10, 10, 0.1); /* 增加轻微的背景色变化 */
background-color: rgba(235, 10, 10, 0.1);
}
#logo_head {

8
css/min_width.css
View File

@ -1,9 +1,9 @@
@media (min-width: 768px) {
header {
background: none; /* 去掉头部背景色 */
box-shadow: none; /* 去掉头部阴影 */
height: auto; /* 自动高度适应搜索框 */
padding: 0; /* 去掉多余的内边距 */
background: none;
box-shadow: none;
height: auto;
padding: 0;
top: 10px;
}

43
css/sidebar.css
View File

@ -2,14 +2,13 @@
.sidebar {
position: fixed;
top: -30px;
left: 0;
width: 250px;
bottom: 24px;
background-color: #f4f4f4;
color: rgb(100, 99, 99); /* logo颜色 */
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
align-items: center;
padding: 20px;
transition: transform 0.3s ease-in-out;
z-index: 2000;
@ -17,12 +16,11 @@
.logo {
font-family: 'Pacifico', cursive; /* 使用本地字体 Pacifico */
margin: 0;
padding-top: 48px;
text-align: center; /* 确保整个 logo 居中 */
text-align: center;
display: flex;
flex-direction: column; /* 将 part1 和 part2 垂直排列 */
align-items: center; /* 确保每个部分居中 */
align-items: center;
}
.logo .part1 {
@ -44,20 +42,20 @@
display: inline-block;
padding: 10px 20px;
background-color: #f4f4f4;
transition: all 0.3s ease; /* 添加平滑过渡效果 */
transition: all 0.3s ease;
}
/* 侧边栏链接内容的容器 */
.sidebar-link .link-content {
display: flex;
background-color: #f4f4f4;
align-items: center; /* 确保文字和图标垂直居中 */
transition: transform 0.3s ease; /* 添加平滑过渡 */
align-items: center;
transition: transform 0.3s ease;
}
/* 悬停时图标和文字一起上浮 */
.sidebar-link:hover .link-content {
transform: translateY(-3px); /* 向上浮起5px */
transform: translateY(-3px); /* 向上浮起3px */
}
/* 图标样式 */
@ -70,42 +68,37 @@
color: #000;
}
/* 按钮文本和图标的状态样式 */
.sidebar-link.fullscreen .icon {
transform: rotate(90deg); /* 图标旋转 */
}
/* 退出全屏时的样式 */
.sidebar-link.fullscreen span {
content: "退出全屏"; /* 修改文本为"退出全屏" */
content: "退出全屏";
}
.sidebar {
flex: 1 1 250px; /* 允许侧边栏在可用空间内缩放 */
flex: 1 1 250px;
}
/* 侧边栏按钮容器 */
#sidebar {
display: flex;
flex-direction: column; /* 垂直排列按钮 */
align-items: center; /* 确保按钮水平居中 */
flex-direction: column;
align-items: center;
padding-top: 30px;
}
/* 按钮样式：药丸形 */
.tag-btn {
display: block; /* 让按钮变成 block 级元素 */
width: 100px; /* 设置按钮的宽度 */
height: 34px; /* 设置按钮的高度 */
padding: 8px 10px; /* 调整内边距，让内容更舒适 */
display: block;
width: 100px;
height: 34px;
padding: 8px 10px;
border-radius: 20px;
color: #fff;
margin: 5px;
border: none;
cursor: pointer;
font-weight: bold; /* 加粗字体 */
text-align: center; /* 让文字居中 */
line-height: 17px; /* 调整文本垂直居中 */
font-weight: bold;
text-align: center;
line-height: 17px;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}

37
css/toolcard.css
View File

@ -13,15 +13,15 @@
/* 保证工具卡片的顺序 */
.tool-card {
display: flex;
flex-direction: column; /* 使 logo 在上，名称在下 */
align-items: flex-start; /* 左对齐 */
flex-direction: column;
align-items: flex-start;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: left; /* 左对齐 */
text-align: left;
min-height: 180px;
transition: transform 0.5s ease, box-shadow 0.5s ease; /* 工具卡片动画时间设置为 0.5s */
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
/* 工具卡片动画完成状态 */
@ -40,11 +40,11 @@
.tool-logo {
margin-left: 30px;
margin-top: 10px;
width: 50px; /* 设置logo的宽度 */
width: 50px;
height: 50px;
margin-bottom: 10px; /* 给logo和名称之间留出间距 */
border-radius: 8px; /* 设置圆角矩形 */
object-fit: cover; /* 保证图片不会被拉伸或变形 */
margin-bottom: 10px;
border-radius: 8px;
object-fit: cover;
display:block;
}
@ -56,9 +56,9 @@
font-weight: bold;
color: #333;
text-decoration: none;
position: relative; /* 使下划线定位相对 */
display: inline-block; /* 确保工具名称独占一行 */
text-align: left; /* 左对齐 */
position: relative;
display: inline-block;
text-align: left;
}
/* 工具名称的下划线效果 */
@ -79,15 +79,14 @@
/* 分类标签样式 */
.tool-category {
display: inline-block; /* 使标签处于同一行 */
padding: 4px 16px; /* 胶囊形状的内边距，横向较宽 */
/*background-color: #fc8f8f; /* 背景颜色 */
color: #ffffff; /* 文字颜色 */
font-size: 10px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
border-radius: 50px; /* 设置圆角，形成胶囊形状 */
display: inline-block;
padding: 4px 16px;
color: #ffffff;
font-size: 10px;
font-weight: bold;
border-radius: 50px;
margin-left: 30px;
margin-top: 10px; /* 给标签和描述之间留出间距 */
margin-top: 10px;
}
/* 工具描述样式 */