yclw/src/views/groupPage/index.vue

<template>
  <div class="widget-groupPage">
    <!--地图模块-->
    <BaseMap :show="showGroupPage" />
    <!--头部菜单模块-->
    <Header />
    <!--集团、分公司级页面模块-->
    <GroupPageModules :show="showGroupPage" />
    <!--项目级页面模块-->
    <DistrictPageModules :show="showDistrictPage" />
  </div>
</template>

<script>
import Flexible from './flexible'
import Header from './header/header.vue'
//地图模块
import BaseMap from './baseMap/baseMap.vue'
//集团、分公司级页面模块
import GroupPageModules from './groupPageModules/index.vue'
//项目级页面模块
import DistrictPageModules from './districtPageModules/index.vue'
//
import { getBlockPage } from '@/views/groupPage/apis'
export default {
  name: 'groupPage', //决策分析平台
  components: {
    Header,
    BaseMap,
    GroupPageModules,
    DistrictPageModules
  },
  data() {
    return {
      showGroupPage: true,
      showDistrictPage: false,
      flexibleObject: null
    }
  },
  mounted() {
    this.flexibleObject = new Flexible()
    // getBlockPage({ size: 999 }).then((res) => {
    // console.log('code列表', res)
    // })
  },
  methods: {},
  destroyed() {
    this.flexibleObject.removeflexible()
    this.flexibleObject = null
  }
}
</script>

<style lang="scss" scoped>
.widget-groupPage {
  width: 100%;
  height: 100%;
  position: fixed;
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 0.026042rem /* 5/192 */;
    height: 0.052083rem /* 10/192 */;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #0f669a;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  //修改子组件下所有下拉菜单背景,需设置:popper-append-to-body="false"
  /deep/ .el-select-dropdown {
    background: #023c5d;
    border-color: #023c5d;
    .popper__arrow,
    .popper__arrow::after {
      border-bottom-color: rgba(43, 167, 255, 0.2);
    }
    .el-scrollbar__wrap {
      margin: 0 !important;
      overflow: auto;
    }
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.selected {
      color: #409eff;
      font-weight: 500;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: rgba(43, 167, 255, 0.2);
    }
  }
  //修改子组件下所有多选框样式
  /deep/ .el-checkbox__inner {
    background: #0a1525;
    border-color: rgba(3, 109, 190, 1);
  }
  /deep/ .el-checkbox__inner::after {
    border: 2px solid rgba(17, 156, 255, 1);
    border-left: 0;
    border-top: 0;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #0a1525;
    border-color: rgba(3, 109, 190, 1);
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #fff;
  }
}
</style>>