style(all): 主题配置

This commit is contained in:
RubyLiu 2023-05-25 19:16:50 +08:00 committed by 刘瑞斌
parent bd5fabec22
commit 9217ed9eae
9 changed files with 19 additions and 30 deletions

View File

@ -219,8 +219,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
border-bottom: 1px solid var(--color-border); background-color: var(--color-bg-3);
background-color: var(--color-bg-1);
} }
.left-side { .left-side {
display: flex; display: flex;

View File

@ -34,7 +34,7 @@
& .arco-select-view-single { & .arco-select-view-single {
border: none; border: none;
color: #323233; color: #323233;
background-color: var(--color-bg-2); background-color: var(--color-bg-1);
} }
} }
</style> </style>

View File

@ -51,12 +51,12 @@
<style scoped lang="less"> <style scoped lang="less">
.tab-bar-container { .tab-bar-container {
position: relative; position: relative;
background-color: var(--color-bg-2); background-color: var(--color-bg-1);
.tab-bar-box { .tab-bar-box {
display: flex; display: flex;
padding: 0 0 0 20px; padding: 0 0 0 20px;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-2); background-color: var(--color-bg-1);
.tab-bar-scroll { .tab-bar-scroll {
overflow: hidden; overflow: hidden;
height: 32px; height: 32px;

View File

@ -8,7 +8,7 @@
"menuCollapse": false, "menuCollapse": false,
"footer": false, "footer": false,
"themeColor": "#5736E9", "themeColor": "#5736E9",
"menuWidth": 220, "menuWidth": 200,
"globalSettings": false, "globalSettings": false,
"device": "desktop", "device": "desktop",
"tabBar": false, "tabBar": false,

View File

@ -13,7 +13,7 @@
:collapsed="collapsed" :collapsed="collapsed"
:collapsible="true" :collapsible="true"
:width="menuWidth" :width="menuWidth"
:style="{ paddingTop: navbar ? '60px' : '' }" :style="{ paddingTop: navbar ? navbarHeight : '' }"
:hide-trigger="true" :hide-trigger="true"
@collapse="setCollapsed" @collapse="setCollapsed"
> >
@ -63,7 +63,7 @@
const route = useRoute(); const route = useRoute();
const permission = usePermission(); const permission = usePermission();
useResponsive(true); useResponsive(true);
const navbarHeight = `60px`; const navbarHeight = `56px`;
const navbar = computed(() => appStore.navbar); const navbar = computed(() => appStore.navbar);
const renderMenu = computed(() => appStore.menu && !appStore.topMenu); const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
const hideMenu = computed(() => appStore.hideMenu); const hideMenu = computed(() => appStore.hideMenu);
@ -102,7 +102,7 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@nav-size-height: 60px; @nav-size-height: 56px;
@layout-max-width: 1100px; @layout-max-width: 1100px;
.layout { .layout {
width: 100%; width: 100%;
@ -123,16 +123,6 @@
z-index: 99; z-index: 99;
height: 100%; height: 100%;
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
&::after {
position: absolute;
top: 0;
right: -1px;
display: block;
width: 1px;
height: 100%;
background-color: var(--color-border);
content: '';
}
> :deep(.arco-layout-sider-children) { > :deep(.arco-layout-sider-children) {
overflow-y: hidden; overflow-y: hidden;
} }
@ -157,7 +147,7 @@
} }
} }
:deep(.arco-menu-light) { :deep(.arco-menu-light) {
background-color: var(--color-bg-1) !important; background-color: var(--color-bg-3) !important;
.arco-menu-item { .arco-menu-item {
:hover { :hover {
background-color: var(--color-bg-6); background-color: var(--color-bg-6);

View File

@ -5,21 +5,21 @@ const components: AppRouteRecordRaw = {
path: '/component', path: '/component',
name: 'component', name: 'component',
component: DEFAULT_LAYOUT, component: DEFAULT_LAYOUT,
redirect: '/component/index',
meta: { meta: {
locale: 'menu.component', locale: 'menu.component.demo',
roles: ['*'], icon: 'icon-computer',
order: 1, order: 1,
icon: 'icon-common', hideChildrenInMenu: true,
}, },
children: [ children: [
{ {
path: 'form-create', path: 'index',
name: 'form-create', name: 'component',
component: () => import('@/views/component/index.vue'), component: () => import('@/views/component/index.vue'),
meta: { meta: {
locale: 'menu.component.demo', locale: 'menu.component.demo',
roles: ['*'], roles: ['*'],
icon: 'icon-computer',
}, },
}, },
], ],

View File

@ -26,7 +26,7 @@
padding: 20px 20px 0; padding: 20px 20px 0;
width: 100%; width: 100%;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background-color: var(--color-bg-2); background-color: var(--color-bg-1);
} }
:deep(.arco-icon-home) { :deep(.arco-icon-home) {
margin-right: 6px; margin-right: 6px;

View File

@ -61,7 +61,6 @@
display: flex; display: flex;
padding: 16px 20px; padding: 16px 20px;
padding-bottom: 0; padding-bottom: 0;
background-color: var(--color-fill-2);
} }
.left-side { .left-side {
flex: 1; flex: 1;
@ -74,7 +73,7 @@
.panel { .panel {
overflow: auto; overflow: auto;
border-radius: 4px; border-radius: 4px;
background-color: var(--color-bg-2); background-color: var(--color-bg-1);
} }
:deep(.panel-border) { :deep(.panel-border) {
margin-bottom: 0; margin-bottom: 0;
@ -82,7 +81,7 @@
} }
.moduler-wrap { .moduler-wrap {
border-radius: 4px; border-radius: 4px;
background-color: var(--color-bg-2); background-color: var(--color-bg-1);
:deep(.text) { :deep(.text) {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;

View File

@ -16,6 +16,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.my-container { .my-container {
width: 100vw; width: 100vw;
min-width: 1440px;
height: 100vh; height: 100vh;
.login-box { .login-box {
margin-top: calc(50vh - 400px); margin-top: calc(50vh - 400px);