提交

src/components/login-form/login-form.vue

@@ -1,29 +1,23 @@
 <template>
 <div>
-  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
-    <FormItem prop="userName">
-      <Input v-model="form.userName" placeholder="用户名">
-        <span slot="prepend">
-          <img src="../../assets/img/user.png" style="width:20px" alt="">
-
-          <!-- <Icon :size="16" type="ios-person"></Icon> -->
-        </span>
-      </Input>
-    </FormItem>
-    <FormItem prop="password">
-      <Input width="200px" height='40px' type="password" v-model="form.password" placeholder="密码">
-        <span slot="prepend">
-          <img src="../../assets/img/key.png" style="width:20px" alt="">
-        </span>
-      </Input>
-    </FormItem>
-    <FormItem prop="password">
-      <Checkbox :checked.sync="single">记住密码</Checkbox>
-    </FormItem>
-    <FormItem>
-      <Button @click="handleSubmit" type="primary" long>登录</Button>
-    </FormItem>
-  </Form>
+  <div class="formLine">
+    <form ref="loginForm" :model="loginForm" :rules="rules">
+      <div class='formElement'>
+        <!-- <img width="15px" src="../../assets/img/User.png" alt="" /> -->
+        <input style="padding-left:50px;" id="userName" type="text" v-model="loginForm.userName" placeholder="用户名" autocomplete="off">
+      </div>
+      <div class="formElement">
+        <!-- <img src="../../assets/img/Key.png" alt="" /> -->
+        <input  style="padding-left:50px"  id="password" type="password" v-model="loginForm.password" placeholder="密码" autocomplete="off">
+      </div>
+      <div class="formOther">
+        <Checkbox v-model="single">记住密码</Checkbox>
+      </div>
+      <div class="formOther">
+       <Button @click="handleSubmit" type="primary" long>登录</Button>
+      </div>
+    </form>
+  </div>
    <div class="bottom">
             <a>注册</a>
             <a>忘记密码</a>
@@ -54,9 +48,9 @@ export default {
   data () {
     return {
       single: false,
-      form: {
+      loginForm: {
         userName: 'super_admin',
-        password: ''
+        password: '0000'
       }
     }
   },
@@ -70,36 +64,51 @@ export default {
   },
   methods: {
     handleSubmit () {
-      this.$refs.loginForm.validate((valid) => {
-        if (valid) {
-          this.$emit('on-success-valid', {
-            userName: this.form.userName,
-            password: this.form.password
-          })
-        }
+      console.log(this.$refs.loginForm)
+      // this.$router.push('home')
+      // this.$refs.loginForm.validate((valid) => {
+      //   if (valid) {
+      this.$emit('on-success-valid', {
+        userName: this.loginForm.userName,
+        password: this.loginForm.password
       })
+      //   }
+      // })
     }
   }
 }
 </script>
 <style lang='less' scoped>
-// .ivu-input{
-//   height: 40px;
-//   width: 300px;
-// }
-.ivu-form-item-content{
-  width: 270px;
-  height: 35px;
+#userName{
+  background: url(../../assets/img/User.png) no-repeat left center;
+  background-size: 20px 20px;
+  background-position: 15px;
+  height: 40px;
+}
+#password{
+  background: url(../../assets/img/Key.png) no-repeat left center;
+  background-size: 20px 20px;
+  background-position: 15px;
 }
-.ivu-form-item{
-  margin-bottom: 20px;
-  // .ivu-input-default{
-  //   height: 40px;
-  // }
-  // .ivu-input {
-  //   height: 40px;
-  // }
+.formLine{
+  .formElement{
+    border:1px solid rgba(223, 223, 223, 1);
+    width: 295px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    input{
+      border:none;
+      width: 100%;
+      height: 40px;
+    }
+  }
+  .formOther{
+    margin-bottom: 15px;
+  }
 }
+
 .bottom {
           display: flex;
           justify-content: space-between;

src/components/main/components/navbar/index.vue

@@ -29,7 +29,7 @@
                 </Dropdown-menu>
           </Dropdown>
         </div>
-        <a href="#">退出</a>
+        <a href="#"  name="logout">退出</a>
       </div>
     </div>
   </div>

src/components/main/components/side-menu/side-menu.less

@@ -1,18 +1,56 @@
 .side-menu-wrapper{
   user-select: none;
-  // width: 170px;
-  // margin-top: 50px;
+  // ---------------------------------------------------------------
 
-  .ivu-menu-dark{
-    background-color: white;
-    color: black;
+  padding:10px 30px;
+  // .ivu-menu-item{
+  //   padding-left: 10px!important;
+  // }
+  .ivu-menu-item-selected{
+    background: #3D8EFE;
+    border-radius: 10px;
+    height: 35px;
+    margin: 10px 0;
+    color: white;
+    padding-left: 5px;
+    border-left: 2px solid #3D8EFE;
   }
-  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
-    color: black;
-}
+  .side-menu-wrapper .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
+    background: #3D8EFE;
+    border-radius: 10px;
+    color: white;
+  }
+  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
+    background: #3D8EFE;
+    border-radius: 10px;
+    color: white;
+  }
+  .ivu-menu-vertical.ivu-menu-light:after{
+    background:none;
+  }
+  .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item {
+    padding-left: 8px!important;
+    margin-left: 20px;
+  }
+  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after{
+    background: none;
+  }
+  .ivu-menu-vertical .ivu-menu-item,.ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
+    padding: 8px 13px;
+    margin: 10px 0;
+  }
+// .ivu-menu-submenu > .ivu-menu {
+//   padding: 10px!important;
+// }
+// .ivu-menu-submenu > .ivu-menu > .ivu-menu-item
+// .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
+//   background: #3D8EFE;
+//   border-radius: 10px;
+// }
+// ---------------------------------------------------------------
   .menu-collapsed{
     padding-top: 10px;
-    
+
     .ivu-dropdown{
       width: 100%;
       .ivu-dropdown-rel a{
@@ -26,7 +64,8 @@
       }
       .ivu-tooltip-popper .ivu-tooltip-content{
         .ivu-tooltip-arrow{
-          border-right-color: #fff;
+          // border-right-color: #fff;
+          border-right-color:blue;
         }
         .ivu-tooltip-inner{
           background: #fff;

src/components/main/components/side-menu/side-menu.vue

@@ -51,7 +51,7 @@ export default {
     },
     theme: {
       type: String,
-      default: 'dark'
+      default: 'light'
     },
     rootIconSize: {
       type: Number,

src/components/main/main.less

@@ -4,6 +4,12 @@
     position: absolute;
     top: 0;
   }
+// ---------------------------------------------------------------------------------
+//  .ivu-menu-submenu-title {
+//   /* color: rgba(255, 255, 255, 0.7); */
+//   color: black;
+// }
+// ---------------------------------------------------------------------------------
   .ivu-layout-header {
     height: 50px;  
   }
@@ -43,22 +49,49 @@
     overflow: auto;
   }
   .left-sider{
+      // -----------------------------------------
     margin-top: 50px;
+    width: 210px;
     .ivu-layout-sider-children{
-      overflow-y: scroll;
-      margin-right: -18px;
+      width: 210px;
+      // overflow-y: scroll;
+      // margin-right: -18px;
     }
   }
+  // -------------------------------------------
+
   .ivu-layout{
     padding-top: 50px;
   }
 }
+// -----------------------------------
+// .ivu-menu-item-active .ivu-menu-item-selected{
+//   width: 150px;
+//   height: 40px;
+//   border-radius: 5px;
+//   margin: 0px auto;
+//   padding-top:10px ;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+// --------------------------------------------------------
 .ivu-menu-item > i{
   margin-right: 12px !important;
 }
 .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
   margin-right: 8px !important;
 }
+// ---------------------------------------------------------------
+// .ivu-menu-submenu > .ivu-menu {
+//   padding: 10px!important;
+// }
+// .ivu-menu-submenu > .ivu-menu > .ivu-menu-item
+// .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
+//   background: #3D8EFE;
+//   border-radius: 10px;
+// }
+// ---------------------------------------------------------------
 .collased-menu-dropdown{
   width: 100%;
   margin: 0;

src/components/main/main.vue

@@ -3,7 +3,7 @@
     <div style="height:40px">
       <navbar></navbar>
     </div>
-  <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
+  <Sider hide-trigger collapsible :width="210" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
     <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
       <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
       <!-- <div class="logo-con">

src/index.less

@@ -1,5 +1,11 @@
 @import '~iview/src/styles/index.less';
 
-@menu-dark-title: #3D8EFE;
-@menu-dark-active-bg: white;
+@menu-dark-title: #001529;
+// @menu-dark-title: white;
+@menu-dark-active-bg: #000c17;
+// @menu-dark-active-bg: rgba(61,142,254,1);;
+
+// @layout-sider-background: #001529;
+// @layout-sider-background: rgba(61,142,254,1);
 @layout-sider-background: white;
+

src/locale/lang/en-US.js

@@ -11,7 +11,7 @@ export default {
   img_cropper_page: 'Image-editor',
   update: 'Update',
   doc: 'Document',
-  join_page: 'Basic Information',
+  BasicInfo: 'BasicInfo',
   Student_management: 'Student management',
   update_table_page: 'Update .CSV',
   update_paste_page: 'Paste Table Data',

src/locale/lang/zh-CN.js

@@ -2,7 +2,7 @@ export default {
   home: '首页',
   login: '登录',
   components: '组件',
-  count_to_page: '数字渐变',
+  count_to_page: '招生管理',
   tables_page: '多功能表格',
   split_pane_page: '分割窗口',
   markdown_page: 'Markdown编辑器',
@@ -10,7 +10,7 @@ export default {
   icons_page: '自定义图标',
   img_cropper_page: '图片编辑器',
   update: '上传数据',
-  join_page: '基本信息',
+  BasicInfo: '基本信息',
   Student_management: '学员管理',
   doc: '文档',
   update_table_page: '上传CSV文件',

src/locale/lang/zh-TW.js

@@ -11,6 +11,7 @@ export default {
   img_cropper_page: '圖片編輯器',
   update: '上傳數據',
   join_page: 'QQ群',
+  basicInfo: '基本信息',
   doc: '文檔',
   update_table_page: '上傳CSV文件',
   update_paste_page: '粘貼表格數據',

src/router/routers.js

@@ -50,26 +50,26 @@ export default [
       }
     ]
   },
-  {
-    path: '/join',
-    name: 'join',
-    meta: {
-      icon: 'logo-buffer',
-      title: '基本信息'
-    },
-    component: Main,
-    children: [
-      {
-        path: 'Student_management',
-        name: 'Student_management',
-        meta: {
-          icon: 'logo-buffer',
-          title: '学员管理'
-        },
-        component: () => import('@/view/manager/student.vue')
-      }
-    ]
-  },
+  // {
+  //   path: '/BasicInfo',
+  //   name: 'BasicInfo',
+  //   meta: {
+  //     icon: 'md-home',
+  //     title: '基本信息'
+  //   },
+  //   component: Main,
+  //   children: [
+  //     {
+  //       path: 'Student_management',
+  //       name: 'Student_management',
+  //       meta: {
+  //         icon: 'logo-buffer',
+  //         title: '学员管理'
+  //       },
+  //       component: () => import('@/view/manager/student.vue')
+  //     }
+  //   ]
+  // },
   {
     path: '/message',
     name: 'message',
@@ -91,131 +91,131 @@ export default [
     ]
   },
   {
-    path: '/components',
-    name: 'components',
+    path: '/BasicInfo',
+    name: 'BasicInfo',
     meta: {
       icon: 'logo-buffer',
-      title: '组件'
+      title: '基本信息'
     },
     component: Main,
     children: [
-      // {
-      //   path: 'Student_management',
-      //   name: 'Student_management',
-      //   meta: {
-      //     icon: '',
-      //     title: '学员管理'
-      //   },
-      //   component: () => import('@/view/manager/student.vue')
-      // },
       {
-        path: 'tree_select_page',
-        name: 'tree_select_page',
+        path: 'Student_management',
+        name: 'Student_management',
         meta: {
-          icon: 'md-arrow-dropdown-circle',
-          title: '树状下拉选择器'
+          icon: 'md-trending-up',
+          title: '学员管理'
         },
-        component: () => import('@/view/components/tree-select/index.vue')
+        component: () => import('@/view/manager/student.vue')
       },
+      // {
+      //   path: 'tree_select_page',
+      //   name: 'tree_select_page',
+      //   meta: {
+      //     icon: 'md-arrow-dropdown-circle',
+      //     title: '树状下拉选择器'
+      //   },
+      //   component: () => import('@/view/components/tree-select/index.vue')
+      // },
       {
         path: 'count_to_page',
         name: 'count_to_page',
         meta: {
           icon: 'md-trending-up',
-          title: '数字渐变'
+          title: '招生管理'
         },
         component: () => import('@/view/components/count-to/count-to.vue')
-      },
-      {
-        path: 'drag_list_page',
-        name: 'drag_list_page',
-        meta: {
-          icon: 'ios-infinite',
-          title: '拖拽列表'
-        },
-        component: () => import('@/view/components/drag-list/drag-list.vue')
-      },
-      {
-        path: 'drag_drawer_page',
-        name: 'drag_drawer_page',
-        meta: {
-          icon: 'md-list',
-          title: '可拖拽抽屉'
-        },
-        component: () => import('@/view/components/drag-drawer')
-      },
-      {
-        path: 'org_tree_page',
-        name: 'org_tree_page',
-        meta: {
-          icon: 'ios-people',
-          title: '组织结构树'
-        },
-        component: () => import('@/view/components/org-tree')
-      },
-      {
-        path: 'tree_table_page',
-        name: 'tree_table_page',
-        meta: {
-          icon: 'md-git-branch',
-          title: '树状表格'
-        },
-        component: () => import('@/view/components/tree-table/index.vue')
-      },
-      {
-        path: 'cropper_page',
-        name: 'cropper_page',
-        meta: {
-          icon: 'md-crop',
-          title: '图片裁剪'
-        },
-        component: () => import('@/view/components/cropper/cropper.vue')
-      },
-      {
-        path: 'tables_page',
-        name: 'tables_page',
-        meta: {
-          icon: 'md-grid',
-          title: '多功能表格'
-        },
-        component: () => import('@/view/components/tables/tables.vue')
-      },
-      {
-        path: 'split_pane_page',
-        name: 'split_pane_page',
-        meta: {
-          icon: 'md-pause',
-          title: '分割窗口'
-        },
-        component: () => import('@/view/components/split-pane/split-pane.vue')
-      },
-      {
-        path: 'markdown_page',
-        name: 'markdown_page',
-        meta: {
-          icon: 'logo-markdown',
-          title: 'Markdown编辑器'
-        },
-        component: () => import('@/view/components/markdown/markdown.vue')
-      },
-      {
-        path: 'editor_page',
-        name: 'editor_page',
-        meta: {
-          icon: 'ios-create',
-          title: '富文本编辑器'
-        },
-        component: () => import('@/view/components/editor/editor.vue')
-      },
-      {
-        path: 'icons_page',
-        name: 'icons_page',
-        meta: {
-          icon: '_bear',
-          title: '自定义图标'
-        },
-        component: () => import('@/view/components/icons/icons.vue')
       }
+      // {
+      //   path: 'drag_list_page',
+      //   name: 'drag_list_page',
+      //   meta: {
+      //     icon: 'ios-infinite',
+      //     title: '拖拽列表'
+      //   },
+      //   component: () => import('@/view/components/drag-list/drag-list.vue')
+      // },
+      // {
+      //   path: 'drag_drawer_page',
+      //   name: 'drag_drawer_page',
+      //   meta: {
+      //     icon: 'md-list',
+      //     title: '可拖拽抽屉'
+      //   },
+      //   component: () => import('@/view/components/drag-drawer')
+      // },
+      // {
+      //   path: 'org_tree_page',
+      //   name: 'org_tree_page',
+      //   meta: {
+      //     icon: 'ios-people',
+      //     title: '组织结构树'
+      //   },
+      //   component: () => import('@/view/components/org-tree')
+      // },
+      // {
+      //   path: 'tree_table_page',
+      //   name: 'tree_table_page',
+      //   meta: {
+      //     icon: 'md-git-branch',
+      //     title: '树状表格'
+      //   },
+      //   component: () => import('@/view/components/tree-table/index.vue')
+      // },
+      // {
+      //   path: 'cropper_page',
+      //   name: 'cropper_page',
+      //   meta: {
+      //     icon: 'md-crop',
+      //     title: '图片裁剪'
+      //   },
+      //   component: () => import('@/view/components/cropper/cropper.vue')
+      // },
+      // {
+      //   path: 'tables_page',
+      //   name: 'tables_page',
+      //   meta: {
+      //     icon: 'md-grid',
+      //     title: '多功能表格'
+      //   },
+      //   component: () => import('@/view/components/tables/tables.vue')
+      // },
+      // {
+      //   path: 'split_pane_page',
+      //   name: 'split_pane_page',
+      //   meta: {
+      //     icon: 'md-pause',
+      //     title: '分割窗口'
+      //   },
+      //   component: () => import('@/view/components/split-pane/split-pane.vue')
+      // },
+      // {
+      //   path: 'markdown_page',
+      //   name: 'markdown_page',
+      //   meta: {
+      //     icon: 'logo-markdown',
+      //     title: 'Markdown编辑器'
+      //   },
+      //   component: () => import('@/view/components/markdown/markdown.vue')
+      // },
+      // {
+      //   path: 'editor_page',
+      //   name: 'editor_page',
+      //   meta: {
+      //     icon: 'ios-create',
+      //     title: '富文本编辑器'
+      //   },
+      //   component: () => import('@/view/components/editor/editor.vue')
+      // },
+      // {
+      //   path: 'icons_page',
+      //   name: 'icons_page',
+      //   meta: {
+      //     icon: '_bear',
+      //     title: '自定义图标'
+      //   },
+      //   component: () => import('@/view/components/icons/icons.vue')
+      // }
     ]
   },
   {

src/view/single-page/home/home.vue

@@ -21,20 +21,21 @@
     </div>
     <!-- 内容上部 -->
     <div class="contentTop clearfix">
-          <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
+          <!-- <div id="myChart" :style="{ width: '300px', height: '300px' }"></div> -->
 
-           <!-- <i-circle :percent="80" stroke-linecap='square' stroke-width='30' size='130' trail-width='30'>
-              <span class="demo-circle-inner" style="font-size:24px">80%</span>
-          </i-circle> -->
+           <i-circle :percent="80" stroke-linecap='square' :stroke-width='15' :size='200' :trail-width='15'>
+              <span class="demo-circle-inner" style="font-weight:600">{{stuArrived+'%'}}</span><br />
+              <span class="demo-circle-inner" style="font-size:18px;color:black;">学生实到率</span>
+          </i-circle>
            <div class="ContentTopCenter" style="margin-right:50px">
-              <p>应到学生<span>{{num1}}</span></p><br />
-              <p>实到学生<span>{{num2}}</span></p>
+              <p>应到学生<span>{{shouldPerson}}</span></p><br />
+              <p>实到学生<span>{{reallyPerson}}</span></p>
             </div>
           <div id="ContentTopRight" style="padding:40px 0 0 0;margin-left:60px">
              <Row>
                   <i-col span="4" v-for="item in stuInfo" :key="item.id">
                       <div id="topRight">
-                        <p>{{item.title}}<span :class="{'red':item.red,'blue':item.blue}">{{item.num}}</span>
+                        <p>{{item.reason}}<span :class="{'red':item.red,'blue':item.blue}">{{item.num}}</span>
                         </p>
                       </div>
                   </i-col>
@@ -52,7 +53,7 @@
       <div class="teacher">
         <Row type="flex" justify="center" class="code-row-bg">
           <i-col span="12">
-            <i-circle :percent="40" stroke-color="#7DDFC9">
+            <i-circle :percent="40" stroke-color="#7DDFC9" :size='130'>
                <div class="demo-circle-custom">
                 <h1><span>40</span>人</h1>
                 </div>
@@ -60,7 +61,7 @@
             <h3>上课教师的数量</h3>
           </i-col>
           <i-col span="12">
-            <i-circle :percent="73" class="hour" stroke-color="#4A88F0">
+            <i-circle :percent="73"  :size='130' class="hour" stroke-color="#4A88F0">
                 <div class="demo-circle-custom">
                 <h1><span>73</span>节</h1>
                 </div>
@@ -80,7 +81,7 @@
       <div class="money">
          <Row type='flex' justify='center'>
             <i-col span="14">
-              <h1>￥<span>{{money+'.00'}}</span></h1>
+              <h1>￥<span>{{totalMoney+'.00'}}</span></h1>
               <h3>缴费总金额</h3>
               <div class="moneyBottom" >
                 <div class="moneyInfo">
@@ -96,14 +97,14 @@
                  <div class="submitNum"></div>
                   <img src="../../../assets/img/list.png" style="width:30px" alt="">
                  <div class="moneyNum">
-                   <span>{{submitNum}}</span>
+                   <span>{{submitPerson}}</span>
                    <h4>缴费学生人数</h4>
                  </div>
               </div>
               </div>
             </i-col>
             <i-col span="10">
-               <h1>￥<span>{{money+'.00'}}</span></h1>
+               <h1>￥<span>{{totalMoney+'.00'}}</span></h1>
               <h3>缴费总金额</h3>
               <div class="moneyInfo" style="margin-left:140px">
                 <img src="../../../assets/img/user2.png" style="width:30px" alt="">
@@ -128,25 +129,26 @@ export default {
   },
   data () {
     return {
-      num1: 45,
-      num2: 30,
-      money: 12360.00,
+      stuArrived: 86,
+      shouldPerson: 45,
+      reallyPerson: 30,
+      totalMoney: 12360.00,
       newStu: 38,
-      submitNum: 60,
+      submitPerson: 60,
       form: {
         date: ''
       },
       stuInfo: [
         {
           id: 1,
-          title: '请假',
+          reason: '请假',
           num: 2,
           red: false,
           blue: true
         },
         {
           id: 2,
-          title: '旷课',
+          reason: '旷课',
           num: 1,
           red: true,
           blue: false
@@ -154,7 +156,7 @@ export default {
         },
         {
           id: 3,
-          title: '停课',
+          reason: '停课',
           num: 2,
           red: false,
           blue: true
@@ -162,7 +164,7 @@ export default {
         },
         {
           id: 4,
-          title: '退费',
+          reason: '退费',
           num: 2,
           red: false,
           blue: true
@@ -170,7 +172,7 @@ export default {
         },
         {
           id: 5,
-          title: '转学',
+          reason: '转学',
           num: 2,
           red: false,
           blue: true
@@ -178,7 +180,7 @@ export default {
         },
         {
           id: 6,
-          title: '流失',
+          reason: '流失',
           num: 2,
           red: true,
           blue: false
@@ -188,82 +190,9 @@ export default {
     }
   },
   mounted () {
-    this.drawLine()
+    // this.drawLine()
   },
   methods: {
-    drawLine () {
-      let myChart = this.$echarts.init(document.getElementById('myChart'))
-      // 绘制图表
-      myChart.setOption({
-        title: {
-          show: true,
-          text: '',
-          x: 'left',
-          textStyle: {
-            fontSize: '15',
-            color: 'black',
-            fontWeight: 'bold'
-          }
-        },
-        // type: 'line',
-        tooltip: {
-          // 是否显示提示框组件，包括提示框浮层和 axisPointe
-          show: false,
-          // 触发类型: item:数据项触发，axis：坐标轴触发
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} ({d}%)'
-        },
-
-        series: [
-          {
-            // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
-            name: '任务进度',
-            type: 'pie',
-            // 饼图的半径，数组的第一项是内半径，第二项是外半径
-            radius: ['50%', '70%'],
-            // 是否启用防止标签重叠策略，默认开启
-            avoidLabelOverlap: false,
-            hoverAnimation: false,
-            // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            color: ['#498AF1', '#D9E8FE'],
-            data: [
-              {
-                // 数据值
-                value: 20,
-                // 数据项名称
-                name: '学生实到率',
-                // 该数据项是否被选中
-                selected: false,
-                // 单个扇区的标签配置
-                label: {
-                  normal: {
-                    // 是显示标签
-                    show: true,
-                    position: 'center',
-                    fontSize: 20,
-                    // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
-                    formatter: '{b}\n{d}%'
-                  }
-                }
-              },
-              {
-                value: 100,
-                label: {
-                  normal: {
-                    show: false
-                  }
-                }
-              }
-            ]
-          }
-        ]
-      })
-    }
   }
 }
 </script>
@@ -316,22 +245,27 @@ export default {
   display: block;
   clear: both;
 }
+.demo-circle-inner{
+  font-size:30px;
+  font-family:'FZZhengHeiS-EB-GB';
+  color:rgba(75,204,238,1);
+  line-height:40px;
+}
 // 样式
    #contentTopRight{
-    //  float: right;
     padding-top: 40px;
-    //  width: 800px;
    }
 .wrap{
   background: white;
   padding: 10px;
 }
 .contentTop{
-  #myChart{
-    float: left;
-  }
+  // #myChart{
+  //   float: left;
+  // }
   .ivu-chart-circle{
     float: left;
+    margin:50px 40px 0  30px;
   }
   .ContentTopCenter{
     // flex:1;