修改商品搜索列表样式

RefPd · Jun 13, 2022 · 4007093 · 4007093
1 parent 57f2ff9
commit 4007093
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/mall4uni/components/production/production.css b/mall4uni/components/production/production.css
@@ -1,9 +1,9 @@
 
 .prod-items {
-  width: 360rpx;
-  float: left;
+  width: 43%;
+  /* float: left; */
   background: #fff;
-  padding-bottom: 20rpx;
+  margin-bottom: 40rpx;
   box-sizing: border-box;
 }
 
@@ -16,8 +16,8 @@ prod:nth-child(2n) .prod-items {
 }
 
 .hot-imagecont .hotsaleimg {
- width:345rpx;
-height:345rpx;
+ width:100%;
+  height:345rpx;
 
 }
 
@@ -26,6 +26,7 @@ height:345rpx;
   font-size: 28rpx;
   display: -webkit-box;
   word-break: break-all;
+  padding: 0 20rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -47,6 +48,7 @@ height:345rpx;
 .prod-items .hot-text .prod-info {
   font-size: 20rpx;
   color: #777;
+  padding: 0 20rpx;
   margin-top: 8rpx;
 }
 
@@ -59,6 +61,7 @@ height:345rpx;
 
 .prod-items .hot-text .prod-text-info .price {
   color: #eb2444;
+  padding-left: 20rpx;
 }
 .deadline-price{
   font-size: 22rpx;

diff --git a/mall4uni/pages/prod-classify/prod-classify.css b/mall4uni/pages/prod-classify/prod-classify.css
@@ -22,6 +22,12 @@ page {
   background: #f4f4f4;
 }
 
+.prod-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 /* 空 */
 .empty {
   display: block;

diff --git a/mall4uni/pages/search-prod-show/search-prod-show.css b/mall4uni/pages/search-prod-show/search-prod-show.css
@@ -113,22 +113,32 @@ page {
 
 .prod-show {
   background: #fff;
-  margin-top: 160rpx;
+  padding-top: 240rpx;
 }
 
 .prod-show .prod-items {
-  width: 375rpx;
+  /* width: 375rpx; */
   float: left;
   background: #fff;
   padding-bottom: 20rpx;
   box-sizing: border-box;
 }
 
+.prod-items {
+  margin: 0 20rpx;
+}
+
+.hotsale-item-cont {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 /* 纵向列表 */
 
 .prod-list .cont-item {
   padding: 0 20rpx 20rpx 20rpx;
-  margin-top: 180rpx;
+  margin-top: 230rpx;
 }
 
 .prod-list .cont-item .show-item .more-prod-pic {

diff --git a/mall4uni/pages/search-prod-show/search-prod-show.vue b/mall4uni/pages/search-prod-show/search-prod-show.vue
@@ -6,7 +6,7 @@
   <view class="fixed-box">
     <view class="search-bar">
       <view class="search-box">
-        <input class="sear-input" :value="prodName" @input="getSearchContent" confirm-type="search" @confirm="toSearchConfirm"></input>
+        <input placeholder="输入关键字搜索" class="sear-input" :value="prodName" @input="getSearchContent" confirm-type="search" @confirm="toSearchConfirm"></input>
         <image src="/static/images/icon/search.png" class="search-img"></image>
       </view>
       <view class="search-list-img" @tap="changeShowType">