telephone-clients 3.0.104-54 → 3.0.104-56

package/src/telephoneanaly.less

@@ -1,704 +1,704 @@
-//@media screen and (max-width: 1280px) {
-
-.framerizhao {
-  background-image: url("../src/components/image/椭圆2.png");
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .top {
-    width: 100%;
-    height: 13%;
-    text-align: center;
-    padding-top: 0.24rem;
-
-    img {
-      width: 37%;
-    }
-
-    span {
-      position: absolute;
-      right: 30px;
-      width: 252px;
-      height: 23px;
-      font-family: PINGFANG-MEDIUM;
-      font-size: 3rem;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #9effff;
-    }
-  }
-
-  .main {
-    float: left;
-    width: 98%;
-    margin: 0 1% 1% 1%;
-    height: 39%;
-    background-color: rgba(1, 57, 71, 0.5);
-
-    .main-top {
-      width: 100%;
-      height: 45%;
-      padding: 2% 0 0 0;
-
-      .top1 {
-        width: 18%;
-        height: 100%;
-        float: left;
-        padding: 0 1% 0 1.5%;
-
-        img {
-          float: left;
-        }
-
-        p {
-          float: right;
-
-          span {
-            display: block;
-            font-family: PINGFANG-REGULAR;
-            font-size: 2.24rem;
-            font-weight: normal;
-            font-stretch: normal;
-            color: #e3effb;
-          }
-
-          .span1 {
-            font-size: 32px;
-            color: #5cf5f5;
-          }
-
-          .span2 {
-            font-size: 32px;
-            color: #f1c555;
-          }
-        }
-      }
-
-      .top2 {
-        width: 28%;
-        height: 100%;
-        float: left;
-        padding: 0 2% 0 3%;
-
-        .td1 {
-          width: 100%;
-          height: 60%;
-
-          span {
-            margin-left: 15px;
-            padding: 10px;
-            background-color: rgba(28, 95, 142, 0.6);
-            border-radius: 4px;
-            font-family: LCD;
-            font-size: 5.5rem;
-            letter-spacing: 4px;
-            color: #a2ffff;
-            @font-face {
-              font-family: LCD;
-              src:url('../src/bootstrap/fonts/aaa.ttf');
-            }
-          }
-        }
-
-        .td2 {
-          padding: 10px 20px;
-          width: 100%;
-          height: 40%;
-          font-family: PINGFANG-BOLD;
-          font-size: 2.24rem;
-          font-weight: normal;
-          font-stretch: normal;
-          color: #ffffff;
-
-          span {
-            font-size: 0.18rem;
-            color: #9effff;
-          }
-        }
-      }
-    }
-
-    .main-bottom {
-      width: 100%;
-      height: 55%;
-
-      .bottom1 {
-        width: 18%;
-        height: 100%;
-        float: left;
-        padding: 0 2%;
-
-        p {
-          float: left;
-          width: 22px;
-          font-family: PingFang-Medium;
-          font-size: 2.22rem;
-          line-height: 26px;
-          letter-spacing: 5px;
-          color: #e3effb;
-          //padding-top: 30px;
-        }
-
-        div {
-          width: 54%;
-          height: auto;
-          float: left;
-          margin: 20px 0 0 30px;
-          text-align: center;
-          line-height: 151px;
-          font-size: 0.3rem;
-          font-family: PINGFANG-BOLD;
-          background-repeat: no-repeat;
-          background-size: 100%;
-
-          span {
-            font-size: 0.2rem;
-          }
-        }
-
-        .ring1 {
-          background-image: url("../src/components/image/椭圆5拷贝2.png");
-          color: #ee8686;
-        }
-
-        .ring2 {
-          background-image: url("../src/components/image/椭圆5拷贝3.png");
-          color: #5199f1;
-        }
-
-        .ring3 {
-          background-image: url("../src/components/image/椭圆5.png");
-          color: #5cf5f5;
-        }
-
-        .ring4 {
-          background-image: url("../src/components/image/椭圆5拷贝.png");
-          color: #f1c555;
-        }
-      }
-
-      .bottom2 {
-        width: 35%;
-        height: 100%;
-        float: left;
-        padding: 1% 2%;
-      }
-
-      .bottom3 {
-        width: 16%;
-        height: 100%;
-        float: left;
-        padding: 0 2% 0 0;
-
-        p {
-          float: left;
-          width: 22px;
-          font-family: PingFang-Medium;
-          font-size: 2.22rem;
-          line-height: 26px;
-          letter-spacing: 5px;
-          color: #e3effb;
-          //padding-top: 30px;
-        }
-
-        div {
-          width: 54%;
-          height: auto;
-          float: left;
-          margin: 20px 0 0 30px;
-          text-align: center;
-          line-height: 151px;
-          font-size: 0.3rem;
-          font-family: PINGFANG-BOLD;
-          background-repeat: no-repeat;
-          background-size: 100%;
-
-          span {
-            font-size: 0.2rem;
-          }
-        }
-
-        .ring1 {
-          background-image: url("../src/components/image/椭圆5拷贝2.png");
-          color: #ee8686;
-        }
-
-        .ring2 {
-          background-image: url("../src/components/image/椭圆5拷贝3.png");
-          color: #5199f1;
-        }
-
-        .ring3 {
-          background-image: url("../src/components/image/椭圆5.png");
-          color: #5cf5f5;
-        }
-
-        .ring4 {
-          background-image: url("../src/components/image/椭圆5拷贝.png");
-          color: #f1c555;
-        }
-      }
-
-      .bottom4 {
-        width: 15%;
-        height: 100%;
-        float: left;
-        padding: 0 2%;
-
-        p {
-          float: left;
-          width: 22px;
-          font-family: PingFang-Medium;
-          font-size: 2.22rem;
-          line-height: 26px;
-          letter-spacing: 5px;
-          color: #e3effb;
-          //padding-top: 30px;
-        }
-
-        div {
-          width: 70%;
-          height: auto;
-          float: left;
-          margin: 20px 0 0 30px;
-          text-align: center;
-          line-height: 151px;
-          font-size: 0.3rem;
-          font-family: PINGFANG-BOLD;
-          background-repeat: no-repeat;
-          background-size: 100%;
-
-          span {
-            font-size: 0.2rem;
-          }
-        }
-
-        .ring1 {
-          background-image: url("../src/components/image/椭圆5拷贝2.png");
-          color: #ee8686;
-        }
-
-        .ring2 {
-          background-image: url("../src/components/image/椭圆5拷贝3.png");
-          color: #5199f1;
-        }
-
-        .ring3 {
-          background-image: url("../src/components/image/椭圆5.png");
-          color: #5cf5f5;
-        }
-
-        .ring4 {
-          background-image: url("../src/components/image/椭圆5拷贝.png");
-          color: #f1c555;
-        }
-      }
-    }
-  }
-
-  .type {
-    width: 50%;
-    height: 45%;
-    margin: 0 1%;
-    float: left;
-    background-color: rgba(1, 57, 71, 0.5);
-    padding: 15px 20px;
-  }
-
-  .statistics {
-    width: 47%;
-    height: 45%;
-    margin: 0 1% 0 0;
-    float: right;
-    background-color: rgba(1, 57, 71, 0.5);
-    padding: 15px 20px;
-
-    .stateback {
-      display: block;
-      position: absolute;
-      margin: 0 0 0 8%;
-      padding: 10px;
-      color: #5cf5f5;
-      font-size: 0.18rem;
-      background-color: rgba(17, 92, 105, 0.49);
-      border-radius: 2px;
-      z-index: 99;
-
-      img {
-        margin-right: 5px;
-      }
-    }
-  }
-}
-
-
-//}
-
-
-
-.frameweinan {
-  background-image: url("../src/components/image/椭圆2.png");
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .top {
-    width: 100%;
-    height: 10%;
-    text-align: center;
-    padding-top: 0.24rem;
-
-    img {
-      width: 37%;
-      margin-top: 2%;
-    }
-
-    span {
-      position: absolute;
-      right: 30px;
-      width: 252px;
-      height: 23px;
-      font-family: PINGFANG-MEDIUM;
-      font-size: 0.24rem;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #9effff;
-    }
-  }
-
-  .main {
-    float: left;
-    width: 98%;
-    margin: 0 1% 1% 1%;
-    height: 39%;
-    background-color: rgba(1, 57, 71, 0.5);
-
-    .main-top {
-      width: 100%;
-      height: 40%;
-      padding: 2% 0 0 0;
-
-      .top1 {
-        width: 18%;
-        height: 100%;
-        float: left;
-        padding: 3% 3% 0 3%;
-
-        img {
-          float: left;
-        }
-
-        p {
-          float: right;
-
-          span {
-            display: block;
-            font-family: PINGFANG-REGULAR;
-            font-size: 2rem;
-            font-weight: normal;
-            font-stretch: normal;
-            color: #e3effb;
-          }
-
-          .span1 {
-            font-size: 32px;
-            color: #5cf5f5;
-          }
-
-          .span2 {
-            font-size: 32px;
-            color: #f1c555;
-          }
-        }
-      }
-
-      .top2 {
-        width: 28%;
-        height: 100%;
-        float: left;
-        padding: 0 1% 0 1%;
-
-        .td1 {
-          width: 100%;
-          height: 60%;
-
-          span {
-            margin-left: 15px;
-            padding: 10px;
-            background-color: rgba(28, 95, 142, 0.6);
-            border-radius: 4px;
-            font-family: LCD;
-            font-size: 5.5rem;
-            letter-spacing: 4px;
-            color: #a2ffff;
-            @font-face {
-              font-family: LCD;
-              src:url('../src/bootstrap/fonts/aaa.ttf');
-            }
-          }
-        }
-
-        .td2 {
-          padding: 10px 20px;
-          width: 100%;
-          height: 40%;
-          font-family: PINGFANG-BOLD;
-          // color: #a2ffff ;
-          font-size: 4rem;
-          font-weight: normal;
-          font-stretch: normal;
-          color: #ffffff;
-
-          span {
-            font-size: 1.22rem;
-            color: #9effff;
-          }
-        }
-      }
-    }
-
-    .main-bottom {
-      width: 100%;
-      height: 55%;
-
-      .bottom1 {
-        width: 12%;
-        height: 100%;
-        float: left;
-        padding: 3% 1%;
-
-        p {
-          float: left;
-          //width: 22px;
-          font-family: PingFang-Medium;
-          font-size: 2.22rem;
-          line-height: 26px;
-          letter-spacing: 5px;
-          color: #e3effb;
-          //padding-top: 30px;
-        }
-
-        div {
-          width: 70%;
-          height: auto;
-          float: left;
-          margin: 20px 0 0 30px;
-          text-align: center;
-          line-height: 151px;
-          font-size: 3rem;
-          font-family: PINGFANG-BOLD;
-          background-repeat: no-repeat;
-          background-size: 100%;
-
-          span {
-            font-size: 2.2rem;
-          }
-        }
-
-        .ring1 {
-          background-image: url("../src/components/image/椭圆5拷贝2.png");
-          color: #ee8686;
-        }
-
-        .ring2 {
-          background-image: url("../src/components/image/椭圆5拷贝3.png");
-          color: #5199f1;
-        }
-
-        .ring3 {
-          background-image: url("../src/components/image/椭圆5.png");
-          color: #5cf5f5;
-        }
-
-        .ring4 {
-          background-image: url("../src/components/image/椭圆5拷贝.png");
-          color: #f1c555;
-        }
-        .ring5 {
-          background-image: url("../src/components/image/椭圆5拷贝11.png");
-          color: #8A56F4;
-        }
-        .ring6 {
-          background-image: url("../src/components/image/椭圆5拷贝21.png");
-          color: #F5845C;
-        }
-      }
-
-      .bottom2 {
-        width: 28%;
-        height: 100%;
-        float: left;
-        padding: 1% 1%;
-        margin-top: 6%;
-      }
-
-      .bottom3 {
-        width: 12%;
-        height: 100%;
-        float: left;
-        padding: 0 1% 0 0;
-
-        p {
-          float: left;
-          //width: 22px;
-          font-family: PingFang-Medium;
-          font-size: 2.22rem;
-          line-height: 26px;
-          letter-spacing: 5px;
-          color: #e3effb;
-          //padding-top: 30px;
-        }
-
-        div {
-          width: 70%;
-          height: auto;
-          float: left;
-          margin: 20px 0 0 30px;
-          text-align: center;
-          line-height: 151px;
-          font-size: 0.3rem;
-          font-family: PINGFANG-BOLD;
-          background-repeat: no-repeat;
-          background-size: 100%;
-
-          span {
-            font-size: 0.2rem;
-          }
-        }
-
-        .ring1 {
-          background-image: url("../src/components/image/椭圆5拷贝2.png");
-          color: #ee8686;
-        }
-
-        .ring2 {
-          background-image: url("../src/components/image/椭圆5拷贝3.png");
-          color: #5199f1;
-        }
-
-        .ring3 {
-          background-image: url("../src/components/image/椭圆5.png");
-          color: #5cf5f5;
-        }
-
-        .ring4 {
-          background-image: url("../src/components/image/椭圆5拷贝.png");
-          color: #f1c555;
-        }
-        .ring5 {
-          background-image: url("../src/components/image/椭圆5拷贝11.png");
-          color: #8A56F4;
-        }
-        .ring6 {
-          background-image: url("../src/components/image/椭圆5拷贝21.png");
-          color: #F5845C;
-        }
-      }
-
-      .bottom4 {
-        width: 12%;
-        height: 100%;
-        float: left;
-        padding: 3% 1%;
-
-        p {
-          float: left;
-          // width: 22px;
-          font-family: PingFang-Medium;
-          font-size: 2rem;
-          line-height: 26px;
-          letter-spacing: 5px;
-          color: #e3effb;
-          //padding-top: 30px;
-        }
-
-        div {
-          width: 70%;
-          height: auto;
-          float: left;
-          margin: 20px 0 0 30px;
-          text-align: center;
-          line-height: 151px;
-          font-size: 3rem;
-          font-family: PINGFANG-BOLD;
-          background-repeat: no-repeat;
-          background-size: 100%;
-
-          span {
-            font-size: 2.2rem;
-          }
-        }
-
-        .ring1 {
-          background-image: url("../src/components/image/椭圆5拷贝2.png");
-          color: #ee8686;
-        }
-
-        .ring2 {
-          background-image: url("../src/components/image/椭圆5拷贝3.png");
-          color: #5199f1;
-        }
-
-        .ring3 {
-          background-image: url("../src/components/image/椭圆5.png");
-          color: #5cf5f5;
-        }
-
-        .ring4 {
-          background-image: url("../src/components/image/椭圆5拷贝.png");
-          color: #f1c555;
-        }
-        .ring5 {
-          background-image: url("../src/components/image/椭圆5拷贝11.png");
-          color: #8A56F4;
-        }
-        .ring6 {
-          background-image: url("../src/components/image/椭圆5拷贝21.png");
-          color: #F5845C;
-        }
-      }
-    }
-  }
-
-  .type {
-    width: 50%;
-    height: 45%;
-    margin: 0 1%;
-    float: left;
-    background-color: rgba(1, 57, 71, 0.5);
-    padding: 15px 20px;
-  }
-
-  .statistics {
-    width: 47%;
-    height: 45%;
-    margin: 0 1% 0 0;
-    float: right;
-    background-color: rgba(1, 57, 71, 0.5);
-    padding: 15px 20px;
-
-    .stateback {
-      display: block;
-      position: absolute;
-      margin: 0 0 0 8%;
-      padding: 10px;
-      color: #5cf5f5;
-      font-size: 0.18rem;
-      background-color: rgba(17, 92, 105, 0.49);
-      border-radius: 2px;
-      z-index: 99;
-
-      img {
-        margin-right: 5px;
-      }
-    }
-  }
-}
-
-
-//}
+//@media screen and (max-width: 1280px) {
+
+.framerizhao {
+  background-image: url("../src/components/image/椭圆2.png");
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .top {
+    width: 100%;
+    height: 13%;
+    text-align: center;
+    padding-top: 0.24rem;
+
+    img {
+      width: 37%;
+    }
+
+    span {
+      position: absolute;
+      right: 30px;
+      width: 252px;
+      height: 23px;
+      font-family: PINGFANG-MEDIUM;
+      font-size: 3rem;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #9effff;
+    }
+  }
+
+  .main {
+    float: left;
+    width: 98%;
+    margin: 0 1% 1% 1%;
+    height: 39%;
+    background-color: rgba(1, 57, 71, 0.5);
+
+    .main-top {
+      width: 100%;
+      height: 45%;
+      padding: 2% 0 0 0;
+
+      .top1 {
+        width: 18%;
+        height: 100%;
+        float: left;
+        padding: 0 1% 0 1.5%;
+
+        img {
+          float: left;
+        }
+
+        p {
+          float: right;
+
+          span {
+            display: block;
+            font-family: PINGFANG-REGULAR;
+            font-size: 2.24rem;
+            font-weight: normal;
+            font-stretch: normal;
+            color: #e3effb;
+          }
+
+          .span1 {
+            font-size: 32px;
+            color: #5cf5f5;
+          }
+
+          .span2 {
+            font-size: 32px;
+            color: #f1c555;
+          }
+        }
+      }
+
+      .top2 {
+        width: 28%;
+        height: 100%;
+        float: left;
+        padding: 0 2% 0 3%;
+
+        .td1 {
+          width: 100%;
+          height: 60%;
+
+          span {
+            margin-left: 15px;
+            padding: 10px;
+            background-color: rgba(28, 95, 142, 0.6);
+            border-radius: 4px;
+            font-family: LCD;
+            font-size: 5.5rem;
+            letter-spacing: 4px;
+            color: #a2ffff;
+            @font-face {
+              font-family: LCD;
+              src:url('../src/bootstrap/fonts/aaa.ttf');
+            }
+          }
+        }
+
+        .td2 {
+          padding: 10px 20px;
+          width: 100%;
+          height: 40%;
+          font-family: PINGFANG-BOLD;
+          font-size: 2.24rem;
+          font-weight: normal;
+          font-stretch: normal;
+          color: #ffffff;
+
+          span {
+            font-size: 0.18rem;
+            color: #9effff;
+          }
+        }
+      }
+    }
+
+    .main-bottom {
+      width: 100%;
+      height: 55%;
+
+      .bottom1 {
+        width: 18%;
+        height: 100%;
+        float: left;
+        padding: 0 2%;
+
+        p {
+          float: left;
+          width: 22px;
+          font-family: PingFang-Medium;
+          font-size: 2.22rem;
+          line-height: 26px;
+          letter-spacing: 5px;
+          color: #e3effb;
+          //padding-top: 30px;
+        }
+
+        div {
+          width: 54%;
+          height: auto;
+          float: left;
+          margin: 20px 0 0 30px;
+          text-align: center;
+          line-height: 151px;
+          font-size: 0.3rem;
+          font-family: PINGFANG-BOLD;
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          span {
+            font-size: 0.2rem;
+          }
+        }
+
+        .ring1 {
+          background-image: url("../src/components/image/椭圆5拷贝2.png");
+          color: #ee8686;
+        }
+
+        .ring2 {
+          background-image: url("../src/components/image/椭圆5拷贝3.png");
+          color: #5199f1;
+        }
+
+        .ring3 {
+          background-image: url("../src/components/image/椭圆5.png");
+          color: #5cf5f5;
+        }
+
+        .ring4 {
+          background-image: url("../src/components/image/椭圆5拷贝.png");
+          color: #f1c555;
+        }
+      }
+
+      .bottom2 {
+        width: 35%;
+        height: 100%;
+        float: left;
+        padding: 1% 2%;
+      }
+
+      .bottom3 {
+        width: 16%;
+        height: 100%;
+        float: left;
+        padding: 0 2% 0 0;
+
+        p {
+          float: left;
+          width: 22px;
+          font-family: PingFang-Medium;
+          font-size: 2.22rem;
+          line-height: 26px;
+          letter-spacing: 5px;
+          color: #e3effb;
+          //padding-top: 30px;
+        }
+
+        div {
+          width: 54%;
+          height: auto;
+          float: left;
+          margin: 20px 0 0 30px;
+          text-align: center;
+          line-height: 151px;
+          font-size: 0.3rem;
+          font-family: PINGFANG-BOLD;
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          span {
+            font-size: 0.2rem;
+          }
+        }
+
+        .ring1 {
+          background-image: url("../src/components/image/椭圆5拷贝2.png");
+          color: #ee8686;
+        }
+
+        .ring2 {
+          background-image: url("../src/components/image/椭圆5拷贝3.png");
+          color: #5199f1;
+        }
+
+        .ring3 {
+          background-image: url("../src/components/image/椭圆5.png");
+          color: #5cf5f5;
+        }
+
+        .ring4 {
+          background-image: url("../src/components/image/椭圆5拷贝.png");
+          color: #f1c555;
+        }
+      }
+
+      .bottom4 {
+        width: 15%;
+        height: 100%;
+        float: left;
+        padding: 0 2%;
+
+        p {
+          float: left;
+          width: 22px;
+          font-family: PingFang-Medium;
+          font-size: 2.22rem;
+          line-height: 26px;
+          letter-spacing: 5px;
+          color: #e3effb;
+          //padding-top: 30px;
+        }
+
+        div {
+          width: 70%;
+          height: auto;
+          float: left;
+          margin: 20px 0 0 30px;
+          text-align: center;
+          line-height: 151px;
+          font-size: 0.3rem;
+          font-family: PINGFANG-BOLD;
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          span {
+            font-size: 0.2rem;
+          }
+        }
+
+        .ring1 {
+          background-image: url("../src/components/image/椭圆5拷贝2.png");
+          color: #ee8686;
+        }
+
+        .ring2 {
+          background-image: url("../src/components/image/椭圆5拷贝3.png");
+          color: #5199f1;
+        }
+
+        .ring3 {
+          background-image: url("../src/components/image/椭圆5.png");
+          color: #5cf5f5;
+        }
+
+        .ring4 {
+          background-image: url("../src/components/image/椭圆5拷贝.png");
+          color: #f1c555;
+        }
+      }
+    }
+  }
+
+  .type {
+    width: 50%;
+    height: 45%;
+    margin: 0 1%;
+    float: left;
+    background-color: rgba(1, 57, 71, 0.5);
+    padding: 15px 20px;
+  }
+
+  .statistics {
+    width: 47%;
+    height: 45%;
+    margin: 0 1% 0 0;
+    float: right;
+    background-color: rgba(1, 57, 71, 0.5);
+    padding: 15px 20px;
+
+    .stateback {
+      display: block;
+      position: absolute;
+      margin: 0 0 0 8%;
+      padding: 10px;
+      color: #5cf5f5;
+      font-size: 0.18rem;
+      background-color: rgba(17, 92, 105, 0.49);
+      border-radius: 2px;
+      z-index: 99;
+
+      img {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+
+//}
+
+
+
+.frameweinan {
+  background-image: url("../src/components/image/椭圆2.png");
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .top {
+    width: 100%;
+    height: 10%;
+    text-align: center;
+    padding-top: 0.24rem;
+
+    img {
+      width: 37%;
+      margin-top: 2%;
+    }
+
+    span {
+      position: absolute;
+      right: 30px;
+      width: 252px;
+      height: 23px;
+      font-family: PINGFANG-MEDIUM;
+      font-size: 0.24rem;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #9effff;
+    }
+  }
+
+  .main {
+    float: left;
+    width: 98%;
+    margin: 0 1% 1% 1%;
+    height: 39%;
+    background-color: rgba(1, 57, 71, 0.5);
+
+    .main-top {
+      width: 100%;
+      height: 40%;
+      padding: 2% 0 0 0;
+
+      .top1 {
+        width: 18%;
+        height: 100%;
+        float: left;
+        padding: 3% 3% 0 3%;
+
+        img {
+          float: left;
+        }
+
+        p {
+          float: right;
+
+          span {
+            display: block;
+            font-family: PINGFANG-REGULAR;
+            font-size: 2rem;
+            font-weight: normal;
+            font-stretch: normal;
+            color: #e3effb;
+          }
+
+          .span1 {
+            font-size: 32px;
+            color: #5cf5f5;
+          }
+
+          .span2 {
+            font-size: 32px;
+            color: #f1c555;
+          }
+        }
+      }
+
+      .top2 {
+        width: 28%;
+        height: 100%;
+        float: left;
+        padding: 0 1% 0 1%;
+
+        .td1 {
+          width: 100%;
+          height: 60%;
+
+          span {
+            margin-left: 15px;
+            padding: 10px;
+            background-color: rgba(28, 95, 142, 0.6);
+            border-radius: 4px;
+            font-family: LCD;
+            font-size: 5.5rem;
+            letter-spacing: 4px;
+            color: #a2ffff;
+            @font-face {
+              font-family: LCD;
+              src:url('../src/bootstrap/fonts/aaa.ttf');
+            }
+          }
+        }
+
+        .td2 {
+          padding: 10px 20px;
+          width: 100%;
+          height: 40%;
+          font-family: PINGFANG-BOLD;
+          // color: #a2ffff ;
+          font-size: 4rem;
+          font-weight: normal;
+          font-stretch: normal;
+          color: #ffffff;
+
+          span {
+            font-size: 1.22rem;
+            color: #9effff;
+          }
+        }
+      }
+    }
+
+    .main-bottom {
+      width: 100%;
+      height: 55%;
+
+      .bottom1 {
+        width: 12%;
+        height: 100%;
+        float: left;
+        padding: 3% 1%;
+
+        p {
+          float: left;
+          //width: 22px;
+          font-family: PingFang-Medium;
+          font-size: 2.22rem;
+          line-height: 26px;
+          letter-spacing: 5px;
+          color: #e3effb;
+          //padding-top: 30px;
+        }
+
+        div {
+          width: 70%;
+          height: auto;
+          float: left;
+          margin: 20px 0 0 30px;
+          text-align: center;
+          line-height: 151px;
+          font-size: 3rem;
+          font-family: PINGFANG-BOLD;
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          span {
+            font-size: 2.2rem;
+          }
+        }
+
+        .ring1 {
+          background-image: url("../src/components/image/椭圆5拷贝2.png");
+          color: #ee8686;
+        }
+
+        .ring2 {
+          background-image: url("../src/components/image/椭圆5拷贝3.png");
+          color: #5199f1;
+        }
+
+        .ring3 {
+          background-image: url("../src/components/image/椭圆5.png");
+          color: #5cf5f5;
+        }
+
+        .ring4 {
+          background-image: url("../src/components/image/椭圆5拷贝.png");
+          color: #f1c555;
+        }
+        .ring5 {
+          background-image: url("../src/components/image/椭圆5拷贝11.png");
+          color: #8A56F4;
+        }
+        .ring6 {
+          background-image: url("../src/components/image/椭圆5拷贝21.png");
+          color: #F5845C;
+        }
+      }
+
+      .bottom2 {
+        width: 28%;
+        height: 100%;
+        float: left;
+        padding: 1% 1%;
+        margin-top: 6%;
+      }
+
+      .bottom3 {
+        width: 12%;
+        height: 100%;
+        float: left;
+        padding: 0 1% 0 0;
+
+        p {
+          float: left;
+          //width: 22px;
+          font-family: PingFang-Medium;
+          font-size: 2.22rem;
+          line-height: 26px;
+          letter-spacing: 5px;
+          color: #e3effb;
+          //padding-top: 30px;
+        }
+
+        div {
+          width: 70%;
+          height: auto;
+          float: left;
+          margin: 20px 0 0 30px;
+          text-align: center;
+          line-height: 151px;
+          font-size: 0.3rem;
+          font-family: PINGFANG-BOLD;
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          span {
+            font-size: 0.2rem;
+          }
+        }
+
+        .ring1 {
+          background-image: url("../src/components/image/椭圆5拷贝2.png");
+          color: #ee8686;
+        }
+
+        .ring2 {
+          background-image: url("../src/components/image/椭圆5拷贝3.png");
+          color: #5199f1;
+        }
+
+        .ring3 {
+          background-image: url("../src/components/image/椭圆5.png");
+          color: #5cf5f5;
+        }
+
+        .ring4 {
+          background-image: url("../src/components/image/椭圆5拷贝.png");
+          color: #f1c555;
+        }
+        .ring5 {
+          background-image: url("../src/components/image/椭圆5拷贝11.png");
+          color: #8A56F4;
+        }
+        .ring6 {
+          background-image: url("../src/components/image/椭圆5拷贝21.png");
+          color: #F5845C;
+        }
+      }
+
+      .bottom4 {
+        width: 12%;
+        height: 100%;
+        float: left;
+        padding: 3% 1%;
+
+        p {
+          float: left;
+          // width: 22px;
+          font-family: PingFang-Medium;
+          font-size: 2rem;
+          line-height: 26px;
+          letter-spacing: 5px;
+          color: #e3effb;
+          //padding-top: 30px;
+        }
+
+        div {
+          width: 70%;
+          height: auto;
+          float: left;
+          margin: 20px 0 0 30px;
+          text-align: center;
+          line-height: 151px;
+          font-size: 3rem;
+          font-family: PINGFANG-BOLD;
+          background-repeat: no-repeat;
+          background-size: 100%;
+
+          span {
+            font-size: 2.2rem;
+          }
+        }
+
+        .ring1 {
+          background-image: url("../src/components/image/椭圆5拷贝2.png");
+          color: #ee8686;
+        }
+
+        .ring2 {
+          background-image: url("../src/components/image/椭圆5拷贝3.png");
+          color: #5199f1;
+        }
+
+        .ring3 {
+          background-image: url("../src/components/image/椭圆5.png");
+          color: #5cf5f5;
+        }
+
+        .ring4 {
+          background-image: url("../src/components/image/椭圆5拷贝.png");
+          color: #f1c555;
+        }
+        .ring5 {
+          background-image: url("../src/components/image/椭圆5拷贝11.png");
+          color: #8A56F4;
+        }
+        .ring6 {
+          background-image: url("../src/components/image/椭圆5拷贝21.png");
+          color: #F5845C;
+        }
+      }
+    }
+  }
+
+  .type {
+    width: 50%;
+    height: 45%;
+    margin: 0 1%;
+    float: left;
+    background-color: rgba(1, 57, 71, 0.5);
+    padding: 15px 20px;
+  }
+
+  .statistics {
+    width: 47%;
+    height: 45%;
+    margin: 0 1% 0 0;
+    float: right;
+    background-color: rgba(1, 57, 71, 0.5);
+    padding: 15px 20px;
+
+    .stateback {
+      display: block;
+      position: absolute;
+      margin: 0 0 0 8%;
+      padding: 10px;
+      color: #5cf5f5;
+      font-size: 0.18rem;
+      background-color: rgba(17, 92, 105, 0.49);
+      border-radius: 2px;
+      z-index: 99;
+
+      img {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+
+//}