activity/src/view/schedule/page8.vue

<template>
  <skeleton title="会议环境" titleLine="ACTIVITY TRIP">
    <div class="main">
        <img src="./img/environment.webp" class="line1 animate__animated animate__fadeInUp" style="margin: 0;" />
        <div style="animation-delay: 0.2s;" class="line1 animate__animated animate__fadeInUp">
            <img src="./img/environment2-1.webp" class="flex2">
            <img src="./img/environment2-2.webp" class="flex1">
        </div>
        <div style="animation-delay: 0.4s;" class="line1 animate__animated animate__fadeInUp">
            <img src="./img/environment2-2.webp" class="flex1">
            <img src="./img/environment2-1.webp" class="flex2">
        </div>
    </div>
  </skeleton>
</template>
<script setup>
import skeleton from './skeleton.vue';

</script>
<style lang="scss">
// 动画库
@import url(./sass/animation.scss);
@import url(./sass/base.scss);
.main {
  width: 80%;
  margin: -1em auto 0 auto;

  .line1{
    width: 100%;
    height: 17vh;
    margin-bottom: .25em;

    .flex2{
        display: inline-block;
        width: 66%;
        margin: .1em .05em 0 0;
        height: 100%;
    }

    .flex1{
        display: inline-block;
        width: 33%;
        margin: .1em 0 0 .05em;
        height: 100%;
    }
  }

  img{
    border-radius: 3px;
    border: 1px solid #79539e;
  }

}
</style>