首页导航

@@ -5,6 +5,17 @@ const app = getApp()
 Page({
 Page({
     data: {
     data: {
         slide: [{image: '../../images/banner.png'}, {image: '../../images/banner.png'}],
         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',
         motto: 'Hello World',
         userInfo: {},
         userInfo: {},
         hasUserInfo: false,
         hasUserInfo: false,

@@ -7,7 +7,10 @@
                 <text>北京</text>
                 <text>北京</text>
                 <view class="iconfont icon-arrow-down"></view>
                 <view class="iconfont icon-arrow-down"></view>
             </view>
             </view>
+            <view class="right">
                 <input type="text"/>
                 <input type="text"/>
+                <view class="iconfont icon-arrow-down"></view>
+            </view>
         </view>
         </view>
         <swiper indicator-dots="{{true}}"
         <swiper indicator-dots="{{true}}"
                 autoplay="{{true}}" interval="3000" duration="1000">
                 autoplay="{{true}}" interval="3000" duration="1000">
@@ -20,4 +23,13 @@
             </block>
             </block>
         </swiper>
         </swiper>
     </view>
     </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>
 </view>
 </view>

@@ -31,14 +31,23 @@
   color: #ffffff;
   color: #ffffff;
   font-size: 28rpx;
   font-size: 28rpx;
 }
 }
-.position input {
+.position .right {
     width: 478rpx;
     width: 478rpx;
     height: 52rpx;
     height: 52rpx;
+    background-color: rgba(255,255,255,0.35);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     border-radius: 10rpx;
     border-radius: 10rpx;
+    padding: 0 20rpx;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.position input {
   color: #ffffff;
   color: #ffffff;
   padding-left: 20rpx;
   padding-left: 20rpx;
   font-size: 28rpx;
   font-size: 28rpx;
-  background-color: rgba(255,255,255,0.3);
 }
 }
 swiper {
 swiper {
   width: 100%;
   width: 100%;
@@ -49,3 +58,72 @@ swiper {
   width: 100%;
   width: 100%;
   height: 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;
+}