<template>
  <div class="technology">
    <Header></Header>
    <!--  -->
  <div class="banner">
  <div class="bannercenter">
  <span class="bannertop">一体化服务模式</span>
  <span class="bannertop1">Integrated service mode</span>
  <p class="bannerbottom">提供“策划+技术+运营+商品”为核心的专业一体化服务</p>
  <p class="bannerbottom1">PROVIDE "PLANNING + TECHNOLOGY + OPERATION + COMMODITY" AS THE CORE OF PROFESSIONAL INTEGRATION SERVICES</p>
</div>
    </div>
    <!--  -->
     <div class="centent">
  <div class="module">
 <div>
   <span>专业技术开发</span>
 </div>
  <p class="module_1">领先行业的技术开发能力</p>
  <div class="Border"></div>
  <div class="Borderbottom">拥有核心技术开发人员，技术团队班底可快速响应开发需求</div>
</div>
<!--  -->
<ul class="marketing">
  <li>
    <img src="@/assets/lz2/module6.png" alt="">
    <p>场景化系统</p>
    </li>
  <li>
    <img src="@/assets/lz2/module7.png" alt="">
    <p>多功能模块</p>
    </li>
  <li>
    <img src="@/assets/lz2/module8.png" alt="">
    <p>API快捷接入</p>
    </li>

</ul>
<!--  -->
<div class="system">
<div class="systemleft">
  <img src="@/assets/lz2/system1.png" alt="">
  <h4>场景化SaaS商城系统</h4>
  <span>打造企业与用户之间互动连接的场景化权益平台</span>
  <p>酉俊将根据企业不同业务需求，提供积分商城、权益平台、分期商城、现金购商城等各种场景化商城开发服务。</p>
</div>
<div class="systemcenter"></div>
<div class="systemleft">
  <img src="@/assets/lz2/system2.png" alt="">
  <h4>营销活动SaaS系统</h4>
  <span>按需开发多种营销工具，匹配企业个性化营销需求</span>
  <p>酉俊系统拥有丰富的数字营销工具，可根据企业实际需求持续高效开发有效帮助企业获客→活客→转化→留存</p>
</div>
</div>
<!--  -->
  <div class="module">

  <p class="module_1">营销物资集采平台</p>
  <div class="Border"></div>
  <div class="Borderbottom1">最大化满足企业阳光规范、智能高效采购需求</div>
  <p class="Borderbottom">根据企业实际需求，进行专属集采平台的功能、权限、场景定制开发</p>
</div>
<!--  -->
<div class="platform">
  <div>
  <img src="@/assets/lz2/platform1.png" alt="">

  </div>
</div>
<!--  -->
  <div class="module">

  <p class="module_1">系统专业稳定，高效匹配企业专属数字化系统</p>
  <div class="Border"></div>
</div>
<!--  -->
<div class="purchasing ">
<ul>
  <li>
    <p class="purchasing1">多功能模块</p>
    <p class="purchasing2">系统成熟稳定功能实现模块化</p>
    <p class="purchasing3">可根据企业客户实际需求匹配所需的功能版块，助力高效打造企业专属数字平台</p>
    <div class="purchasing4">· 结算中心 · 账号管理 · 积分管理 · 活动中心 ·
· 商城管理 · 产品中心 · 虚拟卡券 · 订单系统 ·
· 福利礼包 · 数据分析 · 会员互动 · 奖章体系 ...</div>
    <img src="@/assets/lz2/platform2.png" alt="">
  </li>
  <li>
    <p class="purchasing1">多终端覆盖</p>
    <p class="purchasing2">系统平台实现多终端覆盖</p>
    <p class="purchasing3">酉俊可根据企业客户实际使用需求，将系统平台植入多种终端，实现随时随地协同操作办公</p>
    <div class="purchasing4">· APP · H5 · 小程序 · PC端商城 · 公众号 ·</div>
    <img src="@/assets/lz2/platform3.png" alt="">
  </li>
  <li>
    <p class="purchasing1">多平台接入</p>
    <p class="purchasing2">支持接入企业原有系统平台</p>
    <p class="purchasing3">企业自主选择接入系统，云中鹤系统实现完美兼容，满足企业客户的个性化需求</p>
    <div class="purchasing5">· 企业APP · 企业网站 · 企业微信 ·
· 企业公众号 · 阿里钉钉 · 办公OA·</div>
    <img src="@/assets/lz2/platform4.png" alt="">
  </li>
</ul>
</div>
<!--  -->
  <div class="module">
  <p class="module_1">酉俊API应用程序编程接口技术</p>
  <div class="Border"></div>
  <div class="Borderbottom">借助成熟的API技术，酉俊可将商品信息自动输送至第三方企业平台，高效快捷更精准</div>
</div>
<!--  -->
<div class="centralized">
  <div>
    <img src="@/assets/lz2/platform5.png" alt="">
  </div>
    <div class="centralizedgif">
      <img src="@/assets/lz2/platform6.gif" alt="">
    </div>
</div>
     </div>
     <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/header'
import Footer from '@/components/footer'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { Header, Footer }
}
</script>

<style lang="less" scoped>
.technology {
  width: 100%;
  overflow: hidden;
}
.banner {
 background: url(../../assets/lz2/banner.png), no-repeat center top;
 height: 610px;
 width: 100%;
 position: relative;
}
 .bannercenter {
   margin: auto;
  position: absolute;
  top: 70px; left: -137px; bottom: 0; right: 0;
    width: 50%;
  height: 50%;
   color: red;
  cursor: pointer;

   .bannertop {
     font-size: 56px;
     color: #fff;
     padding-right: 38px;
   }
   .bannertop1 {
     font-size: 18px;
    //  font-weight: normal;

     color: #A5A6AE;
   }
   .bannerbottom {
     font-size: 30px;
     color: #fff;
     padding: 56px 0 25px 0;
   }
   .bannerbottom1 {
     font-size: 18px;
     color: #A5A6AE;
     width: 747px;
     font-weight: normal;
   }
 }
  .centent {
   width: 1920px;
   margin: 0 auto;
 }
  .module {
  text-align: center;
  height: 200px;
  margin-top: 80px;
  cursor: pointer;

  span {
    color: #232F55;
    padding: 12px 36px;
    border: 1px solid #232F55;
    font-size: 28px;
    border-radius: 34px;
  }

.module_1 {
  color: #232F55;
  font-size: 28px;
  margin: 55px 0 30px;
}

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

  }
  .Borderbottom1 {
    padding-top: 20px;
color: #232F55;
font-size: 20px;
margin-bottom: 16px;
  }
  .Borderbottom {
    padding-top: 33px;
    font-size: 16px;
    color: #74798A;
  }
}
.marketing {
  width: 1220px;
  height: 265px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  li {
    cursor: pointer;
    text-align: center;
    p {
      color: #232F55;
      font-size: 20px;
      padding-top: 30px;
    }
  }
}
.system {
  width: 1920px;
  height: 420px;
  background: url(../../assets/lz2/banner.png), no-repeat center top;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 130px;
  .systemcenter {
    width: 100px;
  }
  .systemleft {
    width: 570px;
    height: 369px;
    background-color: #fff;
    color: #232F55;
    text-align: center;
    box-shadow: 0px 12px 14px #f0f0fd;
    margin-top: 110px;
    border-radius: 14px;
    img {
      margin: 30px 0;
    }
    h4 {
      font-size: 24px;
      font-weight: normal;
      margin-bottom: 19px;
    }
  p {
    width: 427px;
    font-size: 16px;
    color: #74798A;
    margin: 0 auto;
    margin-top: 30px;
  }
  }

}
.platform {
  width: 1920px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

}
.purchasing {
  height: 600px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: -80px;
  ul {
    width: 1200px;
    margin: 0 auto;

  }
  ul li {
    width: 400px;
    height: 500px;
    text-align: center;
    color: #232F55;
    .purchasing1 {
      font-size: 24px;
    }
     .purchasing2 {
      font-size: 20px;
      margin: 29px 0 30px 0;
    }
    .purchasing3 {
      width: 343px;
      margin: 0 auto;
    margin-bottom: 20px;
    }
   .purchasing4 {
      width: 281px;
      height: 70px;
      margin: 0 auto;
      font-size: 14px;
      text-align: left;
      color: #74798A;
    }
   .purchasing5 {
      width: 212px;
      height: 70px;
      margin: 0 auto;
      font-size: 14px;
      color: #74798A;
    }
  }
}
.centralized {
  height: 500px;
  display: flex;
  justify-content: center;
  position: relative;
  .centralizedgif {
    position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
  }
  }
  @media (max-width:1500px) {
    .technology {
      width: 100%;
    }
    .centent {
      width: 100%;
    }
    .system {
      width: 100%;
    }
    .platform {
      width: 100%;
    }
  }
</style>
