tab2

src/app/tab2/tab2.page.html

@@ -216,7 +216,9 @@
         </div>
         <div class="name-container">
           <ion-card-title class="title">{{ designer.username }}</ion-card-title>
-          <ion-button fill="clear" slot="end">关注</ion-button>
+          <ion-button fill="clear" slot="end" class="custom-button" (click)="toggleFollow()">
+            {{ isFollowing ? '已关注' : '关注' }}
+          </ion-button>
         </div>
       </ion-card-header>
       <ion-card-content>

src/app/tab2/tab2.page.scss

@@ -82,7 +82,4 @@ ion-button {
 ion-button:hover {
   background-color: #ffd4f0; /* 鼠标悬停时修改背景颜色 */
   color: #000000; /* 鼠标悬停时修改文字颜色 */
-}
-.custom-button {
-  font-size: 20px; /* 修改按钮内文字的字体大小 */
 }

src/app/tab2/tab2.page.ts

@@ -357,7 +357,8 @@ export class Tab2Page {
     // 添加更多设计师信息
   ];
   selectedDesignerSegment: string = 'designer';
-
+  isFollowing: boolean = false;
+  
   constructor(private sanitizer: DomSanitizer) {}
   selectedCompany: any;
 
@@ -368,7 +369,10 @@ toggleDetails(company: any) {
     this.selectedCompany = company;
   }
 }
-
+// 在组件类中实现一个方法来切换关注状态
+toggleFollow() {
+  this.isFollowing = !this.isFollowing;
+}
   formatHtmlContent(content: string): SafeHtml {
     const formattedContent = content.replace(/\n/g, '<br>');
     return this.sanitizer.bypassSecurityTrustHtml(formattedContent);