BJYSYBZ/BJYSYBZ_C/src/App.vue

<template>
  <div id="app">
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss">
@import 'style/app.scss';
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: Alibaba PuHuiTi;
  line-height: normal !important;
}
ul,
li {
  margin: 0px;
  list-style: none;
  padding: 0px;
}
#app {
  height: 100%;
  background: url('./assets/images/bg.png') no-repeat;
  background-size: 100% 100%;
  > .container {
    height: 100%;
  }
}

.el-loading-mask {
  .el-loading-spinner {
    .el-icon-loading {
      font-size: 40px;
    }
    .el-loading-text {
      font-size: 20px;
    }
  }
}

.leaflet-control-attribution {
  display: none;
}
.esri-truncated-attribution {
  display: none;
}
.my-div-icon {
  width: 100px;
  margin-top: 5px;
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.el-cascader__dropdown {
  background: none !important;
  border: 0px !important;
  .popper__arrow {
    border-bottom-color: #468ec0 !important;
    &::after {
      border-bottom-color: #468ec0 !important;
    }
  }
}
.el-cascader-menu {
  border-right-color: #468ec0 !important;
}
.el-cascader-menu__wrap {
  height: inherit !important;
  border: 1px solid #468ec0;
  background: linear-gradient(0deg, #102a54 0%, #21407e 100%);
}
.el-cascader-node {
  .el-cascader-node__label {
    color: #fff;
  }
  i {
    color: #fff;
  }
}
.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
  background: #2d75e4 !important;
}

.el-popper {
  .el-cascader-panel {
    .el-cascader-menu {
      .el-cascader-menu__wrap {
        .el-cascader-menu__list {
          .el-cascader-node {
            .el-radio {
              .el-radio__input {
                &.is-checked {
                  .el-radio__inner {
                    border-color: #fff !important;
                    background: #fff !important;
                    &::after {
                      width: 6px;
                      height: 6px;
                      background: linear-gradient(
                        0deg,
                        #102a54 0%,
                        #405f97 100%
                      );
                    }
                  }
                }
                .el-radio__inner {
                  border-color: #70d5ff;
                  background: linear-gradient(0deg, #102a54 0%, #405f97 100%);
                }
              }
            }
          }
        }
      }
    }
  }
}

.featureModal {
  width: 60% !important;
  border: 0px !important;
  //background: url("./assets/images/box-bg.png") no-repeat !important;
  background: #133887 !important;
  background-size: 100% 100% !important;
  color: #fff !important;

  .el-message-box__title {
    color: #fff !important;
  }
  .el-dialog__header {
    background: linear-gradient(
      0deg,
      rgba(1, 148, 233, 0.6) 0%,
      #0653ac 100%
    ) !important;
  }
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__body {
    border: 1px solid #3d8be7;
    box-shadow: inset 0px 0px 20px 0px #3d8be7;
  }
}
.featureModal2 {
  width: 80% !important;
  height: 80% !important;
  border: 1px solid #3d8be7;
  box-shadow: inset 0px 0px 20px 0px #3d8be7 !important;
  //background: url("./assets/images/box-bg.png") no-repeat !important;
  background: #133887 !important;
  background-size: 100% 100% !important;
  color: #fff !important;

  .el-message-box__title {
    color: #fff !important;
  }
  .el-dialog__header {
    background: linear-gradient(
      0deg,
      rgba(1, 148, 233, 0.6) 0%,
      #0653ac 100%
    ) !important;
  }
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__body {
    height: 92% !important;
    padding: 10px !important;
  }
}
%common1 {
  opacity: 1;
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s,
    opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
  -ms-transform-origin: center top;
  transform-origin: center top;
}
.menu-bottom-to-top-enter-active,
.menu-bottom-to-top-leave-active {
  @extend %common1;
  transform-origin: center bottom;
}
.menu-bottom-to-top-enter,
.menu-bottom-to-top-leave-active {
  opacity: 0;
  -ms-transform: scaleY(0);
  transform: scaleY(0);
}

.el-dropdown-menu {
  background-color: #264584 !important;
  border: 1px solid #2c64a1 !important;
  .el-dropdown-menu__item {
    color: #1bf1ff !important;
  }
  .selected {
    background-color: #2363ae !important;
    span {
      color: #1bf1ff !important;
    }
  }
  .el-dropdown-menu__item:hover {
    background-color: #2363ae !important;
  }
  .popper__arrow {
    border-bottom-color: #2c64a1 !important;
  }
  .popper__arrow::after {
    border-bottom-color: #264584 !important;
  }
}
</style>