hookehuyr

feat(StarryBackground): 根据微信移动端调整星星和流星参数

针对微信移动端优化性能,调整星星数量、移动速度和流星效果参数
......@@ -4,6 +4,13 @@
</div>
</template>
<script>
import { wxInfo } from '@/utils/tools';
const { isMobile, isWeiXin } = wxInfo();
const isWxMobile = isMobile && isWeiXin;
</script>
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
......@@ -21,7 +28,7 @@ const props = defineProps({
// 星星数量
starCount: {
type: Number,
default: 500
default: isWxMobile ? 800 : 800
},
// 星星颜色 (RGBA 前缀,例如 '255,255,255')
starColor: {
......@@ -31,22 +38,22 @@ const props = defineProps({
// 星星移动速度系数 (值越大移动越快)
starSpeed: {
type: Number,
default: 1
default: isWxMobile ? 1 : 0.1
},
// 流星速度 - 水平分量 (负值向左,正值向右)
meteorVx: {
type: Number,
default: -5
default: isWxMobile ? -10 : -2
},
// 流星速度 - 垂直分量 (正值向下)
meteorVy: {
type: Number,
default: 5
default: isWxMobile ? 10 : 2
},
// 流星拖尾长度系数 (值越大尾巴越长)
meteorTrail: {
type: Number,
default: 5
default: isWxMobile ? 4 : 10
}
});
......