page { width: 100%; height: 100%; background-color: rgb(138, 138, 138, 0.1); } body { padding: 0; margin: 0; } html, body, #mapVue { width: 100%; height: 100%; overflow: hidden; } #map { width: 100%; height: calc(100% - 300px); z-index: 1; } #mapVue { overflow: hidden; /* border: solid 1px springgreen; */ } .dingwei { position: fixed; width: 38px; height: 38px; bottom: 8.5rem; right: 0; z-index: 10; background-color: #fff; border-radius: 80%; opacity: 0.8; /* border: 1px solid gray; */ display: flex; align-items: center; justify-content: center; } .shuaxin { position: fixed; width: 38px; height: 38px; bottom: 11.5rem; right: 0; z-index: 10; background-color: #fff; border-radius: 80%; opacity: 0.8; /* border: 1px solid gray; */ display: flex; align-items: center; justify-content: center; } .baozu { position: fixed; width: 38px; height: 100px; top: 8.5rem; right: 5px; z-index: 10; background-color: #fff; border-radius: 5rem; /* opacity: 0.8; */ /* border: 1px solid gray; */ display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; } .baozu .bz-once { width: 38px; height: 40px; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-direction: column; /* border: 1px solid gray; */ } #Umain{ position: absolute; width: 100%; height: 300px; left: 0; bottom: 0; background-color: #e8e8e8; z-index: 100; } .once{ width: 100%; height: 40px; background-color: #fff; display: flex; align-items: center; /* margin-bottom: 10px; */ border-bottom: 1px solid #e8e8e8; padding:0 10px ; } .once-left{ width: 25%; } .once-c{ width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; padding: 8px 0; background-color: #fff; } .once-b{ width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-bottom: 1px solid #e8e8e8; /* margin-bottom: 10px; */ } .customClass{ width: 250px; height: 140px; }