src/app/tab3/tab3.page.html

@@ -13,17 +13,18 @@
 <ion-content>
   <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
   <ion-card>
-    <ion-card-header>
+    <ion-card-header class="card">
       <ion-card-title>最新推荐</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-avatar slot="start">
+      <ion-avatar>
         <ion-img src="https://wx4.sinaimg.cn/mw690/006GBbhsgy1hqa92rfo7tj30qo0qo76t.jpg"></ion-img>
       </ion-avatar>
       <ion-label>用户名</ion-label><br>
       <ion-label>标签</ion-label><br>
       <ion-label>聊天内容</ion-label>
-      <ion-button expand="block">免费提问</ion-button>
+      <ion-button>免费提问</ion-button>
+    </ion-card-header>
+    <ion-card-content >
+      
     </ion-card-content>
   </ion-card>
   <div style="display: flex; flex-direction: column;">

src/app/tab3/tab3.page.scss

@@ -10,3 +10,86 @@ ion-card-title {
 ion-avatar {
   margin-right: 10px;
 }
+.card {
+  width: 365px;
+  height: 250px;
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+  border-radius: 8px;
+  color: white;
+  overflow: hidden;
+  position: relative;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+  cursor: pointer;
+}
+
+.card-content {
+  padding: 20px;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+}
+
+.card-content .card-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: inherit;
+  text-transform: uppercase;
+}
+
+.card-content .card-para {
+  color: inherit;
+  opacity: 0.8;
+  font-size: 14px;
+}
+
+.card:hover {
+  transform: rotateY(10deg) rotateX(10deg) scale(1.05);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+  z-index: 1;
+}
+
+.card:hover:before {
+  transform: translateX(-100%);
+}
+
+.card:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+  z-index: 1;
+}
+
+.card:hover:after {
+  transform: translateX(100%);
+}
+
+
+
+
+