<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>
