<template>
	<view class="container">
	  <view class="charge-container">
	    <!-- 水波动画层 -->
	    <view class="wave-wrap">
	      <view class="wave wave-1"></view>
	      <view class="wave wave-2"></view>
	    </view>
	    
	    <!-- 粒子容器 -->
	    <view class="particles-box">
	      <view 
	        v-for="(item,index) in 15" 
	        :key="index" 
	        class="particle"
	        :style="`--delay:${index*0.2}s; --x:${Math.random()}; --y:${Math.random()}`"
	      ></view>
	    </view>
	    
	    <!-- 中央内容 -->
	    <view class="core">
	      <text class="value">正在充电</text>
	    </view>
	  </view>
	</view>
	
	<view class="containers">
	    <view class="header"></view>
	    <view class="battery">
	    </view>
	    <view class="battery-copy">
	        <view class="g-wave"></view>
	        <view class="g-wave"></view>
	        <view class="g-wave"></view>
	    </view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	/* 容器样式 */
	.container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  min-height: 100vh;
	  background: #0a1a30;
	}
	
	.charge-container {
	  position: relative;
	  width: 320rpx;
	  height: 320rpx;
	}
	
	/* 水波动画 */
	.wave-wrap {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  overflow: hidden;
	}
	
	.wave {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  border: 4rpx solid #7ad4ff;
	}
	
	.wave-1 {
	  animation: wave-drift 10s infinite linear;
	}
	
	.wave-2 {
	  animation: wave-drift 6s infinite linear reverse;
	}
	
	@keyframes wave-drift {
	  0% {
	    transform: scale(0.9);
	    opacity: 0.6;
	  }
	  50% {
	    transform: scale(1.1);
	    opacity: 0.3;
	  }
	  100% {
	    transform: scale(0.9);
	    opacity: 0.6;
	  }
	}
	
	/* 粒子系统 */
	.particles-box {
	  position: absolute;
	  width:100%;
	  height:100%;
	  overflow: hidden;
	}
	
	.particle {
	  position: absolute;
	  width: 6rpx;
	  height: 6rpx;
	  background: #5ec3ff;
	  border-radius: 50%;
	  filter: blur(2rpx);
	  animation: float 10s infinite ease-in-out;
	  animation-delay: var(--delay);
	}
	
	/* 随机漂浮动画 */
	@keyframes float {
	  0%, 100% {
	    transform: 
	      translate(calc(-50% + var(--x)*200rpx), 
	                calc(-50% + var(--y)*400rpx));
	    opacity:1;
	  }
	  50% {
	    transform: 
	      translate(calc(-50% + var(--x)*500rpx), 
	                calc(-50% + var(--y)*400rpx));
	    opacity:0.8;
	  }
	}
	
	/* 核心显示 */
	.core {
	  position: absolute;
	  width: 200rpx;
	  height: 200rpx;
	  background: rgba(32, 85, 255, 0.1);
	  border-radius: 50%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  box-shadow: inset 0 0 40rpx #7ad4ff;
	}
	
	.value {
	  color: #7ad4ff;
	  font-size: 28rpx;
	  font-weight: bold;
	  text-shadow: 0 0 20rpx rgba(122, 212, 255, 0.8);
	}
	
	.containers {
	    position: relative;
	    width: 140px;
	    margin: auto;
		margin-top: 50rpx;
	}
	
	.header {
	    position: absolute;
	    width: 26px;
	    height: 10px;
	    left: 50%;
	    top: 0;
	    transform: translate(-50%, -10px);
	    border-radius: 5px 5px 0 0;
	    background: rgba(255, 255, 255, .88);
	}
	
	.battery-copy {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 220px;
	    width: 140px;
	    border-radius: 15px 15px 5px 5px;
	    overflow: hidden;
	}
	
	.battery {
	    position: relative;
	    height: 220px;
	    box-sizing: border-box;
	    border-radius: 15px 15px 5px 5px;
	    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
	    background: #fff;
	    z-index: 1;
	    
	    &::after {
	        content: "";
	        position: absolute;
	        left: 0;
	        right: 0;
	        bottom: 0;
	        top: 80%;
	        background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
	        border-radius: 0px 0px 5px 5px;
	        box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
	        animation: charging 10s linear infinite;
	        filter: hue-rotate(90deg);
	    }
	}
	
	.g-wave {
	    position: absolute;
	    width: 300px;
	    height: 300px;
	    background: rgba(255, 255, 255, .8);
	    border-radius: 45% 47% 44% 42%;
	    bottom: 25px;
	    left: 50%;
	    transform: translate(-50%, 0);
	    z-index: 1;
	    animation: move 10s linear infinite;
	}
	
	.g-wave:nth-child(2) {
	    border-radius: 38% 46% 43% 47%;
	    transform: translate(-50%, 0) rotate(-135deg);
	}
	
	.g-wave:nth-child(3) {
	    border-radius: 42% 46% 37% 40%;
	    transform: translate(-50%, 0) rotate(135deg);
	}
	
	@keyframes charging {
		50% {
	        box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
	    }
	    
	    95% {
	        top: 5%;
	        filter: hue-rotate(0deg);
	        border-radius: 0 0 5px 5px;
	        box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
	    }
	    100% {
	        top: 0%;
	        filter: hue-rotate(0deg);
	        border-radius: 15px 15px 5px 5px;
	        box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
	    }
	}
	
	@keyframes move {
	    100% {
	        transform: translate(-50%, -160px) rotate(720deg);
	    }
	}
</style>