|
@@ -1,18 +1,178 @@
|
|
|
-/* Scoped components require higher specificity to customize */
|
|
|
-ion-searchbar.custom {
|
|
|
- --background: #19422d;
|
|
|
- --color: #fff;
|
|
|
- --placeholder-color: #c83131;
|
|
|
- --icon-color: #fff;
|
|
|
- --clear-button-color: #fff;
|
|
|
-
|
|
|
- --border-radius: 4px;
|
|
|
+// 工具栏样式
|
|
|
+ion-toolbar {
|
|
|
+ --background: transparent;
|
|
|
+ --min-height: 60px;
|
|
|
+ padding: 8px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-toolbar {
|
|
|
+ --background: transparent;
|
|
|
+ background-color: #fefae0;
|
|
|
+ padding: 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索框样式
|
|
|
+.weather-col {
|
|
|
+ --border-radius: 10px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+.searchbar {
|
|
|
+ --background: rgba(255, 255, 255, 0.7);
|
|
|
+ --border-radius: 20px;
|
|
|
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
+ --padding-start: 16px;
|
|
|
+ --padding-end: 16px;
|
|
|
+ --placeholder-color: #333;
|
|
|
+ width: 200px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+// 内容容器样式
|
|
|
+.main-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #faedcd;
|
|
|
+ padding: 16px;
|
|
|
+ overflow: hidden; // 确保内容不会超出圆角区域
|
|
|
+}
|
|
|
+
|
|
|
+.content-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%; // 使用100%宽度而不是fit-content
|
|
|
+ border-radius: 20px; // 设置圆角
|
|
|
+ background-color: rgba(255, 255, 255, 0.2); /* 半透明的白色背景 */
|
|
|
+ padding: 1px; /* 减少内边距以避免间隔过大 */
|
|
|
+ box-shadow: none;
|
|
|
+ margin: 0 auto;
|
|
|
+ // 添加额外的样式以确保圆角显示
|
|
|
+ position: relative;
|
|
|
+ z-index: 1; // 如果需要的话,提高z-index
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); // 可选,添加阴影效果
|
|
|
+ z-index: -1; // 确保它位于内容下方
|
|
|
}
|
|
|
-
|
|
|
- ion-searchbar.ios.custom {
|
|
|
- --cancel-button-color: #19422d;
|
|
|
+}
|
|
|
+
|
|
|
+/* image-with-button.component.scss */
|
|
|
+.image-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 500px;
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: block;
|
|
|
}
|
|
|
-
|
|
|
- ion-searchbar.md.custom {
|
|
|
- --cancel-button-color: #336959;
|
|
|
- }
|
|
|
+
|
|
|
+ .play-button {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 30px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.15);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 特性卡片样式
|
|
|
+.feature-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.card-section {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 16px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.app-feature-card {
|
|
|
+ --background: #fefae0;
|
|
|
+ --color: #ccd5ae;
|
|
|
+ --min-height: 80px;
|
|
|
+ --border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ transition: color 0.3s ease, box-shadow 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ font-family: "Poppins", sans-serif;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.app-feature-card:hover,
|
|
|
+.app-feature-card:active {
|
|
|
+ --color: #ccd5ae;
|
|
|
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.app-feature-card .card-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.app-feature-card ion-icon {
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.app-feature-card .card-label {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+// hot-articles.component.scss
|
|
|
+.hot-articles-container {
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-list {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-item {
|
|
|
+ --background: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+}
|