|
@@ -1,3 +1,7 @@
|
|
|
+/* 设置页面背景色 */
|
|
|
+ion-content {
|
|
|
+ --background: #f9f9f9; /* 设置内容背景色 */
|
|
|
+}
|
|
|
ion-avatar {
|
|
|
width: 50px; /* 或者你需要的任何尺寸 */
|
|
|
height: 50px; /* 保持宽高一致,避免变形 */
|
|
@@ -11,4 +15,37 @@ ion-avatar {
|
|
|
width: 100%;
|
|
|
height: auto; /* 保持图片比例 */
|
|
|
border-radius: 50%; /* 可选:将图片设置为圆形 */
|
|
|
- }
|
|
|
+ }
|
|
|
+ /* 设置搜索框的样式 */
|
|
|
+ ion-searchbar {
|
|
|
+ padding: 10px; /* 内边距 */
|
|
|
+ border-radius: 4px; /* 圆角 */
|
|
|
+ font-size: 16px; /* 字体大小 */
|
|
|
+ }
|
|
|
+ /* 设置卡片的样式 */
|
|
|
+ ion-card {
|
|
|
+ margin: 10px; /* 卡片之间的间距 */
|
|
|
+ border-radius: 10px; /* 圆角效果 */
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
|
|
|
+ }
|
|
|
+ ion-card-title {
|
|
|
+ font-weight:bold;
|
|
|
+ }
|
|
|
+ ion-card-header {
|
|
|
+ --background: #ffffff; /* 使用CSS变量设置背景颜色为白色 */
|
|
|
+ /* 或者,如果你不使用CSS变量,可以直接使用background-color属性 */
|
|
|
+ position: relative; /* 设置相对定位 */
|
|
|
+ }
|
|
|
+ ion-toolbar {
|
|
|
+ --background: #ffffff; /* 同样使用CSS变量,但通常不是必需的 */
|
|
|
+ }
|
|
|
+ /* 设置列表项的样式 */
|
|
|
+ ion-item {
|
|
|
+ margin: 5px 0; /* 列表项之间的间距 */
|
|
|
+ }
|
|
|
+ ion-button {
|
|
|
+ font-size: 15px; /* 增大字体大小 */
|
|
|
+ margin-top: 8px; /* 上间距,仅在需要时添加 */
|
|
|
+ text-transform: none; /* 按钮文字不变形 */
|
|
|
+ height: 35px;
|
|
|
+}
|