<view class="indexContainer">
  <!-- 轮播图区域 -->
  <swiper class="banners" indicator-dots indicator-color='ivory' indicator-active-color='#d43c33'>
    <swiper-item>
      <image src="/static/images/recommendSong/02.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/static/images/recommendSong/18.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/static/images/recommendSong/recommendSong.jpg"></image>
    </swiper-item>
    
      

  </swiper>

  <!-- 五个图标导航区域 -->
  <view class="navContainer">
    <view class="navItem" bindtap="toRecommendSong">
      <text class="iconfont icon-meirituijian"></text>
      <text>매일 추천</text>
    </view>
    <view class="navItem" bindtap="toOther">
      <text class="iconfont icon-gedan1"></text>
      <text>Other페이지</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-icon-ranking"></text>
      <text>랭킹</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-diantai"></text>
      <text>라디오</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-zhiboguankanliangbofangsheyingshexiangjixianxing"></text>
      <text>생방송</text>
    </view>
  </view>

  <!-- 推荐歌曲区域 -->
  <view class="recommendContainer">
    <!-- 头部区域 -->
    <NavHeader title="노래 추천" nav = "정성껏 추천"></NavHeader>

    <!-- 内容区 -->
    <scroll-view class="recommendScroll" enable-flex scroll-x>
    <view class = "scrollItem">
        <image src="/static/images/recommendSong/05.jpg"></image>
        <text>[欧美私人定制]最懂你的欧美推荐 每日更新35首</text>
   
      </view>
      <view class = "scrollItem">
        <image src="/static/images/recommendSong/12.jpg"></image>
        <text>落日飞车/告五人/事后烟/等</text>
   
      </view>
      <view class = "scrollItem">
        <image src="/static/images/recommendSong/8.jpg"></image>
        <text>韩语OST</text>
   
      </view>
      <view class = "scrollItem">
        <image src="/static/images/recommendSong/4.jpg"></image>
        <text>BILLBOARD冠军单曲</text>
   
      </view>
      <view class = "scrollItem">
        <image src="/static/images/recommendSong/9.jpg"></image>
        <text>"温柔点吧这个世界够浮躁的了"</text>
   
      </view>
      <view class = "scrollItem">
        <image src="/static/images/recommendSong/3.jpg"></image>
        <text>[City Pop]昭和旋律霓虹节拍</text>
   
      </view>
    </scroll-view>

  </view>

  <!-- 排行榜区域 -->
  <view class="topList">
  
    <!-- 头部区域 -->
    <NavHeader title="랭킹" nav="Hot song"></NavHeader>
    <!-- 内容区域 -->

    <swiper class="topListSwiper" circular next-margin="50rpx" previous-margin="50rpx">
      <swiper-item>
        
          
          <view class="musicItem">
            <image src="/static/images/recommendSong/512.jpg"></image>
            <text class="count">1</text>
            <text class="musicName">Little Do You Know - Campsite Dream</text>
          </view>
          <view class="musicItem">
            <image src="/static/images/recommendSong/22.jpg"></image>
            <text class="count">2</text>
            <text class="musicName">Childhood Dreams</text>
          </view>
          <view class="musicItem">
            <image src="/static/images/recommendSong/33.jpg"></image>
            <text class="count">3</text>
            <text class="musicName">I Will Be OK</text>
          </view>
          <view class="musicItem">
            <image src="/static/images/recommendSong/16.jpg"></image>
            <text class="count">4</text>
            <text class="musicName">下坠Falling-Corki刘宗鑫</text>
          </view>

      </swiper-item>
    </swiper>
  </view>
</view>