Quellcode durchsuchen

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

0225268 vor 4 Monaten
Ursprung
Commit
e0d5f6c59c
3 geänderte Dateien mit 45 neuen und 10 gelöschten Zeilen
  1. 14 0
      src/app/tab1/tab1.page.html
  2. 29 8
      src/app/tab1/tab1.page.scss
  3. 2 2
      src/app/tab1/tab1.page.spec.ts

+ 14 - 0
src/app/tab1/tab1.page.html

@@ -339,6 +339,20 @@
   <!-- 案例设计页 -->
   <div *ngIf="selectedSegment === 'case'">
     <!-- 案例设计内容 -->
+    <div class="carousel-container">
+      <div class="carousel">
+          <div class="card0">Card 1</div>
+          <div class="card0">Card 2</div>
+          <div class="card0">Card 3</div>
+          <div class="card0">Card 4</div>
+          <div class="card0">Card 5</div>
+          <div class="card0">Card 6</div>
+          <div class="card0">Card 7</div>
+          <div class="card0">Card 8</div>
+          <div class="card0">Card 9</div>
+          <div class="card0">Card 10</div>
+      </div>
+  </div>
     <img src="example2.jpg" alt="Example 1">
   </div>
 

+ 29 - 8
src/app/tab1/tab1.page.scss

@@ -1,10 +1,3 @@
-// ion-card {
-//   margin: 10px;
-//   padding: 15px;
-//   border-radius: 10px;
-//   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-// }
-
 ion-card-header {
   ion-card-title {
     font-size: 2.4em;
@@ -287,4 +280,32 @@ p {
   font-weight: 600;
   line-height: 2rem;
   color: rgb(7, 7, 7)
-}
+}
+
+.carousel-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* 隐藏滚动条 Firefox */
+  -ms-overflow-style: none; /* 隐藏滚动条 IE/Edge */
+}
+
+.carousel::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条 Chrome/Safari */
+}
+
+.card0 {
+  flex: 0 0 auto;
+  width: 200px;
+  height: 200px;
+  margin-right: 10px;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+

+ 2 - 2
src/app/tab1/tab1.page.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+//import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
 import { Tab1Page } from './tab1.page';
 
@@ -12,7 +12,7 @@ describe('Tab1Page', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [Tab1Page],
-      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+      //imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
     }).compileComponents();
 
     fixture = TestBed.createComponent(Tab1Page);