fix:css

dream-app/src/app/page-dream-analysis/page-dream-analysis.component.scss

@@ -1,108 +1,168 @@
 :root {
-    --ion-color-primary: #4b0082;
-    --ion-color-secondary: #800080;
-    --ion-color-tertiary: #ee82ee;
-    --ion-color-light-bg: #f8f0ff;
-    --ion-color-input-bg: rgba(255, 255, 255, 0.8);
-  }
-  
-  ion-content {
-    --background: none;
-    background: linear-gradient(to bottom, #4b0082, #800080, #ee82ee);
-    position: relative;
-  }
-  
-  
-  ion-content::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-    z-index: 2;
-  }
-  
-  ion-content > * {
-    position: relative;
-    z-index: 3;
-  }
-  
-  @keyframes twinkling {
-    0% { opacity: 0.8; }
-    50% { opacity: 0.2; }
-    100% { opacity: 0.8; }
-  }
-  
-  body {
-    font-family: '思源黑体', '微软雅黑', '苹方', sans-serif;
-    background-color: var(--ion-color-light-bg);
-    color: #333;
-  }
-  
-  ion-header {
-    --background: var(--ion-color-primary);
-    color: var(--ion-color-primary-contrast);
-  }
-  
-  ion-toolbar {
-    --background: transparent;
-  }
-  
-  ion-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-  }
-  
-  ion-title ion-icon {
-    margin-right: 8px;
-  }
-  
-  ion-item {
-    --background: var(--ion-color-input-bg);
-    border-radius: 8px;
-    margin-bottom: 16px;
-  }
-  
-  ion-input,
-  ion-textarea {
-    --padding-start: 12px;
-    --padding-end: 12px;
-  }
-  
-  ion-button {
-    --background: var(--ion-color-secondary);
-    --border-radius: 8px;
-    --padding-vertical: 10px;
-    --padding-horizontal: 20px;
-    font-weight: bold;
-    color: var(--ion-color-primary-contrast);
-    margin-top: 20px;
-  }
-  
-  .loading-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    margin-top: 20px;
-    color: var(--ion-color-secondary);
-  }
-  
-  .response-container {
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 8px;
-    padding: 16px;
-    margin-top: 20px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-  
-  fm-markdown-preview {
-    font-size: 1rem;
-    line-height: 1.5;
-    color: #444;
-  }
+  /* 颜色变量定义 */
+  --ion-color-primary: #4b0082; /* 深紫色 */
+  --ion-color-secondary: #800080; /* 紫色 */
+  --ion-color-tertiary: #ee82ee; /* 浅紫色 */
+  --ion-color-light-bg: #f8f0ff; /* 中等亮度的浅紫色背景 */
+  --ion-color-input-bg: rgba(255, 255, 255, 0.9); /* 纯白色背景，稍微减少透明度 */
+  --ion-color-border: #dddddd; /* 较浅的灰色边框 */
+  --ion-color-text: #333333; /* 深灰色文本 */
+  --ion-color-title-bg: #e0d4ff; /* 稍微加深的标题背景条颜色 */
+}
+
+body {
+  font-family: '思源黑体', '微软雅黑', '苹方', sans-serif;
+  background-color: var(--ion-color-light-bg);
+  color: var(--ion-color-text);
+}
+
+/* Header 样式 */
+ion-header {
+  --background: var(--ion-color-primary);
+  color: #ffffff; /* 确保文字为白色，提升对比度 */
+}
+
+ion-toolbar {
+  --background: transparent;
+}
+
+ion-title {
+  font-size: 1.6rem; /* 微调字号 */
+  font-weight: bold; /* 保持加粗 */
+  display: flex;
+  align-items: center;
+  background: var(--ion-color-title-bg); /* 添加稍微加深的背景条 */
+  padding: 12px 20px; /* 增加内边距 */
+  border-radius: 8px; /* 保持圆角 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
+}
+
+ion-title ion-icon {
+  margin-right: 10px; /* 微调图标与标题的间距 */
+  font-size: 2rem; /* 增大图标尺寸 */
+}
+
+/* Content 样式 */
+ion-content {
+  --background: none;
+  background: linear-gradient(to bottom, #4b0082, #800080, #ee82ee); /* 保持原有渐变 */
+  position: relative;
+  padding: 24px; /* 增加内边距 */
+}
+
+ion-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2); /* 减少透明度，避免过暗 */
+  pointer-events: none;
+  z-index: 2;
+}
+
+ion-content > * {
+  position: relative;
+  z-index: 3;
+}
+
+/* 输入框样式 */
+ion-item {
+  --background: var(--ion-color-input-bg); /* 纯白色背景 */
+  border: 1px solid var(--ion-color-border); /* 添加浅灰色边框 */
+  border-radius: 8px; /* 保持圆角 */
+  margin-bottom: 20px; /* 保持底部间距 */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
+}
+
+ion-input,
+ion-textarea {
+  --padding-start: 16px; /* 增加内边距 */
+  --padding-end: 16px; /* 增加内边距 */
+  font-size: 1rem; /* 保持字体大小 */
+  color: var(--ion-color-text); /* 深灰色文本 */
+}
+
+ion-input:focus,
+ion-textarea:focus {
+  border-color: var(--ion-color-secondary); /* 聚焦时边框颜色 */
+  box-shadow: 0 0 5px var(--ion-color-secondary); /* 聚焦时阴影 */
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: var(--ion-color-secondary); /* 紫色按钮 */
+  --border-radius: 8px; /* 圆角 */
+  --padding-vertical: 12px; /* 微调垂直内边距 */
+  --padding-horizontal: 20px; /* 保持水平内边距 */
+  font-weight: bold; /* 保持加粗 */
+  color: #ffffff; /* 白色文字 */
+  font-size: 1.2rem; /* 增大字号 */
+  margin-top: 24px; /* 增加顶部间距 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加中等阴影 */
+  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
+}
+
+ion-button:hover {
+  --background: #a64fc1; /* 调整悬停颜色，保持与原有颜色协调 */
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* 增大阴影 */
+}
+
+ion-button:active {
+  --background: #663399; /* 调整激活颜色，保持与原有颜色协调 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 减小阴影 */
+  transform: scale(0.98); /* 点击时略微缩小 */
+}
+
+/* 加载动画容器 */
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 24px; /* 增加顶部间距 */
+  color: var(--ion-color-secondary);
+}
+
+.response-container {
+  background-color: rgba(255, 255, 255, 0.9); /* 保持稍微透明的纯白色背景 */
+  border-radius: 8px; /* 圆角 */
+  padding: 20px; /* 增加内边距 */
+  margin-top: 24px; /* 增加顶部间距 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 增加阴影 */
+}
+
+/* Markdown 预览样式 */
+fm-markdown-preview {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #444444; /* 深灰色文本 */
+}
+
+/* 底部导航栏样式（如果有的话） */
+ion-footer {
+  --background: #ffffff; /* 纯白色背景 */
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+}
+
+ion-tab-bar {
+  height: 60px; /* 增加高度 */
+}
+
+ion-tab-button {
+  font-size: 1rem; /* 增大文字 */
+  color: #666666; /* 浅灰色文字 */
+}
+
+ion-tab-button[aria-selected="true"] {
+  color: var(--ion-color-secondary); /* 选中项高亮 */
+}
+
+ion-tab-button ion-icon {
+  font-size: 1.5rem; /* 增大图标 */
+}
+
+ion-tab-button ion-label {
+  margin-top: 4px;
+}

dream-app/src/app/tab1/tab1.page.html

@@ -6,6 +6,7 @@
       expand="block"
       size="large"
       color="tertiary"
+      class="record-dream-button"
       (click)="navigateTo('record')"
     >
       <ion-icon slot="start" name="create-outline"></ion-icon>
@@ -14,40 +15,45 @@
 
     <!-- 梦境分析和梦境描绘 -->
     <div class="function-cards">
-      <!-- 梦境分析 -->
+      <!-- 梦境描绘 -->
       <ion-card
-        (click)="navigateTo('dream/analysis')"
-        style="background-image: url('assets/images/dream-analysis-bg.png'); background-size: cover; background-position: center;"
+        class="function-card"
+        (click)="navigateTo('dream/picture')"
+        style="background-image: url('assets/images/dream-visualization-bg.png');"
       >
         <ion-card-header>
-          <ion-icon name="search-outline" size="large"></ion-icon>
-          <ion-card-title>梦境分析</ion-card-title>
+          <ion-icon name="color-palette-outline" size="large"></ion-icon>
+
+          <!-- 修改在global.scss -->
+          <ion-card-title>梦境描绘</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-          解读您的梦境，提供专业建议。
+          根据描述生成梦境的印象图片。
         </ion-card-content>
       </ion-card>
 
-      <!-- 梦境描绘 -->
+      <!-- 梦境分析 -->
       <ion-card
-        (click)="navigateTo('dream/picture')"
-        style="background-image: url('assets/images/dream-visualization-bg.png'); background-size: cover; background-position: center;"
+        class="function-card"
+        (click)="navigateTo('dream/analysis')"
+        style="background-image: url('assets/images/dream-analysis-bg.png');"
       >
         <ion-card-header>
-          <ion-icon name="color-palette-outline" size="large"></ion-icon>
-          <ion-card-title>梦境描绘</ion-card-title>
+          <ion-icon name="search-outline" size="large"></ion-icon>
+          <ion-card-title class="indented-title">梦境分析</ion-card-title>
         </ion-card-header>
-        <ion-card-content>
-          根据描述生成梦境的印象图片。
+        <ion-card-content class="indented-content">
+          解读您的梦境，提供专业建议。
         </ion-card-content>
       </ion-card>
     </div>
   </div>
 
-<ion-button (click)="goTestPage()">进入测试页</ion-button>
+  <!-- 测试按钮 -->
+  <!-- <ion-button expand="block" class="test-page-button" (click)="goTestPage()">进入测试页</ion-button> -->
 
   <!-- 星星评分 -->
-  <h1>星星评分</h1>
+  <h1>梦境记录</h1>
   <div class="dream-list">
     <!-- 使用 *ngFor 实现梦境循环 -->
     <div class="dream-item" *ngFor="let dream of recentDreams; trackBy: trackByDream">
@@ -59,21 +65,19 @@
         [scoreMax]="5"
         (onScoreChange)="updateDreamRating(dream, $event)"
       ></app-edit-rating-star>
+      <!-- 添加梦境描述 -->
+      <p class="dream-description">{{ dream.description }}</p>
+      <!-- 编辑标签 -->
+      <!-- <h1>编辑标签</h1> -->
+      <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
     </div>
   </div>
 
-  <!-- 编辑标签 -->
-  <h1>编辑标签</h1>
-  <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
-
-
-
-
   <!-- 父级页面：从子组件输出事件获取属性 -->
-  <h1>父级页面：从子组件输出事件获取属性</h1>
+  <!-- <h1>父级页面：从子组件输出事件获取属性</h1>
   <ul>
     <li *ngFor="let tag of editTags">
       {{ tag }}
     </li>
-  </ul>
+  </ul> -->
 </ion-content>

dream-app/src/app/tab1/tab1.page.scss

@@ -1,21 +1,308 @@
-.main-functions {
-    padding: 16px;
-  
-    ion-button {
-      margin-bottom: 16px;
-    }
-  
-    .function-cards {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-  
-      ion-card {
-        width: 48%;
-      }
-    }
+:root {
+  /* 颜色变量定义 */
+  --ion-color-primary: #4b0082; /* 深紫色 */
+  --ion-color-secondary: #800080; /* 紫色 */
+  --ion-color-tertiary: #ee82ee; /* 浅紫色 */
+  --ion-color-light-bg: #f8f0ff; /* 中等亮度的浅紫色背景 */
+  --ion-color-input-bg: rgba(255, 255, 255, 0.9); /* 纯白色背景，稍微减少透明度 */
+  --ion-color-border: #dddddd; /* 较浅的灰色边框 */
+  --ion-color-text: #333333; /* 深灰色文本 */
+  --ion-color-title-bg: #e0d4ff; /* 稍微加深的标题背景条颜色 */
+
+  /* 新增颜色变量 */
+  --background-color: var(--ion-color-light-bg); /* 页面背景颜色 */
+  --card-overlay-color: rgba(0, 0, 0, 0.5); /* 卡片遮罩层颜色 */
+  --card-text-color: #ffffff; /* 卡片文字颜色 */
+}
+
+body {
+  font-family: '思源黑体', '微软雅黑', '苹方', sans-serif;
+  background-color: var(--background-color);
+  color: var(--ion-color-text);
+}
+
+/* Header 样式 */
+ion-header {
+  --background: var(--ion-color-primary);
+  color: var(--header-text-color, #ffffff); /* 确保文字为白色，提升对比度 */
+}
+
+ion-toolbar {
+  --background: transparent;
+}
+
+ion-title {
+  font-size: 1.6rem; /* 微调字号 */
+  font-weight: bold; /* 保持加粗 */
+  display: flex;
+  align-items: center;
+  background: var(--ion-color-title-bg); /* 添加稍微加深的背景条 */
+  padding: 12px 20px; /* 增加内边距 */
+  border-radius: 8px; /* 保持圆角 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
+}
+
+ion-title ion-icon {
+  margin-right: 10px; /* 微调图标与标题的间距 */
+  font-size: 2rem; /* 增大图标尺寸 */
+}
+
+/* Content 样式 */
+ion-content {
+  --background: none;
+  background: var(--background-color); /* 使用统一的背景颜色 */
+  position: relative;
+  padding: 24px; /* 增加内边距 */
+}
+
+/* 遮罩层 */
+ion-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.1); /* 减少透明度，避免过暗 */
+  pointer-events: none;
+  z-index: 1;
+}
+
+ion-content > * {
+  position: relative;
+  z-index: 2;
+}
+
+/* 输入框样式 */
+ion-item {
+  --background: var(--ion-color-input-bg); /* 纯白色背景 */
+  border: 1px solid var(--ion-color-border); /* 添加浅灰色边框 */
+  border-radius: 8px; /* 保持圆角 */
+  margin-bottom: 20px; /* 保持底部间距 */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
+}
+
+ion-input,
+ion-textarea {
+  --padding-start: 16px; /* 增加内边距 */
+  --padding-end: 16px; /* 增加内边距 */
+  font-size: 1rem; /* 保持字体大小 */
+  color: var(--ion-color-text); /* 深灰色文本 */
+}
+
+ion-input:focus,
+ion-textarea:focus {
+  border-color: var(--ion-color-secondary); /* 聚焦时边框颜色 */
+  box-shadow: 0 0 5px var(--ion-color-secondary); /* 聚焦时阴影 */
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: var(--ion-color-secondary); /* 紫色按钮 */
+  --border-radius: 8px; /* 圆角 */
+  --padding-vertical: 12px; /* 微调垂直内边距 */
+  --padding-horizontal: 20px; /* 保持水平内边距 */
+  font-weight: bold; /* 保持加粗 */
+  color: #ffffff; /* 白色文字 */
+  font-size: 1.2rem; /* 增大字号 */
+  margin-top: 24px; /* 增加顶部间距 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加中等阴影 */
+  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
+}
+
+ion-button:hover {
+  --background: #a64fc1; /* 调整悬停颜色，保持与原有颜色协调 */
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* 增大阴影 */
+}
+
+ion-button:active {
+  --background: #663399; /* 调整激活颜色，保持与原有颜色协调 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 减小阴影 */
+  transform: scale(0.98); /* 点击时略微缩小 */
+}
+
+/* 加载动画容器 */
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 24px; /* 增加顶部间距 */
+  color: var(--ion-color-secondary);
+}
+
+.response-container {
+  background-color: rgba(255, 255, 255, 0.9); /* 保持稍微透明的纯白色背景 */
+  border-radius: 8px; /* 圆角 */
+  padding: 20px; /* 增加内边距 */
+  margin-top: 24px; /* 增加顶部间距 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 增加阴影 */
+}
+
+/* Markdown 预览样式 */
+fm-markdown-preview {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #444444; /* 深灰色文本 */
+}
+
+/* 底部导航栏样式（如果有的话） */
+ion-footer {
+  --background: #ffffff; /* 纯白色背景 */
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+}
+
+ion-tab-bar {
+  height: 60px; /* 增加高度 */
+}
+
+ion-tab-button {
+  font-size: 1rem; /* 增大文字 */
+  color: #666666; /* 浅灰色文字 */
+}
+
+ion-tab-button[aria-selected="true"] {
+  color: var(--ion-color-secondary); /* 选中项高亮 */
+}
+
+ion-tab-button ion-icon {
+  font-size: 1.5rem; /* 增大图标 */
+}
+
+ion-tab-button ion-label {
+  margin-top: 4px;
+}
+
+/* 功能卡片样式 */
+.function-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.function-card {
+  flex: 1 1 calc(50% - 16px);
+  background-size: cover;
+  background-position: center;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative; /* 确保伪元素定位相对于此容器 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.function-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* 添加半透明遮罩层 */
+.function-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--card-overlay-color); /* 使用变量定义遮罩层颜色 */
+  z-index: 1;
+}
+
+/* 调整文字层级和颜色 */
+::ng-deep .function-card ion-card-header,
+::ng-deep .function-card ion-card-content {
+  position: relative;
+  z-index: 2;
+  color: var(--card-text-color) !important; /* 强制文字颜色为白色 */
+}
+
+.function-card ion-card-header {
+  background-color: transparent; /* 移除背景色 */
+  padding: 16px;
+}
+
+.function-card ion-card-title,
+.function-card ion-card-content {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+}
+
+
+/* 梦境列表样式 */
+.dream-list {
+  padding: 16px;
+}
+
+.dream-item {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.dream-item h3 {
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+}
+
+.dream-item p {
+  color: #666666;
+  margin-bottom: 8px;
+}
+
+.dream-item ion-icon {
+  font-size: 1.5rem;
+  color: var(--ion-color-secondary);
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+/* 添加梦境描述样式 */
+.dream-description {
+  font-size: 1rem;
+  color: #555555;
+  margin-top: 8px;
+}
+
+/* 标签列表样式 */
+ul {
+  list-style: none;
+  padding: 0 16px;
+}
+
+ul li {
+  display: inline-block;
+  background-color: var(--ion-color-tertiary);
+  color: #ffffff;
+  padding: 6px 12px;
+  border-radius: 16px;
+  margin: 4px;
+  font-size: 0.9rem;
+}
+
+/* 标题样式 */
+h1 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--ion-color-primary);
+  margin: 24px 16px 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .function-cards {
+    flex-direction: column;
   }
-  
-  ion-list {
-    margin-top: 16px;
-  }
+
+  .function-card {
+    flex: 1 1 100%;
+  }
+}
+.indented-title {
+  padding-left: 240px; /* 根据需要调整缩进的宽度 */
+}
+.indented-content {
+  padding-left: 160px; /* 根据需要调整缩进的宽度 */
+}

dream-app/src/app/tab1/tab1.page.ts

@@ -20,12 +20,14 @@ export class Tab1Page {
       date: new Date('2023-10-20'),
       emotion: '愉悦',
       rating: 4, // 默认评分
+      description: '在梦中，我置身于一座悬浮于云端的城市，五彩斑斓的建筑物轻盈地漂浮在蓝天之上。街道上行人悠然自得，车辆如同鸟儿般自在穿梭。微风拂过，带来远处海洋的咸湿气息，让人感受到无尽的自由与宁静。'
     },
     {
       title: '迷失的森林',
       date: new Date('2023-10-18'),
       emotion: '恐惧',
       rating: 2, // 默认评分
+      description: '梦境中，我徘徊在一片茂密而神秘的森林中，阳光透过高大的树冠洒下斑驳的光影。四周环绕着未知的声音，仿佛每一棵树都在低语。迷失在这片绿色的海洋里，时间仿佛静止，只能依靠心中的指引寻找回家的路。'
     },
   ];
 
@@ -33,11 +35,11 @@ export class Tab1Page {
   editTags: string[] = [];
 
   constructor(private router: Router) {}
+  
   goTestPage(){
     this.router.navigate(['/tabs/test']);
   }
 
-
   // 更新梦境评分
   updateDreamRating(dream: any, newRating: number): void {
     console.log(`梦境 "${dream.title}" 的评分更新为：`, newRating);