AyaoJies-boot/AyaoJies-app/house-master/house-life/pages/profile/aboutMe.vue

<!-- 关于作者 -->
<template>
  <view class="about">
    <like-fx ref="likeFx" :height="height" :width="width"></like-fx>
    <view class="titleZ text-center align-center">
      <text class="text-bold" style="font-size: 28px;">关于我们</text>
      <view class="contentZ">
        <text class="text-xl">
          我们专注提供专业的软件产品和技术。为合作伙伴提供安全可靠的软件产品与解决方案，共同帮助终端用户实现业务创新、快速发展。
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import LikeFx from '@/components/likeFx/likeFx.vue'

export default {
  components: {
    LikeFx
  },
  data() {
    return {
      animation_timer: null, // 动画定时器
      width: 375,
      height: 1920
    }
  },
  onLoad() {
    this._startLikeAnimation();
  },
  onUnload() {
    clearTimeout(this.animation_timer)
  },
  methods: {
    _startLikeAnimation() {
      this.animation_timer = setInterval(() => {
        this.$refs.likeFx.likeClick()
      }, 300)
    }
  }
}
</script>

<style scoped>
.align-center {
  text-align: center;
}

.titleZ {
  width: 750 rpx;
  font-size: 42 rpx;
  margin-top: 60 rpx;
}

.contentZ {
  width: 650 rpx;
  margin: 10 rpx auto 0;
  text-align: left;
}

.about-bg {
  background-size: cover;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  flex-direction: column;
  color: #fff;
}

.edit-fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 1 rpx 6 rpx rgba(0, 0, 0, 0.1);
}

.detail-imgs image {
  width: 100%;
  float: left;
  /* height:400rpx; 不定高了*/
  border: 0;
  padding: 0;
  margin: 0
}

.share-img {
  position: fixed;
  padding: 10 rpx;
  width: 100 rpx;
  height: 100 rpx;
  /* top: 680rpx; */
  bottom: 200 rpx;
  right: 20 rpx;
  z-index: 1024;
  opacity: 0.8;
  box-shadow: 0 rpx 8 rpx 30 rpx 0 rpx rgba(0, 0, 0, 0.3);
  border: none;
}

.about {
  margin: 0;
  width: 100%;
  height: 100vh;
  padding-top: 20%;
  color: #fff;
  background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
  /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
  background-size: 500% 500%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.container {
  width: 100%;
  position: absolute;
  text-align: center;
}

.like-fx {
  position: fixed;
  right: 0;
  z-index: 1024;
  pointer-events: none;
  /* background-color: red; */
}
</style>