<template>
  <div class="about">
    <Header></Header>
    <div class="banner">
    <div class="bannercenter">
  <span class="bannertop">酉俊科技</span>
  <span class="bannertop1">Youjun Technology</span>
  <p class="bannerbottom">企业营销物资数字化采购整体解决方案服务商</p>
  <p class="bannerbottom1">ENTERPRISE MARKETING MATERIAL DIGITAL PROCUREMENT OVERALL
SOLUTION SERVICE PROVIDER</p>
</div>
    </div>
 <div class="centent">
<div class="module">
  <!-- <img src="@/assets/lz/icon.png" alt=""> -->
  <p class="module_1">为什么选择我们</p>
  <div class="Border"></div>
</div>
<ul class="module-bottom">
  <li>
    <img src="@/assets/lz1/module1.png" alt="">
    <div>
      <span class="module1">严谨</span>
      <span class="module2">作品交付</span>
    </div>
    <p>标准化项目执行机制，每个项目都
经过专业工程师严格测试，10名以
上项目负责人重重把控全力以赴，
追求品质。</p>
  </li>

  <li>
    <img src="@/assets/lz1/module2.png" alt="">
<div>
  <span class="module1">优异</span>
  <span class="module2">服务体验</span>
</div>
<p>准确把握客户需求，有效落地为客户精心打造，原创设计体验透明服务价格标准，网站终身使用提供独立后台，丰富功能，利于优化</p>
  </li>
  <li>
    <img src="@/assets/lz1/module3.png" alt="">
    <div>
      <span class="module1">有效 </span>
      <span class="module2">项目执行</span>
    </div>
    <p>标准化项目执行机制，每个项目都经过专业工程师严格测试，10名以上项目负责人重重把控全力以赴，追求品质。</p>
  </li>
</ul>
<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="sense">
<div class="module">
  <!-- <img src="@/assets/lz/icon.png" alt=""> -->
  <p class="module_1">价值观</p>
  <div class="Border"></div>
</div>
<ul class="senseul">
  <li>
    <div class="sensetop">
      <div class="senseleft">
        <p class="senseleft1">创新</p>
        <p class="senseleft2">creative spirit</p>
      </div>
      <div class="senseright"></div>
    </div>
    <div class="sensebottom">永葆创新热情</div>
  </li>
  <li>
    <div class="sensetop">
      <div class="senseleft">
        <p class="senseleft1">上进</p>
        <p class="senseleft2">Make progress</p>
      </div>
      <div class="senseright"></div>
    </div>
    <div class="sensebottom">成为更好的自己</div>
  </li>
  <li>
    <div class="sensetop">
      <div class="senseleft">
        <p class="senseleft1">深钻</p>
        <p class="senseleft2">Deep research</p>
      </div>
      <div class="senseright"></div>
    </div>
    <div class="sensebottom">突破瓶颈、追求精益</div>
  </li>
  <li>
    <div class="sensetop">
      <div class="senseleft">
        <p class="senseleft1">责任</p>
        <p class="senseleft2">responsibility</p>
      </div>
      <div class="senseright"></div>
    </div>
    <div class="sensebottom">尽职尽责、勇于承担</div>
  </li>
</ul>
</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>
.about {
  width: 100%;
  overflow: hidden;
}
.banner {
 background: url(../assets/lz1/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;
   .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: 633px;
     font-weight: normal;
   }
 }
 .centent {
   width: 1920px;
   margin: 0 auto;
 }
 .module {
  text-align: center;
  height: 85px;
  // margin-top: 40px;

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

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

  }
}
.module-bottom {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 540px;
}
.module-bottom li {
  width: 370px;
  height: 400px;
  text-align: center;
  transition: ease-in-out 0.5s;
  img {
    // border: 1px dashed #ccc;
    margin: 15px 0;
  }
}
.module-bottom  .module1 {
  font-size: 22px;
  color: #232F55;
  padding-right: 10px;
}
.module-bottom  .module2 {
    font-size: 18px;
  color: #232F55;
}
.module-bottom p{
  color: #74798A;
  font-size: 16px;
  width: 256px;
  margin: 0 auto;
  padding-top: 20px;
}
.module-bottom li:hover {
  color: #fff;
  background-color: #8080FC;
  border-radius: 8px;
  transform: scale(1.1);
  p {
    color: #fff;
  }
  span {
    color: #fff;
  }

}
.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;
}
.sense {
  width: 1920px;
}
.senseul {
  width: 1220px;
  height: 290px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
  .sensetop{
    display: flex;
    align-items: flex-end;
  }
  .senseleft {
    text-align: right;
    .senseleft1 {
      font-size: 28px;
      color: #232F55;
    }
    .senseleft2 {
      font-size: 28px;
      color: #AAB2CB;
    }
  }
  .senseright {
    width: 55px;
    height: 55px;
    border-bottom: 1px solid #AEB1E0;

    transform: rotate(-45deg);
    margin-bottom: 23px;
  }
  .sensebottom {
    font-size: 16px;
    color: #232F55;
    margin-top: 28px;
  }
}
@media (max-width: 1500px) {
.centent {
  width: 100%;
}
.introduce {
  width: 100%;
}
.sense {
  width: 100%;
}
}
</style>
