apply-clients 3.3.222 → 3.4.2-FuGu-4

package/src/expandcssAndroid.less

@@ -104,414 +104,931 @@
     min-width: 100%
   }
 }
-  .app-bg {
-    background: #F5F5F5;
-  }
-  .app-input {
-    background: #FFF;
-    border-bottom: 1px solid #ccc;
+.app-bg {
+  background: #F5F5F5;
+}
+.app-input {
+  background: #FFF;
+  border-bottom: 1px solid #ccc;
+}
+.app-input input, .app-input label {
+  padding: 8px 10px;
+  border: none;
+  outline: none;
+  margin: 0px;
+}
+.app-textarea {
+  display: block;
+  padding: 10px 15px;
+  border: 0;
+  resize: none;
+  width: 100%;
+  color: inherit;
+  font-size: 1em;
+  line-height: inherit;
+  outline: 0;
+}
+.app-cells {
+  height: auto;
+  background-color: #FFFFFF;
+  font-size: 1.2em;
+  overflow: hidden;
+  position: relative;
+}
+.app-cells label {
+  padding: 10px;
+  margin: 0px;
+  color: #999999;
+  font-weight: normal;
+}
+.app-cells * + * {
+  border-top: 1px solid #D5D5D6;
+}
+.app-btn {
+  display: flex;
+  width: 100%;
+}
+.app-btn button{
+  flex: 1;
+  border-radius: 17px;
+  margin: 10px;
+}
+.app-btn button:focus, .app-btn button::selection {
+  outline: none;
+}
+.app-list {
+  margin-top: 8px;
+  background: #FFF;
+}
+.app-list div {
+  padding: 6px 10px;
+}
+.app-list div:first-child{
+  border-bottom: 1px solid #ccc;
+}
+.app-input .datepicker-input[readonly] {
+  border: none;
+  background: none;
+}
+div[contenteditable=true]{
+  height: 80px;
+  width: 100%;
+  outline: none;
+  padding: 8px;
+  overflow: scroll;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-between span {
+  padding-right: 10px;
+}
+.flex-full {
+  flex: 1;
+}
+/* app卡片样式 */
+.app-preview {
+  position: relative;
+  background-color: #FFF;
+  height: auto;
+}
+.app-preview > .head > * {
+  padding: 0px;
+  margin: 0px;
+}
+.app-preview > .head {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  line-height: 2.5em;
+  border-bottom: 1px solid #D5D5D6;
+}
+.app-preview-btn-default {
+  color: #999999;
+}
+.app-preview-btn-success {
+  color: #3CC51F;
+}
+.app-preview > .body {
+  padding: 10px 15px;
+  border-bottom: 1px solid #D5D5D6;
+
+}
+.app-preview > .body > div > label {
+  text-align: justify;
+  text-align-last: justify;
+  min-width: 70px;
+}
+.app-preview > .foot {
+  display: flex;
+  height: 50px;
+}
+.app-preview > .foot > * {
+  flex: 1;
+  display: block;
+  flex: 1;
+
+  text-align: center;
+}
+.app-preview > .foot > * + * {
+  border-left: 1px solid #D5D5D6;
+}
+// 为工单列表样式
+.compatible {
+  padding: 8px;
+}
+.compatible .form-input-group {
+  margin: 3px 0px;
+  padding: 0 8px;
+}
+@media screen and (min-width:992px) {
+  .hd-disappear{
+    display: none;
   }
-  .app-input input, .app-input label {
-    padding: 8px 10px;
-    border: none;
-    outline: none;
+}
+
+#work-history ul {
+  padding: 0px;
+}
+
+// 从order文件夹拷贝
+// 为blockquote写的通用样式
+// 大背景
+.repair-bg {
+  background: #DBDBDB;
+}
+// 头部信息提示
+.bq-parent {
+  height: auto;
+  background: #FFF;
+  padding: 10px 15px;
+  >blockquote {
+    padding: 0px;
+    padding-left: 8px;
     margin: 0px;
+    font-size: 18px;
+    font-weight: bold;
+    border-left-color: #4C647A;
   }
-  .app-textarea {
-    display: block;
-    padding: 10px 15px;
-    border: 0;
-    resize: none;
-    width: 100%;
-    color: inherit;
-    font-size: 1em;
-    line-height: inherit;
-    outline: 0;
-  }
-  .app-cells {
-    height: auto;
-    background-color: #FFFFFF;
-    font-size: 1.2em;
-    overflow: hidden;
-    position: relative;
-  }
-  .app-cells label {
-    padding: 10px;
+}
+// 为移动端提供左侧修饰性边框
+.lb-left {
+  padding-left: 8px;
+  border: none;
+  border-left: 5px solid #A2C2EB;
+}
+// 内容块
+.repair-info-content {
+  margin: 15px;
+  background: #FFF;
+  border-radius: 5px;
+}
+@media screen and (max-width:768px) {
+  .repair-info-content {
     margin: 0px;
-    color: #999999;
-    font-weight: normal;
-  }
-  .app-cells * + * {
-    border-top: 1px solid #D5D5D6;
-  }
-  .app-btn {
-    display: flex;
-    width: 100%;
-  }
-  .app-btn button{
-    flex: 1;
-    border-radius: 17px;
-    margin: 10px;
-  }
-  .app-btn button:focus, .app-btn button::selection {
-    outline: none;
-  }
-  .app-list {
-    margin-top: 8px;
+    padding: 8px;
     background: #FFF;
+    border-radius: 0px;
   }
-  .app-list div {
-    padding: 6px 10px;
-  }
-  .app-list div:first-child{
-    border-bottom: 1px solid #ccc;
-  }
-  .app-input .datepicker-input[readonly] {
-    border: none;
-    background: none;
-  }
-  div[contenteditable=true]{
-    height: 80px;
-    width: 100%;
-    outline: none;
-    padding: 8px;
-    overflow: scroll;
+}
+// 为a标签：berfor伪元素写的通用样式
+.tab-befor-img (@url) {
+  content: '';
+  background-image: url("@{url}");
+  background-size: 30px;
+  display: inline-block;
+  margin-right: 8px;
+  height: 30px;
+  width: 30px;
+  vertical-align: -35%;
+}
+.android-repair-order {
+  > div {
+    > ul {
+      background: #4C647A;
+      overflow: auto;
+      li {
+        display: block;
+        width: 100%;
+      }
+      > .active {
+        a {
+          background: #7599C4!important;
+          color: #FFF!important;
+          border: none;
+          display: block;
+          font-weight: bold;
+          &::after {
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-width: 8px 8px 8px 0px;
+            border-color: transparent #FFF;
+            border-style: solid;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+          &:focus {
+            color: #FFF;
+            background: none;
+          }
+        }
+      }
+      a {
+        font-size: 18px;
+        color: #FFF;
+        padding: 13px 16px;
+      }
+    }
   }
+}
 
-  .flex-between {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .flex-between span {
-    padding-right: 10px;
-  }
-  .flex-full {
-    flex: 1;
+// 从app中考出
+.no-close .nav-tabs a {
+  padding: 5px 12px;
+}
+/* checkbox和radio的样式 */
+.magic-radio,
+.magic-checkbox {
+  position: absolute;
+  display: none;
+}
+
+.magic-radio[disabled],
+.magic-checkbox[disabled] {
+  cursor: not-allowed;
+}
+
+.magic-radio + label,
+.magic-checkbox + label {
+  position: relative;
+  display: block;
+  padding-left: 30px;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: left;
+}
+
+.magic-radio + label:hover:before,
+.magic-checkbox + label:hover:before {
+  animation-duration: 0.4s;
+  animation-fill-mode: both;
+  animation-name: hover-color;
+}
+
+.magic-radio + label:before,
+.magic-checkbox + label:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  content: '';
+  border: 1px solid #c0c0c0;
+}
+
+.magic-radio + label:after,
+.magic-checkbox + label:after {
+  position: absolute;
+  display: none;
+  content: '';
+}
+
+.magic-radio[disabled] + label,
+.magic-checkbox[disabled] + label {
+  cursor: not-allowed;
+  color: #e4e4e4;
+}
+
+.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
+.magic-checkbox[disabled] + label:hover,
+.magic-checkbox[disabled] + label:before,
+.magic-checkbox[disabled] + label:after {
+  cursor: not-allowed;
+}
+
+.magic-radio[disabled] + label:hover:before,
+.magic-checkbox[disabled] + label:hover:before {
+  border: 1px solid #e4e4e4;
+  animation-name: none;
+}
+
+.magic-radio[disabled] + label:before,
+.magic-checkbox[disabled] + label:before {
+  border-color: #e4e4e4;
+}
+
+.magic-radio:checked + label:before,
+.magic-checkbox:checked + label:before {
+  animation-name: none;
+}
+
+.magic-radio:checked + label:after,
+.magic-checkbox:checked + label:after {
+  display: block;
+}
+
+.magic-radio + label:before {
+  border-radius: 50%;
+}
+
+.magic-radio + label:after {
+  top: 4px;
+  left: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #7697c4;
+}
+
+.magic-radio:checked + label:before {
+  border: 2px solid #7697c4;
+}
+
+.magic-radio:checked[disabled] + label:before {
+  border: 2px solid #c9e2f9;
+}
+
+/*.magic-radio:checked[disabled] + label:after {
+background: #c9e2f9; }*/
+
+.magic-checkbox + label:before {
+  border-radius: 3px;
+}
+
+.magic-checkbox + label:after {
+  top: 2px;
+  left: 7px;
+  box-sizing: border-box;
+  width: 6px;
+  height: 12px;
+  transform: rotate(45deg);
+  border-width: 2px;
+  border-style: solid;
+  border-color: #fff;
+  border-top: 0;
+  border-left: 0;
+}
+
+.magic-checkbox:checked + label:before {
+  border: #7697c4;
+  background: #7697c4;
+}
+
+.magic-checkbox:checked[disabled] + label:before {
+  border: #c9e2f9;
+  background: #c9e2f9;
+}
+/* 滚动条样式 */
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+  //  display: none;
+  background-color:rgba(0,0,0,0.2);
+  height:50px;
+  outline-offset:-2px;
+  /*outline:2px solid #fff;*/
+  -webkit-border-radius:4px;
+  /*border: 2px solid #fff;*/
+}
+
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover{
+  //  display: inherit;
+  background-color:rgba(0,0,0,0.4);
+  height:50px;
+  -webkit-border-radius:4px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar{
+  width:8px;
+  height:8px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece{
+  /* 全透明，不显示 */
+  background-color:rgba(255,255,255,0);
+  -webkit-border-radius:0;
+}
+/* 表单内输入框 */
+.form-input-group-large {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  label {
+    width: 110px;
+    //padding-top: 6px;
+    text-align: right;
+    + * {
+      -webkit-box-flex:1;
+      -webkit-flex:1;
+      -ms-flexbox-flex:1;
+      flex: 1;
+      box-sizing: border-box;
+      vertical-align:middle;
+    }
   }
-  /* app卡片样式 */
-  .app-preview {
-    position: relative;
-    background-color: #FFF;
-    height: auto;
+}
+.form-input-group {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  label {
+    width: 110px;
+    // padding-top: 6px;
+    text-align: right;
+    + * {
+      -webkit-box-flex:1;
+      -webkit-flex:1;
+      -ms-flexbox-flex:1;
+      flex: 1;
+      box-sizing: border-box;
+      vertical-align:middle;
+    }
   }
-  .app-preview > .head > * {
-    padding: 0px;
-    margin: 0px;
+}
+.form-input-group-small {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  label {
+    width: 110px;
+    //padding-top: 6px;
+    text-align: right;
+    + * {
+      -webkit-box-flex:1;
+      -webkit-flex:1;
+      -ms-flexbox-flex:1;
+      flex: 1;
+      box-sizing: border-box;
+      vertical-align:middle;
+    }
   }
-  .app-preview > .head {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 15px;
-    line-height: 2.5em;
-    border-bottom: 1px solid #D5D5D6;
+}
+.bg-white {
+  background-color: white;
+}
+.mgb-5 {
+  margin-bottom: 5px;
+}
+.pdl-12 {
+  padding-left: 12px;
+}
+// 字体加粗
+.fwb {
+  font-weight: bold;
+}
+// 浮动右对齐
+.fr {
+  float: right;
+}
+.pl-12 {
+  padding-left: 12px;
+}
+.p-10 {
+  padding: 10px;
+}
+.pt-8 {
+  padding-top: 8px;
+}
+// 下拉选择框占据剩余全部空间
+.select-overspread {
+  .form-group {
+    // margin: 0px 5px 10px 0px;
+    .form-control {
+      margin-right: 0px;
+    }
   }
-  .app-preview-btn-default {
-      color: #999999;
+  .btn-group, .btn-group-vertical {
+    width: 100%;
+    // padding-right: 5px;
+    button {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
   }
-  .app-preview-btn-success {
-      color: #3CC51F;
+  .dropdown-menu {
+    min-width: 100%
   }
-  .app-preview > .body {
-    padding: 10px 15px;
-    border-bottom: 1px solid #D5D5D6;
+}
+.app-bg {
+  background: #F5F5F5;
+}
+.app-input {
+  background: #FFF;
+  border-bottom: 1px solid #ccc;
+}
+.app-input input, .app-input label {
+  padding: 8px 10px;
+  border: none;
+  outline: none;
+  margin: 0px;
+}
+.app-textarea {
+  display: block;
+  padding: 10px 15px;
+  border: 0;
+  resize: none;
+  width: 100%;
+  color: inherit;
+  font-size: 1em;
+  line-height: inherit;
+  outline: 0;
+}
+.app-cells {
+  height: auto;
+  background-color: #FFFFFF;
+  font-size: 1.2em;
+  overflow: hidden;
+  position: relative;
+}
+.app-cells label {
+  padding: 10px;
+  margin: 0px;
+  color: #999999;
+  font-weight: normal;
+}
+.app-cells * + * {
+  border-top: 1px solid #D5D5D6;
+}
+.app-btn {
+  display: flex;
+  width: 100%;
+}
+.app-btn button{
+  flex: 1;
+  border-radius: 17px;
+  margin: 10px;
+}
+.app-btn button:focus, .app-btn button::selection {
+  outline: none;
+}
+.app-list {
+  margin-top: 8px;
+  background: #FFF;
+}
+.app-list div {
+  padding: 6px 10px;
+}
+.app-list div:first-child{
+  border-bottom: 1px solid #ccc;
+}
+.app-input .datepicker-input[readonly] {
+  border: none;
+  background: none;
+}
+div[contenteditable=true]{
+  height: 80px;
+  width: 100%;
+  outline: none;
+  padding: 8px;
+  overflow: scroll;
+}
 
-  }
-  .app-preview > .body > div > label {
-    text-align: justify;
-    text-align-last: justify;
-    min-width: 70px;
-  }
-  .app-preview > .foot {
-    display: flex;
-    height: 50px;
-  }
-  .app-preview > .foot > * {
-    flex: 1;
-    display: block;
-    flex: 1;
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-between span {
+  padding-right: 10px;
+}
+.flex-full {
+  flex: 1;
+}
+/* app卡片样式 */
+.app-preview {
+  position: relative;
+  background-color: #FFF;
+  height: auto;
+}
+.app-preview > .head > * {
+  padding: 0px;
+  margin: 0px;
+}
+.app-preview > .head {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  line-height: 2.5em;
+  border-bottom: 1px solid #D5D5D6;
+}
+.app-preview-btn-default {
+  color: #999999;
+}
+.app-preview-btn-success {
+  color: #3CC51F;
+}
+.app-preview > .body {
+  padding: 10px 15px;
+  border-bottom: 1px solid #D5D5D6;
 
-    text-align: center;
-  }
-  .app-preview > .foot > * + * {
-    border-left: 1px solid #D5D5D6;
-  }
-  // 为工单列表样式
-  .compatible {
-    padding: 8px;
-  }
-  .compatible .form-input-group {
-    margin: 3px 0px;
-    padding: 0 8px;
-  }
-  @media screen and (min-width:992px) {
-    .hd-disappear{
-      display: none;
-    }
+}
+.app-preview > .body > div > label {
+  text-align: justify;
+  text-align-last: justify;
+  min-width: 70px;
+}
+.app-preview > .foot {
+  display: flex;
+  height: 50px;
+}
+.app-preview > .foot > * {
+  flex: 1;
+  display: block;
+  flex: 1;
+
+  text-align: center;
+}
+.app-preview > .foot > * + * {
+  border-left: 1px solid #D5D5D6;
+}
+// 为工单列表样式
+.compatible {
+  padding: 8px;
+}
+.compatible .form-input-group {
+  margin: 3px 0px;
+  padding: 0 8px;
+}
+@media screen and (min-width:992px) {
+  .hd-disappear{
+    display: none;
   }
+}
+
+#work-history ul {
+  padding: 0px;
+}
 
-  #work-history ul {
+// 从order文件夹拷贝
+// 为blockquote写的通用样式
+// 大背景
+.repair-bg {
+  background: #DBDBDB;
+}
+// 头部信息提示
+.bq-parent {
+  height: auto;
+  background: #FFF;
+  padding: 10px 15px;
+  >blockquote {
     padding: 0px;
+    padding-left: 8px;
+    margin: 0px;
+    font-size: 18px;
+    font-weight: bold;
+    border-left-color: #4C647A;
   }
-
-  // 从order文件夹拷贝
-  // 为blockquote写的通用样式
-    // 大背景
-    .repair-bg {
-      background: #DBDBDB;
-    }
-    // 头部信息提示
-    .bq-parent {
-      height: auto;
-      background: #FFF;
-      padding: 10px 15px;
-      >blockquote {
-        padding: 0px;
-        padding-left: 8px;
-        margin: 0px;
-        font-size: 18px;
-        font-weight: bold;
-        border-left-color: #4C647A;
-      }
-    }
-    // 为移动端提供左侧修饰性边框
-    .lb-left {
-      padding-left: 8px;
-      border: none;
-      border-left: 5px solid #A2C2EB;
-    }
-    // 内容块
-    .repair-info-content {
-      margin: 15px;
-      background: #FFF;
-      border-radius: 5px;
-    }
-   @media screen and (max-width:768px) {
-      .repair-info-content {
-        margin: 0px;
-        padding: 8px;
-        background: #FFF;
-        border-radius: 0px;
+}
+// 为移动端提供左侧修饰性边框
+.lb-left {
+  padding-left: 8px;
+  border: none;
+  border-left: 5px solid #A2C2EB;
+}
+// 内容块
+.repair-info-content {
+  margin: 15px;
+  background: #FFF;
+  border-radius: 5px;
+}
+@media screen and (max-width:768px) {
+  .repair-info-content {
+    margin: 0px;
+    padding: 8px;
+    background: #FFF;
+    border-radius: 0px;
+  }
+}
+// 为a标签：berfor伪元素写的通用样式
+.tab-befor-img (@url) {
+  content: '';
+  background-image: url("@{url}");
+  background-size: 30px;
+  display: inline-block;
+  margin-right: 8px;
+  height: 30px;
+  width: 30px;
+  vertical-align: -35%;
+}
+.android-repair-order {
+  > div {
+    > ul {
+      background: #4C647A;
+      overflow: auto;
+      li {
+        display: block;
+        width: 100%;
       }
-    }
-  // 为a标签：berfor伪元素写的通用样式
-    .tab-befor-img (@url) {
-      content: '';
-      background-image: url("@{url}");
-      background-size: 30px;
-      display: inline-block;
-      margin-right: 8px;
-      height: 30px;
-      width: 30px;
-      vertical-align: -35%;
-    }
-    .android-repair-order {
-      > div {
-       > ul {
-          background: #4C647A;
-          overflow: auto;
-          li {
-            display: block;
-            width: 100%;
-          }
-          > .active {
-            a {
-              background: #7599C4!important;
-              color: #FFF!important;
-              border: none;
-              display: block;
-              font-weight: bold;
-              &::after {
-                content: "";
-                width: 0px;
-                height: 0px;
-                border-width: 8px 8px 8px 0px;
-                border-color: transparent #FFF;
-                border-style: solid;
-                position: absolute;
-                right: 0;
-                top: 50%;
-                transform: translateY(-50%);
-              }
-              &:focus {
-                color: #FFF;
-                background: none;
-              }
-            }
+      > .active {
+        a {
+          background: #7599C4!important;
+          color: #FFF!important;
+          border: none;
+          display: block;
+          font-weight: bold;
+          &::after {
+            content: "";
+            width: 0px;
+            height: 0px;
+            border-width: 8px 8px 8px 0px;
+            border-color: transparent #FFF;
+            border-style: solid;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
           }
-          a {
-            font-size: 18px;
+          &:focus {
             color: #FFF;
-            padding: 13px 16px;
+            background: none;
           }
         }
       }
+      a {
+        font-size: 18px;
+        color: #FFF;
+        padding: 13px 16px;
+      }
     }
+  }
+}
 
-    // 从app中考出
-    .no-close .nav-tabs a {
-      padding: 5px 12px;
-    }
-    /* checkbox和radio的样式 */
-    .magic-radio,
-    .magic-checkbox {
-      position: absolute;
-      display: none;
-    }
+// 从app中考出
+.no-close .nav-tabs a {
+  padding: 5px 12px;
+}
+/* checkbox和radio的样式 */
+.magic-radio,
+.magic-checkbox {
+  position: absolute;
+  display: none;
+}
 
-    .magic-radio[disabled],
-    .magic-checkbox[disabled] {
-      cursor: not-allowed;
-    }
+.magic-radio[disabled],
+.magic-checkbox[disabled] {
+  cursor: not-allowed;
+}
 
-    .magic-radio + label,
-    .magic-checkbox + label {
-      position: relative;
-      display: block;
-      padding-left: 30px;
-      cursor: pointer;
-      vertical-align: middle;
-      text-align: left;
-    }
+.magic-radio + label,
+.magic-checkbox + label {
+  position: relative;
+  display: block;
+  padding-left: 30px;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: left;
+}
 
-    .magic-radio + label:hover:before,
-    .magic-checkbox + label:hover:before {
-      animation-duration: 0.4s;
-      animation-fill-mode: both;
-      animation-name: hover-color;
-    }
+.magic-radio + label:hover:before,
+.magic-checkbox + label:hover:before {
+  animation-duration: 0.4s;
+  animation-fill-mode: both;
+  animation-name: hover-color;
+}
 
-    .magic-radio + label:before,
-    .magic-checkbox + label:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      content: '';
-      border: 1px solid #c0c0c0;
-    }
+.magic-radio + label:before,
+.magic-checkbox + label:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  content: '';
+  border: 1px solid #c0c0c0;
+}
 
-    .magic-radio + label:after,
-    .magic-checkbox + label:after {
-      position: absolute;
-      display: none;
-      content: '';
-    }
+.magic-radio + label:after,
+.magic-checkbox + label:after {
+  position: absolute;
+  display: none;
+  content: '';
+}
 
-    .magic-radio[disabled] + label,
-    .magic-checkbox[disabled] + label {
-      cursor: not-allowed;
-      color: #e4e4e4;
-    }
+.magic-radio[disabled] + label,
+.magic-checkbox[disabled] + label {
+  cursor: not-allowed;
+  color: #e4e4e4;
+}
 
-    .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
-    .magic-checkbox[disabled] + label:hover,
-    .magic-checkbox[disabled] + label:before,
-    .magic-checkbox[disabled] + label:after {
-      cursor: not-allowed;
-    }
+.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
+.magic-checkbox[disabled] + label:hover,
+.magic-checkbox[disabled] + label:before,
+.magic-checkbox[disabled] + label:after {
+  cursor: not-allowed;
+}
 
-    .magic-radio[disabled] + label:hover:before,
-    .magic-checkbox[disabled] + label:hover:before {
-      border: 1px solid #e4e4e4;
-      animation-name: none;
-     }
+.magic-radio[disabled] + label:hover:before,
+.magic-checkbox[disabled] + label:hover:before {
+  border: 1px solid #e4e4e4;
+  animation-name: none;
+}
 
-    .magic-radio[disabled] + label:before,
-    .magic-checkbox[disabled] + label:before {
-      border-color: #e4e4e4;
-    }
+.magic-radio[disabled] + label:before,
+.magic-checkbox[disabled] + label:before {
+  border-color: #e4e4e4;
+}
 
-    .magic-radio:checked + label:before,
-    .magic-checkbox:checked + label:before {
-      animation-name: none;
-    }
+.magic-radio:checked + label:before,
+.magic-checkbox:checked + label:before {
+  animation-name: none;
+}
 
-    .magic-radio:checked + label:after,
-    .magic-checkbox:checked + label:after {
-      display: block;
-    }
+.magic-radio:checked + label:after,
+.magic-checkbox:checked + label:after {
+  display: block;
+}
 
-    .magic-radio + label:before {
-      border-radius: 50%;
-    }
+.magic-radio + label:before {
+  border-radius: 50%;
+}
 
-    .magic-radio + label:after {
-      top: 4px;
-      left: 4px;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: #7697c4;
-    }
+.magic-radio + label:after {
+  top: 4px;
+  left: 4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #7697c4;
+}
 
-    .magic-radio:checked + label:before {
-      border: 2px solid #7697c4;
-    }
+.magic-radio:checked + label:before {
+  border: 2px solid #7697c4;
+}
 
-    .magic-radio:checked[disabled] + label:before {
-      border: 2px solid #c9e2f9;
-    }
+.magic-radio:checked[disabled] + label:before {
+  border: 2px solid #c9e2f9;
+}
 
-    /*.magic-radio:checked[disabled] + label:after {
-    background: #c9e2f9; }*/
+/*.magic-radio:checked[disabled] + label:after {
+background: #c9e2f9; }*/
 
-    .magic-checkbox + label:before {
-      border-radius: 3px;
-    }
+.magic-checkbox + label:before {
+  border-radius: 3px;
+}
 
-    .magic-checkbox + label:after {
-      top: 2px;
-      left: 7px;
-      box-sizing: border-box;
-      width: 6px;
-      height: 12px;
-      transform: rotate(45deg);
-      border-width: 2px;
-      border-style: solid;
-      border-color: #fff;
-      border-top: 0;
-      border-left: 0;
-    }
+.magic-checkbox + label:after {
+  top: 2px;
+  left: 7px;
+  box-sizing: border-box;
+  width: 6px;
+  height: 12px;
+  transform: rotate(45deg);
+  border-width: 2px;
+  border-style: solid;
+  border-color: #fff;
+  border-top: 0;
+  border-left: 0;
+}
 
-    .magic-checkbox:checked + label:before {
-      border: #7697c4;
-      background: #7697c4;
-    }
+.magic-checkbox:checked + label:before {
+  border: #7697c4;
+  background: #7697c4;
+}
 
-    .magic-checkbox:checked[disabled] + label:before {
-      border: #c9e2f9;
-      background: #c9e2f9;
-    }
-    /* 滚动条样式 */
-    /*---滚动条默认显示样式--*/
-    ::-webkit-scrollbar-thumb{
-    //  display: none;
-     background-color:rgba(0,0,0,0.2);
-     height:50px;
-     outline-offset:-2px;
-     /*outline:2px solid #fff;*/
-     -webkit-border-radius:4px;
-     /*border: 2px solid #fff;*/
-    }
+.magic-checkbox:checked[disabled] + label:before {
+  border: #c9e2f9;
+  background: #c9e2f9;
+}
+/* 滚动条样式 */
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+  //  display: none;
+  background-color:rgba(0,0,0,0.2);
+  height:50px;
+  outline-offset:-2px;
+  /*outline:2px solid #fff;*/
+  -webkit-border-radius:4px;
+  /*border: 2px solid #fff;*/
+}
 
-    /*---鼠标点击滚动条显示样式--*/
-    ::-webkit-scrollbar-thumb:hover{
-    //  display: inherit;
-     background-color:rgba(0,0,0,0.4);
-     height:50px;
-     -webkit-border-radius:4px;
-    }
-    /*---滚动条大小--*/
-    ::-webkit-scrollbar{
-     width:8px;
-     height:8px;
-    }
-    /*---滚动框背景样式--*/
-    ::-webkit-scrollbar-track-piece{
-    /* 全透明，不显示 */
-     background-color:rgba(255,255,255,0);
-     -webkit-border-radius:0;
-    }
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover{
+  //  display: inherit;
+  background-color:rgba(0,0,0,0.4);
+  height:50px;
+  -webkit-border-radius:4px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar{
+  width:8px;
+  height:8px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece{
+  /* 全透明，不显示 */
+  background-color:rgba(255,255,255,0);
+  -webkit-border-radius:0;
+}