<template>
  <div>
    <div class="banner">
      <el-image
        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
        :src="banner"
        fit="contain"></el-image>
      <div class="bannerInfo">青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。</div>
    </div>

    <div class="content">
      <div class="newsTitle">【央视镜头】海威物联技术支持的“智慧物流"</div>
      <div class="newsTime">
        <span>发布时间:2023/02/02</span>
        <span style="margin-left: 2.2vw">文章作者:张三</span>
      </div>
      <div class="newsSummary">
        <div class="subTitle">摘要</div>
        近日，央视记者探访目前全球规模最大的仓检一体智能物流园区-京东昆山亚一2期。在央视镜头下，由海威物联研发的输送通道式RFID设备及小件分拣机格口RFID设备格外引人注目。京东昆山亚一2期物流园共有输送通道式RFID设备100余套，小件分拣机格口RFID设备上千套，设备排列整齐划一、井然有序，实现最高可达10000件/时的分拣效率，为快递物流行业货物的运输抢到宝贵的时间。
      </div>
      <div class="newsImage">
        <el-image
          style="width: 100%; height: 100%;"
          :src="banner"
          fit="contain"></el-image>
      </div>
      <div class="newsInfo">
        <p>
          RFID作为一种非接触式的自动识别技术，通过射频信号自动识别目标对象并获取相关数据识别工作无须人工干预，可作用于各种恶劣环境。
        </p>
        <p>
          目前物流行业已在供应链全面应用RFID电子标签。包括从工厂成品仓、供应链物流、前置仓，到终端配送和逆向服务。物流行业实现通过RFID射频识别技术和自动分拣系统，突破人工作业在处理效率和准确率的局限性，使快递物流行业从劳动密集型向技术密集型升级转换。目物业已在供应链全面应用。包括从工厂成品仓、供应链物流、前置仓，到终端配送和逆向服务。物流行业实现通过RFID射频识别技术和自动分拣系统，突破人工作业在处理效率和准确率的局限性使快递物流行业从劳动密集型向技术密集型升级转换。
        </p>
      </div>
      <div class="pages">
        <div>
          <span class="standardColor">上一篇：</span><span>【年会】海威:锐意进取力拓新途</span>
        </div>
        <div>
          <span class="standardColor">下一篇：</span><span>【年会】海威:锐意进取力拓新途</span>
        </div>
      </div>
    </div>

    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import banner from '@/assets/image/banner.png'
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'

export default {
  name: 'NewsCenter',
  components: {
    ContactUs,
    Copyright
  },
  data() {
    return {
      banner
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 45%;
    text-align: left;
    font-size: 1.4vw;
    color: @standard-color;
    line-height: 2.5vw;
    letter-spacing: 4px;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 33%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(33% - 2px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}

.content {
  width: 65%;
  margin: 0 auto;

  .newsTitle {
    margin-top: 5.3vw;
    font-size: 1.8vw;
    letter-spacing: 5px;
  }

  .newsTime {
    margin-top: 1.4vw;
    font-size: 1.2vw;
    letter-spacing: 5px;
    color: #0009;
  }

  .newsSummary {
    position: relative;
    text-align: left;
    text-indent: 2em;
    width: calc(96% - 3.2vw);
    margin: 5vw auto 0;
    border: 1px dashed #0003;
    background-color: #f8f9fb;
    padding: 1.6vw;
    font-size: 1.2vw;
    letter-spacing: 2.8px;
    line-height: 2.1vw;

    .subTitle {
      text-indent: 0em;
      text-align: center;
      height: 3vw;
      line-height: 3vw;
      position: absolute;
      top: -1.5vw;
      left: 5%;
      width: 5vw;
      font-size: 1.2vw;
      white-space: nowrap;
    }
  }

  .newsImage {
    width: 96%;
    margin: 3.2vw auto 0;
  }

  .newsInfo {
    text-indent: 2em;
    text-align: left;
    width: 96%;
    margin: 2.1vw auto 0;
    font-size: 1.3vw;
    letter-spacing: 2.8px;
    line-height: 2.46vw;
  }
  .pages{
    width: 96%;
    margin: 2.5vw auto 0;
    border-top: 1px dashed #0003;
    text-align: left;
    padding-top: 2.2vw;
    font-size: 1.2vw;
    letter-spacing: 4px;
    line-height: 2.8vw;

  }
  .standardColor{
    color: @standard-color;
  }
}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}
</style>
