Browse Source

导航样式

master_hella_20240701
yufei0306 7 months ago
parent
commit
38bc5fe227
  1. 13
      src/layout/components/CategoryHeader.vue

13
src/layout/components/CategoryHeader.vue

@ -48,7 +48,7 @@ export default defineComponent({
<ElMenu <ElMenu
id={`${variables.namespace}-tool-header`} id={`${variables.namespace}-tool-header`}
popperOffset={16} popperOffset={16}
class={[ class={['categoryheader',
prefixCls, prefixCls,
'h-[var(--top-category-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between', 'h-[var(--top-category-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'dark:bg-[var(--el-bg-color)]', 'dark:bg-[var(--el-bg-color)]',
@ -96,27 +96,28 @@ export default defineComponent({
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$prefix-cls: #{$namespace}-tool-header; $prefix-cls: #{$namespace}-tool-header;
.#{$prefix-cls} { .#{$prefix-cls} {
transition: left var(--transition-time-02); transition: left var(--transition-time-02);
} }
::v-deep(.el-menu--horizontal){ .categoryheader{
padding-left: 20px; padding-left: 20px;
} }
::v-deep(.el-menu--horizontal>.el-menu-item){
::v-deep(.el-menu-item){
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 2px; margin-bottom: 2px;
background: rgb(242, 245, 248); background: rgb(242, 245, 248);
border: 1px solid #ccc; border: 1px solid #ccc;
// background: linear-gradient(to top left,var(--left-menu-bg-color),var(--left-menu-text-color));
} }
::v-deep(.el-menu--horizontal>.el-menu-item.is-active){ ::v-deep(.el-menu-item.is-active){
background: var(--el-menu-hover-bg-color) background: var(--el-menu-hover-bg-color)
} }

Loading…
Cancel
Save