|
@@ -160,57 +160,207 @@ ion-toolbar {
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
// hot-articles.component.scss
|
|
|
+/* 全局样式 */
|
|
|
+ion-content {
|
|
|
+ background: #f4f4f4;
|
|
|
+}
|
|
|
+
|
|
|
+/* 热门文章容器样式 */
|
|
|
.hot-articles-container {
|
|
|
padding: 16px;
|
|
|
+ background-color: #f5ebe0;
|
|
|
+ margin-bottom: 0; // 确保没有额外的底部间隔
|
|
|
+}
|
|
|
|
|
|
- .section-title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 16px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+.hot-articles-container h2 {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 文章列表样式 */
|
|
|
+ion-list {
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 文章项样式 */
|
|
|
+ion-item {
|
|
|
+ --background: transparent;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
+}
|
|
|
+
|
|
|
+ion-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+ion-label {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
|
|
|
- ion-list {
|
|
|
- ion-item {
|
|
|
- --padding-start: 0;
|
|
|
- --inner-padding-end: 16px;
|
|
|
- border-bottom: 1px solid #e6e6e6;
|
|
|
+ion-label h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-label p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
+/* 按钮样式 */
|
|
|
+ion-button {
|
|
|
+ --background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+ion-icon {
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.featured-activity {
|
|
|
+ display: flex; // 使用flex布局来居中卡片
|
|
|
+ justify-content: center; // 水平居中
|
|
|
+ align-items: center; // 垂直居中
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #f5ebe0;
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ ion-card {
|
|
|
+ display: flex; // 使用flex布局来调整图片和文本的布局
|
|
|
+ flex-direction: column; // 默认是垂直布局
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 500px; // 限制卡片的最大宽度,根据需要调整
|
|
|
+
|
|
|
+ ion-card-header {
|
|
|
+ ion-card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center; // 标题居中
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-card-content {
|
|
|
+ padding: 8px;
|
|
|
+ display: flex; // 使用flex布局来调整图片和文本的布局
|
|
|
+ flex-direction: column; // 默认是垂直布局
|
|
|
+ align-items: center; // 图片和文本居中对齐
|
|
|
+
|
|
|
+ ion-grid {
|
|
|
+ width: 100%; // 确保网格占满卡片宽度
|
|
|
|
|
|
- ion-thumbnail {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- margin-right: 16px;
|
|
|
+ ion-row {
|
|
|
+ align-items: center;
|
|
|
|
|
|
- img {
|
|
|
- border-radius: 8px;
|
|
|
+ ion-col.size-4 {
|
|
|
+ ion-thumbnail {
|
|
|
+ img {
|
|
|
+ border-radius: 4px;
|
|
|
+ width: 50%; // 图片宽度为所在列的一半
|
|
|
+ height: auto; // 高度自适应
|
|
|
+ max-height: 150px; // 可选,限制图片的最大高度
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-col.size-8 {
|
|
|
+ text-align: center; // 文本居中
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 4px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-button {
|
|
|
+ font-size: 12px;
|
|
|
+ --ion-color-primary: rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.featured-activity {
|
|
|
+ display: flex; // 使用flex布局来居中卡片
|
|
|
+ justify-content: center; // 水平居中
|
|
|
+ align-items: center; // 垂直居中
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #f5ebe0;
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- ion-label {
|
|
|
- h3 {
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
+ ion-card {
|
|
|
+ display: flex; // 使用flex布局来调整图片和文本的布局
|
|
|
+ flex-direction: column; // 默认是垂直布局
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 500px; // 限制卡片的最大宽度,根据需要调整
|
|
|
|
|
|
- p {
|
|
|
- color: #666;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ ion-card-header {
|
|
|
+ ion-card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-card-content {
|
|
|
+ padding: 8px;
|
|
|
+ display: flex; // 使用flex布局来调整图片和文本的布局
|
|
|
+ flex-direction: column; // 默认是垂直布局
|
|
|
+ align-items: center; // 图片和文本居中对齐
|
|
|
+
|
|
|
+ ion-grid {
|
|
|
+ width: 100%; // 确保网格占满卡片宽度
|
|
|
+
|
|
|
+ ion-row {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ ion-col.size-4 {
|
|
|
+ ion-thumbnail {
|
|
|
+ img {
|
|
|
+ border-radius: 4px;
|
|
|
+ width: 50%; // 图片宽度为所在列的一半
|
|
|
+ height: auto; // 高度自适应
|
|
|
+ max-height: 150px; // 可选,限制图片的最大高度
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-col.size-8 {
|
|
|
+ text-align: center; // 文本居中
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
|
|
|
- ion-button {
|
|
|
- --border-radius: 50%;
|
|
|
- --padding-start: 8px;
|
|
|
- --padding-end: 8px;
|
|
|
- --background: rgba(0, 0, 0, 0.1);
|
|
|
- color: #444;
|
|
|
+ p {
|
|
|
+ margin: 4px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
|
|
|
- ion-icon {
|
|
|
- font-size: 18px;
|
|
|
+ ion-button {
|
|
|
+ font-size: 12px;
|
|
|
+ --ion-color-primary: rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|