zs_aucma-mes-ui/src/views/model/factoryIntroduction.vue

<template>
  <div class="app-container">
    <div class="title">河南澳柯玛智能产业园</div>
    <div class="logo"></div>
    <!--    <div class="title1">首个商用智慧大规模个性化定制的智能互联工厂</div>-->
    <div class="box1">
      <img src="../../assets/model/factoryIntroduction/img1.png" alt="" style="height: calc(38vh - 16px)">
    </div>
    <div class="box2">
      <img src="../../assets/model/factoryIntroduction/img.png" alt="" style="height: 38vh">
    </div>
    <div class="box3">
      <img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
      <div class="boxTitle">一 园 三 中 心</div>
      <p>1. 澳柯玛中国区智能制造中心，大规模冷柜生产基地</p>
      <p>2. 华中营销中心，辐射晋、陕、甘、皖、鄂、川、渝等</p>
      <p>3. 华中仓储物流中心，构建统一的物流产业体系<br>智能产业园建成后，形成集生产、销售、仓储物流一体化</p>
    </div>
    <div class="box4">
      <img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
      <div class="boxTitle">技 术 应 用</div>
      <p>澳云数智自主可控工业互联网平台、数字孪生、大数据分析、<br>
        MES、SCADA、质量分析SPC、能源管理EMS<br>
        混流自动成型钣金线、双进双出高效直线发泡、工业机器人<br>
        采用行业领先的R134a混合多元醇发泡体系，产品节能环保
      </p>
    </div>
    <div class="exit" @click="exitFun"></div>
  </div>
</template>

<script>

export default {
  name: "Liner",
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style scoped>
.app-container {
  background-image: url("~@/assets/model/factoryIntroduction/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.title {
  position: absolute;
  top: 5%;
  transform: translateX(-50%);
  left: 50%;
  color: red;
  font-size: 2.7vw;
  font-weight: 800;
}
.logo {
  background-image: url("../../assets/board/logo1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: -3%;
  left: 0.5%;
}

.title1 {
  position: absolute;
  top: 20%;
  left: 5%;
  font-size: 1.3vw;
  font-weight: bold;
  color: rgb(32, 56, 100);
}

.box1 {
  position: absolute;
  top: 25%;
  left: 5%;
  padding: 8px;
}

.box2 {
  position: absolute;
  top: 25%;
  right: 5%;
}

.box3 {
  position: absolute;
  top: 65%;
  left: 5%;
  width: 43%;
  height: 30%;
}

.box4 {
  position: absolute;
  top: 65%;
  right: 5%;
  width: 43%;
  height: 30%;
}

.box3 .boxTitle, .box4 .boxTitle {
  color: red;
  font-weight: bold;
  font-size: 1.3vw;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.box3 p, .box4 p {
  margin: 0;
  color: rgb(32, 56, 100);
  font-size: 1.3vw;
  line-height: 3vw;
  font-weight: bold;

}

.box4 p {
  line-height: 3vw;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}
</style>