myapp_lifevault/card.html

 <!-- 卡片区域 -->

 <div class="card-grid">
    <div class="card orange"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

  <style>
    
.card-gird{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 400px;
  .card{
    width:40%;
    height:100px;
    min-height: 100px;
  }
  .orange{
    background: linear-gradient(57deg,#CB6A50 0%,#D99B2E 100%); 
  }
}



.profile {
    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像素 */
  }
  </style>