diff --git a/kcui/src/view/Login.vue b/kcui/src/view/Login.vue
new file mode 100644
index 0000000..7809294
--- /dev/null
+++ b/kcui/src/view/Login.vue
@@ -0,0 +1,219 @@
+<template>
+  <div style="width: 100%;height: 100%;background-color: #00173a;">
+    <img style="width: 100%;height: 100%;position: absolute;z-index:99;" src="../assets/img/loginBg.png">
+    <headInfo style="position: absolute;z-index: 100"></headInfo>
+    <div class="loginBox">
+      <div style="position: absolute;top:10%;color: white;font-size: 1.2vw;left: 38%">用户登陆</div>
+      <div class="password-input-container">
+        <img src="../assets/img/userInfo.png" style="position: absolute;z-index: 99;width: 100%;height: 100%;">
+        <input
+            type="text"
+            :placeholder="placeholder1"
+            v-model="userName"
+        />
+      </div>
+      <div class="password-input-container1">
+        <img src="../assets/img/password.png" style="position: absolute;z-index: 99;width: 100%;height: 100%;">
+        <input
+            type="text"
+            :placeholder="placeholder2"
+            v-model="password"
+        />
+      </div>
+      <div class="checkBox">
+        <el-checkbox style="color: white;position: absolute;right: 0;"  v-model="checked">记住密码</el-checkbox>
+      </div>
+      <div class="loginButton" @click="login">
+        <div style="height: 100%;width: 100%;position: absolute;line-height: 2.4vw;text-align: center;font-size: 1vw;color: white;letter-spacing: 3px;">登录</div>
+        <img src="../assets/img/loginButton.png" style="width: 100%;height: 100%;">
+      </div>
+      <div class="regist">
+        <div style="float: left;margin-left: 25%;">没有账号，请进行</div><div style="color: rgba(90,208,255,0.9);float: left;" @click="openRest">注册</div>
+      </div>
+
+        <img src="../assets/img/loginBox.png" style="width: 100%;height: 100%;">
+    </div>
+    <el-dialog title="注册信息" :visible.sync="regist">
+      <el-form :model="form">
+        <el-form-item label="用户账号" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" :label-width="formLabelWidth">
+          <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="用户类型" :label-width="formLabelWidth">
+          <el-select v-model="form.userType" placeholder="请选择用户类型">
+            <el-option label="管理员" value="1"></el-option>
+            <el-option label="学生" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="班级信息" :label-width="formLabelWidth">
+          <el-input v-model="form.classInfo" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="regist = false">取 消</el-button>
+        <el-button type="primary" @click="goRegist">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+<script>
+
+import headInfo from "@/components/Head.vue";
+import {doLogin, registered} from "@/api/login";
+
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Login',
+  components: {headInfo},
+  data() {
+    return{
+      placeholder1:"请输入账号",
+      userName:"",
+      placeholder2:"请输入密码",
+      password:"",
+
+      checked:false,
+
+      //这是注册的信息
+      regist:false,
+      form: {
+        name: '',
+        password:'',
+        userType: 0,
+        classInfo: '',
+
+      },
+      formLabelWidth: '120px'
+    }
+  },
+  methods:{
+    login(){
+      var data = {
+        userName:this.userName,
+        password:this.password,
+      }
+      doLogin(data).then((res)=>{
+        if(res.code==200){
+          this.$router.push('/Mulu')
+        }else {
+          console.log("失败")
+        }
+      })
+    },
+    Check() {
+      this.checked = true;
+    },
+    openRest(){
+      this.regist = true;
+    },
+    goRegist(){
+      var data = {
+        userName:this.form.name,
+        password:this.form.password,
+        userType:this.form.userType,
+        classInfo:this.form.classInfo
+
+      }
+      registered(data).then((res)=>{
+
+        console.log(res);
+      })
+    }
+  },
+  mounted() {
+    this.login();
+
+  }
+}
+</script>
+<style scoped>
+.loginBox{
+  width: 20%;
+  height: 40%;
+  //background-color: #42b983;
+  position: absolute;
+  z-index: 100;
+  top: 30%;
+  left: 10%;
+}
+.password-input-container {
+  width: 80%;
+  height: 14%;
+  //background: #b94289;
+  position: absolute;
+  top: 25%;
+  left: 10%;
+}
+.password-input-container1{
+  width: 80%;
+  height: 14%;
+  //background: #b94289;
+  position: absolute;
+  top: 45%;
+  left: 10%;
+}
+
+input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  color: white; /* 文字颜色 */
+  background-color: transparent;
+  padding-left:3%;
+  position: absolute;
+  z-index: 2000;
+
+}
+input::placeholder {
+  color: white;
+  opacity: 1; /* Firefox 默认将 placeholder 的透明度设置为 0.54 */
+
+}
+.checkBox{
+  width: 80%;
+  height: 5%;
+  position: absolute;
+  top: 61%;
+  left: 10%;
+}
+/* 自定义样式 */
+.el-checkbox__inner {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
+
+/*登录按钮*/
+.loginButton{
+  width: 80%;
+  height: 12%;
+  position: absolute;
+  bottom: 15%;
+  left: 10%;
+
+}
+.regist{
+  width: 80%;
+  height: 12%;
+  position: absolute;
+  bottom: 2%;
+  left: 10%;
+  color: #Ffffff;
+  text-align: center;
+}
+
+</style>
diff --git a/kcui/src/view/TWInfo.vue b/kcui/src/view/TWInfo.vue
index 06050d1..42a273b 100644
--- a/kcui/src/view/TWInfo.vue
+++ b/kcui/src/view/TWInfo.vue
@@ -14,16 +14,16 @@
           <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>
+              <div v-for="item in mulu" :key="item" >
+                <div class="oneMulu" v-if="page!=item" @click="goInfo(item.info)">
+                  <div style="width: 80%;text-align: center;">{{ item.name }}</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>
+                <div class="oneMuluXuan" v-else >
+                  <div style="width: 72%;text-align: center;" >{{ item.name  }}</div>
                   <img src="../assets/img/jiantou.png"
-                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 8%;">
+                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 8%;" >
                 </div>
               </div>
             </div>
@@ -33,17 +33,19 @@
       <div class="rightContent">
         <img src="../assets/img/rightBox.png"
              style="height: 98%;width: 100%;margin-top: 1%;position: absolute;z-index: 1;">
-        <div class="rigthHeadInfo" style="position: relative;" >
+        <div class="rigthHeadInfo" style="position: relative;">
           <div
               style="display: flex;flex-direction: row;position: absolute;z-index: 1;margin-top: 2.9vw;margin-left: 3%;">
-            <div v-for="item in typeList" :key="item" style="position: relative;margin-right: 1vw;" @click="changeType(item)">
-              <img src="../assets/img/typeHead.png" style="width: 7vw;object-fit: contain;" >
-              <div style="position: absolute;z-index: 12121;color: #ffffff;top: 0.3vw;left: 1.8vw;" >{{ item }}</div>
+            <div v-for="item in typeList" :key="item" style="position: relative;margin-right: 1vw;"
+                 @click="changeType(item)">
+              <img src="../assets/img/typeHead.png" style="width: 7vw;object-fit: contain;">
+              <div style="position: absolute;z-index: 12121;color: #ffffff;top: 0.3vw;left: 1.8vw;">{{ item }}</div>
             </div>
           </div>
-          <div style="width: 94%;height:3vw;position: absolute;z-index: 1;top: 4.9vw;left: 3%;background-color: #0c3068;box-shadow:  0px -9px 10px 0px  rgb(75,230,255);"></div>
-<!--          <img src="../assets/img/rightHead.png"-->
-<!--               style="width: 96%;height:5vw;position: absolute;z-index: 1;top: 3.1vw;left: 2%;">-->
+          <div
+              style="width: 94%;height:3vw;position: absolute;z-index: 1;top: 4.9vw;left: 3%;background-color: #0c3068;box-shadow:  0px -9px 10px 0px  rgb(75,230,255);"></div>
+          <!--          <img src="../assets/img/rightHead.png"-->
+          <!--               style="width: 96%;height:5vw;position: absolute;z-index: 1;top: 3.1vw;left: 2%;">-->
           <div style="width: 94.4%;height: 2.9vw;position: absolute;z-index: 2;margin-left: 2.6%;top: 5vw;">
             <div
                 style="width: 100%;height: 100%;display: flex;flex-direction: row;line-height: 2.9vw;text-align: center;color: #ffffff;">
@@ -65,12 +67,14 @@
             </div>
           </div>
           <div class="pageList">
-              <div style="float: left;margin-right: 0.1vw;" @click="choosePage(onePagesList[0]-1)">...</div>
-              <div v-for="item in onePagesList" :key="item" @click="choosePage(item)">
-                <div style="width: 1.4vw;height: 1.4vw;border-radius: 50%;background-color: #082e56;margin-top: 0.25vw;font-size: 0.5vw;
-                   text-align: center;line-height: 1.6vw;margin-left: 1vw;margin-right: 1vw; box-shadow: inset 0 0 14px 1px  rgb(75,230,255);">{{item}}</div>
+            <div style="float: left;margin-right: 0.1vw;" @click="choosePage(onePagesList[0]-1)">...</div>
+            <div v-for="item in onePagesList" :key="item" @click="choosePage(item)">
+              <div style="width: 1.4vw;height: 1.4vw;border-radius: 50%;background-color: #082e56;margin-top: 0.25vw;font-size: 0.5vw;
+                   text-align: center;line-height: 1.6vw;margin-left: 1vw;margin-right: 1vw; box-shadow: inset 0 0 14px 1px  rgb(75,230,255);">
+                {{ item }}
               </div>
-              <div style="float: left;margin-left: 0.1vw;">...</div>
+            </div>
+            <div style="float: left;margin-left: 0.1vw;">...</div>
           </div>
         </div>
       </div>
@@ -93,7 +97,14 @@ export default {
   data() {
     return {
       userName: "李明",
-      mulu: ["图文认知", "视频资源", "动画显示", "计算模块", "知识图谱", "帮助文档"],
+      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"}
+      ],
       page: "图文认知",
       typeList: ["海洋大气", "海洋文学", "海洋地理", "复杂水声", "复杂电磁"],
       contentList: [],
@@ -104,17 +115,20 @@ export default {
       total: 0,
       totalPage: 0,
       pagesList: [],
-      onePagesList:[],
+      onePagesList: [],
     }
 
   },
   methods: {
-    changeType(item){
-      console.log("dhjasdhkahdkjahskjhdkj")
+    goInfo(info){
+      console.log(info)
+      this.$router.push('/'+info)
+    },
+    changeType(item) {
       this.twType = item;
       this.getContentList();
     },
-    choosePage(item){
+    choosePage(item) {
       console.log(item);
       this.pageNum = item;
       this.getContentList();
@@ -133,17 +147,17 @@ export default {
         this.totalPage = res.data.totalPages;
 
         var aaa = 0;
-        this.onePagesList =[];
+        this.onePagesList = [];
         this.pagesList = [];
-        if(this.pageNum<this.totalPage-3){
+        if (this.pageNum < this.totalPage - 3) {
 
           for (let i = this.pageNum; i <= this.totalPage; i++) {
 
             this.pagesList.push(i);
             this.onePagesList.push(i);
-            aaa = aaa+1;
+            aaa = aaa + 1;
             console.log(aaa);
-            if(aaa==4){
+            if (aaa == 4) {
               break;
             }
           }
diff --git a/src/main/java/com/main/woka/Web/Dao/KcInfo.java b/src/main/java/com/main/woka/Web/Dao/KcInfo.java
new file mode 100644
index 0000000..808da60
--- /dev/null
+++ b/src/main/java/com/main/woka/Web/Dao/KcInfo.java
@@ -0,0 +1,251 @@
+package com.main.woka.Web.Dao;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import org.springframework.format.annotation.DateTimeFormat;
+
+import java.util.Date;
+
+public class KcInfo {
+
+    private Long id;//实体主键id
+    private Long type;//实体种类(1图文 2视频 3动画 4计算模块 0未设置信息)
+    private String name;//实体名称
+    private String twUrl;//图文资源地址
+    private String spUrl;//视频资源地址
+    private String dwUrl;//动画资源地址
+    private String jsInfo;//计算模块信息
+    private Long parentId;//上级id
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    private Date createTime;
+    private Long createBy;
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    private Date updateTime;
+    private Long updateBy;
+    private Long isGraph;
+    private Long fileId;
+    private Long level;
+    private Long  groupId;
+    private String twType;
+    private String spType;
+    private String dwType;
+    private String jsType;
+
+    private Integer pageNum;  // 当前页码
+    private Integer pageSize=10; // 每页记录数
+    private Integer offset;
+
+
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public Long getType() {
+        return type;
+    }
+
+    public void setType(Long type) {
+        this.type = type;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getTwUrl() {
+        return twUrl;
+    }
+
+    public void setTwUrl(String twUrl) {
+        this.twUrl = twUrl;
+    }
+
+    public String getSpUrl() {
+        return spUrl;
+    }
+
+    public void setSpUrl(String spUrl) {
+        this.spUrl = spUrl;
+    }
+
+    public String getDwUrl() {
+        return dwUrl;
+    }
+
+    public void setDwUrl(String dwUrl) {
+        this.dwUrl = dwUrl;
+    }
+
+    public String getJsInfo() {
+        return jsInfo;
+    }
+
+    public void setJsInfo(String jsInfo) {
+        this.jsInfo = jsInfo;
+    }
+
+    public Long getParentId() {
+        return parentId;
+    }
+
+    public void setParentId(Long parentId) {
+        this.parentId = parentId;
+    }
+
+    public Date getCreateTime() {
+        return createTime;
+    }
+
+    public void setCreateTime(Date createTime) {
+        this.createTime = createTime;
+    }
+
+    public Long getCreateBy() {
+        return createBy;
+    }
+
+    public void setCreateBy(Long createBy) {
+        this.createBy = createBy;
+    }
+
+    public Date getUpdateTime() {
+        return updateTime;
+    }
+
+    public void setUpdateTime(Date updateTime) {
+        this.updateTime = updateTime;
+    }
+
+    public Long getUpdateBy() {
+        return updateBy;
+    }
+
+    public void setUpdateBy(Long updateBy) {
+        this.updateBy = updateBy;
+    }
+
+    public Long getIsGraph() {
+        return isGraph;
+    }
+
+    public void setIsGraph(Long isGraph) {
+        this.isGraph = isGraph;
+    }
+
+    public Long getFileId() {
+        return fileId;
+    }
+
+    public void setFileId(Long fileId) {
+        this.fileId = fileId;
+    }
+
+    public Long getLevel() {
+        return level;
+    }
+
+    public void setLevel(Long level) {
+        this.level = level;
+    }
+
+    public Long getGroupId() {
+        return groupId;
+    }
+
+    public void setGroupId(Long groupId) {
+        this.groupId = groupId;
+    }
+
+    public String getTwType() {
+        return twType;
+    }
+
+    public void setTwType(String twType) {
+        this.twType = twType;
+    }
+
+    public String getSpType() {
+        return spType;
+    }
+
+    public void setSpType(String spType) {
+        this.spType = spType;
+    }
+
+    public String getDwType() {
+        return dwType;
+    }
+
+    public void setDwType(String dwType) {
+        this.dwType = dwType;
+    }
+
+    public String getJsType() {
+        return jsType;
+    }
+
+    public void setJsType(String jsType) {
+        this.jsType = jsType;
+    }
+
+
+    public Integer getPageNum() {
+        return pageNum;
+    }
+
+    public void setPageNum(Integer pageNum) {
+        this.pageNum = pageNum;
+    }
+
+    public Integer getPageSize() {
+        return pageSize;
+    }
+
+    public void setPageSize(Integer pageSize) {
+        this.pageSize = pageSize;
+    }
+
+    public Integer getOffset() {
+        return offset;
+    }
+
+    public void setOffset(Integer offset) {
+        this.offset = offset;
+    }
+
+    @Override
+    public String toString() {
+        return "KcDoc{" +
+                "id=" + id +
+                ", type=" + type +
+                ", name='" + name + '\'' +
+                ", twUrl='" + twUrl + '\'' +
+                ", spUrl='" + spUrl + '\'' +
+                ", dwUrl='" + dwUrl + '\'' +
+                ", jsInfo='" + jsInfo + '\'' +
+                ", parentId=" + parentId +
+                ", createTime=" + createTime +
+                ", createBy=" + createBy +
+                ", updateTime=" + updateTime +
+                ", updateBy=" + updateBy +
+                ", isGraph=" + isGraph +
+                ", fileId=" + fileId +
+                ", level=" + level +
+                ", groupId=" + groupId +
+                ", twType='" + twType + '\'' +
+                ", spType='" + spType + '\'' +
+                ", dwType='" + dwType + '\'' +
+                ", jsType='" + jsType + '\'' +
+                '}';
+    }
+}