Files
number_zj/portal/h5/home.css
2022-01-11 14:22:25 +08:00

1085 lines
24 KiB
CSS

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%;
}