121 lines
9.0 KiB
CSS
121 lines
9.0 KiB
CSS
|
#app{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/bg.png) repeat;background-size:20px 20px;padding:.35rem;overflow:hidden}
|
||
|
|
.base-population,.base-population-outer,.big-case,.big-case-count-detail,.case-analysis-container,.case-overview-container,.floor-top,.grid-count,.grid-info,.info-row,.mission,.rank,.rank-count-score,.source-count{overflow:hidden}
|
||
|
|
.analysis-charts:after,.population-container:after, .analysis-container:after,.page-content:after,.population-charts:after{content:'';display:block;clear:both}
|
||
|
|
.page-title{height:4%;position:relative;font-size:1rem;color:#fff;font-weight:700}
|
||
|
|
.page-title span{font-size:1rem;color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
|
||
|
|
.title-area{position:absolute;top:50%;left:0;transform:translate(0,-50%)}
|
||
|
|
.map-btn{position:absolute;top:50%;right:0;transform:translate(0,-50%);font-size:.8rem;color:#fff;padding-left:1rem;background:url(../images/map.png) no-repeat left center;background-size:1rem auto}
|
||
|
|
.left{float:left;width:49.5%}
|
||
|
|
.title-line{margin-bottom:.2rem}
|
||
|
|
.title-line h3{font-size:.7rem;color:#fff;position:relative}
|
||
|
|
.title-line h3:after{content:'';display:block;width:80%;height:2px;background:#fff;position:absolute;right:0;top:50%;margin-top:-1px}
|
||
|
|
.case-analysis,.case-from,.case-overview{padding:.3rem;border:1px solid #7b98ac;margin-bottom:.25rem}
|
||
|
|
.title{font-size:.55rem;color:#fff;margin-bottom:.2rem}
|
||
|
|
.case-from-container{overflow:hidden}
|
||
|
|
.case-from-box{float:left;width:18%;margin-right:2.5%;border:1px solid #7b98ac;padding:.1rem .2rem;box-sizing:border-box}
|
||
|
|
.case-from-box:last-child{margin-right:0}
|
||
|
|
.case-from-name{font-size:.55rem;color:#fff}
|
||
|
|
.case-from-box p{font-size:.55rem;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
|
.case-from-box p span,.case-overview-box p span{font-size:.4rem}
|
||
|
|
.case-overview-box{width:15%;float:left;margin-right:2%;border:1px solid #7b98ac;padding:.1rem .2rem;box-sizing:border-box}
|
||
|
|
.case-overview-box:last-child{margin-right:0}
|
||
|
|
.case-overview-box p{font-size:.55rem;border-bottom:1px solid #fff;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
|
||
|
|
.case-overview-box h4{text-align:center;font-size:.45rem;color:#fff}
|
||
|
|
.info-row{font-size:0}
|
||
|
|
.info-row span{font-size:.3rem;color:#fff;padding-right:.65rem;text-align:right}
|
||
|
|
.info-row span.right{display:block}
|
||
|
|
.info-row span.up{background:url(../images/up.png) top right no-repeat;background-size:auto 100%}
|
||
|
|
.info-row span.down{background:url(../images/down.png) top right no-repeat;background-size:auto 100%}
|
||
|
|
.case-analysis-box{float:left;padding:.15rem;box-sizing:border-box;border:1px solid #7b98ac;margin-right:2%;height:6rem}
|
||
|
|
#hotCase{width:28%}
|
||
|
|
#caseTime{width:40%}
|
||
|
|
#caseArea{width:28%;margin-right:0}
|
||
|
|
.base-population{width:58%;float:left;border:1px solid #7b98ac;padding:.1rem;box-sizing:border-box}
|
||
|
|
.base-population-box{width:24%;margin-right:1%;float:left;padding:.1rem .15rem;box-sizing:border-box;text-align:center;color:#fff;border:1px solid #7b98ac;margin-bottom:.25rem}
|
||
|
|
.base-population-box:nth-child(4n){margin-right:0}
|
||
|
|
.base-population-box h4,.base-population-box p{font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
|
.base-population-box p span{font-size:.45rem}
|
||
|
|
.population-charts-box{width:50%;float:left;padding:.1rem;box-sizing:border-box;height:4.5rem}
|
||
|
|
.floor-overview{width:41%;float:right;padding:.15rem;box-sizing:border-box;border:1px solid #7b98ac}
|
||
|
|
.floor-top-left{float:left;width:40%}
|
||
|
|
.floor-top-right{float:right;width:58%;box-sizing:border-box;height:4.9rem;border:1px solid #7b98ac}
|
||
|
|
.floor-count{padding:.1rem;font-size:.45rem;color:#fff;border:1px solid #7b98ac;margin-bottom:.2rem;line-height:1rem}
|
||
|
|
.floor-count span{float:right}
|
||
|
|
.lease{border:1px solid #7b98ac;width:100%;height:3.44rem;box-sizing:border-box}
|
||
|
|
.floor-bottom{width:100%;height:8.71rem;border:1px solid #7b98ac;box-sizing:border-box;margin-top:.2rem}
|
||
|
|
.mid{position:fixed;height:95%;bottom:0;right:0;left:0;background:rgba(0,0,0,.6);padding:.5rem;z-index:10000;box-sizing:border-box}
|
||
|
|
.map{width:100%;height:100%;background:#fff}
|
||
|
|
.select-slide{position:absolute;top:.5rem;left:.5rem;width:40%;z-index: 10000}
|
||
|
|
.select{font-size:0}
|
||
|
|
.select span{display:inline-block;padding:0 .15rem;height:1rem;line-height:1rem;background:rgba(6,79,113,.6);color:#fff;font-size:.2rem;margin-right:.2rem;border:1px solid #fff;box-sizing:border-box;vertical-align:top}
|
||
|
|
.select select{width:6rem;height:1rem;box-sizing:border-box;border:1px solid #fff;background:#fff;font-size:.2rem;color:#000;vertical-align:top;margin-right:.15rem}
|
||
|
|
.slide{background:rgba(0,0,0,.6);padding:.15rem;border:1px solid #fff}
|
||
|
|
.slide-box li,.slide-title{font-size:0}
|
||
|
|
.slide-box li span,.slide-title span{display:inline-block;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;height:1rem;line-height:1rem;border:1px solid #fff;box-sizing:border-box;text-align:center;font-size:.18rem;color:#fff;border-right:none;width:15%;vertical-align:top}
|
||
|
|
.slide-box li span:last-child,.slide-title span:last-child{border-right:1px solid #fff}
|
||
|
|
.slide-box li span:first-child,.slide-title span:first-child{width:10%}
|
||
|
|
.slide-box li span a{display:inline-block;width:48%;padding:0 .15rem;box-sizing:border-box;color:#7b98ac;border:1px solid #7b98ac;font-size:.1rem;height:90%;margin-top: 1%;}
|
||
|
|
.case-detail{margin-top:.2rem;background:rgba(0,0,0,.6);padding:.15rem;width:60%;overflow-x:hidden}
|
||
|
|
.case-detail-container{width:106%;max-height:20rem;overflow-y:auto}
|
||
|
|
.case-row{line-height:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.6rem}
|
||
|
|
.case-row span{font-weight:700;margin-right:.2rem}
|
||
|
|
.case-img{font-size:0}
|
||
|
|
.case-img img{width:23%;height:3rem;margin-right:1%;margin-bottom:.2rem}
|
||
|
|
.case-img img:nth-child(4n){margin-right:0}
|
||
|
|
.img-row{white-space:normal}
|
||
|
|
.case-video audio,.case-video video{width:80%}
|
||
|
|
.grid{position:absolute;top:.5rem;right:.5rem;width:20%;padding:.15rem;background:rgba(0,0,0,.6);z-index: 10000}
|
||
|
|
.grid-avatar{float:left;width:2.2rem;height:2.2rem;border-radius:50%;overflow:hidden}
|
||
|
|
.grid-avatar img{width:100%;height:100%}
|
||
|
|
.grid-info-text{float:right;width:12rem}
|
||
|
|
.grid-info-text p{font-size:.5rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
|
.grid-info-text p.name{font-size:.6rem;font-weight:700}
|
||
|
|
.grid-count{margin:.2rem 0}
|
||
|
|
.grid-count-box{float:left;width:50%;border:1px solid #fff;color:#fff;border-right:none;border-bottom:none;font-size:.55rem;line-height:1rem;box-sizing:border-box;padding:0 .2rem}
|
||
|
|
.grid-count-box:nth-child(even){border-right:1px solid #fff}
|
||
|
|
.grid-count-box:nth-child(5),.grid-count-box:nth-child(6){border-bottom:1px solid #fff}
|
||
|
|
.grid-count-box span{float:right}
|
||
|
|
.grid-video video{width:100%}
|
||
|
|
.right{float:right;width:49.5%}
|
||
|
|
.source{padding:.3rem;border:1px solid #7b98ac}
|
||
|
|
.source-count-box{float:left;width:16.2%;margin-right:.2rem;border:1px solid #7b98ac;box-sizing:border-box;padding:.15rem}
|
||
|
|
.source-count-box:last-child{margin-right:0}
|
||
|
|
.source-count-detail img{width:1.3rem;height:1.3rem}
|
||
|
|
.source-count-detail span{float:right;font-size:.55rem;color:#fff;line-height:1.3rem}
|
||
|
|
.source-name{font-size:.55rem;color:#fff;margin-bottom:.2rem}
|
||
|
|
.analysis{margin:.2rem 0;padding:.3rem;border:1px solid #7b98ac}
|
||
|
|
.analysis-box{width:49%;float:left;border:1px solid #7b98ac;box-sizing:border-box}
|
||
|
|
.analysis-box:last-child{float:right}
|
||
|
|
.big-case{padding:.3rem;border:1px solid #7b98ac;margin-bottom:.2rem}
|
||
|
|
.big-case-count{width:40%;float:left}
|
||
|
|
.big-case-count-box{float:left;width:50%;border:1px solid #7b98ac;border-right:none;padding:.15rem;box-sizing:border-box;border-top: none;}
|
||
|
|
.big-case-count-box:nth-child(1), .big-case-count-box:nth-child(2) {border-top: 1px solid #7b98ac}
|
||
|
|
.big-case-count-box:last-child,.big-case-count-box:nth-child(even){border-right:1px solid #7b98ac}
|
||
|
|
.case-count{float:left;font-size:.3rem;color:#fff}
|
||
|
|
.up-down{float:right}
|
||
|
|
.up-down p{font-size:.3rem;color:#fff}
|
||
|
|
.case-up{color:#a6ff00}
|
||
|
|
.case-down{color:#ff0012}
|
||
|
|
.big-case-charts{width:59%;float:right;height:9.4rem}
|
||
|
|
.mission{padding:.3rem;border:1px solid #7b98ac}
|
||
|
|
.mission-box{float:left;width:32%;margin-right:2%;height:8.5rem;border:1px solid #fff;box-sizing:border-box}
|
||
|
|
.mission-box:last-child{margin-right:0}
|
||
|
|
.analysis-left{float:left;width:20%;padding:0 .1rem;box-sizing:border-box}
|
||
|
|
.analysis-right{float:left;width:80%;height:4.7rem}
|
||
|
|
.important-area{margin-bottom:.2rem}
|
||
|
|
.important-area h4,.important-area p{font-size:.45rem;color:#fff;white-space:nowrap}
|
||
|
|
.important-area p span{font-size:.35rem}
|
||
|
|
.compare{font-size:.45rem;color:#fff}
|
||
|
|
.compare span{float:right}
|
||
|
|
.compare span.compare-up{color:#a6ff00}
|
||
|
|
.compare span.compare-down{color:#ff0012}
|
||
|
|
.rank{padding:0 .2rem;margin-top:.3rem}
|
||
|
|
.rank-img{float:left;width:15%}
|
||
|
|
.rank-img img{width:100%}
|
||
|
|
.rank-info{float:left;width:80%}
|
||
|
|
.rank-info h4{font-size:.7rem;color:#fff;border-bottom:1px solid #fff;padding-bottom:.2rem;margin-bottom:.2rem}
|
||
|
|
.rank-count-score span{float:left;font-size:.6rem;color:#fff;line-height:.8rem}
|
||
|
|
.rank-count-score em{float:right;font-size:.6rem;color:#fff;line-height:.8rem}
|
||
|
|
.source-count-detail{font-size:0}
|
||
|
|
.base-population-outer{overflow-x: hidden;}
|
||
|
|
.base-population-inner{overflow: hidden;width:104%;height: 4rem;overflow-y:auto;}
|