20222670105/novel-app/src/app/toolbox/toolbox.page.scss

/* 全局样式 */
ion-app {
    background: url('/assets/images/background-image.jpg') no-repeat center center fixed;
    /* 添加背景图片 */
    background-size: cover;
    /* 背景图片覆盖整个内容区域 */
    background-position: center;
    /* 背景图片居中 */
    height: 100vh;
    /* 确保背景覆盖整个视口高度 */
    margin: 0;
    /* 移除默认的外边距 */
    padding: 0;
    /* 移除默认的内边距 */
}

ion-content {
    --background: transparent;
    /* 设置为透明，以便背景从 ion-app 继承 */
    padding: 16px;
}

/* 卡片样式 */
ion-card {
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 默认阴影 */
    background-size: cover;
    /* 背景图片覆盖整个卡片 */
    background-position: center;
    /* 背景图片居中 */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* 添加过渡效果 */
}

ion-content ion-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    /* 调整阴影强度和模糊半径 */
    transform: translateY(-12px);
    /* 增加提升高度 */
}

/* 卡片标题样式 */
ion-card-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: bold;
}

/* 卡片内容样式 */
ion-card-content {
    padding: 16px;
}

/* 按钮样式 */
ion-button {
    --background: rgba(255, 255, 255, 0.5);
    /* 半透明白色背景 */
    --color: black;
    /* 按钮文字颜色 */
    --border-radius: 8px;
    /* 按钮圆角 */
    --padding-top: 12px;
    /* 按钮内边距 */
    --padding-bottom: 12px;
    /* 按钮内边距 */
    --padding-start: 24px;
    /* 按钮内边距 */
    --padding-end: 24px;
    /* 按钮内边距 */
    font-size: 1rem;
    font-weight: 500;
}

ion-button:hover {
    --background: rgba(255, 255, 255, 0.7);
    /* 鼠标悬停时稍微不那么透明 */
}

/* 工具栏样式 */
ion-toolbar {
    --background: transparent;
    /* 设置为透明，以便背景从 ion-app 继承 */
    --color: #333;
    border-bottom: 1px solid #e0e0e0;
}

/* 返回按钮样式 */
ion-back-button {
    --color: #007bff;
}

/* 为每个卡片添加背景图片和不同的渐变背景 */
ion-card:nth-child(1) {
    background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
    /* 渐变背景和图片背景 */
    background-blend-mode: multiply;
    /* 混合模式 */
    background-size: cover;
    /* 背景图片覆盖整个卡片 */
    background-position: center;
    /* 背景图片居中 */
}

ion-card:nth-child(2) {
    background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
    /* 渐变背景和图片背景 */
    background-blend-mode: multiply;
    /* 混合模式 */
    background-size: cover;
    /* 背景图片覆盖整个卡片 */
    background-position: center;
    /* 背景图片居中 */
}

ion-card:nth-child(3) {
    background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
    /* 渐变背景和图片背景 */
    background-blend-mode: multiply;
    /* 混合模式 */
    background-size: cover;
    /* 背景图片覆盖整个卡片 */
    background-position: center;
    /* 背景图片居中 */
}