🦄 reactor: 重构帮助页面

This commit is contained in:
zhiyu1998 2024-09-27 16:00:30 +08:00
parent b89ef59739
commit 681c2c1943

View File

@ -68,21 +68,26 @@ body {
border-radius: 15px; border-radius: 15px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 15px; margin-bottom: 15px;
padding: 20px 0px 5px 0px; padding: 20px 10px 5px 10px;
background: transparent; background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
position: relative; position: relative;
} }
.tab_lable { .tab_lable {
position: absolute; position: absolute;
top: -10px; top: -12px;
left: -8px; left: -8px;
background-color: rgb(76, 76, 76); background-color: rgba(76, 76, 76, 0.8);
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.37);
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
padding: 3px 10px; padding: 5px 12px;
border-radius: 15px 0px 15px 15px; border-radius: 15px 0px 15px 15px;
z-index: 20; z-index: 20;
} }
@ -115,23 +120,32 @@ body {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
margin: -5px;
} }
.list .item { .list .item {
width: 235px; width: calc(50% - 10px);
display: flex; display: flex;
align-items: center; align-items: center;
color: white; color: white;
background: transparent; background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8); backdrop-filter: blur(10px);
padding: 8px 6px 8px 6px; -webkit-backdrop-filter: blur(10px);
border-radius: 8px; box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.2);
margin: 0 0px 10px 10px; padding: 10px;
border-radius: 10px;
margin: 5px;
transition: all 0.3s ease;
}
.list .item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px 0 rgba(31, 38, 135, 0.3);
} }
.list .item .icon { .list .item .icon {
width: 24px; width: 28px;
height: 24px; height: 28px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
@ -140,17 +154,15 @@ body {
.list .item .title { .list .item .title {
font-size: 16px; font-size: 16px;
margin-left: 6px; margin-left: 10px;
line-height: 20px; line-height: 20px;
flex-grow: 1;
} }
/* .list .item .title .text{
white-space: nowrap;
} */
.list .item .title .dec { .list .item .title .dec {
font-size: 12px; font-size: 12px;
color: #999; color: rgba(255, 255, 255, 0.7);
margin-top: 2px; margin-top: 4px;
} }
.logo { .logo {