Browse Source

提交

master
keke 4 years ago
parent
commit
f15092b27b

BIN
src/assets/img/list.png View File


BIN
src/assets/img/user2.png View File


+ 11
- 3
src/components/login-form/login-form.vue View File

4
     <FormItem prop="userName">
4
     <FormItem prop="userName">
5
       <Input v-model="form.userName" placeholder="用户名">
5
       <Input v-model="form.userName" placeholder="用户名">
6
         <span slot="prepend">
6
         <span slot="prepend">
7
-          <Icon :size="16" type="ios-person"></Icon>
7
+          <img src="../../assets/img/user.png" style="width:20px" alt="">
8
+
9
+          <!-- <Icon :size="16" type="ios-person"></Icon> -->
8
         </span>
10
         </span>
9
       </Input>
11
       </Input>
10
     </FormItem>
12
     </FormItem>
11
     <FormItem prop="password">
13
     <FormItem prop="password">
12
-      <Input type="password" v-model="form.password" placeholder="密码">
14
+      <Input width="200px" height='40px' type="password" v-model="form.password" placeholder="密码">
13
         <span slot="prepend">
15
         <span slot="prepend">
14
-          <Icon :size="14" type="md-lock"></Icon>
16
+          <img src="../../assets/img/key.png" style="width:20px" alt="">
15
         </span>
17
         </span>
16
       </Input>
18
       </Input>
17
     </FormItem>
19
     </FormItem>
91
 }
93
 }
92
 .ivu-form-item{
94
 .ivu-form-item{
93
   margin-bottom: 20px;
95
   margin-bottom: 20px;
96
+  // .ivu-input-default{
97
+  //   height: 40px;
98
+  // }
99
+  // .ivu-input {
100
+  //   height: 40px;
101
+  // }
94
 }
102
 }
95
 .bottom {
103
 .bottom {
96
           display: flex;
104
           display: flex;

+ 2
- 2
src/components/main/main.less View File

20
   .header-con{
20
   .header-con{
21
     background: #fff;
21
     background: #fff;
22
     padding: 0 20px;
22
     padding: 0 20px;
23
-    width: 100%;
24
-    margin: 10px 0 0 10px;
23
+    width: 96%;
24
+    margin: 10px 0 0 15px;
25
   }
25
   }
26
   .main-layout-con{
26
   .main-layout-con{
27
     height: 100%;
27
     height: 100%;

+ 114
- 62
src/view/single-page/home/home.vue View File

21
     </div>
21
     </div>
22
     <!-- 内容上部 -->
22
     <!-- 内容上部 -->
23
     <div class="contentTop clearfix">
23
     <div class="contentTop clearfix">
24
-      <Row width='100%' type="flex" justify="space-around" class="code-row-bg">
25
-        <i-col span="7">
26
           <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
24
           <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
27
-        </i-col>
28
-        <i-col span="4">
29
-           <div class="ContentTopCenter">
25
+
26
+           <!-- <i-circle :percent="80" stroke-linecap='square' stroke-width='30' size='130' trail-width='30'>
27
+              <span class="demo-circle-inner" style="font-size:24px">80%</span>
28
+          </i-circle> -->
29
+           <div class="ContentTopCenter" style="margin-right:50px">
30
               <p>应到学生<span>{{num1}}</span></p><br />
30
               <p>应到学生<span>{{num1}}</span></p><br />
31
               <p>实到学生<span>{{num2}}</span></p>
31
               <p>实到学生<span>{{num2}}</span></p>
32
             </div>
32
             </div>
33
-        </i-col>
34
-        <i-col span="12">
35
-          <div class="ContentTopRight">
36
-            <Row type="flex" justify="space-around" class="code-row-bg">
37
-                <i-col span="8">
38
-                  <!-- <Card shadow>
39
-             <p slot="title" style="font-size:20px">{{item.title}}<span id="infoNum" :class="{red:item.red}">{{item.num}}</span></p> -->
40
-               <!-- <p style="font-size:20px">{{item.title}}<span id="infoNum" :class="{red:item.red}">{{item.num}}</span></p> -->
41
-            <!-- </Card>  -->
42
-                  <div class="studentInfo" v-for="item in stuInfo" :key="item.id">
43
-                      <p>{{item.title}}<span :class="{red:item.red}">{{item.num}}</span></p>
44
-                  </div>
45
-                </i-col>
46
-            </Row>
33
+          <div id="ContentTopRight" style="padding:40px 0 0 0;margin-left:60px">
34
+             <Row>
35
+                  <i-col span="4" v-for="item in stuInfo" :key="item.id">
36
+                      <div id="topRight">
37
+                        <p>{{item.title}}<span :class="{'red':item.red,'blue':item.blue}">{{item.num}}</span>
38
+                        </p>
39
+                      </div>
40
+                  </i-col>
41
+              </Row>
47
           </div>
42
           </div>
48
         </i-col>
43
         </i-col>
49
     </Row>
44
     </Row>
85
       <div class="money">
80
       <div class="money">
86
          <Row type='flex' justify='center'>
81
          <Row type='flex' justify='center'>
87
             <i-col span="14">
82
             <i-col span="14">
88
-              <h1>¥<span>{{money}}</span></h1>
83
+              <h1>¥<span>{{money+'.00'}}</span></h1>
89
               <h3>缴费总金额</h3>
84
               <h3>缴费总金额</h3>
90
-              <div class="moneyBottom">
85
+              <div class="moneyBottom" >
91
                 <div class="moneyInfo">
86
                 <div class="moneyInfo">
92
                  <div class="studentNum">
87
                  <div class="studentNum">
93
-                   <!-- <Icons :size="30" type="meh"> -->
94
-                     <Icon type="checkmark-circled"></Icon>
88
+                  <img src="../../../assets/img/user2.png" alt="">
95
                  </div>
89
                  </div>
96
                  <div class="moneyNum">
90
                  <div class="moneyNum">
97
-                   {{newStu}}
91
+                   <span>{{newStu}}</span>
98
                    <h4>新学员人数</h4>
92
                    <h4>新学员人数</h4>
99
                  </div>
93
                  </div>
100
               </div>
94
               </div>
101
-              <div class="moneyInfo">
95
+              <div class="moneyInfo" >
102
                  <div class="submitNum"></div>
96
                  <div class="submitNum"></div>
97
+                  <img src="../../../assets/img/list.png" style="width:30px" alt="">
103
                  <div class="moneyNum">
98
                  <div class="moneyNum">
104
-                   {{submitNum}}
105
-                   <h4>新学员人数</h4>
99
+                   <span>{{submitNum}}</span>
100
+                   <h4>缴费学生人数</h4>
106
                  </div>
101
                  </div>
107
               </div>
102
               </div>
108
               </div>
103
               </div>
109
             </i-col>
104
             </i-col>
110
             <i-col span="10">
105
             <i-col span="10">
111
-               <h1>¥<span>{{money}}</span></h1>
106
+               <h1>¥<span>{{money+'.00'}}</span></h1>
112
               <h3>缴费总金额</h3>
107
               <h3>缴费总金额</h3>
113
-              <div class="moneyInfo" style="margin-left:150px">
114
-                 <div class="studentNum">
115
-                   <Icon type="person" color='#3DA4FF' size='20px'></Icon>
116
-                 </div>
108
+              <div class="moneyInfo" style="margin-left:140px">
109
+                <img src="../../../assets/img/user2.png" style="width:30px" alt="">
110
+
117
                  <div class="moneyNum">
111
                  <div class="moneyNum">
118
-                   {{newStu}}
112
+                   <span>{{newStu}}</span>
119
                    <h4>新学员人数</h4>
113
                    <h4>新学员人数</h4>
120
                  </div>
114
                  </div>
121
               </div>
115
               </div>
147
           id: 1,
141
           id: 1,
148
           title: '请假',
142
           title: '请假',
149
           num: 2,
143
           num: 2,
150
-          red: false
144
+          red: false,
145
+          blue: true
151
         },
146
         },
152
         {
147
         {
153
           id: 2,
148
           id: 2,
154
           title: '旷课',
149
           title: '旷课',
155
           num: 1,
150
           num: 1,
156
-          red: true
151
+          red: true,
152
+          blue: false
153
+
157
         },
154
         },
158
         {
155
         {
159
           id: 3,
156
           id: 3,
160
           title: '停课',
157
           title: '停课',
161
           num: 2,
158
           num: 2,
162
-          red: false
159
+          red: false,
160
+          blue: true
161
+
163
         },
162
         },
164
         {
163
         {
165
           id: 4,
164
           id: 4,
166
           title: '退费',
165
           title: '退费',
167
           num: 2,
166
           num: 2,
168
-          red: false
167
+          red: false,
168
+          blue: true
169
+
169
         },
170
         },
170
         {
171
         {
171
           id: 5,
172
           id: 5,
172
           title: '转学',
173
           title: '转学',
173
           num: 2,
174
           num: 2,
174
-          red: false
175
+          red: false,
176
+          blue: true
177
+
175
         },
178
         },
176
         {
179
         {
177
           id: 6,
180
           id: 6,
178
           title: '流失',
181
           title: '流失',
179
           num: 2,
182
           num: 2,
180
-          red: true
183
+          red: true,
184
+          blue: false
185
+
181
         }
186
         }
182
       ]
187
       ]
183
     }
188
     }
200
             fontWeight: 'bold'
205
             fontWeight: 'bold'
201
           }
206
           }
202
         },
207
         },
208
+        // type: 'line',
203
         tooltip: {
209
         tooltip: {
204
           // 是否显示提示框组件,包括提示框浮层和 axisPointe
210
           // 是否显示提示框组件,包括提示框浮层和 axisPointe
205
           show: false,
211
           show: false,
263
 </script>
269
 </script>
264
 
270
 
265
 <style lang="less">
271
 <style lang="less">
272
+#topRight{
273
+  width: 150px;
274
+  height: 70px;
275
+  background:rgba(255,255,255,1);
276
+  border:1px solid rgba(215, 214, 219, 1);
277
+  box-shadow:0px 0px 5px 0px rgba(30,30,30,0.71);
278
+  border-radius:3px;
279
+  margin: 20px;
280
+  display: flex;
281
+  justify-content: center;
282
+  align-items: center;
283
+  p{
284
+    font-size:20px;
285
+    font-family:'Microsoft YaHei';
286
+    font-weight:600;
287
+    color:rgba(0,0,0,1);
288
+    line-height:56px;
289
+    span{
290
+      font-size:29px;
291
+      font-family:'FZZhengHeiS-EB-GB';
292
+      font-weight:400;
293
+      line-height:56px;
294
+      padding-left: 20px;
295
+    }
296
+  }
297
+
298
+}
266
 // 公共样式
299
 // 公共样式
300
+.blue{
301
+  color:rgba(61,164,255,1);
302
+
303
+}
267
 .red{
304
 .red{
268
   font-size: 30px;
305
   font-size: 30px;
269
   color: red;
306
   color: red;
280
   clear: both;
317
   clear: both;
281
 }
318
 }
282
 // 样式
319
 // 样式
320
+   #contentTopRight{
321
+    //  float: right;
322
+    padding-top: 40px;
323
+    //  width: 800px;
324
+   }
283
 .wrap{
325
 .wrap{
284
   background: white;
326
   background: white;
285
   padding: 10px;
327
   padding: 10px;
286
 }
328
 }
287
 .contentTop{
329
 .contentTop{
288
-  // display: flex;
289
-  // justify-content: center;
290
-  // align-items: center;
291
   #myChart{
330
   #myChart{
292
-    // flex:1;
293
-    // margin-left: -200px;
331
+    float: left;
332
+  }
333
+  .ivu-chart-circle{
334
+    float: left;
294
   }
335
   }
295
   .ContentTopCenter{
336
   .ContentTopCenter{
296
     // flex:1;
337
     // flex:1;
338
+    float: left;
297
     display: flex;
339
     display: flex;
298
     align-items: center;
340
     align-items: center;
299
     flex-direction: column;
341
     flex-direction: column;
311
 
353
 
312
     }
354
     }
313
   }
355
   }
314
-   .contentTopRight{
315
-       margin: 10px 0;
316
-      //  height: 400px;
317
-    .studentInfo{
318
-      border:1px solid black;
319
-      height: 80px;
320
-      width: 180px;
321
-    }
322
-.ivu-card-body {
323
-    padding: 30px;
324
-}
325
    }
356
    }
326
-}
327
 .contentCenter{
357
 .contentCenter{
328
   .teacher{
358
   .teacher{
329
     padding: 20px 0;
359
     padding: 20px 0;
361
   }
391
   }
362
 }
392
 }
363
 .contentBottom{
393
 .contentBottom{
364
-  // margin-top: 20px;
394
+  padding-bottom: 50px;
395
+
365
   h1{
396
   h1{
366
     text-align: center;
397
     text-align: center;
398
+     padding-top: 50px;
367
     span{
399
     span{
368
       font-size:32px;
400
       font-size:32px;
369
       font-family:FZZhengHeiS-EB-GB;
401
       font-family:FZZhengHeiS-EB-GB;
381
     line-height:52px;
413
     line-height:52px;
382
   }
414
   }
383
   .moneyBottom{
415
   .moneyBottom{
384
-    margin-left:150px;
416
+    margin-left:120px;
385
   }
417
   }
386
   .moneyInfo{
418
   .moneyInfo{
387
     float: left;
419
     float: left;
388
     margin-left: 20px;
420
     margin-left: 20px;
421
+    padding-left: 20px;
389
     width: 162px;
422
     width: 162px;
390
     height: 71px;
423
     height: 71px;
391
     display: flex;
424
     display: flex;
425
+    justify-content: center;
426
+    align-items: center;
392
     background: white;
427
     background: white;
393
-     box-shadow: 0 0 10px grey;
428
+    box-shadow: 0 0 10px grey;
394
     .studentNum{
429
     .studentNum{
395
       flex: 1;
430
       flex: 1;
431
+      display: flex;
432
+      justify-content: center;
433
+      align-items: center;
434
+      img{
435
+        height: 35px;
436
+      }
437
+
396
     }
438
     }
397
-    .moneyNum{
398
-      flex:3;
399
-    }
439
+     .moneyNum{
440
+        flex:3;
441
+        margin-left: 10px;
442
+        span{
443
+          font-size:20px;
444
+          font-family:FZZhengHeiS-EB-GB;
445
+          font-weight:600;
446
+          color:rgba(253,117,60,1);
447
+          line-height:33px;
448
+        }
449
+
450
+      }
451
+
400
   }
452
   }
401
   }
453
   }
402
 
454
 

Loading…
Cancel
Save