vis389/src/views/bigScreen/drivingCabin/center.vue

<template>
  <div>
    <container3>
      <img src="./conter.png" style="width: 100%;height:100%">
      <div class="con_right">
        <div class="con_title">
          <img src="./conter1-1.png" alt="">
          <span style="margin-left:2px">正在工作</span>
        </div>
        <div class="con_height"></div>
        <div class="com_img"><img src="./conter1-2.png" alt=""></div>
      </div>
      <div class="con_right con_two">
        <div class="con_title">
          <img src="./conter1-1.png" alt="">
          <span>正在工作</span>
        </div>
        <div class="con_height"></div>
        <div class="com_img"><img src="./conter1-2.png" alt=""></div>
      </div>
      <div class="con_left">
        <div class="con_left_title">
          <img src="./conter2-1.png" alt="">
          <div class="con_card">
            <div>
              <span>当日生产任务</span>
              <span>2890</span>
            </div>
            <div style="margin:7px 0">
              <span>正在执行中任务</span>
              <span>542</span>
            </div>
            <div>
              <span>已完成</span>
              <span>2348</span>
            </div>
          </div>
        </div>
        <div class="con_h_two">
          <div class="con_bottom">
            <img src="./conter2-2.png" alt="">
          </div>
        </div>
      </div>
    </container3>
  </div>

</template>

<script>
import container3 from "../components/container3/index.vue";

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
  mixins: [resize],
  name: 'left1',
  components: {
    container3,
  },
  data () {
    return {}
  },
  mounted () {

  },
  beforeDestroy () {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.container3{
  position: relative;
  .con_right{
    width: 88px;
    position: absolute;
    top: 20%;
    right: 20%;
    color: #00FFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 100%;
    }
    .con_title{
      width: 100%;
      display: flex;
      align-items: center;
      img{
        width: 25%;
      }
    }
    .con_height{
      width:2px;
      height:20px;
      background-color:#00FFFF;
    }
  }
  .con_two{
    top: 43%;
    right: 12%;
  }
  .con_left{
    width: 186px;
    position: absolute;
    top: 60%;
    left: 24%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    img{
      width: 100%;
      display: block;
      margin: 0 auto;
    }
    .con_left_title{
      position: relative;
      .con_card{
        width: 100%;
        padding: 0 10px;
        position: absolute;
        top: 22%;
        div{
          width: 100%;
          display: flex;
          justify-content: space-between;
          span:nth-child(1){
            opacity: .9;
          }
          span:nth-child(2){
            font-weight: bold;
          }
        }
      }
    }
    .con_h_two{
      position: relative;
      width: 50%;
      height: 47px;
      border: 1px solid #FA8C16;
      border-top-width: 0;
      border-right-width: 0;
      .con_bottom{
        height: 24px;
        line-height: 26px;
        position: absolute;
        right: -50%;
        bottom: -50%;
        text-align: right;
        transform: translate(-50%,-50%);
      img{
        width: 38%;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
      }
    }
    }
  }
}
</style>