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

<template>
  <div class="app-container">
    <div class="title">澳柯玛控股集团</div>
    <div class="logo"></div>
    <div class="spanArea">
      <p>
        澳柯玛创立于<span class="redSpan" >1987</span>年，是青岛市市属国有高科技企业集团，是青岛市培育发展起来的“<span class="redSpan" >五朵金花</span>”之一，主营业务有智慧冷链、智慧家电、智慧家居制造与销售、智慧社区服务、国际贸易及跨境电商服务等，现有员工近万人。
      </p>
      <p>
        澳柯玛是全球领先的制冷家电和全冷链产品设备制造企业，建有国家级企业技术中心、国家级工业设计中心和智能制造互联工厂，产品销往世界100多个国家和地区，多年入选<span class="redSpan" >中国制造业500强</span>、<span class="redSpan" >中国轻工业百强</span>，是<span class="redSpan" >亚洲品牌500强</span>、<span class="redSpan" >中国500最具价值品牌企业</span>。
      </p>
      </div>
    <div class="img1"><img src="../../assets/model/companyIntroduction/img1.png" alt="" style="object-fit: contain;height: 100%;position: absolute;right: 0;"></div>
    <div class="img2"><img src="../../assets/model/companyIntroduction/img2.png" alt="" style="height:100%"></div>
    <div class="img3"><img src="../../assets/model/companyIntroduction/img3.png" alt="" style="height:100%"></div>
<!--    <div class="img4"><img src="../../assets/model/companyIntroduction/img4.png" alt="" style="height:100%"></div>-->
    <div class="img5"><img src="../../assets/model/companyIntroduction/img5.png" alt="" style="height:100%"></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 lang="less" 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;
}

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

.title {
  position: absolute;
  top: 5%;
  transform: translateX(-50%);
  left: 50%;
  color: red;
  font-size: 2.7vw;
  font-weight: 800;
}

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

.spanArea {
  position: absolute;
  top: 17%;
  left: 4%;
  width: calc(92% - 50vh / 552 * 765);
  height: 43%;
  color: #0d2765;
  font-size: 1.8vw;
  font-weight: bold;
  line-height: 3vw;

  p{
    text-indent: 2em;
    margin:0
  }

  .redSpan {
    color: #ff0000;
  }

}

.img1 {
  position: absolute;
  top: 17%;
  right: 4%;
  height: 50vh;
  max-height: 50vh;
  aspect-ratio: 765/552;

}
.img2{
  position: absolute;
  transform: translateX(-50%);
  bottom: 1%;
  left: 20%;
  height: 35vh;
}
.img3{
  position: absolute;
  transform: translateX(-50%);
  bottom: 1%;
  left: 50%;
  height: 35vh;
}
.img4{
  position: absolute;
  transform: translateX(-50%);
  bottom: 1%;
  left: 60%;
  height: 35vh;
}
.img5{
  position: absolute;
  transform: translateX(-50%);
  bottom: 1%;
  left: 80%;
  height: 35vh;
}
</style>