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

<template>
  <div>
    <container3>
      <img class="img" src="./conter2.jpg" style="width: 100%;height:100%">
      <rocketTit class="tit">今日动态</rocketTit>
      <div class="data">
        <div class="data-item">
          <div>收入</div>
          <div><span class="num">3380</span>万</div>
        </div>
        <div class="data-item">
          <div>支出</div>
          <div><span class="num">3380</span>万</div>
        </div>
        <div class="data-item">
          <div>合同</div>
          <div><span class="num">3380</span>份</div>
        </div>
        <div class="data-item">
          <div>装药任务</div>
          <div><span class="num">3380</span>件</div>
        </div>
        <div class="data-item">
          <div>职工出勤数</div>
          <div><span class="num">3380</span>人</div>
        </div>
        <div class="data-item">
          <div>职工出勤数</div>
          <div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div>
        </div>
      </div>

      <!-- <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 rocketTit from "../components/rocketTit/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,
    rocketTit,
  },
  data () {
    return {}
  },
  mounted () {

  },
  beforeDestroy () {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.tit {
  padding: 16px 24px; 
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.data {
  display: flex;
  margin: 0 15px;
  background: rgba(2, 18, 63, 0.4);
  color: #FFFFFF;
  font-size: 18px;
  .data-item {
    flex: 1;
    >div {
      margin: 5px 0;
      text-align: center;
    }
    .num {
      font-size: 28px;
      font-family: Roboto-BlackItalic, Roboto;
      font-weight: 600;
      color: #55C5A2;
      vertical-align: sub;
      padding-right: 3px;
    }
  }
}

.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>