s202226701018/wisdom-app/src/app/tab4/tab4.page.scss

.custom-toolbar {
    --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 0; /* 去掉默认内边距 */
}

.custom-title {
    font-size: 1.3em; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    color: #000000; 
    text-align: center; /* 文字居中对齐 */
    margin: 0; /* 去掉默认外边距 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
    /* 添加其他美化效果 */
    font-family: "微软雅黑"; /* 自定义字体 */
}

ion-card {
    background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
    border-radius: 10px; /* 圆角边框 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

ion-card-title {
    font-size: 1.5em; /* 标题字体大小 */
    font-weight: bold; /* 加粗 */
    color: #00796b; /* 深绿色字体，象征健康 */
    margin: 0; /* 去掉默认的外边距 */
}

ion-card-subtitle {
    font-size: 1.2em; /* 副标题字体大小 */
    color: #004d40; /* 更深的绿色字体 */
    margin-top: 5px; /* 顶部外边距 */
}

ion-card:hover {
    background-color: #b2ebf2; /* 悬停时的背景色变化 */
    transition: background-color 0.3s; /* 背景色变化的过渡效果 */
}
.memo-card {
    background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
    border-radius: 10px; /* 圆角边框 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

.memo-title {
    font-size: 1.8em; /* 标题字体大小 */
    font-weight: bold; /* 加粗 */
    color: #00796b; /* 深绿色字体，象征健康 */
    margin: 15px 0; /* 顶部和底部外边距 */
}

.memo-description {
    font-size: 1.1em; /* 描述字体大小 */
    color: #004d40; /* 更深的绿色字体 */
    margin-bottom: 20px; /* 底部外边距 */
}

.tag-list {
    list-style-type: none; /* 去掉默认的列表样式 */
    padding: 0; /* 去掉内边距 */
}

.tag-item {
    background-color: #b2ebf2; /* 标签背景色 */
    color: #00796b; /* 标签字体颜色 */
    border-radius: 5px; /* 标签圆角 */
    padding: 10px; /* 标签内边距 */
    margin: 5px 0; /* 标签外边距 */
    transition: background-color 0.3s; /* 背景色变化的过渡效果 */
    cursor: pointer; /* 鼠标悬停时显示为可点击 */
}

.tag-item:hover {
    background-color: #80deea; /* 悬停时的背景色变化 */
}
.card-header {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 10px; /* 内边距 */
}

.avatar {
    width: 50px; /* 头像宽度 */
    height: 50px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    margin-right: 15px; /* 头像与文本之间的间距 */
    object-fit: cover; /* 确保图片覆盖区域并保持比例 */
}

.user-info {
    flex: 1; /* 使用户信息部分占据剩余空间 */
}