|
|
@@ -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;
|
