wanzai_school_app/pages/track/track.vue

<template>
	<view class="container">
		<!-- 顶部筛选区域 -->
		<view class="search">
			<view class="search_box" :class="{ active: item.id === activeIndex }" v-for="item in searchList" :key="item.id" @click="changeIndex(item.id)">{{ item.text }}</view>
		</view>

		<!-- 地图区域 -->
		<view class="map">
			<MapContainer />
		</view>

		<!-- 轨迹区域 -->
		<view class="track">
			<view class="track_title">全天状态</view>

			<!-- 步骤条区域 -->
			<uv-steps activeColor="#1E7DFB" direction="column" dot :current="list.length">
				<uv-steps-item v-for="item in list" :key="item.id" :customStyle="customStyle">
					<template v-slot:title>
						<view class="track_time">
							{{ item.title }}
						</view>
					</template>
					<template v-slot:desc>
						<view class="track_desc">
							{{ item.desc }}
						</view>
					</template>
				</uv-steps-item>
			</uv-steps>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MapContainer from '@/components/MapContainer.vue'

onLoad(() => {})

// 筛选区域当前索引
const activeIndex = ref(0)

// 筛选区域数组
const searchList = ref([
	{
		id: 0,
		text: '今天'
	},
	{
		id: 1,
		text: '昨天'
	},
	{
		id: 2,
		text: '前天'
	}
])

// 学生轨迹数组
const list = ref([
	{
		id: 1,
		title: '入校06:00',
		desc: '地点：万载三中大门口'
	},
	{
		id: 2,
		title: '入校07:00',
		desc: '地点：万载三中大门口'
	},
	{
		id: 3,
		title: '入校08:00',
		desc: '地点：万载三中大门口'
	},
	{
		id: 4,
		title: '入校09:00',
		desc: '地点：万载三中大门口'
	},
	{
		id: 5,
		title: '入校10:00',
		desc: '地点：万载三中大门口'
	}
])

// 步骤条样式
const customStyle = {
	marginBottom: '30rpx'
}

// 切换筛选时间时的函数
const changeIndex = (id) => {
	activeIndex.value = id
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 顶部筛选区域样式
	.search {
		display: flex;
		justify-content: space-evenly;
		margin: 30rpx 0;
		height: 65rpx;

		.search_box {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			width: 195rpx;
			height: 65rpx;
			font-size: 28rpx;
			border-radius: 72rpx;
			background-color: #fff;
		}

		.active {
			color: #1e7dfb;
			border: 1rpx solid #1e7dfb;
		}
	}
	// 地图区域样式
	.map {
		width: 750rpx;
		height: 469rpx;
	}
	// 轨迹区域样式
	.track {
		padding: 0 20rpx 20rpx 20rpx;

		.track_title {
			margin: 30rpx 0;
			font-size: 32rpx;
			font-weight: bold;
		}

		.track_time {
			font-size: 28rpx;
			font-weight: bold;
		}

		.track_desc {
			margin-top: 10rpx;
			color: #808080;
			font-size: 24rpx;
		}
	}
}
</style>