提交

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

@@ -4,14 +4,16 @@
     <FormItem prop="userName">
       <Input v-model="form.userName" placeholder="用户名">
         <span slot="prepend">
-          <Icon :size="16" type="ios-person"></Icon>
+          <img src="../../assets/img/user.png" style="width:20px" alt="">
+
+          <!-- <Icon :size="16" type="ios-person"></Icon> -->
         </span>
       </Input>
     </FormItem>
     <FormItem prop="password">
-      <Input type="password" v-model="form.password" placeholder="密码">
+      <Input width="200px" height='40px' type="password" v-model="form.password" placeholder="密码">
         <span slot="prepend">
-          <Icon :size="14" type="md-lock"></Icon>
+          <img src="../../assets/img/key.png" style="width:20px" alt="">
         </span>
       </Input>
     </FormItem>
@@ -91,6 +93,12 @@ export default {
 }
 .ivu-form-item{
   margin-bottom: 20px;
+  // .ivu-input-default{
+  //   height: 40px;
+  // }
+  // .ivu-input {
+  //   height: 40px;
+  // }
 }
 .bottom {
           display: flex;

src/components/main/main.less

@@ -20,8 +20,8 @@
   .header-con{
     background: #fff;
     padding: 0 20px;
-    width: 100%;
-    margin: 10px 0 0 10px;
+    width: 96%;
+    margin: 10px 0 0 15px;
   }
   .main-layout-con{
     height: 100%;

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

@@ -21,29 +21,24 @@
     </div>
     <!-- 内容上部 -->
     <div class="contentTop clearfix">
-      <Row width='100%' type="flex" justify="space-around" class="code-row-bg">
-        <i-col span="7">
           <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
-        </i-col>
-        <i-col span="4">
-           <div class="ContentTopCenter">
+
+           <!-- <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> -->
+           <div class="ContentTopCenter" style="margin-right:50px">
               <p>应到学生<span>{{num1}}</span></p><br />
               <p>实到学生<span>{{num2}}</span></p>
             </div>
-        </i-col>
-        <i-col span="12">
-          <div class="ContentTopRight">
-            <Row type="flex" justify="space-around" class="code-row-bg">
-                <i-col span="8">
-                  <!-- <Card shadow>
-             <p slot="title" style="font-size:20px">{{item.title}}<span id="infoNum" :class="{red:item.red}">{{item.num}}</span></p> -->
-               <!-- <p style="font-size:20px">{{item.title}}<span id="infoNum" :class="{red:item.red}">{{item.num}}</span></p> -->
-            <!-- </Card>  -->
-                  <div class="studentInfo" v-for="item in stuInfo" :key="item.id">
-                      <p>{{item.title}}<span :class="{red:item.red}">{{item.num}}</span></p>
-                  </div>
-                </i-col>
-            </Row>
+          <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>
+                      </div>
+                  </i-col>
+              </Row>
           </div>
         </i-col>
     </Row>
@@ -85,37 +80,36 @@
       <div class="money">
          <Row type='flex' justify='center'>
             <i-col span="14">
-              <h1>￥<span>{{money}}</span></h1>
+              <h1>￥<span>{{money+'.00'}}</span></h1>
               <h3>缴费总金额</h3>
-              <div class="moneyBottom">
+              <div class="moneyBottom" >
                 <div class="moneyInfo">
                  <div class="studentNum">
-                   <!-- <Icons :size="30" type="meh"> -->
-                     <Icon type="checkmark-circled"></Icon>
+                  <img src="../../../assets/img/user2.png" alt="">
                  </div>
                  <div class="moneyNum">
-                   {{newStu}}
+                   <span>{{newStu}}</span>
                    <h4>新学员人数</h4>
                  </div>
               </div>
-              <div class="moneyInfo">
+              <div class="moneyInfo" >
                  <div class="submitNum"></div>
+                  <img src="../../../assets/img/list.png" style="width:30px" alt="">
                  <div class="moneyNum">
-                   {{submitNum}}
-                   <h4>新学员人数</h4>
+                   <span>{{submitNum}}</span>
+                   <h4>缴费学生人数</h4>
                  </div>
               </div>
               </div>
             </i-col>
             <i-col span="10">
-               <h1>￥<span>{{money}}</span></h1>
+               <h1>￥<span>{{money+'.00'}}</span></h1>
               <h3>缴费总金额</h3>
-              <div class="moneyInfo" style="margin-left:150px">
-                 <div class="studentNum">
-                   <Icon type="person" color='#3DA4FF' size='20px'></Icon>
-                 </div>
+              <div class="moneyInfo" style="margin-left:140px">
+                <img src="../../../assets/img/user2.png" style="width:30px" alt="">
+
                  <div class="moneyNum">
-                   {{newStu}}
+                   <span>{{newStu}}</span>
                    <h4>新学员人数</h4>
                  </div>
               </div>
@@ -147,37 +141,48 @@ export default {
           id: 1,
           title: '请假',
           num: 2,
-          red: false
+          red: false,
+          blue: true
         },
         {
           id: 2,
           title: '旷课',
           num: 1,
-          red: true
+          red: true,
+          blue: false
+
         },
         {
           id: 3,
           title: '停课',
           num: 2,
-          red: false
+          red: false,
+          blue: true
+
         },
         {
           id: 4,
           title: '退费',
           num: 2,
-          red: false
+          red: false,
+          blue: true
+
         },
         {
           id: 5,
           title: '转学',
           num: 2,
-          red: false
+          red: false,
+          blue: true
+
         },
         {
           id: 6,
           title: '流失',
           num: 2,
-          red: true
+          red: true,
+          blue: false
+
         }
       ]
     }
@@ -200,6 +205,7 @@ export default {
             fontWeight: 'bold'
           }
         },
+        // type: 'line',
         tooltip: {
           // 是否显示提示框组件，包括提示框浮层和 axisPointe
           show: false,
@@ -263,7 +269,38 @@ export default {
 </script>
 
 <style lang="less">
+#topRight{
+  width: 150px;
+  height: 70px;
+  background:rgba(255,255,255,1);
+  border:1px solid rgba(215, 214, 219, 1);
+  box-shadow:0px 0px 5px 0px rgba(30,30,30,0.71);
+  border-radius:3px;
+  margin: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  p{
+    font-size:20px;
+    font-family:'Microsoft YaHei';
+    font-weight:600;
+    color:rgba(0,0,0,1);
+    line-height:56px;
+    span{
+      font-size:29px;
+      font-family:'FZZhengHeiS-EB-GB';
+      font-weight:400;
+      line-height:56px;
+      padding-left: 20px;
+    }
+  }
+
+}
 // 公共样式
+.blue{
+  color:rgba(61,164,255,1);
+
+}
 .red{
   font-size: 30px;
   color: red;
@@ -280,20 +317,25 @@ export default {
   clear: both;
 }
 // 样式
+   #contentTopRight{
+    //  float: right;
+    padding-top: 40px;
+    //  width: 800px;
+   }
 .wrap{
   background: white;
   padding: 10px;
 }
 .contentTop{
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
   #myChart{
-    // flex:1;
-    // margin-left: -200px;
+    float: left;
+  }
+  .ivu-chart-circle{
+    float: left;
   }
   .ContentTopCenter{
     // flex:1;
+    float: left;
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -311,19 +353,7 @@ export default {
 
     }
   }
-   .contentTopRight{
-       margin: 10px 0;
-      //  height: 400px;
-    .studentInfo{
-      border:1px solid black;
-      height: 80px;
-      width: 180px;
-    }
-.ivu-card-body {
-    padding: 30px;
-}
    }
-}
 .contentCenter{
   .teacher{
     padding: 20px 0;
@@ -361,9 +391,11 @@ export default {
   }
 }
 .contentBottom{
-  // margin-top: 20px;
+  padding-bottom: 50px;
+
   h1{
     text-align: center;
+     padding-top: 50px;
     span{
       font-size:32px;
       font-family:FZZhengHeiS-EB-GB;
@@ -381,22 +413,42 @@ export default {
     line-height:52px;
   }
   .moneyBottom{
-    margin-left:150px;
+    margin-left:120px;
   }
   .moneyInfo{
     float: left;
     margin-left: 20px;
+    padding-left: 20px;
     width: 162px;
     height: 71px;
     display: flex;
+    justify-content: center;
+    align-items: center;
     background: white;
-     box-shadow: 0 0 10px grey;
+    box-shadow: 0 0 10px grey;
     .studentNum{
       flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img{
+        height: 35px;
+      }
+
     }
-    .moneyNum{
-      flex:3;
-    }
+     .moneyNum{
+        flex:3;
+        margin-left: 10px;
+        span{
+          font-size:20px;
+          font-family:FZZhengHeiS-EB-GB;
+          font-weight:600;
+          color:rgba(253,117,60,1);
+          line-height:33px;
+        }
+
+      }
+
   }
   }