.RiskEarlyWarningBottom-widget { z-index: 11111; position: fixed !important; top: 45px !important; left: 0px !important; bottom: 0px !important; width: 400px !important; font-size: 12px; background-color: rgb(35, 36, 58); color: #fff; } .RiskEarlyWarningBottom-widget ul, .RiskEarlyWarningBottom-widget li { margin: 0; padding: 0; list-style: none; } .RiskEarlyWarningBottom-widget .risk-early-warning-top { height: 30%; } .RiskEarlyWarningBottom-widget .risk-early-warning-center { height: 35%; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom { height: 35%; } .RiskEarlyWarningBottom-widget .text-title-box { position: relative; height: 36px; line-height: 36px; background: #14395D; } .RiskEarlyWarningBottom-widget .text-title-box .library-changes, .RiskEarlyWarningBottom-widget .text-title-box h6 { margin: 0; padding: 0; position: absolute; top: 0; left: 2%; height: 36px; line-height: 36px; font-size: 16px; font-weight: 400; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-title-box div { position: absolute; left: 12%; width: calc(100% - 16%); height: 36px; line-height: 36px; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-title-box div input { padding-left: 14px; width: 40%; height: 26px; vertical-align: center; border: none; border-radius: 5px; cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-title-box div span { display: inline-block; width: 4%; font-size: 20px; height: 36px; line-height: 30px; text-align: center; color: #000; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-title-box div i { position: absolute; left: 95%; top: 50%; transform: translate(0, -50%); /* display: inline-block; */ width: 24px; height: 24px; background: url(../../images/fxyj-rainwater-query.png) no-repeat; background-position: center; background-size: 24px 24px; cursor: pointer; } /* 日期选择的样式 */ .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .early-warning-date, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .real-time-warning { display: none; position: absolute; left: 34%; width: 54%; height: 100%; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .dataSelect, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom #real_time_y { position: absolute; top: 6px; left: 16%; width: 20%; height: 24px; padding-left: 5px; font-size: 15px; color: black; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom #real_time_y { width: 22%; display: none; } /* 日期存放容器 */ #riskEarlyWarningDateChoice, #real_time_warning { padding-left: 6px; position: absolute; top: 6px; left: 10%; width: 80%; height: 24px; border: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAASAgMAAAA1aVZ3AAAACVBMVEUAAAD///9nyrNdI4MmAAAAAXRSTlMAQObYZgAAAChJREFUCNdjWAUCCxjg9DQgtTKBAUN8aigQJGCho6KiYDSJ8ggaYR8Ao74zAKjm+cYAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 100% center; border-radius: 4px; cursor: pointer; box-sizing: border-box; } /* 导出按钮的样式 */ .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .exportExcelFile { margin: 0; padding: 0; border: none; border-radius: 4px; position: absolute; top: 6px; right: 2%; width: 48px; height: 24px; color: #fff; font-size: 14px; background: rgb(37, 129, 235); cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box, .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box { position: relative; height: calc(100% - 48px); padding: 6px 4px; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div, .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content>div, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div { position: absolute; top: 6px; left: 4px; width: calc(100% - 8px); height: calc(100% - 14px); } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div:first-child>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content>div:nth-child(1) { display: block; overflow-x: hidden; overflow-y: auto; } /* 加载状态 */ .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box .loading, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box .loading, .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content .loading { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; height: 100%; background: transparent; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box .loading .rote-load, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box .loading .rote-load, .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content .loading .rote-load { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 60px; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box .loading .rote-load img, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box .loading .rote-load img, .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content .loading .rote-load img { position: absolute; top: 0; left: 0; width: 100%; height: 40px; animation: rote 3s linear infinite; } @keyframes rote { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box .loading .rote-load span, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box .loading .rote-load span, .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content .loading .rote-load span { margin: 0 !important; position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; line-height: 20px !important; text-align: center; color: #fff; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content div strong { font-size: 14px; color: #1095ff; } .RiskEarlyWarningBottom-widget .risk-early-warning-center .text-content div a { color: red; text-decoration: none; } /* 文字预警信息样式 */ .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div p { position: absolute; top: 0; left: 0; text-indent: 2em; font-size: 14px; height: 100%; overflow-x: hidden; overflow-y: auto; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div p div { display: inline; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div p div strong { font-weight: 400; color: red; cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div p div i { font-style: normal; } .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div p span { color: red; cursor: pointer; } /* 表格区域样式修改 */ .RiskEarlyWarningBottom-widget .risk-early-warning-top .text-content-box>div:nth-child(1), .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div:nth-child(1) { display: none; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div table { width: 392px; border-collapse: collapse; table-layout: fixed; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div table tr th, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div table tr td { margin: 0; padding: 0; border: 1px solid rgb(255, 255, 255); height: 32px; line-height: 32px; text-align: center; font-size: 12px; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .table-box>div:first-child .tbody tr:nth-child(1) td { border-top: none; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .thead tr { background: rgb(39, 118, 172); } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .thead { height: 32px; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody { height: calc(100% - 32px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td input { margin: 0; padding: 0; width: 32px; height: 18px; font-size: 12px; vertical-align: middle; background: rgb(31, 207, 31); border: none; border-radius: 4px; color: #fff; } /* 右侧tab样式 */ /* .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab { position: fixed; top: 50%; transform: translate(0, -50%); right: 0; width: 80px; } */ .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav { position: fixed; top: calc(50% - 90px); transform: translate(0, -50%); right: 12px; width: 80px; display: flex; flex-direction: column; margin: 0; padding: 0; /* width: 100%; */ height: 72px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li { position: relative; flex: 1; margin-top: 2px; width: 80px; height: 22px; line-height: 22px; text-align: center; background: rgb(94, 114, 128); border-radius: 4px; cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li.nav-active { background: rgb(12, 70, 146); } /* 模块对应得子类 */ .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li:first-child ul { display: block; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li ul { display: none; position: absolute; top: 0; right: 90px; width: 80px; background: rgb(94, 114, 128); border-radius: 5px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li ul li { position: relative; margin: 2px 0; width: 80px; height: 22px; line-height: 22px; text-align: center; background: rgb(94, 114, 128); border-radius: 4px; cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li ul li input { vertical-align: middle; } /* 模块对应的实时,预测 */ .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li:first-child>div { display: block; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li>div { display: none; position: absolute; top: 0; right: 180px; width: 80px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li>div>div { position: relative; display: flex; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li>div>div>div { display: none; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: rgb(12, 70, 146); } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li>div button { flex: 1; padding: 0; height: 22px; font-size: 12px; border: none; color: #fff; background: rgb(94, 114, 128); cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .nav>li>div button.navli-clk-change { background: rgb(94, 114, 128); } /* 图例 */ /* .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image { position: fixed; right: 58px; bottom: 25px; width: 104px; } */ .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div { display: none; position: fixed; right: 58px; bottom: 25px; width: 128px; background: rgb(11, 78, 122); border: 1px solid rgb(0, 140, 255); z-index: 44; } /* 图例的显示位置 */ .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .fjqyltl, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .ylztl, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .shzhtl { right: 54px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .fjqswtl, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .skztl, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .zxhltl { right: 190px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .hdztl, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .zyhltl { right: 326px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div.fjqyltl .legend-title, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div.fjqswtl .legend-title { padding-left: 0px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div.hdztl .legend-title, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div.skztl .legend-title, .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div.ylztl .legend-title { padding-left: 14px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div .legend-title { position: relative; padding-left: 8px; height: 22px; line-height: 22px; text-align: left; background: rgb(1, 48, 80); cursor: move; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div .legend-title .lefend-close { position: absolute; top: 0; right: 0; height: 100%; width: 22px; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image>div .legend-title .lefend-close i { display: block; margin: 5px; height: 12px; width: 12px; background: url('../../images/legend-close.png') no-repeat; background-size: 100% 100%; cursor: pointer; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image li { padding-left: 16px; width: 100%; height: 20px; line-height: 20px; } /* 水库站 */ .fxyj-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 20px; } .fxyj-table tbody, .fxyj-table tr, .fxyj-table td { background: transparent; } .fxyj-table td, .fxyj-table th { color: rgb(255, 255, 255); font-size: 12px; border: 1px solid rgb(255, 255, 255); text-align: center; } .fxyj-table thead th { height: 48px; line-height: 24px; } .fxyj-table tbody tr td { height: 48px; line-height: 16px; } .fxyj-table .rainfall-body { display: flex; border-top: 1px solid #fff; /* flex-direction: column; */ } .fxyj-table .rainfall-body span, .fxyj-table .rainfall-content span { flex: 1; padding: 0; text-align: center; } .fxyj-table .rainfall-body span { padding: 0 8%; } .fxyj-table .rainfall-body span:first-child, .fxyj-table .rainfall-content span:first-child { border-right: 1px solid #fff; } .fxyj-table .rainfall-content { display: flex; line-height: 48px; /* flex-direction: column; */ } /* 实时预测,实时预测雨量站 */ /* .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .tab-change-center { position: fixed; right: 140px; bottom: 45px; width: 200px; height: 400px; background: greenyellow; } */ /* 公共颜色 */ .warning-color-green { margin: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #44CC44; transform: translate(0, 1px); } .warning-color-yellow { margin: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #E7E30C; transform: translate(0, 1px); } .warning-color-orange { margin: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #F19216; transform: translate(0, 1px); } .warning-color-red { margin: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #FF0909; transform: translate(0, 1px); } .warning-color-blue { margin: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #02A0DF; transform: translate(0, 1px); } .warning-color-grey { margin: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: #B4B4B4; transform: translate(0, 1px); } .warning-color-grey-triangle { display: inline-block; width: 16px; height: 16px; background: url(../../images/River-Station-grey-triangle.png) no-repeat; background-size: 100% 100%; transform: translate(0, 2px); } .warning-color-blue-triangle { display: inline-block; width: 16px; height: 16px; background: url(../../images/River-Station-blue-triangle.png) no-repeat; background-size: 100% 100%; transform: translate(0, 2px); } .warning-color-red-triangle { display: inline-block; width: 16px; height: 16px; background: url(../../images/River-Station-red-triangle.png) no-repeat; background-size: 100% 100%; transform: translate(0, 2px); } .warning-color-orange-triangle { display: inline-block; width: 16px; height: 16px; background: url(../../images/River-Station-orange-triangle.png) no-repeat; background-size: 100% 100%; transform: translate(0, 2px); } .warning-color-yellow-triangle { display: inline-block; width: 16px; height: 16px; background: url(../../images/River-Station-yellow-triangle.png) no-repeat; background-size: 100% 100%; transform: translate(0, 2px); } .warning-color-green-triangle { display: inline-block; width: 16px; height: 16px; background: url(../../images/River-Station-green-triangle.png) no-repeat; background-size: 100% 100%; transform: translate(0, 2px); } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .zxhltl ul i { width: 12px; height: 12px; transform: translate(0px, 2px); } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .zyhltl ul i { width: 16px; height: 16px; transform: translate(0px, -2px); vertical-align: middle; } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .skztl ul i { width: 10px; height: 10px; border-radius: 0px; transform: translate(0px, 1px); } .RiskEarlyWarningBottom-widget .risk-early-warning-right-tab .early-warning-image .hdztl ul i { width: 14px; height: 14px; } /* 风险点详情样式 */ .RiskEarlyWarningBottom-widget .details-of-risk-points { display: none; padding: 8px; position: fixed; top: 200px; left: 200px; width: auto; height: auto; color: rgb(255, 255, 255); background: rgba(84, 102, 109, 0.9); border-radius: 10px; } .RiskEarlyWarningBottom-widget .details-of-risk-points li { height: 20px; line-height: 20px; } .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.shzh-wxq, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.shzh-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.shzh-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-fjq, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-blue, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-ylz-fjq, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-ylz-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-ylz-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.fjq-ylz-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.ylz-ylz, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.ylz-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.ylz-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.ylz-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zyhl-wxq, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zyhl-blue, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zyhl-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zyhl-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zyhl-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zxhl-wxq, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zxhl-blue, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zxhl-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zxhl-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.zxhl-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.hdz-swz, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.hdz-blue, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.hdz-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.hdz-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.hdz-red, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.skz-skz, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.skz-blue, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.skz-yellow, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.skz-orange, .RiskEarlyWarningBottom-widget .risk-early-warning-bottom .tbody td.skz-red { cursor: pointer; } .RiskEarlyWarningBottom-widget .over-warning-red { color: red; } .RiskEarlyWarningBottom-widget .over-warning-yellow { color: yellow; }