s202226701040/smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.scss

/* 重置默认的内外边距，让页面布局更规整 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置页面整体字体为常见的无衬线字体，更清晰现代，类似今日头条风格 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #f4f6f8; /* 调整为更浅一点的背景色，使页面整体更柔和 */
    color: #212529; /* 文本颜色设为深灰色，提高可读性 */
    padding: 30px; /* 进一步增加页面整体的内边距，让文字与页面边缘有更多距离 */
}

ion-header {
    background-color: #fff; /* 头部栏背景设为白色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
}

// ion-toolbar {
//     padding: 15px 20px; /* 适当增大工具栏内边距，使元素布局更合理 */
// }

ion-title {
    font-size: 20px; /* 进一步增大标题字体大小，更醒目 */
    font-weight: 500; /* 加粗一点，突出重要性 */
}

/* 针对返回按钮的图标样式调整 */
.back-arrow-icon {
    color: #ccc; /* 将箭头颜色设为浅灰色 */
    font-size: 15px; /* 可根据实际情况调整箭头大小 */
}

/* 调整ion-toolbar相关样式，降低宽度并减少分割感 */
ion-toolbar {
    padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
    width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
    margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
    background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
    box-shadow: none; /* 去除阴影 */
}

ion-buttons ion-button {
    --background: transparent; /* 按钮背景设为透明 */
    --color: inherit; /* 继承父元素颜色（也就是图标设置的浅灰色） */
    border-radius: 0; /* 去除按钮圆角 */
    padding: 4px 8px; /* 适当减小按钮内边距，使按钮更紧凑 */
}
// ion-buttons ion-button {
//     --background: #007bff; /* 按钮背景色设为今日头条常用的主题色蓝色 */
//     --color: #fff; /* 按钮文字颜色设为白色，对比明显 */
//     border-radius: 4px; /* 按钮圆角，更美观 */
//     font-size: 16px; /* 增大按钮文字大小 */
//     padding: 8px 14px; /* 适当增大按钮内边距，调整大小 */
// }

ion-content {
    padding: 35px; /* 增大内容区域内边距，避免文字贴边 */
    background-color: #fff; /* 为内容区域设置白色背景，与整体区分更明显 */
    border-radius: 8px; /* 添加圆角效果，使内容区域更柔和 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
}

section.content {
    max-width: 768px; /* 限制内容宽度，避免在大屏幕上过度拉伸，类似今日头条文章排版 */
    margin: 0 auto; /* 让内容在页面中居中显示 */
    padding: 20px; /* 为文本内容添加内边距，加大与框的间距 */
    border: 1px solid #e0e0e0; /* 添加一个浅灰色的边框，框住文本内容 */
    border-radius: 6px; /* 给文本框添加圆角效果，使其更美观 */
}

h2 {
    font-size: 24px; /* 二级标题字体进一步增大，更突出 */
    font-weight: 600; /* 加粗，强调是重要板块标题 */
    color:#212529; /* 标题颜色设为蓝色，和按钮颜色呼应，凸显重要性 */
    text-align: center; /* 让 h2 标题内容在水平方向居中显示 */
    margin-bottom: 30px; /* 适当增大下方间距，以便为图片留出合适空间 */
}

h3 {
    font-size: 18px; /* 三级标题字体大小适当增大 */
    font-weight: 600; /* 加粗，体现层级关系 */
    margin-top: 20px; /* 每个三级标题上方有间距，区分不同板块 */
    margin-bottom: 12px; /* 下方也留一点间距和正文区分 */
    color: #333; /* 颜色比正文深一点，突出标题感 */
}

p {
    font-size: 16px; /* 增大正文段落字体大小，便于阅读 */
    line-height: 1.8; /* 进一步增加行高，提高阅读舒适度 */
    margin-bottom: 18px; /* 段落之间有一定间距，条理更清晰 */
}

.image-container {
    text-align: center;
    margin-bottom: 30px;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* 可选，圆角效果 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 可选，阴影效果 */
}
/* 标题下方的实线样式 */
.title-line {
    border-bottom: 1px solid #000; /* 实线颜色为黑色，可根据需求修改 */
    width: 200px; /* 线的长度，可根据需求调整 */
    margin: 10px auto 15px; /* 上下外边距，使线与标题和来源文字有合适的间距 */
}

/* 来源文字的样式 */
.source {
    text-align: center;
    color: #666; /* 颜色为灰色，可根据需求修改 */
    font-size: 14px; /* 字体大小，可根据需求调整 */
}