.box { width: 331px; margin-bottom: 15px; background: hsl(0, 0%, 100%); border-radius: 25px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05); .content { .env { position: relative; display: flex; .envLeft { flex: 1 1 auto; height: 140px; padding-top: 24px; padding-left: 30px; .envnum { display: flex; flex-direction: row; align-items: flex-start; padding-top: 5px; padding-bottom: 5px; color: #1b144e; font-weight: 400; font-size: 32px; font-family: Montserrat; line-height: 32px; .unit { color: #c4c4c4; font-weight: 800; font-size: 12px; font-family: Mulish; font-style: normal; line-height: 15px; } } } .envRight { width: 165px; height: 140px; .roomAirImg { width: 165px; height: 140px; } } } .airStatus { padding-top: 5px; color: rgba(196, 196, 196, 1); font-weight: 400; font-size: 14px; font-family: PingFang SC; line-height: 20px; .airStatusbox { display: flex; align-items: center; .airStatusImg { width: 12px; height: 12px; margin-right: 3px; } .statusText { display: inline-block; width: 96px; overflow: hidden; font-size: 11px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; } } } .airBtn { position: absolute; top: 103px; right: 15px; } } .expend { .item { display: flex; align-items: center; justify-content: space-between; height: 60px; padding-right: 14px; padding-left: 27px; color: rgba(196, 196, 196, 1); font-weight: 400; font-size: 14px; line-height: 20px; border-top: 1px solid rgba(196, 196, 196, 0.4); .itemRight { display: flex; } .itemBg { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(196, 196, 196, 0.2); border-radius: 50%; } .itemBg:nth-child(1) { margin-right: 20px; } .itemImg { width: 20px; height: 20px; } } } }