*{ margin: 0; padding:0; } div.hide{ display: none } button, input { outline: none; border: none; background-color: #fff; } #opacity { position: fixed; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); z-index: 666; top: 0; left: 0; z-index: 1000; } #opacity .ios img{ width: 100%; display: block; } .mask { border: 0; margin: 0; padding: 0; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0.5; z-index: 1; /* styles required for IE to work */ background-color: #000; filter: alpha(opacity=0); } .agreetit { z-index: 2; position: fixed; display: flex; flex-direction: column; top: 16%; left: 50%; width: 80%; height: 12rem; margin-left: -40%; border-radius: 0.1rem; background-color: white; font-size: 0.5rem; } .agreetit .title { width: 100%; padding: 0.4rem 0; text-align: center; color: #333; } .agreetit .agreetit-main { flex: 1; width: 100%; padding: 0 0.2rem; overflow-y: auto; font-size: 0.3rem; box-sizing: border-box; } .agreetit .agreetit-main p { font-size: 0.42rem; line-height: 0.7rem; white-space: pre-line; } .agreetit .agreetit-main h1, .agreetit .agreetit-main h2, .agreetit .agreetit-main h3 { font-size: 0.3rem; } .agreetit .bottom { display: flex; height: 1.2rem; line-height: 1.2rem; // border-top: 1px solid #ddd; } .agreetit .bottom .cancle { text-align: center; flex: 1; color: #666; border-right: 1px solid #ddd; } .agreetit .bottom .sure { text-align: center; flex: 1; color: #15a61d; }