init: web3-0210427

CraftsMart-angular/src/modules/craftsmart/craftsmart-routing.module.ts

@@ -12,7 +12,6 @@ const routes: Routes = [
     component:NavTabsComponent,
     children:[
       {    path:"home",component:HomeComponent
-
       },
       {
            path:"page-cart",component:PageCartComponent

CraftsMart-angular/src/modules/craftsmart/home/home.component.html

@@ -2,7 +2,8 @@
   <!-- 搜索区域 -->
   <div class="search-area">
     <input type="text" placeholder="快来搜寻您喜欢的物品吧" />
-    <svg t="1696908172482" class="search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17736" width="128" height="128">
+    <svg t="1696908172482" class="search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17736"
+      width="128" height="128">
       <path d="M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973 95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809 0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119 415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607 23.221905-26.318159 15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768 20.813707-94.951789 31.478582-145.695952 31.478582-194.031917 0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087 351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0 91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709 0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099 1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214 10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146 941.433227 965.515202 921.135562 953.474215 908.234504z" fill="#999999" p-id="17737"></path>
     </svg>
   </div>
@@ -10,19 +11,25 @@
   <div class="shopping-area">
     <div class="filter-tags">
       <!-- 筛选标签 -->
-      <div class="filter-tag">热门</div>
-      <div class="filter-tag">推荐</div>
-      <div class="filter-tag">活动</div>
+      <div class="filter-tag" >
+            <button (click)="showItemList('热门')">热门</button>
+      </div>
+      <div class="filter-tag" >
+            <button (click)="showItemList('推荐')">推荐</button>
+      </div>
+      <div class="filter-tag" >
+            <button (click)="showItemList('活动')">活动</button>
+      </div>
     </div>
-
     <ul class="image-grid">
       <!-- 物品类型列表 -->
-      <li *ngFor="let homeObj of homes">
+      <li *ngFor="let homeObj of itemList">
         <div class="image-item">
-          <img [src]="sanitizer.bypassSecurityTrustUrl('./assets/image/cp1.jpg')" alt="Digital Collectible">
+          <img [src]="sanitizer.bypassSecurityTrustUrl('/assets/image/cp1.jpg')" alt="Digital Collectible">
           <p>{{ homeObj.description }}</p>
           <p>{{ homeObj.name }}</p>
         </div>
+
         <div class="image-item2">
           <img [src]="sanitizer.bypassSecurityTrustUrl('./assets/image/cp1.jpg')" alt="Digital Collectible">
           <p>{{ homeObj.description }}</p>
@@ -31,5 +38,4 @@
       </li>
     </ul>
   </div>
-</div>
-  
+</div>

CraftsMart-angular/src/modules/craftsmart/home/home.component.scss

@@ -56,22 +56,22 @@
 
 .shopping-area {
   flex: 1;
-  border: solid pink;
+ //border: 1px solid pink;
   flex-wrap: wrap;
   .filter-tags {
     display: flex;
     flex-wrap: wrap;
-    border: solid purple;
+    //border: 1px solid purple;
     .filter-tag {
+      color: rgb(37, 36, 36);
       display: flex;
       align-items: center;
       justify-content: center;
       width: calc(33.33% - 10px); /* 保留了间距 */
       height: 40px;
-      border: 1px solid red;
+      //border: 1px solid red;
       border-radius: 5px;
       margin-right: 10px;
-
       &:last-child {
         margin-right: 0;
       }
@@ -79,7 +79,7 @@
   }
   .image-grid {
     margin-top: 0px;
-    border: 1px solid black; /* 添加了边框样式 */
+   //border: 1px solid black; /* 添加了边框样式 */
     margin-bottom: 40px;
     padding: 0;
     li {
@@ -125,10 +125,185 @@
   border: none;
   font-size: 4px !important;
 }
+
+// 新增的样式
+以下是完整的修改后的 SCSS 代码：
+
+scss
+复制代码
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-bottom: 20px; /* 底部导航栏的高度 */
+}
+
+.search-area {
+  display: flex;
+  height: 30px; /* 将搜索框的高度设为30px */
+  align-items: center;
+  padding: 10px;
+  position: relative;
+  border: 1px solid #00aa86; /* 添加钝角边框 */
+  border-radius: 14px; /* 设置边框的钝角半径 */
+  margin-bottom: 8px; /* 添加底部间距 */
+}
+
+.search-area input[type="text"] {
+  background-color: #f0f0f0;
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 2px;
+  font-size: 16px;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.search-area input[type="text"]:focus {
+  outline: none; /* 去除默认的聚焦边框 */
+  transition: border-bottom 0.3s ease; /* 添加过渡效果 */
+}
+
+.search-area .search-icon {
+  width: auto; /* 设置搜索icon宽度为自适应 */
+  height: 30px; /* 将搜索框的高度设为60px */
+  margin-left: 5px; /* 调整搜索icon与搜索框的间距 */
+  transform-origin: center; /* 设置变换原点为中心 */
+  transition: transform 0.3s ease, border-color 0.3s ease; /* 添加过渡效果 */
+  cursor: pointer;
+}
+
+.search-area .search-icon:hover {
+  transform: scale(1.1); /* 放大图标 */
+  border-color: #00aa86; /* 边框颜色变为绿色 */
+}
+
+.search-button {
+  background-color: #ccc;
+  padding: 5px;
+  border: none;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+
+.shopping-area {
+  flex: 1;
+  //border: 1px solid pink;
+  flex-wrap: wrap;
+  .filter-tags {
+    display: flex;
+    flex-wrap: wrap;
+    //border: 1px solid purple;
+    .filter-tag {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: calc(33.33% - 10px); /* 保留了间距 */
+      height: 40px;
+      //border: 1px solid red;
+      border-radius: 5px;
+      margin-right: 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .image-grid {
+    margin-top: 0px;
+    //border: 1px solid black; /* 添加了边框样式 */
+    margin-bottom: 40px;
+    padding: 0;
+    li {
+      display: flex;
+      justify: space-between;
+      margin-top: 8px;
+      .image-item {
+        border: 1px solid blue; /* 添加了边框样式 */
+        flex: 1;
+        margin-right: 8px;
+
+        img {
+          border: 1px solid green; /* 添加了边框样式 */
+          max-width: 100%;
+          height: auto;
+        }
+      }
+      .image-item2 {
+        border: 1px solid blue; /* 添加了边框样式 */
+        flex: 1;
+      }
+    }
+  }
+}
+.bottom-navigation {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #ffffff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  border: none;
+}
+.tab-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 50px;
+  background-color: transparent;
+  border: none;
+  font-size: 4px !important;
+}
+
+/* 新增的样式 */
+.filter-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  
+  button {
+    border: none;
+    color: rgb(98, 101, 98);
+    background: none;
+    font-weight: normal;
+    font-size: 16px;
+    margin-right: 10px;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    transition: all 0.2s ease;
+    
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: green;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    &:hover {
+      color: black; /* 文字变为黑色 */
+    }
+  }
+}
+.filter-tags .filter-tag:hover{
+  transform: scale(1.1);
+  color:black;
+}
+
 img {
   max-width: 100%;
   height: auto;
 }
+
 li {
-  list-style-type: none; /* 去除列表项黑点 */
+  list-style-type: none;
 }

CraftsMart-angular/src/modules/craftsmart/home/home.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
 
+
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;

CraftsMart-angular/src/modules/craftsmart/home/home.component.ts

@@ -1,11 +1,11 @@
 import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
-interface home {
+interface Home {
   name: string;
   description: string;
-  image: string;
+  imageUrl: string;
 }
 
 @Component({
@@ -14,58 +14,62 @@ interface home {
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent {
-  homes: home[] = [
+  homes: Home[] = [
     {
       name: 'Digital Collectible 1',
       description: 'This is the first digital collectible.',
-      image: 'https://example.com/digital-collectible1.jpg'
+      imageUrl: 'https://example.com/digital-collectible1.jpg'
     },
     {
       name: 'Digital Collectible 2',
       description: 'This is the second digital collectible.',
-      image: 'https://example.com/digital-collectible-2.jpg'
+      imageUrl: 'https://example.com/digital-collectible-2.jpg'
     },
     {
       name: 'Digital Collectible 3',
       description: 'This is the third digital collectible.',
-      image: 'https://example.com/digital-collectible-3.jpg'
-    },
-    {
-      name: 'Digital Collectible 4',
-      description: 'This is the third digital collectible.',
-      image: 'https://example.com/digital-collectible-3.jpg'
-    },
-    {
-      name: 'Digital Collectible 5',
-      description: 'This is the third digital collectible.',
-      image: 'https://example.com/digital-collectible-3.jpg'
-    },
-    {
-      name: 'Digital Collectible 6',
-      description: 'This is the third digital collectible.',
-      image: 'https://example.com/digital-collectible-3.jpg'
-    },
-    {
-      name: 'Digital Collectible 3',
-      description: 'This is the third digital collectible.',
-      image: 'https://example.com/digital-collectible-3.jpg'
-    },
-    {
-      name: 'Digital Collectible 4',
-      description: 'This is the third digital collectible.',
-      image: 'https://example.com/digital-collectible-3.jpg'
+      imageUrl: 'https://example.com/digital-collectible-3.jpg'
     },
     // 添加更多的数字藏品数据...
   ];
+  itemList: Home[] = []; // 初始化物品列表为空
   sanitizer: DomSanitizer;
 
   constructor(private _sanitizer: DomSanitizer) {
-    this.sanitizer = _sanitizer;}
+    this.sanitizer = _sanitizer as DomSanitizer;
+    this.showItemList('推荐'); // 默认显示推荐物品列表
+  }
+
+  getSafeImageUrl(url: string): SafeResourceUrl {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
 
+  showItemList(type: string) {
+    if (type === '热门') {
+      // 通过你的自定义逻辑获取热门物品列表
+      this.itemList = this.homes.filter(home => {
+        // 这里可以根据需要筛选出对应类型的物品
+        return home.name === 'Digital Collectible 1' || home.name === 'Digital Collectible 2';
+      });
+    } else if (type === '推荐') {
+      // 通过你的自定义逻辑获取推荐物品列表
+      this.itemList = this.homes.filter(home => {
+        // 这里可以根据需要筛选出对应类型的物品
+        return home.name === 'Digital Collectible 1' || home.name === 'Digital Collectible 3';
+      });
+    } else if (type === '活动') {
+      // 通过你的自定义逻辑获取活动物品列表
+      this.itemList = this.homes.filter(home => {
+        // 这里可以根据需要筛选出对应类型的物品
+        return home.name === 'Digital Collectible 2' || home.name === 'Digital Collectible 3';
+      });
+    }
+  }
 }
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [HomeComponent]
+  declarations: [HomeComponent],
+  exports: [HomeComponent]
 })
 export class HomeModule { }

CraftsMart-angular/src/modules/craftsmart/page-cart/page-cart.component.scss

@@ -0,0 +1,4 @@
+.active {
+    background-color: yellow;
+    color: white;
+  }

CraftsMart-angular/src/modules/craftsmart/page-mine/page-mine.component.scss

@@ -1,4 +0,0 @@
-.active {
-    background-color: yellow;
-    color: white;
-  }

app-backend/page-js-sdk/showcase.js

@@ -0,0 +1,3 @@
+const Parse = require("parse/node")
+Parse.serverURL = "http://metapunk.cn:9999/parse" // 配置服务器地址
+Parse.initialize("dev") // 配置应用名称