调整

public/react/src/modules/courses/signin/Signinstatistics/Signinstatistics.js

@@ -28,6 +28,11 @@ class Signinstatistics extends Component {
         city: "Tokyo",
         temperature: 7
       },
+      {
+        month: "Jan",
+        city: "main",
+        temperature:3
+      },
       {
         month: "Jan",
         city: "London",
@@ -38,6 +43,11 @@ class Signinstatistics extends Component {
         city: "Tokyo",
         temperature: 6.9
       },
+      {
+        month: "Feb",
+        city: "main",
+        temperature: 4.5
+      },
       {
         month: "Feb",
         city: "London",
@@ -142,6 +152,11 @@ class Signinstatistics extends Component {
         month: "Dec",
         city: "London",
         temperature: 4.8
+      },
+      {
+        month: "Dec",
+        city: "main",
+        temperature: 5
       }
     ];
     const cols = {
@@ -154,68 +169,98 @@ class Signinstatistics extends Component {
         <Row type="flex" justify="space-between" className={"mt20"}>
           <Col span={6}>
             <Card style={{ width: 209 }} className={"gutterrowbox lishiqiandao"}>
-              <p></p>
-              <p></p>
-              <p>Card content</p>
+              <div className={"gutterrowboxcontent"}>200</div>
             </Card>
           </Col>
           <Col span={6}>
             <Card style={{ width: 209 }} className={"ml8 gutterrowbox daokeqiandao"}>
-              <p></p>
-              <p></p>
-              <p>Card content</p>
+              <div className={"gutterrowboxcontent"}>200</div>
             </Card>
           </Col>
           <Col span={6}>
             <Card style={{ width: 209 }} className={"ml14 gutterrowbox kuangkeqiandao"}>
-              <p></p>
-              <p></p>
-              <p>Card content</p>
+              <div className={"gutterrowboxcontent"}>200</div>
             </Card>
           </Col>
           <Col span={6} >
             <Card style={{ width: 209 }}  className={"ml20 gutterrowbox qingjiaqiandao"}>
-              <p></p>
-              <p></p>
-              <p>Card content</p>
+              <div className={"gutterrowboxcontent"}>200</div>
             </Card>
           </Col>
         </Row>
 
-        <div>
-          <Chart height={400} data={data} scale={cols} forceFit>
-            <Legend />
-            <Axis name="month" />
-            <Axis
-              name="temperature"
-              label={{
-                formatter: val => `${val}°C`
-              }}
-            />
-            <Tooltip
-              crosshairs={{
-                type: "y"
-              }}
-            />
-            <Geom
-              type="line"
-              position="month*temperature"
-              size={2}
-              color={"city"}
-              shape={"smooth"}
-            />
-            <Geom
-              type="point"
-              position="month*temperature"
-              size={4}
-              shape={"circle"}
-              color={"city"}
-              style={{
-                stroke: "#fff",
-                lineWidth: 1
-              }}
-            />
-          </Chart>
+        <div className={"SigninstatisticsChart mt20"}>
+          <div className={"pd30"}>
+            <Row>
+              <Col span={14}>
+                <Row type="flex" justify="start">
+                  <Col span={5}>
+                    <Row>
+                    <Col span={12} className={"mindaoke mr5"}></Col>
+                    <Col>到课率</Col>
+                  </Row>
+                  </Col>
+                  <Col span={5}>
+                    <Row>
+                      <Col span={12} className={"minkuangke mr5"}></Col>
+                      <Col>旷课率</Col>
+                    </Row>
+                    </Col>
+                  <Col span={5}>
+                    <Row>
+                      <Col span={12} className={"minqingjia mr5"}></Col>
+                      <Col>请假率</Col>
+                    </Row>
+                    </Col>
+                </Row>
+              </Col>
+              <Col span={10}>    <Row type="flex" justify="end">
+                <Col span={5}>col-4</Col>
+                <Col span={5}>col-4</Col>
+              </Row></Col>
+            </Row>
+          </div>
+
+          <div className={"padding03000"}>
+            <Chart height={400} data={data} scale={cols} forceFit>
+              {/*<Legend />*/}
+              <Axis name="month" />
+              <Axis
+                name="temperature"
+                label={{
+                  formatter: val => `${val}%`
+                }}
+              />
+              <Tooltip
+                crosshairs={{
+                  type: "y"
+                }}
+              />
+              <Geom
+                type="line"
+                position="month*temperature"
+                size={2}
+                color={"city"}
+                shape={"smooth"}
+                style={{
+                  stroke: "#26C7C9",
+                  lineWidth: 1
+                }}
+              />
+              <Geom
+                type="point"
+                position="month*temperature"
+                size={4}
+                shape={"circle"}
+                color={"city"}
+                style={{
+                  stroke: "#FF835C",
+                  lineWidth: 1
+                }}
+              />
+            </Chart>
+          </div>
+
         </div>
       </React.Fragment>
 

public/react/src/modules/courses/signin/css/Signinstatistics.css

@@ -2,7 +2,17 @@
     height:150px;
     border: none !important;
 }
-
+.gutterrowbox .ant-card-body{
+    height:150px;
+    position: relative;
+}
+.gutterrowboxcontent{
+    position: absolute;
+    bottom: 20px;
+    font-size:36px;
+    font-weight:400;
+    color:rgba(255,255,255,1);
+}
 .ml14{
     margin-left: 14px;
 }
@@ -25,7 +35,7 @@
     width: 100%;
     height: 150px;
     background-image: url(https://test-newweb.educoder.net/images/qiandao/daoke.png);
-    background-color: #000a4f;
+
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -34,7 +44,7 @@
     width: 100%;
     height: 150px;
     background-image: url(https://test-newweb.educoder.net/images/qiandao/kuangke.png);
-    background-color: #000a4f;
+
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -43,7 +53,49 @@
     width: 100%;
     height: 150px;
     background-image: url(https://test-newweb.educoder.net/images/qiandao/qingjia.png);
-    background-color: #000a4f;
+
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.SigninstatisticsChart{
+    height:519px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.05);
+}
+.pd30{
+    padding:30px;
+}
+.padding03000{
+    padding: 0px 30px 0px 0px;
+}
+
+.mindaoke{
+    width: 20px;
+    height: 20px;
+    background-image: url(./dot-green@2x.png);
+
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.minkuangke{
+    width: 20px;
+    height: 20px;
+    background-image: url(./dot-orange@2x.png);
+
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.minqingjia{
+    width: 20px;
+    height: 20px;
+    background-image: url(./dot-orange@2x1.png);
+
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;