Browse Source

init: web3-0210427

林财明 1 year ago
parent
commit
46a244ced8

+ 25 - 24
CraftsMart-angular/src/modules/craftsmart/home/home.component.html

@@ -1,30 +1,31 @@
 <div class="page">
-    <!-- 搜索区域 -->
-    <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"><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>
-  
-    <!-- 购物区域 -->
-    <div class="shopping-area">
-      <div class="filter-tags">
-        <!-- 筛选标签 -->
-      </div>
-      <ul class="item-type-list">
-        <!-- 物品类型列表 -->
-      </ul>
-    </div>
-    
+  <!-- 搜索区域 -->
+  <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">
+      <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>
 
-    <div *ngFor="let home of homes">
-      <div>
-        <h2>{{ home.name }}</h2>
-        <p>{{ home.description }}</p>
-        <img src="../../../assets/image/cp1.jpg" alt="Home Image" />
-      </div>
+  <!-- 购物区域 -->
+  <div class="shopping-area">
+    <div class="filter-tags">
+      <!-- 筛选标签 -->
+      <div class="filter-tag">热门</div>
+      <div class="filter-tag">推荐</div>
+      <div class="filter-tag">活动</div>
     </div>
-  
 
+    <ul class="image-grid">
+      <!-- 物品类型列表 -->
+      <li *ngFor="let homeObj of homes">
+        <div class="image-item">
+          <img [src]="sanitizer.bypassSecurityTrustUrl('./assets/image/cp1.jpg')" alt="Digital Collectible">
+          <h4>{{ homeObj.name }}</h4>
+          <p>{{ homeObj.description }}</p>
+        </div>
+      </li>
+    </ul>
   </div>
-  
+</div>
   

+ 83 - 35
CraftsMart-angular/src/modules/craftsmart/home/home.component.scss

@@ -2,34 +2,43 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    padding-bottom: 60px; /* 底部导航栏的高度 */
+    padding-bottom: 20px; /* 底部导航栏的高度 */
   }
-  
   .search-area {
     display: flex;
-    height: 30px; /* 将搜索框的高度设为60px */
+    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: 4px;
+    border-radius: 2px;
     font-size: 16px;
     text-align: left;
     box-sizing: border-box;
   }
-  
-  .search-icon {
+  .search-area input[type="text"]:focus {
+    outline: none; /* 去除默认的聚焦边框 */
+    transition: border-bottom 0.3s ease; /* 添加过渡效果 */
+  }
+  .search-area .search-icon {
     width: auto; /* 设置搜索icon宽度为自适应 */
     height: 30px; /* 将搜索框的高度设为60px */
-    fill: #00aa86;
     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;
@@ -38,33 +47,72 @@
     border-radius: 5px;
     margin-left: 10px;
   }
-  
-  .shopping-area {
-    flex: 1;
-    /* 购物区域样式 */
-  }
-
-  .bottom-navigation {
+.shopping-area {
+  flex: 1;
+  border: solid red;
+  flex-wrap: wrap;
+  .filter-tags {
     display: flex;
-    justify-content: space-around;
-    align-items: center;
-    background-color: #ffffff;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    border: none; /* 去除边框 */
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+    .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;
+      margin-bottom: 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
-  
-  .tab-button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 50px;
-    background-color: transparent; /* 设置为透明背景,去除黑边 */
-    border: none; /* 去除边框 */
-    font-size: 4px !important; /* 使用!important确保优先级 */
+  /* 购物区域样式 */
+  .image-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 5px; /* 添加列间距 */
+    border: 1px solid red; /* 添加了边框样式 */
+    margin-bottom: 40px;
+  }
+  .image-item {
+    border: 1px solid blue; /* 添加了边框样式 */
+  }
+  .image-item img {
+    border: 1px solid green; /* 添加了边框样式 */
+    max-width: 100%;
+    height: auto;
+    margin: auto;
   }
-  
-  
+}
+.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;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+li {
+  list-style-type: none; /* 去除列表项黑点 */
+}

+ 32 - 1
CraftsMart-angular/src/modules/craftsmart/home/home.component.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
 
 interface home {
   name: string;
@@ -28,9 +29,39 @@ export class HomeComponent {
       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'
+    },
     // 添加更多的数字藏品数据...
   ];
+  sanitizer: DomSanitizer;
+
+  constructor(private _sanitizer: DomSanitizer) {
+    this.sanitizer = _sanitizer;}
+
 }
 
 @NgModule({