<!--
 * @Date: 2024-09-26 13:36:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-04 16:43:27
 * @FilePath: /hager/src/App.vue
 * @Description: 文件描述
-->
<template>
  <div style="display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;">
    <hager-header @onShowMenu="onShowMenu"></hager-header>
    <router-view :class="[!isLoginPage ? 'wrapper' : '', is_xs ? 'xs' : '']"></router-view>
    <hager-footer v-if="!isLoginPage"></hager-footer>
    <div v-if="showMask" class="mask">
    </div>
  </div>
</template>

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

export default {
  // TAG：配置页面meta和标题信息
  metaInfo: {
    // title: '海格电气官方网站',
    meta: [
      { name: 'keyword', content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。海格电气品牌代表了集团的核心业务，覆盖配电系统、电缆管理系统，KNX 智能控制系统和开关面板、楼宇自动化和安防系统。' },
      { name: 'description', content: '构建未来电气世界 让人们的生活更安全、更清洁、更愉悦。' },
    ]
  },
  components: { hagerHeader, hagerFooter },
  mixins: [mixin.init],
  data () {
    return {
      showMask: false
    }
  },
  computed: {
    // 通过计算属性检查是否是登录页
    isLoginPage() {
      // 检查当前路由是否为登录页的路径
      return this.$route.path.indexOf('/user') !== -1;
    },
  },
  mounted () {

  },
  methods: {
    onShowMenu (val) {
      this.showMask = val;
    },
  }
}
</script>

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

html,
body {
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  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 以下屏幕的字体大小 */
//   }
// }

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.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;
}


.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #F56400 !important;
    cursor: pointer;
}

.no-select {
  user-select: none; /* 标准属性 */
  -webkit-user-select: none; /* Safari 和 Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* 旧版 IE */
}
</style>