启动页样式修改

gaoluyang

4 天以前 eb62444060a1867ffea6f6c676c8ca55e620f4b6

 src/pages/splash.vue

@@ -1,7 +1,10 @@
<template>
  <div class="splash-container">
    <span class="title">科技</span>
    <span class="title1">便携生活</span>
      <div class="title-container">
        <span class="title-large">科技</span>
        <span class="title-small">便捷生活</span>
      </div>
      <span class="bottom-text">芯导云（管理信息系统）</span>
  </div>
</template>

@@ -19,7 +22,7 @@
    // #ifndef H5
    uni.reLaunch({ url: '/pages/login' })
    // #endif
  }, 2000)
  }, 3500)
})
</script>

@@ -31,16 +34,96 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  background: linear-gradient(135deg, rgba(0,117,255,0.3) 0%, #FFFFFF 60%);
  overflow: hidden;
  position: relative;
}
.title {
  font-weight: 400;

.title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation: fadeIn 1.5s ease-in-out;
}

.title-large {
  font-weight: 500;
  font-size: 60px;
  color: #000000;
  display: block;
  animation: slideUp 1s ease-out 0.2s both;
}
.title1 {

.title-small {
  font-weight: 400;
  font-size: 40px;
  color: #000000;
  color: #333333;
  display: block;
  margin-left: 15px;
  animation: slideUp 1s ease-out 0.5s both;
}
</style> 

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 背景装饰效果 */
.splash-container::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0,117,255,0.1) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-10%, -10%) rotate(5deg);
  }
}

/* 底部文字样式 */
.bottom-text {
  position: absolute;
  bottom: 80px;
  font-size: 24px;
  color: #666666;
  opacity: 0;
  animation: fadeInUp 1s ease-out 1s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>