s202226701049/AIart-app/src/app/drawing/drawing.component.scss

:host {
    --primary-color: var(--ion-color-primary);
    --background-color: #f5f5f5;
}

ion-header {
    ion-toolbar {
        --background: transparent;

        ion-title {
            font-size: 18px;
            font-weight: 600;
        }
    }
}

.drawing-container {
    position: relative;
    width: 100%;
    height: calc(100% - 180px);
    background: white;
    overflow: hidden;

    canvas {
        touch-action: none;
        background: white;
    }
}

.tools-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;

    .tools-section {
        display: flex;
        justify-content: space-around;
        margin-bottom: 16px;

        ion-button {
            --padding-start: 8px;
            --padding-end: 8px;
            height: 60px;
            flex-direction: column;

            &.selected {
                --color: var(--primary-color);
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 25%;
                    width: 50%;
                    height: 2px;
                    background: var(--primary-color);
                    border-radius: 1px;
                }
            }

            ion-icon {
                font-size: 24px;
                margin-bottom: 4px;
            }

            span {
                font-size: 12px;
            }
        }
    }

    .color-section {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-bottom: 16px;
        padding: 0 16px;

        .color-item {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #eee;
            cursor: pointer;
            transition: transform 0.2s ease;

            &.selected {
                transform: scale(1.2);
                border-color: var(--primary-color);
            }

            &:hover {
                transform: scale(1.1);
            }
        }
    }

    .width-section {
        padding: 0 16px;

        ion-range {
            --bar-height: 4px;
            --bar-background: #eee;
            --bar-background-active: var(--primary-color);
            --height: 40px;
            --knob-size: 20px;
            --knob-background: white;
            --knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
    }
}

// 添加动画效果
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.tools-panel {
    animation: slideUp 0.3s ease-out;
}