report

package-lock.json

@@ -3390,6 +3390,26 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz",
+      "integrity": "sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true
+        }
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
@@ -4083,6 +4103,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.4.0.tgz",
+      "integrity": "sha1-1SYFZs7wuY9aALrxtQEOksHCNmE=",
+      "requires": {
+        "zrender": "4.1.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -7001,6 +7029,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npm.taobao.org/lib-flexible/download/lib-flexible-0.3.2.tgz",
+      "integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
@@ -7629,6 +7662,12 @@
         "to-regex": "^3.0.1"
       }
     },
+    "natives": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npm.taobao.org/natives/download/natives-1.1.6.tgz",
+      "integrity": "sha1-pgO0pJirdxc2ErnqGs3sTZgPALs=",
+      "dev": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/natural-compare/download/natural-compare-1.4.0.tgz",
@@ -9012,6 +9051,124 @@
       "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
       "dev": true
     },
+    "px2rem": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npm.taobao.org/px2rem/download/px2rem-0.5.0.tgz",
+      "integrity": "sha1-JLOmz3TRSttO13byB4cdmJPkEOI=",
+      "dev": true,
+      "requires": {
+        "chalk": "~0.5.1",
+        "commander": "~2.6.0",
+        "css": "~2.2.0",
+        "extend": "~3.0.0",
+        "fs-extra": "~0.16.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-0.2.1.tgz",
+          "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-1.1.0.tgz?cache=0&sync_timestamp=1566431369422&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-1.1.0.tgz",
+          "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-0.5.1.tgz?cache=0&sync_timestamp=1570527275600&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-0.5.1.tgz",
+          "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^1.1.0",
+            "escape-string-regexp": "^1.0.0",
+            "has-ansi": "^0.1.0",
+            "strip-ansi": "^0.3.0",
+            "supports-color": "^0.2.0"
+          }
+        },
+        "commander": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npm.taobao.org/commander/download/commander-2.6.0.tgz?cache=0&sync_timestamp=1572603184853&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.6.0.tgz",
+          "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "0.16.5",
+          "resolved": "https://registry.npm.taobao.org/fs-extra/download/fs-extra-0.16.5.tgz",
+          "integrity": "sha1-GtZh+myGyWCM0bSe/G/Og0k5p1A=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^3.0.5",
+            "jsonfile": "^2.0.0",
+            "rimraf": "^2.2.8"
+          }
+        },
+        "graceful-fs": {
+          "version": "3.0.12",
+          "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-3.0.12.tgz",
+          "integrity": "sha1-ADSUfOntaV7IqwuFS8kZ6Csf+u8=",
+          "dev": true,
+          "requires": {
+            "natives": "^1.1.3"
+          }
+        },
+        "has-ansi": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npm.taobao.org/has-ansi/download/has-ansi-0.1.0.tgz?cache=0&sync_timestamp=1568144153016&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-ansi%2Fdownload%2Fhas-ansi-0.1.0.tgz",
+          "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.0"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.3.tgz",
+              "integrity": "sha1-ShL/G2A3bvCYYsIJPt2Qgyi+hCM=",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "strip-ansi": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-0.3.0.tgz",
+          "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-0.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-0.2.0.tgz",
+          "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
+          "dev": true
+        }
+      }
+    },
+    "px2rem-loader": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npm.taobao.org/px2rem-loader/download/px2rem-loader-0.1.9.tgz",
+      "integrity": "sha1-yPK/i+i5prQ6X2fRSy/r4RYOVqA=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "px2rem": "^0.5.0"
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz",
@@ -11792,6 +11949,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.1.1.tgz",
+      "integrity": "sha1-IB5YpVzxp+lz4dutPBVZbvh3n1Q="
     }
   }
 }

package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "echarts": "^4.4.0",
     "element-ui": "^2.4.5",
+    "lib-flexible": "^0.3.2",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"
@@ -27,6 +29,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "px2rem-loader": "^0.1.9",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.10"
   }

src/assets/css/gobal.css

@@ -8,6 +8,7 @@ body {
     padding: 0;
     margin: 0;
     background-color: #EBEDF5;
+    overflow-x: hidden;
 }
 
 .tabEdit .el-input__inner {

src/components/Home.vue

@@ -26,7 +26,7 @@
         <el-submenu index="2">
             <template slot="title">
               <i class="el-icon-menu"></i>
-              <span>试题库</span>
+              <span @click='clickPage'>试题库</span>
             </template>
              <el-menu-item-group>
             
@@ -35,10 +35,10 @@
         <el-submenu index="3">
             <template slot="title">
               <i class="el-icon-menu"></i>
-              <span>作业管理</span>
+              <span @click='clickWork'>作业管理</span>
             </template>
              <el-menu-item-group>
-              
+                
             </el-menu-item-group>
         </el-submenu>
         <el-submenu index="4">
@@ -54,12 +54,12 @@
         </div>
 
         <!-- 视图体区 -->
-        <div class="banxin">
+       
         <el-card class="con">
             <router-view></router-view>
         </el-card>
         <div class="footer"><p>copyright@2013-2019 All Right</p></div>
-        </div>
+       
     </div>
 </template>
 <script>
@@ -81,6 +81,12 @@ export default {
         },
         clickRep(){
             this.$router.push('/report')
+        },
+        clickWork(){
+            this.$router.push('/homework')
+        },
+        clickPage(){
+            this.$router.push('/shiti')
         }
     }
 }
@@ -162,7 +168,7 @@ font-size: 12px;
     margin:15px auto 0;
     width: 1200px;
     min-width: 800px;
-    height: 410px;
+    height: 100%;
     background-color: #fff;
     
 }
@@ -171,10 +177,11 @@ font-size: 12px;
 }
 .footer {
     color: #B1B9CF;
-   position: fixed;
-  bottom: 10px;;
+   position:fixed ;
+  bottom: -8px;;
    left: 50%;
-   transform: translateX(-50%)
+   transform: translateX(-50%);
+   z-index:-999;
 
 }
 

src/components/Login.vue

@@ -9,6 +9,8 @@
            <div class="input2"><input placeholder="密码"/></div>
            <el-checkbox class="checkbox1">记住密码</el-checkbox>
            <router-link class="login" to="./home">登 录</router-link>
+
+
             <p>
            <span>还没有账号?<a>立即注册</a></span>
        </p>

src/components/homework/Homework.vue

@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <common></common>
+    <el-card class="con">
+    <!-- 上部导航栏 -->
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane>
+        <span slot="label">
+          <i class="el-icon-date"></i> 学生信息
+        </span>
+        <!-- 内容上部区域 -->
+        <div class="workTop">
+          <div class="Topleft">
+            <span>2019年10月20日模拟训练测试1</span>
+            <span>六年级二班</span>
+          </div>
+          <div class="Topright">
+            <div class="block1"></div>未提交
+            <div class="block2"></div>已提交
+            <div class="block3"></div>已批阅
+          </div>
+        </div>
+        <!-- 内容表格区域 -->
+        <!-- 下方内容区域 -->
+        <div class="botTable">
+          <el-table :show-header="false" :data="tableData" style="width: 100%">
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
+          </el-table>
+          <div class="botRight">
+            <div>
+              共
+              <span>40</span>人
+            </div>
+            <div>
+              已提交
+              <span>22</span>人
+            </div>
+            <div>
+              已批阅
+              <span>2</span>人
+            </div>
+          </div>
+        </div>
+
+        <div class="undone">
+          <a href="javescript:;" @click="unread">还没有批阅完成？</a>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane>
+        <span slot="label">
+          <i class="el-icon-date"></i> 班级学情
+        </span>
+       <div class="homeworkline"><div class="scorePage">成绩单</div></div>
+   <!-- 班级学情表格 -->
+     <div class="">
+      <el-table
+    :data="tableData2"
+    border
+    style="width: 100%"
+    :header-cell-style="{background:'#FAFAFA'}">
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    </el-table>
+      </div>
+      <div class="homeworkline"><div class="scorePage">题型得分率</div></div>
+        <div id="main01" style="width: 600px;height:400px;"></div>
+      </el-tab-pane>
+
+      <el-tab-pane>
+        <span slot="label">
+          <i class="el-icon-date"></i> 精准推送
+        </span>
+        精准推送
+      </el-tab-pane>
+      <el-tab-pane>
+        <span slot="label">
+          <i class="el-icon-date"></i> 套题分析
+        </span>
+       套题分析
+      </el-tab-pane>
+    </el-tabs>
+    </el-card>
+  </div>
+</template>
+<script>
+import echarts from 'echarts'
+export default {
+  data() {
+    return {
+      activeName: "",
+      tableData: [
+        {
+          name: 1
+        }
+      ],
+      tableData2:[]
+    };
+  },
+  methods: {
+    unread() {
+      this.$router.push("./unread");
+    }
+  },
+  mounted(){
+    // 柱形图
+var myChart01 = echarts.init(document.getElementById('main01'));
+var options01 = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+        source: [
+            ['product', '平均正确率', '最高正确率'],
+            ['选择题', 43.3, 85.8, 93.7],
+            ['填空题', 83.1, 73.4, 55.1],
+            ['解答题', 86.4, 65.2, 82.5],
+            ['计算题', 72.4, 53.9, 39.1],
+             ['综合题', 72.4, 53.9, 39.1]
+
+        ]
+    },
+    xAxis: {type: 'category'},
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [
+        {type: 'bar'},
+        {type: 'bar'},
+    ]
+};
+myChart01.setOption(options01)
+  }
+};
+</script>
+<style lang="less" scoped>
+.con{
+    margin:15px auto 0;
+    width: 1200px;
+    min-width: 800px;
+    height: 100%;
+    background-color: #fff;
+    
+}
+.workTop {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .Topright {
+    width: 210px;
+    height: 14px;
+  }
+  .block1,
+  .block2,
+  .block3 {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background: #ced8e7;
+    margin: 0 2px;
+  }
+  .block2 {
+    background-color: #4597ff;
+  }
+  .block3 {
+    background-color: #e58d37;
+  }
+}
+
+.botTable {
+  position: relative;
+  width: 100%;
+  height: 205px;
+  border: 1px solid #ccc;
+  .botRight {
+    position: absolute;
+    bottom: 15px;
+    right: 5px;
+    width: 250px;
+    height: 20px;
+    div {
+      margin-left: 10px;
+      font-size: 14px;
+      float: left;
+    }
+    span:nth-child(1) {
+      color: #ff0000;
+    }
+    div:nth-child(2) span {
+      color: #68a7ff;
+    }
+    div:nth-child(3) span {
+      color: #e58d37;
+    }
+  }
+}
+.undone {
+  margin: 15px;
+  float: right;
+  a {
+    color: #ff0000;
+  }
+}
+
+// 班级学情
+.homeworkline {
+  font-size: 10px;
+    height: 15px;
+    width: 100%;
+    border-bottom:1px solid #ccc;
+    position: relative;
+    margin-bottom: 20px;
+    .scorePage{
+        width: 60px;
+        text-align: center;
+        height: 18px;
+        background-color: #fff;
+        padding: 0 5px;
+        position: absolute;
+        bottom: -8px;
+        left: 15px;
+    }
+}
+</style>

src/components/homework/Unread.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <common></common>
+    <el-card class="con">
+    <!-- 上部分 -->
+    <div class="unreadTop">
+      作业时间：
+      <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
+      <el-input v-model="input" placeholder="请输入内容"></el-input>
+      <el-button type="primary" >搜索</el-button>
+    </div>
+    <!-- 下部分表格 -->
+    <!-- 表格区域 -->
+    <div class="unreadTab">
+    <el-table
+    :data="tableData"
+    border
+    style="width: 100%"
+    :header-cell-style="{background:'#FAFAFA'}">
+     <el-table-column
+     align="center"
+      type="selection"
+     >
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="workName"
+      label="作业名字"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="total"
+      label="总人数"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="submit"
+      label="已提交"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="read"
+      label="已批阅"
+      width="">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      label="操作"
+      width="180">
+      <template>
+          <router-link class="" to="" ><span>批阅</span>|<span>查看</span><span>删除</span> </router-link>
+      </template>
+    </el-table-column>
+    </el-table>
+    </div>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      value1: "",
+      input:''
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.con{
+    margin:15px auto 0;
+    width: 1200px;
+    min-width: 800px;
+    height: 100%;
+    background-color: #fff;
+    
+}
+.unreadTop{
+    .el-input {
+        width: 20%;
+        margin:0 20px 20px 0;
+    }
+}
+</style>

src/components/message/EditMessage.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <!-- 基本信息区 -->
+  <div>
+    <!-- 基本信息区 -->
     <div class="readTop">
       <div class="baseMes">基本信息</div>
       <router-link to="/read">
@@ -11,48 +11,62 @@
     <table style="border-collapse:collapse;" class="tabEdit">
       <tr class="tr">
         <th>班级名称:</th>
-        <td colspan="3"><input/></td>
+        <td colspan="3">
+          <input />
+        </td>
       </tr>
       <tr>
         <th>学科:</th>
         <td style="padding:0">
-           <el-select style="width:100% ;height:100%;border-radius:0" size="large" class="se"><el-option></el-option></el-select>
+          <el-select style="width:100% ;height:100%;border-radius:0" size="large" class="se">
+            <el-option></el-option>
+          </el-select>
         </td>
         <th>年级:</th>
-        <td><input/></td>
+        <td>
+          <input />
+        </td>
       </tr>
       <tr>
         <th>主负责人:</th>
-        <td><input/></td>
+        <td>
+          <input />
+        </td>
         <th>副负责人:</th>
-        <td><input/></td>
+        <td>
+          <input />
+        </td>
       </tr>
       <tr>
         <th>学科教师:</th>
-        <td><input/></td>
+        <td>
+          <input />
+        </td>
         <th>开班日期</th>
-       
-          <td style="padding:0" class="riqi"><el-date-picker
-          style="width:100% ;height:100%;border:none"
-    size="large"
-      type="date"
-      placeholder="">
-    </el-date-picker>
+
+        <td style="padding:0" class="riqi">
+          <el-date-picker
+            style="width:100% ;height:100%;border:none"
+            size="large"
+            type="date"
+            placeholder
+          ></el-date-picker>
         </td>
       </tr>
       <tr>
         <th>状态:</th>
         <td>
-            <el-checkbox >已毕业</el-checkbox>
-            <el-checkbox >未毕业</el-checkbox>
+          <el-checkbox>已毕业</el-checkbox>
+          <el-checkbox>未毕业</el-checkbox>
         </td>
         <th>毕业日期：</th>
-          <td style="padding:0" class="riqi"><el-date-picker
-          style="width:100% ;height:100%;border:none"
-    size="large"
-      type="date"
-      placeholder="">
-    </el-date-picker>
+        <td style="padding:0" class="riqi">
+          <el-date-picker
+            style="width:100% ;height:100%;border:none"
+            size="large"
+            type="date"
+            placeholder
+          ></el-date-picker>
         </td>
       </tr>
     </table>
@@ -63,7 +77,7 @@
     <!-- 表格区域-->
     <table style="border-collapse:collapse;">
       <tr class="trmes">
-          <th></th>
+        <th></th>
         <th>班级名称</th>
         <th>序号</th>
         <th>学生姓名</th>
@@ -74,101 +88,165 @@
         <th>身份证</th>
         <th>操作</th>
       </tr>
-     
     </table>
-    <div class="kong"> 尚未添加学生，请尽快添加 <el-button size="mini" type="primary" class="addBtn" @click="addDialog">手动添加</el-button> </div>
-    
+    <div class="kong">
+      尚未添加学生，请尽快添加
+      <el-button size="mini" type="primary" class="addBtn" @click="addDialog">手动添加</el-button>
+    </div>
 
     <!-- 添加学生的对话框 -->
-   
-    <el-dialog
-    class="addStu"
-  title="添加学生"
-  :visible.sync="addDialogVisible"
-  width="60%"
- >
-  <span>
-      <a href="#" class="copy">可从Excel表格中复制粘贴 或 手动输入</a>
-      <table style="border-collapse:collapse;" class="addTable">
-      <tr class="trmes">
-        <th>班级名称</th>
-        <th>序号</th>
-        <th>学生姓名</th>
-        <th>学号/登录名</th>
-        <th>家长姓名</th>
-        <th>家长手机</th>
-      </tr>
-      <tr><td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td></tr>
-      <tr><td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td></tr>
-      <tr><td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td></tr>
-      <tr><td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td></tr>
-      <tr><td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td>
-      <td><input type="text"></td></tr>
-      </table>
-      <div class="line"></div>
-  </span>
-  
-  <span slot="footer" class="dialog-footer">
-    <el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
-    <el-button size="mini" type="primary" @click="addDialogVisible = false">添加</el-button>
-  </span>
-  
-</el-dialog>
-</div>
 
+    <el-dialog class="addStu" title="添加学生" :visible.sync="addDialogVisible" width="60%">
+      <span>
+        <a href="#" class="copy">可从Excel表格中复制粘贴 或 手动输入</a>
+        <table style="border-collapse:collapse;" class="addTable">
+          <tr class="trmes">
+            <th>班级名称</th>
+            <th>序号</th>
+            <th>学生姓名</th>
+            <th>学号/登录名</th>
+            <th>家长姓名</th>
+            <th>家长手机</th>
+          </tr>
+          <tr>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+        </table>
+        <div class="line"></div>
+      </span>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="addDialogVisible = false">添加</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
 export default {
-    data(){
-       return{
-          tableData: [{
-          id: '1',
-          studentName: '第一期',
+  data() {
+    return {
+      tableData: [
+        {
+          id: "1",
+          studentName: "第一期",
           xuehao: 56,
-          parentName:'南湖恺',
-          parentTel:'数学',
-          studentTel:'123',
-          idNum:'黄晓静'
-        }],
-        addDialogVisible:false,
-            }
-        
-            
-    },
-    methods:{
-        // 手动添加学生
-    addDialog(){
-this.addDialogVisible=true
-}
+          parentName: "南湖恺",
+          parentTel: "数学",
+          studentTel: "123",
+          idNum: "黄晓静"
+        }
+      ],
+      addDialogVisible: false
+    };
+  },
+  methods: {
+    // 手动添加学生
+    addDialog() {
+      this.addDialogVisible = true;
     }
-}
+  }
+};
 </script>
 <style scoped>
-.readTop{
+.readTop {
   position: relative;
   width: 100%;
   height: 40px;
@@ -176,9 +254,9 @@ this.addDialogVisible=true
   margin-bottom: 45px;
 }
 .back {
-    position: absolute;
-    right:0;
-    color: #529bff;
+  position: absolute;
+  right: 0;
+  color: #529bff;
 }
 
 .baseMes {
@@ -200,71 +278,68 @@ th {
   width: 20%;
   border: 1px solid #ccc;
   height: 40px;
-  background-color: #FAFAFA;
+  background-color: #fafafa;
 }
 
 td {
- padding-left:10px;
+  padding-left: 10px;
   width: 30%;
   border: 1px solid #ccc;
   overflow: hidden;
 }
 td input {
-    width: 100%;
-    height: 40px;
-    border: none;
-    outline: none;
+  width: 100%;
+  height: 40px;
+  border: none;
+  outline: none;
 }
 .el-date-picker {
-    width: 100%;
+  width: 100%;
 }
 .saveBtn {
-    margin:15px 0 10px 545px;
+  margin: 15px 0 10px 545px;
 }
 .trmes th {
-    width:10%;
-    
+  width: 10%;
 }
-.trmes th:nth-child(1){
- width: 7%;
+.trmes th:nth-child(1) {
+  width: 7%;
 }
 .kong {
-    width: 100%;
-    height: 200px;
-    border: none;
-    font-size: 14px;
-position: relative;
-text-align: center;
-line-height:200px;
-    
+  width: 100%;
+  height: 200px;
+  border: none;
+  font-size: 14px;
+  position: relative;
+  text-align: center;
+  line-height: 200px;
 }
 .addBtn {
-    display: block;
-    position:absolute;
-    left: 50%;
-   top: 75%;
-   transform: translate(-50%,-50%)
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 75%;
+  transform: translate(-50%, -50%);
 }
 .addTable {
-    width: 100%;
-    margin-top: 10px;
+  width: 100%;
+  margin-top: 10px;
 }
 .addTable td {
-height: 30px;
- width: 10%;
- text-align: center;
+  height: 30px;
+  width: 10%;
+  text-align: center;
 }
 .copy {
-    color: #529BFF;
+  color: #529bff;
 }
 .addStu .el-dialog__body {
-    padding-top: 5px;
+  padding-top: 5px;
 }
 .line {
-    width: 100%;
-    height: 1px;
-    background-color: #ccc;
-    margin-top: 30px;
+  width: 100%;
+  height: 1px;
+  background-color: #ccc;
+  margin-top: 30px;
 }
-
 </style>

src/components/report/Moreinfo.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="moreInfo">
+    <div class="moreTop">
+      <a href="#">南华凯个人作业报告</a>
+      <div class="moreRight">
+        <el-date-picker
+          v-model="value1"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+          size="mini"
+        ></el-date-picker>
+        <el-button type="primary" size="mini">添加</el-button>
+      </div>
+    </div>
+    <div class="Moreline">
+      <div class="in">名次变化</div>
+    </div>
+
+    <!-- 折线图  -->
+    <div id="main" style="width: 1100px;height:400px;"></div>
+    <div class="Moreline">
+      <div class="in">题型正确率</div>
+    </div>
+
+    <!-- 柱形图 -->
+
+    <div id="main1" style="width: 600px;height:400px;"></div>
+    <!-- 柱形图右侧表格区域 -->
+    <div class="main1Table">
+      <!-- 表格区域 -->
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        :header-cell-style="{background:'#FAFAFA'}"
+        align="center"
+      >
+        <el-table-column align="center" prop="tx" label="题型" width="90"></el-table-column>
+        <el-table-column align="center" prop="num" label="数量" width></el-table-column>
+        <el-table-column align="center" prop="fenbu" label="试题分布" width></el-table-column>
+        <el-table-column align="center" prop="total" label="总分值" width></el-table-column>
+      </el-table>
+    </div>
+    <!-- 错误原因分析 -->
+    <div class="Moreline">
+      <div class="in">知识点正确率</div>
+    </div>
+    <!-- 横行柱状图区域 -->
+     <!-- 右侧图形 -->
+    <div id="main2" style="width: 500px;height:300px;"></div>
+    <!-- 左侧表格 -->
+    <div class="main2Table">
+      <!-- 表格区域 -->
+      <el-table
+        :data="tableData2"
+        border
+        style="width: 100%"
+        :header-cell-style="{background:'#FAFAFA'}"
+        align="center"
+      >
+        <el-table-column align="center" prop="id" label="序号" width="90"></el-table-column>
+        <el-table-column align="center" prop="tips" label="知识点" width></el-table-column>
+        <el-table-column align="center" prop="much" label="题量" width></el-table-column>
+        <el-table-column align="center" prop="fenbu" label="试题分布" width></el-table-column>
+        <el-table-column align="center" prop="total" label="总分值" width></el-table-column>
+      </el-table>
+    </div>
+   
+
+   <!-- 错误原因分析 -->
+    <div class="Moreline">
+      <div class="in">错误原因分析</div>
+    </div>
+   <!-- 饼图 -->
+    <div id="main3" style="width: 500px;height:300px;"></div>
+    
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      value1: "",
+      //关于表格数据
+      tableData: [{ total: 6, fenbu: "1.2.3.4", num: "9题", tx: "选择题" }],
+    tableData2:[{id:1,tips:'体积变化',much:'5道',fenbu:'1.3.3',total:'90'}]
+  }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById("main"));
+    var option = {
+      left: "auto",
+      top: "auto",
+      right: "auto",
+      bottom: "auto",
+      color: ["#529BFF"],
+      xAxis: {
+        type: "category",
+        data: [
+          "20191001",
+          "2019002",
+          "2019003",
+          "2019004",
+          "2019005",
+          "2019006",
+          "2019007",
+          "2019008",
+          "2019009",
+          "2019010"
+        ]
+      },
+      yAxis: {
+        type: "value"
+      },
+      series: [
+        {
+          data: [1, 4, 3, 8, 5, 7, 5, 10, 2, 12],
+          type: "line"
+        }
+      ]
+    };
+
+    myChart.setOption(option);
+
+    // 柱形图
+    var myChart1 = echarts.init(document.getElementById("main1"));
+    var options1 = {
+        left: "10%",
+      color: ["#5665EC", "#EE5356"],
+      legend: {},
+      tooltip: {},
+      dataset: {
+        source: [
+          ["product", "平均正确率", "最高正确率"],
+          ["选择题", 43.3, 85.8, 93.7],
+          ["填空题", 83.1, 73.4, 55.1],
+          ["解答题", 86.4, 65.2, 82.5],
+          ["计算题", 72.4, 53.9, 39.1],
+          ["综合题", 72.4, 53.9, 39.1]
+        ]
+      },
+      xAxis: { type: "category" },
+      yAxis: {},
+      // Declare several bar series, each will be mapped
+      // to a column of dataset.source by default.
+      series: [{ type: "bar" }, { type: "bar" }],
+      grid:{
+              x:100,
+              y:45}
+    };
+    myChart1.setOption(options1);
+    //横行柱形图
+    var myChart2 = echarts.init(document.getElementById("main2"));
+
+    var options2 = {
+    color:'#5DAAFF',
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    
+    grid: {
+        top:'2%',
+        left: '3%',
+        right: '4%',
+        bottom: '5%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'value',
+        boundaryGap: [0, 0.01]
+    },
+    yAxis: {
+        
+        type: 'category',
+        data: ['方差','数轴','三视图','平年闰年','正负数','数的读法','体积变化','数的简单结算']
+    },
+    series: [
+        {
+            barWidth: 20,
+            name: '2011年',
+            type: 'bar',
+            data: [18203, 23489, 29034, 104970, 131744, 630230,12345,12345],
+            itemStyle:{
+                emphasis:{
+                    barBorderRadius:9
+                },
+                normal:{
+                    barBorderRadius:[0 ,9, 9, 0]
+                }
+            }
+        }
+    ]
+};
+myChart2.setOption(options2);
+
+//饼图
+var myChart3 = echarts.init(document.getElementById("main3"));
+var options3 = {
+    tooltip : {
+        trigger: 'item',
+        formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
+    legend: {
+       icon:'circle',
+       itemWidth:5,
+       itemHeight:5,
+       itemGap:20,
+
+       
+        orient: 'vertical',
+        right: 'left',
+        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+    },
+    series : [
+        {
+            name: '访问来源',
+            type: 'pie',
+            radius : '55%',
+            center: ['50%', '60%'],
+            data:[
+                {value:335, name:'直接访问'},
+                {value:310, name:'邮件营销'},
+                {value:234, name:'联盟广告'},
+                {value:135, name:'视频广告'},
+                {value:1548, name:'搜索引擎'}
+            ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }
+    ]
+};
+myChart3.setOption(options3);
+  }
+};
+</script>
+<style lang="less" scoped>
+.moreInfo {
+  position: relative;
+}
+.moreTop {
+  border-bottom: 1px solid #ccc;
+  height: 40px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  a {
+    font-size: 14px;
+  }
+  .el-button {
+    margin-left: 10px;
+  }
+}
+.Moreline {
+  position: relative;
+  height: 17px;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 10px;
+  .in {
+    position: absolute;
+    left: 13px;
+    bottom: -7px;
+    background-color: #fff;
+    padding: 0 3px;
+  }
+}
+.main1Table {
+  width: 500px;
+  height: 300px;
+  background-color: #fff;
+  position: absolute;
+  right: 0;
+  top: 545px;
+}
+.main2Table {
+   position:absolute;
+   left: 0;
+   top: 925px;
+    width: 500px;
+    height: 300px;
+   
+}
+#main2 {
+   left: 600px;
+}
+</style>

src/components/report/Oneinfo.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="personMain">
+             
+         <div class="reportTop"><a href="#">南华凯个人作业报告</a>
+         <sapn class="personRight">
+             <el-input v-model="input" placeholder="请输入内容" ></el-input>
+             <el-button type="primary" size="mini">搜索</el-button>
+             </sapn></div>
+<el-table
+    :header-cell-style="{background:'#FAFAFA'}"
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+    align="center"
+      prop="id"
+      label="序号"
+      width="180">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="HomeworkName"
+      label="作业名称"
+      width="280">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="object"
+      label="科目">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      prop="riqi"
+      label="作业日期">
+    </el-table-column>
+    <el-table-column
+    align="center"
+      label="操作">
+      <template><a href="#">查看</a></template>
+    </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <div class="reportPag">
+         <el-button>上一页</el-button>
+         <div class="fenye"><span>1</span>/<span>5</span></div>
+            <el-button>下一页</el-button>
+  </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+             tableData:[{
+            id: '1',
+          HomeworkName: '201910月第一期',
+          object: '数学',
+          riqi:'2019-9-9',
+          object:'数学'
+            }]
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .reportPag {
+        position: relative;
+       display: flex;
+       justify-content: flex-end;
+       margin-top: 15px;
+      .fenye {
+          font-size: 14px;
+          position: absolute;
+          top: 10px;
+          right:136px;
+      }
+      .el-button {
+          margin: 0 30px;
+      }
+    }
+    .reportTop {
+        margin-bottom: 20px;
+         display: flex;
+        justify-content: space-between;
+        align-content: center;
+         .personRight {
+        .el-input {
+            width: 60%;
+        }
+        .el-button {
+            margin-left: 20px;
+        }
+    }
+    }
+</style>

src/components/report/Person.vue

@@ -1,7 +1,7 @@
 <template>
 <!-- 个人学习报告页 -->
 <!-- 报告头部 -->
-<div>
+<div class="reportPage">
    <div class="personTop">
        <div>
         <span class="photo"></span>
@@ -12,80 +12,44 @@
     <div class="topNav">
         <span class="topCon">
         <a><i class="el-icon-document"></i>
-        <span>单次学情</span></a>
+        <span @click="oneInfo">单次学情</span></a>
         <a><i class="el-icon-document"></i>
-        <span>阶段学情</span></a>
+        <span @click="moreInfo">阶段学情</span></a>
         </span>
      </div>
      <!-- 表格区域 -->
      <div class="personMain">
          <el-card>
-             
-         <div class="reportTop"><a href="#">南华凯个人作业报告</a>
-         <sapn class="personRight">
-             <el-input v-model="input" placeholder="请输入内容" ></el-input>
-             <el-button type="primary" size="mini">搜索</el-button>
-             </sapn></div>
-<el-table
-    :header-cell-style="{background:'#FAFAFA'}"
-    :data="tableData"
-    border
-    style="width: 100%">
-    <el-table-column
-    align="center"
-      prop="id"
-      label="序号"
-      width="180">
-    </el-table-column>
-    <el-table-column
-    align="center"
-      prop="HomeworkName"
-      label="作业名称"
-      width="280">
-    </el-table-column>
-    <el-table-column
-    align="center"
-      prop="object"
-      label="科目">
-    </el-table-column>
-    <el-table-column
-    align="center"
-      prop="riqi"
-      label="作业日期">
-    </el-table-column>
-    <el-table-column
-    align="center"
-      label="操作">
-      <template><a href="#">查看</a></template>
-    </el-table-column>
- </el-table>
- <!-- 分页 -->
- <div class="reportPag">
-         <el-button>上一页</el-button>
-         <div class="fenye"><span>1</span>/<span>5</span></div>
-            <el-button>下一页</el-button>
-  </div>
- </el-card>
+        <router-view></router-view>
+     </el-card>
+      <div class="footer"><p>copyright@2013-2019 All Right</p></div>
      </div>
      </div>
 </template>
 <script>
+
 export default {
     data(){
         return{
-            tableData:[{
-            id: '1',
-          HomeworkName: '201910月第一期',
-          object: '数学',
-          riqi:'2019-9-9',
-          object:'数学'
-         
-            }]
+           
+        }
+    },
+    methods:{
+        oneInfo(){
+            this.$router.push('./oneInfo')
+            
+        },
+        moreInfo(){
+            this.$router.push('./moreInfo')
         }
     }
 }
 </script>
 <style lang="less" scoped>
+.reportPage {
+    background-color: #EBEDF5;
+}
+
 .personTop {
     display: flex;
     justify-content: space-between;
@@ -129,37 +93,16 @@ export default {
     .personMain {
         width: 1200px;
         margin: 10px auto;
+      
     }
 
-.reportPag {
-        position: relative;
-       display: flex;
-       justify-content: flex-end;
-       margin-top: 15px;
-      .fenye {
-          font-size: 14px;
-          position: absolute;
-          top: 10px;
-          right:105px;
-      }
-      .el-button {
-          margin: 0 15px;
-      }
-    }
-    .reportTop {
-        margin-bottom: 20px;
-         display: flex;
-        justify-content: space-between;
-        align-content: center;
-         .personRight {
-        .el-input {
-            width: 60%;
-        }
-        .el-button {
-            margin-left: 20px;
-        }
-    }
-    }
+.footer {
+    color: #B1B9CF;
+   position: fixed;
+  bottom: -8px;;
+   left: 50%;
+   transform: translateX(-50%)
+}
    
 
 

src/components/shiti/Shiti.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+       <common></common>
+    </div>
+</template>

src/main.js

@@ -5,11 +5,19 @@ import store from './store'
 import './plugins/element.js'
 import './assets/css/gobal.css'
 
+import common from './views/demo/Common.vue'
+
+Vue.component('common', common)
+    // import 'lib-flexible'
 Vue.config.productionTip = false
 
 import axios from 'axios'
 // Vue.prototype.$http = axios
+//根路径
+// axios.defaults.baseURL = 'http://127.0.0.1:'
 
+//将其挂载到原型对象上
+Vue.prototype.$http = axios
 new Vue({
     router,
     store,

src/router/index.js

@@ -11,6 +11,12 @@ import Teacher from '../components/message/Teacher.vue'
 import Student from '../components/message/Student.vue'
 import Report from '../components/report/Report.vue'
 import Person from '../components/report/Person.vue'
+import Oneinfo from '../components/report/Oneinfo.vue'
+import Moreinfo from '../components/report/Moreinfo.vue'
+import Homework from '../components/homework/Homework'
+import Unread from '../components/homework/Unread'
+import Common from '../views/demo/Common'
+import Shiti from '../components/shiti/Shiti'
 
 Vue.use(VueRouter)
 
@@ -50,8 +56,34 @@ const routes = [
     },
     {
         path: '/person',
-        component: Person
+        component: Person,
+        redirect: '/oneInfo',
+        children: [{
+            path: '/oneInfo',
+            component: Oneinfo
+        }, {
+            path: '/moreInfo',
+            component: Moreinfo
+        }]
+    },
+    {
+        path: '/common',
+        component: Common
+
     },
+    {
+        path: '/shiti',
+        component: Shiti
+    },
+    {
+        path: '/homework',
+        component: Homework
+    },
+    {
+        path: '/unread',
+        component: Unread
+    }
+
 
 ]
 

src/views/demo/Common.vue

@@ -0,0 +1,96 @@
+  <template>
+  <div class="all">
+  <!-- 头部区域上-->
+    <div class="head">
+        <div class="logo">AI升学测评分析平台</div>
+        <div class="headRight">
+            <i class="ico"></i> |
+            <span class="photo"></span>
+            <span class="name">你好</span> |
+            <a href="#" class="logout" @click="logout" >退出</a>
+        </div>
+    </div>
+     
+        <div class="footer"><p>copyright@2013-2019 All Right</p></div>
+    </div>
+  </template>
+  
+ <script>
+ export default {
+    data(){
+       return {
+
+       }
+    },
+    methods:{
+        logout(){
+            this.$router.push('/login')
+        }
+    }
+    
+    }
+ 
+ </script>
+  <style style="less" scoped>
+  .head {
+    overflow: hidden;
+    width: 100%;
+    height: 68px;
+    background-color: #529BFF;
+    line-height: 68px;
+    color: #fff;
+}
+.logo {
+    font-size:16px;
+    float: left;
+    width: 20%;
+    line-height:40px;
+    font-weight: 900;
+    height: 40px;
+    /* background-color: pink; */
+    margin-left: 10px;
+   margin-top: 15px;
+}
+
+.headRight {
+    float: right;
+font-size: 12px;
+
+}
+.ico {
+    display: inline-block;
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    background-color: pink;
+    
+}
+.photo {
+     display: inline-block;
+     vertical-align: middle;
+    width: 42px;
+    height: 42px;
+    background-color: pink;
+    margin: 0 5px;
+    border-radius: 50%;
+}
+.logout {
+    color: #fff;
+    margin-right: 15px;
+}
+
+.all {
+ position: relative;
+}
+.footer {
+    color: #B1B9CF;
+   position:fixed ;
+  bottom: -8px;;
+   left: 50%;
+   transform: translateX(-50%);
+   z-index:-999;
+
+}
+
+
+  </style>