aaaaaaaa

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

@@ -1,16 +1,39 @@
-<!-- 页面顶部导航栏 -->
-<ion-header class="ion-no-border" 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> -->
-      <!-- <ion-button size="small">商家后台入口</ion-button> -->
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
 
 <!-- 品牌展示区 -->
 <ion-content>
+  <!-- 轮播图  -->
+<div class="swiper"  style="position: relative;">
+  <div data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
+  <div class="swiper-wrapper">
+    <div class="swiper-slide"  style="background-image: url('../../assets/img/s1.png');">
+
+      <div class="text text1" data-swiper-parallax="300" data-swiper-parallax-duration="600">
+        <h1 style="margin-bottom: 10px;">缔造你的风格传奇</h1>
+
+        <p style="color: #eef1f5;margin-bottom: 10px;">AI智能定制，尽显个性魅力</p>
+        <ion-button  class="bai">点击参与</ion-button>
+      </div>
+
+    </div>
+    <div class="swiper-slide"  style="background-image: url('../../assets/img/s2.png');">
+
+      <div class="text text2" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
+        <h1 style="margin-bottom: 10px;">今日穿搭</h1>
+
+        <p style="color: #eef1f5;margin-bottom: 10px;">融合经典时尚，展现独特魅力</p>
+        <ion-button  class="bai">点击参与</ion-button>
+      </div>
+
+    </div>
+    
+    
+    
+
+
+  </div>
+  <div class="swiper-pagination"></div>
+
+</div>
   <!-- <ion-slides>
       <ion-slide>
         <img src="最新服装定制案例图片路径" alt="服装定制案例">
@@ -30,11 +53,11 @@
     </ion-row>
   </ion-grid>
 
-  <ion-grid style="justify-content: center;display: flex;">
-    <ion-row style="background-color: white;width: 90%;border-radius: 10px;">
-      <ion-card style="width: 44%;box-shadow: none;">
+  <div style="background-image: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);">
+    <div style="background-color: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);width: 90%;justify-content: space-between;display: flex;margin: auto;">
+      <ion-card style="width: 50%;box-shadow: none;height: 110%;">
         <ion-card-header>
-          <img src="assets/img/ding.png" alt="">
+          <img style="border-radius: 15px;" src="assets/img/ding.png" alt="">
           <ion-card-title style="font-size: 17px;font-weight:bolder;">定制服务</ion-card-title>
         </ion-card-header>
         <!-- <ion-card-content>
@@ -43,15 +66,15 @@
       </ion-card>
 
       <!-- 用户定制入口 -->
-      <ion-card style="width: 44%;box-shadow: none;">
+      <ion-card style="width: 50%;box-shadow: none;">
         <ion-card-header>
-          <img src="assets/img/3d.png" alt="">
+          <img style="border-radius: 15px;" src="assets/img/3d.png" alt="">
           <ion-card-title style="font-size: 17px;font-weight:bolder;">3D试衣服务</ion-card-title>
         </ion-card-header>
 
       </ion-card>
-    </ion-row>
-  </ion-grid>
+    </div>
+  </div>
 
 
 
@@ -79,7 +102,7 @@
 
   <!-- 用户评价和案例展示 -->
 
-  <ion-list style="width: 90%;margin: auto;margin-top: 20px;">
+  <ion-list style="width: 90%;margin: auto;margin-top: 20px;background-color:linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);" >
     <ion-item>
       <h1 style="font-weight: bolder;">用户评价和案例展示</h1>
     </ion-item>
@@ -127,22 +150,22 @@
     <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-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>
 

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

@@ -35,17 +35,13 @@ ion-searchbar {
     padding: 0px;
     box-shadow: none;
   }
-  ion-content {
-    --background: rgb(231, 244, 247);
-  }
+
   // ion-avatar{
   //   position: absolute;
   //   top: 0;
   // }
   
-  ion-toolbar {
-    --background:rgb(231, 244, 247);;; /* 使用CSS变量设置背景色 */
-  }
+
   ion-grid {
     padding: 5px;
   }
@@ -74,4 +70,96 @@ ion-searchbar {
   @media (min-width: 992px) {
     ion-col {
       min-height: 300px; // 大屏幕下，再增加最小高度，使布局更有瀑布流错落感
-    }}
+    }}
+
+
+ 
+    .swiper{
+      height: 400px;
+      background-color: #fff;
+    }
+    .swiper-container {
+      width: 100%;
+      height: 100%;
+  }
+  .swiper-slide {
+      position: relative; /* 设置为相对定位以便定位文本 */
+      background-size: cover;
+      background-position: center;
+      opacity: 0; /* 默认透明 */
+      transition: opacity 0.5s ease; /* 透明度过渡 */
+  }
+  .swiper-slide-active {
+      opacity: 1; /* 当前幻灯片不透明 */
+  }
+  .text1 {
+      left: 17px; /* 水平居中 */
+  }
+  .text2 {
+    right: 15px; /* 水平居中 */
+    text-align: right;
+}
+.text{
+  width: 50%;
+  height: 80%;
+  position: absolute; /* 绝对定位 */
+  z-index: 999;
+  top: 34px; /* 距离底部20px */
+  font-size: 16px;
+  transform: translateX(-50%); /* 使文本真正居中 */
+  color: white; /* 文字颜色 */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 文字阴影 */
+  font-family: SimSun;
+
+}
+.bai{
+  --background: #eddeca;
+  --background-hover: #9ce0be;
+  --background-activated: #88f4be;
+  --background-focused: #88f4be;
+
+  --color: #3d3333;
+
+  --border-radius: 10px;
+  --border-color: #eddeca;
+  --border-style: solid;
+  --border-width: 1px;
+
+  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+  --ripple-color: deeppink;
+  --padding-left: 10px;
+  --padding-right: 10px;
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  font-weight: bolder;
+  font-family: SimHei;
+}
+ion-content{
+  --background: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);
+}
+ion-card{
+  --background: #f5dfca;
+  margin: 0;
+  
+
+}
+ion-row{
+  --background: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);
+  margin: auto;
+
+}
+ion-item{
+  --background: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);
+  margin: auto;
+
+}
+ion-grid{
+  background-color: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);
+  margin: auto;
+  padding: 0;
+}
+ion-list{
+  --background: linear-gradient(to right top, #f3d8bf, #f4dbc4, #f5dfca, #f5e2cf, #f6e5d5);
+
+}

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

@@ -7,6 +7,7 @@ import { camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline} fro
 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})
 import { NavigationExtras, Router } from '@angular/router';
+declare let Swiper: any;
 
 @Component({
   selector: 'app-yiyun',
@@ -24,6 +25,50 @@ export class YiyunPage implements OnInit {
   constructor(private router: Router) { }
 
   ngOnInit() {
+    var mySwiper = new Swiper('.swiper',{
+
+      height:900,
+      parallax: true,
+      effect: 'fade', // 设置为淡入淡出效果
+      fadeEffect: {
+        crossFade: true // 交叉淡入淡出
+    },
+    
+      // autoplay: true,
+      
+      observer: true,//修改swiper自己或子元素时，自动初始化swiper
+      observeParents: true,//修改swiper的父元素时，自动初始化swiper
+      // 如果需要分页器
+      pagination: {
+        el: '.swiper-pagination',
+      },
+
+      // 如果需要前进后退按钮
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+
+      // 如果需要滚动条
+      scrollbar: {
+        el: '.swiper-scrollbar',
+      },
+})
+ const swiper = new Swiper('.swiper-container', {
+        loop: true,
+        effect: 'fade', // 设置为淡入淡出效果
+        fadeEffect: {
+            crossFade: true // 交叉淡入淡出
+        },
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+    });
   }
   public items = [
     { text: '趋势分析', image: 'trending-up-outline', page: '/page1' },