logpm_page/src/views/wel/index.vue

<template>
  <div class="bx">
    <div class="left">
      <div class="tptitl">
        <img src="./static/topicon.png" />
        <span>发货操作</span>
      </div>
      <div class="onebx1">
        <div class="item1">
          <img src="./static/1.png" />
          <span>提货</span>
        </div>
        <div class="item2">
          <img src="./static/2.png" />
          <span>预开单</span>
        </div>
        <div class="item3">
          <img src="./static/3.png" />
          <span>创建运单</span>
        </div>
        <div class="item4">
          <img src="./static/4.png" />
          <span>补录运单</span>
        </div>
        <div class="item5">
          <img src="./static/5.png" />
          <span>短驳发车</span>
        </div>
        <div class="item6">
          <img src="./static/6.png" />
          <span>外部中转</span>
        </div>
        <div class="item7">
          <img src="./static/7.png" />
          <span>库存管理</span>
        </div>
        <div class="item8">
          <img src="./static/8.png" />
          <span>车辆配载</span>
        </div>
        <img class="upimg" src="./static/up.png" />
        <img class="rigth1" src="./static/rigth.png" />
        <img class="rigth2" src="./static/rigth.png" />
        <img class="rigth3" src="./static/rigth.png" />
        <img class="rigth4" src="./static/rigth.png" />
        <img class="rigthall" src="./static/rigthall.png" />
      </div>
    </div>
    <div class="ztjk">
      <img src="./static/9.png" />
      <span>到货操作</span>
    </div>
    <div class="rigth">
      <div class="tptitl">
        <img src="./static/topicon.png" />
        <span>到货操作</span>
      </div>
      <div class="onebx1">
        <div class="item1">
          <img src="./static/10.png" />
          <span>到站卸车</span>
        </div>
        <div class="item2">
          <img src="./static/11.png" />
          <span>库存管理</span>
        </div>
        <div class="item3">
          <img src="./static/12.png" />
          <span>短驳接收</span>
        </div>
        <div class="item4">
          <img src="./static/13.png" />
          <span>外部中转</span>
        </div>
        <div class="item5">
          <img src="./static/14.png" />
          <span>送货</span>
        </div>
        <div class="item6">
          <img src="./static/15.png" />
          <span>中转签收</span>
        </div>
        <div class="item7">
          <img src="./static/16.png" />
          <span>送货签收</span>
        </div>
        <div class="item8">
          <img src="./static/17.png" />
          <span>自提签收</span>
        </div>
        <img class="upimg" src="./static/down.png" />
        <img class="rigth1" src="./static/rigth.png" />
        <img class="rigth2" src="./static/rigth.png" />
        <img class="rigth3" src="./static/rigth.png" />
        <img class="rigth4" src="./static/rigth.png" />
        <img class="rigthall" src="./static/rigthall.png" />
        <img class="leftall" src="./static/leftall.png" />
      </div>
    </div>
    <div class="buts">
      <div class="tptitl">
        <img src="./static/topicon.png" />
        <span>回单管理</span>
      </div>
      <div class="onebx1">
        <div class="item1">
          <img src="./static/18.png" />
          <span>回单回收</span>
        </div>
        <div class="item2">
          <img src="./static/19.png" />
          <span>回单寄出</span>
        </div>
        <div class="item3">
          <img src="./static/20.png" />
          <span>回单接收</span>
        </div>
        <div class="item4">
          <img src="./static/21.png" />
          <span>回单发放</span>
        </div>
        <img class="left1" src="./static/rigth.png" />
        <img class="left2" src="./static/rigth.png" />
        <img class="left3" src="./static/rigth.png" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup></script>
<style lang="scss">
.bx {
  position: relative;
  .ztjk {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    font-size: 14px;
    font-size: #747474;
    top: 235px;
    left: 680px;
    > img {
      width: 62px;
      height: 62px;
    }
  }
  .left {
    width: 640px !important;
    height: 500px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(211, 131, 42, 0.1);
    border-radius: 32px;
    opacity: 1;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    top: 10px;
    padding: 30px 44px;
    .tptitl {
      display: flex;
      align-items: center;
      > img {
        width: 32px;
        height: 22px;
        margin-right: 8px;
      }
    }
    .onebx1 {
      width: 100%;
      height: 100%;
      position: relative;
      margin-top: 30px;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        font-size: 14px;
        font-size: #747474;
        > img {
          width: 62px;
          height: 62px;
        }
      }
      .item1 {
        top: 10px;
        left: 0px;
      }
      .item2 {
        top: 140px;
        left: 0px;
      }
      .item3 {
        top: 10px;
        left: 140px;
      }
      .item4 {
        top: 140px;
        left: 140px;
      }
      .item5 {
        top: 270px;
        left: 140px;
      }
      .item6 {
        top: 10px;
        left: 330px;
      }
      .item7 {
        top: 140px;
        left: 330px;
      }
      .item8 {
        top: 140px;
        left: 450px;
      }
      .upimg {
        width: 15px;
        height: 40px;
        position: absolute;
        left: 355px;
        top: 100px;
      }
      .rigth1 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 80px;
        top: 40px;
      }
      .rigth2 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 80px;
        top: 180px;
      }
      .rigth3 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 400px;
        top: 180px;
      }
      .rigth4 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 530px;
        top: 180px;
      }
      .rigthall {
        width: 40px;
        height: 270px;
        position: absolute;
        left: 250px;
        top: 50px;
      }
    }
  }
  .rigth {
    width: 640px;
    height: 500px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(58, 216, 188, 0.102);
    border-radius: 32px;
    opacity: 1;
    box-sizing: border-box;
    position: absolute;
    left: 760px;
    top: 10px;
    padding: 30px 44px;
    .tptitl {
      display: flex;
      align-items: center;
      > img {
        width: 32px;
        height: 22px;
        margin-right: 8px;
      }
    }
    .onebx1 {
      width: 100%;
      height: 100%;
      position: relative;
      margin-top: 30px;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        font-size: 14px;
        font-size: #747474;
        > img {
          width: 62px;
          height: 62px;
        }
      }
      .item1 {
        top: 140px;
        left: 50px;
      }
      .item2 {
        top: 140px;
        left: 170px;
      }
      .item3 {
        top: 270px;
        left: 170px;
      }
      .item4 {
        top: 10px;
        left: 300px;
      }
      .item5 {
        top: 140px;
        left: 300px;
      }
      .item6 {
        top: 10px;
        left: 430px;
      }
      .item7 {
        top: 140px;
        left: 430px;
      }
      .item8 {
        top: 270px;
        left: 430px;
      }
      .upimg {
        width: 15px;
        height: 40px;
        position: absolute;
        left: 190px;
        top: 230px;
      }
      .rigth1 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 0px;
        top: 180px;
      }
      .rigth2 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 120px;
        top: 180px;
      }
      .rigth3 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 375px;
        top: 180px;
      }
      .rigth4 {
        width: 40px;
        height: 15px;
        position: absolute;
        left: 375px;
        top: 50px;
      }
      .leftall {
        width: 182px;
        height: 540px;
        position: absolute;
        left: 350px;
        top: 50px;
        z-index: 99;
      }
      .rigthall {
        width: 40px;
        height: 270px;
        position: absolute;
        left: 250px;
        top: 50px;
      }
    }
  }
  .buts {
    width: 1380px;
    height: 234px;
    background: #ffffff;
    box-shadow: 0 0 16px 0 rgba(0, 134, 241, 0.102);
    border-radius: 32px;
    opacity: 1;
    position: absolute;
    box-sizing: border-box;
    left: 20px;
    top: 540px;
    padding: 30px 44px;
    .tptitl {
      display: flex;
      align-items: center;
      > img {
        width: 32px;
        height: 22px;
        margin-right: 8px;
      }
    }
    .onebx1{
      width: 100%;
      height: 100%;
      position: relative;
      margin-top: 30px;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        font-size: 14px;
        font-size: #747474;
        > img {
          width: 62px;
          height: 62px;
        }
      }
      .item1{
        left: 1000px;
        top:10px;
      }
      .item2{
        left: 800px;
        top:10px;
      }
      .item3{
        left: 600px;
        top:10px;
      }
      .item4{
        left: 400px;
        top:10px;
      }
      .left1{
        width: 60px;
        height: 15px;
        position: absolute;
        left: 900px;
        top: 50px;
        transform: rotate(180deg);
      }
      .left2{
        width: 60px;
        height: 15px;
        position: absolute;
        left: 700px;
        top: 50px;
        transform: rotate(180deg);
      }
      .left3{
        width: 60px;
        height: 15px;
        position: absolute;
        left: 500px;
        top: 50px;
        transform: rotate(180deg);
      }
    }
  }
}
.tptitl{
  color: #172E60;
}
.bx{
  user-select: none;
}
</style>