Quellcode durchsuchen

类名分块

wzl_h
guozhongbo vor 2 Jahren
Ursprung
Commit
3afc17ae23
3 geänderte Dateien mit 49 neuen und 11 gelöschten Zeilen
  1. 22
    4
      css/section_1.css
  2. 3
    3
      js/index.js
  3. 24
    4
      sections/section_1.html

+ 22
- 4
css/section_1.css Datei anzeigen

@@ -2,7 +2,7 @@
2 2
   height: 20mm;
3 3
   margin-bottom: 5mm;
4 4
 }
5
-.section_item{
5
+.section1 .section_item{
6 6
   width: 26mm;
7 7
   background-color: #f5f7f9;
8 8
   border-radius: 3mm;
@@ -15,20 +15,38 @@
15 15
 .section_item:nth-last-child(1){
16 16
   margin-right: 0;
17 17
 }
18
-.item_num{
18
+.section1 .item_num{
19 19
   height: 5mm;
20 20
   font-size: 3mm;
21 21
   color: #999999;
22 22
   text-align: center;
23 23
   margin-bottom: 2mm;
24 24
 }
25
-.item_num>span{
25
+.section1 .item_num>span{
26 26
   font-size: 5mm;
27 27
   color: #ff6b00;
28
+  margin-right: 1mm;
28 29
 }
29
-.item_title{
30
+.section1 .item_title{
30 31
   text-align: center;
31 32
   height: 4mm;
32 33
   font-size: 4mm;
33 34
   color: #333333;
35
+}
36
+.echarts_result{
37
+  margin-bottom: 4mm;
38
+    padding: 3mm;
39
+    background-color: #F5F7F9;
40
+}
41
+.echarts_result_content>span {
42
+    display: inline-block;
43
+    margin-right: 2mm;
44
+    width: 2mm;
45
+    height: 2mm;
46
+    border-radius: 50%;
47
+}
48
+.echarts_result_content {
49
+    margin-top: 3mm;
50
+    padding: 3mm;
51
+    background-color: #fff;
34 52
 }

+ 3
- 3
js/index.js Datei anzeigen

@@ -1,8 +1,8 @@
1 1
 $(function () {
2 2
   let loadHtmlArr = [
3
-    "cover",
4
-    // "catalog",
5
-    "preface",
3
+    // "cover",
4
+    // // "catalog",
5
+    // "preface",
6 6
     "section_1",
7 7
     "section_2",
8 8
     "section_3",

+ 24
- 4
sections/section_1.html Datei anzeigen

@@ -8,7 +8,7 @@
8 8
     <link rel="stylesheet" href="./css/section_1.css" />
9 9
   </head>
10 10
   <body>
11
-    <div class="page_root">
11
+    <div class="page_root section1">
12 12
       <h1 class="section_title_1">第一章 考试概况</h1>
13 13
       <div class="abstract_box">
14 14
         <div class="abstract_left">
@@ -57,10 +57,30 @@
57 57
       <h3 class="section_title_3">
58 58
         2.1 各科满分、最高分、最低分、平均分对比分析
59 59
       </h3>
60
-      <h4 class="section_title_4">
61
-        2.1.1 各科满分、最高分、最低分、平均分对比分析
62
-      </h4>
60
+      <div id="subjectEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div>
61
+      <div class="echarts_result">
62
+        <div>上图统计结果表示:</div>
63
+        <div class="echarts_result_content">
64
+          <span style="background-color: #ff5d41"></span>满分人数最多科目:英语
65
+        </div>
66
+      </div>
67
+    </div>
68
+    <div class="page_root section1">
69
+      <h3 class="section_title_3">
70
+        2.1 各科优秀率、良好率、及格率、低分率对比分析
71
+      </h3>
72
+      <div id="subjectEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div>
73
+      <div class="echarts_result">
74
+        <div>上图统计结果表示:</div>
75
+        <div class="echarts_result_content">
76
+          <span style="background-color: #ff5d41"></span>优秀率最高的科目:英语
77
+        </div>
78
+        <div class="echarts_result_content">
79
+          <span style="background-color: #ff5d41"></span>优秀率最高的科目:英语
80
+        </div>
81
+      </div>
63 82
     </div>
83
+    <div class="page_root section1"></div>
64 84
     <script src="../js/section_1.js"></script>
65 85
   </body>
66 86
 </html>

Laden…
Abbrechen
Speichern