添加首页样式和图片

src/modules/portal/routes/routes.js

@@ -1,7 +1,7 @@
 import Login from "../views/Login.vue";
 import Access from "../views/Access.vue";
 import Home from "../views/home/Home.vue";
-import HomeMain from "../views/home/HomeMain.vue";
+import HomeMain from "../views/home/main/HomeMain.vue";
 import Component404 from "../views/Component404.vue";
 
 export default [

src/modules/portal/views/home/HomeMain.vue

@@ -1,106 +0,0 @@
-<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-main>
-</template>
-
-<script>
-import { mapState } from "vuex";
-import { CORE_API } from "@/constants/constants";
-
-export default {
-  name: "HomeMain",
-  data() {
-    return {
-      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: 200px;
-  height: 150px;
-  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; */
-}
-
-/* @keyframes glow {
-  from {
-    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
-      0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
-  }
-  to {
-    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
-      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
-  }
-} */
-</style>

src/modules/portal/views/home/main/HomeMain.vue

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