init: web3-0210427

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

@@ -6,7 +6,6 @@
       <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">
@@ -21,8 +20,13 @@
       <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>
+          <p>{{ homeObj.name }}</p>
+        </div>
+        <div class="image-item2">
+          <img [src]="sanitizer.bypassSecurityTrustUrl('./assets/image/cp1.jpg')" alt="Digital Collectible">
+          <p>{{ homeObj.description }}</p>
+          <p>{{ homeObj.name }}</p>
         </div>
       </li>
     </ul>

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

@@ -1,60 +1,67 @@
 .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;
-  }
+  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: solid red;
+  border: solid pink;
   flex-wrap: wrap;
   .filter-tags {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: 20px;
+    border: solid purple;
     .filter-tag {
       display: flex;
       align-items: center;
@@ -64,28 +71,37 @@
       border: 1px solid red;
       border-radius: 5px;
       margin-right: 10px;
-      margin-bottom: 10px;
+
       &:last-child {
         margin-right: 0;
       }
     }
   }
-  /* 购物区域样式 */
   .image-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 5px; /* 添加列间距 */
-    border: 1px solid red; /* 添加了边框样式 */
+    margin-top: 0px;
+    border: 1px solid black; /* 添加了边框样式 */
     margin-bottom: 40px;
-  }
-  .image-item {
-    border: 1px solid blue; /* 添加了边框样式 */
-  }
-  .image-item img {
-    border: 1px solid green; /* 添加了边框样式 */
-    max-width: 100%;
-    height: auto;
-    margin: auto;
+    padding: 0;
+    li {
+      display: flex;
+      justify-content: 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 {
@@ -101,7 +117,7 @@
   border: none;
 }
 .tab-button {
- display: flex;
+  display: flex;
   flex-direction: column;
   align-items: center;
   height: 50px;