mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
feat: style change for service layout
This commit is contained in:
07akioni
parent
9dbf70b054
commit
0a0f7db1be
@ -5,37 +5,44 @@
|
||||
name="已经不需要，一些挽留字句"
|
||||
:items="[
|
||||
{
|
||||
name: '第一个服务'
|
||||
name: '第一个服务',
|
||||
path: '/n-nimbus-service-layout?param=666'
|
||||
},
|
||||
{
|
||||
name: '第二个服务',
|
||||
childItems: [
|
||||
{
|
||||
name: '二级菜单１'
|
||||
name: '二级菜单１',
|
||||
path: '/n-nimbus-service-layout?param=777'
|
||||
},
|
||||
{
|
||||
name: '二级菜单2'
|
||||
name: '二级菜单2',
|
||||
path: '/n-nimbus-service-layout?param=888'
|
||||
},
|
||||
{
|
||||
name: '二级菜单3'
|
||||
name: '二级菜单3',
|
||||
path: '/n-nimbus-service-layout?param=999'
|
||||
},
|
||||
{
|
||||
name: '二级菜单4'
|
||||
name: '二级菜单4',
|
||||
path: '/n-nimbus-service-layout?param=000'
|
||||
},
|
||||
{
|
||||
name: '二级菜单5'
|
||||
name: '二级菜单5',
|
||||
path: '/n-nimbus-service-layout?param=111'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '第三个服务'
|
||||
name: '第三个服务',
|
||||
path: '/n-nimbus-service-layout?param=222'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<n-gradient-text>你觉得应该怎么写</n-gradient-text>
|
||||
<n-gradient-text>你觉得应该怎么写</n-gradient-text><br>
|
||||
<textarea
|
||||
rows="50"
|
||||
style="width: 100%;"
|
||||
style="width: 90%;"
|
||||
><n-nimbus-service-layout
|
||||
name="已经不需要，一些挽留字句"
|
||||
:items="[
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-nimbus-service-layout-menu__divider" />
|
||||
<div
|
||||
v-for="item in itemsWithCollapseStatus"
|
||||
:key="item.name"
|
||||
@ -32,6 +33,7 @@
|
||||
:class="{ active: activeItemName === item.name }"
|
||||
@click="makeActive(item)"
|
||||
>
|
||||
<div class="item-icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
@ -45,6 +47,7 @@
|
||||
}"
|
||||
@click="toggleGroupHeaderCollapse(item.name)"
|
||||
>
|
||||
<div class="item-icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
@ -160,6 +163,10 @@ export default {
|
||||
left: 0;
|
||||
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.n-nimbus-service-layout-menu__divider {
|
||||
margin: 0px 25px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .08);
|
||||
}
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
@ -176,6 +183,9 @@ export default {
|
||||
transform: translateX(50%) translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.item-wrapper {
|
||||
.header {
|
||||
opacity: 0;
|
||||
}
|
||||
.item.active {
|
||||
span {
|
||||
opacity: .4;
|
||||
@ -200,15 +210,16 @@ export default {
|
||||
}
|
||||
}
|
||||
.header {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
position: relative;
|
||||
color: #fff;
|
||||
color: #E9E9EC;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
.content {
|
||||
opacity: .9;
|
||||
opacity: 1;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
@ -239,16 +250,30 @@ export default {
|
||||
padding-bottom: 16px;
|
||||
padding-left: 48px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: #E9E9EC;
|
||||
.item-icon {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color:#78CD68 transparent transparent transparent;
|
||||
border-width: 7px;
|
||||
transform: rotate(-45deg);
|
||||
top: 24px;
|
||||
left: 32px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
opacity: .4;
|
||||
opacity: 1;
|
||||
}
|
||||
&.active span{
|
||||
opacity: .9;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover span {
|
||||
opacity: .9;
|
||||
opacity: 1;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
@ -285,11 +310,11 @@ export default {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
transform-origin: 50% 50%;
|
||||
color: transparent;
|
||||
// transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
// background-clip: text;
|
||||
// -webkit-background-clip: text;
|
||||
// transform-origin: 50% 50%;
|
||||
// color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
span {
|
||||
@ -297,12 +322,20 @@ export default {
|
||||
background: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: #fff;
|
||||
opacity: 0.4;
|
||||
color: #E9E9EC;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.is-group-item {
|
||||
padding-left: 64px;
|
||||
span {
|
||||
opacity: .4;
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-group-header.group-item-is-choosed {
|
||||
span {
|
||||
|
||||
@ -14,18 +14,22 @@
|
||||
&.is-default {
|
||||
background: $default-text-gradient;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
&.is-warning {
|
||||
background: $default-text-gradient-warning;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
&.is-danger {
|
||||
background: $default-text-gradient-danger;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
&.is-success {
|
||||
background: $default-text-gradient-success;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user