h5-woshidangshijiluren/pages/certificate/certificate.vue

<template>
  <div class="body">
    <u-image class="bkg" :src="require('@/static/certificate-bkg.png')" mode="widthFix"></u-image>
    <u-image class="city" mode="widthFix" width="100vw" :src="require('@/static/city.png')"></u-image>
    <u-image class="people" mode="widthFix" :width="298" :src="require('@/static/people.png')"></u-image>
    <u-image mode="widthFix" width="100vw" class="piaodai" :src="require('@/static/piaodai.png')"></u-image>
    <u-image class="share" mode="scaleToFill" :width="99" :height="99" :src="require('@/static/share.png')"> mode=</u-image>
    <div class="content">
      <u-image style="display:flex;align-items: center;margin: auto;" mode="widthFix" :width="335" :src="require('@/static/certificate-word.png')"></u-image>

      <div class="container">
        <u-image class="container__jiangbei" :height="206" mode="heightFix" :src="require('@/static/jiangbei.png')"></u-image>
        <u-image class="container__bkg" height="100%" width="100%" mode="scaleToFill" :src="require('@/static/container-bkg.png')"></u-image>

        <div class="container__text">
          <div class="container__text--title">
            <span>王晓明</span>同学，
          </div>
          <div class="container__text--total">
            你已完成2023年“我是党史记录人——红色少年行”未成年人研学线上打卡。
          </div>
          <div class="container__text--total">
            学党史悟精神聚力量，你是第<span>2023</span>位完成者，快邀请你的同学一起完成线上打卡吧!
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      主办单位：中共苏州市委党史工作办公室 <br>
      承办单位：江苏有线苏州分公司
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="scss">
.body {
  min-height: 100vh;

  position: relative;
}
.footer {
  text-align: center;
  font-size: 18rpx;
  font-weight: 400;
  color: #F8DB97;

  padding: 20rpx 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-6-26 17:51:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  15% {
    transform: scale3d(1.25, 0.75, 1);
  }
  20% {
    transform: scale3d(0.75, 1.25, 1);
  }
  25% {
    transform: scale3d(1.15, 0.85, 1);
  }
  33% {
    transform: scale3d(0.95, 1.05, 1);
  }
  38% {
    transform: scale3d(1.05, 0.95, 1);
  }
  50% {
    transform: scale3d(1, 1, 1);
  }
}

.share {
  animation: jello-horizontal 3.2s both infinite;

  position: fixed;
  left: 55rpx;
  bottom: 86rpx;
}
.people {

  position: absolute;
  right: 23rpx;
  bottom: 0;
}
.city {

  position: absolute;
  left: 0;
  right: 0;
  bottom: 154rpx;
}
.piaodai {

  position: absolute;
  left: 0;
  right: 0;
  bottom: -22rpx;
}
.bkg {

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {

  padding-top: 143rpx;
  position: relative;

  .container {

    z-index: 2;
    margin-top: 23rpx;
    position: relative;
    &__jiangbei {
      display: flex;
      justify-content: center;

      z-index: 3;
      position: relative;
    }
    &__bkg {

      z-index: 1;
      position: absolute;
      top: 103rpx;
      bottom: 0;
      left: 0;
      right: 0;
    }


    &__text {

      z-index: 4;
      padding: 61rpx 63rpx 0 104rpx;
      position: relative;
      &--title {
        font-weight: 400;
        color: #6F6F6F;
        font-size: 28rpx;
        line-height: 56rpx;

        & > span {
          color: #FD4949;
          line-height: 56rpx;
          text-decoration-color: #6F6F6F;
          text-decoration: underline;

        }
      }
      &--total {
        text-indent: 56rpx;
        font-weight: 400;
        color: #6F6F6F;
        font-size: 28rpx;
        line-height: 56rpx;

        & > span {
          color: #FD4949;
          line-height: 56rpx;
          text-decoration-color: #6F6F6F;
          text-decoration: underline;

        }
      }
    }
  }
}
</style>