Bladeren bron

Merge branch 'master' of http://git.fmode.cn:3000/0225273/APPmy

0225268 4 maanden geleden
bovenliggende
commit
4d18938eb5
5 gewijzigde bestanden met toevoegingen van 105 en 70 verwijderingen
  1. 81 66
      src/app/tab1/tab1.page.html
  2. 13 0
      src/app/tab1/tab1.page.ts
  3. 2 2
      src/app/tab4/tab4.page.html
  4. 3 0
      src/app/tab4/tab4.page.scss
  5. 6 2
      src/app/tab4/tab4.page.ts

+ 81 - 66
src/app/tab1/tab1.page.html

@@ -8,74 +8,89 @@
 </ion-header>
 
 <ion-content>
-  <ion-grid>
 
-    <ion-row>
-      <ion-col size="12">
-        <!-- 搜索框 -->
-        <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
-      </ion-col>
-    </ion-row>
+  <!-- 顶部搜索栏 -->
+  <ion-searchbar></ion-searchbar>
 
-    <!-- 导航栏 -->
-    <ion-toolbar>
-      <ion-segment value="explore">
-        <ion-segment-button value="explore">
-          发现
-        </ion-segment-button>
-        <ion-segment-button value="video">
-          视频
-        </ion-segment-button>
-        <ion-segment-button value="search">
-          搜索
-        </ion-segment-button>
-      </ion-segment>
-    </ion-toolbar>
-
-    <!-- 功能栏 -->
-    <ion-row>
-      <ion-col size="4">
-        <!-- 轮播图 -->
-      </ion-col>
-      <ion-col size="4">
-        <!-- 案例设计 -->
-      </ion-col>
-      <ion-col size="4">
-        <!-- 一键寻宝 -->
-      </ion-col>
-    </ion-row>
+  <!-- 导航栏 -->
+  <ion-toolbar>
+    <ion-segment value="explore">
+      <ion-segment-button value="explore">
+        发现
+      </ion-segment-button>
+      <ion-segment-button value="video">
+        视频
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
 
-    <ion-row>
-      <ion-col size="4">
-        <!-- 装修百科 -->
-      </ion-col>
-      <ion-col size="4">
-        <!-- 买好货 -->
-      </ion-col>
-      <ion-col size="4">
-        <!-- 关注 -->
-      </ion-col>
-    </ion-row>
-  
-    <ion-row>
-      <ion-col size="4">
-        <!-- 推荐 -->
-      </ion-col>
-      <ion-col size="4">
-        <!-- 家居 -->
-      </ion-col>
-      <ion-col size="4">
-        <!-- 设计师 -->
-      </ion-col>
-    </ion-row>
-  
-    <ion-row>
-      <ion-col size="12">
-        <!-- 附近 -->
-      </ion-col>
-    </ion-row>
+  <!-- 功能模块 -->
+  <ion-segment scrollable>
+    <ion-segment-button value="example">
+      <ion-icon name="albums"></ion-icon>
+      案例设计
+    </ion-segment-button>
+    <ion-segment-button value="design">
+      <ion-icon name="brush"></ion-icon>
+      免费设计
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="construct"></ion-icon>
+      装修施工
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="bed"></ion-icon>
+      软装搭配
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="medkit"></ion-icon>
+      户型诊断
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="bonfire"></ion-icon>
+      全屋定制
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="library"></ion-icon>
+      干货百科
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="heart-circle"></ion-icon>
+      风格测试
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="home"></ion-icon>
+      设计我家
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="calculator"></ion-icon>
+      智能预算
+    </ion-segment-button>
+  </ion-segment>
 
-    
-  
-  </ion-grid>
+  <!-- 装修锦囊块 -->
+  <ion-card>
+    <ion-card-header>
+      装修锦囊
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 装修锦囊卡片 -->
+      <ion-card>
+        <ion-card-header>
+          <ion-icon name="logo"></ion-icon>
+          <ion-label>空间设计</ion-label>
+        </ion-card-header>
+        <ion-card-content>
+          <!-- 客厅怎么装card -->
+          <ion-card>
+            <ion-img src="assets/images/living_room.jpg"></ion-img>
+            <ion-card-header>
+              客厅怎么装
+            </ion-card-header>
+          </ion-card>
+          <!-- 其他装修卡片类似添加 -->
+        </ion-card-content>
+      </ion-card>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

+ 13 - 0
src/app/tab1/tab1.page.ts

@@ -6,7 +6,20 @@ import { Component } from '@angular/core';
   styleUrls: ['tab1.page.scss']
 })
 export class Tab1Page {
+  selectedSegment: string = 'company';
+
 
   constructor() {}
 
+  segmentChanged(event: CustomEvent) {
+    this.selectedSegment = event.detail.value;
+  }
+
+  contentList = [
+    { image: 'assets/images/image1.jpg', title: '示例标题1', user: '用户A', likes: 10, comments: 5, tags: '标签1, 标签2' },
+    { image: 'assets/images/image2.jpg', title: '示例标题2', user: '用户B', likes: 20, comments: 8, tags: '标签3, 标签4' },
+    // 添加更多示例数据
+  ];
+  
+
 }

+ 2 - 2
src/app/tab4/tab4.page.html

@@ -69,14 +69,14 @@
     </ion-card-content>
   </ion-card>
   
-  <ion-card>
+  
     <ion-card-content style="justify-content: space-around">
       <p (click)="showContent('发布')">发布</p>
       <p (click)="showContent('收藏')">收藏</p>
       <p (click)="showContent('点赞')">点赞</p>
       <p (click)="showContent('浏览')">浏览</p>
     </ion-card-content>
-  </ion-card>
+  
 
   <div class="content-area">
     {{ selectedContent }}

+ 3 - 0
src/app/tab4/tab4.page.scss

@@ -34,4 +34,7 @@ ion-segment {
 
 p {
   font-size: 20px; /* 设置文字大小为20px */
+}
+p:active {
+  color: blue; /* 点击后文本颜色变为蓝色 */
 }

+ 6 - 2
src/app/tab4/tab4.page.ts

@@ -8,11 +8,15 @@ import { NavController } from '@ionic/angular';
 })
 export class Tab4Page implements OnInit {
 
-  constructor(private navCtrl: NavController) {}
+  constructor(private navCtrl: NavController) {this.selectedContent = '发布';}
   selectedContent: string = '';
 
   showContent(content: string) {
-    this.selectedContent = content;
+    if (content === '收藏') {
+      this.selectedContent = '一个作品都没有';
+    } else {
+      this.selectedContent = content;
+    }
   }
 
   openFeedbackPage() {