.address-pop-up { position: fixed; background: rgba(0, 0, 0, 0.7); width: 100vw; height: 100vh; z-index: 3; top: 0; display: none; } .pop-up-content { background: #ffffff; padding: 3rem 5rem; width: 45%; margin: auto; position: relative; top: 15rem; border-radius: 0.4rem; min-height: 50rem; } .pop-up-content .title { display: flex; align-items: center; justify-content: space-between; border-bottom: #eaeaea 1px dashed; padding-bottom: 2rem; margin-bottom: 2rem; } .pop-up-content h2 { font-size: 1.8rem; font-weight: 600; } .pop-up-content i { font-size: 1.8rem; font-weight: 600; cursor: pointer; } .address-pop-up form { display: flex; flex-wrap: wrap; justify-content: space-between; } .address-pop-up form > div { width: 45%; margin-bottom: 2rem; } .address-pop-up form > div p { font-size: 1.4rem; margin-bottom: 2rem; } .address-pop-up form > div p:before { content: "*"; color: #FF7200; margin-right: 0.5rem; } .address-pop-up form > div input { width: calc(100% - 1rem); height: 4rem; line-height: 4rem; font-size: 1.4rem; resize: none; outline: none; padding: 1.5rem; border: #c1c1c1 1px solid; border-radius: 0.2rem; margin-left: 1rem; } .address-pop-up form > div input::placeholder, .address-pop-up .addressee-address textarea::placeholder { color: #999999; } .address-pop-up .addressee-name span, .address-pop-up .addressee-phone span, .address-pop-up .addressee-address span { color: #FF7200; font-size: 1.2rem; margin-left: 1rem; margin-top: 0.5rem; /*display: block;*/ display: none; } .address-pop-up .addressee-city { width: 100%; } .address-pop-up .addressee-city .distpicker { margin-left: 1rem; display: flex; justify-content: space-between; } .address-pop-up .addressee-city select { border-radius: 0.2rem; background: #fff; border: 1px #c1c1c1 solid; color: #666666; font-size: 1.4rem; height: 4rem; line-height: 4rem; outline: none; width: 32%; padding-left: 2rem; cursor: pointer; } .address-pop-up .addressee-address { width: 100%; } .address-pop-up .addressee-address textarea { width: 100%; margin-left: 1rem; outline: none; padding: 1.5rem; border: 1px solid #c1c1c1; resize: none; height: 10rem; border-radius: 0.2rem; } .set-default-address { display: flex; align-items: center; width: 100% !important; } .set-default-address label { margin-left: 0.8rem; cursor: pointer; } .set-default-address label:before { content: ""; } .set-default-address input[type="checkbox"] { width: 1.6rem; height: 1.6rem; position: relative; cursor: pointer; } .set-default-address input[type=checkbox]::after { position: absolute; top: 0; background-color: #fff; color: #fff; width: 1.4rem; height: 1.4rem; display: inline-block; visibility: visible; text-align: center; content: ' '; border-radius: 0.2rem; border: 1px solid #dde6ff; } .set-default-address input[type=checkbox]:checked::after { content: ""; background: #0147a6; border: 1px #0147a6 solid; } .set-default-address input[type=checkbox]:checked::before { content: ''; position: absolute; top: 0.2rem; left: 0.5rem; width: 0.3rem; height: 0.8rem; border: solid #ffffff; border-width: 0 0.2rem 0.2rem 0; transform: rotate(45deg); z-index: 1; } .set-default-address label span { font-size: 1.2rem; color: #666666; } .save-btn { background: #0147a6; font-size: 1.4rem; color: #ffffff; border: none; border-radius: 0.4rem; outline: none; cursor: pointer; width: 20rem; height: 4rem; margin: 3rem auto 1rem auto; display: block; } .save-btn:hover { background: #0054c7; } /* 兼容不同分辨率样式 */ @media screen and (max-width: 1599px) and (min-width: 1440px) { .pop-up-content{ padding: 3rem 4rem; width: 48%; } } @media screen and (max-width: 1439px) and (min-width: 1280px) { .pop-up-content{ padding: 3rem ; width: 50%; } }