navigation/pages/main/main.wxml

<!--pages/main/main.wxml-->
<view class="indexContainer">
    <!-- 轮播图区域 -->
    <view>
        <view class="noBanners" wx:if="{{bannerList.length == 0}}">
            <text>暂无图片展示</text>
        </view>
        <view wx:else>
            <swiper class="banners" autoplay circular interval="5000" indicator-dots="true" indicator-color="ivory" indicator-active-color="#d43c33" next-margin="0rpx" previous-margin="0rpx">
                <swiper-item wx:for="{{bannerList}}" wx:key="key" bindtap="toPreviewImage">
                    <image src="{{item.iconPath}}"></image>
                </swiper-item>
            </swiper>
        </view>
    </view>

    <!-- 导航区 -->
    <view class="navWrapper">
        <view class="navList">
            <view class="individual" bindtap="toMainIntro">
                <image class="iconImg" src="../../images/naxi2.png" mode="widthFix" />
                <text class="individualText">多彩纳溪</text>
            </view>
            <view class="individual" bindtap="toSecondIntro">
                <image class="iconImg" src="../../images/macun.png" mode="widthFix" />
                <text class="individualText">秀美马村</text>
            </view>
            <view class="individual" bindtap="toScenicList">
                <image class="iconImg" src="../../images/macun_scenery.png" mode="widthFix" />
                <text class="individualText">马村景点</text>
            </view>
            <view class="individual" bindtap="toRecommendFood">
                <image class="iconImg" src="../../images/food.png" mode="widthFix" />
                <text class="individualText">餐饮住宿</text>
            </view>
            <view class="individual" bindtap="toNavMap">
                <image class="iconImg" src="../../images/navigate.png" mode="widthFix" />
                <text class="individualText">景点导航</text>
            </view>
            <view class="individual">
                <image class="iconImg" src="../../images/techan.png" mode="widthFix" />
                <text class="individualText">特色农产</text>
            </view>
            <view class="individual">
                <image class="iconImg" src="../../images/scenery.png" mode="widthFix" />
                <text class="individualText">周边景区</text>
            </view>
            <view class="individual">
                <image class="iconImg" src="../../images/activity.png" mode="widthFix" />
                <text class="individualText">热门活动</text>
            </view>
        </view>
    </view>

    <!-- 纳溪介绍 -->
    <view class="naxiWrapper" bindtap="toMainIntro">
        <view class="naxiIntro">
            <view class="naxiTitle">
                纳溪介绍
            </view>
            <view class="naxiDetail">
                <view class="naxiDetailTitle">
                    详情
                </view>
                <image class="imgIcon" src="../../images/right_two.png" mode="" />
            </view>
        </view>
        <image class="naxiImg" src="{{naxiImgUrl}}" mode="widthFix" />
    </view>

    <!-- 马村介绍 -->
    <view class="naxiIntroWrapper" bindtap="toSecondIntro">
        <view class="naxiIntro">
            <view class="naxiTitle">
                马村介绍
            </view>
            <view class="naxiDetail">
                <view class="naxiDetailTitle">
                    详情
                </view>
                <image class="imgIcon" src="../../images/right_two.png" mode="" />
            </view>
        </view>
        <image class="naxiImg" src="{{macunImgUrl}}" mode="widthFix" />
    </view>

    <!-- 景点介绍 -->
    <view class="naxiIntroWrapper" bindtap="toScenicList">
        <view class="naxiIntro">
            <view class="naxiTitle">
                马村景点
            </view>
            <view class="naxiDetail">
                <view class="naxiDetailTitle">
                    更多
                </view>
                <image class="imgIcon" src="../../images/right_two.png"/>
            </view>
        </view>
        <view class="scenicImgWrapper">
            <view class="leftWrapper">
                <view class="imgLeft" wx:for="{{leftImg}}" wx:key="key" data-item="{{item}}">
                    <image class="imgLeftDetail" src="{{item.coverImage}}" mode="widthFix"/>
                    <view class="scenicText">
                        <text class="hotTitle">{{item.title}}</text>
                        <text class="hotText">热度：{{item.viewCount >= 10000 ? item.viewCount/10000+'万' : item.viewCount}}</text>
                    </view>
                </view>
            </view>
            <view class="rightWrapper">
                <view class="imgRight" wx:for="{{rightImg}}" wx:key="key" data-item="{{item}}">
                    <image class="imgRightDetail" src="{{item.coverImage}}"/>
                    <view class="scenicText">
                        <text class="hotTitle">{{item.title}}</text>
                        <text class="hotText">热度：：{{item.viewCount >= 10000 ? item.viewCount/10000+'万' : item.viewCount}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>

    <!-- 美食推荐 -->
    <view class="naxiIntroWrapper" bindtap="toRecommendFood">
        <view class="naxiIntro">
            <view class="naxiTitle">
                餐饮美食
            </view>
            <view class="naxiDetail">
                <view class="naxiDetailTitle">
                    详情
                </view>
                <image class="imgIcon" src="../../images/right_two.png" />
            </view>
        </view>
        <view class="foodWrapper" wx:for="{{hotFoodList}}" wx:key="key" data-item="{{item}}">
            <view class="foodImg">
                <image class="foodImgDetail" src="{{item.coverImage}}" />
            </view>
            <view>
                <view class="foodText">
                    <text class="foodTitle">{{item.title}}</text>
                    <text class="foodDish">招牌菜：{{item.dish == null ? '-' : item.dish}}</text>
                    <text class="foodHotText">热度：{{item.viewCount}}</text>
                </view>
            </view>
        </view>
    </view>

    <!-- 周边景区 -->
    <view class="otherScenic">
        <view class="naxiTitle">
            周边景区
        </view>
        <view class="otherScenicList">
            <view class="otherScenicDetail">
                <image class="scenicImg" src="../../images/tian.jpg" mode="widthFix" />
                <text class="otherScenicTitle">天仙硐风景区</text>
            </view>
            <view class="otherScenicDetail">
                <image class="scenicImg" src="../../images/feng.jpg" mode="widthFix" />
                <text class="otherScenicTitle">凤凰湖风景区</text>
            </view>
            <view class="otherScenicDetail">
                <image class="scenicImg" src="../../images/hua.jpg" mode="widthFix" />
                <text class="otherScenicTitle">花田酒地风景区</text>
            </view>
        </view>
    </view>

</view>