aaaa

tailor-app/myapp/src/app/community/community.page.html

@@ -1,4 +1,42 @@
-
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      帖子
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+ 
 <ion-content>
-  <div class="echarts" id="chart"></div>
+  <div class="waterfall">
+    <div class="post-item" style="position: relative;">
+      <img src="assets/img/jj.png" alt="Post Image" class="img" />
+      <h3> post.title </h3>
+      <p> post.content</p>
+      <ion-chip style="margin: 0;">
+        <ion-avatar>
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+        <ion-label>Chip Avatar</ion-label>
+      </ion-chip>
+      <div style="display: flex; align-items: center;position: absolute;bottom: 15px;right: 15px;">
+        <ion-icon name="heart" style="font-size: 16px;"></ion-icon>
+        <span style="margin-left: 4px;font-size: 16px;">11</span>
+      </div>
+        
+    </div>
+    <div class="post-item" style="">
+      <img src="assets/img/shi.png" alt="Post Image" />
+      <h3> post.title </h3>
+      <p> post.content</p>
+    </div>
+    <div class="post-item" style="">
+      <img src="assets/img/shi.png" alt="Post Image" />
+      <h3> post.title </h3>
+      <p> post.content</p>
+    </div>
+    
+
+    
+  </div>
+  
 </ion-content>

tailor-app/myapp/src/app/community/community.page.scss

@@ -1,5 +1,30 @@
-.echarts{
-    width: 340px;
-    height: 200px;
-    margin: 0 auto;
-}
+/* src/pages/posts/posts.page.scss */
+.waterfall {
+    column-count: 2; // 设置列数
+    column-gap: 16px; // 设置列间距
+    width: 100%;
+  }
+  
+  .post-item {
+    break-inside: avoid; // 防止内容在列中拆分
+    margin-bottom: 16px; // 设置项目间距
+    padding: 8px;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
+  
+  .img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px 8px 0 0;
+  }
+  
+  .post-item h3 {
+    margin: 16px 0 8px;
+  }
+  
+  .post-item p {
+    color: #666;
+  }
+  

tailor-app/myapp/src/app/community/community.page.ts

@@ -3,9 +3,9 @@ import { Component, NgModule, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { addIcons } from 'ionicons';
-import { camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline} from 'ionicons/icons';
+import { camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline,heart,heartOutline} from 'ionicons/icons';
 import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonTabButton,IonListHeader,ItemReorderEventDetail, IonTabBar, IonTabs,IonCardSubtitle,IonImg,IonBadge   } from '@ionic/angular/standalone';
-addIcons({camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline})
+addIcons({camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline,heart,heartOutline})
 
 import * as echarts from 'echarts';
 @Component({
@@ -19,79 +19,19 @@ import * as echarts from 'echarts';
 
 
 export class CommunityPage implements OnInit {
-
+  public  posts = [
+    { imageUrl: 'assets/img/shi.png', title: 'title', content: 'content' },
+    { imageUrl: 'assets/img/shi.png', title: 'title', content: 'content' },
+   
+    
+  ];
+  
   constructor() { }
 
   ngOnInit() {
     
-    this.initEchart();
+    
   }
-  public chart: any;
-  initEchart() {
-    let ec = echarts as any;
-    let container = document.getElementById('chart');
-    this.chart = ec.init(container);
-    let option = {
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
-      },
-      grid: {
-        left: "2%",
-        right: "3%",
-        bottom: "1%",
-        borderWidth:10,
-        containLabel: true
-      },
-      toolbox: {
-        feature: {
-          saveAsImage: {}
-        }
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          name: '邮件营销',
-          type: 'line',
-          stack: '总量',
-          data: [120, 132, 101, 134, 90, 230, 210]
-        },
-        {
-          name: '联盟广告',
-          type: 'line',
-          stack: '总量',
-          data: [220, 182, 191, 234, 290, 330, 310]
-        },
-        {
-          name: '视频广告',
-          type: 'line',
-          stack: '总量',
-          data: [150, 232, 201, 154, 190, 330, 410]
-        },
-        {
-          name: '直接访问',
-          type: 'line',
-          stack: '总量',
-          data: [320, 332, 301, 334, 390, 330, 320]
-        },
-        {
-          name: '搜索引擎',
-          type: 'line',
-          stack: '总量',
-          data: [820, 932, 901, 934, 1290, 1330, 1320]
-        }
-      ]
-    };
- 
-    this.chart.setOption(option);
-}}
+  
+}
 

tailor-app/myapp/src/app/store/store.page.html

@@ -12,19 +12,20 @@
 <ion-button style="border-color: yellow;" expand="block" (click)="shengcheng1()"><ion-icon name="podium-outline" style="margin-right: 5px;"></ion-icon> VIP一键生成</ion-button>
     </ion-card-content>
   </ion-card>
-  @if(visable1){
+  @if(Progressvisable1){
     <ion-progress-bar [buffer]="buffer" [value]="progress"></ion-progress-bar>
   }
-  @if(!visable1){
+  @if( Chartvisable1){
     <ion-list style="width: 100%;margin: auto;margin-top: 20px;">
       <ion-item>
         <h1 style="font-weight: bolder;">2017-2023 各类服装年销售量渐变堆叠面积图</h1>
       </ion-item>
       <ion-item class="noPadding">
         <div class="echarts " id="chart" ></div>
-  
+        
           
       </ion-item>
+      <ion-button (click)="this.Chartvisable1=false">隐藏</ion-button>
     </ion-list>
   }
   

tailor-app/myapp/src/app/store/store.page.ts

@@ -27,10 +27,12 @@ export class StorePage implements OnInit {
   //进度条
   public buffer = 0.06;
   public progress = 0;
-  public visable1:boolean=true
+  public Progressvisable1:boolean=false
+  public Chartvisable1:boolean=false
 
  shengcheng1(){
-    setInterval(() => {
+  this.Progressvisable1=true
+    let inter1=setInterval(() => {
       this.buffer += 0.4;
       this.progress += 0.4;
 
@@ -38,9 +40,11 @@ export class StorePage implements OnInit {
       // to continuously show the demo
       if (this.progress > 1) {
         setTimeout(() => {
+          clearInterval(inter1)
           this.buffer = 0.06;
           this.progress = 0;
-          this.visable1=false
+          this.Progressvisable1=false
+          this.Chartvisable1=true
           this.initEchart();
         }, 1000);
       }