|
|
@@ -0,0 +1,209 @@
|
|
|
+<template>
|
|
|
+ <el-main style="display: flex; align-items: center; margin-bottom: 20px;">
|
|
|
+ <!-- <div class="main-content">
|
|
|
+ <div
|
|
|
+ class="module-card"
|
|
|
+ v-for="menu in menuList.filter(m => m.parentId === null)"
|
|
|
+ :key="menu.id"
|
|
|
+ @click="() => $router.push('/' + menu.ext4 + '/tips')"
|
|
|
+ >
|
|
|
+ {{ menu.name }}
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <el-row width="100vw">
|
|
|
+ <el-col
|
|
|
+ :span="11"
|
|
|
+ :offset="1"
|
|
|
+ v-for="(menu, index) in menuList.filter(m => m.parentId === null)"
|
|
|
+ :key="menu.id"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="['module-card', index % 2 ? 'float-left' : 'float-right']"
|
|
|
+ @click="() => $router.push('/' + menu.ext4 + '/tips')"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <img :class="['module-image', menu.ext4 + '-main-module']" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="align-self-left d-flex d-flex flex-column align-items-start module-desc"
|
|
|
+ >
|
|
|
+ <div class="h4">{{ menu.name }}</div>
|
|
|
+ <div style="width: 400px; font-size: 14px; text-align: left;">
|
|
|
+ {{ moduleDesc[menu.ext4] && moduleDesc[menu.ext4].detail }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const moduleDesc = {
|
|
|
+ basic: {
|
|
|
+ detail: "包括学习中心查询、课程查询、用户查询"
|
|
|
+ },
|
|
|
+ examwork: {
|
|
|
+ detail: "包括安排考试、考试课程、学生档案"
|
|
|
+ },
|
|
|
+ questions: {
|
|
|
+ detail: "包括试卷导入、卷库组成、考试用卷绑定"
|
|
|
+ },
|
|
|
+ oe: {
|
|
|
+ detail: "包括考试过程监考、考试明细查询、考试完成进度查询"
|
|
|
+ },
|
|
|
+ marking: {
|
|
|
+ detail: "包括评卷进度查询、评卷员工作量核算、评卷结果检查"
|
|
|
+ },
|
|
|
+ print: {
|
|
|
+ detail: "试卷印刷管理"
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+import { mapState } from "vuex";
|
|
|
+import { CORE_API } from "@/constants/constants";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "HomeMain",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ moduleDesc: moduleDesc,
|
|
|
+ menuList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState({ user: state => state.user })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getUserPrivileges(groupCode) {
|
|
|
+ var url = CORE_API + "/rolePrivilege/getUserPrivileges";
|
|
|
+ const params = new URLSearchParams();
|
|
|
+ params.append("groupCode", groupCode);
|
|
|
+ params.append("full", false);
|
|
|
+ const res = await this.$httpWithMsg.post(url, params, {
|
|
|
+ headers: { "content-type": "application/x-www-form-urlencoded" }
|
|
|
+ });
|
|
|
+
|
|
|
+ return res.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.menuList = await this.getUserPrivileges("PORTAL_MENUS");
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-main {
|
|
|
+ background-color: #e9eef3;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+
|
|
|
+ /* min-width: 100%; */
|
|
|
+
|
|
|
+ /* height: 100%; */
|
|
|
+}
|
|
|
+
|
|
|
+.module-card {
|
|
|
+ /* width: 350px; */
|
|
|
+ height: 120px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ /* background-color: white; */
|
|
|
+ display: flex;
|
|
|
+ /* justify-items: center; */
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
|
|
|
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
|
+}
|
|
|
+
|
|
|
+/* .module-card:hover { */
|
|
|
+/* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
|
|
|
+
|
|
|
+/* font-size: 30px; */
|
|
|
+/* color: #fff; */
|
|
|
+/* text-align: center; */
|
|
|
+/* animation: glow 1s ease-in-out infinite alternate; */
|
|
|
+/* } */
|
|
|
+</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.module-card:hover .h4 {
|
|
|
+ color: #4d7cc4 !important;
|
|
|
+}
|
|
|
+.module-card:hover div {
|
|
|
+ color: #65738b !important;
|
|
|
+}
|
|
|
+.module-image {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-color: #4d7cc4;
|
|
|
+ border-top-left-radius: 20px 20px;
|
|
|
+ border-bottom-left-radius: 20px 20px;
|
|
|
+}
|
|
|
+.module-card:hover .module-image {
|
|
|
+ background-color: #55bfff;
|
|
|
+ box-shadow: 0px 5px 20px 0px #55bfff;
|
|
|
+ color: #4d7cc4 !important;
|
|
|
+}
|
|
|
+.module-desc {
|
|
|
+ background-color: white;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.module-card:hover .module-desc {
|
|
|
+ box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+.basic-main-module {
|
|
|
+ background-image: url("./images/basic.png");
|
|
|
+}
|
|
|
+.module-card:hover .basic-main-module {
|
|
|
+ background-image: url("./images/basic-hover.png");
|
|
|
+}
|
|
|
+.examwork-main-module {
|
|
|
+ background-image: url("./images/examwork.png");
|
|
|
+}
|
|
|
+.module-card:hover .examwork-main-module {
|
|
|
+ background-image: url("./images/examwork-hover.png");
|
|
|
+}
|
|
|
+.questions-main-module {
|
|
|
+ background-image: url("./images/questions.png");
|
|
|
+}
|
|
|
+.module-card:hover .questions-main-module {
|
|
|
+ background-image: url("./images/questions-hover.png");
|
|
|
+}
|
|
|
+.oe-main-module {
|
|
|
+ background-image: url("./images/oe.png");
|
|
|
+}
|
|
|
+.module-card:hover .oe-main-module {
|
|
|
+ background-image: url("./images/oe-hover.png");
|
|
|
+}
|
|
|
+.marking-main-module {
|
|
|
+ background-image: url("./images/marking.png");
|
|
|
+}
|
|
|
+.module-card:hover .marking-main-module {
|
|
|
+ background-image: url("./images/marking-hover.png");
|
|
|
+}
|
|
|
+.print-main-module {
|
|
|
+ background-image: url("./images/print.png");
|
|
|
+}
|
|
|
+.module-card:hover .print-main-module {
|
|
|
+ background-image: url("./images/print-hover.png");
|
|
|
+}
|
|
|
+</style>
|
Michael Wang
