<template>
  <router-view/>
</template>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  width: 100vw;
  --el-color-primary: #92ACD1;
  --background-color: #F2F6FF;
}

body {
  margin: 0;
}

@each $padMar, $pm in (mar:margin, pad:padding) {
  @each $v in (8, 10, 16, 20, 32, 48, 56, 64, 80) {
    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
      .#{$padMar}-#{$pos+$v} {
        #{$pm}-#{$p}: #{$v}px
      }
    }
    .#{$padMar}-#{$v} {
      #{$pm}: #{$v}px
    }
    //纵向
    .#{$padMar}-v#{$v} {
      #{$pm}-top: #{$v}px;
      #{$pm}-bottom: #{$v}px;
    }
    //横向
    .#{$padMar}-h#{$v} {
      #{$pm}-left: #{$v}px;
      #{$pm}-right: #{$v}px;
    }
  }
}

@each $where in (sticky, fixed) {
  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
    .#{$where}-#{$pos} {
      position: fixed;
      #{$p}: 0;
      z-index: 202301031019;
      width: 100%;
    }
  }
}


.flex {
  display: flex;

  &.spb {
    justify-content: space-between;
  }

  &.wrap {
    flex-wrap: wrap;
  }

  &.column {
    flex-direction: column;
  }

  &.start {
    align-items: flex-start;
  }

  &.center {
    align-items: center;
  }
}

.fill {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.shrink {
  flex-shrink: 0;
}

.avatar {
  width: 40px;
  height: 40px;

  &.circle {
    overflow: hidden;
    border-radius: 50%;
  }
}

.rtl {
  direction: rtl;
}

.sub {
  color: #999;
}

</style>
