<template>
  <div class="wrap">
    <div class="slide_five" id="slide_five">
      <div class="header_c">
        <div class="title">
          <div class="left">研发、设计、量产</div>
          <div class="right">一站式解决方案</div>
        </div>
        <div class="desc">
          外观是产品的外衣/结构是产品的骨骼/硬件是产品的肌肉/软件是产品的灵魂
        </div>
      </div>

      <div class="bottom_statement">Product Dream Factory</div>
    </div>
    <div class="main_img" id="main_img">
      <img :src="People" alt="people" class="people" />
    </div>
  </div>
</template>

<script setup>
import Factory from '@/assets/img/banner/factory.png'
import People from '@/assets/img/banner/onestop/renwu.png'
</script>

<style scoped lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  background: url(../../../../../assets/img/banner/onestop/back.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .slide_five {
    width: 100%;
    height: 100%;
    .header_c {
      position: absolute;
      top: 175px;
      left: 50%;
      transform: translate(-50%);
      width: 893px;
      .title {
        width: 855px;
        height: 77px;
        display: flex;
        border: solid 2px $theme_color;
        overflow: hidden;
        border-radius: 43px;
        align-items: center;
        margin-bottom: 50px;
        .left {
          width: 50%;
          height: 100%;
          display: flex;
          background: $theme_color;
          align-items: center;
          justify-content: center;
          font-size: 40px;
          font-family: DFPYuanW5-GB;
          font-weight: 400;
          color: #ffffff;
        }
        .right {
          width: 50%;
          background: #fff;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 42px;
          font-family: DFPYuanW7-GB;
          font-weight: 400;
          color: #000000;
        }
      }
      .desc {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        font-family: 'SourceHanSans';
        font-weight: 400;
        color: #aeaeae;
      }
    }
    .bottom_statement {
      position: absolute;
      left: 84px;
      z-index: 999;
      bottom: 75px;
      width: 165px;
      height: 11px;
      font-size: 12px;
      font-family: 'ZonaPro';
      font-weight: 400;
      color: #646a73;
      letter-spacing: 1px;
    }
  }
  .main_img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);

    .people {
      height: calc(100vh / 1.6);
      width: 100vw;
    }
  }
}
</style>
