<template>
|
<div class="c">
|
<div class="bg">
|
<div class="main">
|
<div class="m1">
|
<div
|
class="card"
|
style="width:310px; margin-bottom:20px;"
|
>
|
<p class="card-title">学生总数</p>
|
<p class="card-num">3250</p>
|
<div class="bar">
|
<div
|
class="bar-r"
|
style="width:75%; background:rgb(99,1,190)"
|
></div>
|
</div>
|
<p class="card-d">20天内增加75%</p>
|
</div>
|
<div
|
class="card"
|
style="width:310px;"
|
>
|
<p class="card-title">新生</p>
|
<p class="card-num">230</p>
|
<div class="bar">
|
<div
|
class="bar-r"
|
style="width:50%;"
|
></div>
|
</div>
|
<p class="card-d">20天内增加50%</p>
|
</div>
|
<div
|
class="card"
|
style="width:310px;"
|
>
|
<p class="card-title">总课程</p>
|
<p class="card-num">3</p>
|
<div class="bar">
|
<div
|
class="bar-r"
|
style="width:76%; background:rgb(16,71,247)"
|
></div>
|
</div>
|
<p class="card-d">20天内增加75%</p>
|
</div>
|
<div
|
class="card"
|
style="width:310px;"
|
>
|
<p class="card-title">收费</p>
|
<p class="card-num">￥355000.00</p>
|
<div class="bar">
|
<div
|
class="bar-r"
|
style="width:56%; background:rgb(245,155,34)"
|
></div>
|
</div>
|
<p class="card-d">20天内增加56%</p>
|
</div>
|
</div>
|
<div class="m2 card">
|
<p class="card-title">收入/费用报告</p>
|
<img
|
src="@/assets/img/1.jpg"
|
alt=""
|
>
|
</div>
|
<div class="m3 card">
|
<p
|
class="card-title"
|
style="margin-bottom:20px;"
|
>老师名单</p>
|
<div class="scrollBar">
|
<div
|
class="m3-con"
|
v-for="(item) in state.listTeachers"
|
:key="item.id"
|
>
|
<div style="display:flex">
|
<img
|
src="https://img1.baidu.com/it/u=842647274,1455615798&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
alt=""
|
>
|
<div style="margin-left:10px;">
|
<p class="m3-con-name">{{item.name}}</p>
|
<p class="m3-con-d">工龄：{{item.workTIme}}年<span style="margin-left:50px;">学生：{{item.students}}个</span></p>
|
</div>
|
</div>
|
<div class="m3-con-b">
|
<el-button type="text">查看</el-button>
|
</div>
|
</div>
|
</div>
|
<div
|
class="m3-btn"
|
style="border-top:1px solid #EBEEF5"
|
>
|
<button
|
class="content_padding"
|
@click="$router.push('/manage/teacher-manage')"
|
>查看所有</button>
|
</div>
|
</div>
|
<div class="m4 card">
|
<p
|
class="card-title"
|
style="margin-bottom:20px;"
|
>学生名单</p>
|
<el-table
|
:data="state.listStudents"
|
height="80%"
|
>
|
<el-table-column
|
label="学生名称"
|
prop="name"
|
></el-table-column>
|
<el-table-column
|
label="班级"
|
prop="className"
|
></el-table-column>
|
<el-table-column
|
label="班主任"
|
prop="teacher"
|
></el-table-column>
|
<el-table-column
|
label="入学时间"
|
prop="inTime"
|
></el-table-column>
|
<el-table-column
|
label="操作"
|
width="60px"
|
>
|
<template slot-scope="scope">
|
<el-button
|
style="color:#f59b22"
|
type="text"
|
@click="viewDetails(1)"
|
>查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="m3-btn m4-btn content_padding">
|
<button>查看所有</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { createNamespacedHelpers } from "vuex";
|
// const a = createNamespacedHelpers("home");
|
// console.log(a, "a");
|
// 随机 mock
|
import { listStudent, listTeacher, countStudent } from "@/utils/mock/home";
|
export default {
|
data() {
|
return {
|
state: {
|
// 学生名单
|
listStudents: listStudent.studentsArr,
|
// 老师名单
|
listTeachers: listTeacher.TeachersArr,
|
// 学生总数
|
countStudents: countStudent.countStudent,
|
},
|
};
|
},
|
computed: {
|
// ...mapState(["listStudents", "listTeachers", "countStudents"]),
|
},
|
methods: {
|
// ...mapActions(["getListStudents", "getListTeachers", "getCountStudents"]),
|
// 查看详情
|
viewDetails(v) {
|
console.log(v);
|
},
|
},
|
mounted() {
|
// this.getListStudents();
|
// this.getListTeachers();
|
// this.getCountStudents();
|
// console.log(this.listStudents, "+++++++++++++++");
|
// this.getAll();
|
},
|
created() {},
|
};
|
</script>
|
<style scoped lang="scss">
|
.main {
|
margin-top: 100px;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
width: 1300px;
|
}
|
.m1 {
|
display: flex;
|
flex-wrap: wrap;
|
width: 640px;
|
justify-content: space-between;
|
align-items: baseline;
|
margin-bottom: 20px;
|
}
|
.card {
|
background: white;
|
border-radius: 10px;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
display: inline-block;
|
|
&-title {
|
font-size: 16px;
|
color: #777;
|
margin-bottom: 0;
|
}
|
&-num {
|
font-size: 32px;
|
font-weight: 700;
|
margin: 5px 0;
|
}
|
&-d {
|
color: #777;
|
font-size: 12px;
|
margin-top: 5px;
|
}
|
}
|
.bar {
|
width: 100%;
|
height: 10px;
|
background-color: rgb(242, 242, 242);
|
&-r {
|
background-color: red;
|
height: 100%;
|
}
|
}
|
.m2 {
|
width: 630px;
|
height: 324px;
|
margin-bottom: 20px;
|
}
|
.m3 {
|
width: 467px;
|
height: 590px;
|
&-con {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
margin-bottom: 15px;
|
justify-content: space-between;
|
& img {
|
width: 34px;
|
height: 34px;
|
border-radius: 34px;
|
}
|
& p {
|
margin: 0;
|
}
|
&-d {
|
color: #777;
|
font-size: 12px;
|
}
|
&-b {
|
// margin-left: ;
|
color: #f59b22;
|
}
|
}
|
&-btn {
|
display: flex;
|
justify-content: center;
|
& > button {
|
width: 175px;
|
height: 39px;
|
border-color: rgba(16, 71, 247, 1);
|
background: none;
|
border-radius: 5px;
|
color: rgba(16, 71, 247, 1);
|
transition: 0.2s;
|
cursor: pointer;
|
&:hover {
|
background: rgba(16, 71, 247, 1);
|
color: white;
|
}
|
}
|
}
|
}
|
.m4 {
|
width: 790px;
|
height: 590px;
|
&-btn {
|
margin-top: 10px;
|
}
|
}
|
.scrollBar {
|
height: 80%;
|
overflow: auto;
|
}
|
// 滚动条
|
.scrollBar::-webkit-scrollbar {
|
width: 0px;
|
height: 0px;
|
}
|
|
//隐藏滚动条
|
/deep/.el-table__body-wrapper::-webkit-scrollbar {
|
width: 0;
|
}
|
|
.content_padding {
|
margin: 20px 0;
|
}
|
</style>
|
