<template>
  <div class="home">
<!-- 头部 -->
    <Header></Header>
<!-- banner -->
    <div class="banner">
      <div class="cover_1">
        <div class="cover_2"><img src="@/assets/yj/banner@3.png" alt=""></div>
      <div class="cover_3"><img src="@/assets/lz/banner@4.png" alt="">
     <div class="cover_4">

        <a href="#Mom" class="head-nav-2"><span>了解更多</span></a>
      <span id="Mom" class="cover_5" @click="$router.push('/aboutus')">关于我们</span>
     </div>
      </div>
      </div>
    </div>
<!-- 企业简介 -->
<div class="centent" >
<div class="module">
  <img src="@/assets/lz/icon.png" alt="">
  <p class="module_1">企业营销物资数字化采购整体解决方案服务商</p>
  <div class="Border"></div>
  <p class="module_2">酉俊根据企业业务场景需求提供整体解决方案，助力企业实现增收、提效、降本的目的致力成为数字化营销与智能采购领域最受尊敬的企业</p>
</div>
<div class="introduce">
<div class="introduce-center">
    <div class="introduce-left">
    <span class="introduce-left1">企业简介</span>
    <span class="introduce-left2"></span>
    <span class="introduce-left3">ENTERPRISE INTRODUCTION</span>
    <p class="introduce-left4">上海酉俊信息科技有限公司</p>
    <p class="introduce-left5">上海酉俊信息科技有限公司,位于上海市长宁区天山支路158号403室，是一家专业的信息化系统服务互联网科技公司。以互联网信息服务为基础，提供技术开发、技术咨询、技术转让、技术推广等多方面服务。</p>
    <p class="introduce-left5">公司本着“诚信立人、精益求精”的原则，积极引进优秀的互联网技术、互联网信息营销策略及内容创意。品质和我们不变的方针，诚信是我们的永恒根本。</p>
  </div>
  <div class="introduce-right">
    <img src="@/assets/lz/user.png" alt="">
  </div>
</div>
</div>

<!-- 一体化服务 -->
<div class="service">
<div class="service-top">
<img src="@/assets/lz/icon2.png" alt="">
<h3>一体化服务模式</h3>
<p>提供“策划+技术+运营+商品”为核心的专业一体化服务</p>
</div>
<ul>
  <li>
    <img src="@/assets/lz/icon3.png" alt="">
    <h2>全案营销策划</h2>
<div class="leftcenter">
    <p>· 主题营销策划</p>
    <p>· 项目营销支持</p>
    <p>· 营销广告设计</p>
    <p>· 营销传播推广</p>
</div>
  </li>
    <li>
    <img src="@/assets/lz/icon4.png" alt="">
    <h2>专业技术开发</h2>
<div class="leftcenter">
    <p>· 三大专业系统平台</p>
    <p>· API应用程序接口</p>
    <p>· SaaS软件部署</p>
    <p>· 丰富营销工具</p>
</div>
  </li>
    <li>
    <img src="@/assets/lz/icon5.png" alt="">
    <h2>专业技术开发</h2>
<div class="leftcenter">
    <p>· 运营报告</p>
    <p>· 活动运营</p>
    <p>· 商品、内容运营</p>
    <p>· 数据运营</p>
</div>
  </li>
    <li>
    <img src="@/assets/lz/icon6.png" alt="">
    <h2>商品供应链服务</h2>
<div class="leftcenter1">
    <p>· 专业B2B2C数字化供应链</p>
    <p>· 丰富品类，实物+虚拟</p>
    <p>· 第三方电商平台合作</p>
    <p>· 银行级售后服务标准</p>
</div>
  </li>
</ul>
</div>
<!-- 三大业务场景解决方案 -->
<div class="business">
<div class="business-top">
<img src="@/assets/lz/icon7.png" alt="">
<h3>三大业务场景解决方案</h3>
<p>根据业务场景需求，为客户提供专业B2B整体解决方案</p>
</div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="数字营销整体解决方案" name="first" >
      <div class="tabss">
        <img class="tabss-left" src="@/assets/lz/tabs.png" alt="">
        <img class="tabss-right" src="@/assets/lz/tabs1.png" alt="">
      </div>
    </el-tab-pane>
    <el-tab-pane label="数字采购整体解决方案" name="second">
            <div class="tabss">
        <img class="tabss-left" src="@/assets/lz/tabs4.png" alt="">
        <img class="tabss-right" src="@/assets/lz/tabs5.png" alt="">
      </div>
    </el-tab-pane>
    <el-tab-pane label="员工福利整体解决方案" name="third">
            <div class="tabss">
        <img class="tabss-left" src="@/assets/lz/tabs2.png" alt="">
        <img class="tabss-right" src="@/assets/lz/tabs3.png" alt="">
      </div>
    </el-tab-pane>
  </el-tabs>
<div class="business-top">
<img src="@/assets/lz/icon1.png" alt="">
<h3>成功案例</h3>
<p>累计服务1000+知名企业，用专业和实力赢得客户信赖</p>
</div>
</div>

<div class="Successful">
<ul>
  <li>
    <div class="img_div">
       <div class="mask">
         <img src="@/assets/lz/Successful7.png" alt="">
       </div>
      <img src="@/assets/lz/Successful1.png" alt="">
    </div>

  </li>
  <li>
        <div class="img_div">
       <div class="mask">
                  <img src="@/assets/lz/Successful6.png" alt="">
       </div>
      <img src="@/assets/lz/Successful2.png" alt="">
    </div>
  </li>
  <li>
        <div class="img_div">
       <div class="mask">
                  <img src="@/assets/lz/Successful5.png" alt="">
       </div>
      <img src="@/assets/lz/Successful3.png" alt="">
    </div>
  </li>
  <li>
        <div class="img_div">
       <div class="mask">
                  <img src="@/assets/lz/Successful8.png" alt="">
       </div>
      <img src="@/assets/lz/Successful4.png" alt="">
    </div>
  </li>
</ul>
</div>

</div>
<!-- 页脚 -->
<Footer></Footer>

  </div>
</template>

<script>

// eslint-disable-next-line quotes
import Header from "@/components/header"
import Footer from '@/components/footer'
// import Backtop from '@/components/backtop'

export default {
  name: 'home',
  // eslint-disable-next-line vue/no-unused-components
  components: { Header, Footer },
  data () {
    return {
      activeName: 'second'

    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // goRegister1 () {
    //   this.$el.querySelector('.centent').scrollIntoView(
    //     {
    //       behavior: 'smooth' // 平滑过渡
    //       // block: 'start' // 上边框与视窗顶部平齐
    //     }
    //   )
    // }

    goRegister1 () {
      var nav2 = document.querySelector('.head-nav-2') // 获取点击的元素
      var serve = document.querySelector('.centent') // 获取要滚动到哪个元素
      nav2.addEventListener('click', () => {
        let aa = 6 // 设置一个变量  使滚动由快到慢
        const scollHeight = serve.offsetTop // 获取元素到顶部的距离
        console.log(scollHeight)
        // 设置定时器
        const location = setInterval(() => {
          const speed = scollHeight / aa // 每次滚动多少
          // 当前滚动位置小于元素到顶部的距离
          if (document.documentElement.scrollTop <= scollHeight) {
            document.documentElement.scrollTop += speed // 和回到顶部不同，需要每次加上步长值
            aa += 3 // 每走一次 使下次的步长值变小
          } else {
            clearInterval(location)
          }
        }, 30)
      })
    }
  }
}
</script>

<style lang="less" scoped>

body,html{
  scroll-behavior: smooth;
}
.home {
  width: 100%;
  overflow: hidden;

}
.banner {
  height: 900px;
background-image: url(../assets/lz/banner@2x.png);
background-repeat:no-repeat;
 background-position:center;
 background-size: cover;

}
.cover_1 img {
width: 100%;
height: 900px;
position: relative;
}
 .cover_3  {
  position: absolute;
  top: 280px;
  left: 368px;

  img {
  width: 498px;
  height: 265px;
  }
  .cover_4 {
    margin-top: 90px;
  }
    span {

    color: #fff;
    bottom: 0;
    margin-right: 40px;
    padding: 16px 60px;
    background-color: #F32946;
    border-radius: 29px;

    }
    .cover_5 {

    background-color: #383B70;
 cursor: pointer;

    }

}

.cover_2 img {

  margin-left: 161px;
  margin-top: 61px;
  width: 84%;
  height: 80%;
  animation: slate 6s 0.1s infinite;
  transition: ease-in-out .3s;
}
 @keyframes slate {
    20%{
        transform: translateY(20px);
    }
    40%{
        transform: translateY(-20px);
    }
    60%{
        transform: translateY(20px);
    }
    80%{
        transform: translateY(-20px);
    }
    /* 100%{
        transform: translateY(30px);
    } */
 }
.centent {
 width: 1920px;
  margin: 0 auto;
  background-color: #fff;
  padding-top: 40px;
}
.module {
  text-align: center;
  height: 305px;

.module_1 {
  color: #232F55;
  font-size: 28px;
  margin: 41px 0 19px;
}
.module_2{
  width: 624px;
  height: 35px;
  margin: 40px auto;
  color: #74798A;

}
  .Border {
    border: 2px solid #F32946;
    width: 40px;
    height: 6px;
    margin: 0 auto;
    border-radius: 10px;

  }
}
.introduce {
  width: 1920px;
  height: 430px;
background-image: url(../assets/lz/introduce.png);
background-repeat:no-repeat;
 background-position:center;
 background-size: cover;
 display: flex;
 align-items: center;

}
.introduce-center {
  margin: 0 auto;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   width: 1200px;

}
.introduce-left {
  width: 560px;
  height: 210px;
  .introduce-left1 {
    color: #232F55;
    font-size: 22px;
    font-weight: bold;
  }
  .introduce-left2 {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #454987;
    border-radius: 50%;
    margin: 0 20px;
  }
  .introduce-left3 {
    color: #74798A;
    font-size: 14px;
  }
  .introduce-left4 {
    color: #232F55;
    font-size: 20px;
    padding: 42px 0 20px 0;
  }
  .introduce-left5 {
    color: #74798B;
    font-size: 14px;
  }
}
.introduce-right img {
  width: 583px;
  height: 210px;
  margin-left: 22px;
}
.service {
  height: 731px;
  background-color: #040A49;
 .service-top {
   text-align: center;
  img {
    padding: 80px 0 40px 0;
  }
  h3 {
    font-size: 28px;
    color: #fff;
    font-weight: normal;
  }
  p {
    font-size: 15px;
    color: #A0A5B5;
    padding: 40px 0;
  }
 }
 ul {
   display: flex;
   align-items: center;
   justify-content: center;

   li {
     width: 275px;
     height: 300px;
     border: 1px solid #5C6190;
     text-align: center;
     margin-right: 33px;
     transition: ease-in-out 0.5s;
     img {
       padding: 31px 0 33px 0;
     }
     h2 {
       font-size: 20px;
       color: #fff;
       padding-bottom: 19px;
       font-weight: normal;
     }
     .leftcenter{
       width: 200px;
       margin-left: 74px;
      p {
       font-size: 14px;
       line-height: 26px;
       color: #A0A5B5;
      text-align: left;
     }
     }
          .leftcenter1{
       width: 200px;
       margin-left: 64px;
      p {
       font-size: 14px;
       line-height: 26px;
       color: #A0A5B5;
      text-align: left;
     }
     }

   }
   li:last-child {
     margin-right: 0;
   }
   li:hover {
     background-color: #181E59;
      transform: scale(1.1);
      cursor: pointer;
     p {
     color: #fff;

     }
   }
 }
}
.business {
  height: 1000px;
   .business-top {
   text-align: center;
  img {
    padding: 60px 0 30px 0;
  }
  h3 {
    font-size: 28px;
    color: #232F55;
    font-weight: normal;
  }
  p {
    font-size: 15px;
    color: #74798B;
    padding: 40px 0;
  }
 }
}
.el-tabs {
  // display: flex;
  // align-items: center;
  width: 1200px;
  margin: 0 auto;
}
/deep/ .el-tabs__item {
  // display: flex;
  padding:0px 95px!important;
  font-size: 20px;
  margin-bottom: 7px;
}
/deep/ .el-tabs__item:hover {
  color: #F32946;
}
/deep/ .el-tabs__item.is-active {
  color: #232F55;

}
/deep/ .el-tabs__active-bar {
  background-color:#F32946 ;
}
.tabss {
  display: flex;
  justify-content: space-evenly;
  // align-items: center;
  height: 400px;
  .tabss-left {
    width: 692px;
    height: 384px;
    margin-left: -151px;
    margin-top: 40px;

  }
  .tabss-right {
    // width: 400px;
    height: 310px;
    margin-top: 55px;

  }

}
.Successful{
  margin-top: 20px;
  height: 770px;
  background: url(../assets/lz/Successful.png), no-repeat center top;
  background-size: cover;
display: flex;
align-items: center;
justify-content: center;
 ul   {
   li {
     margin-right: 44px;
}

li:last-child{
  margin-right: 0;

}
li img {
  width: 321px;
  height: 510px;
  box-shadow: 4px 4px 14px #d9dbec;
  border-radius: 25px;
   transition: ease-in-out .8s;
  //  position: relative;

}

.img_div {
    position: relative;
    width: 312px;
    height: 510px;
}
.mask {
    position: absolute;
    border-radius: 25px;
    z-index: 9;
    top: 0;
    left: 0;
    bottom: 0;
    right: -9px;
    color: #ffffff;
    background: rgba(28, 34, 47, 0.8);

    opacity: 0;
    display: flex;
    align-items: center;

    justify-content: center;
   transition: ease-in-out .8s;

}

.img_div .mask:hover {
    opacity: 1;
    cursor: pointer;
     transform: translateY(-50px);
    background: rgba(28, 34, 47, 0.8);
    text-align: center;

}
  .img_div .mask:hover+img {
  transform: translateY(-50px);

}
.img_div .mask img {
  width: 132px;
  height: 123px;
  background:none;
  box-shadow: none;

}
 }

}
@media screen and ( max-width: 1500px) {
  .home {
    width: 100%;
  }
  .banner .cover_3 img {
    width: 368px;
    height: 272px;
}
  .banner .cover_3 {
    left: 212px;
    top: 203px;
  }
  .banner .cover_2 img {
    margin-left: 93px;
    margin-top: 50px;
    width: 91%;
}
.centent .introduce {
  width: 100%;
}
  .centent {
    width: 100%;
  }
  .Successful {
    width: 100%;
    }
    .Successful ul li {
    margin-right: 17px;
}
.Successful ul li img {
    width: 307px;
    height: 494px;

}
.Successful ul .img_div {

    width: 298px;
    height: 495px;
}
}

</style>
