lifepartner/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; /* 使用户信息部分占据剩余空间 */
}

ion-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68vh; /* 使内容区域高度为视口高度 */
}

.login-card {
    width: 94%; /* 可以根据需要调整宽度 */
    max-width: 400px; /* 设置最大宽度以避免过宽 */
    text-align: center; /* 文本居中 */
    padding: 10px; /* 添加内边距 */
}

.image-container {
    width: 100%; /* 图片容器宽度100% */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    margin-top: 10px; /* 上方间距 */
}

.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.stats-card {
    margin: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: white;
}

.stats-title {
    padding: 16px 16px 8px;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
}

.stats-description {
    padding: 0 16px 16px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    padding: 16px;
}

.stats-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

.stats-icon {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.stats-content {
    h3 {
        margin: 0;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.9);
    }

    p {
        margin: 4px 0 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: white;
    }
}