|
@@ -2,8 +2,8 @@
|
|
|
|
|
|
/* 设置全局样式 */
|
|
|
ion-header {
|
|
|
- background-color: #f8f9fa; /* 浅色背景 */
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
|
|
|
+ background-color: #4a90e2; /* 深蓝色背景 */
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影 */
|
|
|
}
|
|
|
|
|
|
ion-toolbar {
|
|
@@ -12,7 +12,7 @@ ion-toolbar {
|
|
|
|
|
|
ion-title {
|
|
|
font-size: 1.5rem; /* 增加标题字体大小 */
|
|
|
- color: #333; /* 深色字体 */
|
|
|
+ color: #ffffff; /* 白色字体 */
|
|
|
}
|
|
|
|
|
|
/* 内容样式 */
|
|
@@ -29,7 +29,7 @@ ion-list {
|
|
|
|
|
|
/* 每个新闻项 */
|
|
|
ion-item {
|
|
|
- background: white; /* 每个新闻项的背景 */
|
|
|
+ background: #ffffff; /* 每个新闻项的背景 */
|
|
|
border-radius: 8px; /* 圆角 */
|
|
|
margin-bottom: 16px; /* 下边距 */
|
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
|
|
@@ -56,20 +56,22 @@ ion-thumbnail img {
|
|
|
/* 标签样式 */
|
|
|
ion-label {
|
|
|
padding: 8px; /* 内边距 */
|
|
|
- color: #555; /* 标签颜色 */
|
|
|
+ color: #ffffff; /* 白色字体 */
|
|
|
+ background-color: #fcb3f8; /* 橙色背景 */
|
|
|
+ border-radius: 4px; /* 圆角 */
|
|
|
}
|
|
|
|
|
|
/* 标题样式 */
|
|
|
h2 {
|
|
|
font-size: 1.2rem; /* 标题字体大小 */
|
|
|
- color: #333; /* 深色字体 */
|
|
|
+ color: #3f51b5; /* 深蓝色字体 */
|
|
|
margin: 0; /* 去掉默认外边距 */
|
|
|
}
|
|
|
|
|
|
/* 日期样式 */
|
|
|
h3 {
|
|
|
font-size: 1rem; /* 日期字体大小 */
|
|
|
- color: #888; /* 灰色字体 */
|
|
|
+ color: #757575; /* 深灰色字体 */
|
|
|
margin: 4px 0; /* 上下边距 */
|
|
|
}
|
|
|
|
|
@@ -77,6 +79,15 @@ h3 {
|
|
|
p {
|
|
|
font-size: 0.9rem; /* 描述字体大小 */
|
|
|
line-height: 1.5; /* 行高 */
|
|
|
- color: #666; /* 中灰色字体 */
|
|
|
+ color: #424242; /* 深灰色字体 */
|
|
|
margin: 0; /* 去掉默认外边距 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加分隔线样式 */
|
|
|
+ion-item::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #e0e0e0; /* 分隔线颜色 */
|
|
|
+ margin: 8px 0; /* 上下边距 */
|
|
|
}
|