106 lines
2.1 KiB
Vue
106 lines
2.1 KiB
Vue
<template>
|
||
<div class="map-container">
|
||
<div
|
||
ref="fullscreenElement"
|
||
class="fullscreen-content"
|
||
:class="{ 'is-fullscreen': isFullscreen }"
|
||
>
|
||
<div
|
||
v-for="car in cars"
|
||
:key="car.id"
|
||
class="car"
|
||
:style="{ left: car.x + 'px', top: car.y + 'px' }"
|
||
>
|
||
<img src="@/assets/imgs/indexPage/car1.png" alt="car" class="car-image" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
|
||
const fullscreenElement = ref(null)
|
||
const isFullscreen = ref(false)
|
||
|
||
// 创建20辆车的数据
|
||
const cars = ref(
|
||
Array.from({ length: 100 }, (_, index) => ({
|
||
id: index + 1,
|
||
x: Math.random() * 1600, // 初始x坐标
|
||
y: Math.random() * 900, // 初始y坐标
|
||
dx: (Math.random() - 0.5) * 6, // x方向速度
|
||
dy: (Math.random() - 0.5) * 6 // y方向速度
|
||
}))
|
||
)
|
||
|
||
// 更新车辆位置
|
||
let updateInterval
|
||
const updateCarPositions = () => {
|
||
cars.value = cars.value.map((car) => {
|
||
// 更新位置
|
||
let newX = car.x + car.dx
|
||
let newY = car.y + car.dy
|
||
|
||
// 边界检查
|
||
if (newX <= 0 || newX >= 1600) car.dx *= -1
|
||
if (newY <= 0 || newY >= 900) car.dy *= -1
|
||
|
||
return {
|
||
...car,
|
||
x: newX,
|
||
y: newY
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 每100毫秒更新一次，即每秒10次
|
||
updateInterval = setInterval(updateCarPositions, 200)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
// 清除定时器
|
||
if (updateInterval) {
|
||
clearInterval(updateInterval)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.map-container {
|
||
position: relative;
|
||
}
|
||
|
||
.fullscreen-content {
|
||
width: 1600px;
|
||
height: 800px;
|
||
background-color: #f0f0f0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.car {
|
||
position: absolute;
|
||
width: 32px;
|
||
height: 32px;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.car-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* 全屏模式下的样式 */
|
||
.fullscreen-content:fullscreen,
|
||
.fullscreen-content:-webkit-full-screen,
|
||
.fullscreen-content:-moz-full-screen,
|
||
.fullscreen-content:-ms-fullscreen {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: white;
|
||
}
|
||
</style>
|