1029 lines
20 KiB
CSS
1029 lines
20 KiB
CSS
@font-face {
|
|
font-family: title-font;
|
|
src: url("./庞门正道标题体.TTF");
|
|
}
|
|
|
|
body {
|
|
background-color: rgb(92, 92, 92);
|
|
}
|
|
|
|
.content {
|
|
width: 350px;
|
|
height: 1000px;
|
|
/* background-color: rgba(0,16,52,.3); */
|
|
background: url(./sc/背景框1.png) no-repeat;
|
|
background-size: 100%;
|
|
|
|
}
|
|
|
|
.box {
|
|
color: white;
|
|
}
|
|
|
|
.box .hr {
|
|
height: 1px;
|
|
background-color: rgba(255, 255, 255, .2);
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.content-left {
|
|
position: absolute;
|
|
top: 110px;
|
|
left: 50px;
|
|
/* padding-top: 10px; */
|
|
}
|
|
|
|
.content-right {
|
|
position: absolute;
|
|
top: 110px;
|
|
right: 50px;
|
|
}
|
|
|
|
.nobg-data-list {
|
|
display: flex;
|
|
height: 60px;
|
|
padding: 15px 0px 15px 20px;
|
|
}
|
|
|
|
.nobg-data-list .item-left {
|
|
width: 200px;
|
|
}
|
|
|
|
.nobg-data-list .item-left .name {
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.nobg-data-list .item-left .data {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 35px;
|
|
margin-top: 2px;
|
|
color: rgb(53, 153, 255);
|
|
/* font-weight: 800; */
|
|
font-family: title-font;
|
|
}
|
|
|
|
.nobg-data-list .unit {
|
|
padding-top: 40px;
|
|
width: 50px;
|
|
}
|
|
|
|
.nobg-data-list .item-right {
|
|
width: 140px;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.nobg-data-list .item-right .data {
|
|
color: rgb(53, 153, 255);
|
|
}
|
|
|
|
/* 最新项目盒子 */
|
|
/* 左侧中间 */
|
|
.box-title {
|
|
font-family: title-font;
|
|
background: url(./sc/小标题框.png) no-repeat;
|
|
height: 40px;
|
|
line-height: 35px;
|
|
padding-left: 20px;
|
|
font-size: 20px;
|
|
/* font-weight: 800; */
|
|
}
|
|
|
|
#new-item-box {
|
|
height: 330px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.new-item-list {
|
|
display: flex;
|
|
height: 50px;
|
|
padding: 5px 0px 5px 20px;
|
|
background-color: rgba(5, 105, 249, .1);
|
|
margin: 5px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.new-item-list .icon {
|
|
width: 5%;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.new-item-list .item-left {
|
|
width: 50%;
|
|
}
|
|
|
|
.new-item-list .item-left .name {
|
|
height: 25px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.new-item-list .unit {
|
|
padding-top: 20px;
|
|
width: 50px;
|
|
}
|
|
|
|
.new-item-list .item-right {
|
|
width: 49px;
|
|
height: 45px;
|
|
position: absolute;
|
|
right: 15px;
|
|
/* text-align: center; */
|
|
/* padding-top: 20px; */
|
|
background: url(./sc/进行标签.png) no-repeat;
|
|
}
|
|
|
|
.new-item-list .yunwei {
|
|
background: url(./sc/运维阶段.png) no-repeat;
|
|
}
|
|
|
|
.new-item-list .icon {
|
|
height: 20px;
|
|
width: 20px;
|
|
margin-top: 15px;
|
|
margin-right: 5px;
|
|
background: url(./sc/项目列表点.png) no-repeat;
|
|
}
|
|
|
|
/* 左下角图表 */
|
|
#echarts1 {
|
|
position: relative;
|
|
top: -45px;
|
|
left: 10px;
|
|
}
|
|
|
|
.echarts2 {
|
|
height: 230px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#echarts2 {
|
|
position: relative;
|
|
top: -20px;
|
|
}
|
|
|
|
#echarts3 {
|
|
position: relative;
|
|
top: 0px;
|
|
}
|
|
|
|
.right-top-box {
|
|
padding: 10px 0 0 20px;
|
|
}
|
|
|
|
.content-right .right-top-item {
|
|
display: flex;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.content-right .right-top-item .icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.content-right .right-top-item .item-left {
|
|
display: flex;
|
|
width: 60%;
|
|
}
|
|
|
|
.content-right .right-top-item .data {
|
|
width: 20%;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.color-yellow {
|
|
color: rgba(255, 207, 22, 1);
|
|
}
|
|
|
|
.content-right .right-top-item .unit {
|
|
width: 10%;
|
|
}
|
|
|
|
.right-top-item1 .icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url(./sc/设备.png);
|
|
}
|
|
|
|
.right-top-item3 .icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url(./sc/企业.png);
|
|
}
|
|
|
|
.right-top-item4 .icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url(./sc/预警.png);
|
|
}
|
|
|
|
.right-top-item2 {
|
|
display: flex;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.right-top-item2 .top-box {
|
|
background: url(./sc/文字框.png) no-repeat;
|
|
text-align: center;
|
|
line-height: 49px;
|
|
font-weight: 800;
|
|
font-size: 20px;
|
|
height: 49px;
|
|
width: 39px;
|
|
margin: 10px 2px;
|
|
}
|
|
|
|
.right-top-item2 .unit {
|
|
padding: 35px 0 0 5px;
|
|
}
|
|
|
|
.roll-box,
|
|
.roll-box-top {
|
|
position: absolute;
|
|
top: 150px;
|
|
left: 380px;
|
|
text-align: center;
|
|
width: 270px;
|
|
height: 250px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.roll-box .roll-item {
|
|
margin: 10px auto;
|
|
width: 210px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: white;
|
|
background: url(./sc/非选择框.png);
|
|
}
|
|
|
|
.roll-box-top .roll-item-top {
|
|
margin: 10px auto;
|
|
width: 210px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.roll-box .roll-box-select {
|
|
/* float:left; */
|
|
position: absolute;
|
|
top: 108px;
|
|
width: 269px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
color: rgb(249, 190, 88);
|
|
background: url(./sc/选中框中空.png);
|
|
}
|
|
|
|
.roll-box .roll-box-move {
|
|
position: relative;
|
|
top: 0px;
|
|
}
|
|
|
|
/* 浮动盒子 */
|
|
.flat-box {
|
|
position: absolute;
|
|
bottom: 150px;
|
|
left: 480px;
|
|
color: white;
|
|
width: 1100px;
|
|
height: 180px;
|
|
background: url(./sc/弹窗框.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 切换按钮 */
|
|
.flat-box #next-button {
|
|
width: 150px;
|
|
height: 20px;
|
|
/* background-color: #fff; */
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 5px;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* 前后两个盒子 */
|
|
|
|
#flat-box-front {
|
|
position: absolute;
|
|
/* bottom: 170px; */
|
|
left: 0;
|
|
}
|
|
|
|
#flat-box-back {
|
|
position: absolute;
|
|
left: 1300px;
|
|
/* bottom: -170px; */
|
|
}
|
|
|
|
/* 盒子内容 */
|
|
.flat-box .flat-box-title {
|
|
font-family: title-font;
|
|
height: 30px;
|
|
line-height: 35px;
|
|
padding-left: 100px;
|
|
}
|
|
|
|
.flat-box .flat-box-data {
|
|
display: flex;
|
|
}
|
|
|
|
.flat-box .flat-box-data .data-firm-img {
|
|
width: 170px;
|
|
height: 120px;
|
|
background: url(./sc/企业图片.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 5px 10px 0 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.flat-box .flat-box-data .data-firm-data {
|
|
width: 850px;
|
|
font-size: 14px;
|
|
height: 95px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 6;
|
|
-webkit-box-orient: vertical;
|
|
position: relative;
|
|
bottom: 3px;
|
|
}
|
|
|
|
/* 项目进度盒子 */
|
|
.city-plan {
|
|
position: absolute;
|
|
bottom: 108px;
|
|
right: 500px;
|
|
width: 350px;
|
|
height: 359px;
|
|
background: url(./sc/背景框2.png) no-repeat;
|
|
color: white;
|
|
overflow: auto;
|
|
}
|
|
|
|
.city-plan .plan-item {
|
|
height: 46px;
|
|
overflow: hidden;
|
|
background-color: rgba(0, 28, 88, .9);
|
|
margin: 5px 10px;
|
|
}
|
|
|
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
|
.city-plan::-webkit-scrollbar {
|
|
width: 5px;
|
|
background-color: rgba(147, 145, 255, 0.5);
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
.city-plan::-webkit-scrollbar-thumb {
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
.city-plan::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
|
border-radius: 5px;
|
|
background-color: #555;
|
|
}
|
|
|
|
.city-plan .plan-item .name {
|
|
position: relative;
|
|
display: flex;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
height: 46px;
|
|
line-height: 46px;
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon {
|
|
position: relative;
|
|
left: 0px;
|
|
top: 8px;
|
|
width: 60px;
|
|
height: 30px;
|
|
margin: 0 0px 0px 10px;
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon0 {
|
|
background: url(./sc/logo天信.png) no-repeat;
|
|
background-size: 50%;
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon1 {
|
|
background: url(./sc/logo八环.png) no-repeat;
|
|
background-size: 50%;
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon2 {
|
|
background: url(./sc/logo中豪.png) no-repeat;
|
|
background-size: 80%;
|
|
background-position-y: center;
|
|
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon3 {
|
|
background: url(./sc/logo五峰.png) no-repeat;
|
|
background-size: 70%;
|
|
background-position-y: center;
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon4 {
|
|
background: url(./sc/logo杰克.png) no-repeat;
|
|
background-size: 80%;
|
|
background-position-y: center;
|
|
}
|
|
|
|
.city-plan .plan-item .name .city-icon5 {
|
|
background: url(./sc/logo永球.png) no-repeat;
|
|
background-size: 80%;
|
|
background-position-y: center;
|
|
}
|
|
|
|
.city-plan .plan-item .name .position-icon {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 15px;
|
|
float: right;
|
|
width: 12px;
|
|
height: 16px;
|
|
/* background: url(./sc/坐标-fill.png) no-repeat; */
|
|
}
|
|
|
|
.city-plan .plan-item #plan-list {
|
|
padding: 0px;
|
|
/* background-color: rgb(249,190,88); */
|
|
margin-left: 40px;
|
|
border-left: 2px solid #fff;
|
|
}
|
|
|
|
.city-plan .plan-item #plan-list>li {
|
|
list-style-type: none;
|
|
display: flex;
|
|
height: 23px;
|
|
line-height: 23px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.city-plan .plan-item #plan-list>li .year {
|
|
width: 14%;
|
|
}
|
|
|
|
.city-plan .plan-item #plan-list>li .time {
|
|
width: 18%;
|
|
}
|
|
|
|
.city-plan .plan-item #plan-list>li .icon {
|
|
text-align: center;
|
|
width: 30px;
|
|
}
|
|
|
|
/* 里层样式 */
|
|
/* 企业介绍 */
|
|
.content-left .firm-introduce {
|
|
display: flex;
|
|
}
|
|
|
|
.content-left .firm-introduce .data-firm-img {
|
|
width: 160px;
|
|
height: 110px;
|
|
background: url(./sc/企业图片.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 10px;
|
|
}
|
|
|
|
.content-left .firm-introduce .data-firm-text {
|
|
margin: 10px 10px 0px 5px;
|
|
width: 45%;
|
|
font-size: 13px;
|
|
height: 130px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* 超出部分省略号 */
|
|
word-break: break-all;
|
|
/* break-all(允许在单词内换行。) */
|
|
display: -webkit-box;
|
|
/* 对象作为伸缩盒子模型显示 */
|
|
-webkit-box-orient: vertical;
|
|
/* 设置或检索伸缩盒对象的子元素的排列方式 */
|
|
-webkit-line-clamp: 7;
|
|
/* 显示的行数 */
|
|
max-height: 120px;
|
|
/* 设置最大高度，根据行高，要几行乘以几倍 */
|
|
}
|
|
|
|
.content-left .firm-name {
|
|
font-size: 15px;
|
|
color: rgb(26, 153, 226);
|
|
margin: -10px 0 15px 10px;
|
|
}
|
|
|
|
/* 项目介绍 */
|
|
.item-introduce .item-img {
|
|
width: 100%;
|
|
height: 130px;
|
|
background: url(./sc/占位图.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.item-introduce .introduce-item .title {
|
|
display: flex;
|
|
color: rgb(24, 171, 244);
|
|
}
|
|
|
|
.item-introduce .introduce-item .title .icon {
|
|
height: 20px;
|
|
width: 20px;
|
|
margin: 0 10px;
|
|
background: url(./sc/项目列表点.png) no-repeat;
|
|
}
|
|
|
|
.item-introduce .introduce-item .data {
|
|
/* width: 100%; */
|
|
padding: 0 20px 0 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 现场效果 */
|
|
.scene-result .box-title {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.scene-result .img-matrix {
|
|
width: 90%;
|
|
/* background-color: #fff; */
|
|
height: 220px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.scene-result .img-matrix .scene-img-box,
|
|
.scene-img-box-one,
|
|
.scene-img-box-two {
|
|
width: 48%;
|
|
height: 100px;
|
|
background: url(./sc/照片框.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-img-box-one {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
bottom: 7px;
|
|
}
|
|
|
|
.scene-img-box-two {
|
|
/* width: 80%; */
|
|
/* height: 100%; */
|
|
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.scene-result .scene-img-box-two .scene-img.scene-img01 {
|
|
/* margin: 8px 0 0 8px; */
|
|
background: url(./sc/八环现场1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-result .scene-img-box-two .scene-img.scene-img02 {
|
|
/* margin: 8px 0 0 8px; */
|
|
background: url(./sc/八环现场2.jpg) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-result .scene-img-box-one .scene-img.scene-img0 {
|
|
margin: 8px 0 0 8px;
|
|
background: url(./sc/占位照片1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-result .img-matrix .scene-img {
|
|
width: 95%;
|
|
height: 92%;
|
|
margin: 4px auto;
|
|
background: url(./sc/占位照片1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-result .img-matrix .scene-img.scene-img2 {
|
|
background: url(./sc/占位照片2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-result .img-matrix .scene-img.scene-img3 {
|
|
background: url(./sc/占位照片3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scene-result .img-matrix .scene-img.scene-img4 {
|
|
background: url(./sc/占位照片4.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
/* 项目成效 */
|
|
.item-effect {
|
|
display: flex;
|
|
font-size: 17px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.item-effect .name {
|
|
width: 45%;
|
|
}
|
|
|
|
.item-effect .hint {
|
|
width: 12%;
|
|
color: rgb(54, 154, 255);
|
|
}
|
|
|
|
.item-effect .data {
|
|
width: 25%;
|
|
color: rgb(54, 154, 255);
|
|
font-weight: 800;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.item-effect .unit {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.appoint-data-board .appointBox {
|
|
display: flex;
|
|
}
|
|
|
|
.appoint-data-board .appointBox .appoint-img {
|
|
width: 185px;
|
|
height: 92px;
|
|
background: url(./sc/八环看板2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 10px 10px 15px 15px;
|
|
}
|
|
|
|
.appoint-data-board .appointBox .appoint-data {
|
|
position: relative;
|
|
/* top: 20px; */
|
|
width: 130px;
|
|
font-size: 14px;
|
|
padding-top: 10px;
|
|
/* text-align: center; */
|
|
font-size: 14px;
|
|
height: 115px;
|
|
|
|
}
|
|
|
|
.appoint-data-board .appointBox .appoint-data .title {
|
|
color: rgb(0, 188, 255);
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
|
|
.appoint-data-board .appointBox .appoint-data .text {
|
|
height: 60px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* 超出部分省略号 */
|
|
word-break: break-all;
|
|
/* break-all(允许在单词内换行。) */
|
|
display: -webkit-box;
|
|
/* 对象作为伸缩盒子模型显示 */
|
|
-webkit-box-orient: vertical;
|
|
/* 设置或检索伸缩盒对象的子元素的排列方式 */
|
|
-webkit-line-clamp: 3;
|
|
/* 显示的行数 */
|
|
max-height: 95px;
|
|
/* 设置最大高度，根据行高，要几行乘以几倍 */
|
|
}
|
|
|
|
.appoint-data-board .appoint-point {
|
|
position: relative;
|
|
top: -10px;
|
|
right: 10px;
|
|
display: flex;
|
|
justify-content: right;
|
|
/* padding-right: 50px; */
|
|
margin-bottom: 15px;
|
|
width: 185px;
|
|
}
|
|
|
|
.appoint-data-board .appoint-point .point {
|
|
width: 20px;
|
|
height: 4px;
|
|
margin: 3px;
|
|
background-color: rgba(0, 160, 233, 0.4);
|
|
}
|
|
|
|
.appoint-data-board .appoint-point .point.select {
|
|
background-color: rgba(0, 160, 233, 1);
|
|
}
|
|
|
|
/* 右上角日期时间 */
|
|
.top-right-timeBox {
|
|
display: flex;
|
|
width: 350px;
|
|
height: 50px;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
margin-right: 50px;
|
|
margin-top: 40px;
|
|
color: #fff;
|
|
/* background-color: #fff; */
|
|
}
|
|
|
|
.top-right-timeBox .time {
|
|
width: 45%;
|
|
font-size: 30px;
|
|
line-height: 50px;
|
|
font-family: title-font;
|
|
}
|
|
|
|
.top-right-timeBox .dateBox .month {
|
|
color: rgb(0, 188, 255);
|
|
}
|
|
|
|
.top-right-timeBox .long-string {
|
|
background-color: #fff;
|
|
width: 2px;
|
|
height: 80%;
|
|
margin-top: 10px;
|
|
margin: 10px 20px 0 20px;
|
|
}
|
|
|
|
.top-right-timeBox .img {
|
|
width: 42px;
|
|
height: 46px;
|
|
margin: 5px auto;
|
|
background: url(./sc/云.png);
|
|
}
|
|
|
|
/* 内层项目实施进度 */
|
|
.item-implement-plan {}
|
|
|
|
.item-implement-plan-box {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.item-implement-plan .plan-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-implement-plan .plan-top .title {
|
|
font-family: title-font;
|
|
font-size: 18px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.item-implement-plan .plan-top .title-unit {
|
|
display: flex;
|
|
border: 1px solid rgb(83, 173, 215);
|
|
font-size: 13px;
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
.item-implement-plan .plan-top .title-unit .left,
|
|
.progress-bar .left {
|
|
color: rgb(83, 173, 215);
|
|
}
|
|
|
|
.item-implement-plan .line {
|
|
height: 2px;
|
|
margin: 15px 0px;
|
|
background-color: rgba(0, 161, 234, .4);
|
|
}
|
|
|
|
.item-implement-plan .line .select {
|
|
position: relative;
|
|
bottom: 1px;
|
|
height: 4px;
|
|
width: 15%;
|
|
background-color: rgba(0, 161, 234, 1);
|
|
}
|
|
|
|
.item-implement-plan .progress-bar {
|
|
display: flex;
|
|
}
|
|
|
|
.item-implement-plan .progress-bar .bar-left {
|
|
display: flex;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.item-implement-plan .progress-bar .bar-left .left {
|
|
font-size: 18px;
|
|
margin: 0 7px;
|
|
}
|
|
|
|
.item-implement-plan .progress-bar .bar-right {
|
|
display: flex;
|
|
margin: 5px 0 0 10px;
|
|
}
|
|
|
|
.item-implement-plan .progress-bar .bar-right .dot {
|
|
height: 15px;
|
|
width: 3px;
|
|
margin: 0 1px;
|
|
background-color: rgba(81, 190, 243, 0.1);
|
|
}
|
|
|
|
.item-implement-plan .progress-bar .bar-right .dot.select {
|
|
background-color: rgba(81, 190, 243, 1);
|
|
}
|
|
|
|
.item-implement-plan .progress-data-list {
|
|
margin: 10px 0;
|
|
/* html内容禁止选中 */
|
|
user-select: none;
|
|
}
|
|
|
|
.item-implement-plan .progress-data-list .item {
|
|
display: flex;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
transition-property: background-color;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.item-implement-plan .progress-data-list .item:hover {
|
|
background-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
.item-implement-plan .progress-data-list .item .year {
|
|
margin-left: 10px;
|
|
width: 15%;
|
|
}
|
|
|
|
.item-implement-plan .progress-data-list .item .date {
|
|
width: 17%;
|
|
}
|
|
|
|
/* 左上角企业logo */
|
|
.top-left-firm-logo {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 90px;
|
|
width: 421px;
|
|
height: 52px;
|
|
/* background: url(./sc/LOGO.png); */
|
|
font-size: 50px;
|
|
color: white;
|
|
font-family: title-font;
|
|
letter-spacing: 15px;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 底部数据统计 */
|
|
.bottom-data-count {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 400px;
|
|
width: 1090px;
|
|
height: 217px;
|
|
background: url(./sc/中间背景框.png) no-repeat;
|
|
color: #fff;
|
|
display: flex;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.bottom-data-count .count-left,
|
|
.bottom-data-count .count-right {
|
|
margin: 15px 30px;
|
|
width: 25%;
|
|
}
|
|
|
|
.bottom-data-count .count-left .title,
|
|
.bottom-data-count .count-right .title {
|
|
font-size: 20px;
|
|
/* font-weight: ; */
|
|
font-family: title-font;
|
|
}
|
|
|
|
.bottom-data-count .count-left #trend {
|
|
height: 250px;
|
|
width: 320px;
|
|
position: relative;
|
|
bottom: 40px;
|
|
}
|
|
|
|
.bottom-data-count .count-right #electricityTrend {
|
|
height: 250px;
|
|
width: 320px;
|
|
position: relative;
|
|
bottom: 40px;
|
|
left: -20px;
|
|
}
|
|
|
|
.bottom-data-count .count-right .title {
|
|
text-align: right;
|
|
}
|
|
|
|
/* 中间左侧 */
|
|
.bottom-data-count .count-center-left {
|
|
width: 9%;
|
|
/* text-align: center; */
|
|
padding-top: 50px;
|
|
font-size: 18px;
|
|
position: relative;
|
|
left: 30px;
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data .top {
|
|
display: flex;
|
|
color: rgb(134, 140, 149);
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data .top .icon {
|
|
height: 10px;
|
|
width: 10px;
|
|
background-color: rgb(0, 128, 255);
|
|
margin: 6px 5px 0 0;
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data .top .icon.orange {
|
|
background-color: rgb(235, 87, 7);
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data .top .icon.gray {
|
|
background-color: rgb(170, 170, 170);
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data .top .icon.yellow {
|
|
background-color: rgb(247, 205, 112);
|
|
}
|
|
|
|
.bottom-data-count .count-center-left .top-data .data {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
/* 中间数据统计 */
|
|
.bottom-data-count .count-center {
|
|
width: 20%;
|
|
margin-left: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.bottom-data-count .count-center .center-top {
|
|
width: 190px;
|
|
height: 12px;
|
|
margin: 5px auto;
|
|
text-align: center;
|
|
line-height: 12px;
|
|
font-family: title-font;
|
|
font-size: 20px;
|
|
background: url(./sc/小标题花纹.png);
|
|
}
|
|
|
|
.bottom-data-count .count-center .center-center {
|
|
width: 195px;
|
|
height: 172px;
|
|
background: url(./sc/圆环背景图.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.bottom-data-count .count-center .center-center .name {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.bottom-data-count .count-center .center-center .data {
|
|
font-size: 25px;
|
|
font-family: title-font;
|
|
}
|
|
|
|
.bottom-data-count .count-center #count-circle {
|
|
width: 320px;
|
|
height: 220px;
|
|
position: absolute;
|
|
bottom: -19px;
|
|
left: -51px;
|
|
/* background-color: #fff; */
|
|
}
|
|
|
|
.count-center-left.right {
|
|
position: relative;
|
|
left: 20px;
|
|
} |