


.profile {
  .custom-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 5px;
    // background-color: #ffc107;
    border-radius: 5px;
    display: flex;
    justify-content: space-between; // 让左右两个元素分开
    align-items: center;
    
    .right {
      width: 150px; // 设置宽度为150px
      // 或者可以尝试设置高度
       height: 20px; // 设置高度为30px
    }

    .title {
      font-weight: bold;
    }
    &.orange {
      background: linear-gradient(57deg, #D47B63 0%, #E3A83E 100%);
      width: 160px;
      ion-icon {
        color: #D47B63;
       
      }
    }
  }

  
    .card-grid{
      display: flex !important;
      margin-top: 50px;
      margin-left: 6px;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      width: 96vw;
      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,#e7927b 0%,#ecb959 100%); 
      }
      .blue{
        ion-icon{
          color:#7087EB;
        }
        background: linear-gradient(90deg,#7087EB 0%,#9FBDE9 100%); 
      }
      .purple{
        ion-icon{
          color:#B726E6;
        }
        background: linear-gradient(90deg,#c96ee7 0%,#fd9be8 100%); 
      }
      .red{
        ion-icon{
          color:#D48FAB;
        }
        background: linear-gradient(172deg,#e7a5bf 0%,#dd5d86 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像素 */
  }

  //下方列表
    .first_box {
      padding: 0% 4%;

  
      .item {
        color: #333;
        display: flex;
        justify-content: space-between;
        padding: 3% 5%;
        background-color: #fdf9e6;
        // border-radius: 15px 15px 0 0;
        font-size: 16px;
  
        .item_detail {
          display: flex;
          width: 100%;
  
          .item_icon {
            margin-top: 0.5%;
          }
  
          .item_title {
            margin-left: 5%;
          }
        }
  
        .item_go {
          margin-top: 0.5%;
        }
      }
  
      .item_top {
        border-radius: 15px 15px 0 0;
        margin-top: 5.2%;
      }
  
      .item_center {
        border-radius: 0 0 0 0;
        margin-top: 0.2%;
      }
  
      .item_buttom {
        border-radius: 0 0 15px 15px;
        margin-top: 0.2%;
      }

      .custom-background {
        background-image: url('/assets/img/huiyuan.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 可根据需要添加其他样式 */
    }
  
    }
    
