.homePageNoMap { .windStstus { display: flex; align-items: center; margin: 0 10px; // border: 1px solid #7674d8; // border-radius: 10px 10px 0 0; border-bottom: none; height: 40px; .everyOne { display: flex; align-items: center; width: 160px; height: 25px; margin-right: 10px; border-radius: 5px; img { width: 21px; height: 21px; margin-left: 18px; } .statusName { margin-left: 10px; font-size: 14px; } .statusNum { padding: 0 18px; position: relative; right: -37px; background: #212223; height: 25px; line-height: 25px; border-radius: 5px; // border-right: 1px dashed #fff; } span { color: #fff; } } } .homePage_main { border-radius: 10px; display: flex; justify-content: space-between; .mainLeft { width: 65%; .lineStyle { width: 97%; border-radius: 10px; margin: 10px; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2); .powerLegendColor { width: 11px; height: 11px; border-radius: 7px; display: inline-block; margin-top: 2px; position: relative; top: 3px; } .lineColor { width: 24px; height: 2px; display: inline-block; margin-top: 2px; position: relative; top: -2px; left: 17px; } .styleData { position: absolute; top: 10px; left: 135px; z-index: 111; span { color: #fff; font-weight: 600; font-size: 14px; margin-right: 5px; border: 1px solid #fff; padding: 1px 10px; display: inline-block; cursor: pointer; } .changeStyle { color: #f2a91f; border: 1px solid #f2a91f; } .defaultSty { color: #c7c7c7; border: 1px solid #c7c7c7; } } } } .mainRight { width: 35%; .lineStyle { width: 94%; margin: 10px; border-radius: 10px; padding: 10px; position: relative; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2); .styleData { position: absolute; top: 10px; right: 20px; z-index: 111; span { color: #fff; font-weight: 600; font-size: 14px; margin-right: 5px; border: 1px solid #fff; padding: 1px 10px; display: inline-block; cursor: pointer; } .changeStyle { color: #f2a91f; border: 1px solid #f2a91f; } .defaultSty { color: #c7c7c7; border: 1px solid #c7c7c7; } } } .messageData { width: 94%; margin: 10px; border-radius: 10px; // padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2); padding: 20px 10px; p { font-weight: 600; line-height: 0; } .msgHeight { overflow-y: auto; height: calc(100% - 30px); .stationSty { margin-left: 5px; display: inline-block; width: 50px; font-weight: 600; } .titleSty { display: inline-block; // width: 60px; font-weight: 600; } .msgSty { display: inline-block; width: calc(90% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; &:hover { text-decoration-line: underline; } } .el-divider { margin: 12px 0 15px 0; } } span { font-size: 14px; } } } } .footer { padding: 0 10px; width: calc(100% - 20px); height: 40px; // background: #2f5eb0; // border-top: 1px solid #797979; position: fixed; bottom: 0; .exitV { width: 95%; display: flex; justify-content: space-between; line-height: 40px; .time { margin-left: 10px; color: #fff; } .earlywarning { margin-right: 50px; display: flex; .warningdata { margin-left: 20px; .warningColor { width: 20px; height: 20px; line-height: 40px; display: inline-block; border-radius: 50%; margin-left: 10px; position: relative; top: 3px; } } } } } }