修改

app.json

@@ -5,8 +5,9 @@
     "pages/home/index",
     "pages/search/index",
     "pages/administration/index",
+    "pages/competition/index",
     "pages/team/index",
-    
+    "pages/ranking/index",
     "pages/index/index",
     "pages/register/index",
     "pages/logs/logs"

pages/administration/index.js

@@ -63,6 +63,16 @@ Page({
     let query = e.detail.detail;
     if (query) wx.redirectTo({ url: `/pages/${query}/index` })
   },
+  jump:function(){
+    wx.navigateTo({
+     url: `/pages/competition/index`,
+    })
+   },
+   tuan:function(){
+    wx.navigateTo({
+     url: `/pages/ranking/index`,
+    })
+   },
   setup() {
     const active = ref(0);
     return { active };

pages/administration/index.wxml

@@ -5,12 +5,12 @@
       <image src="{{src}}" class="images"></image>
     </view>
     <view class="two">
-      <text class="themes">创建比赛</text>
+      <text class="themes" bindtap='jump' >创建比赛</text>
       <image class="imags" src="{{src1}}"></image>
     </view>
     <view class="thr">
       <view class="left">
-        <text class="th">团队排名</text>
+        <text class="th" bindtap='tuan'>团队排名</text>
         <image class="imagx" src="{{src4}}"></image>
         <image class="imagh" src="{{src2}}"></image>
       </view>

pages/competition/index.js

@@ -0,0 +1,123 @@
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '创建比赛', leftArrow: true, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    date: '2018-01-01',//默认起始时间  
+    date2: '2018-01-24',//默认结束时间 
+    singledate: '2018-09-01',
+    time: '12:01',
+    multiIndex: [0,0,0],
+    multiIndex1: [0,0,0],
+    multiArray: [['循环赛', '半决赛', '双决赛',''], ['单循环', '双循环',''], ['淘汰赛', '单败淘汰','']],
+    multiArray1: [['循环赛', '半决赛', '双决赛',''], ['单循环', '双循环',''], ['淘汰赛', '单败淘汰','']],
+  },
+  bindMultiPickerChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      multiIndex: e.detail.value
+    })
+  },
+  bindDateChange3: function(e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      singledate: e.detail.value
+    })
+  },
+  bindTimeChange: function(e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      time: e.detail.value
+    })
+  },
+   // 时间段选择  
+   bindDateChange(e) {
+    let that = this;
+    console.log(e.detail.value)
+    that.setData({
+      date: e.detail.value,
+    })
+  },
+  bindDateChange2(e) {
+    let that = this;
+    that.setData({
+      date2: e.detail.value,
+    })
+  },
+  back: function () {
+    wx.navigateBack({ url: '/pages/home/index' })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // 计算高度
+    this.searchHeight()
+  },
+  // 计算高度
+  searchHeight: function () {
+    let frameStyle = this.data.frameStyle;
+    let client = app.globalData.client;
+    // 减去状态栏
+    let infoHeight = client.windowHeight - (client.statusBarHeight + client.getMenu.height + (client.getMenu.top - client.statusBarHeight) * 2);
+    // 是否减去底部菜单
+    if (frameStyle.useBar) infoHeight = infoHeight - 50;
+    if (infoHeight) this.setData({ infoHeight: infoHeight })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/competition/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mobile-main": "/commpents/mobile-frame/mobile-main"
+  }
+}

pages/competition/index.wxml

@@ -0,0 +1,69 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view>
+      <van-cell-group>
+        <van-field value="{{ name }}" label="比赛名称" placeholder="请输入比赛名称" input-align="right" />
+      </van-cell-group>
+    </view>
+    <view class="page">
+      <view class="page1"><text>时间</text></view>
+      <!-- 时间段 -->
+      <view class="picker_group">
+        <picker mode="date" value="{{date}}" end="{{date2}}" bindchange="bindDateChange">
+          <view class="picker">
+            {{date}}
+          </view>
+        </picker>
+        <text>—</text>
+        <picker mode="date" value="{{date2}}" start="{{date}}" end="2050-01-01" bindchange="bindDateChange2">
+          <view class="picker">
+            {{date2}}
+          </view>
+        </picker>
+      </view>
+      <view class="section">
+        <view class="section__title">单场时间</view>
+        <picker mode="date" value="{{singledate}}" start="2018-09-01" end="2150-09-01" bindchange="bindDateChange3">
+          <view class="picker1">
+            {{singledate}}
+          </view>
+        </picker>
+        <picker mode="time" value="{{time}}" start="00:00" end="24:00" bindchange="bindTimeChange">
+          <view class="picker2">
+            {{time}}
+          </view>
+        </picker>
+      </view>
+      <view  class="adress">
+        <van-cell-group>
+          <van-field value="{{ address }}" label="地点" placeholder="请输入地点" input-align="right" />
+        </van-cell-group>
+      </view>
+      <view class="multone">
+        <view class="mult1">
+          <view class="mult">赛制</view>
+          <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
+            <view class="mults">
+              {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
+            </view>
+          </picker>
+        </view>
+      </view>
+      <view class="multone">
+        <view class="mult1">
+          <view class="mult">赛制</view>
+          <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex1}}" range="{{multiArray1}}">
+            <view class="mults">
+              {{multiArray1[0][multiIndex1[0]]}}，{{multiArray1[1][multiIndex1[1]]}}，{{multiArray1[2][multiIndex1[2]]}}
+            </view>
+          </picker>
+        </view>
+      </view>
+    </view>
+    <view class="team">
+      <view class="two">
+        <button class="button" form-type="submit">创建比赛</button>
+      </view>
+    </view>
+  </view>
+</mobile-main>

pages/competition/index.wxss

@@ -0,0 +1,104 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+.page1{
+  float: left;
+  width: 40%;
+  padding-left:15px;
+  font-size: 14px;
+  line-height: 80rpx;
+  background-color: white;
+  font-weight: 500;
+}
+/* 日期选择 */
+.picker_group {
+  background-color: white;
+  height: 80rpx;
+  line-height: 80rpx;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.picker_group picker {
+  height: 55rpx;
+  line-height: 60rpx;
+  margin: 0 2%;
+  padding: 0 2%;
+  border-radius: 30rpx;
+}
+.van-cell {
+  margin-top: -1px;
+  font-weight: 500;
+  color: #000 !important;
+}
+.adress{
+  font-size: 14px;
+  font-weight: 600;
+}
+.section{
+  font-size: 14px;
+  font-weight: 500;
+  width: 100%;
+  margin-top: 0.8px;
+  padding-left:13px;
+  line-height: 80rpx;
+  background-color: white;
+}
+.section__title{
+  float: left;
+  width: 61%;
+}
+.picker{
+  font-weight: 500;
+}
+.picker1{
+  float: left;
+  width: 22%;
+}
+.team{
+  margin-top: 12%;
+  background-color: white;
+}
+.one{
+  padding: 10px 5px 15px 5px;
+}
+.tuan {
+  margin-left: 11px;
+  font-size: 16px;
+  font-weight: 550;
+  margin-right: 10px;
+}
+.two{
+  position: absolute;
+  bottom: 9%;
+  left: 9%;
+}
+.button{
+  width: 300px !important;
+  background-color: rgb(102, 177, 247);
+  background-image: linear-gradient(to right, rgb(247, 124, 53) , rgb(255, 153, 0));
+  border-radius: 30px; 
+  color:#ffffff; 
+  text-align: center;
+  font-size: small;
+}
+.mult{
+  float: left;
+  width: 50%;
+  padding-left:15px;
+  font-size: 14px;
+  line-height: 80rpx;
+  background-color: white;
+  font-weight: 500;
+}
+.mults{
+  margin-top: -1px;
+  background-color: white;
+  line-height: 80rpx;
+}
+.multone{
+  margin-bottom: 1.8px;
+  font-size: 14px;
+}

pages/ranking/index.js

@@ -0,0 +1,130 @@
+// pages/login/login.js
+import WxValidate from '../../utils/wxValidate'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    hasindex:3, //当前选择菜单的id
+    frameStyle: { useTop: true, name: '团队排名', leftArrow: true, useBar: false },
+    // 主体高度
+    infoHeight: '',
+    list: [{
+      id: 1,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score1: "9",
+      score2: "0"
+    }, {
+      id: 2,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score1: "1",
+      score2: "0"
+    }, {
+      id: 3,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score1: "1",
+      score2: "0"
+    }, {
+      id: 4,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score1: "1",
+      score2: "1"
+    }],
+    lists: [{
+      id: 1,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score: "9",
+    }, {
+      id: 2,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score: "1",
+    }, {
+      id: 3,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score: "1",
+    }, {
+      id: 4,
+      name: "哈拉海队幼儿组",
+      head: '/image/head2.png',
+      score: "1",
+    }],
+  },
+  back: function () {
+    wx.navigateBack({ url: '/pages/home/index' })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // 计算高度
+    this.searchHeight()
+  },
+  // 计算高度
+  searchHeight: function () {
+    let frameStyle = this.data.frameStyle;
+    let client = app.globalData.client;
+    // 减去状态栏
+    let infoHeight = client.windowHeight - (client.statusBarHeight + client.getMenu.height + (client.getMenu.top - client.statusBarHeight) * 2);
+    // 是否减去底部菜单
+    if (frameStyle.useBar) infoHeight = infoHeight - 50;
+    if (infoHeight) this.setData({ infoHeight: infoHeight })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/ranking/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mobile-main": "/commpents/mobile-frame/mobile-main"
+  }
+}

pages/ranking/index.wxml

@@ -0,0 +1,46 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info" class="main" style="height:{{infoHeight}}px;">
+    <view class="one">
+      <van-tabs active="{{ active }}" bind:change="onChange">
+        <van-tab title="团队排名">
+          <view class="head">
+            <view class="head1"><text>排名</text></view>
+            <view class="head2"><text>战队</text></view>
+            <view class="head3"><text>胜负</text></view>
+          </view>
+          <view class="list {{index < 3 ? 'select-item' : 'dis-select-item'}}" wx:key="item" wx:for="{{list}}">
+            <view class="item sortContent" v-for="(item,index) of list" :key="index">
+              <view class="pai {{index < 3 ? 'pai1' : 'pai'}}">{{index+1}}</view>
+              <image class="headtou" src="{{item.head}}"></image>
+              <view class="dui">
+                {{item.name}}
+              </view>
+              <view class="fen">
+                <text class="score1 {{index < 3 ? 'scorea' : 'scoreb'}}">{{item.score1}}</text>/ <text>{{item.score2}}</text>
+              </view>
+            </view>
+          </view>
+        </van-tab>
+        <van-tab title="团队积分">
+          <view class="integral">
+            <text class="integral1">排名</text>
+            <text class="integral2">队伍</text>
+            <text class="integral3">总积分</text>
+          </view>
+          <view class="lists" wx:key="item" wx:for="{{lists}}">
+            <view class="item sortContent" v-for="(item,index) of list" :key="index">
+              <view class="pai">{{index+1}}</view>
+              <image class="headtou" src="{{item.head}}"></image>
+              <view class="dui">
+                {{item.name}}
+              </view>
+              <view class="fen">
+                <text class="score1">{{item.score}}</text>
+              </view>
+            </view>
+          </view>
+        </van-tab>
+      </van-tabs>
+    </view>
+  </view>
+</mobile-main>

pages/ranking/index.wxss

@@ -0,0 +1,157 @@
+.main {
+  position: relative;
+  width: 100%;
+}
+
+.one {
+  margin-top: -1px;
+}
+
+.van-tabs__line {
+  margin-left: 27px !important;
+  font-weight: 600 !important;
+  width: 38.800003px !important;
+  background-color: blue !important;
+}
+
+.head {
+  background-color: rgb(43, 43, 43);
+  color: white;
+  width: 92%;
+  margin-left: 3%;
+  margin-bottom: -1px;
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+  border-bottom-right-radius: 0em;
+  border-bottom-left-radius: 0em;
+  padding: 0 0 32px 3.5px;
+  margin-top: 2%;
+}
+
+.head1 {
+  float: left;
+  width: 26%;
+  font-size: 14px;
+  margin-left: 19px;
+  margin-top: 6px;
+}
+
+.head2 {
+  float: left;
+  width: 40%;
+  font-size: 14px;
+  margin-left: 5px;
+  margin-top: 6px;
+}
+
+.head3 {
+  float: left;
+  width: 9%;
+  font-size: 14px;
+  margin-left: 29px;
+  margin-top: 6px;
+}
+
+.list:nth-child(2) {
+  background-color: rgba(247, 31, 67);
+}
+
+.list:nth-child(3) {
+  background-color: rgba(245, 96, 133);
+}
+
+.list:nth-child(4) {
+  background-color: rgb(252, 172, 198);
+}
+
+.list {
+  width: 93%;
+  margin-left: 3%;
+  margin-bottom: 0.2%;
+}
+
+.sortContent {
+  width: 88%;
+  height: 50upx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 3.5%;
+  margin-bottom: 0.2%;
+  padding: 10px 10px 10px 10px;
+}
+
+.header {
+  font-size: 26upx;
+  margin-top: 20upx;
+}
+
+.headtou {
+  float: left;
+  margin-left: 35px;
+  width: 9%;
+  height: 33px;
+  overflow: hidden;
+}
+
+.dui {
+  float: left;
+  width: 60%;
+  font-size: 14px;
+  margin-left: 7px;
+}
+
+.fen {
+  float: left;
+  width: 17%;
+  font-weight: 500;
+}
+
+.pai {
+  margin-left: 5px;
+}
+
+.select-item {
+  color: #ffff;
+}
+
+.dis-select-item {
+  margin-top: 3px;
+  background-color: white;
+  color: #000;
+}
+
+.pai1 {
+  font-size: 20px;
+  font-style: italic;
+}
+
+.scorea {
+  color: white;
+}
+
+.scoreb {
+  color: red;
+}
+.integral{
+  margin-top: 5px;
+  margin-bottom: 7px;
+  font-weight: 500;
+  font-size: 14px;
+}
+.integral1{
+  padding: 10px 10px 10px 25px;
+}
+.integral2{
+  padding: 10px 10px 10px 40px;
+}
+.integral3{
+  padding: 10px 10px 10px 140px;
+}
+.lists:nth-child(even) {
+  background-color: rgb(255, 250, 250);
+}
+.lists{
+  font-weight: 500;
+  font-size: 14px;
+}