<!--
 * @Date: 2024-09-26 13:36:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-16 17:07:50
 * @FilePath: /hager/src/App.vue
 * @Description: 文件描述
-->
<template>
  <div style=" display: flex; flex-direction: column; min-height: 100vh;">
    <hager-header></hager-header>
    <router-view :class="['wrapper', is_xs ? 'xs' : '']"></router-view>
    <hager-footer></hager-footer>
  </div>
</template>

<script>
import hagerHeader from '@/components/common/hagerHeader.vue';
import hagerFooter from '@/components/common/hagerFooter.vue';
import mixin from '@/common/mixin';

export default {
  components: { hagerHeader, hagerFooter },
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less">
* {
  outline: none;
}

html,
body {
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: @text-color;
  p {
    margin: 0;
    padding: 0;
  }
}

.global-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.wrapper {
  margin-top: 10rem;
  flex-grow: 1;
  &.xs {
    margin-top: 7rem;
  }
}

.box-n {
  background-color: #fff;
  padding: 2rem 0;
}
.box-2n {
  background-color: #f1f1f1;
  padding: 2rem 0;
}

.banner-text-wrapper {
  .text {
    font-weight: bold;
    .title {
      font-size: 2.5rem;
      color: @secondary-color;
    }
    .sub {
      font-size: 2rem;
      color: @primary-color;
    }
  }
  .text-sub {
    color: @text-color;
    margin-top: 1rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.more-box {
  display: flex;
  justify-content: center;
}


.el-carousel__item .item {
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-carousel__indicator.is-active button {
  background-color: #EE6D10;
}
</style>