<template>
  <div class="foot" id="foot">

<img v-if="btnFlag"  class="go-top" src="@/assets/lz/toTop@2x.png" @click="backTop" alt="">
<div class="footflex">
  <div class="footleft">
<ul>
  <h3 @click="$router.push('/aboutus')">关于我们</h3>
</ul>
<ul class="block">
  <h3 @click="$router.push('/marketing')">服务内容</h3>
  <li @click="$router.push('/marketing')">全案营销策划</li>
  <li @click="$router.push('/technology')">专业技术开发</li>
  <li @click="$router.push('/platform')">平台综合运营</li>
  <li @click="$router.push('/goods')">商品供应链服务</li>
</ul>
<ul>
  <h3 @click="$router.push('/programme')">解决方案</h3>
  <li @click="$router.push('/programme')">数字营销</li>
  <li @click="$router.push('/purchasing')">数字采购</li>
  <li @click="$router.push('/welfare')">员工福利</li>
</ul>
<ul>
  <h3 @click="$router.push('/number')">客户案例</h3>
          <li @click="$router.push('/number')">数字营销案例</li>
          <li @click="$router.push('/info')">数字采购案例</li>
          <li @click="$router.push('/material')">员工福利案例</li>
          <li @click="$router.push('/benefits')">API服务案例</li>
</ul>
</div>
<div class="footcenter"></div>
<div class="footright">
  <!-- <img src="@/assets/lz/foot.png" alt=""> -->
<div>
  <!-- <p>联系电话：010-84845085</p> -->
  <p>地址：上海市长宁区天山支路158号403室</p>
  <p>企业邮箱：airuxiahua@vip.qq.com</p>
</div>
</div>
</div>
<div class="footbottom">
  Copyright  2023 上海酉俊信息科技有限公司 版权所有 备案号： <a href="https://beian.miit.gov.cn/#/Integrated/index">沪ICP备2022031248号-1</a>
</div>
  </div>
</template>

<script>
export default {
  name: 'footer',
  data () {
    return {
      btnFlag: false
    }
  },

  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
    console.log(111)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },

  methods: {
  // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      clearTimeout(this.timebar)
      this.timebar = setTimeout(() => {
        const that = this
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        that.scrollTop = scrollTop

        if (that.scrollTop > 500) {
          that.btnFlag = true
        } else {
          that.btnFlag = false
        }
      }, 10)
    }
  }

}
</script>
 <style scoped lang="less">

.foot {
height: 456px;
background-color: #0B0C29;
 margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;

.footbottom {
  color: #A0A5B5;
  font-size: 16px;
  margin-top: 80px;
  a {
      color: #A0A5B5;
  font-size: 16px;
  }

}

}
.footflex{
  display: flex;
  justify-content: space-evenly;
  align-items: center;

}
  .footleft {
    display: flex!important;
    margin-left: -105px;

  }
  ul {
     margin-right: 100px;

  }
   ul h3 {
     font-size: 20px;
     color: #fff;
     font-weight: normal;
     height: 20px;
     margin: 96px 0 43px 0;
     text-align: left;
   }
   ul li {
      display: block!important;
      padding: 0;
      color: #A0A5B5;
      font-size: 16px;
      height: 36px;
      text-align: left;

    }
    ul li:hover {
      color: #fff;
      cursor: pointer;
    }
    .footcenter {
      width: 1px;
      height: 180px;
      background-color: #A0A5B5;
      // margin-top: 111px;
      // margin-left: -181px;
      margin: 111px 3px 0 -283px;
    }
    .footright {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 111px;
      margin-left: -202px;
    }
    .footright img {
      margin-right: 91px;
    }
    .footright p {
      text-align: right;
      color: #fff;
      font-size: 16px;
    }
    .go-top {
      position: fixed;
      // left: 0;
      right: 80px;
    bottom: 100px;
    width: 54px;
    height: 54px;
    z-index: 16;
    transition: 0.3s;
    }
  @media screen and ( max-width: 1500px) {
.foot {
  width: 100%;
}
.foot .footright img {
    margin-right: 36px;
    margin-left: 99px;
}
.foot ul {
    margin-right: 56px;

}
.foot .footcenter {

    margin: 111px 3px 0 -161px;
}
    }
</style>
