JSDM

HTML

 
1
<!DOCTYPE html>
You don't need a DOCTYPE on CodePen. Just put here what you would normally put in the <body>.
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
6
  <title>学生端</title>
7
  <link rel="stylesheet" href="./index.css">
8
</head>
9
<body>
10
  <div class="container">
11
    <div class="main">
12
      <div class="left">
13
        <div class="header">
14
          <div class="text">智 慧 评 价</div>
15
          <div class="text-en">ZHIHUIPINGJIA</div>
16
        </div>
17
        <div class="smart">
18
          <div class="title">
19
            <i class="title-icon"></i>
20
            <span class="title-text">智</span>
21
          </div>
22
          <img src="./images/left-top-line-chart.png" alt="">
23
        </div>
24
        <div class="create">
25
          <div class="title">
26
            <i class="title-icon"></i>
27
            <span class="title-text">科创</span>
28
          </div>
29
          <div class="create-content">
30
            <div class="create-text">
31
              <span>积极参与学校举办的科技类学科节，成绩优异，获最高奖项</span>
32
              <i class="star"></i>
33
            </div>
34
            <div class="create-list">
35
              <div class="create-item">
36
                <img src="./images/zhengshu.png" alt="">
37
                <div class="item-info">
38
                  <div class="info-title">中小学实验大赛获银奖</div>
39
                  <div class="info-title-bottom"></div>
40
                  <div class="info-text">
41
                    <div class="info-text-item">
42
                      <span class="text-key">时间</span>
43
                      <span class="text-value">2024-03-05</span>
44
                    </div>
45
                    <div class="info-text-item">
46
                      <span class="text-key">颁奖单位</span>
47
                      <span class="text-value blue">江苏省名师空中课堂</span>
48
                    </div>
49
                  </div>
50
                </div>
51
              </div>
52
              <div class="create-item">
53
              <img src="./images/zhengshu.png" alt="">
54
              <div class="item-info">
55
                <div class="info-title">中小学实验大赛获银奖</div>
56
                <div class="info-title-bottom"></div>
57
                <div class="info-text">
58
                  <div class="info-text-item">
59
                    <span class="text-key">时间</span>
60
                    <span class="text-value">2024-03-05</span>
61
                  </div>
62
                  <div class="info-text-item">
63
                    <span class="text-key">颁奖单位</span>
64
                    <span class="text-value blue">江苏省名师空中课堂</span>
65
                  </div>
66
                </div>
67
              </div>
68
            </div>
69
            </div>
70
          </div>
71
        </div>
72
        <div class="beauty">
73
          <div class="title">
74
            <i class="title-icon"></i>
75
            <span class="title-text">美</span>
76
          </div>
77
          <div class="create-content">
78
            <div class="create-text">
79
              <span>积极支持与参加校内外各类不同形式的艺术活动与比赛</span>
80
              <i class="star"></i>
81
            </div>
82
            <div class="create-list">
83
              <div class="create-item">
84
                <img src="./images/zhengshu.png" alt="">
85
                <div class="item-info">
86
                  <div class="info-title">中小学实验大赛获银奖</div>
87
                  <div class="info-title-bottom"></div>
88
                  <div class="info-text">
89
                    <div class="info-text-item">
90
                      <span class="text-key">时间</span>
91
                      <span class="text-value">2024-03-05</span>
92
                    </div>
93
                    <div class="info-text-item">
94
                      <span class="text-key">颁奖单位</span>
95
                      <span class="text-value blue">江苏省名师空中课堂</span>
96
                    </div>
97
                  </div>
98
                </div>
99
              </div>
100
              <div class="create-item">
101
              <img src="./images/zhengshu.png" alt="">
102
              <div class="item-info">
103
                <div class="info-title">中小学实验大赛获银奖</div>
104
                <div class="info-title-bottom"></div>
105
                <div class="info-text">
106
                  <div class="info-text-item">
107
                    <span class="text-key">时间</span>
108
                    <span class="text-value">2024-03-05</span>
109
                  </div>
110
                  <div class="info-text-item">
111
                    <span class="text-key">颁奖单位</span>
112
                    <span class="text-value blue">江苏省名师空中课堂</span>
113
                  </div>
114
                </div>
115
              </div>
116
            </div>
117
            </div>
118
          </div>
119
        </div>
120
      </div>
121
      <div class="middle">
122
        <div class="middle-top">
123
          <img src="./images/middle-top.png" alt="">
124
        </div>
125
        <div class="middle-bottom">
126
          <div class="bottom-left">
127
            <div class="title">
128
              <i class="title-icon"></i>
129
              <span class="title-text">劳</span>
130
            </div>
131
            <div class="bottom-left-content">
132
              <div class="bottom-left-item">
133
                <div class="number">94</div>
134
                <div class="text">总星数</div>
135
                <div class="bg"></div>
136
              </div>
137
              <div class="bottom-left-right">
138
                <img src="./images/bottom-left-right-1.png" alt="">
139
                <img src="./images/bottom-left-right-2.png" alt="">
140
              </div>
141
            </div>
142
          </div>
143
          <div class="bottom-right">
144
            <div class="title">
145
              <i class="title-icon"></i>
146
              <span class="title-text">德</span>
147
            </div>
148
            <div class="bottom-right-top">
149
              <div class="bottom-right-top-item">
150
                <span class="number orange">27</span>
151
                <span class="text">获赞</span>
152
              </div>
153
              <div class="bottom-right-top-item">
154
                <span class="number blue">2</span>
155
                <span class="text">提醒</span>
156
              </div>
157
            </div>
158
            <div class="bottom-right-bottom">
159
              <div class="list-item"><span>爱国爱家爱校，积极参加少先队活动</span><i class="star"></i></div>
160
              <div class="list-item"><span>维护功德环保节约</span><i class="star"></i></div>
161
              <div class="list-item"><span>遵守学生行为规范，不破坏公物</span><i class="star"></i></div>
162
              <div class="list-item"><span>孝亲敬长，独立自主</span><i class="star"></i></div>
163
            </div>
164
          </div>
165
        </div>
166
      </div>
167
      <div class="right">
168
        <div class="right-top">
169
          <div class="bg"></div>
170
        </div>
171
        <div class="right-bottom">
172
          <div class="title">
173
            <i class="title-icon"></i>
174
            <span class="title-text">体</span>
175
          </div>
176
          <div class="list">
177
            <div class="item">
178
              <div class="top blue">合格</div>
179
              <div class="bottom">肺活量</div>
180
            </div>
181
            <div class="item">
182
              <div class="top blue">不合格</div>
183
              <div class="bottom">50m</div>
184
            </div>
185
            <div class="item">
186
              <div class="top blue">合格</div>
187
              <div class="bottom">坐位体前屈</div>
188
            </div>
189
            <div class="item">
190
              <div class="top blue">合格</div>
191
              <div class="bottom">跳绳</div>
192
            </div>
193
          </div>
194
        </div>
195
      </div>
196
    </div>
197
  </div>
198
</body>
199
</html>
!

CSS

​x
 
1
* {
2
  margin: 0;
3
  padding: 0;
4
  box-sizing: border-box;
5
  outline: none;
6
}
7
​
8
@font-face {
9
  font-family: 'yuanti';
10
  src: url('./font/Yuanti.ttc');
11
}
12
​
13
html,
14
body,
15
#app {
16
  width: 100%;
17
  height: 100%;
18
  background-color: #f7f7fb;
19
  overflow: hidden;
20
}
21
​
22
.container {
23
  width: 100%;
24
  height: 100%;
25
​
26
  .main {
27
    position: relative;
28
    display: flex;
29
    justify-content: space-between;
30
    align-items: center;
31
    width: 100%;
32
    padding: 40px;
33
    height: 100%;
34
​
35
    .left {
36
      width: 571px;
37
      height: 100%;
38
      padding-top: 123px;
39
​
40
      .header {
41
        position: absolute;
42
        top: 0;
43
        left: 0;
44
        width: 551px;
45
        height: 115px;
46
        display: flex;
47
        justify-content: center;
48
        align-items: center;
49
        flex-direction: column;
50
        background: url("./images/top.png") no-repeat;
51
        background-size: 100% 100%;
52
​
53
        .text {
54
          color: #292a68;
55
          height: 56px;
56
          line-height: 56px;
57
          font-size: 40px;
58
          font-weight: bold;
59
          font-family: 'yuanti';
60
          margin-bottom: 4px;
61
        }
62
    
63
        .text-en {
64
          color: #292a68;
65
          font-size: 20px;
66
          height: 28px;
67
          line-height: 28px;
68
          font-weight: bold;
69
          font-family: 'yuanti';
70
        }
71
      }
72
​
73
      .smart {
74
        position: relative;
75
        width: 100%;
76
        height: 236px;
77
        background: url("./images/smart-border.png") no-repeat;
78
        background-size: 444px 100%;
79
        padding: 18px;
80
        margin-bottom: 30px;
81
​
82
        img {
83
          position: absolute;
84
          width: 468px;
85
          height: 199px;
86
          left: 18px;
87
          bottom: 12px;
88
        }
89
      }
90
​
91
      .create {
92
        width: 100%;
93
        height: 319px;
94
        background: url("./images/create-border.png") no-repeat;
95
        background-size: 444px 100%;
96
        padding: 18px;
97
        margin-bottom: 30px;
98
​
99
        .create-content {
100
          width: 100%;
101
​
102
          .create-text {
103
            display: flex;
104
            justify-content: flex-start;
105
            align-items: center;
106
            width: 100%;
107
            height: 40px;
108
            line-height: 40px;
109
            font-size: 18px;
110
            padding: 0 16px;
111
            font-weight: 400;
112
            color: #fff;
113
            margin-bottom: 12px;
114
            background: url("./images/create-text-bg.png") no-repeat;
115
            background-size: 100% 100%;
116
            margin-top: 9px;
117
​
118
            span {
119
              width: calc(100% - 27px);
120
            }
121
          }
122
​
123
          .create-list {
124
            display: flex;
125
            justify-content: flex-start;
126
            align-items: center;
127
​
128
            .create-item {
129
              display: flex;
130
              justify-content: flex-start;
131
              align-items: center;
132
              flex-direction: column;
133
              width: 221px;
134
              margin-right: 15px;
135
​
136
              img {
137
                width: 127px;
138
                height: 89px;
139
                object-fit: cover;
140
                margin-bottom: 9px;
141
              }
142
​
143
              .item-info {
144
                width: 100%;
145
                height: 104px;
146
                padding: 10px 0 0 10px;
147
                background: url("./images/create-item-bg.png") no-repeat;
148
​
149
                .info-title {
150
                  width: 100%;
151
                  height: 26px;
152
                  line-height: 26px;
153
                  font-size: 16px;
154
                  color: #fff;
155
                }
156
​
157
                .info-title-bottom {
158
                  width: 65px;
159
                  height: 8px;
160
                  background: url("./images/create-text-bottom.png") no-repeat;
161
                  background-size: 100% 100%;
162
                  margin-bottom: 8px;
163
                }
164
​
165
                .info-text {
166
                  flex-direction: column;
167
​
168
                  .info-text-item {
169
                    display: grid;
170
                    grid-template-columns: 56px 1fr;
171
                    column-gap: 17px;
172
                    color: #fff;
173
​
174
                    .text-key {
175
                      font-size: 14px;
176
                      text-align: right;
177
                    }
178
​
179
                    .text-value {
180
                      font-size: 14px;
181
​
182
                      &.blue {
183
                        color: #66ffff;
184
                      }
185
                    }
186
                  }
187
                }
188
              }
189
            }
190
          }
191
        }
192
      }
193
​
194
      .beauty {
195
        width: 100%;
196
        height: 319px;
197
        background: url("./images/create-border.png") no-repeat;
198
        background-size: 444px 100%;
199
        padding: 18px;
200
        margin-bottom: 30px;
201
​
202
        .create-content {
203
          width: 100%;
204
​
205
          .create-text {
206
            display: flex;
207
            justify-content: flex-start;
208
            align-items: center;
209
            width: 504px;
210
            height: 40px;
211
            line-height: 40px;
212
            font-size: 18px;
213
            padding: 0 16px;
214
            font-weight: 400;
215
            color: #fff;
216
            margin-bottom: 12px;
217
            background: url("./images/beauty-text-bg.png") no-repeat;
218
            background-size: 100% 100%;
219
            margin-top: 9px;
220
​
221
            span {
222
              width: calc(100% - 27px);
223
            }
224
          }
225
​
226
          .create-list {
227
            display: flex;
228
            justify-content: flex-start;
229
            align-items: center;
230
​
231
            .create-item {
232
              display: flex;
233
              justify-content: flex-start;
234
              align-items: center;
235
              flex-direction: column;
236
              width: 221px;
237
              margin-right: 15px;
238
​
239
              img {
240
                width: 127px;
241
                height: 89px;
242
                object-fit: cover;
243
                margin-bottom: 9px;
244
              }
245
​
246
              .item-info {
247
                width: 100%;
248
                height: 104px;
249
                padding: 10px 0 0 10px;
250
                background: url("./images/create-item-bg.png") no-repeat;
251
​
252
                .info-title {
253
                  width: 100%;
254
                  height: 26px;
255
                  line-height: 26px;
256
                  font-size: 16px;
257
                  color: #fff;
258
                }
259
​
260
                .info-title-bottom {
261
                  width: 65px;
262
                  height: 8px;
263
                  background: url("./images/create-text-bottom.png") no-repeat;
264
                  background-size: 100% 100%;
265
                  margin-bottom: 8px;
266
                }
267
​
268
                .info-text {
269
                  flex-direction: column;
270
​
271
                  .info-text-item {
272
                    display: grid;
273
                    grid-template-columns: 56px 1fr;
274
                    column-gap: 17px;
275
                    color: #fff;
276
​
277
                    .text-key {
278
                      font-size: 14px;
279
                      text-align: right;
280
                    }
281
​
282
                    .text-value {
283
                      font-size: 14px;
284
​
285
                      &.blue {
286
                        color: #66ffff;
287
                      }
288
                    }
289
                  }
290
                }
291
              }
292
            }
293
          }
294
        }
295
      }
296
    }
297
​
298
    .middle {
299
      // width: calc(100% - 570px - 384px);
300
      height: 100%;
301
      margin-top: 7px;
302
​
303
      .middle-top {
304
        display: flex;
305
        justify-content: center;
306
        width: 100%;
307
        margin-bottom: 46px;
308
​
309
        img {
310
          width: 740px;
311
          height: 511px;
312
        }
313
      }
314
​
315
      .middle-bottom {
316
        display: flex;
317
        justify-content: center;
318
        align-items: flex-start;
319
​
320
        .bottom-left {
321
          width: 414px;
322
          height: 377px;
323
          padding: 18px;
324
          background: url("./images/bottom-left-border.png") no-repeat;
325
          background-size: 100% 100%;
326
​
327
          .bottom-left-content {
328
            display: flex;
329
            justify-content: flex-start;
330
            align-items: center;
331
​
332
            .bottom-left-item {
333
              position: relative;
334
              width: 143px;
335
              height: 140px;
336
              margin-right: 24px;
337
​
338
              .number {
339
                width: 143px;
340
                font-size: 50px;
341
                color: #66ffff;
342
                line-height: 50px;
343
                text-align: center;
344
                margin-bottom: 9px;
345
              }
346
​
347
              .text {
348
                width: 143px;
349
                font-size: 18px;
350
                line-height: 20px;
351
                height: 20px;
352
                text-align: center;
353
                font-weight: 400;
354
                color: #fff;
355
              }
356
​
357
              .bg {
358
                position: absolute;
359
                top: 21px;
360
                left: 0;
361
                background: url("./images/bottom-left-bg.png") no-repeat;
362
                background-size: 100% 100%;
363
                width: 143px;
364
                height: 119px;
365
              }
366
            }
367
​
368
            .bottom-left-right {
369
              img {
370
                width: 196px;
371
                height: 126px;
372
                margin-bottom: 24px;
373
              }
374
            }
375
          }
376
        }
377
​
378
        .bottom-right {
379
          width: 384px;
380
          height: 377px;
381
          padding: 18px;
382
          background: url("./images/bottom-right-border.png") no-repeat;
383
          background-size: 100% 100%;
384
​
385
          .bottom-right-top {
386
            display: flex;
387
            justify-content: flex-start;
388
            align-items: center;
389
            margin-top: 24px;
390
            margin-bottom: 33px;
391
​
392
            .bottom-right-top-item {
393
              display: flex;
394
              justify-content: center;
395
              align-items: center;
396
​
397
              width: 160px;
398
              height: 84px;
399
              background: url("./images/bottom-right-top-bg.png") no-repeat;
400
              background-size: 100% 100%;
401
              margin-right: 16px;
402
​
403
              .number {
404
                font-size: 45px;
405
                line-height: 45px;
406
                margin-right: 36px;
407
              }
408
​
409
              .text {
410
                font-size: 20px;
411
                font-weight: 400;
412
                color: #fff;
413
              }
414
            }
415
          }
416
​
417
          .bottom-right-bottom {
418
            display: flex;
419
            justify-content: flex-start;
420
            align-items: flex-start;
421
            flex-direction: column;
422
​
423
            .list-item {
424
              display: flex;
425
              justify-content: flex-start;
426
              align-items: center;
427
              color: #fff;
428
              font-size: 18px;
429
              font-weight: 400;
430
              margin-bottom: 17px;
431
​
432
              span {
433
                margin-right: 24px;
434
              }
435
            }
436
          }
437
        }
438
      }
439
    }
440
​
441
    .right {
442
      width: 384px;
443
      height: 100%;
444
      margin-top: 7px;
445
​
446
      .right-top {
447
        display: flex;
448
        justify-content: center;
449
        align-items: center;
450
        width: 100%;
451
        height: 511px;
452
        margin-bottom: 46px;
453
​
454
        .bg {
455
          width: 341px;
456
          height: 404px;
457
          background: url("./images/right-top.png") no-repeat;
458
          background-size: 100% 100%;
459
        }
460
      }
461
​
462
      .right-bottom {
463
        width: 100%;
464
        height: 377px;
465
        padding: 18px;
466
        background: url("./images/right-bottom-border.png") no-repeat;
467
        background-size: 100% 100%;
468
​
469
        .list {
470
          display: grid;
471
          grid-template-columns: repeat(2, 1fr);
472
          grid-template-rows: repeat(2, 1fr);
473
          column-gap: 43px;
474
          row-gap: 24px;
475
          margin-top: 16px;
476
​
477
          .item {
478
            width: 126px;
479
            height: 126px;
480
            background: url("./images/right-bottom-item-bg.png") no-repeat;
481
            background-size: 100% 100%;
482
            text-align: center;
483
            justify-items: end;
484
​
485
            .top {
486
              font-size: 24px;
487
              height: 86px;
488
              padding-top: 35px;
489
            }
490
​
491
            .bottom {
492
              font-size: 20px;
493
              height: 40px;
494
              line-height: 40px;
495
              color: #fff;
496
              font-weight: 400;
497
            }
498
          }
499
​
500
          .item:first-child {
501
            justify-self: end;
502
          }
503
​
504
          .item:nth-child(2) {
505
            justify-self: start;
506
          }
507
​
508
          .item:nth-child(3) {
509
            justify-self: end;
510
          }
511
​
512
          .item:last-child {
513
            justify-self: start;
514
          }
515
        }
516
      }
517
    }
518
  }
519
​
520
  .title {
521
    display: flex;
522
    justify-content: flex-start;
523
    align-items: center;
524
​
525
    .title-icon {
526
      display: inline-block;
527
      width: 12px;
528
      height: 24px;
529
      background-image: url("./images/title-icon.png");
530
      background-size: 100% 100%;
531
      margin-right: 8px;
532
    }
533
​
534
    .title-text {
535
      font-size: 18px;
536
      color: #fff;
537
    }
538
  }
539
​
540
  .star {
541
    display: inline-block;
542
    width: 27px;
543
    height: 26px;
544
    background-image: url("./images/star.png");
545
    background-size: 100% 100%;
546
    // margin-left: 11px;
547
  }
548
​
549
  .blue {
550
    color: #66ffff;
551
  }
552
​
553
  .orange {
554
    -webkit-background-clip: text;
555
    background-clip: text;
556
    color: transparent;
557
    background-image: linear-gradient(90deg, #ffa63e 0%, #ffe766 100%);
558
  }
559
}
560
​
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................