排行榜

src/api/common.js

@@ -86,3 +86,8 @@ export function clearScore(data) {
 export function allSubmit(data) {
   return httpRequest.post('/api/opera/v2/api/training/statistics/submit', data)
 }
+
+/* 得分排行榜 */
+export function rankingList(data) {
+  return httpRequest.get('/api/opera/v3/api/rank/cases-training', data)
+}

src/pages/ranking/rankingList.vue

+<template>
+  <div class="rankingList-box">
+    <h4>{{ title }}</h4>
+    <div class="content">
+      <div class="list-title">
+        <p>排名</p>
+        <p>学校名称</p>
+        <p>姓名</p>
+        <p>日期</p>
+        <p>分值</p>
+      </div>
+      <ul class="ranking-list">
+        <li v-for="item in list" :key="item.id">
+          <p>{{ item.num }}</p>
+          <p>{{ item.school }}</p>
+          <p>{{ item.name }}</p>
+          <p>{{ item.date }}</p>
+          <p>{{ item.score }}</p>
+        </li>
+      </ul>
+      <div class="btn-bar">
+        <p @click="submit"></p>
+        <p @click="changeCase"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/common.js'
+export default {
+  data() {
+    return {
+      title: '得分排行榜',
+      list: [
+        { num: 1, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10001' },
+        {
+          num: 2,
+          school: '河北工业职业技术学院保定分院',
+          name: '今麦郎',
+          date: '2020.01.02',
+          score: '100',
+          id: '10002'
+        },
+        { num: 3, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10003' },
+        { num: 4, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10004' },
+        { num: 5, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10005' },
+        { num: 6, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10006' },
+        { num: 7, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10007' },
+        { num: 8, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10008' },
+        { num: 9, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10009' },
+        { num: 10, school: '河北工业技术学院', name: '迪丽热巴迪丽热巴', date: '2020.01.02', score: '100', id: '10010' }
+      ]
+    }
+  },
+  mounted() {
+    this.getRankingList()
+  },
+  methods: {
+    submit() {},
+    changeCase() {},
+    getRankingList() {
+      api
+        .rankingList({})
+        .then(resp => {
+          console.log(resp)
+        })
+        .finally(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rankingList-box {
+  margin: 0 54px;
+  height: calc(100% - 20px);
+  padding-top: 20px;
+}
+h4 {
+  width: 120px;
+  height: 22px;
+  margin-bottom: 20px;
+  padding-left: 5px;
+  font-size: 22px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 22px;
+  background: linear-gradient(0deg, #0080ff 0%, #00c5e4 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  border-left: 3px solid #31d1e9;
+}
+.content {
+  height: calc(100% - 82px);
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  .list-title {
+    display: flex;
+    p {
+      width: 20%;
+      line-height: 48px;
+      text-align: center;
+      color: #31d1e9;
+      opacity: 0.8;
+    }
+    p:first-child,
+    p:last-child {
+      width: 15%;
+    }
+    p:nth-child(2) {
+      width: 30%;
+    }
+  }
+  .ranking-list {
+    li {
+      height: 30px;
+      line-height: 30px;
+      display: flex;
+      margin-bottom: 2px;
+      position: relative;
+      p {
+        color: #fff;
+        opacity: 0.8;
+        text-align: center;
+        width: 20%;
+      }
+      p:first-child,
+      p:last-child {
+        width: 15%;
+      }
+      p:nth-child(2) {
+        width: 30%;
+      }
+    }
+    li:nth-child(odd) {
+      background: #0b1f4d;
+      box-shadow: 0px 0px 118px 29px rgba(255, 255, 255, 0.17);
+    }
+    li:nth-child(1):before {
+      content: '';
+      display: block;
+      width: 30%;
+      height: 30px;
+      background: linear-gradient(90deg, #f90bfd, transparent);
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 0;
+    }
+    li:nth-child(2):before {
+      content: '';
+      display: block;
+      width: 30%;
+      height: 30px;
+      background: linear-gradient(90deg, #8f48fd, transparent);
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 0;
+    }
+    li:nth-child(3):before {
+      content: '';
+      display: block;
+      width: 30%;
+      height: 30px;
+      background: linear-gradient(90deg, #0f3cdf, transparent);
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 0;
+    }
+  }
+  .btn-bar {
+    height: 40px;
+    margin: 60px 0 20px;
+    display: flex;
+    justify-content: space-between;
+    p {
+      width: 174px;
+      height: 40px;
+      background: url('../../assets/images/ranking-bottom-btn.png') center center;
+      position: relative;
+    }
+  }
+}
+</style>

src/router/routes.js

@@ -58,6 +58,11 @@ export default [
       {
         path: '/result',
         component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/result/index.vue')
+      },
+      /* 排行榜 */
+      {
+        path: '/ranking',
+        component: () => import(/* webpackChunkName: "userTrigger" */ '@/pages/ranking/rankingList.vue')
       }
     ]
   }