61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<a-layout :style="{ height: '100vh' }">
|
|
<a-layout-sider theme="dark" breakpoint="lg" :width="220" collapsible :collapsed="collapsed" @collapse="onCollapse">
|
|
<Menu :collapsed="collapsed" />
|
|
</a-layout-sider>
|
|
<a-layout>
|
|
<a-layout-header>
|
|
<Navbar :collapsed="collapsed" @on-collapse="onCollapse" />
|
|
</a-layout-header>
|
|
<a-layout-content class="layout-content">
|
|
<AppMain />
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { AppMain, Navbar } from './components';
|
|
import Menu from './components/Menu/Menu.vue';
|
|
|
|
const collapsed = ref(false);
|
|
const onCollapse = () => {
|
|
collapsed.value = !collapsed.value;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../style/index.scss';
|
|
@import '../style/transition.scss';
|
|
@import '../style/dark-theme.scss';
|
|
|
|
.layout-content {
|
|
padding: 16px;
|
|
background-color: #f2f3f5;
|
|
}
|
|
.titlebox{
|
|
display: flex;
|
|
align-items: center;
|
|
.bar{
|
|
width:4px;
|
|
height:24px;
|
|
background-color: rgb(var(--primary-6));
|
|
}
|
|
.name{
|
|
margin-left: 8px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.titletip{
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.arco-select-view-single.arco-select-view-disabled,.arco-select-view-multiple.arco-select-view-disabled .arco-select-view-tag{
|
|
color: var(--color-text-3);
|
|
}
|
|
.arco-input-wrapper .arco-input[disabled],.arco-textarea[disabled]{
|
|
-webkit-text-fill-color: var(--color-text-3);
|
|
}
|
|
</style> |