.login-wrap { .login-bg { position: fixed; left: 0; right: 0; top: 0; height: 100%; text-align: center; background-image: url('@/assets/img/BG.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; } .form-link { color: #211f24; font-size: 12px; margin: 0px; } .login-footer { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); .text { font-family: 'PuHuiTi-Medium'; font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0%; color: #939499; } } :deep(.arco-space-item) { margin: 0px !important; } } .account-bind-container { width: 100%; max-width: 400px; margin: 0 auto; display: flex; .bind-card { background-color: var(--color-bg-2); width: 100%; flex-direction: column; align-items: start; } .bind-header { margin-bottom: 8px; text-align: left; } .phone-number { font-size: 14px; color: var(--color-text-4); text-align: left; } .account-list { margin-top: 16px; .account-item { padding: 12px 16px; margin-bottom: 8px; background-color: var(--color-bg-2); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; } .account-item { padding: 12px 16px; margin-bottom: 8px; background-color: var(--color-bg-2); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--color-border-2); box-shadow: 0 2px 4px 0 #b1b2b5; &.selected { border-color: #6d4cfe; background-color: rgba(109, 76, 254, 0.1); box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5); } } .account-item:deep(.arco-list-item-main) { padding: 0; } :deep(.arco-list-item-actions) { margin-left: 12px; } :deep(.arco-checkbox) { margin-right: 0; } :deep(.arco-checkbox-checked .arco-checkbox-mask) { background-color: #6d4cfe; border-color: #6d4cfe; } } }