activity/src/view/schedule/skeleton.vue

<template>
  <div class="page-skeleton">
    <img
      src="./img/secondhead.webp"
      class="i1 animate__animated animate__backInLeft"
    />

    <div class="center">
      <p
        class="title animate__animated animate__backInRight"
        v-text="titleLine"
      ></p>
      <div class="title_text">
        <div class="icon animate__animated animate__lightSpeedInLeft">
          <div class="dh"></div>
        </div>
        <span
          style="display: block"
          class="animate__animated animate__backInLeft"
        >
          {{ title }}
        </span>
        <div class="line animate__animated animate__lightSpeedInRight"></div>
      </div>
      <div class="centent">
        <slot></slot>
      </div>
    </div>

    <div class="bottom">
      <div class="animate__animated animate__bounceInUp">
        陕西广电融媒体集团
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
import 'animate.css';
defineProps({
  title: {
    type: String, //参数类型
    default: String, //默认值
    required: true, //是否必须传递
  },
  titleLine: {
    type: String, //参数类型
    default: String, //默认值
    required: true, //是否必须传递
  },
});
</script>
<style lang="scss">
// 动画库
@import url(./sass/animation.scss);
@import url(./sass/base.scss);
.page-skeleton {
  background-color: #fff;
  padding: 21vh 0 12vh 0;
  position: relative;
  margin: 0 auto;
  font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, 宋体, sans-serif;
  font-weight: 400;

  .i1 {
    position: absolute;
    z-index: 8;
    top: 0;
    width: 100%;
    height: 21vh;
    transform: rotateZ(0deg);
    display: block;
  }

  .bottom {
    position: absolute;
    background-color: #502e74;
    color: #fff;
    text-align: center;
    bottom: 0;
    width: 100%;
    height: 11.5vh;
    font-size: 12px;
    padding: 10px 0 0 0;
  }

  .center {
    height: 64vh;
    text-align: center;
    line-height: 2em;

    .title {
      line-height: 2.5em;
      font-size: 18px;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      color: #200c38;
      text-indent: justify;
      letter-spacing: 0.58em;
    }

    .title_text {
      width: 85%;
      margin: 0 auto;
      padding-left: 2.5em;
      height: 2em;
      text-align: left;
      position: relative;

      .icon {
        position: absolute;
        left: 0;
        width: 2em;
        height: 2em;

        &::after,
        &::before,
        .dh {
          display: block;
          content: ' ';
          width: 80%;
          height: 80%;
          background-color: #050308;
          position: absolute;
          top: 5%;
          left: 5%;
          z-index: 1;
        }
        &::after,
        .dh {
          background-color: #654987;
          z-index: 0;
          top: 15%;
          left: 25%;
        }

        .dh {
          z-index: 1;
          -webkit-animation: second-page-icon 1.2s linear infinite;
          -moz-animation: second-page-icon 1.2s linear infinite;
          -o-animation: second-page-icon 1.2s linear infinite;
          animation: second-page-icon 1.2s linear infinite;
        }
      }

      .line {
        height: 3px;
        width: calc(100% + 2.5em);
        background-color: #654987;
        margin-left: -2.5em;
        margin-top: 0.25em;
      }
    }

    .centent {
      width: 85%;
      margin: 2em auto 0 auto;
      font-size: 14px;
      line-height: 1.5em;
      text-align: left;
      text-indent: justify;
      letter-spacing: 0.08em;
      color: #000;

      > h2 {
        margin-bottom: 10px;
      }
    }
  }
}
</style>