s202226701049/AIart-app/src/lib/user/model-user-edit/model-user-edit.component.scss

:host {
    --primary-color: #b64d24;
    --border-radius: 12px;
    --input-background: #f8f9fa;
}

ion-card {
    margin: 0;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    overflow: hidden;

    ion-card-header {
        padding: 24px;
        background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
        color: white;

        ion-card-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
            color: white;
        }

        ion-card-subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
        }
    }

    ion-card-content {
        padding: 24px;

        ion-item {
            --background: var(--input-background);
            --border-radius: 10px;
            --padding-start: 16px;
            --padding-end: 16px;
            --min-height: 56px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;

            &:last-of-type {
                margin-bottom: 24px;
            }

            &.item-has-focus {
                --background: white;
                box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(182, 77, 36, 0.1);
                transform: translateY(-1px);
            }

            ion-input {
                --padding-start: 8px;
                --padding-end: 8px;
                --placeholder-color: #999;
                --placeholder-opacity: 0.8;
                font-size: 15px;

                &::part(label) {
                    color: #666;
                    font-size: 14px;
                    margin-bottom: 4px;
                }
            }
        }

        ion-button {
            margin: 8px 0;
            height: 48px;
            --border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.5px;

            &:first-of-type {
                --background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
                --background-hover: linear-gradient(135deg, #ff6b4a, var(--primary-color));
                --box-shadow: 0 4px 16px rgba(182, 77, 36, 0.25);
            }

            &:last-of-type {
                --background: transparent;
                --color: #666;
                --border-style: solid;
                --border-color: #ddd;
                --border-width: 1px;
                --box-shadow: none;

                &:hover {
                    --background: #f8f9fa;
                }
            }
        }
    }
}

// 添加动画
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ion-card {
    animation: slideIn 0.3s ease-out;
}