0225244 4 months ago
parent
commit
a690c19b04

+ 10 - 1
src/app/tab1/tab1.page.html

@@ -1,5 +1,9 @@
+html
 <ion-header [translucent]="true">
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <div></div>
+    </ion-buttons>
     <ion-title>
       聊天
     </ion-title>
@@ -55,9 +59,14 @@
         </div>
       </ion-col>
     </ion-row>
+    <div class="circles">
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
     <ion-row>
       <ion-col size="12">
-        <img src="assets/images/oldman.png" alt="Example Image">
+        <img src="assets/images/oldman.png" alt="Footer Image" class="footer-image"/>
       </ion-col>
     </ion-row>
   </ion-grid>

+ 59 - 0
src/app/tab1/tab1.page.scss

@@ -54,4 +54,63 @@
       margin-top: 20px;
       border-radius: 10px;
     }
+  }ion-header {
+    ion-toolbar {
+      display: flex;
+      justify-content: center;
+      position: relative;
+  
+      ion-buttons {
+        position: absolute;
+        &.slot-start {
+          left: 0;
+        }
+        &.slot-end {
+          right: 0;
+        }
+      }
+  
+      ion-title {
+        text-align: center;
+        flex: 1;
+      }
+    }
+  }
+
+
+
+  
+  .circles {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    
+    .circle {
+      width: 20px;
+      height: 20px;
+      background-color: #000;
+      border-radius: 50%;
+      margin: 0 10px;
+      animation: pulse 2s infinite;
+    }
+  
+    .circle:nth-child(2) {
+      animation-delay: 0.4s;
+    }
+  
+    .circle:nth-child(3) {
+      animation-delay: 0.8s;
+    }
+  }
+  
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.5);
+    }
+    100% {
+      transform: scale(1);
+    }
   }

+ 3 - 1
src/app/tab3/tab3.page.scss

@@ -25,4 +25,6 @@ ion-item {
   
   ion-item:hover {
     transform: scale(1.1);
-  }
+  }
+  ion-content {
+    --background: linear-gradient(to bottom, #FFD700, #FFE5B4); /* 舒适的金色背景 */}

+ 2 - 0
src/modules/user/mine/mine.page.scss

@@ -0,0 +1,2 @@
+ion-content {
+    --background: linear-gradient(to bottom, #FFD700, #FFE5B4); /* 舒适的金色背景 */}