Bladeren bron

第一部分

wzl_h
guozhongbo 2 jaren geleden
bovenliggende
commit
e4e985dcb9
3 gewijzigde bestanden met toevoegingen van 96 en 23 verwijderingen
  1. 34
    0
      css/section_1.css
  2. 1
    1
      js/index.js
  3. 61
    22
      sections/section_1.html

+ 34
- 0
css/section_1.css Bestand weergeven

@@ -0,0 +1,34 @@
1
+.section_list{
2
+  height: 20mm;
3
+  margin-bottom: 5mm;
4
+}
5
+.section_item{
6
+  width: 26mm;
7
+  background-color: #f5f7f9;
8
+  border-radius: 3mm;
9
+  height: 20mm;
10
+  float: left;
11
+  margin-right: 2mm;
12
+  padding-top: 4mm;
13
+  box-sizing: border-box;
14
+}
15
+.section_item:nth-last-child(1){
16
+  margin-right: 0;
17
+}
18
+.item_num{
19
+  height: 5mm;
20
+  font-size: 3mm;
21
+  color: #999999;
22
+  text-align: center;
23
+  margin-bottom: 2mm;
24
+}
25
+.item_num>span{
26
+  font-size: 5mm;
27
+  color: #ff6b00;
28
+}
29
+.item_title{
30
+  text-align: center;
31
+  height: 4mm;
32
+  font-size: 4mm;
33
+  color: #333333;
34
+}

+ 1
- 1
js/index.js Bestand weergeven

@@ -27,4 +27,4 @@ $(function () {
27 27
     }
28 28
     $(`.${htmlName}_html_root`).load(`../sections/${htmlName}.html`);
29 29
   });
30
-});
30
+});

+ 61
- 22
sections/section_1.html Bestand weergeven

@@ -1,27 +1,66 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="zh-cn">
3
-<head>
4
-  <meta charset="UTF-8">
5
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-  <title>校本PDF报告-第一章 考试概况</title>
8
-</head>
9
-<body>
10
-  <div class="page_root">
11
-    <h1 class="section_title_1">第一章 考试概况</h1>
12
-    <div class="abstract_box">
13
-      <div class="abstract_left">
14
-        <img src="/img/img1.png" />
3
+  <head>
4
+    <meta charset="UTF-8" />
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+    <title>校本PDF报告-第一章 考试概况</title>
8
+    <link rel="stylesheet" href="./css/section_1.css" />
9
+  </head>
10
+  <body>
11
+    <div class="page_root">
12
+      <h1 class="section_title_1">第一章 考试概况</h1>
13
+      <div class="abstract_box">
14
+        <div class="abstract_left">
15
+          <img src="/img/img1.png" />
16
+        </div>
17
+        <div class="abstract_right">
18
+          <div class="abstract_content">
19
+            从学校和数据的角度分析整体科目、整体班级及各科各班之间的水平和差异情况,系统从多个维度的数据进行对比分析,<strong
20
+              >包括满分、最高分、平均分、最低分、四率、参考人数、标准差。</strong
21
+            >
22
+          </div>
23
+        </div>
15 24
       </div>
16
-      <div class="abstract_right">
17
-        <div class="abstract_content">从学校和数据的角度分析整体科目、整体班级及各科各班之间的水平和差异情况,系统从多个维度的数据进行对比分析,<strong>包括满分、最高分、平均分、最低分、四率、参考人数、标准差。</strong></div>
25
+      <h2 class="section_title_2">1.总览</h2>
26
+      <div class="section_list">
27
+        <div class="section_item">
28
+          <div class="item_num"><span>6</span>个</div>
29
+          <div class="item_title">班级数量</div>
30
+        </div>
31
+        <div class="section_item">
32
+          <div class="item_num"><span>456</span>人</div>
33
+          <div class="item_title">学生数量</div>
34
+        </div>
35
+        <div class="section_item">
36
+          <div class="item_num"><span>6</span>人</div>
37
+          <div class="item_title">缺考人数</div>
38
+        </div>
39
+        <div class="section_item">
40
+          <div class="item_num"><span>6</span>科</div>
41
+          <div class="item_title">科目数量</div>
42
+        </div>
43
+        <div class="section_item">
44
+          <div class="item_num"><span>600</span>分</div>
45
+          <div class="item_title">最高分</div>
46
+        </div>
47
+        <div class="section_item">
48
+          <div class="item_num"><span>512</span>分</div>
49
+          <div class="item_title">平均分</div>
50
+        </div>
51
+        <div class="section_item">
52
+          <div class="item_num"><span>456</span>分</div>
53
+          <div class="item_title">最低分</div>
54
+        </div>
18 55
       </div>
56
+      <h2 class="section_title_2">2.成绩概况</h2>
57
+      <h3 class="section_title_3">
58
+        2.1 各科满分、最高分、最低分、平均分对比分析
59
+      </h3>
60
+      <h4 class="section_title_4">
61
+        2.1.1 各科满分、最高分、最低分、平均分对比分析
62
+      </h4>
19 63
     </div>
20
-    <h2 class="section_title_2">1.总览</h2>
21
-    <h2 class="section_title_2">2.成绩概况</h2>
22
-    <h3 class="section_title_3">2.1 各科满分、最高分、最低分、平均分对比分析</h3>
23
-    <h4 class="section_title_4">2.1.1 各科满分、最高分、最低分、平均分对比分析</h4>
24
-  </div>
25
-  <script src="../js/section_1.js"></script>
26
-</body>
27
-</html>
64
+    <script src="../js/section_1.js"></script>
65
+  </body>
66
+</html>

Laden…
Annuleren
Opslaan