目录

kcui/package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.15.14",
     "js-cookie": "^3.0.5",
     "quill": "1.3.7",
+    "sass": "^1.84.0",
     "vue": "^2.6.14",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.1"
@@ -25,10 +26,9 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "vue-template-compiler": "^2.6.14",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
-    "node-sass": "^9.0.0"
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,

kcui/src/view/Mulu.vue

@@ -1,19 +1,14 @@
 <template>
   <div style="width: 100%;height: 100%;">
     <img style="width: 100%;height: 100%;position: absolute;z-index:99;" src="../assets/img/mulubg.png">
-    <img src="../assets/img/mululist.png" style="width: 100%;height: 100%;position: absolute;z-index:100;">
     <headInfo style="position: absolute;z-index: 100"></headInfo>
-    <div class="mululist">
-      <div v-for="item in mulu" :key="item" style="width: 100%;height: 10%;" @click="goPage(item.info)">
-        {{item.name}}
-      </div>
+    <div v-for="item in mulu" :key="item.id">
+      <img :src="require('@/assets/img/' + item.imgSrc)" />
     </div>
-
-    <div style="width: 100%;height: 3%;position: fixed;bottom: 0px;z-index: 100">
-      <foot></foot>
     </div>
+  <div style="width: 100%;height: 3%;position: fixed;bottom: 0px;">
+    <foot></foot>
   </div>
-
 </template>
 <script>
 
@@ -26,12 +21,12 @@ export default {
   data() {
     return{
        mulu:[
-         {id:0,name:"图文认知",info:"TwInfo"},
-         {id:1,name:"视频资源",info:"SpInfo"},
-         {id:2,name:"动画显示",info:"DhInfo"},
-         {id:3,name:"计算模块",info:"JsInfo"},
-         {id:4,name:"知识图谱",info:"Graph"},
-         {id:4,name:"帮助文档",info:"Help"},
+         {id:0,name:"图文认知",imgSrc: 'muluchoice1.png',info:"TwInfo"},
+         {id:1,name:"视频资源",imgSrc: 'muluchoice1.png',info:"SpInfo"},
+         {id:2,name:"动画显示",imgSrc: 'muluchoice1.png',info:"DhInfo"},
+         {id:3,name:"计算模块",imgSrc: 'muluchoice1.png',info:"JsInfo"},
+         {id:4,name:"知识图谱",imgSrc: 'muluchoice1.png',info:"Graph"},
+         {id:4,name:"帮助文档",imgSrc: 'muluchoice1.png',info:"Help"},
        ]
     }
   },
@@ -47,19 +42,5 @@ export default {
 }
 </script>
 <style scoped>
-.mululist{
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 10%;
-  height: 50%;
-  //background-color: #42b983;
-  position: absolute;
-  top: 25%;
-  z-index: 110;
-  left: 15%;
-  text-align: center;
-  font-size: 1.2vw;
-  color: #ffffff;
-}
+
 </style>