low-altitude-web/src/views/home/cpns/PanelHxhs.vue

<!-- 航线划设面板 -->
<template>
	<div class="panel-hxhs flex flex-col aside-left-inner">
		<div class="title-main">航线划设</div>
		<el-steps :active="currentStep" finish-status="success" align-center>
			<el-step title="航线划设" />
			<el-step title="航线评估" />
		</el-steps>

		<div class="flex-1 relative mb-4">
			<Transition name="emerge-left">
				<el-form
					ref="formRef"
					v-show="currentStep === 0"
					:model="form"
					:rules="rules"
					label-position="left"
					size="large"
					class="p-form p-main"
					hide-required-asterisk>
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" clearable></el-input>
					</el-form-item>
					<el-form-item label="任务类型" prop="taskType">
						<el-select v-model="form.taskType" placeholder="">
							<el-option label="短途运输" value="01" />
							<el-option label="外卖配送" value="02" />
						</el-select>
					</el-form-item>
					<el-form-item label="飞行器" prop="uavType">
						<el-select v-model="form.uavType" placeholder="">
							<el-option label="微型无人机" value="01" />
							<el-option label="轻型无人机" value="02" />
							<el-option label="小型无人机" value="03" />
							<el-option label="中型无人机" value="04" />
							<el-option label="大型无人机" value="05" />
						</el-select>
					</el-form-item>
					<el-form-item label="航线选择" prop="dataType">
						<el-radio-group v-model="form.dataType" @change="changeDataType()" size="large">
							<el-radio label="起降场规划" value="02" />
							<el-radio label="手动划设" value="01" />
							<el-radio label="导入航线" value="03" />
						</el-radio-group>
					</el-form-item>
					<div v-if="form.dataType === '01'" @click="changeDataType()" class="msg-draw">
						<img src="../../../assets/images/page/icon-draw.png" alt="" />
						<span>重新绘制</span>
					</div>
					<template v-if="form.dataType === '02'">
						<el-form-item label="起飞场" prop="fromPort">
							<el-select v-model="form.fromPort" @change="showPort('fromPort')" placeholder="">
								<el-option
									v-for="item in portOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									:disabled="item.value === form.toPort" />
							</el-select>
						</el-form-item>
						<el-form-item label="降落场" prop="toPort">
							<el-select v-model="form.toPort" @change="showPort('toPort')" placeholder="">
								<el-option
									v-for="item in portOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									:disabled="item.value === form.fromPort" />
							</el-select>
						</el-form-item>
					</template>
					<el-form-item label="上传文件" prop="file" v-if="form.dataType === '03'">
						<el-upload v-model:file-list="form.file" action="" class="single-uplaod">
							<div class="upload-trigger">点击上传文件</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="保持半径" prop="radius">
						<el-input v-model="form.radius" type="number" class="flex-1">
							<template #suffix>
								<span>米</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="飞行高度" prop="height">
						<el-input v-model="form.height1" type="number" class="flex-1">
							<template #suffix>
								<span>米</span>
							</template>
						</el-input>
						<div class="mx-3">--</div>
						<el-input v-model="form.height2" type="number" class="flex-1">
							<template #suffix>
								<span>米</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="日期" prop="startDate">
						<el-date-picker
							v-model="form.startDate"
							value-format="YYYY-MM-DD"
							type="date"
							class="flex-1"></el-date-picker>
						<div class="mx-3">--</div>
						<el-date-picker
							v-model="form.endDate"
							value-format="YYYY-MM-DD"
							type="date"
							class="flex-1"></el-date-picker>
					</el-form-item>
					<el-form-item label="时间" prop="startTime">
						<el-time-select
							v-model="form.startTime"
							:max-time="form.endTime"
							placeholder=""
							start="00:00"
							step="00:15"
							end="23:45"
							class="flex-1" />
						<div class="mx-3">--</div>
						<el-time-select
							v-model="form.endTime"
							:min-time="form.startTime"
							placeholder=""
							start="00:00"
							step="00:15"
							end="23:45"
							class="flex-1" />
					</el-form-item>
					<el-form-item label="网格查询">
						<!--            <el-checkbox v-model="form.grade">评分</el-checkbox>-->
						<el-button class="btn-secondary ml-4" @click="queryCube()">查询网格</el-button>
						<el-button class="btn-secondary ml-4" @click="closeCube()">关闭网格</el-button>
					</el-form-item>
					<!--          <el-form-item label="辅助规划">-->
					<!--            <el-button class="btn-secondary" @click="getAutoPath()" >辅助规划</el-button>-->
					<!--          </el-form-item>-->
				</el-form>
			</Transition>
			<Transition name="emerge-right">
				<div v-show="currentStep === 1" class="p-main">
					<ul class="list-plans flex justify-evenly mb-4">
						<li
							v-for="item in plans"
							class="pt-7 cursor-pointer hover:brightness-125"
							:class="{ active: item.id === currentPlan }"
							@click="handlePickPlan(item)">
							<div class="text-base">
								<span class="tuli" :style="{ backgroundColor: item.color }"></span>{{ item.feature }}
							</div>
							<div class="text-sm py-1">
								距离&nbsp;<span class="num">{{ item.distance }}</span
								>&nbsp;公里
							</div>
							<div class="text-sm">
								风险度：<span class="num">{{ item.risk }}</span>
							</div>
						</li>
					</ul>
					<el-form-item label="网格查询">
						<!--            <el-checkbox v-model="form.grade">评分</el-checkbox>-->
						<el-button class="btn-secondary ml-4" @click="queryCube24()">查询网格</el-button>
						<el-button class="btn-secondary ml-4" @click="closeCube()">关闭网格</el-button>
					</el-form-item>

					<div v-if="isSafe" class="msg-safe mb-2">当前计划无冲突!</div>

					<template v-else>
						<div v-for="item in results" :key="item.title" class="mb-3">
							<div class="title-sub">
								{{ item.title }}
								<div class="flex-1 flex justify-between items-center pl-2">
									<span
										v-if="item.level"
										class="risk-label"
										:class="riskTypes.find((i) => i.value === item.level).color"
										>{{ riskTypes.find((i) => i.value === item.level).label }}</span
									>
									<i v-else></i>
									<span class="btn-inline" @click="handleReInspect">重新评估</span>
								</div>
							</div>
							<table class="table-default stripe mt-2">
								<thead>
									<tr>
										<th v-for="th in item.cols">{{ th }}</th>
										<th class="w-20">地图显示</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="row in item.details">
										<td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
										<td class="w-20">
											<el-checkbox
												size="large"
												v-model="row.display"
												:disabled="
													(row.id !== '3-3' && !row.cubes.length) ||
													(row.id === '3-3' && item.details.every((r) => r.cubes.length === 0))
												"
												@change="(val) => toggleCubeDetail(row, val)"></el-checkbox>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</template>
				</div>
			</Transition>
		</div>

		<div class="text-center">
			<el-button v-if="currentStep === 0" :disabled="!hasDraw" class="btn-main" @click="toNext">下一步</el-button>
			<template v-if="currentStep === 1">
				<el-button class="btn-main" @click="toPrev">上一步</el-button>
				<el-button class="btn-main" @click="handlePreview">计划预演</el-button>
				<el-button class="btn-main" @click="handleSave">保存</el-button>
			</template>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount, computed, onBeforeMount } from 'vue'
import { routePlanAll, saveRoute, searchQJCList } from '@/service/panelHxhs.js'
import { geometryMeshEffect, getPathCube, getPathCube24, showAndRedrawPath } from '@/utils/map/addTool.js'
import { InspectPathCube } from '@/utils/map/addLayer'
import useLayoutStore from '@/store/layout'
import { useMapStore } from '@/store/map.js'
import { riskTypes } from '@/utils/options'
import { useDateFormat } from '@vueuse/core'
import { getInspectionData } from '@/service/map.js'

const currentStep = ref(0)
let currentPath = [] // 当前规划路径
let allPathArr = [] // 所有路径
let autoHeight = false //手动规划
const layoutStore = useLayoutStore()
const mapStore = useMapStore()

const form = ref({
	taskType: '01',
	uavType: '01',
	dataType: '02',
	height1: 60,
	height2: 80,
	radius: 5,
	startDate: '',
	endDate: '',
	startTime: '',
	endTime: '',
})

onBeforeMount(() => {
	form.value.startDate = useDateFormat(new Date(), 'YYYY-MM-DD').value
	form.value.endDate = useDateFormat(new Date().getTime() + 24 * 60 * 60 * 1000, 'YYYY-MM-DD').value
	form.value.startTime = useDateFormat(new Date(), 'HH:mm').value
	form.value.endTime = useDateFormat(new Date().getTime() + 60 * 60 * 1000, 'HH:mm').value
})

const portOptions = []

const rules = {
	name: [{ required: true, message: '请输入空域名称', trigger: 'none' }],
}

const formRef = ref(null)

const results = ref([
	{
		title: '空域评估',
		level: null,
		cols: { areaName: '冲突空域', time: '冲突时段', height: '冲突高度' },
		details: [],
	},
	{
		title: '计划冲突',
		level: null,
		cols: { areaName: '冲突空域', time: '冲突时段', height: '冲突高度' },
		details: [],
	},
	{
		title: '障碍物分析',
		level: null,
		cols: { object: '冲突空域', height: '冲突高度' },
		details: [],
	},
	{
		title: '地面安全评估',
		level: null,
		cols: { element: '要素', coverage: '覆盖率' },
		details: [],
	},
])

function handleReInspect() {
	closeCube()
	setTimeout(() => {
		queryCube()
	}, 500)
}

let addedCubeDetailIds = []

function toggleCubeDetail(row, status) {
	console.log(row, status)
	if (row.id === '3-3') {
		// 处理综合占比
		results.value[3].details.forEach((gRow) => {
			if (gRow.display !== status && gRow.cubes.length) {
				gRow.display = status
				toggleCubeDetail(gRow, status)
			}
		})
	} else {
		if (!row.cubes.length) return
		const id = 'hxhs_' + row.id
		if (status) {
			addedCubeDetailIds.push(id)
		} else {
			const targetIndex = addedCubeDetailIds.findIndex((i) => i === id)
			addedCubeDetailIds.splice(targetIndex, 1)
		}
		InspectPathCube({
			id,
			show: status,
			points: row.cubes.map((c) => ({
				x: c.x,
				y: c.y,
				z: c.z,
				color: c.color,
				gridCode: c.gridCode,
			})),
			size: {
				x: row.cubes[0].boxSize.latLength,
				y: row.cubes[0].boxSize.lonLength,
				z: row.cubes[0].boxSize.height,
			},
		})
	}
}

function clearAllCubeDetail() {
	addedCubeDetailIds.forEach((id) => {
		InspectPathCube({
			id,
			show: false,
		})
	})
	addedCubeDetailIds = []
}

let plans = ref([
	{ id: '1', name: 'originalPath', feature: '接近原方案', color: '#FFA500', distance: '', risk: '50' },
	{ id: '2', name: 'safePath', feature: '地面风险较低', color: '#00FF00', distance: '', risk: '10' },
	{ id: '3', name: 'shortestPath', feature: '距离最短', color: '#FFA5FF', distance: '', risk: '50' },
])

const isSafe = computed(() => {
	return results.value.every((i) => i.level === 1)
})

const hasDraw = ref(false)

function clearResults() {
	results.value.forEach((v) => {
		v.details = []
		v.level = null
	})
}

function formatResult(res) {
	clearResults()
	debugger
	if (res != null && res != undefined) {
		const { groundSafety, lineConflictArray, obstacle, spaceConflictArray, spaceRisk, lineRisk } = res

		results.value[0].level = spaceRisk
		results.value[1].level = lineRisk
		results.value[2].level = obstacle.risk
		results.value[3].level = groundSafety.risk

		results.value[0].details = spaceConflictArray.map((i, index) => ({
			id: `0-${index}`,
			areaName: i.gridName,
			height: i.heightRange,
			time: i.conflictTime,
			cubes: i.gridEntityList,
			display: false,
		}))

		results.value[1].details = lineConflictArray.map((i, index) => ({
			id: `1-${index}`,
			areaName: i.gridName,
			height: i.heightRange,
			time: i.conflictTime,
			cubes: i.gridEntityList,
			display: false,
		}))

		results.value[2].details = [
			{
				id: '2-0',
				time: '01-249:00-01-25 10-00',
				object: '建筑物',
				height: obstacle.buildingConflictHeight,
				cubes: obstacle.buildingsConflictArray,
				display: false,
			},
			{
				id: '2-1',
				time: '01-249:00-01-25 10-00',
				object: '建筑物缓冲区',
				height: obstacle.buildingBufferConflictHeight,
				cubes: obstacle.buildingsBufferConflictArray,
				display: false,
			},
		]

		const toPercent = (num) => {
			return Math.round(num * 100) + '%'
		}

		results.value[3].details = [
			{
				id: '3-0',
				element: '道路',
				coverage: toPercent(groundSafety.road),
				cubes: groundSafety.gridGoupMap.road,
				display: false,
			},
			{
				id: '3-1',
				element: '河流',
				coverage: toPercent(groundSafety.river),
				cubes: groundSafety.gridGoupMap.river,
				display: false,
			},
			{
				id: '3-2',
				element: '绿化',
				coverage: toPercent(groundSafety.green),
				cubes: groundSafety.gridGoupMap.green,
				display: false,
			},
			{
				id: '3-3',
				element: '综合占比',
				coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green),
				display: false,
			},
		]
	} else {
		ElMessage({ type: 'error', message: '核查结果为空' })
	}
	layoutStore.toggleGlobalLoading(false)
}

function handlePickPlan(plan) {
	currentPlan.value = plan.id
	showAllPathByType()

	const conflicts = allPathArr[plan.name]?.conflicts
	if (!conflicts) {
		clearResults()
		return
	}
	clearAllCubeDetail()
	formatResult(conflicts.gridConflict)
}

const currentPlan = ref('1')

function toNext() {
	formRef.value.validate((valid) => {
		if (valid) {
			currentStep.value = 1
			getAutoPath()
		}
	})
}

function toPrev() {
	currentStep.value = 0
	formRef.value.resetFields()
	allPathArr = {}
	clearResults()
	clearAllCubeDetail()
	getPathCube({
		status: 'hide',
	})
	hasDraw.value = false
	showAndRedrawPath({
		status: 'hide',
	})
	geometryMeshEffect({
		id: 'fromPort',
		status: 'hide',
	})
	geometryMeshEffect({
		id: 'toPort',
		status: 'hide',
	})
	geometryMeshEffect({
		status: 'hide',
		id: 'drawAllPathOne',
	})
}

//保存网格结果
function handleSave() {
	saveRoute({
		...form.value,
		shape: JSON.stringify({ paths: [currentPath] }),
	})
		.then((res) => {
			if (res.data.code == 200 && res.data.msg == 'success') {
				ElMessage({
					type: 'success',
					message: '保存成功',
				})
			} else {
				ElMessage({
					type: 'error',
					message: '保存失败',
				})
			}
		})
		.catch(() => {
			ElMessage({
				type: 'error',
				message: '保存失败',
			})
		})
}

function handlePreview() {}

//获取起降数据
function getQJCList() {
	searchQJCList().then((res) => {
		let data = res.data.data
		data.forEach((item) => {
			portOptions.push({
				label: item.name,
				value: item.id,
				shape: item.shape,
				geoType: item.geoType,
			})
		})
	})
}

function showPort(id) {
	geometryMeshEffect({
		id: id,
		status: 'show',
		data: [
			{
				type: portOptions.find((item) => item.value == form.value[id]).geoType,
				shape: {
					...JSON.parse(portOptions.find((item) => item.value == form.value[id]).shape),
					color: [0, 255, 0, 0.7],
				},
			},
		],
	})
	showOriginPath()
}

//起降场选择完成生成原始直线
function showOriginPath() {
	if (form.value.fromPort && form.value.toPort) {
		let formPoint = JSON.parse(portOptions.find((item) => item.value == form.value.fromPort).shape).point
		let toPoint = JSON.parse(portOptions.find((item) => item.value == form.value.toPort).shape).point
		debugger
		currentPath = [
			[formPoint.x, formPoint.y, formPoint.z],
			[formPoint.x, formPoint.y, (form.value.height1 * 1 + form.value.height2 * 1) / 2],
			[
				(formPoint.x + toPoint.x) / 2,
				(formPoint.y + toPoint.y) / 2,
				(form.value.height1 * 1 + form.value.height2 * 1) / 2,
			],
			[toPoint.x, toPoint.y, (form.value.height1 * 1 + form.value.height2 * 1) / 2],
			[toPoint.x, toPoint.y, toPoint.z],
		]
		hasDraw.value = true
		showAndRedrawPath({
			status: 'show',
			path: currentPath,
		})
	}
}

function handleInspect(level) {
	let tempPath = []
	currentPath.forEach((item) => {
		tempPath.push({
			x: item[0],
			y: item[1],
			z: item[2],
		})
	})
	const params = {
		paths: tempPath,
		radius: 5,
		level,
	}
	getInspectionData(params, 'polyline')
		.then((res) => {
			const conflict = res.data?.data?.gridConflict
			if (!conflict) {
				clearResults()
			}
			formatResult(conflict)
		})
		.finally(() => {
			layoutStore.toggleGlobalLoading(false)
		})
}

//查询网格
function queryCube() {
	getPathCube({
		status: 'show',
		paths: [currentPath],
	})
}

//查询网格
function queryCube24() {
	layoutStore.toggleGlobalLoading(true)
	getPathCube24({
		status: 'show',
		paths: [currentPath],
	})
	handleInspect('24')
}

//关闭网格
function closeCube() {
	getPathCube({
		status: 'hide',
	})
}

//辅助规划
function getAutoPath() {
	let paramsPaths = []
	currentPath.forEach((item) => {
		paramsPaths.push({
			x: item[0],
			y: item[1],
			z: item[2],
		})
	})
	layoutStore.toggleGlobalLoading(true)
	routePlanAll({
		height1: form.value.height1,
		height2: form.value.height2,
		paths: paramsPaths,
	})
		.then((res) => {
			debugger
			if (res.data.code !== 200) {
				ElMessage({ type: 'error', message: res.data.msg })
				currentStep.value = 0
			} else {
				let data = res.data.data
				allPathArr = data
				plans.value.forEach((item) => {
					item.distance = (data[item.name].length / 1000).toFixed(2)
				})
				handlePickPlan(plans.value[0])
			}
		})
		.catch(() => {
			ElMessage({ type: 'error', message: '路径规划请求失败' })
			currentStep.value = 0
		})
		.finally(() => {
			layoutStore.toggleGlobalLoading(false)
		})
}

function showAllPathByType() {
	let otherPathArr = []
	if (currentPlan.value == 1) {
		//接近原路线
		if (allPathArr.safePath.path.length > 0) {
			otherPathArr.push({
				name: '安全路径',
				type: 'polyline',
				shape: {
					radius: 10,
					paths: allPathArr.safePath.path,
					color: [0, 255, 0, 0.3],
				},
			})
		}
		if (allPathArr.shortestPath.path.length > 0) {
			otherPathArr.push({
				name: '贴合路径',
				type: 'polyline',
				shape: {
					radius: 10,
					paths: allPathArr.shortestPath.path,
					color: [255, 165, 255, 0.3],
				},
			})
		}
		showAndRedrawPath({
			status: 'show',
			path: allPathArr.originalPath.path,
			color: [255, 234, 0, 0.7],
		})
		currentPath = allPathArr.shortestPath.path
	} else if (currentPlan.value == 2) {
		//安全
		if (allPathArr.shortestPath.path.length > 0) {
			otherPathArr.push({
				name: '最短路径',
				type: 'polyline',
				shape: {
					radius: 10,
					paths: allPathArr.shortestPath.path,
					color: [255, 165, 255, 0.3],
				},
			})
		}
		if (allPathArr.originalPath.path.length > 0) {
			otherPathArr.push({
				name: '贴合路径',
				type: 'polyline',
				shape: {
					radius: 10,
					paths: allPathArr.originalPath.path,
					color: [255, 234, 0, 0.3],
				},
			})
		}
		showAndRedrawPath({
			status: 'show',
			path: allPathArr.safePath.path,
			color: [0, 255, 0, 0.7],
		})
		currentPath = allPathArr.safePath.path
	} else if (currentPlan.value == 3) {
		//最短
		if (allPathArr.safePath.path.length > 0) {
			otherPathArr.push({
				name: '安全路径',
				type: 'polyline',
				shape: {
					radius: 10,
					paths: allPathArr.safePath.path,
					color: [0, 255, 0, 0.3],
				},
			})
		}
		if (allPathArr.originalPath.path.length > 0) {
			otherPathArr.push({
				name: '贴合路径',
				type: 'polyline',
				shape: {
					radius: 10,
					paths: allPathArr.originalPath.path,
					color: [255, 234, 0, 0.3],
				},
			})
		}
		showAndRedrawPath({
			status: 'show',
			path: allPathArr.shortestPath.path,
			color: [225, 165, 255, 0.7],
		})
		currentPath = allPathArr.shortestPath.path
	}
	geometryMeshEffect({
		status: 'show',
		id: 'drawAllPathOne',
		data: otherPathArr,
	})
}

function getDrawGeometry() {
	if (mapStore.draw_geometry) {
		if (autoHeight) {
			let path = mapStore.draw_geometry.paths[0]
			let flyPathArr = [path[0]]
			path.forEach((item) => {
				flyPathArr.push([item[0], item[1], (form.value.height1 * 1 + form.value.height2 * 1) / 2])
			})
			flyPathArr.push([path[path.length - 1][0], path[path.length - 1][1], 0])
			hasDraw.value = true
			showAndRedrawPath({
				status: 'show',
				path: flyPathArr,
			})
			autoHeight = false
			currentPath = flyPathArr
		} else {
			if (currentPlan.value == 1) {
				//最接近原航线，替换原航线数据
				allPathArr.originalPath.path = mapStore.draw_geometry.paths[0]
			} else if (currentPlan.value == 2) {
				//最安全
				allPathArr.safePath.path = mapStore.draw_geometry.paths[0]
			} else if (currentPlan.value == 3) {
				//最短
				allPathArr.shortestPath.path = mapStore.draw_geometry.paths[0]
			}
			currentPath = mapStore.draw_geometry.paths[0]
		}
	}
}

function changeDataType() {
	if (form.value.dataType == '01') {
		//手动
		autoHeight = true
		hasDraw.value = true
		showAndRedrawPath({
			status: 'show',
			radius: form.value.radius,
		})
		geometryMeshEffect({
			id: 'fromPort',
			status: 'hide',
		})
		geometryMeshEffect({
			id: 'toPort',
			status: 'hide',
		})
	} else if (form.value.dataType == '02') {
		//自动
		autoHeight = false
		hasDraw.value = false
		showAndRedrawPath({
			status: 'hide',
		})
	} else if (form.value.dataType == '03') {
		//导入航线
		autoHeight = false
		hasDraw.value = false
		showAndRedrawPath({
			status: 'hide',
		})
		geometryMeshEffect({
			id: 'fromPort',
			status: 'hide',
		})
		geometryMeshEffect({
			id: 'toPort',
			status: 'hide',
		})
	}
}

//展示冲突结果

onMounted(() => {
	getQJCList()
})

watch(
	() => mapStore.draw_geometry,
	(val) => {
		getDrawGeometry()
	},
	{
		deep: true,
	}
)

// watch(
// 	() => mapStore.cubeResult,
// 	(val) => {
// 		formatResult(val.data)
// 		layoutStore.toggleGlobalLoading(false)
// 	},
// 	{ deep: true }
// )

onBeforeUnmount(() => {
	toPrev()
})
</script>

<style lang="scss">
@use '../../../assets/styles/panel-form.scss';
</style>

<style lang="scss" scoped>
.panel-hxhs {
	:deep(.p-form) {
		.el-form-item__label {
			width: 105px;
		}
	}

	.msg-draw {
		height: 38px;
		margin: -5px 0 25px;
		background: #62729486;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;

		img {
			width: 14px;
			height: 14px;
			margin-right: 5px;
		}
	}

	.list-plans {
		li {
			width: 134px;
			height: 117px;
			background: url('../../../assets/images/page/bg-plan.png');
			background-size: 100% !important;
			text-align: center;

			.tuli {
				display: inline-block;
				margin-right: 4px;
				width: 10px;
				height: 10px;
			}

			.num {
				color: #8cbcff;
			}

			&.active {
				background: url('../../../assets/images/page/bg-plan-h.png');
			}
		}
	}
}
</style>