<template>
  <div class="app-container">
    <div class="title">澳柯玛智慧绿色智能制造工厂</div>
    <div class="title1">首个商用智慧大规模个性化定制的智能互联工厂</div>
    <div class="box1">
      <img src="../../assets/model/factoryIntroduction/img1.jpg" 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. 西海岸新区“高端制造业+人工智能”试点示范项目</p>
    </div>
    <div class="box4">
      <img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
      <div class="boxTitle">技 术 应 用</div>
      <p>自主可控工业互联网平台、大数据分析、数字孪生、制造执行MES、数据采集与监控控制SCADA、智能化仓储物流WMS、质量分析SPC、数字化研发PLM、能源管理EMS、视觉检测……</p>
      <p>16条智能化生产线、40台工业机器人、钣金全自动成型、门体立体库……</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;
}

.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;
  background-color: #fff;
  box-shadow: 2px 2px 10px 3px #ccc;
}

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

  color: rgb(32, 56, 100);
  font-size: 1.3vw;
  line-height: 1.5vw;
  font-weight: bold;

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