hwmom-ui/src/views/index-2.vue

<template>
  <div class="content">
    <div class="title">车间生产监控</div>

    <div class="text text1">密炼车间</div>
    <div class="text text2">计划数：169150 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>
    <div class="text text3">完成数：50669 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>

    <div class="text text4">半制品车间</div>
    <div class="text text5">计划数：274263 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>
    <div class="text text6">完成数：221560 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>

    <div class="text text7">成型车间</div>
    <div class="text text8">产量：121855 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>
    <div class="text text9">库存：875 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>

    <div class="text text10">硫化车间</div>
    <div class="text text11">产量：116431 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>
    <div class="text text12">库存：489623 <span style="font-size: 0.8vw;margin-left: 12px;">条</span></div>

    <div class="icon icon1"></div>
    <div class="text text13">工厂概括</div>
    <div class="card card1"></div>
    <div class="text text14">占地面积</div>
    <div class="text text15">956亩</div>

    <div class="card card2"></div>
    <div class="text text16">工厂用人</div>
    <div class="text text17">3350人</div>

    <div class="card card3"></div>
    <div class="text text18">建厂时间</div>
    <div class="text text19">2002.1.3</div>

    <div class="card card4"></div>
    <div class="text text20">
      <div style="height: 33%;width: 100%">
        生产半钢轮胎 <span style="margin-left: 24px;color: #95F204;font-weight: 700">956万条</span>
      </div>
      <div style="height: 33%;width: 100%">
        生产全钢轮胎 <span style="margin-left: 24px;color: #95F204;font-weight: 700">266万条</span>
      </div>
      <div style="height: 33%;width: 100%">
        生产特种轮胎 <span style="margin-left: 24px;color: #95F204;font-weight: 700">4.3万条</span>
      </div>
    </div>

<!--    <div class="btn btn1" @click="toDetail">查看详情</div>-->
<!--    <div class="btn btn2" @click="toDetail">查看详情</div>-->
<!--    <div class="btn btn3" @click="toDetail">查看详情</div>-->
    <div class="btn btn4" @click="toDetail">查看详情</div>
    <div class="back">
      <el-button type="primary" @click="back" :icon="ArrowLeft" circle />
    </div>
  </div>
</template>

<script setup>
import {
  ArrowLeft
} from '@element-plus/icons-vue';

const props = defineProps({
  changeType: Function
});
const toDetail = () => {
  props.changeType(2);
};
const back = () => {
  props.changeType(0);
};
</script>

<style lang="less" scoped>
.content {
  min-height: calc(100vh - 84px);
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/index/bg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.title {
  position: absolute;
  width: 100%;
  height: 10.2%;
  background-image: url("@/assets/images/index/title2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #40C8FF;
  text-align: center;
  font-size: 1.6vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8vw;
  white-space: nowrap;
  color: #fff;
}

.icon {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.text1 {
  left: 23.49%;
  top: 15.65%;
  width: 4.22%;
  height: 2.22%;
}

.text2 {
  left: 24.27%;
  top: 21.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}

.text3 {
  left: 24.27%;
  top: 26.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}


.text4 {
  left: 40.42%;
  top: 15.65%;
  width: 5.16%;
  height: 2.22%;
}

.text5 {
  left: 40.99%;
  top: 21.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}

.text6 {
  left: 40.99%;
  top: 26.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}


.text7 {
  left: 55.57%;
  top: 15.65%;
  width: 4.22%;
  height: 2.22%;
}

.text8 {
  left: 56.93%;
  top: 21.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}

.text9 {
  left: 56.93%;
  top: 26.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}


.text10 {
  left: 72.03%;
  top: 15.65%;
  width: 4.22%;
  height: 2.22%;
}

.text11 {
  left: 74.90%;
  top: 21.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}

.text12 {
  left: 74.90%;
  top: 26.11%;
  width: 8.80%;
  height: 2.96%;
  font-size: 1vw;
  justify-content: left;
}

.icon1 {
  background-image: url("@/assets/images/index/icon17.svg");
  left: 2.08%;
  top: 12.41%;
  width: 16.98%;
  height: 21.39%;
}


.text13 {
  left: 7.92%;
  top: 13.24%;
  width: 4.79%;
  height: 2.78%;
  font-size: 1vw;
}

.card {
  position: absolute;
  background-color: #077D92;
  border-radius: 5px;
}

.card1 {
  left: 3.23%;
  top: 17.50%;
  width: 3.91%;
  height: 3.80%;
}

.text14 {
  left: 3.23%;
  top: 17.50%;
  width: 3.91%;
  height: 3.80%;
  font-size: 0.5vw;
  align-items: start;
}

.text15 {
  color: #95F204;
  font-size: 0.5vw;
  align-items: start;
  font-weight: 700;
  left: 3.23%;
  top: 19.4%;
  width: 3.91%;
  height: 3.80%;
}


.card2 {
  left: 8.33%;
  top: 17.50%;
  width: 3.91%;
  height: 3.80%;
}

.text16 {
  left: 8.33%;
  top: 17.50%;
  width: 3.91%;
  height: 3.80%;
  font-size: 0.5vw;
  align-items: start;
}

.text17 {
  color: #95F204;
  font-size: 0.5vw;
  align-items: start;
  font-weight: 700;
  left: 8.33%;
  top: 19.4%;
  width: 3.91%;
  height: 3.80%;
}

.card3 {
  left: 14.06%;
  top: 17.50%;
  width: 3.91%;
  height: 3.80%;
}

.text18 {
  left: 14.06%;
  top: 17.50%;
  width: 3.91%;
  height: 3.80%;
  font-size: 0.5vw;
  align-items: start;
}

.text19 {
  color: #95F204;
  font-size: 0.5vw;
  align-items: start;
  font-weight: 700;
  left: 14.06%;
  top: 19.4%;
  width: 3.91%;
  height: 3.80%;
}


.card4 {
  left: 3.44%;
  top: 22.41%;
  width: 14.53%;
  height: 10.46%;
}

.text20 {
  left: 3.44%;
  top: 22.41%;
  width: 14.53%;
  height: 10.46%;
  display: inline-block;
  text-align: center;
}

.btn {
  position: absolute;
  background-color: #077D9299;
  border-radius: 5px;
  font-size: 0.6vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn1 {
  left: 33.07%;
  top: 15.28%;
  width: 4.17%;
  height: 2.59%;
}

.btn2 {
  left: 48.44%;
  top: 15.28%;
  width: 4.17%;
  height: 2.59%;
}

.btn3 {
  left: 64.84%;
  top: 15.28%;
  width: 4.17%;
  height: 2.59%;
}

.btn4 {
  left: 85.42%;
  top: 15.28%;
  width: 4.17%;
  height: 2.59%;
}

.back{
  position: absolute;
  top: 1%;
  left: 1%;
}

</style>