*{font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;margin:0;padding:0}* body{min-width:1200px;min-height:650px;background-color:#04162D;height:100vh;box-sizing:border-box;display:flex;flex-direction:column}* a,* a:hover{text-decoration:none}.header{color:#39FCFF;text-align:center;background-image:url(../images/bg@2x.png);background-size:contain;background-repeat:no-repeat;background-position:center;height:97px;line-height:62px;font-size:28px;font-weight:900;position:relative;letter-spacing:8px;margin-bottom:-16px}.content_box{display:flex;flex:1;gap:12px;flex-direction:column;padding:0 24px 16px}.content_box .top_box{display:flex;flex:1;gap:24px}.content_box .top_box .box_title{z-index:2;position:relative;display:flex;align-items:center;padding:0 12px;margin-top:-10px}.content_box .top_box .box_title .icon{width:20px;margin-right:8px}.content_box .top_box .box_title span{font-size:16px;font-weight:900;color:#fff}.content_box .top_box .basic_info{width:360px;position:relative;border:1px solid #017CB3;box-sizing:border-box;display:flex;flex-direction:column}.content_box .top_box .basic_info .info{display:flex;flex-direction:column;gap:12px;padding:24px 12px;flex:1;z-index:2}.content_box .top_box .basic_info .info .item{background:linear-gradient(90deg, #06263E 0%, rgba(6,38,62,0) 100%);padding:0 8px 0 16px;flex:1;display:flex;align-items:center;gap:4px}.content_box .top_box .basic_info .info .item .title{width:110px;font-size:18px;color:#65C5F4;font-weight:900}.content_box .top_box .basic_info .info .item .value{color:#fff;font-size:32px;line-height:48px;font-weight:900}.content_box .top_box .basic_info .info .item .unit{color:#fff;font-size:16px}.content_box .top_box .statistics{flex:1;position:relative;border:1px solid #017CB3;box-sizing:border-box;display:flex;flex-direction:column}.content_box .top_box .statistics .chart_title{display:flex;justify-content:space-around;padding-top:24px}.content_box .top_box .statistics .chart_title .title{font-weight:900;font-size:18px;line-height:24px;color:#fff;background:linear-gradient(270deg, rgba(3,57,89,0) 0%, #033959 50.52%, rgba(3,57,89,0) 100%);padding:5px 40px}.content_box .top_box .statistics .chart{flex:1;display:flex;width:100%;z-index:2}.content_box .top_box .weather_info{width:340px;position:relative;border:1px solid #017CB3;box-sizing:border-box;display:flex;flex-direction:column}.content_box .top_box .weather_info .data{padding:20% 16px 30px;display:flex;gap:8px}.content_box .top_box .weather_info .data .item{flex:1;text-align:center;background:linear-gradient(180deg, #094567 0%, rgba(9,69,103,0) 100%);border-top:1px solid #13B4F9;display:flex;flex-direction:column;gap:20px;padding:26px 0 55px}.content_box .top_box .weather_info .data .item .title{line-height:24px;height:24px;display:flex;justify-content:center;font-weight:900;font-size:18px}.content_box .top_box .weather_info .data .item .title img{width:24px;margin-right:4px}.content_box .top_box .weather_info .data .item .value{color:#fff;font-size:24px;font-weight:900;line-height:32px}.content_box .top_box .weather_info .update_time{text-align:center;background:linear-gradient(270deg, rgba(3,57,89,0) 0%, #033959 50.52%, rgba(3,57,89,0) 100%);font-size:12px;line-height:20px;color:#8BC9E7;padding:5px 12px;z-index:2;margin:0 50px}.content_box .top_box .weather_info .update_time .title{font-size:12px}.content_box .top_box .left_top{position:absolute;z-index:1;width:207px;left:-1px;top:-18px}.content_box .top_box .right_top{position:absolute;z-index:1;width:50px;right:-1px;top:-1px}.content_box .top_box .left_bottom{position:absolute;z-index:1;width:94px;bottom:-3px;left:-1px}.content_box .top_box .right_bottom{position:absolute;z-index:1;width:170px;right:-4px;bottom:-5px}.content_box .bottom_box{height:438px;padding:12px 0 32px;width:100%}.content_box .bottom_box .swiper-slide{font-size:20px;background:#0D283F;color:#fff;font-weight:700;border:1px solid #19415D;height:calc((100% - 34px) / 2);display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;position:relative;flex-direction:column;box-sizing:border-box}.content_box .bottom_box .swiper-slide::before{position:absolute;content:'';width:48px;height:24px;background-image:url("../images/chang_topleft@2x.png");background-size:cover;left:-1.5px;top:-4px}.content_box .bottom_box .swiper-slide::after{position:absolute;content:"";width:42px;height:20px;background-image:url("../images/chang_bottomright@2x.png");background-size:cover;right:-1px;bottom:-2.5px;z-index:2}.content_box .bottom_box .swiper-slide .chang_name{padding:26px 32px;font-size:24px;font-weight:900;line-height:24px}.content_box .bottom_box .swiper-slide .main_info{color:#00B3FF;padding:0 32px 22px;font-weight:inherit;display:grid;grid-template-columns:1fr 1fr;line-height:22px;gap:8px;position:relative}.content_box .bottom_box .swiper-slide .main_info .item{z-index:1}.content_box .bottom_box .swiper-slide .main_info::after{position:absolute;content:"1";font-size:128px;font-weight:700;color:#0F3352;right:24px;z-index:0;bottom:24px}.content_box .bottom_box .swiper-slide .temperature_info{font-size:18px;padding:15px 32px;background-color:#153953;display:flex;gap:18px;line-height:22px;z-index:1}.content_box .bottom_box .swiper-slide .owner{position:absolute;right:32px;top:28px;line-height:22px;color:#00B3FF;opacity:.6}.content_box .bottom_box .swiper-slide:nth-of-type(2) .main_info::after{content:"2"}.content_box .bottom_box .swiper-slide:nth-of-type(3) .main_info::after{content:"3"}.content_box .bottom_box .swiper-slide:nth-of-type(4) .main_info::after{content:"4"}.content_box .bottom_box .swiper-slide:nth-of-type(5) .main_info::after{content:"5"}.content_box .bottom_box .swiper-slide:nth-of-type(6) .main_info::after{content:"6"}.content_box .bottom_box .swiper-slide:nth-of-type(7) .main_info::after{content:"7"}.content_box .bottom_box .swiper-slide:nth-of-type(8) .main_info::after{content:"8"}.content_box .bottom_box .swiper-slide:nth-of-type(9) .main_info::after{content:"9"}.content_box .bottom_box .swiper-slide:nth-of-type(10) .main_info::after{content:"10"}.content_box .bottom_box .swiper-slide:nth-of-type(11) .main_info::after{content:"11"}.content_box .bottom_box .swiper-slide:nth-of-type(12) .main_info::after{content:"12"}.content_box .bottom_box .swiper-slide:nth-of-type(13) .main_info::after{content:"13"}.content_box .bottom_box .swiper-slide:nth-of-type(14) .main_info::after{content:"14"}.content_box .bottom_box .swiper-slide:nth-of-type(15) .main_info::after{content:"15"}.content_box .bottom_box .swiper-slide:nth-of-type(16) .main_info::after{content:"16"}.content_box .bottom_box .swiper-slide:nth-of-type(17) .main_info::after{content:"17"}.content_box .bottom_box .swiper-slide:nth-of-type(18) .main_info::after{content:"18"}.content_box .bottom_box .swiper-slide:nth-of-type(19) .main_info::after{content:"19"}.content_box .bottom_box .swiper-slide:nth-of-type(20) .main_info::after{content:"20"}.content_box .bottom_box .swiper-slide.error{border-color:#EB5757;background-color:rgba(235,87,87,0.5)}.content_box .bottom_box .swiper-slide.error::before{background-image:url("../images/chang_topleft_error@2x.png")}.content_box .bottom_box .swiper-slide.error::after{background-image:url("../images/chang_bottomright_error@2x.png")}.content_box .bottom_box .swiper-slide.error .chang_name{color:#EB5757}.content_box .bottom_box .swiper-slide.error .main_info{color:#fff}.content_box .bottom_box .swiper-slide.error .main_info::after{color:#EB5757;opacity:.3}.content_box .bottom_box .swiper-slide.error .owner{color:#fff}.content_box .bottom_box .swiper-slide.error .temperature_info{background-color:#B65C5C}.content_box .bottom_box .swiper-pagination .swiper-pagination-bullet{width:28px;border-radius:4px;background-color:#033E60;opacity:1}.content_box .bottom_box .swiper-pagination .swiper-pagination-bullet-active{width:48px;background-color:#008CC8;border-radius:4px}.content_box .title{color:#65C5F4}.content_box .content{border:1px solid #0FEBFF;border-radius:0 8px 8px 8px;flex:1}
|
