<template>
  <!-- 尾部 -->
  <div>
      <div style="background:#0A1F33;color:#FFFFFF;height:270px;margin-top: -1px">
          <div style="display:flex;width:1200px;margin:0 auto;height:180px;justify-content:space-between"> 
            <div style="line-height:180px"> 
              <el-link :underline="false" @click="openurl('/')">首页</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/market')">工具服务</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/crowdsourcing')">众包服务</el-link>
              <el-divider direction="vertical"></el-divider>
              <!-- <el-link :underline="false" @click="stepurl('http://train.keyitest.cn/')">培训学院</el-link> -->
              <el-link :underline="false" @click="openurl('/ability')">人才服务</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/college')">培训服务</el-link>
              <el-divider direction="vertical"></el-divider>
              <!-- <el-link :underline="false" @click="openurl('/news')">行业动态</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/employ')">人员聘用</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/cooperation')">合作伙伴</el-link>
              <el-divider direction="vertical"></el-divider> -->
              <el-link :underline="false" @click="openurl('/about')">关于我们</el-link>
              <!-- <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/aboutus/joinus')">加入我们</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" @click="openurl('/home')">招聘信息</el-link> -->
            </div>
            <div class="vider"> 
              <el-divider direction="vertical"></el-divider>
            </div>
            <div style="display:flex;font-size:14px;cursor:pointer"> 
              <img style="width:100px;height:100px;margin-top:40px;margin-right:35px ;" src="/assets/homepage/xcx.jpg" alt="">
              <img style="width:100px;height:100px;margin-top:40px;" src="/assets/home/erweima.jpg" alt="">
              <div style="margin-left:25px;color: #BFBFBF;display:flex;flex-direction: column; justify-content: center;">  
                <p>联系我们 </p>
                <div style="display:flex;align-items:center;margin:10px 0">
                  <!-- <img style="margin-right:10px" src="/assets/loginreg/shouji.png" alt=""> -->
                  <p>咨询热线：010-80750213</p>
                </div>
                <!-- <div style="display:flex;align-items:center;margin:10px 0">
                  <img style="margin-right:10px" src="/assets/loginreg/youxiang.png" alt="">
                  <p>传真：010-80746071</p>
                </div>                   -->
                <div style="display:flex;align-items:center">
                  <!-- <img style="margin-right:10px" src="/assets/loginreg/youxiang.png" alt=""> -->
                  <p>邮箱：keyware@keyware.com.cn</p>
                </div>                  
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div style="text-align:center;color: #B3B3B3;opacity: 0.7;margin-top:30px"> 
            版权所有 琼ICP备2023014024号 琼公网安备 46010002000162号
          </div>
          <img class="footer" id="gotoTop" src="/assets/home/gtop.png" alt="">
      </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
      data(){
        return {

        }
      },
      mounted(){
        this.gotoTop(600)
      },
      methods:{
        openurl(url){
          // console.log(url)
          // window.open(url,'_blank')
          this.$router.push(url)   
        },
        stepurl (url) {
          window.open(url,'_blank')
        },
         gotoTop(minHeight){
            // 定义点击返回顶部图标后向上滚动的动画
            $("#gotoTop").click(
                function(){$('html,body').animate({scrollTop:'0px'},'slow');
            })
            // 获取页面的最小高度，无传入值则默认为600像素
            minHeight? minHeight = minHeight:minHeight = 600;
            // 为窗口的scroll事件绑定处理函数
            $(window).scroll(function(){
                // 获取窗口的滚动条的垂直滚动距离
                var s = $(window).scrollTop();
                // console.log('gaodu',s,minHeight)
                // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐
                if( s > minHeight){
                    // $("#gotoTop").fadeIn(500);//淡入淡出
                     $("#gotoTop").css('display','block')
                }else{
                    // $("#gotoTop").fadeOut(500);
                     $("#gotoTop").css('display','none')
                };
            });
      }
      }
    }
</script>

<style scoped>
  *{margin:0;padding:0}
  .el-link.el-link--default{
    font-size: 14px;
    color: #B3B3B3;
  }
  .el-divider{
    background-color: #B3B3B3;
    margin:0 20px;
    background: #FFFFFF;
    opacity: 0.5;
  }
  .vider>>>.el-divider--vertical{
    height: 130px;
    background: #FFFFFF;
    opacity: 0.23;
    margin:25px 30px;
  }
  .el-divider--horizontal{
    margin: 0;
    background: #FFFFFF;
    opacity: 0.23;
  }
   .footer {
      position: fixed;
      right: 50px;
      bottom: 50px;
      /* width: 50px;
      height: 50px; */
     display:none;
  }
</style>
