myapp_lifevault/src/app/tab3/tab3.page.scss

.profile {

  
    .card-grid{
      display: flex !important;
      margin-top: 50px;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      width: 100vw;
      font-size: 0.8rem;
      .card{
        display: flex;
        width:45vw;
        height:100px;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 15px;
        color:#FFFFFF;
        .left > .top{
          font-size: 2rem;
          background-color: #FFFFFF;
          width:35px;
          height:35px;
          padding:5px;
          border-radius: 50%;
        }
        .left{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 50%;
          height:100%;

        }
        .right{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 50%;
          height:100%;

        }
        .title{
          font-size: 0.8rem;
        }
        .top{
          display: flex;
          justify-content: center;
          align-items: center;
          height:50%;
          width: 100%;
        }
        .bottom{
          display: flex;
          justify-content: center;
          align-items: center;
          height:50%;
          width: 100%;
          .button{
            border:solid 1px;
            border-color: #FFFFFF;
            border-radius: 15px;
            padding:3px 5px;
          }
        }
      }
      .orange{
        ion-icon{
          color:#D47B63;
        }
        background: linear-gradient(57deg,#D47B63 0%,#E3A83E 100%); 
      }
      .blue{
        ion-icon{
          color:#7087EB;
        }
        background: linear-gradient(90deg,#7087EB 0%,#9FBDE9 100%); 
      }
      .purple{
        ion-icon{
          color:#B726E6;
        }
        background: linear-gradient(90deg,#B726E6 0%,#EE82EE 100%); 
      }
      .red{
        ion-icon{
          color:#D48FAB;
        }
        background: linear-gradient(172deg,#D48FAB 0%,#783148 100%); 
      }
    }


    ion-card {
      margin-bottom: 20px;
  
      .profile-info {
        display: flex;
        align-items: center;
  
        .avatar {
          margin-right: 10px;
        }
  
        .details {
          flex: 1;
        }
      }
    }
  }
  .small-card {
    width: 90%; /* 设置卡片宽度为页面宽度的80% */
    margin: 0 auto; /* 水平居中显示 */
    margin-top: 20px; /* 设置上边距为20像素 */
  }