no message

pages/studentRanked/studentRanked.vue

@@ -1,40 +1,70 @@
 <template>
     <view class="page">
-        <u-popup :show="multiSelect" bgColor="#6e8fafde" mode="top" @close="multiSelect=false" :overlay="false">
+        <!-- <u-popup :show="multiSelect" bgColor="#6e8fafde" mode="top" @close="multiSelect=false" :overlay="false">
             <view class="ui-p ui-flex ui-flex-align-center" style="justify-content: end;">
                 <view class="ui-mr30">
                     <text class="f32" style="#9ccbff">请点击选则学生批量点评</text>
                 </view>
                 <view class="ui-flex" style="width: 250px;">
-                    <u-button size="small" @click="setMulti" plain text="取消选择" style="background-color: #0d4980;" class="ui-mr10"></u-button>
+                    <u-button size="small" @click="setMulti" plain text="取消选择" style="background-color: #0d4980;"
+                        class="ui-mr10"></u-button>
                     <u-button size="small" type="primary" @click="commentMulti()">
                         <text class="ui-mr10">批量点评</text>
                         <u-badge :value="activeList.length"></u-badge>
                     </u-button>
                 </view>
             </view>
-        </u-popup>
+        </u-popup> -->
         
-        <view class="ranked" v-if="chooseClassName">
-            <view v-for="(item,index) in list" :key="index" class="ranked-item">
-                <view @click="Comment(item1)" v-for="(item1,index1) in item.nodes" :key="item1.id"
-                    class="ui-flex-column ranked-item-tr ui-flex-align-center" :class="{active : activeList.includes(item1.id)}">
-                    
-                    <image style="width: 100rpx;height: 100rpx;" :src="'https://zhxy.obs.cn-hz1.ctyun.cn:443/static/student_icon/'+ (index1%7) +'.png'"
-                        mode=""></image>
-                    <view class="stu-tag ui-flex-row ui-mt10">
-                        <view class="stu-tag-add ui-flex-1">72</view>
-                        <view class="stu-tag-sub ui-flex-1">-32</view>
-                    </view>
-                    
-                    <view class="txt-white f28 ui-pt10">
-                        {{item1.title}}
+        <view class="txt-white ui-flex-row ui-flex-align-center" style="border-bottom: 4px solid #4472C4;padding-left: 40rpx;height: 54px;" :style="{'background-color': multiSelect ? '#4472c4' : ''}">
+            <view class="ui-p ui-flex-row">
+                <text class="f40">{{chooseClassName}}</text>
+                <view class="ui-flex-row">
+                    <text class="f40 ui-ml30 ui-mr10">李老师</text>
+                    <u-icon name="arrow-down-fill" color="#fff"></u-icon>
+                </view>
+            </view>
+            
+            <view class="ui-p ui-flex ui-flex-1 ui-flex-align-center" style="justify-content: end;" v-if="multiSelect">
+                <view class="ui-mr30">
+                    <text class="f32" style="#9ccbff">请点击选则学生批量点评</text>
+                </view>
+                <view class="ui-flex" style="width: 250px;">
+                    <u-button size="small" @click="setMulti" plain text="取消选择" style="background-color: #0d4980;"
+                        class="ui-mr10"></u-button>
+                    <u-button size="small" type="primary" @click="commentMulti()">
+                        <text class="ui-mr10">批量点评</text>
+                        <u-badge :value="activeList.length"></u-badge>
+                    </u-button>
+                </view>
+            </view>
+        </view>
+
+        <view class="ui-flex-row ui-mt20 ui-flex-space-around">
+            <view v-for="(column, index) in list" :key="index" v-if="index%2 == 0" class="ui-flex-row">
+                <view v-for="index2 in 2" class="ui-flex-column" :class="{
+                        'ui-mr10' : index2 == 1,
+                        'ui-ml10' : index2 == 2
+                    }">
+                    <view @click="Comment(item1)" v-for="(item1,index1) in list[index2+index-1].nodes" :key="item1.id" class="ui-flex-column ranked-item-tr ui-flex-align-center" 
+                        :class="{active : activeList.includes(item1.id)}">
+                        <image style="width: 100rpx;height: 100rpx;" :src="'https://zhxy.obs.cn-hz1.ctyun.cn:443/static/student_icon/'+ (index1%7) +'.png'" mode=""></image>
+
+                        <view class="stu-tag text-center ui-flex-row ui-mt10">
+                            <view class="stu-tag-add ui-flex-1">72</view>
+                            <view class="stu-tag-sub ui-flex-1">-32</view>
+                        </view>
+
+                        <view class="txt-white f28 ui-pt10">
+                            {{item1.title}}
+                        </view>
+
+                        <u-badge absolute style="left: 10px;top: 10px;" :value="activeList.indexOf(item1.id) + 1"></u-badge>
                     </view>
-                    
-                    <u-badge absolute style="left: 10px;top: 10px;" :value="activeList.indexOf(item1.id) + 1"></u-badge>
                 </view>
             </view>
         </view>
+
         <view class="platform" v-if="chooseClassName">
             <view class="ranked-radio"></view>
             <view class="platform-text txt-white">讲台</view>
@@ -43,10 +73,11 @@
         <!-- 切换班级 -->
         <u-picker :show="show_classes" @confirm="doChooseClass" :columns="teachList" keyName="class_name"
             @cancel="show_classes=false"></u-picker>
-            
+
         <markScore ref="markScore"></markScore>
 
-        <view class="ui-pull-bottom ui-flex-row ui-p" style="background-color: #0000006b;border-top: 1px solid #616161;">
+        <view class="ui-pull-bottom ui-flex-row ui-p"
+            style="background-color: #0000006b;border-top: 1px solid #616161;">
             <view class="ui-flex-1 ui-flex-row">
                 <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="show_classes=true">
                     <image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
@@ -69,8 +100,14 @@
                     </view>
                 </view>
             </view>
-            
+
             <view class="ui-flex-row">
+                <view class="ui-flex-column text-center ui-p bottom-btn-item">
+                    <image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
+                    <view style="line-height: 1;">
+                        <text class="txt-white f24">排行榜</text>
+                    </view>
+                </view>
                 <view class="ui-flex-column text-center ui-p bottom-btn-item">
                     <image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
                     <view style="line-height: 1;">
@@ -90,7 +127,7 @@
 
 <script>
     import markScore from './components/mark-score.vue'
-    
+
     import {
         getStuSchoolIdByStuClassId
     } from "@/common/api/stu.js"
@@ -107,9 +144,9 @@
                 teachList: [],
                 chooseClassName: '',
                 chooseClassId: '',
-                
-                activeList : [],
-                multiSelect : false,
+
+                activeList: [],
+                multiSelect: false,
             }
         },
         mounted() {
@@ -128,7 +165,7 @@
             }, 400)
         },
         methods: {
-            setMulti(){
+            setMulti() {
                 this.multiSelect = !this.multiSelect;
                 this.activeList = [];
             },
@@ -161,21 +198,21 @@
 
             },
             // 多选学生点评
-            commentMulti(){
+            commentMulti() {
                 this.$refs.markScore.open(1);
             },
             Comment(item) {
-                if(this.multiSelect){
+                if (this.multiSelect) {
                     let index = this.activeList.indexOf(item.id)
-                    if(index >= 0){
+                    if (index >= 0) {
                         this.activeList.splice(index, 1);
-                    }else{
+                    } else {
                         this.activeList.push(item.id);
                     }
                     return;
                 }
                 console.log(item, "sgism");
-                
+
                 this.$refs.markScore.open(1);
                 return;
                 //item的id是studentClass的id,需要转换成stu_school_id传到
@@ -229,7 +266,7 @@
         background-image: url('https://zhxy.obs.cn-hz1.ctyun.cn:443/static/desk_bg/class_bj.jpg');
         background-size: 100% 100%;
         height: 100vh;
-        width: 750rpx;
+        // width: 750rpx;
     }
 
     .platform {
@@ -289,48 +326,24 @@
         box-sizing: border-box;
         display: flex;
         padding-top: 80rpx;
+    }
 
-        .ranked-item {
-            flex: 1;
-            box-sizing: border-box;
-
-            .ranked-item-tr {
-                position: relative;
-                margin-bottom: 26rpx;
-                padding-top: 16rpx;
-                padding-bottom: 16rpx;
-                border-radius: 5px;
-                box-sizing: border-box;
-                width: 100%;
-                cursor: pointer;
-
-                display: flex;
-                justify-content: center;
-            }
-            
-            .ranked-item-tr:last-child {
-                margin-bottom: 0;
-            }
-
-            .active {
-                background: #ffffff85;
-            }
-        }
-
-        .ranked-item:nth-child(1n) {
-            margin-right: 0;
-            margin-left: 10px;
-        }
-
-        .ranked-item:nth-child(2n) {
-            border-right: 1px solid #ccc;
-            padding-right: 10px;
-        }
+    .ranked-item-tr {
+        position: relative;
+        margin-bottom: 26rpx;
+        padding-top: 16rpx;
+        padding-bottom: 16rpx;
+        border-radius: 5px;
+        box-sizing: border-box;
+        width: 100%;
+        cursor: pointer;
 
-        .ranked-item:last-child {
-            border-right: 0;
-        }
+        display: flex;
+        justify-content: center;
+    }
 
+    .active {
+        background: #ffffff85;
     }
 
     .ranked-radio {
@@ -372,9 +385,11 @@
         border: 1px solid #fff;
         border-left: 0;
     }
-    .bottom-btn-item{
+
+    .bottom-btn-item {
         position: relative;
     }
+
     .bottom-btn-item:hover {
         cursor: pointer;
         background-color: #ffffff3b;