美化小程序首页

wx-mall/pages/index/index.json

@@ -1,2 +1,2 @@
 {
-  "navigationBarTitleText": "易买"}
+  "navigationBarTitleText": "前海电商跨境"}

wx-mall/pages/index/index.wxml

@@ -17,30 +17,31 @@
     </view>
   </view>
 
+  <view class="home-header">
+    <view bindtap="handleStore" class="current-store arrow arrow-down" wx:if="{{isMapShow == 1}}">{{ storeName }}</view>
+    <view class="current-store" wx:if="{{isMapShow == 0}}">{{ storeName }}</view>
+  </view>
   <view class="search-header">
     <view class="input-box">
       <input name="input" class="keywrod" value="搜索商品" confirm-type="search" bindtap="goSearch" />
     </view>
-    <image src="../../static/images/service-sao.png" class="search-icon-shop" bindtap="scanGoodsCode"></image>
-  </view>
-  <view class="home-header">
-    <view bindtap="handleStore" class="current-store arrow arrow-down" wx:if="{{isMapShow == 1}}">{{ storeName }}</view>
-    <view class="current-store" wx:if="{{isMapShow == 0}}">{{ storeName }}</view>
+    <image src="../../static/images/service-scan-code-gray-1.png" class="search-icon-shop" bindtap="scanGoodsCode"></image>
   </view>
 
   <swiper class="banner" indicator-dots="true" autoplay="true" interval="15000" duration="750">
-    <swiper-item wx:for="{{banner}}" wx:key="{{item.id}}">
-      <scroll-view class='contents fade_in'>
-        <navigator url="{{item.link}}">
-          <image lazy-load='true' class="swiper-item" src="{{item.imageUrl}}?x-oss-process=image/resize,h_500" mode="aspectFill" background-size="cover"></image>
-        </navigator>
-      </scroll-view>
-    </swiper-item>
-  </swiper>
+      <swiper-item wx:for="{{banner}}" wx:key="{{item.id}}">
+        <scroll-view class='contents fade_in'>
+          <navigator url="{{item.link}}">
+            <image lazy-load='true' class="swiper-item" src="{{item.imageUrl}}?x-oss-process=image/resize,h_500" mode="aspectFill" background-size="cover"></image>
+          </navigator>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+
   <view class="m-menu">
     <navigator class="itemb" bindtap="goCatalog" data-goods-Biz-Type="00">
-      <image src="../../static/images/service-bao.png" background-size="cover"></image>
-      <text>保税仓</text>
+      <image src="../../static/images/service-cross-border.png" background-size="cover"></image>
+      <text>跨境购</text>
     </navigator>
     <!-- <navigator class="itemb" bindtap="goCatalog" data-goods-Biz-Type="02">
       <image src="../../static/images/service-zs.png" background-size="cover"></image>
@@ -51,11 +52,11 @@
       <text>现场速递</text>
     </navigator> -->
     <navigator class="itemb" bindtap="goCatalog" data-goods-Biz-Type="11">
-      <image src="../../static/images/service-ptsp.png" background-size="cover"></image>
+      <image src="../../static/images/service-general-goods.png" background-size="cover"></image>
       <text>普通商品</text>
     </navigator>
     <navigator class="itemb" bindtap="scanGoodsCode">
-      <image src="../../static/images/service-smgw.png" background-size="cover"></image>
+      <image src="../../static/images/service-scan-code.png" background-size="cover"></image>
       <text>扫码购物</text>
     </navigator>
     <!-- <navigator class="itemb" bindtap="shows">
@@ -164,17 +165,22 @@
       </view>
     </view>
   </view> -->
-  <view class="a-section a-popular" wx:if="{{hotGoods.length > 0}}">
+  <view class="a-section a-center" wx:if="{{hotGoods.length > 0}}">
     <view class="h">
       <view>
         <navigator url="../hotGoods/hotGoods">
-          <text class="txt">今日热销</text>
+          <text class="txt">精选商品</text>
+        </navigator>
+      </view>
+      <view>
+        <navigator url="../hotGoods/hotGoods">
+          <image class="more-1" src="../../static/images/service-more-grey-1.png"></image>
         </navigator>
       </view>
     </view>
     <view class="b">
       <view class="item" wx:for="{{hotGoods}}" wx:for-index="index" wx:for-item="item" wx:key="{{item.id}}">
-        <scroll-view class='contents fade_in'>
+        <view class='contents fade_in'>
           <view class="c">
             <navigator url="/pages/goods/goods?id={{item.id}}&&storeId={{item.storeId}}&&paramView=hotGoods">
               <view class="left">
@@ -206,7 +212,7 @@
               </view>
             </view>
           </view>
-        </scroll-view>
+        </view>
 
       </view>
     </view>

wx-mall/pages/index/index.wxss

@@ -1,9 +1,3 @@
-.banner {
-  width: 750rpx;
-  height: 365rpx;
-  padding-top: 130rpx;
-}
-
 .discount-dialog {
   position: fixed;
   z-index: 5000;
@@ -41,14 +35,14 @@
 }
 
 .home-header {
-  position: fixed;
+  /* position: fixed; */
   width: 750rpx;
   height: 40rpx;
   display: flex;
   justify-content: left;
   align-items: left;
   background-color: #fff;
-  z-index: 98;
+  /* z-index: 98; */
 }
 
 .current-store {
@@ -64,19 +58,103 @@
   margin-left: auto;
 }
 
+
+.search-header {
+  /* position: fixed; */
+  /* top: 40rpx; */
+  width: 750rpx;
+  height: 91rpx;
+  display: flex;
+  background: #fff;
+  padding: 0 31.25rpx;
+  font-size: 29rpx;
+  color: #333;
+  /* z-index: 99; */
+}
+
+.search-header .input-box {
+  position: relative;
+  margin-top: 16rpx;
+  float: left;
+  width: 0;
+  flex: 1;
+  height: 59rpx;
+  line-height: 59rpx;
+  padding: 0 20rpx;
+  background: #f4f4f4;
+  color: #999;
+}
+
+
+.search-header .icon {
+  position: absolute;
+  top: 14rpx;
+  left: 20rpx;
+  width: 31rpx;
+  height: 31rpx;
+}
+
+.search-header .del {
+  position: absolute;
+  top: 3rpx;
+  right: 10rpx;
+  width: 53rpx;
+  height: 53rpx;
+  z-index: 10;
+}
+
+.search-header .keywrod {
+  position: absolute;
+  top: 0;
+  width: 506rpx;
+  height: 59rpx;
+  font-size: 12px;
+}
+
+.search-header .right {
+  margin-top: 24rpx;
+  margin-left: 31rpx;
+  margin-right: 6rpx;
+  width: 58rpx;
+  height: 43rpx;
+  line-height: 43rpx;
+  float: right;
+}
+
+.search-icon-shop {
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 15rpx;
+  margin-top: 20rpx;
+}
+
+.banner {
+  width: 710rpx;
+  height: 365rpx;
+  background-color: #fff;
+  /* display: flex; */
+  justify-content: center;
+  margin: 10rpx auto 0 auto;
+  border-radius: 15rpx;
+  box-shadow: 3px 3px 7px rgb(224, 221, 221);
+}
+
 .banner image {
   width: 100%;
   height: 365rpx;
 }
 
 .m-menu {
-  display: flex;
   height: 155rpx;
-  width: 750rpx;
+  width: 710rpx;
   flex-flow: row nowrap;
   align-items: center;
-  justify-content: space-between;
   background-color: #fff;
+  display: flex;
+  justify-content: center;
+  margin: 10rpx auto 0 auto;
+  border-radius: 15rpx;
+  box-shadow: 3px 3px 7px rgb(224, 221, 221);
 }
 
 .m-menu .item {
@@ -107,40 +185,141 @@
   color: #333;
 }
 
+
 .a-section {
-  width: 750rpx;
+  width: 710rpx;
   height: auto;
-  overflow: hidden;
-  background: #fff;
-  color: #333;
-  margin-top: 10rpx;
+  margin: 10rpx auto 0 auto;
+  justify-content: center;
+  border-radius: 15rpx;
+  box-shadow: 3px 3px 7px rgb(224, 221, 221);
 }
 
 .a-section .h {
+  width: 710rpx;
+  height: 90rpx;
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
-  justify-content: center;
-  height: 90rpx;
+  background: #fff;
+  justify-content: space-between;
+  border-radius: 15rpx;
+  box-shadow: 3px 3px 7px rgb(224, 221, 221);
 }
 
 .a-section .h .txt {
-  padding-right: 30rpx;
-  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2W6ATlkvAAAA_rntq4s180.png) right 4rpx no-repeat;
-  background-size: 16.656rpx 27rpx;
+  padding-left: 40rpx;
   display: inline-block;
   height: 36rpx;
+  line-height: 36rpx;
   font-size: 33rpx;
+}
+.a-section .h .more-1 {
+  padding-right: 30rpx;
+  justify-content: rigth;
+  width: 60rpx;
+  height: 36rpx;
   line-height: 36rpx;
 }
 
-.a-brand .b {
-  width: 750rpx;
+.a-section .b {
   height: auto;
+  justify-content: center;
+  margin: 10rpx auto 0 auto;
+}
+
+.a-section .b .item {
+  margin-top: 10rpx;
+  height: 254rpx;
+  width: 710rpx;
+  background: #fff;
+  border-radius: 15rpx;
+  box-shadow: 3px 3px 7px rgb(224, 221, 221);
+}
+
+.a-section .b .item .c .left {
+  width: 240rpx;
+  height: 240rpx;
+  float: left;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border-radius: 20rpx;
+  margin-top: 36rpx; */
+}
+
+.touming-img{
+  opacity:0.6;
+  filter:alpha(opacity=60);
+}
+
+.a-section .b .img {
+  margin-top: 10rpx;
+  margin-right: 15rpx;
+  float: left;
+  width: 240rpx;
+  height: 240rpx;
+  background-size: 140rpx 140rpx;
+}
+
+.a-section .b .right {
+  float: left;
+  height: 264rpx;
+  width: 400rpx;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.a-section .b .text {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  justify-content: center;
   overflow: hidden;
-  position: relative;
+  height: 264rpx;
+  width: 446rpx;
+  margin-left:30rpx;
+}
+
+.a-section .b .name {
+  /* width: 456rpx; */
+  display: block;
+  color: #333;
+  line-height: 50rpx;
+  font-size: 30rpx;
+  /* font-weight: bolder; */
+}
+
+.a-section .b .desc {
+  width: 456rpx;
+  display: block;
+  color: #999;
+  line-height: 50rpx;
+  font-size: 25rpx;
+}
+
+.a-section .b .goods-do {
+  display: inline;
 }
 
+.a-section .b .goods-do .price {
+  /* width: 50rpx; */
+  display: inline;
+  color: #b4282d;
+  line-height: 50rpx;
+  font-size:35rpx;
+  /* font-weight: bold; */
+}
+
+.a-section .b .goods-do .org-price {
+  /* width: 40rpx; */
+  display: inline;
+  color: #333;
+  line-height: 50rpx;
+  font-size: 23rpx;
+  margin-left: 16rpx;
+}
+
+
 .a-brand .wrap {
   position: relative;
 }
@@ -261,105 +440,6 @@
   clear: both;
 }
 
-.a-popular {
-  width: 750rpx;
-  height: auto;
-  overflow: hidden;
-}
-.a-popular .b .item .c .left {
-  width: 240rpx;
-  height: 240rpx;
-  float: left;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* border-radius: 20rpx;
-  margin-top: 36rpx; */
-}
-
-.touming-img{
-  opacity:0.6;
-  filter:alpha(opacity=60);
-}
-
-.a-popular .b .item {
-  border-top: 1px solid #d9d9d9;
-  margin: 0 10rpx;
-  height: 254rpx;
-  width: 710rpx;
-  margin-top: 12rpx;
-}
-/* .a-popular .c {
-  width: 240rpx;
-  height: 240rpx;
-} */
-
-.a-popular .b .img {
-  margin-top: 10rpx;
-  margin-right: 15rpx;
-  float: left;
-  width: 240rpx;
-  height: 240rpx;
-  background-size: 140rpx 140rpx;
-}
-
-.a-popular .b .right {
-  float: left;
-  height: 264rpx;
-  width: 400rpx;
-  display: flex;
-  flex-flow: row nowrap;
-}
-
-.a-popular .b .text {
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  height: 264rpx;
-  width: 446rpx;
-  margin-left:30rpx;
-}
-
-.a-popular .b .name {
-  /* width: 456rpx; */
-  display: block;
-  color: #333;
-  line-height: 50rpx;
-  font-size: 30rpx;
-  /* font-weight: bolder; */
-}
-
-.a-popular .b .desc {
-  width: 456rpx;
-  display: block;
-  color: #999;
-  line-height: 50rpx;
-  font-size: 25rpx;
-}
-
-.a-popular .b .goods-do {
-  display: inline;
-}
-
-.a-popular .b .goods-do .price {
-  /* width: 50rpx; */
-  display: inline;
-  color: #b4282d;
-  line-height: 50rpx;
-  font-size:35rpx;
-  /* font-weight: bold; */
-}
-
-.a-popular .b .goods-do .org-price {
-  /* width: 40rpx; */
-  display: inline;
-  color: #333;
-  line-height: 50rpx;
-  font-size: 23rpx;
-  margin-left: 16rpx;
-}
 
 .a-topic .b {
   height: 433rpx;
@@ -601,72 +681,7 @@
   border-radius: 16px 16px 16px 16px;
 }
 
-.search-header .input-box {
-  position: relative;
-  margin-top: 16rpx;
-  float: left;
-  width: 0;
-  flex: 1;
-  height: 59rpx;
-  line-height: 59rpx;
-  padding: 0 20rpx;
-  background: #f4f4f4;
-  color: #999;
-}
-
-.search-header {
-  position: fixed;
-  top: 40rpx;
-  width: 750rpx;
-  height: 91rpx;
-  display: flex;
-  background: #fff;
-  padding: 0 31.25rpx;
-  font-size: 29rpx;
-  color: #333;
-  z-index: 99;
-}
-.search-header .icon {
-  position: absolute;
-  top: 14rpx;
-  left: 20rpx;
-  width: 31rpx;
-  height: 31rpx;
-}
-
-.search-header .del {
-  position: absolute;
-  top: 3rpx;
-  right: 10rpx;
-  width: 53rpx;
-  height: 53rpx;
-  z-index: 10;
-}
-
-.search-header .keywrod {
-  position: absolute;
-  top: 0;
-  width: 506rpx;
-  height: 59rpx;
-  font-size: 12px;
-}
-
-.search-header .right {
-  margin-top: 24rpx;
-  margin-left: 31rpx;
-  margin-right: 6rpx;
-  width: 58rpx;
-  height: 43rpx;
-  line-height: 43rpx;
-  float: right;
-}
 
-.search-icon-shop {
-  width: 40rpx;
-  height: 40rpx;
-  margin-left: 15rpx;
-  margin-top: 20rpx;
-}
 .cart{
   margin-left: 20rpx;
   width: 35rpx;