exercise_front/pages/index/index.vue

<template>
  <scroll-view class="background" scroll-y="true">

    <view class="transition">
      <!-- NBA图片过渡界面 -->
      <image v-show="showNBA" src="@/static/transition/nba.png" class="transition_nba"></image>
      <!-- Logo图片过渡界面 -->
      <image v-show="showLogo" src="@/static/transition/logo.png" class="transition_logo"></image>
      <!-- 签名 -->
      <view v-show="showSignature" class="transition_signature">
        <text class="transition_text">体育直播可视化系统</text>
        <text class="transition_text">102201435 龚嘉伟</text>
      </view>
    </view>


    <!-- 内容 -->
    <!--    v-show="!showNBA && !showLogo && !showSignature"-->
    <view class="content">
      <!-- 顶部Logo部分     -->
      <view class="top_logo">
        <image src="@/static/transition/nba.png" class="top_logo_nba"></image>
        <image src="@/static/transition/logo.png" class="top_logo_all_sport"></image>
      </view>
      <!-- 过渡线     -->
      <image src="@/static/content/line/line.png" class="line1"></image>
      <!-- 篮球比赛部分 -->
      <view class="basketball_match">
        <image src="@/static/content/basketball_court.png" class="image"></image>
      </view>
      <!-- 过渡线     -->
      <image src="@/static/content/line/line.png" class="line2"></image>


      <view class="team_statics">
      </view>



      <view class="human_statics">
      </view>


    </view>



  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      nbaDuration: 2000, // NBA 图片显示时长（毫秒）
      logoDuration: 2000, // Logo 图片显示时长（毫秒）
      signatureDuration: 2000, // 签名显示时长（毫秒）
      wolf_score: 0,
      laker_score: 0,
      showNBA: true, // 是否显示NBA图片  后期要改true
      showLogo: false, // 是否显示Logo图片
      showSignature: false, // 是否显示签名
    };
  },
  onLoad() {
    this.transition();
  },
  methods: {
    transition() {
      // 显示NBA图片
      setTimeout(() => {
        this.showNBA = false; // 隐藏NBA图片
        this.showLogo = true; // 显示Logo图片
        // 显示Logo图片后隐藏并显示签名
        setTimeout(() => {
          this.showLogo = false; // 隐藏Logo图片
          this.showSignature = true; // 显示签名
          // 签名显示后隐藏并显示内容
          setTimeout(() => {
            this.showSignature = false; // 隐藏签名
          }, this.signatureDuration);
        }, this.logoDuration);
      }, this.nbaDuration);
    },
  },
};
</script>
<style>
/* 定义图片渐变消失动画 */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.background {
  position: relative;
  background-color: #000000; /* 黑色背景 */
  height: 100vh; /* 设置背景高度覆盖视口 */
  overflow: auto; /* 启用滚动 */
  z-index: -1;
  /*过渡界面部分*/
  .transition{
    .transition_nba {
      position: absolute;
      height: 40%;
      width: 20%;
      left: 40%;
      top: 30%;
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
    }

    .transition_logo {
      position: absolute;
      height: 40%;
      width: 30%;
      left: 35%;
      top: 30%;
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
    }

    .transition_signature {
      position: absolute;
      top: 40%;
      width: 100%;
      text-align: center; /* 居中对齐 */
      color: #ffffff; /* 白色文字 */
      font-size: 50px; /* 调整字体大小 */
      line-height: 1.5; /* 设置行高 */
      font-weight: bold; /* 加粗 */
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
      .transition_text{
        display: block; /* 强制换行 */
        margin-bottom: 5px; /* 设置行间距（可选） */
      }
    }

  }
  /*过渡部分结束*/
  /*具体内容部分*/
  .content{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    .top_logo{
      position: absolute;
      width: 100%;
      height: 10%;
      border: 2px solid #ffffff;
      z-index: 1;

      .top_logo_nba{
        position: absolute;
        height: 80%;
        width: 5%;
        top: 10%;
        margin: 0 auto;
        display: block;
      }
      .top_logo_signature{
        position: absolute;
        width: 100%;
        height: 25%;
        margin: 0 auto;
        display: block;
        text-align: center;
        color: #ffffff;
        font-size: 20px;
        line-height: 1.5;
        font-weight: bold;
        .transition_text{
          display: block;
          margin-bottom: 5px;
        }
      }
      .top_logo_all_sport {
        position: absolute;
        height: 89%;
        width: 9%;
        top: 5%;
        left: 89%;
        margin: 0 auto;
        display: block;
      }
    }
    .line1{
      position: absolute;
      width: 80%;
      height: 2px;
      left: 10%;
      top: 12%;
      background-color: #ffffff;
      z-index: 1;
    }
    .basketball_match{
      position: absolute;
      width: 100%;
      height: 87%;
      top: 13%;
      z-index: 1;
      border: #c8c7cc 2px solid;
      .image{
        width: 90%;
        height: 90%;
        left: 5%;
        top: 3%;
      }
    }
    .line2{
      position: absolute;
      width: 80%;
      height: 2px;
      left: 10%;
      top: 12%;
      background-color: #ffffff;
      z-index: 1;
    }
    .team_statics{


    }
    .human_statics{

    }
  }





}


</style>