feat:update

src/app/tab3/tab3.page.html

@@ -28,7 +28,7 @@
           <input type="file" #fileInput (change)="onFileSelected($event)" style="display: none">
 
         </ion-col> 
-        <ion-col size="auto" class="info-col">
+        <ion-col size="auto" class="info-col" style="margin-left: 30px;">
           <ion-label><h1>{{user?.get('username') || '未登录'}}</h1></ion-label>
           <ion-label>ID: {{user?.id || '-'}}</ion-label>
           &nbsp;
@@ -85,17 +85,20 @@
       </div>
     </ion-card>
   
-    <ion-item  *ngIf="currentTab === 'published'" >
-      <ion-card *ngFor="let CreatContent of InputContentsList" class="custom-card">
-        <img *ngIf="!hasData"  src="https://gd-hbimg.huaban.com/068da346d1fbca8edd952fb7e77b0eb0468ac03512a0f-Rm3mAD_fw658webp" class="img-center" style="width: 300px; height: 300px;">
-        <div class="center-text" *ngIf="!hasData">暂无内容</div>
-        <ion-card-header class="custom-header">
-         {{CreatContent.get("title")}}
-        </ion-card-header>
-        <ion-card-content class="custom-content">
-          {{CreatContent.get("contents")}}
-        </ion-card-content>
-      </ion-card>    
+
+    <ion-item *ngIf="currentTab === 'published'" class="custom-title">
+      <ion-row>
+        <ion-col size="6" *ngFor="let CreatContent of InputContentsList" class="custom-col">
+          <ion-card class="custom-card">
+            <img *ngIf="!hasData" src="https://gd-hbimg.huaban.com/068da346d1fbca8edd952fb7e77b0eb0468ac03512a0f-Rm3mAD_fw658webp" class="img-center" style="width: 100%; height: 200px;">
+            <div class="center-text" *ngIf="!hasData">暂无内容</div>
+            <h2 class="custom-header">
+              {{CreatContent.get("title")}}
+            </h2>
+            <p>{{CreatContent.get("contents")}}</p>
+          </ion-card>
+        </ion-col>
+      </ion-row>
     </ion-item>
   
     <div *ngIf="currentTab === 'liked'">

src/app/tab3/tab3.page.scss

@@ -85,20 +85,33 @@
   padding: 10px 0; /* 设置底部容器内边距 */
 }
 
+
+.custom-title {
+  ion-row {
+    ion-col {
+      padding: 5px;
+    }
+  }
+}
+
 .custom-card {
-  width: 800px;
-  height: 200px;
+  margin: 0;
+  padding: 10px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .custom-header {
-  width: 100px;
   font-size: 18px;
   font-weight: bold;
 }
 
-.custom-content {
-  font-size: 14px;
+.center-text {
+  text-align: center;
+}
+
+.custom-col {
+  display: flex;
+  justify-content: center;
 }