body { padding: 0; margin: 0; } html, body, #mapVue { width: 100%; height: 100%; } #map { width: 100%; height: 50%; z-index: 1; } #mapVue { overflow: hidden; /* border: solid 1px springgreen; */ } .dingwei { position: fixed; width: 38px; height: 38px; top: 100px; right: 0; z-index: 100; background-color: #fff; border-radius: 20px; opacity: 0.8; border: 1px solid gray; display: flex; align-items: center; justify-content: center; } #seedata { position: fixed; bottom: 0; width: 100%; height: 70%; z-index: 400; background-color: #fff; /* opacity: 0.9; */ display: flex; flex-direction: column; border-radius: 60px 60px 0 0; } .title { width: 100%; height: 20%; /* border: 1px solid springgreen; */ border-radius: 60px 60px 0 0; position: relative; /* top: -3%; */ background-color: #fff; z-index: 101; display: flex; align-items: center; justify-content: center; flex-direction: column; } .title-span { height: 15%; } /* .title::after { content: ''; display: block; width: 40px; height: 40px; border: springgreen solid 1px; } */ .main { width: 95%; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-direction: column; border-top: 1px solid rgb(138, 138, 138); } .f-m-once { /* border: 1px solid rgb(194, 142, 0); */ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 0 8px 0 } .f-m-o-title { display: flex; align-items: center; width: 40%; } .f-m-o-t-img { width: 30px; height: 30px; padding-right: 10px; } .f-m-o-center { width: 60%; } .el-divider { margin: 0 auto; width: 90%; } .but { width: 100%; display: flex; align-items: center; justify-content: space-around; padding-top: 5px; } .buta { /* border: 1px solid #4D7CEE; */ } .shipingPopup { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 200; display: flex; align-items: center; justify-content: center; } .s-p-main { width: 90%; height: 90%; /* background-color: #fff; */ } .s-p-gaunbi { position: relative; left: 90%; width: 50px; height: 50px; } /* video::-webkit-media-controls-timeline { display: none; } */ .butb { width: 80px; height: 80px; border: 1px solid rgb(46, 118, 228); border-radius: 40px; display: flex; align-items: center; justify-content: center; color: #fff; background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE); } /* .resultFeedback { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 201; display: flex; align-items: center; justify-content: center; } */ /* .b-r-main { width: 90%; height: 90%; } .b-r-gaunbi { position: relative; left: 90%; width: 50px; height: 50px; } .b-r-main-in { width: 100%; height: auto; padding-bottom: 20px; background-color: #fff; border-radius: 10px; } .b-r-m-i-once { padding: 10px 0 10px 10px; display: flex; justify-content: space-around; } .b-r-m-i-o-title { width: 30%; position: relative; top: 10px; } .b-r-m-i-o-center { width: 70%; } .b-r-i-o-ups{ /* align-items: center; */ } .b-r-m-i-o-c-img { width: 50px; height: 50px; } .b-r-m-but{ position: relative; left: calc(50% - 40px); } */ .butc { /* border: 1px solid #4D7CEE; */ } .b-b-img { width: 40px; height: 40px; display: block; /* border: 1px solid #4D7CEE; */ }