侧边栏圆角动画
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
This commit is contained in:
@@ -1,195 +1,223 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
height: 100vh;
|
||||
overflow: hidden
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
max-width: 100vw !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 22px;
|
||||
background: #fff;
|
||||
margin-top: 46px;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2);
|
||||
}
|
||||
.top-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 22px;
|
||||
background: #fff;
|
||||
margin-top: 46px;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.82rem;
|
||||
background: #F1F2F5;
|
||||
justify-content: space-between;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.82rem;
|
||||
background: #F1F2F5;
|
||||
justify-content: space-between;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.back {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.back img {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 0.32rem !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.32rem !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* 主体布局 */
|
||||
.main {
|
||||
display: flex;
|
||||
height: calc(100% - 46px);
|
||||
margin-top:0.018rem;
|
||||
}
|
||||
|
||||
/* 主体布局 */
|
||||
.main {
|
||||
display: flex;
|
||||
height: calc(100% - 46px);
|
||||
margin-top:0.018rem;
|
||||
}
|
||||
/* 左侧菜单 #FAFAFA;*/
|
||||
.sidebar {
|
||||
width: 114px;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 左侧菜单 */
|
||||
.sidebar {
|
||||
width: 114px;
|
||||
background: #FAFAFA;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sidebar li {
|
||||
list-style: none;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
font-size: 0.28rem !important;
|
||||
color:#686A70; /* #686A70;*/
|
||||
cursor: pointer;
|
||||
background:#FAFAFA;
|
||||
/* 分别控制上下圆角的过渡 */
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
transition: border-radius 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.sidebar li.active {
|
||||
color: #004BFA;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
list-style: none;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
font-size: 0.28rem !important;
|
||||
color: #686A70;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar li.active {
|
||||
color: #004BFA;
|
||||
background: #fff;
|
||||
border-top-right-radius: 0.17rem;
|
||||
border-bottom-right-radius:0.17rem ;
|
||||
}
|
||||
.sidebar li.active-prev {
|
||||
border-bottom-right-radius: 0.17rem !important;
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
.right-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-left: 12px;
|
||||
background: #fff;
|
||||
margin-bottom: 80px;
|
||||
.sidebar li.active-next {
|
||||
border-top-right-radius: 0.17rem !important;
|
||||
}
|
||||
/* 右侧内容 */
|
||||
.right-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-left: 12px;
|
||||
background: #fff;
|
||||
margin-bottom: 80px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.sec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding-top: 24px;
|
||||
padding-right: 17px;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 24px;
|
||||
padding-right: 17px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sec-title {
|
||||
font-size: 0.28rem !important;
|
||||
color: #686A70;
|
||||
font-weight: 500
|
||||
}
|
||||
.sec-title {
|
||||
font-size: 0.28rem !important;
|
||||
color: #686A70;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.sec-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sec-arrow {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sec-arrow img {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
}
|
||||
/* 横向滚动容器 */
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* 横向滚动容器 */
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scroll-box::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.scroll-box::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
.right-card {
|
||||
flex-shrink: 0;
|
||||
background: #FAFAFA;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
padding-left: 19px;
|
||||
padding-right: 19px;
|
||||
|
||||
}
|
||||
.card-img {
|
||||
width: 1.52rem;
|
||||
background: #f1f1f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.right-card {
|
||||
flex-shrink: 0;
|
||||
background: #FAFAFA;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
|
||||
.card-img {
|
||||
width: 1.52rem;
|
||||
background: #f1f1f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
}
|
||||
.card-info {
|
||||
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: 8px;
|
||||
text-align: center
|
||||
}
|
||||
.card-name {
|
||||
font-size: 0.2rem !important;
|
||||
width: 1.52rem;
|
||||
height: auto;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 0.2rem !important;
|
||||
width: 1.52rem;
|
||||
height: auto;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-model {
|
||||
font-size: 0.16rem !important;
|
||||
color: #686A70;
|
||||
margin-top: 4px
|
||||
}
|
||||
|
||||
.card-model {
|
||||
font-size: 0.16rem !important;
|
||||
color: #686A70;
|
||||
margin-top: 4px
|
||||
}
|
||||
/* 内容区块默认隐藏 */
|
||||
.tab-pane {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* 内容区块默认隐藏 */
|
||||
.tab-pane {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* 激活时显示 */
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
|
||||
}
|
||||
/* 激活时显示 */
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user