<!--  -->
<template>
  <div class="aboutUs_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <!-- <div class="aboutUs_head">
      <div class="aboutUs_head_returnA" @click="FanHui()">
        <img
          src="../../assets/image/left.png"
          alt
          class="aboutUs_head_returnA_img"
        />
      </div>

      <div class="head_title">
        <span class="head_title_text">关于我们</span>
      </div>
    </div>
     -->
    <!-- 头部 -->
    <div class="aboutUs_headrBox">
      <div class="aboutUs_divBox">
        <img
          @click="goBack()"
          src="../../assets/image/new/30.png"
          alt
          class="aboutUs_headrBox-img"
        />
        <div class="aboutUs_headrBox-tlt">关于我们</div>
      </div>
    </div>

    <!-- 线 -->
    <div class="aboutUs_segment"></div>
    <!-- 线 -->

    <!-- 主内容 -->
    <div class="aboutUs_main">
      <!-- 版本号 -->
      <div class="aboutUs_mainVersions">
        <!-- app图标 -->
        <img
          src="../../assets/image/Appicon.png"
          alt
          class="aboutUs_mainVersions_img"
        />
        <!-- app图标 -->
        <div class="aboutUs_mainVersionsText">V1.1.5</div>
      </div>
      <!-- 版本号 -->

      <!-- 公司介绍 -->
      <ul class="company_box">
        <li class="company_box-list" @click="jieshao()">
          <div class="company_box-list-txt">技术支持</div>

          <div class="company_box-list-txt2Box">
            <div class="company_box-list-txt2-txt">
              河南云飞科技发展有限公司
            </div>
            <img
              src="../../assets/image/right.png"
              alt=""
              class="company_box-list-txt2-img"
            />
          </div>
        </li>

        <li
          style="
            width: 95%;
            border-bottom: 1px solid #efefef;
            margin: 0.25rem 0 0 0.45rem;
          "
        ></li>

        <li class="company_box-list" @click="share()">
          <div class="company_box-list-txt">关注微信</div>

          <div class="company_box-list-txt2Box">
            <div class="company_box-list-txt2-txt">
              河南云飞科技发展有限公司
            </div>
            <img
              src="../../assets/image/right.png"
              alt=""
              class="company_box-list-txt2-img"
            />
          </div>
        </li>
      </ul>
      <!-- 公司介绍 -->

      <!-- 公司介绍2 -->
      <ul class="company_box">
        <li class="company_box-list" @click="wangzhi()">
          <div class="company_box-list-txt">公司官网</div>

          <div class="company_box-list-txt2Box">
            <div class="company_box-list-txt2-txt">www.hnyfkj.cn</div>
            <img
              src="../../assets/image/right.png"
              alt=""
              class="company_box-list-txt2-img"
            />
          </div>
        </li>

        <li
          style="
            width: 95%;
            border-bottom: 1px solid #efefef;
            margin: 0.25rem 0 0 0.45rem;
          "
        ></li>

        <li class="company_box-list">
          <div class="company_box-list-txt">商务合作</div>

          <div class="company_box-list-txt2Box">
            <div class="company_box-list-txt2-txt">400-690-1990</div>
            <img
              src="../../assets/image/right.png"
              alt=""
              class="company_box-list-txt2-img"
            />
          </div>
        </li>
        <li
          style="
            width: 95%;
            border-bottom: 1px solid #efefef;
            margin: 0.25rem 0 0 0.45rem;
          "
        ></li>
        <li class="company_box-list">
          <div class="company_box-list-txt">公司邮箱</div>

          <div class="company_box-list-txt2Box">
            <div class="company_box-list-txt2-txt">hnyf826@163.com</div>
            <img
              src="../../assets/image/right.png"
              alt=""
              class="company_box-list-txt2-img"
            />
          </div>
        </li>
      </ul>
      <!-- 公司介绍2 -->

      <!-- 底部信息 -->
      <div style="color: #858585">© 河南云飞科技发展有限公司</div>
      <!-- 底部信息 -->

      <!-- 官网网址 -->
      <!-- <div class="official">河南云飞科技发展有限公司官方网址：http://www.hnyfkj.cn</div> -->
      <!-- 官网网址 -->

      <!-- 测试 -->
      <!-- <div class="btmImg_box">
        <img src="../../assets/image/code.png" alt class="btmImg" />
        <div class="btmImg_box_text">扫描左侧二维码，可显示云飞科技相关联系方式。更多联系方式，请点击网站联系我们</div>
      </div> -->
      <!-- 测试 -->
    </div>
    <!-- 主内容 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回home页面
    goBack() {
      let that = this;
      that.$router.replace("/person");
    },

    //点击跳转到公众号
    share() {
      this.$router.push("/helpWx");
    },

    //点击跳转到公司介绍
    jieshao() {
      this.$router.push("/helpTxt");
    },

    //点击跳转到扫码下载页面
    wangzhi() {
      this.$router.push("/helpWangzhi");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight() //动态获取浏览器高度
  },
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
</style>
<style lang="scss" scoped>
.aboutUs_box {
  // background: #fafafa;
  background: #f5f5f5;
}

// 头部
.aboutUs_headrBox {
  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
}

.aboutUs_divBox {
  display: flex;
  justify-content: space-between;
  width: 55%;
  margin: 0 0 0 0.5rem;
}

.aboutUs_headrBox-tlt {
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 8px 0 8px 0;
}

.aboutUs_headrBox-img {
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
  margin-top: 0.3rem;
}

//线
.aboutUs_segment {
  width: 100%;
  border-bottom: 1px solid rgb(190, 187, 187);
}

// 主内容

// 版本号
.aboutUs_mainVersions {
  // border: 1px solid #000;
  // margin-top: .8rem;
  background: #fff;
  padding: 0.35rem 0 0.5rem 0;
}
.aboutUs_mainVersions_img {
  padding: 0.5rem 0 0 0;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 auto;
}
.aboutUs_mainVersionsText {
  font-size: 15px;
  font-weight: 550;
  line-height: 3;
  color: #8d8d8d;
}

//公司介绍
.company_box {
  background: #fff;
  font-size: 15px;
  // border: 1px solid #000;
  padding: 5% 5% 5% 0;
  // width: 90%;
  width: 95%;
  margin: 0.5rem auto;
  text-align: left;
  text-indent: 2em;
  color: #2b2b2b;
}

//官网网址
.official {
  padding: 5% 0 5% 0;
  background: #fff;
  // border: 1px solid #000;
  font-size: 13px;
  color: lighten($color: #777272, $amount: 0);
}

//图片
.btmImg_box {
  // border: 1px solid #000;
  display: flex;
  background: #fff;
  padding: 0 0 0.4rem 0;
}
.btmImg {
  width: 35%;
}
.btmImg_box_text {
  text-align: left;
  text-indent: 2em;
  font-size: 13px;
  line-height: 2;
  margin: 1.5rem 0 0 0;
}

// 技术支持
.company_box-list {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.company_box-list-txt {
  text-align: left;
  color: #7a7a7a;
}
.company_box-list-txt2Box {
  display: flex;
  justify-content: space-between;
}
.company_box-list-txt2-txt {
  color: #7a7a7a;
}
.company_box-list-txt2-img {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.05rem 0 0 0;
}
</style>