.fixed-left{ position: fixed; top: 0px; bottom: 0; left: -400px; width: 400px; padding-top: 50px; z-index: 40; transition: width .3s; } .fixed-left.collpased{ width: 400px; } .fixed-left::before{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background: rgba(0,0,0,0.3); } .fixed-left.active{ width: 100%; } /* .fixed-left.active .left_echart{ width: 100%; height: 100%; } .left_echart div{ width: 100%; height: 100%; } */ .fixed-left.active::before{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background: rgba(0,0,0,0.3); } .video_img{ position: absolute; bottom: 0; left: 0; right: 0; height: 40%; } .map_header{ display: flex; position: fixed; justify-content: space-between; align-items: center; height: 50px; left: 0; right: 0; background: rgba(78, 173, 222, 1); z-index: 50; transition: .3s; } .logo_txt{ margin-left: 15px; color: #fff; font-size: 18px; } .logo_txt .collpase-icon{ margin-right: 5px; cursor: pointer; } .user_info{ padding-right: 30px; font-size: 0; } .user_info .info-item{ display: inline-block; vertical-align: top; font-size: 14px; color: #fff; line-height: 50px; cursor: pointer; } .info-item .user_img{ /* display: inline-block; */ position: relative; width: 30px; height: 30px; border-radius: 50%; top: 10px; margin-right: 10px; } .info-item .user_nick{ font-size: 14px; } .drop-down{ position: relative; margin-left: 10px; } .drop-down::before{ position: absolute; content: ''; width: 0; height: 0; top: 50%; right: -15px; border: 5px solid transparent; border-top-color: #fff; margin-top: -2px; } .drop-down-list{ display: none; position: absolute; top: 55px; right: -20px; background: #fff; padding: 10px 0; line-height: 24px; min-width: 80px; text-align: right; } .drop-down-list::before{ position: absolute; bottom: 100%; right: 5px; width: 0; height: 0; content: ''; border: 5px solid transparent; border-bottom-color: #fff; } .drop-down-item{ padding: 0 15px; font-size: 14px; color: black; transition: color .3s; } .drop-down-item:hover{ color: #1890ff; } .left_echart{ position: fixed !important; height: 60%; left: 0; top: 0; width: 400px; z-index: 50; }