update: toolbox

novel-app/src/app/home/home.page.scss

@@ -10,7 +10,6 @@
     /* 高亮颜色 */
 }
 
-/* home.page.scss */
 ion-content {
     --background: #f0f8ff;
     /* 你可以根据需要调整颜色 */

novel-app/src/app/toolbox/toolbox.page.html

@@ -7,8 +7,8 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-
+<ion-content [fullscreen]="true"
+  style="background-image: url('/assets/images/background-image6.jpg'); background-size: cover; background-position: center;">
   <!-- 小说书名生成按钮 -->
   <ion-card>
     <ion-card-header>

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

@@ -1,6 +1,22 @@
 /* 全局样式 */
+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: #f7f7f7;
+    --background: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
     padding: 16px;
 }
 
@@ -9,11 +25,25 @@ 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: #333;
+    color: #ffffff;
     font-size: 1.25rem;
     font-weight: bold;
 }
@@ -25,24 +55,33 @@ ion-card-content {
 
 /* 按钮样式 */
 ion-button {
-    --background: #007bff;
-    --color: #fff;
-    --border-radius: 4px;
-    --padding-top: 10px;
-    --padding-bottom: 10px;
-    --padding-start: 16px;
-    --padding-end: 16px;
+    --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: #0056b3;
+    --background: rgba(255, 255, 255, 0.7);
+    /* 鼠标悬停时稍微不那么透明 */
 }
 
 /* 工具栏样式 */
 ion-toolbar {
-    --background: #ffffff;
+    --background: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
     --color: #333;
     border-bottom: 1px solid #e0e0e0;
 }
@@ -50,4 +89,38 @@ ion-toolbar {
 /* 返回按钮样式 */
 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;
+    /* 背景图片居中 */
 }