| | |
| | | <template> |
| | | <div id="container" class="dark"> |
| | | <div class="warn-dialog" :class="dialogShow"> |
| | | <div>预警消息:<p style="margin-top: 20px;font-size: 18px;line-height: 28px;text-align: left">企业8月份总体安全生产预警指数SPI风险值高于预警阈值,可能存在未处理隐患,请注意查阅相关风险因素,采取风险防控措施。</p></div> |
| | | <div>预警消息</div> |
| | | <p>企业8月份总体安全生产预警指数SPI风险值高于预警阈值,可能存在未处理隐患,请注意查阅相关风险因素,采取风险防控措施。</p> |
| | | <span @click="dialogShow = 'hide'">关闭</span> |
| | | </div> |
| | | <div class="info-panel" :class="dialogHide" @click="openDialog"> |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | .hide{ |
| | | display: none; |
| | | } |
| | | |
| | | .showup{ |
| | | display: block; |
| | | } |
| | | .dark { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | transition: .3s; |
| | | box-shadow: 0 15px 30px rgba(0,0,0,.2); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | padding: 40px; |
| | | padding: 1.5rem; |
| | | background: rgba(0,16,32,.8); |
| | | |
| | | div{ |
| | | font-size: 1.5rem; |
| | | text-align: center; |
| | | } |
| | | |
| | | p{ |
| | | margin-top: 20px; |
| | | font-size: 1.125rem; |
| | | line-height: 28px; |
| | | text-align: left |
| | | } |
| | | |
| | | span{ |
| | | position: inherit; |
| | | right: 20px; |
| | | top: 20px; |
| | | font-size: 15px; |
| | | font-size: 1rem; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | div{ |
| | | font-size: 24px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | |
| | | right: 50px; |
| | | bottom: 50px; |
| | | z-index: 9999999; |
| | | font-size: 16px; |
| | | font-size: 1rem; |
| | | padding: 0 10px; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | |
| | | background: #ff0000; |
| | | } |
| | | } |
| | | .hide{ |
| | | display: none; |
| | | } |
| | | |
| | | .showup{ |
| | | display: block; |
| | | } |
| | | .header-content { |
| | | width: 100%; |
| | | height: 7.8%; |
| | |
| | | background-size: 100% 100%; |
| | | color: #000; |
| | | |
| | | .warn-dialog{ |
| | | position: absolute; |
| | | z-index: 999999; |
| | | top: 25%; |
| | | left: 50%; |
| | | width: 50%; |
| | | height: 50%; |
| | | transform: translateX(-50%); |
| | | border-radius: 8px; |
| | | transition: .3s; |
| | | box-shadow: 0 15px 30px rgba(0,0,0,.2); |
| | | border: 1px solid #ccc; |
| | | padding: 1.5rem; |
| | | background: #fff; |
| | | |
| | | div{ |
| | | font-size: 1.5rem; |
| | | text-align: center; |
| | | } |
| | | |
| | | p{ |
| | | margin-top: 20px; |
| | | font-size: 1.125rem; |
| | | line-height: 28px; |
| | | text-align: left |
| | | } |
| | | |
| | | span{ |
| | | position: inherit; |
| | | right: 20px; |
| | | top: 20px; |
| | | font-size: 1rem; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .info-panel{ |
| | | position: absolute; |
| | | width: 20%; |
| | | right: 50px; |
| | | bottom: 50px; |
| | | z-index: 9999999; |
| | | font-size: 1rem; |
| | | color: #333; |
| | | padding: 0 10px; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | box-shadow: 0 15px 30px rgba(0,0,0,.2); |
| | | border: 1px solid #ccc; |
| | | background: #fff; |
| | | |
| | | .info-tit{ |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 10px; |
| | | border-bottom: 1px solid #ccc; |
| | | justify-content: space-between; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | img{ |
| | | width: 18px; |
| | | height: 18px; |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .info-desc{ |
| | | padding: 15px 10px; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | overflow: hidden; |
| | | } |
| | | .info-num{ |
| | | position: inherit; |
| | | width: 24px; |
| | | height: 24px; |
| | | line-height: 24px; |
| | | text-align: center; |
| | | left: -12px; |
| | | top: -12px; |
| | | color: #fff; |
| | | z-index: 999999999; |
| | | border-radius: 50%; |
| | | border: 1px solid #ff0000; |
| | | background: #ff0000; |
| | | } |
| | | } |
| | | |
| | | .header-content { |
| | | width: 100%; |