初始化界面

kcui/src/components/Foot.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="width: 100%;height: 5vw;">
+    <img src="../assets/img/foot.png" style="width: 100%;object-fit: contain;">
+  </div>
+
+</template>
+<script>
+
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'foot',
+  data() {
+    return{
+
+    }
+
+  },
+  methods:{
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+
+</style>

kcui/src/components/Head.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="width: 100%;height: 8.8%;">
+    <img src="../assets/img/head.png" style="width: 100%;object-fit: contain;">
+  </div>
+
+</template>
+<script>
+
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'head',
+  data() {
+    return{
+
+    }
+
+  },
+  methods:{
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+
+</style>

kcui/src/view/TWInfo.vue

@@ -0,0 +1,153 @@
+<template>
+  <div style="width: 100%;height: 100%;background-color: #00173a">
+    <headInfo></headInfo>
+    <!--  这是内容界面  -->
+    <div class="content">
+      <div class="leftContent">
+        <div class="leftBox1">
+          <div style="width: 50%;margin: 0 auto;">
+            <p style="font-size: 1vw;">Hi,{{userName}}~</p>
+            <p style="font-size: 0.7vw;">欢迎使用课程辅助系统</p>
+          </div>
+        </div>
+        <div class="leftBox2">
+          <div class="muluBox">
+            <img src="../assets/img/leftBox.png" style="width: 100%;object-fit: contain;z-index: 1;position: absolute;">
+            <div class="muluList">
+              <div  v-for="item in mulu" :key="item" >
+                <div class="oneMulu" v-if="page!=item">
+                  <div style="width: 80%;text-align: center;">{{item}}</div>
+                  <img  src="../assets/img/jiantou.png" style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 13%;">
+                </div>
+                <div class="oneMuluXuan" v-else>
+                  <div style="width: 72%;text-align: center;">{{item}}</div>
+                  <img src="../assets/img/jiantou.png" style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 8%;">
+                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rightContent">
+        <img src="../assets/img/rightBox.png" style="height: 96%;width: 100%;margin-top: 2%;position: absolute;z-index: 1;">
+
+        <div class="rigthHeadInfo" style="position: relative;">
+          <div style="display: flex;flex-direction: row;">
+            <div v-for="item in typeList" :key="item" style="position: relative;">
+              <img src="../assets/img/typeHead.png" style="width: 5vw;" >
+              <div style="position: absolute;z-index: 2;">{{item}}</div>
+            </div>
+          </div>
+          <img src="../assets/img/rightHead.png" style="width: 100%;height:3vw;position: absolute;z-index: 2;">
+        </div>
+      </div>
+    </div>
+    <div style="width: 100%;height: 3%;position: fixed;bottom: 0px;">
+      <foot></foot>
+    </div>
+  </div>
+
+</template>
+<script>
+import headInfo from '@/components/Head.vue';
+import Foot from "@/components/Foot.vue";
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'TWInfo',
+  components: {Foot, headInfo },
+  data() {
+    return{
+       userName:"李明",
+       mulu:["图文认知","视频资源","动画显示","计算模块","知识图谱","帮助文档"],
+       page:"图文认知",
+       typeList:["海洋大气","海洋文学","海洋地理","复杂水声","复杂电磁"],
+    }
+
+  },
+  methods:{
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+.content{
+     width: 100%;
+     height: 86%;
+}
+.leftContent{
+  width: 14%;
+  height: 100%;
+  float: left;
+}
+.leftBox1{
+  width: 100%;
+  height: 10%;
+  margin-top: 12%;
+  color: #7cdeff;
+}
+.leftBox2{
+  width: 100%;
+  height: 90%;
+
+}
+.muluBox{
+  margin: 3% 14%;
+  height: 92%;
+  width:72%;
+  position: relative;
+
+}
+.muluList{
+  width: 100%;
+  height: 90%;
+  //background-color: #7cdeff;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 2;
+  margin-top: 20%;
+
+}
+.oneMulu{
+  width: 80%;
+  height: 2.5vw;
+  line-height: 2.5vw;
+  font-size: 0.9vw;
+
+  border-bottom: 1px solid #0d3455;
+  margin-left: 10%;
+  color: #d1d3d7;
+  display: flex;
+  flex-direction: row;
+}
+.oneMuluXuan{
+  background-image: url("../assets/img/xuan.png");
+  width: 90%;
+  height: 2.5vw;
+  line-height: 2.5vw;
+  font-size: 0.9vw;
+  color: #d1d3d7;
+  display: flex;
+  flex-direction: row;
+  padding-left: 10%;
+}
+
+
+
+
+
+
+
+.rightContent{
+  width: 84%;
+  height: 100%;
+  float: left;
+  position: relative;
+}
+.rigthHeadInfo{
+  width: 100%;
+}
+</style>