activity/src/view/schedule/page2.vue

<template>
  <skeleton title="诚挚邀请" titleLine="ACTIVITY TRIP">
    <div class="center2">
      <!-- <div class="wixinlogo animate__animated animate__fadeInUpBig">
        <img src="./img/wx_default.png" class="wxicon" />
        <p class="wx_name">微信昵称(自动识别)</p>
        <div class="line"></div>
      </div> -->
      <div class="centent animate__animated animate__fadeInUpBig">
        致亲爱的小伙伴们：<br />
        陕西广电融媒体集团组织线下媒体行采访活动，邀请中央重点新闻网站、省重点新闻网站、集团相关部门记者，深入西安、宝鸡、延安、榆林等地，进行实地调研采访。
        <p>主办方:陕西广电融媒体集团</p>
      </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);
.center2 {
  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: 80%;
    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;
    }
  }

  .wixinlogo {
    width: 52%;
    margin: 1em auto 0.3em auto;
    .wxicon {
      width: 50px;
      border-radius: 50%;
    }

    .wx_name {
      font-size: 14px;
      line-height: 1.5em;
    }

    .line {
      background-color: #898989;
      height: 2px;
      margin: 5px 0 0 0;
    }
  }

  .centent {
    width: 70vw;
    margin: 0 auto;
    font-size: 14px;
    line-height: 2em;
    text-align: left;

    p {
      text-align: right;
    }
  }
}
</style>