|
@@ -1,24 +1,50 @@
|
|
|
- .card-container ion-card {
|
|
|
- margin: 5px; /* 或者更小的值 */
|
|
|
- }
|
|
|
- /*定义icon和文本居中放置*/
|
|
|
- ion-col {
|
|
|
- text-align: center; /* 使列内的文本和图标水平居中 */
|
|
|
- }
|
|
|
-
|
|
|
- ion-icon {
|
|
|
- display: inline-block; /* 确保图标作为内联块元素显示 */
|
|
|
- }
|
|
|
- ion-content {
|
|
|
- --background: #FEFAE0;
|
|
|
- }
|
|
|
- ion-item {
|
|
|
- --background: #FEFAE0;
|
|
|
- }
|
|
|
- ion-button {
|
|
|
- text-align: center; /* 使列内的文本和图标水平居中 */
|
|
|
- color: #FEFAE0;
|
|
|
- }
|
|
|
+.card-container ion-card {
|
|
|
+ margin: 5px; /* 或者更小的值 */
|
|
|
+
|
|
|
+}
|
|
|
+.information {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.rounded-avatar {
|
|
|
+ width: 85px;
|
|
|
+ height: 85px;
|
|
|
+ border-radius: 50%; /* 使头像变成圆形 */
|
|
|
+ overflow: hidden; /* 防止图片超出圆形边界 */
|
|
|
+}
|
|
|
+
|
|
|
+.rounded-avatar img {
|
|
|
+ width: 100%; /* 使图片充满整个ion-thumbnail */
|
|
|
+ height: 100%; /* 使图片充满整个ion-thumbnail */
|
|
|
+ object-fit: cover; /* 保持图片的比例,同时填充整个容器 */
|
|
|
+}
|
|
|
+
|
|
|
+/*定义icon和文本居中放置*/
|
|
|
+ion-col {
|
|
|
+ text-align: center; /* 使列内的文本和图标水平居中 */
|
|
|
+}
|
|
|
+ion-icon {
|
|
|
+ display: inline-block; /* 确保图标作为内联块元素显示 */
|
|
|
+}
|
|
|
+ion-content {
|
|
|
+ --background:#F5EBE0;
|
|
|
+}
|
|
|
+ion-item {
|
|
|
+ --background: #F5EBE0;
|
|
|
+}
|
|
|
+ion-button {
|
|
|
+ text-align: center; /* 使列内的文本和图标水平居中 */
|
|
|
+ color: #F5EBE0;
|
|
|
+}
|
|
|
+
|
|
|
+ion-card {
|
|
|
+ --background: #D6CCC2;
|
|
|
+ --color: #2f2f2f;
|
|
|
+}
|
|
|
+
|
|
|
+ion-card-title {
|
|
|
+ --color: #2f2f2f;
|
|
|
+}
|
|
|
+
|
|
|
h1 {
|
|
|
margin-bottom: -20px;
|
|
|
}
|