add:home

src/views/index.vue

@@ -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>