<!--
 * @Date: 2024-09-26 13:36:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-18 18:58:31
 * @FilePath: /hager/src/App.vue
 * @Description: 文件描述
-->
<template>
  <div style="display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;">
    <hager-header></hager-header>
    <router-view :class="[!isLoginPage ? 'wrapper' : '', is_xs ? 'xs' : '']"></router-view>
    <hager-footer v-if="!isLoginPage"></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 {

    }
  },
  computed: {
    // 通过计算属性检查是否是登录页
    isLoginPage() {
      // 检查当前路由是否为登录页的路径
      return this.$route.path.indexOf('/user') !== -1;
    },
  },
  mounted () {

  },
  methods: {

  }
}
</script>

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

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

body {
  font-size: 16px; /* 默认字体大小 */
}

// @media (max-width: 1200px) {
//   body {
//     font-size: 14px; /* 1200px 以下屏幕的字体大小 */
//   }
// }

// @media (max-width: 768px) {
//   body {
//     font-size: 12px; /* 768px 以下屏幕的字体大小 */
//   }
// }

// @media (max-width: 480px) {
//   body {
//     font-size: 10px; /* 480px 以下屏幕的字体大小 */
//   }
// }

.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 {
      margin-bottom: 1rem;
      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>