.scr-box { top: 44px; height: calc(100vh - 54px); } .ul-mj { margin: 10px 20px 0; } .ul-mj .item { background-color: #fff; border-radius: 10px; box-shadow: 0 0 4px rgba(0, 64, 40, .1); /* padding-bottom: 5px; */ margin-bottom: 15px; } .ul-mj .loc { font-size: 17px; color: #000; font-weight: bold; padding-left: 16px; background: url(../../images/d5.png) left center no-repeat; background-size: 8px; line-height: 55px; margin: 0 15px; } .ul-mj .cards { overflow: hidden; margin: 0 7px; } .ul-mj .cd { float: left; width: 50%; } .ul-mj .con { position: relative; border-radius: 10px; overflow: hidden; background-color: #f3f5f8; margin: 0 8px 15px; } .ul-mj .name{ display: flex; justify-content: center; align-items: center; font-size: 15px; color: #101d34; overflow: hidden; height: 75px; } .ul-mj .icon img{ display: block; max-width: 31px; margin-right: 12px; } .ul-mj .bot{ text-align: center; font-size: 15px; color: #fff; font-weight: bold; height: 30px; line-height: 30px; } .ul-mj .open .bot{ background: linear-gradient(90deg,#f69250,#f9b35c); } .ul-mj .close .bot{ background: linear-gradient(90deg,#52b88f,#64c388); } .m-door{ width: 270px; height: 287px; border-radius: 10px; overflow: hidden; background: #fff url(../../images/icons/g-i9.png) no-repeat center top; background-size: 100% auto; margin-bottom: 15px; } .m-door .name{ font-size: 18px; color: #000; font-weight: bold; text-align: center; margin-top: 173px; margin-bottom: 22px; } .m-door .btns{ display: flex; align-items: center; justify-content: space-between; overflow: hidden; margin: 0 25px; } .m-door .btn{ display: block; width: 100px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; color: #fff; font-size: 15px; } .m-door .open{ background: linear-gradient(90deg,#f69250,#f9b35c); } .m-door .cls{ background: linear-gradient(90deg,#52b88f,#64c388); }