画作导入数据库

paint-app/src/app/detail-page/detail-page.component.html

@@ -0,0 +1,3 @@
+<p>
+  detail-page works!
+</p>

paint-app/src/app/detail-page/detail-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DetailPageComponent } from './detail-page.component';
+
+describe('DetailPageComponent', () => {
+  let component: DetailPageComponent;
+  let fixture: ComponentFixture<DetailPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DetailPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DetailPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

paint-app/src/app/detail-page/detail-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-page',
+  templateUrl: './detail-page.component.html',
+  styleUrls: ['./detail-page.component.scss'],
+  standalone: true,
+})
+export class DetailPageComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

paint-app/src/app/tab1/tab1.page.html

@@ -30,7 +30,7 @@
       </ion-item>
     </ion-list> -->
 
-  <!-- <ion-card>
+ <ion-card>
       <ion-card-header>
         <ion-card-title>AI绘画建议 <ion-button (click)="goTestPage1()">前往</ion-button></ion-card-title>
       </ion-card-header>
@@ -43,7 +43,7 @@
     </ion-card-header>
     <ion-card-content>
     </ion-card-content>
-</ion-card> -->
+</ion-card> 
 
      
 <!-- <h1>星星打分组件演示:分值{{currentScore}}</h1>
@@ -53,24 +53,4 @@
   (onScoreChange)="handleScoreChange($event)">
 </edit-rating-star>
 <h1>编辑标签的演示</h1> -->
-<ion-card>
-  <ion-card-header>
-    <ion-card-title>其他医生</ion-card-title>
-    <ion-card-subtitle>医生简介</ion-card-subtitle>
-  </ion-card-header>
-  <ion-card-content>
-    <ion-list>
-      <ion-item *ngFor="let doctor of doctorList" lines="none">
-        <ion-thumbnail slot="start">
-          <img [src]="doctor.get('avatar')" [alt]="doctor.get('name')" />
-        </ion-thumbnail>
-        <div class="doctor-info">
-          <h3>{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h3>
-          <p>{{ doctor.get('title') }},{{ doctor.get('depart')?.name }}</p>
-          <p>飞码互联网医院</p>
-        </div>
-      </ion-item>
-    </ion-list>
-  </ion-card-content>
-</ion-card>
 </ion-content>

paint-app/src/app/tab1/tab1.page.ts

@@ -29,34 +29,19 @@ export class Tab1Page {
   // //星星打分
   // currentScore: number = 0; // 初始分值
 
-  // constructor(private router: Router){}
+  constructor(private router: Router){}
 
-  // goTestPage(){
-  //   this.router.navigate(['/tabs/test'])
-  // }
-  // goTestPage1(){
-  //   this.router.navigate(['/tabs/idea'])
-  // }
-  // goTestPage2(){
-  //   this.router.navigate(['/tabs/picture'])
-  // }
+  goTestPage(){
+    this.router.navigate(['/tabs/test'])
+  }
+  goTestPage1(){
+    this.router.navigate(['/tabs/idea'])
+  }
+  goTestPage2(){
+    this.router.navigate(['/tabs/picture'])
+  }
   // handleScoreChange(newScore: number) {
   //   this.currentScore = newScore;
   //   console.log('新分值:', newScore); // 处理分值变化
   // }
-
-
-  ngOnInit() {
-    // 生命周期：页面加载后，运行医生列表加载函数
-    this.loadDoctorList()
-  }
-
-  // 创建用于数据列表存储的属性
-  doctorList:Array<CloudObject> = []
-  // 查询并加载医生列表的函数
-  async loadDoctorList(){
-    let query = new CloudQuery("Doctor");
-    this.doctorList = await query.find()
-  }
-
 }

paint-app/src/app/tab2/tab2.page.html

@@ -9,7 +9,7 @@
 <ion-content [fullscreen]="true">
   <ion-segment>
     <ion-segment-button value="first" content-id="first">
-      <ion-label>热门推荐</ion-label>
+      <ion-label>外国名画</ion-label>
     </ion-segment-button>
     <ion-segment-button value="second" content-id="second">
       <ion-label>名家作品</ion-label>
@@ -22,30 +22,23 @@
     <ion-segment-content id="first">
 
       <div class="image-container">
-        <div class="image-wrapper">
-            <img src="../../assets/icon/tou1.jpg" alt="Image 1" />
-            <a href="#" class="transparent-button">查看介绍</a>
-            <div class="description-box">这是图片1的简单介绍。</div>
-        </div>
-        <div class="image-wrapper">
-            <img src="../../assets/icon/tou2.png" alt="Image 2" />
-            <a href="#" class="transparent-button">查看介绍</a>
-            <div class="description-box">这是图片2的简单介绍。</div>
-        </div>
-        <div class="image-wrapper">
-            <img src="../../assets/icon/bd.jpg" alt="Image 3" />
-            <a href="#" class="transparent-button">查看介绍</a>
-            <div class="description-box">这是图片3的简单介绍。</div>
-        </div>
-        <div class="image-wrapper">
-            <img src="../../assets/icon/favicon.png" alt="Image 4" />
-            <a href="#" class="transparent-button">查看介绍</a>
-            <div class="description-box">这是图片4的简单介绍。</div>
-        </div>
+        <div class="container">
+          <div *ngFor="let paint of paintList" class="image-wrapper" (click)="navigateToDetail()">
+              <img [src]="paint.get('picture')" [alt]="paint.get('name')" />
+              <div class="description-box">
+                  <div class="text1"><p>《{{ paint.get('name') }}》——{{ paint.get('artist') }}</p></div>
+                  <div class="text2"><p>{{ paint.get('introduction') }}</p></div>
+              </div>
+          </div>
+      </div>
     </div>
     </ion-segment-content>
-    <ion-segment-content id="second">Second</ion-segment-content>
-    <ion-segment-content id="third">Third</ion-segment-content>
+    <ion-segment-content id="second">
+     
+    </ion-segment-content>
+    <ion-segment-content id="third">
+      
+    </ion-segment-content>
   </ion-segment-view>
   <!-- <ion-card>
     <ion-card-header>

paint-app/src/app/tab2/tab2.page.scss

@@ -19,85 +19,58 @@ ion-segment-content:nth-of-type(3) {
   flex-wrap: wrap;         /* 允许换行 */
   gap: 20px;               /* 图片间距，可以根据需要调整 */
 }
-
-/* 每个图片项的样式 */
 .image-wrapper {
-  display: flex;            /* 使用flexbox布局 */
-  flex-direction: column;   /* 垂直排列子元素 */
-  height: auto;            /* 高度自适应 */
-  width: calc(50% - 10px); /* 每个图片占容器的50%宽度，减去间距 */
-  box-sizing: border-box;   /* 确保宽度计算不包括padding */
-  position: relative;       /* 方便调整按钮位置 */
+  width: 100%; /* 每列宽度为50%，减去间距 */
+  margin: 5px; /* 设置间距 */
+  box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
+  display: flex; /* 使用Flexbox布局 */
+  flex-direction: column; /* 垂直方向排列内容 */
+  align-items: center; /* 水平居中对齐内容 */
+
+    border-radius: 10px; /* 添加圆角效果 */
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 添加阴影 */
 }
 
-/* 图片的样式 */
 .image-wrapper img {
-  width: 100%;              /* 图片宽度100%，以适应容器 */
-  height: auto;             /* 保持图片比例 */
+  width: 100%; /* 图片宽度100% */
+  height: auto; /* 高度自动，根据宽度保持比例 */
 }
 
-/* 描述盒子的样式 */
 .description-box {
-  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
-  padding: 10px;            /* 内边距 */
-  border-radius: 5px;      /* 圆角 */
-  margin-top: auto;        /* 自动上边距，使其总是在父盒子底部 */
-  text-align: center;      /* 文字居中 */
-  font-size: 12px;         /* 文字大小 */
-  border: 1px solid #ccc;  /* 添加边界，颜色为浅灰色 */
+  width: 100%; /* 每列宽度为50%，减去间距 */
+  text-align: center; /* 中心对齐文本 */
 }
 
-/* 按钮的样式 */
-.transparent-button {
-  position: absolute;       /* 定位按钮 */
-  bottom: 40px;            /* 距离底部40px，确保在描述盒子上方 */
-  left: 50%;                /* 水平居中 */
-  transform: translateX(-50%); /* 精确居中 */
-  background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
-  padding: 10px;            /* 按钮内边距 */
-  text-decoration: none;    /* 移除下划线 */
-  color: black;             /* 按钮文字颜色 */
-  border-radius: 5px;       /* 圆角 */
-  font-size: 14px;          /* 文字大小 */
-  text-align: center;       /* 文字居中 */
+/* 容器样式 */
+.container {
+  display: flex; /* 使用Flexbox布局 */
+  flex-wrap: wrap; /* 允许换行 */
+  justify-content: space-between; /* 在主轴上均匀分配空间 */
 }
 
-.transparent-button:hover {
-  background-color: rgba(255, 255, 255, 0.8); /* 悬停时加深背景色 */
+.text1 {
+  overflow: hidden; /* 隐藏超出部分 */
+  white-space: nowrap; /* 不换行 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+  max-width: 100%; /* 最大宽度为100% */
+  font-size: 14px; /* 字体大小 */
+  margin: 0; /* 去掉默认外边距 */
+}
+.text2 {
+  width: 90%; /* 每列宽度为50%，减去间距 */
+  overflow: hidden; /* 隐藏超出部分 */
+  white-space: nowrap; /* 不换行 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+  max-width: 100%; /* 最大宽度为100% */
+  font-size: 14px; /* 字体大小 */
+  margin: 0 auto; /* 去掉默认外边距 */
 }
-// .bg-color {
-//     --background: #f4f4f4;  /* 设置背景颜色 */
-//   }
-//   ion-button {
-//     --background: white;  /* 设置背景颜色 */
-//     --color: #888;
-//     --border-radius: 8px; /* 按钮圆角 */
-//     font-weight: bold; /* 加粗按钮文本 */
-//     height: 40px; /* 按钮高度 */
-//     width: auto;
-//     float: right;
-//     font-size: 16px; /* 设置按钮字体大小 */
-//   }
- 
-//   ion-toolbar {
-//     overflow: auto; /* 确保父容器能够包裹浮动元素 */
-//   }
-//   ion-button:active {
-//     --background: #0056b3; /* 按钮按下时的背景颜色 */
-//     --color: white; /* 按钮按下时的文本颜色 */
-//   }
-
-//   ion-img {
-//     border-radius: 10px; /* 设置圆角 */
-//     margin: 5px; /* 添加间距 */
-//     width: 100%; /* 确保图片宽度为100% */
-//     height: auto; /* 自适应高度 */
-//   }
-
-//   ion-card-title {
-//     font-size: 24px; /* 设置标题字体大小 */
-//     font-weight: bold; /* 设置标题字体加粗 */
-//     align-items: center; /* 垂直居中 */
-//   }
 
+.text1 {
+  font-weight: bold; /* 加粗文本 */
+}
 
+.text2 {
+  font-size: 12px; /* 可根据需要调整字体大小 */
+  color: #666; /* 设置颜色 */
+}

paint-app/src/app/tab2/tab2.page.ts

@@ -2,7 +2,9 @@ import { Component,OnInit } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentContent, IonSegmentView, IonLabel, IonSegmentButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonGrid, IonImg, IonRow } from '@ionic/angular/standalone';
-
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
@@ -10,8 +12,27 @@ import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, Ion
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonButton,
     IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle,IonGrid,IonCol,IonRow,IonImg
-  ,IonSegment,IonSegmentContent,IonSegmentView,IonLabel,IonSegmentButton]
+  ,IonSegment,IonSegmentContent,IonSegmentView,IonLabel,IonSegmentButton,CommonModule]
 })
 export class Tab2Page{
-  constructor(){};
+ 
+
+   constructor(private router: Router){}
+
+   navigateToDetail(){
+    this.router.navigate(['/tabs/detail-page'])
+  }
+
+  ngOnInit() {
+      // 生命周期：页面加载后，运行医生列表加载函数
+      this.loadpaintList()
+    }
+  
+    // 创建用于数据列表存储的属性
+    paintList:Array<CloudObject> = []
+    
+    async loadpaintList(){
+      let query = new CloudQuery("paint");
+      this.paintList = await query.find()
+    }
 }

paint-app/src/app/tabs/tabs.routes.ts

@@ -46,6 +46,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../test2-page/test2-page.component').then((m) => m.Test2PageComponent),
       },
+      {
+        path: 'detail-page',
+        loadComponent: () =>
+          import('../detail-page/detail-page.component').then((m) => m.DetailPageComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',