NanTong-police/src/views/map.vue

946 lines
26 KiB

1 month ago
<template>
<div class="map-container">
<navigationBar></navigationBar>
<mars-map :options="options" @onload="mapLoad"></mars-map>
<!-- 搜索 -->
<div class="search-container" id="box">
<div class="search-input flex-container">
<div class="input-title">点位搜索:</div>
<div class="input-box">
<el-input
v-model="queryParams.name"
placeholder="请输入点位名称"
clearable
/>
<div class="result-popup" v-show="popupShow">
<div class="list" v-if="list.length > 0">
<div
class="list-item"
v-for="item in list"
:key="item.id"
@click="handleResultRow(item.id, item.lonLat, item.pointName)"
>
<div class="enterprise-name">{{ item.pointName }}</div>
<div class="loaction-icon"></div>
</div>
</div>
<div class="no-data" v-else></div>
</div>
</div>
<div class="search-bnt input-title" @click="getList()"></div>
<div
class="search-bnt input-title"
style="margin-left: 10px; padding: 5px 10px"
@click="handlePointSelect()"
>
选择点位
</div>
</div>
</div>
1 month ago
<!-- 树形结构 -->
<el-drawer
v-model="drawer"
title="点位选择"
size="20%"
:append-to-body="false"
>
<el-tree
node-key="id"
:props="props"
:load="loadNode"
lazy
accordion
@node-click="handleNodeClick"
/>
<template #footer>
<el-button type="primary" @click="finishTree"></el-button>
</template>
</el-drawer>
<!-- 地图图层 -->
<div class="map-layer">
<div class="model flex-container">
<div
class="model-item"
:class="currentModelIndex == index ? 'activeBtn' : ''"
v-for="(item, index) in mapModel"
:key="index"
@click="changeModel(index)"
>
{{ item }}
</div>
</div>
<div class="point flex-container">
<div
class="point-item"
:class="currentIndex == index ? 'activeBtn' : ''"
v-for="(item, index) in pointLayer"
:key="index"
@click="handlePointLayer(index, item.value)"
>
{{ item.name }}
</div>
</div>
</div>
<!-- 点位详情 -->
<el-dialog
v-model="dialogVisible"
:title="info.pointName"
width="30%"
class="info-dialog"
>
<div class="info-box">
<div class="info-title">基本信息</div>
<div class="info-row">
<div class="row-lable">地址</div>
<div class="row-value">{{ info.address }}</div>
</div>
<div class="info-row">
<div class="row-lable">办公时间</div>
<div class="row-value">{{ info.officeHours }}</div>
</div>
<div class="info-row">
<div class="row-lable">联系电话</div>
<div class="row-value">{{ info.phone }}</div>
</div>
<div class="info-row">
<div class="row-lable">封面</div>
<div class="row-value">
<el-image
class="info-image"
fit="cover"
v-if="info.image"
:src="`${baseUrl}/api/yzt-data/file/image?name=${info.image}`"
:preview-src-list="[
`${baseUrl}/api/yzt-data/file/image?name=${info.image}`,
]"
>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
<span>图片加载出错</span>
</div>
</el-image>
</div>
</div>
<div
class="info-title"
v-show="info.yewuList && info.yewuList.length > 0"
>
办理业务
</div>
<div
class="yewu-list"
v-for="(item, index) in info.yewuList"
:key="index"
>
<div class="yewu-title">{{ item.title }}</div>
<div
class="list-sub"
v-for="(subItem, subIndex) in item.list"
:key="subItem.id"
@click="handleInfoByyewu(subItem.id)"
>
<div class="file-icon"></div>
<div>{{ subIndex + 1 }}. {{ subItem.simpleName }}</div>
</div>
</div>
</div>
</el-dialog>
<!-- 业务详情 -->
<el-dialog
width="30%"
:title="businessInfo.businessName"
v-model="innerVisible"
class="info-dialog"
>
<div class="info-box">
<div class="info-row">
<div class="row-lable">业务名称</div>
<div class="row-value">{{ businessInfo.businessName }}</div>
</div>
<div class="info-row">
<div class="row-lable">业务简称</div>
<div class="row-value">{{ businessInfo.simpleName }}</div>
</div>
<div class="info-row">
<div class="row-lable">申办条件</div>
<div class="row-value">{{ businessInfo.businessInstructions }}</div>
</div>
<div class="info-row">
<div class="row-lable">申办要求</div>
<div class="row-value">{{ businessInfo.businessGuide }}</div>
</div>
<div class="info-row">
<div class="row-lable">相关材料</div>
<div class="row-value value-list">
<div v-for="(item, index) in businessInfo.formList" :key="item.id">
<div class="value-list-title">{{ item.name }}</div>
<div class="value-list-subTitle" @click="lookIamge(index)">
参考样本
</div>
</div>
</div>
</div>
<div class="info-row">
<div class="row-lable">法定时限</div>
<div class="row-value">{{ businessInfo.legaltime }}</div>
</div>
<div class="info-row">
<div class="row-lable">承诺时限</div>
<div class="row-value">{{ businessInfo.promisetime }}</div>
</div>
</div>
<el-image-viewer
v-if="showPreview"
:url-list="businessInfo.srcList"
show-progress
:initial-index="initialIndex"
@close="showPreview = false"
/>
</el-dialog>
1 month ago
</div>
</template>
<script setup name="Map">
import NavigationBar from "@/components/NavigationBar";
1 month ago
import marsMap from "@/components/marsMap";
import markerIcon from "@/assets/images/map-marker.png";
const { proxy } = getCurrentInstance();
import {
getPointListByType,
getPointList,
getPointinfo,
getdicts,
getbusinessById,
getEnterpriseTree,
} from "@/api/mapApi";
import { ref, reactive, onMounted, onUnmounted } from "vue";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
1 month ago
let options = reactive({
scene: {
center: {
lat: 32.006053,
lng: 120.899041,
alt: 45187,
heading: 0,
pitch: -45,
},
showSun: false,
showMoon: false,
showSkyBox: false,
showSkyAtmosphere: false,
fog: false,
backgroundColor: "#363635", // 天空背景色
globe: {
baseColor: "#363635", // 地球地面背景色
showGroundAtmosphere: false,
enableLighting: false,
},
clock: {
currentTime: "2023-11-01 12:00:00", // 固定光照时间
},
cameraController: {
zoomFactor: 1.5,
minimumZoomDistance: 0.1,
maximumZoomDistance: 200000,
enableCollisionDetection: false, // 允许进入地下
},
},
terrain: {
show: false,
},
basemaps: [
{
id: 2017,
pid: 10,
name: "蓝色底图",
icon: "https://data.mars3d.cn/img/thumbnail/basemap/my_blue.png",
type: "gaode",
layer: "vec",
chinaCRS: "GCJ02",
invertColor: true,
filterColor: "#015CB3",
brightness: 0.6,
contrast: 1.8,
gamma: 0.3,
hue: 1,
saturation: 0,
show: true,
},
],
});
//地图图层
const mapModel = reactive(["二维地图", "三维地图"]);
//图标类型图层
const pointLayer = reactive([
{ name: "服务点位", value: undefined },
{ name: "轨道交通警务站", value: "13" },
{ name: "巡防警务站", value: "04" },
]);
//查询条件
let queryParams = reactive({
name: "",
type: 0,
lonLat: undefined,
});
let map = reactive({});
let mapLayer = reactive({});
let list = reactive([]);
let popupShow = ref(false);
let dictList = reactive([]);
let info = reactive({});
let businessInfo = reactive({});
const showPreview = ref(false);
let srcList = reactive([]);
let initialIndex = ref(0);
1 month ago
const dialogVisible = ref(false);
const innerVisible = ref(false);
let currentIndex = ref(null);
let currentModelIndex = ref(0);
//树形结构配置
let drawer = ref(false);
const props = {
label: "simpleName",
children: "zones",
isLeaf: (data, node) => {
return data.isLeaf == 1 ? false : true;
},
};
let currentNodeKey = reactive({});
1 month ago
onMounted(() => {
//字典
getdictList();
document.addEventListener("click", handleOutsideClick);
});
onUnmounted(() => {
document.removeEventListener("click", handleOutsideClick);
});
/**
*
* @param index
*
*/
const lookIamge = (index) => {
initialIndex.value = index; //阅览的索引
showPreview.value = true;
// if (!exampleFile) return;
// const imageItem = document.getElementById(`businessImage` + index);
// console.log('sssddd',)
// imageItem.click();
};
/**
* 获取业务详情
* @param id
*/
const handleInfoByyewu = async (id) => {
const res = await getbusinessById({
id,
parent: info.parent,
});
res.data.srcList = [];
if (res.data.formList.length > 0) {
res.data.srcList = res.data.formList.map((item) => {
return `${baseUrl}/api/yzt-data/file/otherImage?name=${item.exampleFile}&imgname=${item.name}`;
});
}
businessInfo = res.data;
innerVisible.value = true;
};
/**
* 获取详情
* @param id
* @param lonLat
*/
const getInfo = async (id, lonLat) => {
let res = await getPointinfo({
id: id,
lonLat: lonLat,
});
res.data.yewuList = [];
for (let key in res.data.object) {
res.data.yewuList.push({
title: filterTypeName(key),
list: res.data.object[key],
});
}
return res.data;
};
/**
* 字典翻译
* @param key
*/
const filterTypeName = (key) => {
if (!key) return;
const index = dictList.findIndex((item) => item.value == key);
if (index > -1) {
return dictList[index].title;
} else {
return "未翻译到";
}
};
/**
* 单击查询结构
* @param id
* @param lonLat
* @param pointName
*/
const handleResultRow = (id, lonLat, pointName) => {
searchMarker(id, lonLat);
popupShow.value = false;
};
/**
* 检索图标
* @param id
* @param lonLat
*/
const searchMarker = async (id, lonLat) => {
const info = await getInfo(id, lonLat);
queryParams.name = info.pointName;
//查询图标图层上是否存在,如果不存在就新增一个新图标
const markerLength = mapLayer.markerLayer.length;
const markerItem = mapLayer.markerLayer.getGraphicById(info.id);
if (markerItem) {
markerItem.openHighlight();
map.flyToPoint(markerItem._point, {
radius: 3000,
duration: 1,
});
} else {
initMarker(info, true, markerLength);
}
};
/**
* 渲染图标
* @param item
* @param flyTo
* @param markerLength
*/
const initMarker = (item, flyTo = false, markerLength = 0) => {
mapLayer.markerLayer.enabledEvent = false;
const graphic = new mars3d.graphic.BillboardPrimitive({
id: item.id,
position: item.lonLat.split(","),
style: {
width: 35,
height: 35,
scale: 1,
image: markerIcon,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: item.pointName,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
font_size: 14,
color: "#fff",
pixelOffsetY: -45,
},
highlight: {
label: {
outline: true,
outlineColor: "yellow",
outlineOpacity: 0.7,
},
},
},
flyTo: flyTo,
flyToOptions: {
radius: 3000,
duration: 1,
},
attr: item,
});
mapLayer.markerLayer.addGraphic(graphic);
mapLayer.markerLayer.enabledEvent = true; // 恢复事件
//图标单击事件
graphic.on(mars3d.EventType.click, async (event) => {
const infoItem = event.target.attr;
info = await getInfo(infoItem.id, infoItem.lonLat);
queryParams.name = info.pointName;
dialogVisible.value = true;
});
if (markerLength > 0) {
graphic.openHighlight();
}
};
/**
* 监听搜索结果弹出层
* @param event
*/
const handleOutsideClick = (event) => {
const box = document.getElementById("box");
if (popupShow.value && box && !box.contains(event.target)) {
popupShow.value = false;
}
};
1 month ago
/**
* 点图层切换
* @param index
* @param value
*/
const handlePointLayer = (index, value) => {
if (currentIndex.value != index) {
currentIndex.value = index;
getMarkerType(value);
}
};
const getMarkerType = async (type) => {
const res = await getPointListByType({ type });
mapLayer.markerLayer.clear();
res.data.map((item, index) => {
if (index == 0) {
map.flyToPoint(item.lonLat.split(","), {
radius: 30738,
duration: 1,
});
}
initMarker(item);
});
};
/**
* 点位选择
*/
const handlePointSelect = () => {
drawer.value = true;
};
/**
* 懒加载树形结构
* @param node
* @param resolve
*/
const loadNode = async (node, resolve) => {
if (node.level === 0) {
// 获取第一层数据
const res = await getEnterpriseTree();
return resolve(res.data);
}
if (node.level > 0 && node.data.isLeaf == 0) return resolve([]);
//其他层
const treeItem = await getEnterpriseTree(node.level + 1, {
parent: node.data.parent,
child: node.data.child,
});
return resolve(treeItem.data);
};
/**
* 树被单击
* @param data
*/
const handleNodeClick = (data) => {
currentNodeKey = data;
};
/**
* 树结构选择完毕
*/
const finishTree = () => {
if (!currentNodeKey.id) {
proxy.$modal.msgError("该数据缺少唯一id!");
} else {
searchMarker(currentNodeKey.id, currentNodeKey.lonLat);
}
drawer.value = false;
};
/**
* 二三维地图变化
* @param index
*/
const changeModel = (index) => {
if (currentModelIndex.value != index) {
currentModelIndex.value = index;
if (index == 1) {
if (mapLayer.tiles3dLayer == undefined) {
mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "模型名称",
url: "http://localhost:9090/B3dmqlh06/tileset.json",
maximumScreenSpaceError: 16,
maxMemory: 1024, // 最大缓存内存大小(MB)
matrixMove: {
hasMiddle: false,
},
flyTo: true,
// cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位),允许在这个值上下波动。
// maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
// maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右,内存分配变小有利于倾斜摄影数据回收,提升性能体验
// skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数这个参数在金字塔数据加载中可以跳过一些级别这样整体的效率会高一些数据占用也会小一些。但是带来的异常是1 加载过程中闪烁看起来像是透过去了数据载入完成后正常。2有些异常的面片这个还是因为两级LOD之间数据差异较大导致的。当这个参数设置false两级之间的变化更平滑不会跳跃穿透但是清晰的数据需要更长而且还有个致命问题一旦某一个tile数据无法请求到或者失败导致一直不清晰。所以我们建议对于网络条件好并且数据总量较小的情况下可以设置false提升数据显示质量。
// loadSiblings: true, // 如果为true则不会在已加载完模型后自动从中心开始超清化模型
// cullRequestsWhileMoving: true,
// cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
// preferLeaves: true, //【重要】这个参数默认是false同等条件下叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件这个只是其中之一如果skipLevelOfDetail=false这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块对于提升大数据以及网络环境不好的前提下有一点点改善意义。
// progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
// dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
// preloadWhenHidden: true, //tileset.show是false时也去预加载数据
});
map.addLayer(mapLayer.tiles3dLayer);
} else {
mapLayer.tiles3dLayer.show = true;
map.sceneOptionsmap({
center: {
lat: 31.967646,
lng: 120.847855,
alt: 1250,
heading: 6.6,
pitch: -18.8,
},
});
}
} else {
if (mapLayer.tiles3dLayer) {
mapLayer.tiles3dLayer.show = false;
}
}
}
};
1 month ago
const laoding3d = () => {
const tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "模型名称",
url: "http://192.168.0.108:9090/B3dmqlh06/tileset.json",
maximumScreenSpaceError: 16,
maxMemory: 1024, // 最大缓存内存大小(MB)
matrixMove: {
hasMiddle: false,
},
flyTo: true,
// maximumScreenSpaceError: 16, // 【重要】数值加大,能让最终成像变模糊
// cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位),允许在这个值上下波动。
// maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
// maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右,内存分配变小有利于倾斜摄影数据回收,提升性能体验
// skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数这个参数在金字塔数据加载中可以跳过一些级别这样整体的效率会高一些数据占用也会小一些。但是带来的异常是1 加载过程中闪烁看起来像是透过去了数据载入完成后正常。2有些异常的面片这个还是因为两级LOD之间数据差异较大导致的。当这个参数设置false两级之间的变化更平滑不会跳跃穿透但是清晰的数据需要更长而且还有个致命问题一旦某一个tile数据无法请求到或者失败导致一直不清晰。所以我们建议对于网络条件好并且数据总量较小的情况下可以设置false提升数据显示质量。
// loadSiblings: true, // 如果为true则不会在已加载完模型后自动从中心开始超清化模型
// cullRequestsWhileMoving: true,
// cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
// preferLeaves: true, //【重要】这个参数默认是false同等条件下叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件这个只是其中之一如果skipLevelOfDetail=false这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块对于提升大数据以及网络环境不好的前提下有一点点改善意义。
// progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
// dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
// preloadWhenHidden: true, //tileset.show是false时也去预加载数据
});
map.addLayer(tiles3dLayer);
};
/**
* 地图初始化完毕
* @param mapInstance
*/
const mapLoad = (mapInstance) => {
map = mapInstance;
//创建marker图层
mapLayer.markerLayer = new mars3d.layer.GraphicLayer({
allowDrillPick: true, // 如果存在坐标完全相同的图标点可以打开该属性click事件通过graphics判断
});
map.addLayer(mapLayer.markerLayer);
};
/**
* 根据关键字搜索
*/
const getList = async () => {
if (!queryParams.name) {
proxy.$modal.msgError("请先输入点位名称");
return;
}
let res = await getPointList(queryParams);
list = res.data;
popupShow.value = true;
};
/**
* 字典
*/
const getdictList = async () => {
let res = await getdicts();
dictList = res.result;
};
1 month ago
</script>
<style scoped lang="scss">
.map-container {
position: relative;
height: 100%;
background: #0059a2;
.search-container {
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-50%);
width: 900px;
background: rgba(15, 42, 79, 0.9);
border: 1px solid #094edb;
z-index: 100;
padding: 13px 18px;
.input-title {
font-size: 16px;
color: #fff;
}
.search-bnt {
cursor: pointer;
background: url("@/assets/images/btn_bg.png");
padding: 5px 16px;
background-size: 100% 100%;
}
.input-box {
position: relative;
flex: 1;
margin: 0 10px;
.result-popup {
position: absolute;
top: 55px;
width: 100%;
height: 500px;
border: 1px solid 094edb;
background-color: rgba(15, 42, 79, 0.9);
border: 1px solid #094edb;
border-radius: 4px;
box-sizing: border-box;
padding: 6px 10px;
display: flex;
align-items: center;
justify-content: center;
.list {
width: 100%;
height: 100%;
overflow-y: auto;
}
.no-data {
font-size: 16px;
color: #fff;
letter-spacing: 1px;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 16px;
color: #fff;
padding: 13px 6px;
border-bottom: 1px solid rgba(3, 91, 178, 0.5);
.loaction-icon {
display: none;
height: 25px;
width: 25px;
background: url("@/assets/images/loaction.png");
background-size: 100% 100%;
}
}
.list-item:hover {
border-radius: 4px;
background-color: #409eff;
.loaction-icon {
display: block;
}
}
}
}
}
.map-layer {
position: absolute;
right: 30px;
bottom: 30px;
.model {
width: 55%;
margin-left: auto;
margin-bottom: 15px;
}
& > div {
background: rgba(15, 42, 79, 0.9);
border: 1px solid #094edb;
& > div {
position: relative;
cursor: pointer;
padding: 6px 15px;
font-size: 16px;
color: #fff;
}
& > div:not(:last-child)::after {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
content: "|";
font-size: 14px;
color: #409eff;
}
.activeBtn {
background: #409eff;
}
}
}
}
.flex-container {
display: flex;
align-items: center;
}
::v-deep .el-drawer {
// width: 20% !important;
background: rgba(15, 42, 79, 1);
border: 1px solid #094edb;
.el-drawer__header {
color: #fff !important;
font-weight: bold;
font-size: 22px;
}
.drawer-btn {
1 month ago
position: absolute;
right: 20px;
bottom: 20px;
1 month ago
}
}
::v-deep .el-tree {
background: transparent;
color: #fff;
font-size: 16px;
}
::v-deep .el-tree-node__content {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
::v-deep .el-tree-node__content:hover {
background: #409eff !important;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
background: #409eff !important;
}
::v-deep .info-dialog {
background: rgba(15, 42, 79, 1);
border: 1px solid #094edb;
.el-dialog__title,
.el-dialog__close {
color: #fff !important;
font-weight: bold;
font-size: 22px;
}
.info-title {
font-size: 16px;
color: #fff;
font-weight: 550;
margin-bottom: 15px;
}
.info-box {
max-height: 500px;
overflow-y: auto;
}
.info-row {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
font-size: 14px;
color: #fff;
.row-lable {
width: 75px;
color: #9acfff;
}
.row-value {
flex: 1;
}
.value-list {
& > div {
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(3, 91, 178, 0.5);
.value-list-title {
flex: 1;
}
.value-list-subTitle {
color: #094edb;
margin-left: 3px;
cursor: pointer;
}
}
}
}
::v-deep .image-slot {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 20px;
border: 1px solid #094edb;
}
.yewu-list {
.yewu-title {
margin: 15px 0;
font-size: 15px;
color: #fff;
border-left: 5px solid #409eff;
padding-left: 10px;
}
.list-sub {
cursor: pointer;
display: flex;
align-items: center;
font-size: 14px;
color: #fff;
padding: 10px 0;
border-bottom: 1px solid rgba(3, 91, 178, 0.5);
}
.file-icon {
margin-right: 10px;
height: 20px;
width: 20px;
background: url("@/assets/images/file.png");
background-size: 100% 100%;
}
}
}
// 滚动条
/* 设置滚动条整体样式 */
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
/* 设置滚动条轨道 */
::-webkit-scrollbar-track {
background: transparent; /* 轨道背景颜色 */
}
/* 设置滚动条滑块 */
::-webkit-scrollbar-thumb {
background: #094edb; /* 滑块背景颜色 */
border-radius: 5px; /* 滑块圆角 */
}
/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
background: #02a1cb; /* 悬停时滑块背景颜色 */
}
1 month ago
</style>