/**********custom 基于模板工程之后的自定义样式 **************/ // 修改原版样式 .panel .accordion-toggle { /**以下为重置样式,这样可以整个头部都可以点击,增强用户体验***/ height: 41px; position: absolute; width: 100%; top: 0; left: 0; padding: 10px 15px; } .padding-t-0 { padding-top: 0 !important; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #fff; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #fff; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(0, 0, 0, .2); } .modal { top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 1050; max-width: 90%; max-height: 90%; min-height: 488px; } .modal-default { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; max-width: none; max-height: none; background: transparent; transform: none; } .modal-open .modal { overflow: visible; } .modal-backdrop { background: rgba(0, 0, 0, .6); } .modal-backdrop.in { z-index: 1040; } .modal .panel { position: relative; margin-bottom: 0; height: 100%; } .modal .panel .panel-heading { height: 41px; } .modal .panel .panel-body { position: relative; overflow: auto; height: calc(100% - 96px); } .modal .panel .panel-footer { height: 55px; } .hide-required-img-input { position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; pointer-events: none; } /*灰化*/ .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .noClick { pointer-events: none; } .fadeNode { opacity: .6; } /**日期时间选择控件宽度变大**/ .datetimepicker.max { width: 380px !important; } /**去百度地图logo**/ .BMap_cpyCtrl { display: none; } .anchorBL { display: none; } /*****表格操作按钮样式****/ .grid-button { padding: 2px; } .grid-button .btn { padding: 3px 8px; margin-right: 4px; } .info-inline { padding: 4px 0; } .info-inline input.form-control { width: 120px; margin-right: 8px; } .info-inline input[type="number"].form-control { width: 60px; padding-right: 2px; } .hover-show { -webkit-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .hover-show:hover { -webkit-filter: blur(0); -ms-filter: blur(0); filter: blur(0); } .temp-row { text-align: center; height: 100%; padding: 5px; } .temp-row.text-left { text-align: left; } /*toast*/ .toast-top-center { left: 50%; top: 12px; transform: translateX(-50%); -webkit-transform: translateX(-50%); } /**禁用动画**/ .no-animate .ng-animate { transition: 0s !important; } /**分页输入框***/ .ui-grid-pager-control input { min-width: 98px; } /**表格蒙版***/ .panel > .table-responsive { position: relative; } .grid-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 9; } .grid-mask span { display: table; position: relative; color: #fff; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /***LED字体*****/ @font-face { font-family: 'ledfont'; src: url('../fonts/digital-7 (mono).ttf'); font-weight: normal; font-style: normal; } .ledfont { font-family: 'ledfont'; } /**图片上传***/ .upload-pic { position: relative; margin-right: 10px; margin-bottom: 10px; text-align: center; border: 1px solid #e5e5e5; width: 82px; height: 82px; border-radius: 2px; float: left; } .upload-pic.active { border: 1px solid #23b7e5; box-shadow: 0 0 3px #23b7e5 } .upload-pic input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: transparent; border-radius: 8px; opacity: 0; } .upload-pic img { width: 100%; height: 100%; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 2; } .upload-pic .delpic { position: absolute; top: -5px; right: -5px; z-index: 3; width: 20px; height: 20px; color: #fff; text-align: center; line-height: 1; background-color: #ff0000; border-radius: 100%; font-style: normal; } .upload-pic .iconfont { position: absolute; top: 50%; left: 50%; color: #d8d8d8; font-size: 48px; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .upload-des { margin-top: 5px; margin-bottom: 0; text-align: center; } /*文件拖放上传*/ .upload-area { position: relative; background: #fff } .upload-area input { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: transparent; border-radius: 8px; opacity: 0; } /*************自定义遮罩层****************************/ .load-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1002; background-color: rgba(0, 0, 0, .4); -webkit-transition-duration: 600ms; transition-duration: 600ms; display: block; opacity: 0; } .load-mask.active { opacity: 1; } .load-mask.dark { background-color: rgba(0, 0, 0, .8); } .loader-inner { display: table; position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .loader-inner > span { color: #fff; font-size: 15px; display: block; } @-webkit-keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; } 80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; } 80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .ball-pulse > div:nth-child(0) { -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(1) { -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(2) { -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div:nth-child(3) { -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); } .ball-pulse > div { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; } /************遮罩层end*******************************/ /***统计图***/ .chartPanel { position: relative; height: 820px; padding: 0; background: #044061; font-family: '微软雅黑'; } .chart-mask { position: absolute; width: 100%; height: 100%; max-height: 100vh; background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; z-index: 9; font-size: 20px; cursor: pointer; } .chartPanel:before { content: ""; width: 100%; height: 100%; position: absolute; background-image: url("/1.0/img/map-back.jpg"); background-position: center; box-shadow: inset 0 0 150px #000, inset 0 0 150px #000, inset 0 0 150px #000, inset 0 0 150px #000, inset 0 0 150px #000; filter: brightness(0.5) saturate(.7) hue-rotate(275deg) opacity(.6); } #particles-js { width: 100%; height: 100%; position: absolute; top: 0; } .fixed-map { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 9999999; padding: 0; } .fullscreenBtn { position: absolute; z-index: 10; color: rgba(255, 255, 255, .0); right: 0px; top: 0px; opacity: 0; padding: 2px; } .fullscreenBtn:hover { color: rgba(255, 255, 255, 1); } .chartPanel:hover .fullscreenBtn { opacity: 1; } .showDataBox { position: absolute; width: 100%; height: 100%; top: 0; } .mapHead { position: absolute; text-align: center; top: 0; left: 0; width: 100%; z-index: 1; color: #fff; overflow: hidden; } .mapHead svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 0; } .map-title { font-family: '微软雅黑'; position: relative; z-index: 4; font-size: 30px; line-height: 75px; width: 30%; left: 35%; border-top: none; } .map-time { position: absolute; top: 0; right: 20px; line-height: 40px; } .map-time span { font-size: 14px; color: #44ADE1; margin-left: 10px; } .map-sub-view { display: block; } .map-sub-value { display: inline-block; padding: 10px 20px; margin: 0 5px; } .map-sub-view span { display: block; font-size: 14px; } .map-sub-view em { display: block; font-style: normal; font-size: 32px; } .mapBox { position: absolute; height: 80%; width: 80%; left: 10%; } .mapEntity { position: absolute; height: 100%; width: 100%; } .chartBoxList { position: absolute; width: 25%; height: calc(100% - 50px); bottom: 0; } .chartBoxList.right { right: 0; } .chartBox, .map-sub-value { /*background: rgba(0, 0, 32, .5);*/ } .chartBox { position: absolute; z-index: 2; height: calc(33.3333% - 33.3333px); box-shadow: inset 0 0 40px rgba(0, 0, 0, .2), 0 0 40px rgba(16, 142, 233, .25); width: 100%; min-width: 320px; transform: scale(0); opacity: 0; transition: all ease-out .3s; } .chartBox.active { transform: scale(1); opacity: 1; } .chartBox.active:before, .chartBox.active:after, .chartBox.active .chartEntity:before, .chartBox.active .chartEntity:after { animation: boxShine 0.5s 1; animation-delay: .6s; } @-webkit-keyframes boxShine { 0% { opacity: 1; } 20% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0; } 80% { opacity: 1; } } .chartEntity { top: 20px; position: absolute; height: calc(100% - 20px); width: 100%; } .chartBox:before, .chartBox:after, .chartEntity:before, .chartEntity:after { content: ""; position: absolute; border: 1px solid #108EE9; width: 32px; height: 32px; -webkit-transition: all .2s ease-in-out; } .chartBox:hover:before, .chartBox:hover .chartEntity:before { width: 100%; } .chartBox:hover:after, .chartBox:hover .chartEntity:after { height: calc(100% + 20px); } .chartBox:before { left: -10px; top: -10px; border-bottom: none; border-right: none; } .chartBox:after { right: -10px; top: -10px; border-bottom: none; border-left: none; } .chartEntity:before { right: -10px; bottom: -10px; border-top: none; border-left: none; } .chartEntity:after { left: -10px; bottom: -10px; border-top: none; border-right: none; } .chartEntity div:last-child { text-align: right; display: none; width: 100% !important; left: 0 !important; top: -20px !important; background: rgba(0, 0, 0, .0) !important; color: #fff !important; font-size: 12px !important; position: absolute !important; z-index: 999; padding: 4px 8px !important; border-radius: 0 !important; } .chartEntity div:last-child br { display: none; } .chartEntity div:last-child span { margin-left: 8px; } .chartHead { position: absolute; top: 0; left: 0; width: 100%; height: 20px; line-height: 30px; padding: 0 10px; color: #fff; } #devChartPanelMap { } .chartBox.bottom-chart { height: 22%; width: calc(50% - 100px); left: calc(25% + 50px); bottom: 20px; position: absolute; } .left-chart-1 { left: 20px; bottom: calc(66.66666% + 20px); } .left-chart-2 { left: 20px; bottom: calc(33.33333% + 20px); } .left-chart-3 { left: 20px; bottom: 20px; } .right-chart-1 { right: 20px; bottom: calc(66.66666% + 20px); } .right-chart-2 { right: 20px; bottom: calc(33.33333% + 20px); } .right-chart-3 { right: 20px; bottom: 20px; } .navbar-header .navbar-brand { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 222px; display: inline-block; } .navbar-header .navbar-brand img { display: inline-block !important; } @media (min-width: 768px) { .app-aside-folded .home-navbar-brand { display: block; } } .preview-card { background: #fff; border: 5px solid rgba(1, 1, 1, .1); border-radius: 4px; width: 120px; height: 120px; box-sizing: border-box; position: relative; float: left; margin: 10px; } .preview-card-video { width: 200px; height: 200px; } .preview-card * { box-sizing: border-box; } .preview-card img, .preview-card video { max-width: 100%; max-height: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; position: relative; } .preview-card i { position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; background: #ccc; border-radius: 50%; cursor: pointer; line-height: 22px; font-size: 18px; text-align: center; opacity: .0; transition: .3s all ease-in-out; } .preview-card:hover i { opacity: 1; } //支付宝微信配色 .c-alipay { color: #108EE9 } .c-wechat { color: #07C160 } /********/ .margin-auto { margin: auto; } .stream-line { position: relative; &:before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; background: #ccc; width: 1px; } } .stream-line-node { position: relative; } .stream-line-node:last-child { // 遮住后面的线条 &:after { content: ''; position: absolute; left: 0; top: 16px; height: 100%; background: #fff; width: 1px; } } .stream-line-node-circle { border-radius: 50%; width: 8px; height: 8px; background: #ccc; position: relative; left: -4px; top: 8px; } .stream-line-node:first-child { color: #000; .stream-line-node-circle { width: 14px; height: 14px; left: -7px; background: @brand-success; } } // 设备端口详情面板 .port-grid{ box-shadow: 0 0 10px #bbb; padding: 10px; margin: 10px; border-radius: 6px; &:first-child { margin-top: 0; } .port-grid-title{ font-size: 16px; font-weight: bold; color: #000; } .port-grid-item{ margin-top: 10px; background: #fafafb; padding: 10px 0; h4{ margin: 5px 10px; font-size: 14px; font-weight: bold; } .col-sm-6 { width: 25% !important; } > div { margin-top: 4px; } } }