完成了生成统计图模块

tailor-app/myapp/package-lock.json

@@ -24,6 +24,8 @@
         "@ionic/angular": "^8.0.0",
         "@ionic/vue": "^8.4.0",
         "@ionic/vue-router": "^8.4.0",
+        "@types/echarts": "^4.9.22",
+        "echarts": "^5.5.1",
         "fmode-ng": "^0.0.62",
         "ionicons": "^7.2.1",
         "parse": "^5.3.0",
@@ -5910,6 +5912,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/echarts": {
+      "version": "4.9.22",
+      "resolved": "https://registry.npmmirror.com/@types/echarts/-/echarts-4.9.22.tgz",
+      "integrity": "sha512-7Fo6XdWpoi8jxkwP7BARUOM7riq8bMhmsCtSG8gzUcJmFhLo387tihoBYS/y5j7jl3PENT5RxeWZdN9RiwO7HQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/zrender": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
@@ -6166,6 +6177,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/zrender": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/@types/zrender/-/zrender-4.0.6.tgz",
+      "integrity": "sha512-1jZ9bJn2BsfmYFPBHtl5o3uV+ILejAtGrDcYSpT4qaVKEI/0YY+arw3XHU04Ebd8Nca3SQ7uNcLaqiL+tTFVMg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -9152,6 +9169,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -19826,6 +19859,21 @@
       "resolved": "https://registry.npmmirror.com/zone.js/-/zone.js-0.14.10.tgz",
       "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
       "license": "MIT"
+    },
+    "node_modules/zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

tailor-app/myapp/package.json

@@ -29,6 +29,8 @@
     "@ionic/angular": "^8.0.0",
     "@ionic/vue": "^8.4.0",
     "@ionic/vue-router": "^8.4.0",
+    "@types/echarts": "^4.9.22",
+    "echarts": "^5.5.1",
     "fmode-ng": "^0.0.62",
     "ionicons": "^7.2.1",
     "parse": "^5.3.0",

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

@@ -1,21 +1,4 @@
-<!-- <ion-header>
-  <ion-toolbar>
-    <ion-title>社区帖子</ion-title>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
-  <ion-list>
-    <ion-item *ngFor="let post of posts">
-      <ion-avatar slot="start">
-        <img [src]="post.avatarUrl" alt="Author Avatar">
-      </ion-avatar>
-      <ion-label>
-        <h2>{{ post.title }}</h2>
-        <p>{{ post.author }}</p>
-        <p>{{ post.contentSnippet }}</p>
-        <ion-text color="medium">{{ post.timestamp | date: 'short' }}</ion-text>
-      </ion-label>
-    </ion-item>
-  </ion-list>
-</ion-content> -->
+  <div class="echarts" id="chart"></div>
+</ion-content>

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

@@ -0,0 +1,5 @@
+.echarts{
+    width: 340px;
+    height: 200px;
+    margin: 0 auto;
+}

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

@@ -1,35 +1,97 @@
-import { Component, OnInit } from '@angular/core';
+
+import { Component, NgModule, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-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,IonText } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline} 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})
 
+import * as echarts from 'echarts';
 @Component({
   selector: 'app-community',
   templateUrl: './community.page.html',
   styleUrls: ['./community.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton,  IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions,IonInput,IonCheckbox,IonRadio,IonToggle,IonRadioGroup,IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonText ]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton,  IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions,IonInput,IonCheckbox,IonRadio,IonToggle,IonRadioGroup,IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonTabButton,IonTabBar,IonTabs,IonListHeader,IonCardSubtitle,IonImg,IonBadge ]
+
 })
+
+
 export class CommunityPage implements OnInit {
 
   constructor() { }
 
   ngOnInit() {
+    
+    this.initEchart();
   }
-  // interface Post {
-  //   id: number;
-  //   title: string;
-  //   author: string;
-  //   contentSnippet: string;
-  //   avatarUrl: string;
-  //   timestamp: Date;
-  // }
-   
-  // // 然后，使用这个接口来类型化posts数组
-  // posts: Post[] = [
-  //   { id: 1, title: '帖子标题1', author: '作者1', contentSnippet: '内容摘要1', avatarUrl: 'url_to_avatar1', timestamp: new Date() },
-  //   { id: 2, title: '帖子标题2', author: '作者2', contentSnippet: '内容摘要2', avatarUrl: 'url_to_avatar2', timestamp: new Date() },
-  //   { id: 3, title: '帖子标题3', author: '作者3', contentSnippet: '内容摘要3', avatarUrl: 'url_to_avatar3', timestamp: new Date() },
-  // ];
-
-}
+  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

@@ -1,13 +1,32 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>store</ion-title>
-  </ion-toolbar>
-</ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">store</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+<ion-content>
+  <ion-card style="width: 90%;margin: auto;margin-top: 10px;margin-bottom: 10px;">
+    <ion-card-header>
+      <ion-card-title>各类服装年销售量渐变堆叠面积图</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>5年内服装销售量</p>
+      <p>随时间或其他变量的变化趋势和相对大小</p>
+     
+
+<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){
+    <ion-progress-bar [buffer]="buffer" [value]="progress"></ion-progress-bar>
+  }
+  @if(!visable1){
+    <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-list>
+  }
+  
+  
+</ion-content>

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

@@ -0,0 +1,38 @@
+.echarts{
+    width: 380px;
+    height: 200px;
+    margin: 0 auto;
+}
+.item-native{
+    margin: 0;
+    padding: 0;
+}
+.noPadding{
+    --padding-start:0
+    --inner-padding-end:0
+}
+ion-button {
+    --background: #000;
+    --background-hover: #9ce0be;
+    --background-activated: #88f4be;
+    --background-focused: #88f4be;
+  
+    --color: #ecc422;
+  
+    --border-radius: 0;
+    --border-color: #000;
+    --border-style: solid;
+    --border-width: 1px;
+  
+    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+  
+    --ripple-color: deeppink;
+  
+    --padding-top: 10px;
+    --padding-bottom: 10px;
+  }
+
+  ion-progress-bar {
+    --background: #f3e895;
+    --progress-background: #f7ef18;;
+  }

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

@@ -1,20 +1,242 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-
+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,IonImg,IonProgressBar } from '@ionic/angular/standalone';
+import * as echarts from 'echarts';
+import { podiumOutline} from 'ionicons/icons';
+import { addIcons } from 'ionicons';
+addIcons({podiumOutline})
+// <ion-icon name="podium-outline"></ion-icon>
+// <ion-icon name="bar-chart-outline"></ion-icon>
+// <ion-icon name="cellular-outline"></ion-icon>
 @Component({
   selector: 'app-store',
   templateUrl: './store.page.html',
   styleUrls: ['./store.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton,  IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions,IonInput,IonCheckbox,IonRadio,IonToggle,IonRadioGroup,IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonImg,IonProgressBar ]
 })
 export class StorePage implements OnInit {
 
   constructor() { }
 
   ngOnInit() {
+    
+    
   }
+  //进度条
+  public buffer = 0.06;
+  public progress = 0;
+  public visable1:boolean=true
+
+ shengcheng1(){
+    setInterval(() => {
+      this.buffer += 0.4;
+      this.progress += 0.4;
 
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (this.progress > 1) {
+        setTimeout(() => {
+          this.buffer = 0.06;
+          this.progress = 0;
+          this.visable1=false
+          this.initEchart();
+        }, 1000);
+      }
+    }, 1000);
+    
+  }
+  public chart: any;
+  initEchart() {
+    let ec = echarts as any;
+    let container = document.getElementById('chart');
+    this.chart = ec.init(container);
+    let option = {
+      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+      title: {
+        text: ''
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: ['风衣', '羽绒服', 'T恤', '牛仔裤', '连衣裙']
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+           data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value'
+        }
+      ],
+      series: [
+        {
+          name: '风衣',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(128, 255, 165)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(1, 191, 236)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: [140, 232, 101, 264, 90, 340, 250]
+        },
+        {
+          name: '羽绒服',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(0, 221, 255)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(77, 119, 255)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: [120, 282, 111, 234, 220, 340, 310]
+        },
+        {
+          name: 'T恤',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(55, 162, 255)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(116, 21, 219)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: [320, 132, 201, 334, 190, 130, 220]
+        },
+        {
+          name: '牛仔裤',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(255, 0, 135)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(135, 0, 157)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: [220, 402, 231, 134, 190, 230, 120]
+        },
+        {
+          name: '连衣裙',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0
+          },
+          showSymbol: false,
+          label: {
+            show: true,
+            position: 'top'
+          },
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(255, 191, 0)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(224, 62, 76)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: [220, 302, 181, 234, 210, 290, 150]
+        }
+      ]
+    };
+    
+    
+ 
+    this.chart.setOption(option);
+}
 }

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

@@ -1,4 +1,4 @@
-<ion-tabs>
+<ion-tabs style="background-color: aqua;">
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="customization" href="/tabs/customization">
       <ion-icon name="color-palette-outline"></ion-icon>

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

@@ -1 +1,4 @@
 
+.tabbar {
+    background-color: #5c2626 !important; // 使用!important可以确保样式被优先应用
+  }

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

@@ -1,6 +1,6 @@
 <!-- 页面顶部导航栏 -->
 <ion-header class="ion-no-border" style="background-color: rgb(231, 244, 247);;">
-  <ion-toolbar  style="background-color: rgb(231, 244, 247);;">
+  <ion-toolbar style="background-color: rgb(231, 244, 247);;">
     <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
     <ion-buttons slot="end">
       <!-- <ion-button size="small">登录/注册</ion-button> -->
@@ -53,17 +53,10 @@
     </ion-row>
   </ion-grid>
 
-  <!-- 商家管理入口 -->
-  <ion-card style="width: 90%;margin: auto;margin-bottom: 10px;margin-top: 10px;">
-    <ion-card-content>
 
-      <ion-button expand="block"><ion-icon name="camera"></ion-icon> 一键入库</ion-button>
-      <p>智能库存管理，让生意更简单</p>
-    </ion-card-content>
-  </ion-card>
 
-  <!-- 特色服务展示
-    <ion-grid>
+  <!-- 特色服务展示 -->
+  <!-- <ion-grid>
       <ion-row>
         <ion-col size="6">
           <ion-card>
@@ -86,21 +79,22 @@
 
   <!-- 用户评价和案例展示 -->
 
-<ion-list style="width: 90%;margin: auto;">
-  <ion-item>
-    <h1 style="font-weight: bolder;">用户评价和案例展示</h1>
-  </ion-item>
+  <ion-list style="width: 90%;margin: auto;margin-top: 20px;">
+    <ion-item>
+      <h1 style="font-weight: bolder;">用户评价和案例展示</h1>
+    </ion-item>
     <ion-item>
 
       <ion-label>
         <ion-grid>
           <ion-row>
-            <ion-col size="auto" >
-              
+            <ion-col size="auto">
+
             </ion-col>
             <ion-col width-10>
-              <ion-avatar style="width: 30px;height: 30px;display: inline-block;vertical-align: middle;margin-right: 10px;">
-                <img src="assets/shapes.svg" alt="用户头像" >
+              <ion-avatar
+                style="width: 30px;height: 30px;display: inline-block;vertical-align: middle;margin-right: 10px;">
+                <img src="assets/shapes.svg" alt="用户头像">
               </ion-avatar>
               <h2 style="font-weight: bolder;display: inline-block;">小林</h2>
               <div style="margin-top: 10px;margin-bottom: 10px;">
@@ -115,13 +109,47 @@
         </ion-grid>
       </ion-label>
     </ion-item>
-  </ion-list> 
+  </ion-list>
+
+  <!-- 商家管理入口 -->
+  <ion-card style="width: 90%;margin: auto;margin-bottom: 10px;margin-top: 10px;">
+    <ion-card-content>
+
+      <ion-button expand="block"><ion-icon name="camera"></ion-icon> 一键入库</ion-button>
+      <p>智能库存管理，让生意更简单</p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list style="width: 90%;margin: auto;margin-top: 20px;">
+    <ion-item>
+      <h1 style="font-weight: bolder;">AI智能推荐</h1>
+    </ion-item>
+    <ion-item>
+
+
+        <ion-grid fixed style="width: 100%;">
+          <ion-row>
+            <ion-col size="6" *ngFor="let product of products" [attr.data-order]="product.order">
+              <ion-card>
+                <ion-img [src]="product.image"></ion-img>
+                <ion-card-header>
+                  <ion-card-title>{{ product.name }}</ion-card-title>
+                </ion-card-header>
+                <ion-card-content>
+                  <p>{{ product.description }}</p>
+                  <ion-button fill="clear">{{ product.price | currency }}</ion-button>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+    </ion-item>
+  </ion-list>
 
 
-  
 
   <!-- 最新时尚资讯 -->
-  <ion-card>
+  <ion-card style="width: 90%;margin: auto;margin-top: 10px;margin-bottom: 10px;">
     <ion-card-header>
       <ion-card-title>2024年春季流行趋势</ion-card-title>
     </ion-card-header>

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

@@ -45,4 +45,33 @@ ion-searchbar {
   
   ion-toolbar {
     --background:rgb(231, 244, 247);;; /* 使用CSS变量设置背景色 */
-  }
+  }
+  ion-grid {
+    padding: 5px;
+  }
+  
+  ion-col {
+    width: 50%; // Adjust the width based on the number of columns you want
+  }
+  
+  ion-card {
+    margin-bottom: 10px;
+  }
+  
+  // You can use media queries to adjust the column width on different screen sizes
+  @media (min-width: 576px) {
+    ion-col {
+      min-height: 200px; // 较小屏幕下，设置一个最小高度，让布局看起来更规整
+    }
+  }
+
+  @media (min-width: 768px) {
+    ion-col {
+      min-height: 250px; // 中等屏幕下，适当增加最小高度
+    }
+  }
+
+  @media (min-width: 992px) {
+    ion-col {
+      min-height: 300px; // 大屏幕下，再增加最小高度，使布局更有瀑布流错落感
+    }}

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

@@ -4,14 +4,14 @@ import { FormsModule } from '@angular/forms';
 import { ItemReorderEventDetail } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline} 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 } from '@ionic/angular/standalone';
+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,IonImg } from '@ionic/angular/standalone';
 addIcons({camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline})
 @Component({
   selector: 'app-yiyun',
   templateUrl: './yiyun.page.html',
   styleUrls: ['./yiyun.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton,  IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions,IonInput,IonCheckbox,IonRadio,IonToggle,IonRadioGroup,IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip ]
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton,  IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions,IonInput,IonCheckbox,IonRadio,IonToggle,IonRadioGroup,IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonImg ]
 
 })
 
@@ -29,6 +29,17 @@ export class YiyunPage implements OnInit {
     { text: '虚拟试衣', image: 'cloudy-outline', page: '/page4' },
     
   ];
+
+  products: any[] = [
+    { image: 'assets/img/shi.png', name: '商品1', description: '这是一个商品描述', price: 99.99 },
+    { image: 'assets/img/shi.png', name: '商品2', description: '这是一个商品描述', price: 199.99 },
+    { image: 'assets/img/shi.png', name: '商品1', description: '这是一个商品描述', price: 99.99 },
+    { image: 'assets/img/shi.png', name: '商品2', description: '这是一个商品描述', price: 199.99 },
+
+    // ... 更多商品数据
+  ];
+
+
   // 打开登陆页面
   openLoginModal(){
     console.log("打开登陆页面");