cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/core-resources/css/h5.scss

@@ -0,0 +1,548 @@
+@import '~@base/styles/variables.scss';
+
+
+#app.mobileApp{background-color: #F0F1F1;
+  button{outline: none !important;}
+  .status{
+    &.orgn{color:$yellow;
+      &:before{background:$yellow}
+    }
+    &.green{color:$green;
+      &:before{background:$green}
+    }
+    &.gray{color:#aaa;
+      &:before{background:#aaa}
+    }
+  }
+  .el-form-item.is-error .el-form-item__content{
+    position: relative;
+    &:before{
+      content: "\e7a3 请输入";font-family: element-icons!important;position: absolute;left: 0;color: $dred;z-index: 2;top: 5px;background:#FFF;
+    }
+  }
+}
+.h5-box{
+  max-width: 640px;margin:auto;width:100%;
+  > div{display: flex;flex-direction: column;height:100vh;}
+  .header-box{
+    background-color: #FFF;text-align: center;line-height: 38px;height: 38px;font-size:16px;color: #212121;z-index:9;position: relative;border: solid 4px #c5c6c6;border-radius: 16px 16px 0 0;border-bottom: none;margin: -1px -1px -1px;border-bottom:solid 1px #F1F6FC;
+    .back{position: absolute;right: 14px;top: 50%;line-height: 20px;font-size: 20px;margin-top:-10px;}
+    > span{margin:0 8px;}
+  }
+  .top-btns{
+    display: flex;padding:10px 12px;
+    .btn{flex:1;font-size:13px;border-radius: 8px;height:42px;
+      i{font-size: 14px;margin-right:8px;}
+      &.el-button--primary.is-plain{background:#d2e1ed !important;border:none;}
+    }
+  }
+  .order-item{position: relative;border:solid 1px #F0F1F1;border-radius: 12px;padding:8px 10px;margin: 8px 0;
+    &:before{content: "";position: absolute;left:0;top:6px;height:50px;background:$baseColor;width:3px;border-radius: 5px;}
+    .del-btn{position: absolute;right:-4px;top:-4px;background:#CD1C1C;color:#FFF;width:24px;height:24px;border-radius: 50%;text-align: center;line-height: 24px;}
+    .t1{margin-bottom: 6px;
+      .icon{width:20px;height:20px;vertical-align: middle;display:inline-block;background:#eee;font-size:14px;font-style: inherit;text-align: center;line-height: 22px;border-radius: 50%;color:$baseColor;display: none;
+        &:before{content:"\e66b";font-family:"iconfont";}
+      }
+      span{vertical-align: middle;margin:0 5px 0 0}
+      i.arrow{vertical-align: middle;background:#EDEDED;color:#666;width:16px;height:16px;border-radius: 50%;text-align: center;line-height: 18px;font-size: 12px;}
+    }
+    .t2{font-size: 11px;color:rgba(128,128,128,0.8);
+      p{min-width: 50%;margin-bottom:4px;display:inline-block}
+    }
+    .t3{font-size:11px;    margin-bottom: -8px;
+      > span{
+        display: inline-block;padding: 0 5px 0 0;line-height: 1.2;margin-right: 5px;border-radius: 3px;margin-bottom: 5px;color:rgba(128,128,128,0.8);
+      }
+    }
+  }
+  .orderList-box{
+    padding:0 12px;
+    .item{
+      margin-bottom: 8px;background:#FFF;position: relative;border-radius:8px;
+      &:before{content: "";background:#2A6494;width:4px;height:56px;border-radius: 4px;position: absolute;left:0;top:12px}
+      &:after{content:"\e6e0";font-family:element-icons!important;position: absolute;right:12px;top:10px;}
+      .status{color:$baseColor;position: absolute;right: 28px;top: 12px;font-size: 13px;
+        &:before{content: "";width:5px;height:5px;border-radius: 50%;background:$baseColor;display: inline-block;margin-right: 4px;vertical-align: middle;}
+        &.orgn{color:$yellow;
+          &:before{background:$yellow}
+        }
+        &.green{color:$green;
+          &:before{background:$green}
+        }
+        &.gray{color:#aaa;
+          &:before{background:#aaa}
+        }
+      }
+      .info1{
+        margin:0 8px;color:rgba(51,51,51,0.5);font-size: 11px;padding: 10px 5px;
+        .name{color:#212121;font-size: 14px;padding-right: 100px;margin-bottom: 5px;}
+        p{margin-bottom:2px;}
+      }
+      .info2{
+        margin:0 13px;border-top: dashed 1px #EEEEEE;color:transparentize($baseColor, 0.4);font-size: 11px;padding:8px 0;
+        .name{color:$baseColor;width:100%;font-size: 14px;margin-bottom:4px;
+          i{vertical-align: middle;margin-right: 4px;font-size:16px;}
+          span{vertical-align: middle;}
+        }
+        dl{min-width: 50%;display: inline-block;margin:2px 0;
+          dt{display:inline-block;font-weight: 400;width:72px;
+            &:after{content: ":";}
+          }
+          dd{display:inline-block}
+        }
+      }
+      .btns{
+        border-top:solid 1px #eee;padding:8px 12px;text-align: right;
+        .btn{width:68px;height:28px;display:inline-block;margin-left:12px;padding:0;font-size: 13px;
+          i{font-size:13px;}
+          span{margin-left:4px;}
+        }
+      }
+      &.i-1{
+        .status{color:#E6A23C}
+        &:before,.status:before{background:#E6A23C}
+      }
+      &.i-2{
+        .status{color:#aaa}
+        &:before,.status:before{background:#aaa}
+      }
+    }
+  }
+  .form-box{flex:1;overflow-y: auto;}
+  .fixed-bottom-btns{
+    background:#FFF;padding:4px 8px;text-align: center;box-shadow: 0 0 10px rgb(0 0 0 / 10%);z-index: 2;display:flex;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .btn{
+      margin:4px 6px;border-radius: 14px;padding: 0;height: 40px;width:calc(50% - 12px);display:inline-block;
+      &.el-button--primary.is-plain{border-color:$baseColor}
+      .iconfont{font-size: 12px;margin-right: 3px;}
+    }
+    .btn-l{flex:1;text-align:right}
+    .btn-r{
+      text-align:center;padding:0 4px;line-height: 1.2;padding: 0 6px 0 10px;color:$baseColor;border-radius: 14px;border: solid 1px $baseColor;margin-top: 4px;margin-bottom: 4px;height:40px;
+      > i{display:block;margin:4px auto 0;zoom: 0.9;}
+      > span{zoom: 0.85;}
+    }
+  }
+  .float-addBtn{
+    background:$baseColor;width:68px;height:68px;color:#FFF;text-align: center;position: fixed;bottom:45px;right:24px;border-radius: 50%;display: block;box-shadow: 0 3px 6px rgba(42,100,148,0.35);
+    i{display: block;font-size:24px;margin-top:13px;}
+    span{display: block;margin-left:4px}
+  }
+  .pop-screen-box{
+    position: fixed;top:0;right:0;left:0;bottom:0;z-index: 99;
+    &:before{content: "";position: absolute;left:0;right:0;bottom:0;top:0;background:rgba(0,0,0,0.3);}
+    > div{
+      background:#FFF;position: absolute;top:0;right:0;bottom:0;width:80%;
+      .header-box{border:none;border-bottom:solid 1px #eee;position: relative;margin: 0;}
+      .p-cont{
+        min-height: calc(100vh - 105px);padding:10px 16px 0;
+        .txt{width:100%}
+        .el-form{
+          .el-form-item{
+            margin-bottom: 4px;
+            .el-form-item__label{padding:0;margin:0;font-size: 13px;}
+            .el-input{width:100% !important;height:38px;border-radius: 4px;}
+            .el-input__inner{font-size: 13px;}
+          }
+        }
+
+      }
+      .p-btn{
+        display: flex;padding:8px;
+        .btn{flex:1;margin:0 8px;height:42px;border-radius: 12px;}
+      }
+    }
+  }
+
+  .tab-box{
+    border-bottom: solid 1px #EEEFF1;overflow: hidden;height: 38px;line-height: 30px;font-size: 13px;background: #FFF;box-shadow: 0 3px 4px rgb(0 0 0 / 2%);display: none;
+    > div{
+      overflow: auto;height: 46px;white-space: nowrap;padding: 0 8px;
+      .item{display: inline-block;margin:0 6px;color: #808080;position: relative;padding:0 12px;border-radius: 20px;
+        &.on{color:$baseColor;background:transparentize($baseColor,0.88)}
+      }
+    }
+  }
+  .form-box{
+    background-color:transparent;
+    .c{padding:12px 16px 0;
+      .c-item{background:#FFF;border-radius: 12px;padding:0 16px;margin-bottom:12px;overflow: hidden;
+        .tit{margin:0 -16px;padding: 14px 16px;position: relative;border-bottom:solid 1px #F6F6F6;
+          b{font-size:15px;font-weight: 600;color:#212121;position: relative;
+            &:before{content: "";position: absolute;bottom:0;left:0;right:0;background: rgba(42,100,148,0.45);height:5px;}
+          }
+          .el-button{padding:0;font-size: 13px;float: right;margin-right: 22px;    margin-top: -1px;
+            &.el-button--primary.is-plain{border:none;background: transparentize($baseColor, 0.91) !important; padding: 6px;}
+          }
+          .arrow{position: absolute;right:12px;font-size: 16px;top: 0;line-height: 50px;}
+          .el-link{font-size: 13px;margin-left:12px;color:#2A6494;
+            .el-link--inner span{position: relative;
+              &:before{content: "";position: absolute;height:1px;left:0;right:0;bottom:-2px;background:#2A6494;}
+            }
+          }
+        }
+        .cont{
+
+          .tips{background:#FFF4ED;padding:4px 12px;margin: 2px -16px 12px;}
+
+          .logistics-item{
+            border:solid 1px #F0F1F1;border-radius: 12px;margin:10px 0;
+            .t1{border-bottom:solid 1px #F0F1F1;padding:6px 10px;font-size:13px;position: relative;padding-right:20px;
+              &:after{content:"\e6e0";position: absolute;right:8px;font-family: element-icons!important;}
+              img{vertical-align: middle;margin-right: 4px;}
+              span{vertical-align: middle;}
+            }
+            .t2{
+              padding: 6px 10px;font-size: 12px;color:rgba(51,51,51,0.5);position:relative;
+              p{margin-bottom:3px;min-width: 50%;}
+              .status{
+                position:absolute;right:4px;top:10px;padding:0 4px;border-radius: 2px;
+                &.s-0{background:transparentize($baseColor, 0.88);color:$baseColor}
+                &.s-1{background-color: #F4F4F4;color:#666}
+                &.s-2{background:transparentize(#FF731C, 0.88);color:#FF731C}
+              }
+            }
+          }
+          .show-more{
+            text-align: center;font-size: 12px;background-color: #2a6494;width: 120px;margin: 13px auto 18px;border-radius: 12px;height: 36px;line-height: 34px;color: #FFF;
+            i{margin-right: 4px;font-size: 13px;}
+          }
+        }
+        .flowPath-box{
+          overflow:hidden;
+          > .t, .m2 .t{
+            color:$baseColor;margin-top: 16px;
+            &:before{content: "";width:5px;height: 5px;border-radius: 50%;background:$baseColor;margin-right: 3px;vertical-align: middle;display: inline-block;}
+            span{vertical-align: middle;}
+          }
+          .c{
+            padding:0 5px;margin-top: 5px;height: auto;margin-bottom: 12px;
+            .name{
+              font-weight: 600;
+              .el-tag{line-height: 19px;font-weight: 400;display: inline-block;margin-top: 4px}
+            }
+            .btn{
+              color:$baseColor;background: transparentize($baseColor, 0.91);padding:7px 10px;font-size: 13px;
+              i{font-size: 12px;margin-right: 3px}
+            }
+          }
+          .m2{min-width:50%;float:left;margin-bottom:12px;}
+        }
+        .flowPath-btns{
+          padding: 12px 0;margin: 0 0px 0 -10px;
+          .btn{
+            height:34px;border-radius:20px;padding:0;font-size: 13px;width: calc(33% - 24px);margin-left: 24px;margin-bottom: 10px;background: none;position: relative;padding-left:12px;
+            i{
+              width: 22px;height: 23px;background: #e9e9e9;margin: 0 0 0 -7px;vertical-align: middle;border-radius: 15px;display: inline-block;line-height: 22px;text-align: center;margin-right: 17px;color: #FFF;    position: absolute;    left: 0;top: 4px;font-size:14px;
+              &.icon-tongguo{font-size: 16px;line-height: 24px;}
+            }
+            &.el-button--success{
+              color:$green;
+              > i {
+                background: $green;
+              }
+            }
+            &.el-button--primary > i {
+              background: $baseColor;
+            }
+            &.el-button--warning {
+              color:$yellow;
+              > i {
+                background: $yellow;
+              }
+            }
+            &.el-button--danger {
+              color:$dred;
+              > i {
+                background: $dred;
+              }
+            }
+          }
+        }
+        .upload-file{padding-bottom:12px;min-height: 132px;}
+      }
+    }
+    &.el-form{
+      > .flex{
+        display: flex;height:calc(100vh - 38px);flex-direction: column;
+        .tit{margin: 8px 12px;background: #336a991a;border-radius: 11px;padding: 10px 12px;font-size:13px;color:$baseColor;
+          &:before{content: "";width:5px;height: 5px;background:$baseColor;border-radius: 50%;vertical-align: middle;margin-right:5px;vertical-align: middle;display: inline-block;}
+          > span{vertical-align: middle;}
+        }
+      }
+      .el-form-item{border-bottom:solid 1px #F3F3F3;display: flex;padding: 6px 0;align-items: center;position:relative;
+        .el-form-item__label{padding: 0 5px 0 0;margin: 0;font-size:13px;width: 98px;line-height: 1.4;height: auto;overflow: hidden;
+          &:before{position: absolute;margin-left: -10px;margin-top: 2px;}
+        }
+        .el-form-item__content{
+          line-height:28px;min-height:38px;flex: 1;padding:5px 0;font-size:13px;
+          > span{line-height: 18px;padding:2px 0;}
+          .el-input,.el-select{width: 100% !important;
+            .el-input__inner{border:none;padding-left:0;font-size: 13px;}
+            .el-input__suffix ,.el-input__prefix{
+              .el-input__icon{
+                &.el-icon-search{margin-top:0;}
+              }
+            }
+          }
+          .el-input-number{width:calc(100% - 8px);margin-left:8px;
+            //.el-input__inner{text-align: center;}
+            .el-input-number__increase,.el-input-number__decrease{width:24px;height:24px;border-radius: 50%;background:#EAEAEA;margin-top: 4px;}
+          }
+          .el-radio-group .el-radio{margin-right:0;margin-bottom:0;margin-left:8px;
+            .el-radio__label{padding-left:4px;}
+          }
+          .el-checkbox-group .el-checkbox{
+            margin-right:0;margin-bottom:0;margin-left: 8px;
+            .el-checkbox__label{padding-left:4px;}
+          }
+          .el-textarea .el-textarea__inner{border:none;padding:0;}
+          .status{color:#2A6494;
+            &:before{content: "";width: 5px;height: 5px;background-color: #2A6494;border-radius: 50%;vertical-align: middle;display: inline-block;margin-right: 4px;}
+          }
+        }
+        &:last-child{border-bottom:none}
+      }
+    }
+
+    // .el-upload-list{margin:10px 0;display: inline-block;vertical-align: middle;
+    //   .el-upload-list__item{width:74px;height:74px;padding:0;border:none;border-radius: 6px;margin-bottom:0;
+    //     .el-upload-list__item-thumbnail{padding:0;width:74px;height:74px}
+    //     .el-upload-list__item-actions span + span{margin-left: 5px;}
+    //   }
+    // }
+    // .el-upload--picture-card{width:74px;height:74px;border:none;background:#F4F6F8;line-height:85px;margin: 10px 0;display: inline-block;vertical-align: middle;
+    //   i{font-size:18px}
+    // }
+
+  }
+  .search-H5box{
+    position: relative;padding: 8px 16px 0;display: flex;
+    .txt {
+      height: 38px;border: none;background: #fff;border-radius: 38px  0 0 38px;position: relative;flex:1;border:solid 1px #E4E4E4;
+      .el-input{width:100% !important}
+      .el-input__inner{height: 38px !important;width: 100%;border: none;background: none;line-height: 38px;padding-left: 39px;font-size: 13px;}
+      .el-input__suffix{position: absolute;left: 12px;width: 20px;right: inherit;transform: inherit !important;top: 7px;}
+      .el-input-group__append{border: none;background: none;
+        .btn {border: none;background:$baseColor;width: 53px;position: absolute;right: 26px;top: 14px;padding: 0;height: 30px;border-radius: 30px;outline: none;color: #FFF;}
+        .el-button{color:$baseColor;font-size: 13px;}
+      }
+    }
+    .icon-screen{line-height:38px;font-size: 13px;background:transparentize($baseColor,0.88);color:$baseColor;padding:0 10px;border-radius: 0 10px 10px 0;height: 38px;border:solid 1px #E4E4E4;border-left:none;
+      i{margin-right:5px;font-size:14px;}
+    }
+    > div:has( + .icon-screen){border-radius: 38px 0 0 38px;}
+  }
+
+  .pop-box{
+    position:fixed;top:0;bottom:0;left:0;right:0;background:#F6F6F6;z-index: 99;
+    .header-box{position: relative;
+      + .form-box {
+        display: flex;flex-direction: column;height: calc(100vh - 38px);
+        > .c{flex:1;overflow-y: auto;}
+        .h5-box > div{height:calc(100vh - 38px);overflow-x: hidden;
+          > .header-box {border-top: none;    border-radius: 0;}
+        }
+
+      }
+      + .top-btns{padding-bottom:0;
+        + .flex{height:calc(100vh - 211px)}
+      }
+    }
+    .fixed-bottom-btns{background: #F6F6F6;display: flex;
+      .btn{flex:1}
+    }
+    .search-H5box + .flex{height: calc(100vh - 151px);}
+    .flex{
+      display:flex;flex-direction: column;height: calc(100vh - 102px);
+      > p.tips1{padding:10px 12px;margin: 0;font-size:13px;color:#666666}
+      .checkbox-pro{flex:1;background:#FFF;border-radius: 12px;margin:0 12px;
+        .item{border-bottom:solid 1px #F5F5F5;padding:12px 16px;
+          .t1{margin-bottom:6px;position: relative;
+            &:before{content: "";position: absolute;left:-15px;top:2px;height:15px;width: 4px;border-radius: 5px;background:#999}
+            &:after{content: "\e6da";font-family: element-icons!important;position: absolute;right:0;color:$baseColor;font-weight: 600;display:none;top:0;}
+          }
+          .t2{font-size: 11px;color:rgba(51,51,51,0.5);
+            p{min-width:50%;margin-bottom:3px;display: inline-block;}
+          }
+          &.on .t1{
+            &:after{display:block}
+            &:before{background:$baseColor}
+          }
+        }
+      }
+      .checkbox-all_list{
+        flex:1;padding:0 12px 0;overflow:auto;
+        .order-item{/*margin-top:0;*/background:#FFF;
+
+          .is-checked{
+            border:solid 1px #DCDCDC;background: #E2E2E2;color:#FFF;font-size:13px;width:62px;text-align: center;height: 22px;line-height: 20px;border-radius: 0 8px 0 6px;position: absolute;right:0;top:0;
+            i{margin-right: 3px;font-size: 13px}
+          }
+          &.on{
+            border:solid 1px $baseColor;
+            .is-checked{
+              border-color:$baseColor;background:$baseColor;
+            }
+          }
+        }
+      }
+      .checkbox-all{
+        background:#FFF;padding:0 12px 8px;min-height:80px;box-shadow: 0 -3px 4px rgb(0 0 0 / 6%);    position: relative;
+        .ca-t{
+          font-weight: 600;margin: 8px 0;font-size:14px;
+        }
+        .ca-c{
+          span{
+            border:solid 1px $baseColor;color:$baseColor;display: inline-block;border-radius: 4px;height:24px;padding:0 2px;margin:4px 10px 4px 0;padding-right: 28px;position: relative;line-height:24px;font-size:13px;
+            i{background: transparentize($baseColor, 0.91);display:inline-block;position: absolute;top:0;right:0;height:24px;width:24px;line-height: 24px;text-align: center;}
+          }
+        }
+      }
+    }
+  }
+}
+.h5-upload-box{
+  display:inline;vertical-align: text-top;float: left;
+  .tips{
+    background: #FFF4ED;margin: 2px -16px;padding: 7px 16px;line-height: 1.6;color:#888;
+    b{font-size:13px;font-weight: 400;color:#FF731C}
+  }
+  .add-upload{background:#F5F5F5;border:dashed 1px #DFDFDF;width:74px;height:74px;border-radius: 6px;vertical-align: text-top;display: inline-block;padding: 10px 0;font-size: 12px;color: #BBBBBB;margin: 16px  16px  0 0;
+    i{
+      display: block;font-size: 24px;margin-bottom: 4px;
+    }
+  }
+  .el-upload{vertical-align: text-top;display: inline-block;}
+}
+.h5-upload-list.el-upload-list{
+  display: contents;vertical-align: text-top;float: left;
+  .el-upload-list__item{
+    position: relative;display: inline-block;border:none;padding:0;width:74px;margin:16px  16px  0 0;vertical-align:middle;
+    .el-upload-list__item-thumbnail{width:74px;height:74px;border-radius: 6px;overflow: hidden;border:dashed 1px #DFDFDF;margin-bottom:5px;}
+    .el-icon-document{font-size:12px;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;height: 23px;word-break: break-all;
+      &:before{display: none;}
+    }
+    .ele-upload-list__item-content-action{
+      position: absolute;right:-4px;top:-4px;background: #D90505;color:#FFF;border-radius: 50%;width:20px;height: 20px;line-height: 24px;text-align: center;
+      .el-link{margin-right: 0;}
+      .el-icon-close{display: block;position: relative;color:#FFF;top:-3px;right: 0;line-height: 18px;padding: 0;}
+    }
+  }
+}
+
+
+
+/*pop*/
+.mobileApp ~ .el-dialog__wrapper .dialog-style{
+  border-radius: 20px;box-shadow: 0 0 16px rgb(0 0 0 / 6%);
+  .el-dialog__body{border-radius: 14px;}
+  .dialog-footer{
+    display: flex;
+    .button-sty{
+      flex:1;height: 40px;border-radius: 14px;
+      &.el-button--primary.is-plain{border-color: #2a6494;}
+    }
+  }
+}
+.pop-tipsBox{
+  display:none;position: relative;
+  &:before{
+    content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.4);z-index:998;
+  }
+  > div{
+    position: fixed;top: 24%;left: 32px;right: 32px;box-shadow: 0 0 14px rgb(0 0 0 / 16%);border-radius: 18px;padding: 68px 16px 18px;text-align: center;z-index: 999;/*background:url(~@/resources/images/tips-bg.png) no-repeat center top #FFF*/;background-size: 100% auto;border: solid 2px #FFF;background-color:#FFF;
+    .icon{background:url(~@base/core-resources/images/icon-tips.png) no-repeat center;position: absolute;top: -19px;width: 68px;height: 68px;border-radius: 50%;background-size: cover;border: solid 2px #FFF;left: 50%;margin-left: -34px;}
+    .head{margin-top:20px;}
+    .cont{
+      padding:0 0 18px;
+      .name{font-weight: 600;font-size: 18px;margin-bottom:24px;}
+      .txt{max-height: 100px;overflow: auto;word-break: break-word;}
+      .txt2{max-height:200px;overflow: auto;word-break: break-word;}
+      .el-link{font-size:12px;border-bottom: solid 1px;
+        > i{font-size: 12px;margin-right: 4px;}
+      }
+      .form-box{border: solid 1px #dcdcdc;padding: 0 12px;border-radius: 10px;margin-top: -8px;
+        .line{border:solid 1px #e8e8e8}
+      }
+    }
+    .btns{
+      display:flex;
+      .btn{flex:1;height:40px;border-radius: 12px;
+        &.el-button--primary.is-plain{border-color:$baseColor}
+      }
+    }
+  }
+  &.error{
+    > div{ /*background-image: url(~@/resources/images/error-bg.png);*/
+      .icon{background-image: url(~@base/core-resources/images/icon-error.png);border-color:#FFF}
+    }
+  }
+}
+
+.h5-process-info{
+  font-size: 12px;    padding: 12px 16px;background: #FFF;margin: 10px 12px;border-radius: 15px;
+  .item{
+    display:-moz-box;display:-webkit-box; display:box;line-height: 1.4;padding:6px 0 8px;position: relative;
+    &:after{content: "";width: 2px;position: absolute;background:#E9E9E9;top:22px;bottom:-10px;left:76px;z-index: 2;}
+    &:last-child:after{display: none;}
+    .time{color:#666;width:82px;position: absolute;top: 37px;left: -14px;right: 0;text-align: center;zoom: 0.9;}
+    .status{width:50px;line-height:16px;padding:2px 0;height: 100%;text-align: center;border-radius: 22px;vertical-align: middle;background: #fff;border: 1px solid #dcdfe6;color: #606266;
+      &.green{border:solid 1px #ACEDC9;background: #E7FAF0;color:#67C23A;}
+      &.red{border:solid 1px #FFCACA;background:#FFEDED;color:#F56C6C}
+      &.gray{color: #d6d6d6;background: #f4f4f5;border-color: #d3d4d6;}
+      &.orgn{color: #e6a23c;background: #fdf6ec;border-color: #f5dab1;}
+      &.blue{background-color: transparentize($baseColor, 0.94);color:$baseColor;border:solid 1px transparentize($baseColor, 0.72);}
+    }
+    .circle{background: $baseColor;width: 14px;height: 14px;border-radius: 50%;border:solid  3px #FFF;display: inline-block;margin:3px 20px;z-index: 9;}
+    .info{
+      width:calc(100% - 100px);
+      p{
+        margin:2px 0;display: block;
+        > span{
+          display: inline-block;min-width:50%;
+          &.name{font-weight: 600;width: 100%;margin-bottom: 3px;}
+        }
+        &.t{display: flex;
+          .t1{min-width: 65px;margin-right: 0;flex:none}
+          span{flex:1;white-space: pre-line;}
+        }
+      }
+    }
+  }
+}
+
+.h5-box + .h5-box{
+  height:inherit;
+  &:before{
+    content:"";position: fixed;top:0;bottom: 0;left:0;right:0;background-color: rgba(0,0,0,0.18);
+  }
+  > div{
+    position: fixed;z-index: 3;background: #F0F1F1;left: 0;top:0;right: 0;border-radius: 16px 16px 0 0;/*height:100%;*/bottom:0;
+    &.pop-box{top:0;height: 100vh;}
+  }
+  .pop-box{
+    background:transparent;
+    &:before{
+      content:"";position: fixed;top:0;bottom: 0;left:0;right:0;background-color: #c5c6c6;
+    }
+    > div{
+      margin-top:0;height:100vh;z-index:3;background:#F0F1F1;position: relative;border-radius: 16px 16px 0 0;
+      &.el-loading-mask{position: absolute;}
+      .flex{
+        height:calc(100vh - 92px)
+      }
+     .search-H5box + .flex{
+       height:calc(100vh - 138px) !important
+     }
+    }
+  }
+
+}
+
+
+
+