@linkdesign/screen
Version:
屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏
1 lines • 20.6 kB
CSS
@font-face{font-family:HelveticaNeue-CondensedBold;src:url(dist/assets/5f82370c88b531b5f9eda3dde8ad5df4.eot);src:url(dist/assets/5f82370c88b531b5f9eda3dde8ad5df4.eot?#iefix) format("embedded-opentype"),url(dist/assets/464b7eea822997204056c9b16caf5dec.woff2) format("woff2"),url(dist/assets/693ee80b2e3613b8478ff112f5266788.woff) format("woff"),url(dist/assets/a6f72b5bd9e384908c4b976b5f989c52.ttf) format("truetype"),url(data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiMDQwZThhZGI1OWE3ZTBhYjc3YmIwYTg3MjY5NTJjZTkuc3ZnIjs=) format("svg")}@font-face{font-family:Oswald-Medium;src:url(dist/assets/59cd3dd8cb72d677d324ce3231f279ba.eot);src:url(dist/assets/59cd3dd8cb72d677d324ce3231f279ba.eot?#iefix) format("embedded-opentype"),url(dist/assets/464b7eea822997204056c9b16caf5dec.woff2) format("woff2"),url(dist/assets/4c89c635cf99083946be9fe159d6417a.woff) format("woff"),url(dist/assets/a6f72b5bd9e384908c4b976b5f989c52.ttf) format("truetype"),url(data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiNjE2OGY3NTM3N2JlYWQyMTk2NjhhMmZkN2Q1YmI2NzEuc3ZnIjs=) format("svg")}@font-face{font-family:iot-screen-iconfont-ability;src:url(dist/assets/6b6ecebfe00e7e3e6e52acda1b1ca515.woff2) format("woff2"),url(dist/assets/ac4d5b019afb60dddd0fab0c40584f26.woff) format("woff"),url(dist/assets/e28abeec09a32aefbfc292870071ef81.ttf) format("truetype")}.iot-screen-iconfont-ability{font-family:iot-screen-iconfont-ability,serif}.iot-screen-data{font-family:HelveticaNeue-CondensedBold,serif}.iot-screen-core-indicator-data{font-weight:600;color:var(--text1-1)}@if "mode"=="mode" and dashboard=="dashboard"{font-size:28px;line-height:36px}.iot-screen-core-indicator-data[data-mode=dashboard],[data-mode=dashboard] .iot-screen-core-indicator-data{font-size:28px;line-height:36px}@if "mode"=="mode" and screen=="dashboard"{font-size:32px;line-height:40px}.iot-screen-core-indicator-data[data-mode=screen],[data-mode=screen] .iot-screen-core-indicator-data{font-size:32px;line-height:40px}.iot-screen-main-indicator-data{font-weight:600;color:var(--text1-2)}@if "mode"=="mode" and dashboard=="dashboard"{font-size:20px;line-height:28px}.iot-screen-main-indicator-data[data-mode=dashboard],[data-mode=dashboard] .iot-screen-main-indicator-data{font-size:20px;line-height:28px}@if "mode"=="mode" and screen=="dashboard"{font-size:24px;line-height:32px}.iot-screen-main-indicator-data[data-mode=screen],[data-mode=screen] .iot-screen-main-indicator-data{font-size:24px;line-height:32px}.iot-screen-sub-indicator-data{font-weight:600;color:var(--text1-3)}.iot-screen-sub-indicator-data[data-mode=dashboard],[data-mode=dashboard] .iot-screen-sub-indicator-data{font-size:14px;line-height:22px}.iot-screen-sub-indicator-data[data-mode=screen],[data-mode=screen] .iot-screen-sub-indicator-data{font-size:16px;line-height:24px}.iot-screen-main-title{font-weight:600;color:var(--text2-1)}@if "mode"=="mode" and dashboard=="dashboard"{font-size:20px}.iot-screen-main-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-main-title{font-size:20px}@if "mode"=="mode" and screen=="dashboard"{font-size:36px;line-height:44px}.iot-screen-main-title[data-mode=screen],[data-mode=screen] .iot-screen-main-title{font-size:36px;line-height:44px}.iot-screen-subscreen-title{font-weight:600;color:var(--text4-1)}.iot-screen-subscreen-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-subscreen-title{font-size:14px;line-height:22px}.iot-screen-subscreen-title[data-mode=screen],[data-mode=screen] .iot-screen-subscreen-title{font-size:20px;line-height:28px}.iot-screen-subscreen-title.selected,.iot-screen-subscreen-title:hover{color:var(--text4-2)}.iot-screen-sub-title{font-weight:600;color:var(--text2-2)}.iot-screen-sub-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-sub-title{font-size:14px;line-height:22px}.iot-screen-sub-title[data-mode=screen],[data-mode=screen] .iot-screen-sub-title{font-size:20px;line-height:28px}.iot-screen-core-indicator-title{font-weight:600;font-size:18px;line-height:26px;color:var(--text2-5)}.iot-screen-core-indicator-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-core-indicator-title{font-size:18px;line-height:26px}.iot-screen-core-indicator-title[data-mode=screen],[data-mode=screen] .iot-screen-core-indicator-title{font-size:20px;line-height:28px}.iot-screen-main-indicator-title{font-weight:600;font-size:14px;line-height:22px;color:var(--text2-6)}.iot-screen-main-indicator-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-main-indicator-title{font-size:14px;line-height:22px}.iot-screen-main-indicator-title[data-mode=screen],[data-mode=screen] .iot-screen-main-indicator-title{font-size:16px;line-height:24px}.iot-screen-main-chart-title{font-weight:600;color:var(--text2-3)}@if "mode"=="mode" and dashboard=="dashboard"{font-size:18px;line-height:26px}.iot-screen-main-chart-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-main-chart-title{font-size:18px;line-height:26px}@if "mode"=="mode" and screen=="dashboard"{font-size:20px;line-height:28px}.iot-screen-main-chart-title[data-mode=screen],[data-mode=screen] .iot-screen-main-chart-title{font-size:20px;line-height:28px}.iot-screen-sub-chart-title{font-weight:600;color:var(--text2-4)}@if "mode"=="mode" and dashboard=="dashboard"{font-size:14px;line-height:22px}.iot-screen-sub-chart-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-sub-chart-title{font-size:14px;line-height:22px}@if "mode"=="mode" and screen=="dashboard"{font-size:16px;line-height:24px}.iot-screen-sub-chart-title[data-mode=screen],[data-mode=screen] .iot-screen-sub-chart-title{font-size:16px;line-height:24px}.iot-screen-main-body{font-weight:400;font-size:14px;line-height:22px;color:var(--text3-1)}.iot-screen-annotation{font-weight:400;font-size:12px;line-height:20px;color:var(--text3-2)}.iot-screen-chart-scale{font-weight:400;font-size:12px;line-height:18px;color:var(--text3-3)}.iot-screen-bar-chart-wrapper .iot-screen-carousel-table-row>.iot-screen-carousel-table-item>.iot-screen-title-content{width:100%}.iot-screen-bar-stack-chart-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-total{font-size:28px;line-height:36px}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-top{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-norm-wrapper{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-norm-wrapper .iot-screen-bar-stack-chart-norm{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;font-size:12px;line-height:20px}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-norm-wrapper .iot-screen-bar-stack-chart-norm:last-child{margin-bottom:0}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-norm-wrapper .iot-screen-bar-stack-chart-norm-label>div{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-norm-wrapper .iot-screen-bar-stack-chart-norm-label-dot{display:inline-block;margin-right:6px;width:6px;height:6px;border-radius:50%}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-bar{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;overflow:hidden;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.iot-screen-bar-stack-chart-wrapper .iot-screen-bar-stack-chart-bar .iot-screen-bar-stack-chart-bar-inner{height:100%}.iot-screen-ring-chart-wrapper{position:relative}.iot-screen-ring-chart-wrapper .iot-screen-ring-chart-title{margin-bottom:8px}.iot-screen-ring-chart-wrapper .iot-screen-ring-chart{position:relative;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.iot-screen-ring-stack-chart-wrapper{position:relative}.iot-screen-chart-wrapper{position:relative;width:100%;height:100%}.iot-screen-min-line-chart-wrapper{position:relative}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items{line-height:32px;font-size:12px;color:#fff;margin-top:5px}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .next-row{margin-top:0}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-item{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;white-space:nowrap;width:100%}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-item,.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-name{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-name{max-width:70%}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-name i{display:inline-block;width:8px;height:8px;background-color:#8abcff;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-name .iot-screen-treemap-text{margin-left:8px;overflow:hidden;text-overflow:ellipsis}.iot-screen-treemap-chart-wrapper .iot-screen-treemap-items .iot-screen-treemap-scale{color:#8abcff;padding-right:3px}.iot-screen-title-wrapper .iot-screen-title-content{min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.iot-screen-carousel-table .iot-screen-carousel-table-header{overflow:hidden}.iot-screen-carousel-table .iot-screen-carousel-table-empty,.iot-screen-carousel-table .iot-screen-carousel-table-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.iot-screen-carousel-table .iot-screen-carousel-table-empty{width:100%;height:100%;min-height:220px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.iot-screen-carousel-table .iot-screen-carousel-table-empty .iot-screen-iconfont-ability{margin-right:5px}.iot-screen-carousel-table .iot-screen-carousel-table-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.iot-screen-carousel-table .iot-screen-carousel-table-column{height:100%}.iot-screen-carousel-table .iot-screen-carousel-table-index.iot-screen-circle .iot-screen-title-content{width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background-color:var(--screen-brand1-6)}.iot-screen-filter-button-wrapper,.iot-screen-single-select-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}@if "mode"=="mode" and dashboard=="dashboard"{margin-right:16px}.iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-row] .iot-screen-filter-button[data-mode=dashboard],[data-mode=dashboard] .iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-row] .iot-screen-filter-button{margin-right:16px}@if "mode"=="mode" and screen=="dashboard"{margin-right:32px}.iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-row] .iot-screen-filter-button[data-mode=screen],[data-mode=screen] .iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-row] .iot-screen-filter-button{margin-right:32px}.iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-row] .iot-screen-filter-button:last-child{margin-right:0}@if "mode"=="mode" and dashboard=="dashboard"{margin-bottom:16px}.iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-column] .iot-screen-filter-button[data-mode=dashboard],[data-mode=dashboard] .iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-column] .iot-screen-filter-button{margin-bottom:16px}@if "mode"=="mode" and screen=="dashboard"{margin-bottom:32px}.iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-column] .iot-screen-filter-button[data-mode=screen],[data-mode=screen] .iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-column] .iot-screen-filter-button{margin-bottom:32px}.iot-screen-filter-button-wrapper[class*=iot-screen-filter-button-column] .iot-screen-filter-button:last-child{margin-bottom:0}.iot-screen-filter-button-wrapper .iot-screen-filter-button{min-width:100px;min-height:32px;border-radius:16px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;-webkit-transition:all .25s;transition:all .25s;background-color:var(--color5-4);color:var(--color5-1)}.iot-screen-filter-button-wrapper .iot-screen-filter-button[data-mode=dashboard],[data-mode=dashboard] .iot-screen-filter-button-wrapper .iot-screen-filter-button{padding:0 16px}.iot-screen-filter-button-wrapper .iot-screen-filter-button[data-mode=screen],[data-mode=screen] .iot-screen-filter-button-wrapper .iot-screen-filter-button{padding:0 32px}.iot-screen-filter-button-wrapper .iot-screen-filter-button.selected,.iot-screen-filter-button-wrapper .iot-screen-filter-button:hover{background-color:var(--color5-5);color:var(--color5-2)}.iot-screen-subscreen-title-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}.iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title{height:100%;cursor:pointer;-webkit-transition:all .25s;transition:all .25s}@if "mode"=="mode" and dashboard=="dashboard"{padding:0 16px}.iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title[data-mode=dashboard],[data-mode=dashboard] .iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title{padding:0 16px}@if "mode"=="mode" and screen=="dashboard"{padding:0 32px}.iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title[data-mode=screen],[data-mode=screen] .iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title{padding:0 32px}.iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title.selected{border-bottom-style:solid;border-bottom-color:var(--screen-brand1-6)}@if "mode"=="mode" and dashboard=="dashboard"{border-bottom-width:2px}.iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title.selected[data-mode=dashboard],[data-mode=dashboard] .iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title.selected{border-bottom-width:2px}@if "mode"=="mode" and screen=="dashboard"{border-bottom-width:4px}.iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title.selected[data-mode=screen],[data-mode=screen] .iot-screen-subscreen-title-wrapper .iot-screen-subscreen-title.selected{border-bottom-width:4px}.iot-screen-indicator-wrapper .iot-screen-indicator-value-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.iot-screen-indicator-wrapper .iot-screen-indicator-value-wrapper .iot-screen-indicator-unit{margin-left:8px}.iot-screen-fullscreen-switch{height:100%;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.iot-screen-fullscreen-switch .iot-screen-iconfont-ability{margin-right:8px}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes flicker{0%{opacity:0}to{opacity:1}}@keyframes flicker{0%{opacity:0}to{opacity:1}}.iot-screen-radar-tip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:10px 20px 10px 10px;border-radius:40px;background-color:var(--screen-fill2-1)}.iot-screen-radar-tip.iot-screen-without-time{border-radius:35px}.iot-screen-radar-tip.iot-screen-without-time .iot-screen-left{width:30px;height:30px}.iot-screen-radar-tip.iot-screen-without-time .iot-screen-tip{font-size:12px}.iot-screen-radar-tip .iot-screen-left{width:50px;height:50px;background-repeat:no-repeat;background-position:50%;background-size:100%}.iot-screen-radar-tip .iot-screen-left img{width:100%;-webkit-animation:rotate 6s linear 0s infinite;animation:rotate 6s linear 0s infinite}.iot-screen-radar-tip .iot-screen-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-left:12px}.iot-screen-radar-tip .iot-screen-tip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;color:var(--screen-text2-1);font-weight:700;font-size:16px;line-height:22px}.iot-screen-radar-tip .iot-screen-tip .iot-screen-dot{display:inline-block;margin-left:8px;width:8px;height:8px;border-radius:50%;background-color:red;-webkit-animation:flicker 2s linear 2s infinite;animation:flicker 2s linear 2s infinite}.iot-screen-radar-tip .iot-screen-timer{color:var(--screen-text2-2);font-size:12px;line-height:14px}.iot-screen-car-plate-container{position:relative;width:100px;height:30px}.iot-screen-car-plate-container .inner{font-weight:700;position:absolute;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 2px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}:root,[data-theme=dark]{--bg1-1:#071e34;--text1-1:#fff;--text1-2:#fff;--text1-3:#d3e2ff;--text2-1:#fff;--text2-2:#fff;--text2-3:#fff;--text2-4:#d3e2ff;--text2-5:#fff;--text2-6:#fff;--text3-1:#d3e2ff;--text3-2:#d3e2ff;--text3-3:#d3e2ff;--text4-1:#d3e2ff;--text4-2:#fff;--color5-1:#fff;--color5-4:rgba(164,184,222,0.2)}:root,[data-theme=dark],[data-theme=light]{--color5-2:#fff;--color5-5:#0095ff;--screen-brand1-6:#0095ff;--screen-data1-1:#0070cc;--screen-data1-2:#2aca96;--screen-data1-3:#fec400;--screen-data1-4:#909ca6;--screen-data1-5:#826af9;--screen-data1-6:#ff7d51;--screen-data1-7:#3b81ff;--screen-data1-8:#00cbfb;--screen-fill2-1:#1f3b6d;--screen-text2-1:#fff;--screen-text2-2:#d3e2ff}[data-theme=light]{--bg1-1:#d9e1e8;--text1-1:#111;--text1-2:#555;--text1-3:#555;--text2-1:#111;--text2-2:#111;--text2-3:#555;--text2-4:#555;--text2-5:#555;--text2-6:#555;--text3-1:#555;--text3-2:#888;--text3-3:#888;--text4-1:#555;--text4-2:#0095ff;--color5-1:#666;--color5-4:#fbfbfc}