src/app/babylon/babylon.page.ts

@@ -22,19 +22,19 @@ export class BabylonPage implements OnInit {
 
   CharacterMap:any = {}
   CharacterMeshList = [
-    {name:"古风少女",
+    {name:"卧室",
     dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/ancient-chinese-woman/gltf/",
     filePath:"scene.gltf"},
-    {name:"中国象棋",
+    {name:"厨房",
     dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-chess/gltf/",
     filePath:"scene.gltf"},
-    {name:"卡通异瞳少女",
+    {name:"客厅",
     dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/vtuber-selen/gltf/",
     filePath:"scene.gltf"},
-    {name:"中国老杯子",
+    {name:"卫生间",
     dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-iron-cup/",
     filePath:"scene.gltf"},
-    {name:"中国城市lowpoly",
+    {name:"阳台",
     dirPath:"https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/3d/model/chinese-city-lowpoly/gltf/",
     filePath:"scene.gltf"},
 

src/app/tab1/tab1.page.html

@@ -293,7 +293,7 @@
   <!-- 案例设计页 -->
   <div *ngIf="selectedSegment === 'case'" style="margin-top: 10px;">
     <!-- 案例设计内容 -->
-    <div class="carousel-container">
+    <div class="carousel-container" style="margin-top: 40px;">
       <div class="carousel">
           <div class="card0">
             <img src="assets\img\card1.jpg" alt="">
@@ -325,7 +325,7 @@
             <img src="assets\img\card8.jpg" alt="">
 
           </div>
-          <div class="card0">
+          <div class="card0" style="justify-content: center;">
             <img src="assets\img\card9.jpg" alt="">
 
           </div>
@@ -334,8 +334,23 @@
 
           </div>
       </div>
-  </div>
-    <img src="example2.jpg" alt="Example 1">
+    </div>
+    <div class="card9" style="margin: -10px auto; display: flex;" *ngFor="let item of caseList">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z">
+
+        </path>
+        
+      </svg>
+      <img src={{item.img}} alt="">
+      <div class="card9__content">
+        <p class="card9__title">{{item.title}}</p>
+        <p class="card9__description">
+          {{item.description}}
+        </p>
+      </div>
+    </div>
+    
   </div>
 
   <!-- 设计我家页 -->

src/app/tab1/tab1.page.scss

@@ -308,9 +308,15 @@ p {
   width: 200px;
   height: 200px;
   margin-right: 10px;
-  background-color: #f9f9f9;
+  background-color: #ffffff;
   border-radius: 5px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.card0 img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .swiper {
@@ -456,4 +462,96 @@ ion-card img {
   text-align: center;
   font-size: 1.5rem;
   width: 75%;
-}
+}
+
+.container {
+  position: relative;
+  margin-top: -100px;
+  width: 360px;
+}
+
+.container > * {
+  width: 340px;
+  height: 120px;
+  border: solid 1px #bebebe;
+  background-color: #1f1f1f;
+  position: absolute;
+  border-radius: 10px;
+  padding: 10px;
+  color: #fff;
+  box-shadow: 0px 8px 20px -10px #bbbbbb;
+  text-shadow: 0px 0px 5px #fff;
+  letter-spacing: 1px;
+  background-image: radial-gradient(circle 160px at 50% 120%, #353535, #1f1f1f);
+}
+
+.card5 {
+  width: 300px;
+  margin: -20px 0px 0px 20px;
+}
+.card6 {
+  width: 320px;
+  margin: -10px 0px 0px 10px;
+}
+
+.card9 {
+  position: relative;
+  width: 300px;
+  height: 200px;
+  background-color: #f2f2f2;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  perspective: 1000px;
+  box-shadow: 0 0 0 5px #ffffff80;
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.card9 svg {
+  width: 48px;
+  fill: #333;
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.card9:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
+}
+
+.card9__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: #f2f2f2;
+  transform: rotateX(-90deg);
+  transform-origin: bottom;
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.card9:hover .card9__content {
+  transform: rotateX(0deg);
+}
+
+.card9__title {
+  margin: 0;
+  font-size: 24px;
+  color: #333;
+  font-weight: 700;
+}
+
+.card9:hover svg {
+  scale: 0;
+}
+
+.card9__description {
+  margin: 10px 0 0;
+  font-size: 14px;
+  color: #777;
+  line-height: 1.4;
+}

src/app/tab1/tab1.page.ts

@@ -212,6 +212,59 @@ export class Tab1Page implements OnInit {
     },
   ];
 
+  caseList = [
+    {
+      img:'assets/img/case1.jpg',
+      title: "现代简约风格客厅装修",
+      description: "这是一个现代简约风格的客厅装修案例，以简洁清爽的设计风格为主，色彩搭配明快，营造出舒适宜人的居家氛围。"
+    },
+    {
+      img:'assets/img/case2.jpg',
+      title: "北欧风格卧室装修",
+      description: "这是一个典型的北欧风格卧室装修案例，以白色和木质元素为主，简约清新，打造出温馨舒适的睡眠空间。"
+    },
+    {
+      img:'assets/img/case3.jpg',
+      title: "现代中式餐厅装修",
+      description: "这个现代中式餐厅装修案例融合了传统中式元素和现代设计理念，色彩典雅，家具摆设充满东方韵味。"
+    },
+    {
+      img:'assets/img/case4.jpg',
+      title: "欧式风格厨房装修",
+      description: "这个欧式风格厨房装修案例采用了浪漫优雅的欧式设计风格，金色装饰和复古家具营造出奢华典雅的厨房空间。"
+    },
+    {
+      img:'assets/img/case1.jpg',
+      title: "现代工业风办公室装修",
+      description: "这是一个现代工业风格的办公室装修案例，以金属、混凝土和木质元素为主，展现出独特的工业风情。"
+    },
+    {
+      img:'assets/img/case2.jpg',
+      title: "简欧风格客厅装修",
+      description: "这是一个简欧风格的客厅装修案例，结合简约和欧式元素，打造出典雅、舒适的客厅空间。"
+    },
+    {
+      img:'assets/img/case3.jpg',
+      title: "地中海风格卧室装修",
+      description: "这是一个地中海风格的卧室装修案例，以蓝色、白色和黄色为主色调，营造出轻松、海洋风情的卧室氛围。"
+    },
+    {
+      img:'assets/img/case4.jpg',
+      title: "现代农村风格厨房装修",
+      description: "这是一个现代农村风格的厨房装修案例，注重自然、简约的设计风格，展现出田园般的温馨氛围。"
+    },
+    {
+      img:'assets/img/case1.jpg',
+      title: "日式和风风格卫生间装修",
+      description: "这是一个日式和风风格的卫生间装修案例，以木质、竹子和瓷砖为主要材料，营造出宁静、清新的日式风情。"
+    },
+    {
+      img:'assets/img/case2.jpg',
+      title: "现代艺术风格客厅装修",
+      description: "这是一个现代艺术风格的客厅装修案例，结合艺术元素和现代设计，打造出独特、富有个性的客厅空间。"
+    }
+  ];
+
 }