Fix(Menu): Fix submenu style exception

Fix submenu style exception. Optimize menu stylesheet
This commit is contained in:
2024-04-30 16:18:11 +08:00
parent 929b2f3b91
commit c5ab4e242d
3 changed files with 25 additions and 14 deletions

View File

@@ -27,6 +27,7 @@
font-size: constants.$SIZE_ICON_SM; font-size: constants.$SIZE_ICON_SM;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
span { span {
transform: rotateZ(180deg); transform: rotateZ(180deg);
transition: all .3s; transition: all .3s;
@@ -61,9 +62,10 @@
ul { ul {
> li, > div > li { > li, > div > li {
padding: 2px 14px; padding: 2px 14px;
&.item { &.item {
position: relative; position: relative;
font-size: 1.4em; font-size: 1rem;
> .menu-bt { > .menu-bt {
border-radius: 8px; border-radius: 8px;
@@ -96,6 +98,9 @@
.text { .text {
flex: 1; flex: 1;
padding-left: 8px; padding-left: 8px;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
} }
&.active { &.active {
@@ -113,7 +118,7 @@
.submenu { .submenu {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;
padding-left: 20px; padding-left: 10px;
z-index: 10000; z-index: 10000;
animation: 0.1s ease forwards; animation: 0.1s ease forwards;
@include mixins.unique-keyframes { @include mixins.unique-keyframes {
@@ -134,11 +139,13 @@
padding: 10px 10px; padding: 10px 10px;
background-color: constants.$origin-color; background-color: constants.$origin-color;
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
.item { .item {
border-radius: 8px; border-radius: 8px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding: 0;
a { a {
display: block; display: block;
@@ -278,6 +285,7 @@
transition: all .3s; transition: all .3s;
} }
} }
.text { .text {
display: none; display: none;
} }
@@ -299,6 +307,7 @@
.footer { .footer {
position: relative; position: relative;
.text { .text {
display: none; display: none;
} }
@@ -318,6 +327,7 @@
.icon-exit { .icon-exit {
padding: 4px 8px; padding: 4px 8px;
&:hover { &:hover {
border-radius: 8px; border-radius: 8px;
background-color: constants.$background-color; background-color: constants.$background-color;

View File

@@ -42,9 +42,9 @@ const Item = (props: ItemProps) => {
isPending ? 'pending' : isActive ? 'active' : '' isPending ? 'pending' : isActive ? 'active' : ''
} }
> >
{props.icon && (
<div className={'icon-box'}> <div className={'icon-box'}>
{props.icon && {typeof props.icon === 'string' ? (
(typeof props.icon === 'string' ? (
<img <img
className={'icon'} className={'icon'}
src={`data:image/svg+xml;base64,${props.icon}`} src={`data:image/svg+xml;base64,${props.icon}`}
@@ -52,8 +52,9 @@ const Item = (props: ItemProps) => {
/> />
) : ( ) : (
<Icon className={'icon'} component={props.icon} /> <Icon className={'icon'} component={props.icon} />
))} )}
</div> </div>
)}
<span className={'text'}>{props.text}</span> <span className={'text'}>{props.text}</span>
<div className={'extend'}>{props.extend}</div> <div className={'extend'}>{props.extend}</div>
</NavLink> </NavLink>

View File

@@ -191,7 +191,7 @@ const StoreCard = ({
<> <>
<Draggable <Draggable
id={`${author.username}:${toolId}:${ver}`} id={`${author.username}:${toolId}:${ver}`}
data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }} data={{ icon, toolName, toolId, authorUsername: author.username, ver: '' }}
> >
<Card <Card
data-component={'component-store-card'} data-component={'component-store-card'}