首页导航

@@ -5,6 +5,17 @@ const app = getApp()
 Page({
     data: {
         slide: [{image: '../../images/banner.png'}, {image: '../../images/banner.png'}],
+        images: [{src:'../../images/duantu@2x.png',text:'短途郊游'},
+            {src:'../../images/changtu@2x.png',text:'长途旅游'},
+            {src:'../../images/finecanting@2x.png',text:'Fine Dining 餐厅'},
+            {src:'../../images/huwai@2x.png',text:'户外运动'},
+            {src:'../../images/juhui@2x.png',text:'聚会'},
+            {src:'../../images/yinyuejie@2x.png',text:'音乐节'},
+            {src:'../../images/dianying@2x.png',text:'电影'},
+            {src:'../../images/qingshe@2x.png',text:'轻奢餐厅'},
+            {src:'../../images/zhanlan@2x.png',text:'展览'},
+            {src:'../../images/wutaiju@2x.png',text:'舞台剧'},
+        ],
         motto: 'Hello World',
         userInfo: {},
         hasUserInfo: false,

 <!--index.wxml-->
 <view class="container">
-  <view class="head">
-    <view class="position">
-      <view class="left">
-        <view class="iconfont icon-location"></view>
-        <text>北京</text>
-        <view class="iconfont icon-arrow-down"></view>
-      </view>
-      <input type="text"/>
+    <view class="head">
+        <view class="position">
+            <view class="left">
+                <view class="iconfont icon-location"></view>
+                <text>北京</text>
+                <view class="iconfont icon-arrow-down"></view>
+            </view>
+            <view class="right">
+                <input type="text"/>
+                <view class="iconfont icon-arrow-down"></view>
+            </view>
+        </view>
+        <swiper indicator-dots="{{true}}"
+                autoplay="{{true}}" interval="3000" duration="1000">
+            <block wx:for="{{slide}}" wx:key="index">
+                <navigator url="{{item.url}}" hover-class="navigator-hover">
+                    <swiper-item>
+                        <image src="{{item.image}}" class="slide-image"/>
+                    </swiper-item>
+                </navigator>
+            </block>
+        </swiper>
+    </view>
+
+    <view class="padding-box">
+        <view class="navigator-box">
+            <view class="img-box" wx:for="{{images}}" wx:key="index">
+                <image src="{{item.src}}"></image>
+                <view class="text">{{item.text}}</view>
+            </view>
+        </view>
     </view>
-    <swiper indicator-dots="{{true}}"
-            autoplay="{{true}}" interval="3000" duration="1000">
-      <block wx:for="{{slide}}" wx:key="index">
-        <navigator url="{{item.url}}" hover-class="navigator-hover">
-          <swiper-item>
-            <image src="{{item.image}}" class="slide-image"/>
-          </swiper-item>
-        </navigator>
-      </block>
-    </swiper>
-  </view>
 </view>

@@ -31,14 +31,23 @@
   color: #ffffff;
   font-size: 28rpx;
 }
+.position .right {
+    width: 478rpx;
+    height: 52rpx;
+    background-color: rgba(255,255,255,0.35);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 10rpx;
+    padding: 0 20rpx;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
 .position input {
-  width: 478rpx;
-  height: 52rpx;
-  border-radius: 10rpx;
   color: #ffffff;
   padding-left: 20rpx;
   font-size: 28rpx;
-  background-color: rgba(255,255,255,0.3);
 }
 swiper {
   width: 100%;
@@ -48,4 +57,73 @@ swiper {
 .slide-image {
   width: 100%;
   height: 100%;
+}
+.padding-box {
+    width: 100%;
+    height: 272rpx;
+    padding: 0 22rpx;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    top: -22rpx;
+}
+.navigator-box {
+    width: 100%;
+    height: 272rpx;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content:stretch;
+    background-color: #fff;
+    border-radius: 10rpx;
+    padding: 20rpx 46rpx;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    box-shadow: 2rpx 8rpx 38rpx rgba(89, 89, 89, 0.14);
+}
+.navigator-box .img-box {
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*align-items: center;*/
+    /*justify-content: center;*/
+    /*margin-right: 24rpx;*/
+    display: inline-block;
+    width: 18%;
+    height: 48%;
+    margin: 0 auto 8rpx auto;
+    /*border: 1px solid #000;*/
+    text-align: center;
+}
+.navigator-box .img-box:nth-child(3) {
+    width: 24%;
+}
+.navigator-box .img-box:nth-child(5),.navigator-box .img-box:nth-child(10) {
+    /*margin-right: 0;*/
+}
+.navigator-box .img-box:nth-child(6) {
+    width: 11%;
+}
+.navigator-box .img-box:nth-child(7) {
+    width: 12%;
+}
+.navigator-box .img-box:nth-child(8) {
+    width: 16%;
+}
+.navigator-box .img-box:nth-child(9) {
+    width: 12%;
+}
+.navigator-box .img-box:nth-child(10) {
+    width: 12%;
+}
+.img-box image {
+    width: 60rpx;
+    height: 60rpx;
+    margin-bottom: 10rpx;
+}
+.img-box .text {
+    font-size: 18rpx;
+    color: #333333;
 }
\ No newline at end of file