<template>
  <div class="header">

      <div>
       <a href="/"> <img src="@/assets/yj/logo.png" alt="" /></a>
      </div>
      <ul>
        <a href="/"><li>首页</li></a>
        <li @click="aboutus">关于我们</li>
        <li class="show_list"><span @click="$router.push('/marketing')">服务内容</span>
        <ul class="move_list">
          <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>
        </li>
        <li class="show_list"><span @click="$router.push('/programme')">解决方案</span>
        <ul class="move_list1">
          <li @click="$router.push('/programme')">数字营销</li>
          <li @click="$router.push('/purchasing')">数字采购</li>
          <li @click="$router.push('/welfare')">员工福利</li>

        </ul>
        </li>

        <li class="show_list"><span @click="$router.push('/number')">成功案例</span>
          <ul class="move_list">
          <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>
        </li>
        <li class="move"></li>
      </ul>
      <!-- <div class="hdmenu">
        <i></i>
        <i></i>
        <i></i>
      </div> -->
      <div class="last">
       <a href="#foot"> <span>联系我们</span></a>
      </div>
    </div>

</template>

<script>
export default {
  name: 'header',
  methods: {
    aboutus () {
      this.$router.push('/aboutus')
    }

  }

}
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header {
  width: 1920px;
  background-color: #080C36;
  height: 90px;
  // line-height: 90px;
  color: #ccc;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;

 img {
   width: 156px;
   height: 40px;
  //  margin-left: 370px;
  cursor: pointer;

 }
 ul li {
   color: #ccc;
  padding: 20px 20px;
   cursor: pointer;
   height: 20px;

 }
 ul li:hover {
   color: #fff;

 }
 .last {
   margin-left: -190px;
   color: #ccc;

  span {
  border: 1px solid #ccc;
  box-sizing: border-box;
   width: 126px;
   height: 41px;
   padding: 7px 14px;
   border-radius: 18px;
  }
 }
   ul .move {
     border-top: 2px solid #fff;
     position: absolute;
     left: 0;
     opacity: 0;
     top: 68px;
     transition: ease-in-out 0.4s;
     width: 47px;
 }
//  ul li:nth-of-type(1):hover ~ .move {
//      left: 44%;
//      opacity: 1;
//  }
//   ul li:nth-of-type(2):hover ~ .move {
//      left: 48%;
//      opacity: 1;
//  }
//   ul li:nth-of-type(3):hover ~ .move {
//      left: 53.5%;
//      opacity: 1;
//  }
//   ul li:nth-of-type(4):hover ~ .move {
//      left: 59%;
//      opacity: 1;
//  }
//   ul li:nth-of-type(5):hover ~ .move {
//      left: 64%;
//      opacity: 1;
//   }
  .show_list{
    position: relative;
  }
   a {
    color: #ccc;
  }
  a:hover {
    color: #fff;
  }
  @keyframes frames{
  from{

    height: 0px;
  }
  to{

    height: 170px;
  }
}
  .move_list {
    display: none;
    z-index: 103;
    position: absolute;
    top: 50px;
    left: -10px;
    text-align: center;
     overflow: hidden;
    //  padding-left: 20px;
  /* 绑定动画名字并且设置持续时间 */
  animation-name: frames;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;

  }
    .move_list1 {
    display: none;
    z-index: 103;
    position: absolute;
    top: 50px;
    left: -10px;
    text-align: center;
     overflow: hidden;
    //  padding-left: 20px;
  /* 绑定动画名字并且设置持续时间 */
  animation-name: framee;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;

  }
  @keyframes framee{
  from{

    height: 0px;
  }
  to{

    height: 130px;
  }
}
   .show_list:hover .move_list {
    display: block;
    background-color: #000;
    font-size: 14px;

    opacity: 0.9;
   width: 134px;
  height: 350px;
  border-radius: 6px;

}
   .show_list:hover .move_list1 {
    display: block;
    background-color: #000;
    font-size: 14px;

    opacity: 0.9;
   width: 134px;
  height: 350px;
  border-radius: 6px;

}
.move_list li {
  padding: 10px 0;
  display: block;
}
.move_list1 li {
  padding: 10px 0;
  display: block;
}

.show_list .move_list li:hover{
    color: #fff;
    background-color: rgb(47, 50, 77);

}
.show_list .move_list1 li:hover{
    color: #fff;
    background-color: rgb(47, 50, 77);
}

}
// .hdmenu {
//   width: 40px;
//   border: 1px solid #ccc;
//   border-radius: 3px;
//   padding: 3px 0;
// //  display: none;
// }
// .hdmenu i {
//   display: block;
//   width: 30px;
//   height: 2px;
//   background: #aaa;
//   margin: 5px auto;
//   cursor: pointer;
// }
// 手机端
@media (max-width: 1500px) {
 .header {
   width: 100%;
 }
 .last {
   margin-left: 0px!important;
 }
//  ul li {
//    display: none;
//  }
}

</style>
