.chengshi { position: absolute; top: 73px; visibility: hidden; background: #ffffff; left: 20px; width: 83.5%; padding: 10px 20px; } .chengshi h3 { text-align: left; padding: 10px 20px; padding-left: 20px; border-bottom: 1px solid #e1e1e1; } .chengshi b { margin: 0 10px; font-size: 18px; color: black; } .chengshi .top { display: flex; justify-content: space-between; } .chengshi .top > div { width: 49%; } .chengshi .top .left { box-shadow: 0 0 1px 1px #e1e1e1; } .chengshi .top .left .flex { display: flex; justify-content: space-between; align-items: flex-start; color: #797979; } .chengshi .top .left .flex > :nth-child(1) { width: 25%; padding-left: 30px; text-align: left; } .chengshi .top .left .flex > :nth-child(1) b { font-weight: bold; } .chengshi .top .left .flex > :nth-child(1) span { display: block; margin: 20px 0; } .chengshi .top .left .flex > :nth-child(1) .echart40 { width: 90%; height: 40px; } .chengshi .top .left .flex .r { text-align: left; width: 75%; padding-top: 10px; position: relative; } .chengshi .top .left .flex .r span { padding-left: 20px; color: black; } .chengshi .top .left .flex .r .echart41 { width: 100%; height: 400px; margin: 0 auto; } .chengshi .top .left .flex .r > :nth-child(3) { position: absolute; right: 0px; top: 10px; width: 60%; display: flex; flex-wrap: wrap; } .chengshi .top .left .flex .r > :nth-child(3) > div { display: flex; align-items: center; } .chengshi .top .left .flex .r > :nth-child(3) > div span { height: 13px; width: 5px; display: inline-block; border-radius: 3px; margin-right: 5px; } .chengshi .top .left .flex .r > :nth-child(3) > div i { font-style: normal; margin-right: 8px; font-size: 12px; } .chengshi .top .right { box-shadow: 0 0 1px 1px #e1e1e1; } .chengshi .top .right .flex { display: flex; justify-content: space-between; position: relative; } .chengshi .top .right .flex .echart42 { height: 330px; width: 37%; margin: 0 auto; margin-top: 40px; } .chengshi .top .right .flex > :nth-child(2) { width: 63%; } .chengshi .top .right .flex > :nth-child(2) span { display: inline-block; padding: 10px 0 10px 60px; } .chengshi .top .right .flex > :nth-child(2) .echart43 { height: 400px; width: 100%; margin: 0 auto; } .chengshi .top .right .flex > :nth-child(3) { position: absolute; top: 10px; left: 20px; width: 37%; display: flex; flex-wrap: wrap; color: #797979; } .chengshi .top .right .flex > :nth-child(3) > div { display: flex; align-items: center; } .chengshi .top .right .flex > :nth-child(3) > div span { height: 13px; width: 23px; display: inline-block; border-radius: 3px; margin-right: 5px; } .chengshi .top .right .flex > :nth-child(3) > div i { font-style: normal; margin-right: 8px; font-size: 12px; } .chengshi .bottom { display: flex; justify-content: space-between; margin-top: 20px; } .chengshi .bottom .left { box-shadow: 0 0 1px 1px #e1e1e1; width: 49%; } .chengshi .bottom .left > div .flex { display: flex; justify-content: space-between; padding: 0 5px; padding-top: 20px; color: #797979; text-align: left; } .chengshi .bottom .left > div .flex > div { border: 1px solid #e1e1e1; width: 31%; padding: 5px; } .chengshi .bottom .left > div .flex b { margin-left: 0; font-weight: bold; } .chengshi .bottom .left > div .echart44 { width: 95%; height: 400px; margin: 0 auto; } .chengshi .bottom .right { width: 49%; box-shadow: 0 0 1px 1px #e1e1e1; } .chengshi .bottom .right > .flex { display: flex; justify-content: space-between; color: #797979; text-align: center; position: relative; } .chengshi .bottom .right > .flex > :nth-child(1) { width: 30%; } .chengshi .bottom .right > .flex > :nth-child(1) .echart45 { height: 150px; width: 100%; } .chengshi .bottom .right > .flex > :nth-child(2) { width: 70%; height: 200px; } .chengshi .bottom .right > .flex > :nth-child(3) { position: absolute; top: 10px; right: 20px; color: black; } .chengshi .bottom .right .box { color: #797979; } .chengshi .bottom .right .box > :nth-child(1) { padding: 10px 0; justify-content: left; padding-left: 20px; text-align: left; } .chengshi .bottom .right .box > :nth-child(1) > span { width: 48%; } .chengshi .bottom .right .box div[class^="echart"] { height: 200px; width: 48%; }