在线上课

pc/src/components/userRank.vue

@@ -0,0 +1,267 @@
+<template>
+    <div class="rankContainer">
+        <el-row :gutter="20">
+            <!--卡路里-->
+            <el-col :span="12">
+                <!--          只显示前8个-->
+                <li v-for="(s,i) in students.CalSort" v-if="i <= 7">
+                    <div
+                            :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
+                        <div class="head">
+                            <img :src="s.Head" class="headImg" v-if="s.Head">
+                            <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                            <img src="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
+                            <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
+                            <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
+                        </div>
+                        <div class="name">
+                            NO.{{ i + 1 }} {{ s.Name }}
+                        </div>
+                        <div class="score">
+                            {{ s.Cle|fmtInt }}
+                            <em>千卡</em>
+                        </div>
+                        <div class="record">
+                            <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
+                                 v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
+                        </div>
+                    </div>
+                </li>
+            </el-col>
+            <!--CK-->
+            <el-col :span="12">
+                <li v-for="(s,i) in students.CkSort" v-if="i <= 7">
+                    <div
+                            :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
+                        <div class="head">
+                            <img :src="s.Head" class="headImg" v-if="s.Head">
+                            <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                            <img src="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
+                            <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
+                            <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
+                        </div>
+                        <div class="name">
+                            NO.{{ i + 1 }} {{ s.Name }}
+                        </div>
+                        <div class="score">
+                            {{ s.Ck|fmtFloat }}
+                            <em>CK</em>
+                        </div>
+                        <div class="record">
+                            <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
+                                 v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
+                        </div>
+                    </div>
+                </li>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+    // import {
+    //     ClassUserRank
+    // } from '@/api/getApiRes'
+
+    let qs = require('qs');
+    export default {
+        data() {
+            return {
+                students: {
+                    CkSort: [],
+                    CalSort: [],
+                },
+                rankTimer: null,
+            }
+        },
+        props: ['rankInfo'],
+        watch: {
+            rankInfo: {
+                handler(newName, oldName) {
+                    let that = this;
+                    if (newName) {
+                        // 排序
+                        let CkSort = that.deepClone(newName);
+                        that.students.CkSort = CkSort.sort(function (a, b) {
+                            return b.Ck - a.Ck;
+                        });
+                        let CalSort = that.deepClone(newName);
+                        that.students.CalSort = CalSort.sort(function (a, b) {
+                            return b.Cle - a.Cle;
+                        });
+                    } else {
+                        this.students.CkSort = [];
+                        this.students.CalSort = [];
+                    }
+                },
+                deep: true,
+                immediate: true
+            }
+        },
+        methods:{
+            // 深拷贝
+            deepClone(obj) {
+                let _obj = JSON.stringify(obj),
+                    objClone = JSON.parse(_obj);
+                return objClone
+            }
+    },
+        filters: {
+            fmtNum(val) {
+                if (val == 0) {
+                    return '--'
+                } else {
+                    if (parseInt(val) < 0) return 0;
+                    if (parseInt(val) > 0) return val
+                }
+            },
+            fmtFloat(val) {
+                if (val == 0) {
+                    return '0.0'
+                } else {
+                    return parseFloat(val).toFixed(1);
+                }
+            },
+            fmtInt(val) {
+                if (val == 0) {
+                    return '0'
+                } else {
+                    return parseInt(val);
+                    // return parseFloat(val).toFixed(3);
+                }
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .rankContainer {
+        width: 100%;
+        overflow: visible;
+        display: block;
+        margin: 0 auto;
+        padding-top: 1rem;
+    }
+
+    li {
+        width: 100%;
+        height: 4rem;
+        display: block;
+        margin: 0 auto;
+        overflow: visible;
+    }
+
+    li .rows {
+        width: 100%;
+        height: 3rem;
+        /*background: #ee191d;*/
+        border-radius: 250rem;
+        overflow: visible;
+        display: block;
+        margin: 0 auto;
+        margin-top: 0.15rem;
+    }
+
+    li .head {
+        width: 3rem;
+        height: 3rem;
+        float: left;
+        margin-left: 0rem;
+        margin-top: 0.15rem;
+        overflow: visible;
+    }
+
+    li .head .headImg {
+        width: 2.8rem;
+        height: 2.8rem;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        border: 2px solid #fff;
+        border-radius: 33rem;
+    }
+
+    li .head .king {
+        position: relative;
+        top: -4rem;
+        left: -0.2rem;
+        width: 2rem;
+        height: 2rem;
+        float: left;
+    }
+
+    li .name {
+        font-weight: normal;
+        font-size: 1.5rem;
+        text-align: left;
+        color: #fff;
+        float: left;
+        margin-left:1rem;
+        line-height: 3rem;
+    }
+
+    li .record {
+        float: right;
+    }
+
+    li .record img {
+        position: relative;
+        top: -0rem;
+        width: 1.2rem;
+    }
+
+    li .score {
+        font-weight: normal;
+        font-size: 1.5rem;
+        color: #fff;
+        float: right;
+        margin-right: 1rem;
+        line-height: 3rem;
+        text-align: right;
+    }
+
+    li .score em {
+        font-size:1rem;
+    }
+
+    .row_0 {
+        background: rgba(238, 25, 29, 0.75);
+    }
+
+    .row_1 {
+        background: rgba(244, 76, 31, 0.75);
+    }
+
+    .row_2 {
+        background: rgba(242, 182, 23, 0.75);
+    }
+
+    .row_3 {
+        background: rgba(112, 238, 21, 0.75);
+    }
+
+    .row_4 {
+        background: rgba(11, 253, 45, 0.75);
+    }
+
+    .row_5 {
+        background: rgba(1, 228, 182, 0.75);
+    }
+
+    .row_6 {
+        background: rgba(0, 207, 230, 0.75);
+    }
+
+    .row_7 {
+        background: rgba(4, 209, 252, 0.75);
+    }
+
+    .tips {
+        position: absolute;
+        right: 3%;
+        top: 1rem;
+        font-size: 0.4rem;
+        color: #fff;
+    }
+
+</style>

pc/src/static/img/rank/king1.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57.582" height="55.185" viewBox="0 0 57.582 55.185">
+  <g id="皇冠" transform="translate(409.593 731.711) rotate(-30)">
+    <path id="路径_140" data-name="路径 140" d="M43.035-811.229a1.469,1.469,0,0,1,1.052.4,1.47,1.47,0,0,1,.463,1.025v.034a.466.466,0,0,1-.011.136L41.054-786.1a2.854,2.854,0,0,1,.029-.536,4.466,4.466,0,0,1-2.854,3.573,1.455,1.455,0,0,1,.377-.1c-3.249,1.2-9.552,2.01-16.8,1.968-7.192-.042-13.438-.893-16.6-2.131a1.879,1.879,0,0,1,.395.118,4.438,4.438,0,0,1-2.755-3.625l.013.27L.012-810.326A.686.686,0,0,1,0-810.488a1.462,1.462,0,0,1,.483-1.021,1.462,1.462,0,0,1,1.066-.372,1.223,1.223,0,0,1,.726.2L12.4-802.3l8.174-15.816a2.065,2.065,0,0,1,1.862-1.072,2.029,2.029,0,0,1,1.652.84l7.864,16.337L42-810.823l.047-.047a1.338,1.338,0,0,1,.98-.359Z" transform="translate(0 0)" fill="#fed530"/>
+    <path id="路径_141" data-name="路径 141" d="M310.32-451.958a8.9,8.9,0,0,0-9.019,8.773,8.9,8.9,0,0,0,8.773,9.019,8.9,8.9,0,0,0,9.019-8.773h0A8.9,8.9,0,0,0,310.32-451.958Z" transform="translate(-287.49 -350.578)" fill="#504312" opacity="0.67"/>
+    <text id="_1" data-name="1" transform="translate(18.015 -787.737)" fill="#f4cd38" font-size="15" font-family="Roboto-Regular, Roboto" letter-spacing="-0.05em"><tspan x="0" y="0">1</tspan></text>
+  </g>
+</svg>

pc/src/static/img/rank/king2.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57.582" height="55.185" viewBox="0 0 57.582 55.185">
+  <g id="皇冠" transform="translate(409.593 731.711) rotate(-30)">
+    <path id="路径_140" data-name="路径 140" d="M43.035-811.229a1.469,1.469,0,0,1,1.052.4,1.47,1.47,0,0,1,.463,1.025v.034a.466.466,0,0,1-.011.136L41.054-786.1a2.854,2.854,0,0,1,.029-.536,4.466,4.466,0,0,1-2.854,3.573,1.455,1.455,0,0,1,.377-.1c-3.249,1.2-9.552,2.01-16.8,1.968-7.192-.042-13.438-.893-16.6-2.131a1.879,1.879,0,0,1,.395.118,4.438,4.438,0,0,1-2.755-3.625l.013.27L.012-810.326A.686.686,0,0,1,0-810.488a1.462,1.462,0,0,1,.483-1.021,1.462,1.462,0,0,1,1.066-.372,1.223,1.223,0,0,1,.726.2L12.4-802.3l8.174-15.816a2.065,2.065,0,0,1,1.862-1.072,2.029,2.029,0,0,1,1.652.84l7.864,16.337L42-810.823l.047-.047a1.338,1.338,0,0,1,.98-.359Z" transform="translate(0 0)" fill="#bed8ea"/>
+    <path id="路径_141" data-name="路径 141" d="M310.32-451.958a8.9,8.9,0,0,0-9.019,8.773,8.9,8.9,0,0,0,8.773,9.019,8.9,8.9,0,0,0,9.019-8.773h0A8.9,8.9,0,0,0,310.32-451.958Z" transform="translate(-287.49 -350.578)" fill="#184f70" opacity="0.67"/>
+    <text id="_2" data-name="2" transform="translate(18.015 -787.737)" fill="#bed8ea" font-size="15" font-family="Roboto-Regular, Roboto" letter-spacing="-0.05em"><tspan x="0" y="0">2</tspan></text>
+  </g>
+</svg>

pc/src/static/img/rank/king3.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57.582" height="55.185" viewBox="0 0 57.582 55.185">
+  <g id="皇冠" transform="translate(409.593 731.711) rotate(-30)">
+    <path id="路径_140" data-name="路径 140" d="M43.035-811.229a1.469,1.469,0,0,1,1.052.4,1.47,1.47,0,0,1,.463,1.025v.034a.466.466,0,0,1-.011.136L41.054-786.1a2.854,2.854,0,0,1,.029-.536,4.466,4.466,0,0,1-2.854,3.573,1.455,1.455,0,0,1,.377-.1c-3.249,1.2-9.552,2.01-16.8,1.968-7.192-.042-13.438-.893-16.6-2.131a1.879,1.879,0,0,1,.395.118,4.438,4.438,0,0,1-2.755-3.625l.013.27L.012-810.326A.686.686,0,0,1,0-810.488a1.462,1.462,0,0,1,.483-1.021,1.462,1.462,0,0,1,1.066-.372,1.223,1.223,0,0,1,.726.2L12.4-802.3l8.174-15.816a2.065,2.065,0,0,1,1.862-1.072,2.029,2.029,0,0,1,1.652.84l7.864,16.337L42-810.823l.047-.047a1.338,1.338,0,0,1,.98-.359Z" transform="translate(0 0)" fill="#f2c987"/>
+    <path id="路径_141" data-name="路径 141" d="M310.32-451.958a8.9,8.9,0,0,0-9.019,8.773,8.9,8.9,0,0,0,8.773,9.019,8.9,8.9,0,0,0,9.019-8.773h0A8.9,8.9,0,0,0,310.32-451.958Z" transform="translate(-287.49 -350.578)" fill="#65420a" opacity="0.67"/>
+    <text id="_3_" data-name="3
+" transform="translate(18.015 -787.737)" fill="#f2c987" font-size="15" font-family="Roboto-Regular, Roboto" letter-spacing="-0.05em"><tspan x="0" y="0">3</tspan><tspan font-family="Roboto-Bold, Roboto" font-weight="700"><tspan x="0" y="1"></tspan></tspan></text>
+  </g>
+</svg>