.intention-page { min-height: 100vh; background: url('./images/fill_bg_icon.png') no-repeat top center #85E2FF; background-size: contain; padding-top: 40%; overflow: hidden; position: relative; :global { .cityPopBox { .van-picker-column__item--selected { color: #333 !important; font-weight: normal; } .van-picker__loading { top: 40%; } } } } .formBox { background: #FFFFFF; border-radius: 16px; border: 4px solid rgba(79,194,230,0.22); margin: 0 14px 20px; padding: 15px 16px 0; .formItem { margin-bottom: 24px; >p { color: #333333; font-size: 15px; font-weight: 600; line-height: 23px; margin-bottom: 8px; >span { font-weight: normal; color: #777777; } } .valDot { font-size: 15px; background: #F4F4F4; border-radius: 4px; height: 37px; line-height: 37px; padding: 0 10px; position: relative; >i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: url('./images/toggle_icon.png') no-repeat center; background-size: contain; width: 18px; height: 10px; transition: all 0.5s; } } .valDone { display: flex; flex-direction: column; justify-content: center; background: #F4F4F4; border-radius: 4px; min-height: 37px; padding: 0 10px; position: relative; >i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: url('./images/toggle_icon.png') no-repeat center; background-size: contain; width: 18px; height: 10px; transition: all 0.5s; } .vdArea { font-size: 13px; color: #777777; text-overflow: ellipsis; overflow: hidden; word-break: break-all; white-space: nowrap; padding-right: 20px; } .vdSchool { font-size: 15px; color: #000000; margin-bottom: 4px; text-overflow: ellipsis; overflow: hidden; word-break: break-all; white-space: nowrap; padding-right: 20px; } } .openVal { >i { transform: translateY(-50%) rotate(180deg); } } .valDone2 { height: 58px; } .grayText { color: #BBBBBB; } .codeItem { margin-top: 12px; } .selectItem { display: flex; align-items: center; margin-top: 16px; >div { display: flex; align-items: center; margin-right: 20px; span { color: #333333; font-size: 15px; } i { width: 16px; height: 16px; background: url('./images/no_select.png') no-repeat top center; background-size: contain; margin-right: 4px; } .selectedIcon { background: url('./images/selected.png') no-repeat top center; background-size: contain; } } } } } .bottomBtn { height: 68px; width: auto; position: relative; left: 50%; transform: translateX(-50%); margin: 4px 0; } .successPop { position: fixed; left: 0; top: 0; width: 100vw; height: 100%; z-index: 8; background: rgba(0, 0, 0, 0.7); overflow: hidden; } .successBox { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9; width: 220px; height: 251px; background: url('./images/success_box_icon.png') no-repeat center; background-size: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; .sTitle { margin-top: 110px; width: 74px; } .sDone { width: 190px; height: 62px; } p{ margin: 8px 0 14px; font-size: 14px; color: #777; } } .codeText { color: #1CACF1; } .countDown { color: rgb(28, 172, 241, 0.6); } .columnsContent { :global { .highLight { color: #1CACF1; } } }