From 80889e7f32480ae76896f3bd042baa82a0fc9e9e Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期四, 14 十一月 2024 11:39:07 +0800
Subject: [PATCH] 班级成绩图表分析
---
src/views/dashboard/index.vue | 135 +++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 130 insertions(+), 5 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index ae8b3e8..b171a12 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
<div class="dashboard-container">
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" >
- <div class="card-panel">
+ <div class="card-panel2">
<el-row class="panel-group" :gutter="20">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="list" class-name="card-panel-icon"/>
@@ -19,8 +19,8 @@
</el-row>
<el-row class="panel-group">
<el-table :data="examList" style="width: 100%;" height="430" @row-click="handleRowClick">
- <el-table-column label="鑰冭瘯鍚嶇О" prop="examName"></el-table-column>
- <el-table-column label="鑰冭瘯鐘舵��" prop="status"></el-table-column>
+ <el-table-column label="鑰冭瘯鍚嶇О" prop="examName" align="center"></el-table-column>
+ <el-table-column label="鑰冭瘯鐘舵��" prop="status" align="center"></el-table-column>
</el-table>
</el-row>
</div>
@@ -58,6 +58,62 @@
</el-row>
</el-col>
</el-row>
+
+ <el-row :gutter="40" class="panel-group">
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel">
+ <div class="card-panel-icon-wrapper icon-people">
+ <svg-icon icon-class="exam" class-name="card-panel-icon"/>
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ 璇曞嵎鎬绘暟
+ </div>
+ <count-to :start-val="0" :end-val="examPaperCount" :duration="2600" class="card-panel-num" v-loading="loading"/>
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel" >
+ <div class="card-panel-icon-wrapper icon-message">
+ <svg-icon icon-class="question" class-name="card-panel-icon"/>
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ 棰樼洰鎬绘暟
+ </div>
+ <count-to :start-val="0" :end-val="questionCount" :duration="3000" class="card-panel-num" v-loading="loading"/>
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel">
+ <div class="card-panel-icon-wrapper icon-shopping">
+ <svg-icon icon-class="doexampaper" class-name="card-panel-icon"/>
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ 绛斿嵎鎬绘暟
+ </div>
+ <count-to :start-val="0" :end-val="doExamPaperCount" :duration="3600" class="card-panel-num" v-loading="loading"/>
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+ <div class="card-panel">
+ <div class="card-panel-icon-wrapper icon-money">
+ <svg-icon icon-class="doquestion" class-name="card-panel-icon"/>
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">
+ 绛旈鎬绘暟
+ </div>
+ <count-to :start-val="0" :end-val="doQuestionCount" :duration="3200" class="card-panel-num" v-loading="loading"/>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+
<el-row class="echarts-line">
<div id="echarts-moth-user" style="width: 100%;height:400px;" v-loading="loading"/>
</el-row>
@@ -264,7 +320,7 @@
}
.card-panel2 {
- height: 100px;
+ height: 600px;
width: 100%;
cursor: pointer;
font-size: 12px;
@@ -274,10 +330,79 @@
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
+
+ &:hover {
+ .card-panel-icon-wrapper {
+ color: #fff;
+ }
+
+ .icon-people {
+ background: #40c9c6;
+ }
+
+ .icon-message {
+ background: #36a3f7;
+ }
+
+ .icon-money {
+ background: #f4516c;
+ }
+
+ .icon-shopping {
+ background: #34bfa3
+ }
+ }
+
+ .icon-people {
+ color: #40c9c6;
+ }
+
+ .icon-message {
+ color: #36a3f7;
+ }
+
+ .icon-money {
+ color: #f4516c;
+ }
+
+ .icon-shopping {
+ color: #34bfa3
+ }
+
+ .card-panel-icon-wrapper {
+ float: left;
+ margin: 14px 0 0 14px;
+ padding: 16px;
+ transition: all 0.38s ease-out;
+ border-radius: 6px;
+ }
+
+ .card-panel-icon {
+ float: left;
+ font-size: 48px;
+ }
+
+ .card-panel-description {
+ float: right;
+ font-weight: bold;
+ margin: 26px;
+ margin-left: 0px;
+
+ .card-panel-text {
+ line-height: 18px;
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 16px;
+ margin-bottom: 12px;
+ }
+
+ .card-panel-num {
+ font-size: 20px;
+ }
+ }
}
.card-panel {
- height: 600px;
+ height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
--
Gitblit v1.8.0