937 lines
23 KiB
Vue
937 lines
23 KiB
Vue
<template>
|
||
<div class="left_second" id="secondMenu" style="color: #fff" ref="secondMenu">
|
||
<!--二级菜单背景图-->
|
||
<!-- <svg-icon :class-name="['left_second_menu_bg']" icon-class="secondMenuBg"></svg-icon> -->
|
||
<!--菜单列表-->
|
||
<div class="menus_box">
|
||
<div v-for="item in currentItem" @click.right="item.rightfun(item)" @click="item.fun(item)" class="menus_item"
|
||
@mouseover="mouseover(item)" @mouseleave="mouseout(item)">
|
||
<div class="item_icon">
|
||
<template v-if="item.hasOwnProperty('svg')">
|
||
<svg-icon v-show="!item.isMoveIn" :class-name="['second_menu_icon']" :icon-class="item.svg"></svg-icon>
|
||
<img style="width: 100%;height: 100%;" v-if="item.isMoveIn" :src="'/static/animation/' + item.svg + '.png'"
|
||
alt="">
|
||
</template>
|
||
<template v-else>
|
||
<img width="100%" height="100%" :src="item.poster_url" alt="" />
|
||
<!-- <el-button icon="el-icon-document" style="width: 100%;height: 100%"></el-button>-->
|
||
<!-- <i class="el-icon-document-add"></i>-->
|
||
<!-- <i class="el-icon-document" style="width: 100%;height: 100%"></i>-->
|
||
</template>
|
||
</div>
|
||
<template v-if="item.hasOwnProperty('svg')">
|
||
<template v-if="item.hasOwnProperty('trueName') && item.status">
|
||
<div :class="['item_text', !item.status ? '' : 'active']">
|
||
{{ $t(`leftMenu.secondMenu.${item.trueName}`) }}
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div :class="['item_text', !item.status ? '' : 'active']">
|
||
{{ $t(`leftMenu.secondMenu.${item.name}`) }}
|
||
</div>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
<div class="item_text">{{ item.model_name || item.ts_name }}</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import secondMenuFun from "./secondMenuFun";
|
||
import { listSituation, modelList } from "../../api/gisAPI";
|
||
export default {
|
||
name: "secondMenu",
|
||
mixins: [secondMenuFun],
|
||
data() {
|
||
return {
|
||
menuList: [
|
||
// 菜单内容来源于文件
|
||
{
|
||
list: [],
|
||
key: "situation",
|
||
},
|
||
// 模型库二级菜单
|
||
{
|
||
list: [],
|
||
key: "model",
|
||
},
|
||
// 特效库二级菜单
|
||
{
|
||
list: [
|
||
//轨迹运动
|
||
{
|
||
fun: this.toDo,
|
||
name: "trajectoryMotion",
|
||
svg: "trajectoryMotion",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//电子围墙
|
||
{
|
||
fun: this.toDo,
|
||
name: "electronicFence",
|
||
svg: "electronicFence",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//扩散光波
|
||
{
|
||
fun: this.toDo,
|
||
name: "radarLightWave",
|
||
svg: "radarLightWave",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//雷达光波
|
||
{
|
||
fun: this.toDo,
|
||
name: "diffusedLightWave",
|
||
svg: "diffusedLightWave",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//立体雷达
|
||
{
|
||
fun: this.toDo,
|
||
name: "scanStereoscopic",
|
||
svg: "scanStereoscopic",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//多边体
|
||
{
|
||
fun: this.toDo,
|
||
name: "multilateralBody",
|
||
svg: "multilateralBody",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//水面
|
||
{
|
||
fun: this.toDo,
|
||
name: "waterSurface",
|
||
svg: "waterSurface",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//贴地文字
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "groundText",
|
||
// svg: "groundText",
|
||
// },
|
||
// //立体文字
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "standText",
|
||
// svg: "standText",
|
||
// },
|
||
/*
|
||
{
|
||
fun: this.toDo,
|
||
name: 'cube',
|
||
svg: "cube",
|
||
},
|
||
{
|
||
fun: this.toDo,
|
||
name: 'trajectoryMotion',
|
||
svg: "trajectoryMotion",
|
||
},
|
||
|
||
*/
|
||
//绘制道路（无）
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "roadDraw",
|
||
// svg: "roadDraw",
|
||
// },
|
||
// //线路绘制（无）
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "lineDraw",
|
||
// svg: "lineDraw",
|
||
// },
|
||
//喷泉
|
||
{
|
||
fun: this.toDo,
|
||
name: "fountain",
|
||
svg: "fountain",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// // 水流
|
||
{
|
||
fun: this.toDo,
|
||
name: "waterL",
|
||
svg: "waterL",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//火焰
|
||
{
|
||
fun: this.toDo,
|
||
name: "fire",
|
||
svg: "fire",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//爆炸
|
||
{
|
||
fun: this.toDo,
|
||
name: "explosion",
|
||
svg: "explosion",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//烟雾
|
||
{
|
||
fun: this.toDo,
|
||
name: "smoke",
|
||
svg: "smoke",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//夜视
|
||
{
|
||
fun: this.toDo,
|
||
name: "nightVision",
|
||
svg: "nightVision",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 雨
|
||
{
|
||
fun: this.toDo,
|
||
name: "rain",
|
||
svg: "rain",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 雪
|
||
{
|
||
fun: this.toDo,
|
||
name: "snow",
|
||
svg: "snow",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//雾
|
||
{
|
||
fun: this.toDo,
|
||
name: "fog",
|
||
svg: "fog",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//光照
|
||
{
|
||
fun: this.toDo,
|
||
name: "illumination",
|
||
svg: "illumination",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//星空
|
||
{
|
||
fun: this.toDo,
|
||
name: "skystarry",
|
||
svg: "skystarry",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
|
||
/* {
|
||
fun: this.toDo,
|
||
name: 'light',
|
||
svg: "light",
|
||
status: false
|
||
},*/
|
||
//热力图（无）
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "heatMap",
|
||
// svg: "heatMap",
|
||
// },
|
||
],
|
||
key: "effect",
|
||
},
|
||
// 分析二级菜单
|
||
{
|
||
list: [
|
||
//淹没分析
|
||
{
|
||
fun: this.toDo,
|
||
name: "inundationAnalysis",
|
||
svg: "inundationAnalysis",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//剖面分析
|
||
{
|
||
fun: this.toDo,
|
||
name: "profileAnalysis",
|
||
svg: "profileAnalysis",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//通视
|
||
{
|
||
fun: this.toDo,
|
||
name: "Intervisibility",
|
||
svg: "Intervisibility",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//视域分析
|
||
{
|
||
fun: this.toDo,
|
||
name: "visualFieldAnalysis",
|
||
svg: "visualFieldAnalysis",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 视域分析（地形）
|
||
{
|
||
fun: this.toDo,
|
||
name: "visualFieldAnalysis2",
|
||
svg: "visualFieldAnalysis2",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
|
||
//坡度坡向
|
||
{
|
||
fun: this.toDo,
|
||
name: "slopeDirection",
|
||
svg: "slopeDirection",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//土方分析
|
||
{
|
||
fun: this.toDo,
|
||
name: "cutFill",
|
||
svg: "cutFill",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
|
||
//范围查询
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "rangeQuery",
|
||
// svg: "rangeQuery",
|
||
// },
|
||
//透视
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "perspective",
|
||
// svg: "perspective",
|
||
// status: false,
|
||
// },
|
||
|
||
//等高线
|
||
{
|
||
fun: this.toDo,
|
||
name: "contour",
|
||
svg: "contour",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//清除分析
|
||
{
|
||
fun: this.toDo,
|
||
name: "clear",
|
||
svg: "clearMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
],
|
||
key: "analysis",
|
||
},
|
||
{
|
||
list: [
|
||
// 投影面积
|
||
{
|
||
fun: this.toDo,
|
||
name: "projectionArea",
|
||
svg: "projectionArea",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 贴地面积
|
||
{
|
||
fun: this.toDo,
|
||
name: "areaMeasure",
|
||
svg: "areaMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 投影距离
|
||
{
|
||
fun: this.toDo,
|
||
name: "projectionDistanceMeasure",
|
||
svg: "projectionDistanceMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// // 贴地距离
|
||
{
|
||
fun: this.toDo,
|
||
name: "distanceMeasure",
|
||
svg: "distanceMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 高度测量
|
||
{
|
||
fun: this.toDo,
|
||
name: "heightMeasure",
|
||
svg: "heightMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 三角测量
|
||
{
|
||
fun: this.toDo,
|
||
name: "triangleMeasure",
|
||
svg: "triangleMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 方位角测量
|
||
{
|
||
fun: this.toDo,
|
||
name: "MeasureAzimuth",
|
||
svg: "MeasureAzimuth",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//夹角测量（无）
|
||
{
|
||
fun: this.toDo,
|
||
name: "MeasureAngle",
|
||
svg: "MeasureAngle",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 坡度测量
|
||
{
|
||
fun: this.toDo,
|
||
name: "lopeDistanceMeasures",
|
||
svg: "lopeDistanceMeasures",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 坐标测量
|
||
{
|
||
fun: this.toDo,
|
||
name: "coorMeasure",
|
||
svg: "coorMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 清除测量
|
||
{
|
||
fun: this.toDo,
|
||
name: "clearMeasure",
|
||
svg: "clearMeasure",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
],
|
||
key: "measure",
|
||
},
|
||
// 工具二级菜单
|
||
{
|
||
list: [
|
||
//BIM编辑（无）
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "BIMEdit",
|
||
// svg: "BIMEdit",
|
||
// status: false,
|
||
// },
|
||
// 路径规划
|
||
{
|
||
fun: this.toDo,
|
||
name: "routePlan",
|
||
svg: "routePlan",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 清除路径规划
|
||
{
|
||
fun: this.toDo,
|
||
name: "clearTrajectoryMotion",
|
||
svg: "clearTrajectoryMotion",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
|
||
/*{
|
||
fun: this.toDo,
|
||
name: 'floodSimulation',
|
||
svg: 'floodSimulation'
|
||
},*/
|
||
/* {
|
||
fun: this.toDo,
|
||
name: 'clearQuery',
|
||
svg: 'clearQuery'
|
||
},*/
|
||
/* {
|
||
fun: this.toDo,
|
||
name: 'videoRecord',
|
||
svg: 'videoRecord'
|
||
},*/
|
||
//涂鸦
|
||
{
|
||
fun: this.toDo,
|
||
name: "graffiti",
|
||
svg: "graffiti",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//清除涂鸦
|
||
{
|
||
fun: this.toDo,
|
||
name: "clearGraffiti",
|
||
svg: "clearGraffiti",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 飞行漫游
|
||
{
|
||
fun: this.toDo,
|
||
name: "path",
|
||
svg: "path",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 坐标定位
|
||
{
|
||
fun: this.toDo,
|
||
name: "coorLocation",
|
||
svg: "coorLocation",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//鼠标定位
|
||
{
|
||
fun: this.toDo,
|
||
name: "mouseLocation",
|
||
trueName: "mouseOver",
|
||
svg: "mouseLocation",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//标注点聚合
|
||
{
|
||
fun: this.toDo,
|
||
name: "annotationAggregation",
|
||
svg: "annotationAggregation",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 卷帘对比
|
||
{
|
||
fun: this.toDo,
|
||
name: "splitScreen",
|
||
svg: "splitScreen",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// // 全景导入222
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "importPanorama",
|
||
// svg: "importPanorama",
|
||
// },
|
||
// // //照片定位222
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "pictureLocation",
|
||
// svg: "pictureLocation",
|
||
// },
|
||
|
||
// 屏幕截图（无）
|
||
{
|
||
fun: this.toDo,
|
||
name: "HDScreen",
|
||
svg: "HDScreen",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 高清出图（2）
|
||
{
|
||
fun: this.toDo,
|
||
name: "HDScreenHD",
|
||
svg: "HDScreenHD",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 视频录制222
|
||
{
|
||
fun: this.toDo,
|
||
name: "videoRecording",
|
||
trueName: "destoryRecord",
|
||
svg: "videoRecord",
|
||
status: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
|
||
//模型压平
|
||
{
|
||
fun: this.pressModel,
|
||
name: "pressModel",
|
||
svg: "pressModel",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//地形开挖
|
||
{
|
||
fun: this.terrainDig,
|
||
name: "terrainDig",
|
||
svg: "terrainDig",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 剖切
|
||
{
|
||
fun: this.tilesetClipping,
|
||
name: "tilesetClipping",
|
||
svg: "tilesetClipping",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
//清除剖切
|
||
{
|
||
fun: this.clearTilesetClipping,
|
||
name: "clearTilesetClipping",
|
||
svg: "clearTilesetClipping",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
|
||
//范围截图(无)
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "areaScreen",
|
||
// svg: "areaScreen",
|
||
// },
|
||
|
||
// 模型转换
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "transform",
|
||
// svg: "transform",
|
||
// },
|
||
|
||
//照片定位
|
||
|
||
// 度分秒转换
|
||
{
|
||
fun: this.toDo,
|
||
name: "projConvert",
|
||
svg: "projConvert",
|
||
status1: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 投影转换
|
||
{
|
||
fun: this.toDo,
|
||
name: "projectionConvert",
|
||
svg: "projectionConvert",
|
||
status1: false,
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 全景关联222
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "importImg",
|
||
// svg: "importImg",
|
||
// },
|
||
// gdb导入222
|
||
{
|
||
fun: this.toDo,
|
||
name: "gdbImport",
|
||
svg: "gdbImport",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// obj模型
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "objModel",
|
||
// svg: "gdbImport",
|
||
// },
|
||
// 人房关联222
|
||
{
|
||
fun: this.toDo,
|
||
name: "peopleRoomLink",
|
||
svg: "peopleRoomLink",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// {
|
||
// fun: this.toDo,
|
||
// name: "airLine",
|
||
// svg: "peopleRoomLink",
|
||
// },
|
||
// 物资关联222
|
||
// 圆形统计
|
||
{
|
||
fun: this.goodsSearchCircle,
|
||
name: "goodsSearchCircle",
|
||
svg: "goodsSearchCircle",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
af
|
||
},
|
||
// 多边形统计
|
||
{
|
||
fun: this.goodsSearchPolgon,
|
||
name: "goodsSearchPolgon",
|
||
svg: "goodsSearchPolgon",
|
||
// 是否移入
|
||
isMoveIn: false,
|
||
|
||
},
|
||
// 分屏
|
||
],
|
||
key: "tool",
|
||
},
|
||
// 菜单内容来源于文件
|
||
// 军标二级菜单
|
||
{
|
||
list: [],
|
||
key: "militaryMark",
|
||
},
|
||
// 在线图源二级菜单
|
||
{
|
||
key: "onlinePictureSource",
|
||
},
|
||
],
|
||
currentItem: [],
|
||
currentIndex: 0,
|
||
};
|
||
},
|
||
created() { },
|
||
mounted() {
|
||
// 接收一级菜单页面传过来的具体值，并指定当前页面将要显示的二级菜单具体值
|
||
this.$recvChanel("currentSecondMenu", (params) => {
|
||
console.log(params);
|
||
let arr = ["importImg", "gdbImport", "importPanorama"];
|
||
this.menuList.forEach((it, i) => {
|
||
if (it.key == params.item.key) {
|
||
if (["model"].includes(it.key)) {
|
||
this.currentItem = [];
|
||
console.log("secondMenu的mounted");
|
||
modelList((res) => {
|
||
it.list = res.list;
|
||
it.list.forEach((item) => {
|
||
item.fun = this.addGlb;
|
||
});
|
||
this.currentItem = it.list;
|
||
});
|
||
// this.currentItem = [{name: 'imports',}]
|
||
} else if (["situation"].includes(it.key)) {
|
||
this.currentItem = [];
|
||
console.log("secondMenu的mounted");
|
||
listSituation({}, (res) => {
|
||
console.log(res);
|
||
it.list = res.list;
|
||
it.list.forEach((item) => {
|
||
item.rightfun = this.editTs;
|
||
item.fun = this.tsOnclick;
|
||
});
|
||
this.currentItem = it.list;
|
||
this.currentItem.unshift({ ts_name: "新建", fun: this.newTs });
|
||
});
|
||
// this.currentItem = [{name: 'imports',}]
|
||
} else {
|
||
this.currentItem = it.list;
|
||
}
|
||
// this.currentIndex = i
|
||
}
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
// 鼠标移入
|
||
mouseover(item) {
|
||
if (item.hasOwnProperty("isMoveIn")) item.isMoveIn = true;
|
||
},
|
||
// 鼠标移出
|
||
mouseout(item) {
|
||
if (item.hasOwnProperty("isMoveIn")) item.isMoveIn = false;
|
||
},
|
||
toDo(item) {
|
||
if (!item.hasOwnProperty("status"))
|
||
this.$changeComponentShow(".left_second", false);
|
||
this[item.name](item, this.menuList);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
#secondMenu {
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
z-index: 888;
|
||
display: none;
|
||
transform: translateY(-50%);
|
||
/*width: 17vw;
|
||
height: 30vh;*/
|
||
width: 15vw;
|
||
left: 9vw;
|
||
//border: 1px solid greenyellow;
|
||
|
||
.menus_box {
|
||
width: 95%;
|
||
position: absolute; // 绝对定位
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
//background: #0bcb9a;
|
||
//margin: auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: start;
|
||
align-content: flex-start;
|
||
text-align: center;
|
||
flex-wrap: wrap;
|
||
overflow: auto;
|
||
background: url('../../assets/images/hongse/leftbg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px;
|
||
|
||
.menus_item {
|
||
margin-top: 0.6em;
|
||
cursor: pointer;
|
||
//width: 4vw;
|
||
//height: 5vh;
|
||
width: 25%;
|
||
height: 20%;
|
||
//background: salmon;
|
||
//padding: .4em;
|
||
|
||
.item_icon {
|
||
height: 20px;
|
||
width: 20px;
|
||
position: relative;
|
||
margin: auto;
|
||
}
|
||
|
||
.item_text {
|
||
font-size: 12px;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding-top: 0.5em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menus_box::-webkit-scrollbar-track {
|
||
border: 1px solid #66b8cd;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.menus_box::-webkit-scrollbar {
|
||
width: 8px;
|
||
background-color: #193a49;
|
||
}
|
||
|
||
.menus_box::-webkit-scrollbar-thumb {
|
||
background-color: #28e4fc;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.item_icon {
|
||
.el-button {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
color: #f00 !important;
|
||
}
|
||
}
|
||
</style>
|