diff --git a/kcui/src/view/SpInfoXq.vue b/kcui/src/view/SpInfoXq.vue
new file mode 100644
index 0000000..2e6ae03
--- /dev/null
+++ b/kcui/src/view/SpInfoXq.vue
@@ -0,0 +1,224 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/twbg1.jpg">
+    <headInfo style="position: absolute;z-index: 100"></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" @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>
+                  <img src="../assets/img/twCircle.png"
+                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
+                  <div style="width: 55%;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%;">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rightContent">
+        <div class="contentInfo">
+          <div class="contentTitle">{{contentInfo.title}}</div>
+          <div class="contentText">
+            <Video1 style="height: 96%;width: 80%; object-fit:contain" :src="contentInfo.url"
+                   :second="3"/>
+           </div>
+        </div>
+      </div>
+    </div>
+
+
+
+    <div style="width: 100%;height: 3%;position: fixed;bottom: 0px;z-index: 100">
+      <foot></foot>
+    </div>
+  </div>
+
+</template>
+<script>
+
+import headInfo from "@/components/Head.vue";
+import Foot from "@/components/Foot.vue";
+import {getInfo} from "@/api/kcInfo";
+import Video1 from "@/components/Video1.vue";
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'SpInfoXq',
+  components: {Video1, Foot, headInfo},
+  data() {
+    return{
+      docId:undefined,
+      level:0,
+      url:"",
+      userName:"",
+      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"}
+      ],
+      contentInfo:{
+        title:"",
+        url:""
+      },
+
+    }
+  },
+  methods:{
+    goInfo(info) {
+
+      this.$router.push('/' + info)
+    },
+    getXqInfo(){
+      var data = {
+        id:this.docId
+      }
+      getInfo(data).then((res)=>{
+         console.log(res);
+         this.contentInfo.url = res.data.data.spUrl;
+         this.contentInfo.title = res.data.data.name
+
+      })
+    }
+  },
+  mounted() {
+    this.docId = this.$route.query.id;
+    this.userType = localStorage.getItem("type");
+    this.userName = localStorage.getItem("name");
+    this.getXqInfo();
+  }
+}
+</script>
+<style scoped>
+.content {
+  width: 100%;
+  height: 86%;
+}
+
+.leftContent {
+  width: 14%;
+  height: 100%;
+  float: left;
+  margin-top: 4.4%;
+
+}
+
+.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: #13ffff;
+  display: flex;
+  flex-direction: row;
+  padding-left: 10%;
+}
+
+
+.rightContent {
+  width: 84%;
+  height: 100%;
+  float: left;
+  position: relative;
+}
+
+
+.contentInfo{
+  width: 100%;
+  height: 96%;
+  background-color: rgba(20, 119, 208, 0.82);
+  position: absolute;
+  z-index: 101;
+  margin-top: 7%;
+  border-radius: 1vw;
+}
+.contentTitle{
+  width: 100%;
+  height: 8%;
+
+  font-size: 1.5vw;
+  color: #ffffff;
+  text-align: center;
+  letter-spacing: 5px;
+  line-height: 3vw;
+
+
+}
+.contentText{
+  width: 96%;
+  height: 89%;
+  margin-top: 1%;
+  font-size: 1vw;
+  margin-left: 2%;
+  color: #ffffff;
+  display: flex;
+  justify-content: space-around;
+
+}
+</style>