.Project{ width: 711rpx; height: auto; background: #fff; margin:20rpx 20rpx 20rpx 19rpx; border-radius: 10rpx; overflow: hidden; padding-bottom: 20rpx; } .header{ height: 108rpx; /* border: 1rpx solid red; */ margin-top: 45rpx; position: relative; } .num{ width: 200rpx; height: 100%; text-align: center; border-right: 1rpx solid #E8E8E8; } .text1{ display: block; color: #333333; font-size: 50rpx; font-weight: bold; } .text2{ color: #92949B; font-size: 26rpx; } .type{ position: absolute; left: 240rpx; top: 0; color: #666666; font-size: 30rpx; height: 100%; font-weight: bold; } .type-view{ margin-bottom: 30rpx; } .text3,.text4{ color: #92949B; font-size: 26rpx; } .circle{ width: 106rpx; height:46rpx; } .image{ position: absolute; right: 0; top: 20%; transform: translate(-15%, -50%); } .image2{ position: absolute; right: 0; top: 85%; transform: translate(-15%, -50%); } .image text{ position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 26rpx; color: #F5F6FA; } ec-canvas { width: 100%; height: 100%; } .container{ width: 100%; height: 220rpx; box-sizing: border-box; margin-top: 20rpx; /* margin-bottom: 20rpx; */ display: flex; flex-shrink: 0; /* padding: 20rpx; */ } .echarts1{ width: 190rpx; height: 190rpx; margin-left: 16px; flex-shrink: 0; } .echarts{ width: 190rpx; height: 190rpx; } .echarts2{ width: 138rpx; height: 138rpx; margin-top: 30rpx; margin-left: 40rpx; flex-shrink: 0; } .echarts-circle{ width: 138rpx; height: 138rpx; } .top{ width: 204rpx; height: 1rpx; background: red; position: absolute; left: 306rpx; top: 861rpx; transform: rotate(8.5deg); } .bottom{ width: 254rpx; height: 1rpx; background: #E6E6E6; /* background: red; */ position: fixed; left: 273rpx; top: 988rpx; transform: rotate(-7deg); } .left{ margin-left: 15px; color: #999999; font-size: 22rpx; vertical-align: middle; margin-top: 60rpx; width: 120rpx; flex-shrink: 0; } .left-circle{ width: 10rpx; height: 10rpx; background: #29B9A5; border-radius: 50%; display: inline-block; } .des{ width: 120rpx; height: 72rpx; margin-top: 10rpx; } .percent{ color: #29B9A5; margin-left: 25rpx; } .right{ color: #999999; font-size: 22rpx; vertical-align: middle; width: 160rpx; height: 50rpx; box-sizing: border-box; } .right2{ color: #999999; font-size: 22rpx; vertical-align: middle; width: 160rpx; height: 50rpx; box-sizing: border-box; margin-top: 10rpx; } .per{ display: inline-block; margin-top: 50rpx; } .bacColor1{ background: #63CFED; } .bacColor2{ background: #FF773F; } .right text{ color: #63CFED; font-size: 24rpx; } .right2 text{ color: #FF773F; font-size: 24rpx; } .footer{ box-sizing: border-box; width: 670rpx; height: auto; margin: auto; background: #F5F6F8; padding: 5rpx 17rpx 15rpx 49rpx; color: #9DA9B2; } .footer-num{ width: 163rpx; /* height: 72rpx; */ border-right: 1rpx solid #DFE0E1; display: inline-block; text-align: center; } .footer-num-text{ display: block; color: #00A8D6; font-size: 34rpx; font-weight: bold; box-sizing: border-box; } .footer-num-text2{ font-size: 24rpx; } .resolve,.unresolved{ font-size: 24rpx; color: #9DA9B2; display: inline-block; /* vertical-align: middle; */ margin-left: 40rpx; /* margin-top: 20rpx; */ margin-top: 23rpx; vertical-align: top; } .resolve-text1,.resolve-text2{ color:#666666; font-size: 26rpx; font-weight: bold; } .unresolved{ /* left: 420rpx; */ } .footer-icon{ width: 36rpx; height: 36rpx; line-height: 36rpx; border-radius: 50%; border: 1rpx solid #FF773F; color: #FF773F; text-align: center; display: inline-block; margin-left: 80rpx; vertical-align: top; margin-top: 23rpx; } .state{ color: #B6BAC6; font-size: 20rpx; margin-top: 5rpx; display: block; } .clearfix:after{ content: "020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* 触发 hasLayout */ zoom: 1; }