43 行
795 B
Vue
43 行
795 B
Vue
<template>
|
|
<div class="app-layout">
|
|
<a href="#main-content" class="sr-only skip-link">跳转到主要内容</a>
|
|
<LayoutAppHeader />
|
|
<main id="main-content" class="app-main">
|
|
<slot />
|
|
</main>
|
|
<LayoutAppFooter />
|
|
<CommonFloatingContact />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.app-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-main {
|
|
flex: 1;
|
|
}
|
|
|
|
.skip-link {
|
|
&:focus {
|
|
position: fixed;
|
|
top: @space-sm;
|
|
left: @space-sm;
|
|
z-index: 200;
|
|
width: auto;
|
|
height: auto;
|
|
padding: @space-sm @space-md;
|
|
background: @color-primary;
|
|
color: #fff;
|
|
font-size: @font-size-sm;
|
|
border-radius: @border-radius-md;
|
|
clip: auto;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
</style>
|