feat: new tab3 card-grid with grientcolor

card.html

@@ -0,0 +1,54 @@
+ <!-- 卡片区域 -->
+
+ <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>

src/app/tab3/tab3.page.html

@@ -41,6 +41,52 @@
     <img src="/assets/img/huiyuan.png" alt="Card 3">
   </ion-card>
  
+
+  <!-- 卡片区域 -->
+
+  <div class="card-grid">
+    <div class="card orange">
+      <div class="left">
+        <div class="top"><ion-icon name="card-outline"></ion-icon></div>
+        <div class="bottom"><span class="title">银行卡</span></div>
+      </div>
+      <div class="right">
+        <div class="top"><span class="title">2个</span></div>
+        <div class="bottom"><span class="button">查看详情</span></div>
+      </div>
+    </div>
+    <div class="card blue">
+      <div class="left">
+        <div class="top"><ion-icon name="wallet-outline"></ion-icon></div>
+        <div class="bottom"><span class="title">银行卡</span></div>
+      </div>
+      <div class="right">
+        <div class="top"><span class="title">2个</span></div>
+        <div class="bottom"><span class="button">查看详情</span></div>
+      </div>
+    </div>
+    <div class="card purple">
+      <div class="left">
+        <div class="top"><ion-icon name="diamond-outline"></ion-icon></div>
+        <div class="bottom"><span class="title">银行卡</span></div>
+      </div>
+      <div class="right">
+        <div class="top"><span class="title">2个</span></div>
+        <div class="bottom"><span class="button">查看详情</span></div>
+      </div>
+    </div>
+    <div class="card red">
+      <div class="left">
+        <div class="top"><ion-icon name="newspaper-outline"></ion-icon></div>
+        <div class="bottom"><span class="title">银行卡</span></div>
+      </div>
+      <div class="right">
+        <div class="top"><span class="title">2个</span></div>
+        <div class="bottom"><span class="button">查看详情</span></div>
+      </div>
+    </div>
+  </div>
+
   <!-- 卡片二 -->
   <ion-card style=" margin: 50px auto;">
     <ion-card-content>
@@ -76,4 +122,7 @@
       </ion-grid>
     </ion-card-content>
   </ion-card>
+
+
+  
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -1,4 +1,103 @@
+
+
+
 .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:120px;
+        padding: 20px;
+        border-radius: 5px;
+        margin-bottom: 15px;
+        color:#FFFFFF;
+        .left > .top{
+          font-size: 2rem;
+          background-color: #FFFFFF;
+          width:45px;
+          height:45px;
+          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: 1.2rem;
+        }
+        .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;