技能联调
This commit is contained in:
fengxiangdebaozi committed
1 parent
07ad87365f
commit
a9332c0ab0
7 files changed
+369
-145
No files matched your search
@@ -1,11 +1,11 @@
|
||||
.sidebar-contents{
|
||||
width:98px;
|
||||
min-height:986px;
|
||||
background:rgba(3, 38, 80, 0.8);
|
||||
border:1px solid;
|
||||
border-color:rgba(43, 143, 254, 0.6);
|
||||
border-radius:4px;
|
||||
backdrop-filter:blur(2px);
|
||||
.sidebar-contents {
|
||||
width: 98px;
|
||||
min-height: 986px;
|
||||
background: rgba(3, 38, 80, 0.8);
|
||||
border: 1px solid;
|
||||
border-color: rgba(43, 143, 254, 0.6);
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -13,38 +13,44 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-nav{
|
||||
width:100%;
|
||||
padding:10px 0;
|
||||
border:0;
|
||||
border-bottom:1px solid rgba(85, 166, 254, 0.2);
|
||||
background:transparent;
|
||||
font-family:'Noto Sans S Chinese', sans-serif;
|
||||
font-weight:500;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
font-size:20px;
|
||||
line-height:26px;
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
transition:background 0.2s ease, color 0.2s ease;
|
||||
.item-nav {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: #ffffff1a;
|
||||
border-color: #fefafa4d;
|
||||
margin-top: 13px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-weight: 550;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: #000c1c26;
|
||||
border: 1px solid;
|
||||
border-color: #55a6fe33;
|
||||
box-shadow: 0 0 20px #00b9ff26 inset;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-nav:hover{
|
||||
background:rgba(85, 166, 254, 0.12);
|
||||
color:#ffffff;
|
||||
.item-nav:hover {
|
||||
background: rgba(85, 166, 254, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.item-nav__label{
|
||||
display:block;
|
||||
width:3em;
|
||||
margin:0 auto;
|
||||
padding-left:6px;
|
||||
box-sizing:border-box;
|
||||
letter-spacing:6px;
|
||||
word-break:break-all;
|
||||
.item-nav__label {
|
||||
display: block;
|
||||
width: 3em;
|
||||
margin: 0 auto;
|
||||
padding-left: 6px;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: 6px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-nav-content{
|
||||
.item-nav-content {
|
||||
width: 155px;
|
||||
min-height: 970px;
|
||||
background: rgba(3, 38, 80, 0.8);
|
||||
@@ -57,115 +63,110 @@
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
padding: 14px 13px 18px 16px;
|
||||
overflow-y:auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item-nav-active{
|
||||
color:#ffffff;
|
||||
.item-nav-active {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(134.25deg,
|
||||
rgba(0, 98, 217, 0.59) 2.28%,
|
||||
rgba(0, 98, 217, 0.3) 99.59%) !important;
|
||||
background-size: cover;
|
||||
border: 1px solid;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-nav-active::before{
|
||||
.item-nav-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width:84.5px;
|
||||
height:70px;
|
||||
background: url('../assets/icon/nav-active.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.item-nav-active::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25px;
|
||||
width:77px;
|
||||
height:45px;
|
||||
top: 24px;
|
||||
width: 77px;
|
||||
height: 45px;
|
||||
background: url('../assets/icon/nav-line-logo.svg') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.sidebar-flyout-list{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:2px;
|
||||
position:relative;
|
||||
.sidebar-flyout-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-flyout-list--level-1,
|
||||
.sidebar-flyout-list--level-2,
|
||||
.sidebar-flyout-list--level-3{
|
||||
margin-left:19px;
|
||||
padding-left:14px;
|
||||
.sidebar-flyout-list--level-3 {
|
||||
margin-left: 19px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.sidebar-flyout-node{
|
||||
position:relative;
|
||||
.sidebar-flyout-node {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded > .sidebar-flyout-list::before{
|
||||
content:'';
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width:1px;
|
||||
height:100%;
|
||||
background:rgba(43, 143, 254, 0.22);
|
||||
.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded>.sidebar-flyout-list::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: rgba(43, 143, 254, 0.22);
|
||||
}
|
||||
|
||||
.sidebar-flyout-item{
|
||||
width:100%;
|
||||
min-height:34px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:9px;
|
||||
border:0;
|
||||
background:transparent;
|
||||
padding:3px 0;
|
||||
font-family:Noto Sans S Chinese;
|
||||
font-size:18px;
|
||||
line-height:28px;
|
||||
font-weight:500;
|
||||
letter-spacing:0;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
text-align:left;
|
||||
cursor:pointer;
|
||||
transition:color 0.2s ease, text-shadow 0.2s ease;
|
||||
.sidebar-flyout-item {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 3px 0;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, text-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-flyout-item:hover,
|
||||
.sidebar-flyout-item--active{
|
||||
color:#48ddff;
|
||||
text-shadow:0 0 8px rgba(72, 221, 255, 0.25);
|
||||
.sidebar-flyout-item--active {
|
||||
color: #48ddff;
|
||||
text-shadow: 0 0 8px rgba(72, 221, 255, 0.25);
|
||||
}
|
||||
|
||||
.sidebar-flyout-item--leaf{
|
||||
justify-content:center;
|
||||
padding-left:0;
|
||||
.sidebar-flyout-item--leaf {
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-flyout-list--level-1 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
|
||||
.sidebar-flyout-list--level-2 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
|
||||
.sidebar-flyout-list--level-3 > .sidebar-flyout-node > .sidebar-flyout-item--leaf{
|
||||
padding-left:0;
|
||||
.sidebar-flyout-list--level-1>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
|
||||
.sidebar-flyout-list--level-2>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
|
||||
.sidebar-flyout-list--level-3>.sidebar-flyout-node>.sidebar-flyout-item--leaf {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-flyout-arrow{
|
||||
width:9px;
|
||||
height:9px;
|
||||
flex:0 0 9px;
|
||||
background:url('../assets/icon/down-logo.svg') center / contain no-repeat;
|
||||
transform:rotate(-90deg);
|
||||
transition:transform 0.2s ease;
|
||||
.sidebar-flyout-arrow {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
flex: 0 0 9px;
|
||||
background: url('../assets/icon/down-logo.svg') center / contain no-repeat;
|
||||
transform: rotate(-90deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-flyout-node--expanded > .sidebar-flyout-item > .sidebar-flyout-arrow{
|
||||
transform:rotate(0deg);
|
||||
.sidebar-flyout-node--expanded>.sidebar-flyout-item>.sidebar-flyout-arrow {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.sidebar-flyout-label{
|
||||
flex:1;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.sidebar-flyout-label {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Reference in new issue
Block a user