|
|
@@ -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; /* 去除列表项黑点 */
|
|
|
+}
|
