body { background: #efefef; } * { margin: 0; padding: 0; } .yinying { background: rgba(0, 0, 0, 0.4); width: 100%; position: absolute; top: 60px; z-index: 96; } .flex { display: flex; justify-content: space-between; align-items: center; } b { font-weight: normal; } .homeTitle { padding: 10px 0; padding-left: 20px; background: #299cff; color: #ffffff; height: 40px; line-height: 40px; background: url(image/banner.png) no-repeat; background-size: 100% 114%; overflow: hidden; } .container { padding: 15px 20px; z-index: -1; } .container .main { margin-right: 200px; } .container .main .news { display: flex; } .container .main .news > div { background: #ffffff; box-shadow: 0px 0px 2px 2px #e2e2e2; margin-right: 20px; } .container .main .news > div > :nth-child(1) { display: flex; align-items: center; border-bottom: 1px solid #e1e1e1; padding: 10px 0; } .container .main .news > div > :nth-child(1) img { height: 20px; margin-right: 7px; margin-left: 20px; } .container .main .news > :nth-child(1) { width: 40%; } .container .main .news > :nth-child(1) .lunbotu { position: relative; padding: 10px 0; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(1) { width: 86%; position: absolute; left: 7%; top: 50%; transform: translateY(-25px); display: flex; justify-content: space-between; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(1) > div { width: 50px; height: 50px; background: rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(1) > div span { display: block; height: 10px; width: 10px; border-right: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); } .container .main .news > :nth-child(1) .lunbotu > :nth-child(1) > :nth-child(1) span { transform: rotate(135deg); } .container .main .news > :nth-child(1) .lunbotu a { display: block; width: 100%; text-align: center; } .container .main .news > :nth-child(1) .lunbotu img { width: 90%; height: 332px; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(3) { bottom: 10px; left: 5%; color: white; width: 90%; height: 30px; line-height: 30px; position: absolute; display: flex; justify-content: space-between; background: rgba(0, 0, 0, 0.7); } .container .main .news > :nth-child(1) .lunbotu > :nth-child(3) .linkTitle { margin-left: 10px; width: 60%; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(3) .linkTitle p { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(3) .linkTitle :nth-child(n + 2) { display: none; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(3) > :nth-child(2) { position: absolute; right: 10px; left: 70%; top: 50%; transform: translateY(-2px); display: flex; justify-content: space-between; align-items: center; } .container .main .news > :nth-child(1) .lunbotu > :nth-child(3) > :nth-child(2) span { width: 32%; max-width: 50px; height: 4px; border-radius: 3px; background: #777777; display: inline-block; } .container .main .news > :nth-child(1) .lunbotu .lunbotuColor { background: #ffffff !important; } .container .main .news .middle { width: 30%; } .container .main .news .middle > span { display: block; white-space: nowrap; width: 90%; margin: 15px auto; padding: 10px 0; padding-left: 20px; overflow: hidden; text-overflow: ellipsis; color: #797979; font-size: 14px; } .container .main .news .middle > span:nth-child(odd) { background: #f1f5fe; } .container .main .news .middle > span:nth-child(even) { background: #fbf8f4; } .container .main .news .right { width: 30%; } .container .main .news .right > :nth-child(n + 2) { text-decoration: none; display: block; } .container .main .news .right > :nth-child(n + 2) > div { margin: 12px 20px 5px; height: 70px; text-align: center; display: flex; align-items: center; justify-content: center; color: black; } .container .main .news .right > :nth-child(n + 2) > div img { height: 40px; margin-right: 20px; } .container .main .news .right .pink { border: 1px solid #fed199; background: #fff3e5; } .container .main .news .right .blue { border: 1px solid #ccdafe; background: #ecf2fe; } .categoryAll{ display: flex; justify-content: space-between; width: 100%; background-color: #f3f3f3; /* margin-top: 20px; */ margin-right: 20px; } .container .main .categoryAll .category { background: #ffffff; margin-top: 20px; margin-right: 20px; width: 49%; } .container .main .categoryAll .category > :nth-child(1) { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #e1e1e1; } .container .main .categoryAll .category > :nth-child(1) img { height: 20px; margin-left: 20px; margin-right: 7px; } .container .main .categoryAll .category > :nth-child(2) { display: flex; justify-content: space-around; align-items: center; padding: 20px 0; position: relative; } .container .main .categoryAll .category > :nth-child(2) a, .container .main .categoryAll .category > :nth-child(2) div { display: block; width: 30%; cursor: pointer; } .container .main .categoryAll .category > :nth-child(2) img { width: 100%; /* width: 30%; height: 50px; */ } /* 永安建房 */ .container .main .house { background: #ffffff; margin-top: 20px; margin-right: 20px; } .container .main .house > :nth-child(1) { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #e1e1e1; } .container .main .house > :nth-child(1) img { height: 20px; margin-left: 20px; margin-right: 7px; } .container .main .house > :nth-child(2) { display: flex; justify-content: space-around; align-items: center; padding: 20px 0; position: relative; } .container .main .house > :nth-child(2) a, .container .main .house > :nth-child(2) div { display: flex; flex-direction: column; justify-content: center; align-items: center; display: block; width: 15%; cursor: pointer; margin-bottom: 8px; } .houseDiv{ width: 100%; } .houseDiv .houseImg1{ width: 100% !important; height: 100%; display: flex; } .container .main .house .houseImg1 .houseImgdiv1{ width: 70px; height: 70px; border-radius:50%; text-align: center; line-height: 70px; overflow: hidden; margin: 0 auto; } .container .main .house .houseImgdiv1 img{ vertical-align:middle; width: 40px; height: 40px; } /* 指标预览 */ .container .main .zhibaio { background: #ffffff; margin-top: 20px; margin-right: 20px; box-shadow: 1px 2px 10px #e9e9e9; overflow: hidden; } .container .main .zhibaio > :nth-child(1) { display: flex; align-items: center; padding: 10px 0; /* border-bottom: 1px solid #e1e1e1; */} .container .main .zhibaio > :nth-child(1) img { height: 20px; margin-left: 20px; margin-right: 7px; } .container .main .zhibaio .zhibaioContent{ padding: 10px 15px 10px 15px; width: 98%; height: 250px; background-color: #f3f3f3; display: flex; justify-content: space-between; } .container .main .zhibaio .zhibaioContent .Content1{ width: 23%; height: 100%; background-color: #ffffff; } .echartsYL{ border-top: 1px solid #e1e1e1; width: 100%; } .echartsYL .zong{ text-align: center; margin-top: 20px; margin-bottom: 10px; } .echartsYL .echartsYLeft{ width: 60%; height: 100%; } .echartsYL .echartsRight{ width: 60%; height: 100%; } .C2echartsYLeft{ width: 60%; height: 100%; } .echartsYjAll{ margin-top: 30px; display: flex; justify-content: center; align-items: center; } .echartsYj{ width: 80px; height: 30px; margin-right: 5px; background-color: #ffedbd; color: #ffcd4b; display: flex; justify-content: center; align-items: center; border: 1p solid #ffc226; } /* 正常中的图标样式 */ .zhengchangBu{ display: flex; justify-content: center; align-items: center; } .zhengchangBuDiv{ width: 80px; height: 30px; margin-right: 5px; background-color: #d3fceb; color: #68d5aa; display: flex; justify-content: center; align-items: center; } .echartsZHAll{ margin-top: 20px; display: flex; justify-content: center; align-items: center; } .echartsZH{ width: 80px; height: 30px; margin-right: 5px; background-color: #ffd7c3; color: #ff7026; display: flex; justify-content: center; align-items: center; } .container .main .zhibaio .zhibaioContent .Content2{ width: 20%; height: 100%; background-color: #ffffff; } .container .main .zhibaio .zhibaioContent .Content3{ width: 55%; height: 100%; background-color: #ffffff; } .ndmb{ width: 80px; height: 35px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background-color: #ffffff; text-align: center; line-height: 30px; box-shadow: 1px 2px 10px rgb(213, 206, 206); } .dcdb{ width: 80px; height: 35px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background-color: #d7d7d7; text-align: center; line-height: 30px; } .truendmb{ border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .truedcdb{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .tableList{ margin-top: 10px; } .tableListAll { width: 95%; height: 100%; margin-left: 10px; margin-right: 10px; } .tableListAll tr{ height: 35px; } .tableListAll td { border-bottom: 1px solid #e4e4e4; } .container .main .core { background: #ffffff; margin-top: 20px; margin-right: 20px; box-shadow: 0 0 2px 2px #e6e6e6; } .container .main .core > :nth-child(1) { display: flex; align-items: center; /* padding: 10px 0; */ border-bottom: 1px solid #e1e1e1; } .container .main .core > :nth-child(1) img { height: 20px; margin-right: 7px; margin-left: 20px; } .trueRenwu{ display: flex; align-items: center; width: 150px; text-align: center; line-height: 50px; border-bottom: 1px solid #269bff; color: #269bff; } .fasleRenwu{ display: flex; width: 150px; text-align: center; align-items: center; line-height: 50px; border-bottom: none; color: #6f6d6d; } #echartTitleNone{ width: 100%; height: 200px; line-height: 200px; text-align: center; } .container .main .core b { font-size: 26px; color: black; font-weight: normal; } .container .main .core .echartTitle { display: flex; align-items: center; color: #797979; } .container .main .core .echartTitle > div { display: flex; align-items: center; margin-right: 20px; padding: 10px 0; padding-right: 20px; } .container .main .core .echartTitle > div > :nth-child(1) { display: none; } .container .main .core .echartTitle > div img { height: 20px; margin-left: 20px; margin-right: 5px; } .container .main .core .fourPage { width: 100%; } .container .main .core .echartArea { display: flex; justify-content: space-between; background: #f2f2f2; padding: 10px 20px; /* padding-bottom: 20px; */ box-shadow: 0 0 2px 2px #e6e6e6; } .container .main .core .echartArea > div { width: 32%; background: #ffffff; } .container .main .core .echartArea > div h4 { padding: 10px 0; padding-left: 20px; border-bottom: 1px solid #e1e1e1; } .container .main .core .echartArea > div > div .flex { justify-content: left; padding-left: 20px; margin-top: 10px; } .container .main .core .echartArea > div > div .flex > span { width: 50%; color: #797979; } .container .main .core .echartArea > div > div .flex b { font-size: 26px; font-weight: normal; color: black; } .container .main .core .echartArea > div > div .flex i { font-style: normal; color: #2f9eff; } .container .main .core .echartArea > div > div > :nth-child(3) { width: 96%; height: 350px; text-align: center; margin: 20px auto 0; } .container .main .core .cityBuild { display: flex; justify-content: space-between; background: #f2f2f2; padding: 10px 20px; padding-bottom: 20px; display: none; box-shadow: 0 0 2px 2px #e6e6e6; } .container .main .core .cityBuild h3 { padding: 10px 0; padding-left: 20px; border-bottom: 1px solid #e1e1e1; } .container .main .core .cityBuild h4 { padding: 10px 0; border-bottom: 1px solid #f5eaea; } .container .main .core .cityBuild b { font-size: 26px; color: black; font-weight: normal; } .container .main .core .cityBuild > div { width: 32%; background: #ffffff; } .container .main .core .cityBuild .left .box { padding-left: 10px; margin: 10px 10px 0; padding-bottom: 10px; } .container .main .core .cityBuild .left .box div { padding: 20px 0; } .container .main .core .cityBuild .left .box li { padding: 10px 0; list-style: none; } .container .main .core .cityBuild .left .box li::before { content: "●"; color: #1492ff; margin-right: 5px; } .container .main .core .cityBuild .left .box ul li:nth-child(even) { margin-bottom: 15px; } .container .main .core .cityBuild .middle .flex { padding-left: 20px; } .container .main .core .cityBuild .middle .flex > div { width: 50%; } .container .main .core .cityBuild .middle .flex span { display: block; margin: 10px 0; color: #797979; } .container .main .core .cityBuild .middle .flex b { margin-right: 10px; } .container .main .core .cityBuild .middle .flex i { font-style: normal; color: #269bff; } .container .main .core .cityBuild .middle .echart01 { margin-top: 40px !important; height: 300px; width: 90%; margin: 0 auto; } .container .main .core .cityBuild .middle p { padding-left: 20px; margin-top: 10px; color: #797979; } .container .main .core .cityBuild .middle .echart02 { height: 100px; width: 90%; } .container .main .core .cityBuild .right h4 { padding-left: 30px; border-bottom: none; } .container .main .core .cityBuild .right .flex { padding-left: 20px; } .container .main .core .cityBuild .right .flex > div { width: 50%; } .container .main .core .cityBuild .right .flex > div span { display: block; margin: 10px 0; color: #797979; } .container .main .core .cityBuild .right .flex > div b { margin-right: 10px; } .container .main .core .cityBuild .right .flex > div i { font-style: normal; color: #1492ff; } .container .main .core .cityBuild .right div[class^="echart"] { width: 90%; height: 260px; margin: 0 auto; } .container .main .core .cityBuild .right .echart03 { margin-bottom: 20px; } .container .main .core .townBuild { display: flex; justify-content: space-between; background: #f2f2f2; padding: 10px 20px; padding-bottom: 20px; display: none; box-shadow: 0 0 2px 2px #e6e6e6; } .container .main .core .townBuild h3 { padding: 10px 0; padding-left: 20px; border-bottom: 1px solid #e1e1e1; } .container .main .core .townBuild h4 { padding: 20px 0; border-bottom: 1px solid #e1e1e1; } .container .main .core .townBuild div[class^="echart"] { width: 95%; height: 350px; margin: 0 auto; } .container .main .core .townBuild > div { width: 32%; background: #ffffff; } .container .main .core .townBuild .flex { padding-left: 20px; } .container .main .core .townBuild .flex > div { width: 50%; } .container .main .core .townBuild .flex > div span { display: block; margin: 10px 0; color: #797979; } .container .main .core .townBuild .flex > div b { margin-right: 10px; } .container .main .core .townBuild .flex > div i { font-style: normal; color: #269bff; } .container .main .core .townBuild .province > :nth-child(1) { text-align: right; padding-right: 30px; margin-top: 20px; } .container .main .core .townBuild .province > :nth-child(1) span { margin-right: -5px; border: 1px solid #e6e6e6; box-shadow: 0 0 1px 1px #e6e6e6; padding: 10px; display: inline-block; border-radius: 2px; } .container .main .core .townBuild .province > :nth-child(1) .provinceTypeColor { background: #1492ff; color: #ffffff; } .container .main .core .townBuild .province .echart05 { width: 95%; height: 500px; margin-top: 100px; } .container .main .core .townBuild .province .echart055 { display: none; width: 95%; height: 500px; margin-top: 100px; } .container .main .core .townBuild .province .color { background: #1492ff; } .container .main .core .townBuild .middle h4 { padding-left: 10px; margin: 0 20px; border-bottom: none; } .container .main .core .townBuild .right h4 { padding-left: 30px; border-bottom: none; } .container .main .core .townBuild .right li { list-style: none; color: #797979; padding: 10px 0; padding-left: 20px; } .container .main .core .townBuild .right li::before { content: "●"; color: #1492ff; margin-right: 10px; } .container .main .core .townBuild .right .echart08 { width: 95%; height: 600px; margin: 20px auto 0; } .container .main .core .occupation { background: #f2f2f2; padding: 10px 10px; padding-bottom: 20px; display: none; box-shadow: 0 0 2px 2px #e6e6e6; } .container .main .core .occupation h3 { padding: 10px 0; padding-left: 20px; border-bottom: 1px solid #e1e1e1; } .container .main .core .occupation h4 { padding: 20px 0; padding-left: 20px; } .container .main .core .occupation span { display: block; } .container .main .core .occupation .topBox { width: 100%; } .container .main .core .occupation .topBox > .flex { width: 100%; align-items: flex-start; } .container .main .core .occupation .topBox > .flex > .left { width: 38%; background: #ffffff; } .container .main .core .occupation .topBox > .flex > .left div[class^="echart"] { width: 90%; height: 200px; margin: 0 auto; } .container .main .core .occupation .topBox > .flex > .right { width: 60%; background: #ffffff; } .container .main .core .occupation .topBox > .flex > .right > .flex { align-items: flex-start; padding-top: 10px; position: relative; } .container .main .core .occupation .topBox > .flex > .right > .flex .left { width: 56%; height: 310px; margin-left: 10px; } .container .main .core .occupation .topBox > .flex > .right > .flex .left h4 { padding: 10px; } .container .main .core .occupation .topBox > .flex > .right > .flex .left .echart012 { width: 98%; height: 300px; margin: 0 auto; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right { top: 10px; bottom: 0; left: 56%; right: 10px; position: absolute; padding-left: 20px; background: #f8faff; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right b { font-size: 26px; color: #ffa333; margin-right: 10px; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right i { font-style: normal; color: #26b6ff; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right > :nth-child(1) { display: flex; justify-content: space-between; padding-right: 30px; margin-top: 10px; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right > :nth-child(1) i { color: #e17040 !important; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox { display: flex; justify-content: left; color: #797979; align-items: center; background: #ffffff; margin: 15px 10px 0 0px; position: relative; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox .echart013 { width: 70px; height: 200px; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox ul { position: absolute; left: 70px; right: 0; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox ul li { list-style: none; display: flex; justify-content: space-between; margin-top: 10px; padding-left: 10px; padding-right: 20px; align-items: flex-end; flex-wrap: wrap; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox ul li span { margin-left: -13px; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox ul li span::before { content: "● "; color: #ffd199; } .container .main .core .occupation .topBox > .flex > .right > .flex > .right .smallBox ul li i { color: #e25d26; } .container .main .core .occupation .topBox > .flex > .right h4 { border-bottom: none; padding: 10px; padding-left: 20px; } .container .main .core .occupation .topBox > .flex > .right table { width: 95%; margin: 0 auto 20px; } .container .main .core .occupation .topBox > .flex > .right table tr { height: 40px; } .container .main .core .occupation .topBox > .flex > .right table th { background: #3e9ef5; color: white; } .container .main .core .occupation .topBox > .flex > .right table tbody { text-align: center; } .container .main .core .occupation .topBox > .flex > .right table tbody tr { background: #f8f8f8; } .container .main .core .occupation .topBox > .flex > .right .fourTitle { display: flex; justify-content: space-between; padding: 0 20px; } .container .main .core .occupation .topBox > .flex > .right .fourTitle span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .container .main .core .occupation .topBox > .flex > .right .fourTitle b { font-size: 26px; font-weight: normal; margin-right: 10px; } .container .main .core .occupation .topBox > .flex > .right .fourTitle i { color: #26a8ff; font-style: normal; } .container .main .core .occupation .bottomBox { margin-top: 20px; } .container .main .core .occupation .bottomBox .flex { align-items: flex-start; } .container .main .core .occupation .bottomBox .flex > div { width: 33%; background: #ffffff; padding-bottom: 20px; } .container .main .core .occupation .bottomBox .flex > div > :nth-child(2) { width: 90%; margin: 10px auto 0; height: 300px; } .container .main .core .occupation .bottomBox .flex > div > :nth-child(3) { padding: 20px 0; text-align: center; margin: 0 10px; box-shadow: 0 0 1px 1px #e1e1e1; } .container .mainTitle { position: absolute; top: 73px; right: 20px; width: 200px; height: 800px; background: #ffffff; box-shadow: 0px 0px 1px 1px #e2e2e2; z-index: 97; } .container .mainTitle > :nth-child(1) { display: flex; align-items: center; justify-content: left; padding: 10px 0; border-bottom: 1px solid #e1e1e1; } .container .mainTitle > :nth-child(1) img { height: 17px; margin-right: 7px; margin-left: 20px; } .container .mainTitle > ul > li { list-style: none; text-align: center; padding: 10px 0; } .container .mainTitle > ul > li > :nth-child(1) > :nth-child(1) { height: 40px; display: flex; align-items: center; justify-content: center; margin: 5px auto; border-radius: 20%; width: 40px; background: #269bff; } .container .mainTitle > ul > li > :nth-child(1) > :nth-child(1) img { height: 20px; } .container .mainTitle > ul > li > :nth-child(1) > :nth-child(2) { text-align: center; } .container .mainTitle > ul > li > :nth-child(2) { display: none; } .sanjiao { top: 200px; position: absolute; z-index: 99; right: 225px; display: none; width: 0; border-top: 20px solid transparent; border-left: 40px solid #ffffff; border-bottom: 20px solid transparent; } .totalEchart > div { z-index: 100; left: 20px !important; right: 240px !important; width: unset !important; } .x { font-size: 30px; color: white; position: absolute; right: 240px; z-index: 101; display: none; top: 73px; cursor: pointer; height: 20px; line-height: 20px; width: 20px; background: red; } .x span { position: absolute; top: -4px; left: 2px; } .m4 { width: 25%; } .m5 { width: 30%; } .m62 { width: 27.08%; } .m7 { width: 6.01%; } .m8 { width: 25.3%; } .m0 { width: 83.5%; }