app-gift/app-angular/src/modules/lesson/me/me.component.scss

ion-content {
    height: calc(100vh - 121px) !important;
}

ion-item {
    ion-icon {
        margin-right: 9px;
    }

    font-size: 0.9rem;
}
.foodContent {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myList {
    padding: 0%;

    ion-list {
        margin: 0%;
    }
}
.reminder-item {
    padding: 0%;

    ion-list {
        margin: 0%;
    }
}
.roleCard {
    margin: 0px;
}
.metadata-end-wrapper {
    position: absolute;

    bottom: 0px;
    inset-inline-end: 6px;

    font-size: 0.6rem;

    display: flex;
    align-items: center;
}
.metadata-end-wrapper-science {
    position: absolute;

    top: 0px;
    inset-inline-end: 0px;

    font-size: 0.6rem;

    display: flex;
    align-items: center;

}
ion-avatar img {  
    width: 50px;  
    height: 50px;  
    object-fit: cover; /* 保持图片的宽高比 */  
}
.bold-text {  
    font-weight: bold; /* 加粗 */  
    color: black; /* 黑色 */  
}  

.small-orange-text {  
    font-size: 0.8em; /* 小一号字体 */  
    color: orange; /* 橘色 */  
}  
.bold-text2 {  
    
    color: rgb(40, 133, 248); /* 黑色 */  
}  

.small-orange-text2 {  
    font-size: 0.8em; /* 小一号字体 */  
    color: rgb(145, 146, 146); /* 橘色 */  
}  
.small-red-text {  
    font-size: 0.8em; /* 小一号字体 */  
    color: red; /* 红色 */  
}  
.larger-font {  
    font-size: 1.2em;}
    .item-with-padding {  
    padding-left: 16px; /* 左侧内边距 */  
    padding-right: 16px; /* 右侧内边距 */  
  }  
 .ion-padding{
    background-color: #eff6f7 !important; 
 }
 .days-badge {  
    /* 字体大小和粗细 */  
    font-size: 0.8em; /* 字体小一号，这里使用了相对单位em，相对于父元素的字体大小 */  
    font-weight: 300; /* 字体更细一些，这里使用了300，表示轻量字体 */  
      
    /* 其他样式 */  
    --background: rgb(255, 170, 0); /* 背景颜色 */  
    --color: #fff; /* 文本颜色 */  
    margin-left: auto; /* 使徽章与左侧内容保持尽可能远的距离 */  
    margin-right: 16px; /* 右边距，可以根据需要调整 */  
    padding: 4px 8px; /* 内边距，可以根据需要调整 */  
    border-radius: 4px; /* 圆角，可以根据需要调整 */  
  }
 
  

.card-container {
    width: 100%;
}

.card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile {
    text-align: center;
    display: flex;    
    flex-direction: column;    
    align-items: center; 
}

ion-avatar {
    margin-bottom: 10px; /* 头像和名字之间的间距 */
}