feat: 框架样式调整
This commit is contained in:
@ -16,7 +16,7 @@ const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
useResponsive(true);
|
||||
const navbarHeight = `72px`;
|
||||
const navbarHeight = `52px`;
|
||||
const navbar = computed(() => appStore.navbar);
|
||||
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
|
||||
const hideMenu = computed(() => appStore.hideMenu);
|
||||
@ -110,62 +110,65 @@ provide('toggleDrawerMenu', () => {
|
||||
<style scoped lang="scss">
|
||||
$layout-max-width: 1100px;
|
||||
|
||||
.layout-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: $navbar-height;
|
||||
}
|
||||
.layout-sider {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
.layout {
|
||||
.layout-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -1px;
|
||||
display: block;
|
||||
width: 1px;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: $navbar-height;
|
||||
}
|
||||
.layout-sider {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
background-color: var(--color-border);
|
||||
content: '';
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: -1px;
|
||||
// display: block;
|
||||
// width: 1px;
|
||||
// height: 100%;
|
||||
// background-color: var(--color-border);
|
||||
// content: '';
|
||||
// }
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-3);
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-content {
|
||||
min-width: 1366px;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
background-color: $color-background;
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
.layout-content {
|
||||
min-width: 1366px;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
padding-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@ const route = useRoute();
|
||||
const routerKey = computed(() => {
|
||||
return route.path + Math.random();
|
||||
});
|
||||
const hideFooter = computed(() => route.meta?.hideFooter);
|
||||
// const hideFooter = computed(() => route.meta?.hideFooter);
|
||||
/*** - end */
|
||||
</script>
|
||||
|
||||
@ -20,10 +20,10 @@ const hideFooter = computed(() => route.meta?.hideFooter);
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<view class="footer" v-if="!hideFooter">
|
||||
<!-- <view class="footer" v-if="!hideFooter">
|
||||
<view>闽公网安备 352018502850842号 闽ICP备20250520582号 © 2025小题科技,All Rights Reserved.</view>
|
||||
<view>* 数据通过公开渠道获取,灵机进行统计分析</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user