style(all): 主题配置
This commit is contained in:
parent
bd5fabec22
commit
9217ed9eae
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue