.phoneDetail { // padding: 13px; --van-uploader-size: 92px !important; :global { .van-button { font-size: 18px; } } .addPhone { margin: 13px; width: calc(100% - 26px); color: var(--van-primary-text); border-color: #fff; border-radius: 10px; font-size: 16px; } .phoneContainer { display: flex; flex-wrap: wrap; .item { position: relative; padding: 1.5px; .img { display: flex; align-items: center; justify-content: center; width: calc(100vw / 3 - 3px); height: calc(100vw / 3 - 3px); border-radius: 4px; overflow: hidden; position: relative; background-color: #eaeaea; background-repeat: no-repeat; background-position: center; background-image: url('../images/icon-photo-default.png'); } } .itemBorder .img::before { content: ' '; position: absolute; border-radius: 10px; border: 2px solid #64a9ff; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; } --van-checkbox-border-color: transparent; position: relative; :global { .van-checkbox { position: absolute; top: 16px; right: 10px; z-index: 9; height: 25px; } .van-checkbox__icon--checked { .van-icon { border-color: #64a9ff; } } } .checkboxHide { opacity: 0; } .iconChecked { font-size: 18px; border: 1px solid transparent; :global { .van-icon__image { width: 100%; height: 100%; } } } } .dialogTitle { i { display: inline-block; width: 4px; height: 14px; background: #ff8057; border-radius: 2px; margin-right: 6px; } text-align: left; font-size: 18px; font-weight: 500; color: #333333; line-height: 25px; padding: 20px 0 20px 25px; } } .photos { padding: 0 16px 16px; } .downBtn { position: fixed; right: 20px; bottom: 40px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 1); padding: 8px; box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .2); &:active{ opacity: .8; } img { width: 100%; height: 100%; display: block; } }