src/app/creator/creator.page.html

@@ -1,13 +1,85 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>creator</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title>创作者中心</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<!-- <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">creator</ion-title>
     </ion-toolbar>
   </ion-header>
+</ion-content> -->
+
+
+<ion-content>
+  <div class="creator-info">
+    <div class="profile">
+      <ion-avatar>
+        <img src="avatar.jpg"> <!-- 头像图片 -->
+      </ion-avatar>
+      <ion-label class="nickname">0105</ion-label> <!-- 昵称 -->
+    </div>
+    <div class="stats">
+      <ion-label class="label-icon"><ion-icon name="thumbs-up-outline"></ion-icon> 点赞数：300</ion-label>
+      <ion-label class="label-icon"><ion-icon name="eye-outline"></ion-icon> 浏览量：6000</ion-label>
+      <ion-label class="label-icon"><ion-icon name="star-outline"></ion-icon> 最佳作品点赞数：150</ion-label>
+      <ion-label class="label-icon"><ion-icon name="cash-outline"></ion-icon> 收入：2000元</ion-label>
+    </div>
+</div>
+
+  <div class="best-works">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>最佳作品</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 最佳作品列表 -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="exclusive-services">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>专属服务</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-label>专属服务内容：</ion-label>
+        <ion-label>1. 学创作</ion-label>
+        <ion-label>2. 任务中心</ion-label>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="tools-resources">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>创作工具和资源</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 创作工具和资源列表 -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="community-interaction">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>创作者社区和互动</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-button expand="block" fill="clear" (click)="goToCommunity()">
+          <ion-icon name="people-outline"></ion-icon>
+          创作者社区
+        </ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
 </ion-content>
+
+

src/app/creator/creator.page.scss

@@ -0,0 +1,23 @@
+.creator-info {
+  //background-image: url('../assets/img/paint.png'); /* 背景图片路径 */
+  background-size: cover;
+  background-position: center;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.profile {
+  /* 个人信息样式 */
+}
+
+.stats {
+  /* 统计信息样式 */
+}
+
+.nickname {
+  color: black; /* 昵称文字颜色 */
+}
+
+.label-icon {
+  color: black; /* 图标和文字颜色 */
+}

src/app/creator/creator.page.ts

@@ -7,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CreatorPage implements OnInit {
 
+  goToCommunity(){
+    
+  }
   constructor() { }
 
   ngOnInit() {

src/app/tab4/tab4.page.html

@@ -53,6 +53,7 @@
 </ion-grid>
     
     <ion-card-content>
+      
     <ion-segment-button value="creators" (click)="openLogin2Page()">
       <ion-icon name="color-palette-outline"></ion-icon>
       创作者中心

src/app/tab4/tab4.page.scss

@@ -26,17 +26,6 @@ ion-segment-button {
   padding: 10px 0px; /* 设置按钮内边距，增加按钮的大小 */
 }
 
-ion-segment {
-  scrollbar-width: none; /* 隐藏滚动条（适用于部分浏览器） */
-  -ms-overflow-style: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
-  &::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条（适用于 Chrome 和 Safari） */
-  }
-  &::-ms-overflow-style {
-    display: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
-  }
-}
-
 
 p {
   font-size: 20px; /* 设置文字大小为20px */

src/modules/user/login/login.page.html

@@ -4,13 +4,13 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="centered-card">
 
+  <div class="container">
   <ion-card>
     <ion-card-header>
       <ion-card-title>登录/注册</ion-card-title>
     </ion-card-header>
-  
     <ion-card-content>
 
       <ion-list [inset]="true">
@@ -21,13 +21,18 @@
           <ion-input [(ngModel)]="password" label="密码" type="password" placeholder="请输入密码"></ion-input>
         </ion-item>
       </ion-list>
-     
+
     </ion-card-content>
   
     <ion-button (click)="login()" fill="clear">登录</ion-button>
     <ion-button (click)="register()" fill="clear">注册</ion-button>
-  </ion-card>
 
-  <!-- 新增路由返回逻辑，执行back函数 -->
+    <!-- 新增路由返回逻辑，执行back函数 -->
   <ion-button expand="block" (click)="back()">返回</ion-button>
-</ion-content>
+
+    
+  </ion-card>
+    </div>
+  </ion-content>
+
+  

src/modules/user/login/login.page.scss

@@ -0,0 +1,14 @@
+ion-card-title{
+    text-align: center;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 60vh;
+}
+.centered-card{
+    height:400px;
+}