|
|
@@ -1,22 +1,248 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
-首页
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <div class="costsBox">
|
|
|
+ <div class="top_style">
|
|
|
+ <i class="left_icon"></i>
|
|
|
+ <strong>筛选条件</strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="dis_flex">
|
|
|
+ <span class="label_style">教育类型：</span>
|
|
|
+ <ul class="topul_sty">
|
|
|
+ <li
|
|
|
+ class="topFloat_sty"
|
|
|
+ v-for="(item, index) in educationType"
|
|
|
+ :key="index"
|
|
|
+ @click="activeEdu(item.id)"
|
|
|
+ :class="activeEduId === item.id ? 'activeStyle' : ''"
|
|
|
+ >
|
|
|
+ {{ item.educationName }}
|
|
|
+ </li>
|
|
|
+ <div style="clear: both"></div>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="dis_flex">
|
|
|
+ <span class="label_style">业务层次：</span>
|
|
|
+ <ul class="topul_sty">
|
|
|
+ <li
|
|
|
+ class="topFloat_sty"
|
|
|
+ v-for="(item, index) in businList"
|
|
|
+ :key="index"
|
|
|
+ @click="activeBus(item.id)"
|
|
|
+ :class="activeBusId === item.id ? 'activeStyle' : ''"
|
|
|
+ >
|
|
|
+ {{ item.businessName }}
|
|
|
+ </li>
|
|
|
+ <div style="clear: both"></div>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="costsBox">
|
|
|
+ <div class="top_style">
|
|
|
+ <i class="left_icon"></i>
|
|
|
+ <strong>学员数量</strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="NumBox">
|
|
|
+ <i>当前累计人数：</i>
|
|
|
+ <span>49083949</span>
|
|
|
+ </div>
|
|
|
+ <div class="NumBox">
|
|
|
+ <i>昨日新增人数：</i>
|
|
|
+ <span>95984</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="18">
|
|
|
+ <div class="costsBox">
|
|
|
+ <div class="top_style">
|
|
|
+ <i class="left_icon"></i>
|
|
|
+ <strong>学员资料修改动态</strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ 今日修改：<span style="color: rgb(217, 0, 27)">50</span
|
|
|
+ ><el-divider direction="vertical"></el-divider>
|
|
|
+ 昨日修改：<span style="color: rgb(217, 0, 27)">50</span
|
|
|
+ ><el-divider direction="vertical"></el-divider>
|
|
|
+ 近7日修改：<span style="color: rgb(217, 0, 27)">50</span>
|
|
|
+ </div>
|
|
|
+ <div>xxxxxx</div>
|
|
|
+ <div>xxxxxx</div>
|
|
|
+ </div>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="costsBox">
|
|
|
+ <div class="top_style">
|
|
|
+ <i class="left_icon"></i>
|
|
|
+ <strong>订单数量</strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="NumBox">
|
|
|
+ <i>当前累计人数：</i>
|
|
|
+ <span>49083949</span>
|
|
|
+ </div>
|
|
|
+ <div class="NumBox">
|
|
|
+ <i>昨日新增人数：</i>
|
|
|
+ <span>95984</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="costsBox">
|
|
|
+ <div class="top_style">
|
|
|
+ <i class="left_icon"></i>
|
|
|
+ <strong>今日订单数量</strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="NumBox">
|
|
|
+ <i>当前累计人数：</i>
|
|
|
+ <span>49083949</span>
|
|
|
+ </div>
|
|
|
+ <div class="NumBox">
|
|
|
+ <i>昨日新增人数：</i>
|
|
|
+ <span>95984</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div></el-col
|
|
|
+ ></el-row
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="costsBox">
|
|
|
+ <div class="top_style">
|
|
|
+ <i class="left_icon"></i>
|
|
|
+ <strong>用户信息</strong>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ul class="ul_style_right">
|
|
|
+ <li>管理员：李大米</li>
|
|
|
+ <li>本次登录的时间：2022/4/4 13:38:22</li>
|
|
|
+ <li>您上次登录的时间：2022/4/1 13:38:22</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
export default {
|
|
|
- name:"Index",
|
|
|
- data () {
|
|
|
+ name: "Index",
|
|
|
+ data() {
|
|
|
return {
|
|
|
- }
|
|
|
+ businList: [],
|
|
|
+ activeEduId: "",
|
|
|
+ activeBusId: "",
|
|
|
+ };
|
|
|
},
|
|
|
+ computed: { ...mapGetters(["educationType"]) },
|
|
|
methods: {
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
+ activeEdu(id) {
|
|
|
+ this.activeEduId = id;
|
|
|
+ this.getBusinList(id);
|
|
|
+ },
|
|
|
+ activeBus(id) {
|
|
|
+ this.activeBusId = id;
|
|
|
+ },
|
|
|
+ getBusinList(id) {
|
|
|
+ this.$api
|
|
|
+ .inquirebusinessList({ status: 1, educationId: id })
|
|
|
+ .then((res) => {
|
|
|
+ this.businList = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-
|
|
|
+#index {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
+}
|
|
|
+.costsBox {
|
|
|
+ margin-right: 18px;
|
|
|
+ padding: 6px 17px 14px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-bottom: 18px;
|
|
|
+ .top_style {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 0px;
|
|
|
+ border-bottom: 1px solid #e5e5e5;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .left_icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 16px;
|
|
|
+ background: #409eff;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ strong {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.ul_style_right {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ li {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dis_flex {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .label_style {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 80px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .topul_sty {
|
|
|
+ margin: 0;
|
|
|
+ .topFloat_sty {
|
|
|
+ color: #666;
|
|
|
+ float: left;
|
|
|
+ margin: 0px 8px 8px 0px;
|
|
|
+ user-select: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.activeStyle {
|
|
|
+ font-weight: bold !important;
|
|
|
+ color: #409eff !important;
|
|
|
+}
|
|
|
+.NumBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ i {
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: rgb(217, 0, 27);
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
