/* 设置页面背景色 */ ion-content { --background: #ffffff; /* 白色背景 */ } ion-card { margin: 10px; /* 卡片之间的间距 */ border-radius: 10px; /* 圆角效果 */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */ } ion-card-title { font-weight:bold; } .card-content-with-button { display: flex; justify-content: space-between; align-items: center; } .content-section { flex-grow: 1; } .button-section { margin-left: 10px; } /* 确保按钮文本正常横排 */ ion-button { white-space: nowrap; } /* 设置列表项的样式 */ ion-item { margin: 5px 0; /* 列表项之间的间距 */ } ion-title { font-size: 24px; /* 增大字体大小 */ font-weight: bold; /* 加粗 */ } /* 设置卡片的样式 */ ion-list { margin: 10px; /* 卡片之间的间距 */ border-radius: 10px; /* 圆角效果 */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */ } ion-button { font-size: 15px; /* 增大字体大小 */ margin-top: 8px; /* 上间距,仅在需要时添加 */ text-transform: none; /* 按钮文字不变形 */ height: 35px; } /* 设置列表项的样式 */ ion-item { margin: 5px 0; /* 列表项之间的间距 */ } /* 设置按钮的样式(如果按钮不在顶部方框内) */ ion-toolbar { margin: auto; } .title-text{ position: absolute; display: flex; left: 105px; margin: auto; top: 10px; color:rgb(69, 166, 180); } .custom-color { --background: rgb(69, 166, 180); --background-activated: rgba(69, 166, 180, 0.7); --color: white; } .butcolor{ color: rgb(69, 166, 180); }