<template>
  <div class="web_of_thing_container">
    <div class="main_content">
      <div class="big_title" id="webofthing_ani">
        <p class="line"></p>
        物联网技术储备
      </div>
      <div class="btn">多年物联网技术开发经验</div>
      <div id="webofthing_img_ani">
        <img :src="Project" class="pro_img" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Project from '@/assets/img/web/zuo1.png'
</script>

<style lang="scss" scoped>
.web_of_thing_container {
  width: 100%;
  height: 100%;
  background: url(../../../../assets/img/web/back.gif) no-repeat;
  background-position: 100%;
  background-size: auto 100%;
  position: relative;
  .main_content {
    position: absolute;
    left: 240px;
    top: 55%;
    transform: translateY(-50%);
    .big_title {
      font-size: 44px;
      font-family: DFPYuanW7-GB;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 34px;
      position: relative;
      .line {
        position: absolute;
        top: -28px;
        left: 0;
        width: 56px;
        height: 6px;
        background: #283fe7;
        border-radius: 3px;
      }
    }
    .btn {
      width: 281px;
      height: 49px;
      background: #283fe7;
      border-radius: 24px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 59px;
    }
    .pro_img {
      width: 347px;
      height: 328px;
    }
  }
  .right_img {
    position: absolute;
    right: 195px;
    top: 50%;
    transform: translateY(-50%);
    width: 773px;
    height: 768px;
  }
}
</style>
