<template>
  <div class="intro brightness" v-clickoutside="handleoutside" @touchmove.stop>
    <div>
      <div>
        <p>第十五届中国国际航空航天博览会</p>
        <div class="desc">
          “中国国际航空航天博览会”（简称中国航展）是唯一由国务院批准的大型国际航展。自1996年举办首届以来，中国航展已成功举办了十四届，参观的专业观众累计达1116000人次，普通观众累计达3720000人次，展会期间成交额累计达1389亿美元。中国航展现已成为集贸易性、专业性、观赏性为一体，代表当今世界航空航天科技主流的国际盛会，已跻身于世界五大航展之列。
        </div>
        <div class="desc">
          作为“国家行为”，中国航展得到了党和国家领导人的高度重视。在第十二届中国航展开幕式上，习近平总书记为航展特致贺信，充分体现了习总书记和党中央对中国航展的高度重视、亲切关怀和大力支持，给中国航展指明了发展方向、提供了根本遵循。
        </div>
        <div class="desc">
          二十多年来，伴随着我国航空航天及国防事业的蓬勃发展，中国航展已发展成为促进世界航空航天科技发展、推动国际交流合作和世界各国人民共享航空航天技术发展成果的重要平台，也是“扬我国威、振我军威”的重要舞台和爱国主义、国防教育的重要载体，是一张闪亮的“国家名片”。
        </div>

        <div class="desc">
          第十五届中国航展将于2022年11月8日—13日在珠海国际航展中心举行。本届航展将深入学习贯彻习近平总书记致第十二届中国航展贺信的重要指示精神，全面推进航展各项筹办工作，办成一届更安全、更圆满、更精彩的蓝天盛会。
        </div>
      </div>
      <img
        class="close"
        @click.stop="$emit('close')"
        :src="require('@/assets/images/close.png')"
      />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleoutside() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
@bx: 0 3px 6px rgba(0, 0, 0, 1);
@bc: rgba(12, 91, 246, 0.8);
@animation: 0.3s ease all;
.intro {
  text-align: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  > div {
    padding: 30px 20px;
    width: 90%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    max-height: 80vh;
    > div {
      max-height: 70vh;
      overflow-y: auto;
      > p {
        margin-bottom: 20px;
      }
      .desc {
        margin: 0 0;
        line-height: 1.5;
        text-align: justify;
        max-height: 70vh;
        overflow-y: auto;
        text-indent: 32px;
      }
    }
    .close {
      position: absolute;
      bottom: -18px;
      width: 36px;
      padding: 8px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 30px;
      box-shadow: @bx;
      background-color: @bc;
    }
  }
}
</style>
