feature：增加木鱼的排行榜界面

app.json

@@ -25,7 +25,9 @@
         "woodenfish/woodenfish",
         "wallpaper/wallpaper",
         "musicscore/musicscore",
-        "firmware/firmware"
+        "firmware/firmware",
+        "woodenfishdetail/detail",
+        "rank/rank"
       ]
     }
   ],

pages/piano/rank/rank.js

@@ -0,0 +1,98 @@
+// pages/piano/rank/rank.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nvabarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '排行榜', //导航栏 中间的标题
+    },
+    userHeader: "https://img2.baidu.com/it/u=555422902,1687437697&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+    tabList: ["本月排行榜", '30天排行榜', '7天排行榜'],
+    textList: [
+      { "count": 12, "tips": "今日次数"},
+      { "count": 32, "tips": '月度次数' },
+      { "count": 45, "tips": '今日排名' }
+    ],
+    rankList: [
+      {
+        "index": 1,
+        "header": "https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+        "name": "名字",
+        "address": "xxxx",
+        "count": "xx次cc时间",
+      }, {
+        "index": 2,
+        "header": "https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+        "name": "名字2",
+        "address": "xxxx",
+        "count": "xx次cc时间",
+      },
+      {
+        "index": 3,
+        "header": "https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+        "name": "名字2",
+        "address": "xxxx",
+        "count": "xx次cc时间",
+      }
+    ],
+    selectIndex: 0
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/piano/rank/rank.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "../../components/navbar/navbar"
+  }
+}

pages/piano/rank/rank.wxml

@@ -0,0 +1,34 @@
+<!--pages/piano/rank/rank.wxml-->
+<!-- 木鱼绑定 -->
+<view class="container">
+  <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'>
+  </nav-bar>
+  <view class="info">
+    <image class="header" src="{{userHeader}}" mode="scaleToFill" />
+    <view class="text_list">
+      <view class="text_item" wx:for="{{textList}}" wx:key="item">
+        <text class="text_item_top">{{item.count}}</text>
+        <text class="text_item_bottom">{{item.tips}}</text>
+      </view>
+    </view>
+  </view>
+
+  <view class="tab_list">
+    <view wx:for="{{tabList}}" wx:key="{{item}}" wx:for-index="{{index}}">
+      <text class="tabbar {{selectIndex == index ? select : unselect}}">{{item}}</text>
+    </view>
+  </view>
+  <scroll-view class="rank_scroll" scroll-y="true">
+    <view class="scoll_item" wx:for="{{rankList}}" wx:key="item">
+      <text class="scoll_item_index">{{item.index}}</text>
+      <image src="{{item.header}}" mode="scaleToFill" class="scoll_item_header" />
+      <view class="scoll_item_text">
+        <text class="scoll_item_text_name">{{item.name}}</text>
+        <text class="scoll_item_text_address">{{item.address}}</text>
+      </view>
+      <text class="scoll_item_count">{{item.count}}</text>
+    </view>
+  </scroll-view>
+
+
+</view>

pages/piano/rank/rank.wxss

@@ -0,0 +1,115 @@
+/* pages/piano/rank/rank.wxss */
+
+.container {
+flex-direction: column;
+display: flex;
+padding-left: 16rpx;
+padding-right: 16rpx;
+}
+
+.container .info {
+  /* width: 100%; */
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+  padding-top: 16rpx;
+
+}
+
+.container .info .header {
+width: 300rpx;
+height: 300rpx;
+}
+
+.container .info .text_list {
+  margin-top: 16rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.container .info .text_list .text_item {
+  flex-direction: column;
+display: flex;
+justify-content: center;
+align-items: center;
+
+}
+
+.container .info .text_list .text_item_top {
+  /* height: 50rpx; */
+}
+
+.container .info .text_list .text_item_bottom {
+  /* height: 50rpx; */
+}
+
+.container .tab_list {
+  margin-top: 16rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: burlywood;
+}
+
+.container .tab_list .tabbar {
+  height: 88rpx;
+}
+
+ .select {
+  height: 88rpx;
+  color: black;
+}
+
+ .unselect {
+  height: 88rpx;
+  color: gray;
+}
+
+.container .rank_scroll {
+  margin-top: 16rpx;
+  width: 100%;
+  flex: 1;
+  display: flex;
+}
+
+.container .rank_scroll .scoll_item {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  margin-top: 16rpx;
+  margin-bottom: 16rpx;
+  align-items: center;
+}
+
+.container .rank_scroll .scoll_item .scoll_item_index {
+width: 50rpx;
+}
+
+.container .rank_scroll .scoll_item .scoll_item_header {
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.container .rank_scroll .scoll_item .scoll_item_text {
+  margin-left: 16rpx;
+  flex-direction: column;
+  display: flex;
+}
+
+.container .rank_scroll .scoll_item .scoll_item_text_name {
+}
+
+.container .rank_scroll .scoll_item .scoll_item_text_address {
+}
+
+.container .rank_scroll .scoll_item .scoll_item_count{
+  flex: 1;
+  text-align: right;
+  width: 100%;
+}
+
+