easy3wui 1.6.1 → 2.0.1

package/README.md

@@ -1,8 +1,6 @@
 # easy3wUI
 easy3w UI 组件
-
 # 编译
 npm run compile
-
 # 发布
 npm publish

package/assets/btn.css

@@ -1,20 +1,14 @@
-/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 .e3wFootBtn {
   margin: 0px 8px;
 }
-.e3wFormBtn {
-  margin-right: 8px;
-}
 .positionDiv {
   position: absolute;
-  right: 12px;
-  top: 10px;
+  right: 32px;
+  top: 16px;
 }
 .e3wPositionA {
   font-size: 15px;
+  color: #5468b2;
   font-weight: 900;
   margin-left: 15px;
 }

package/assets/card.css

@@ -25,14 +25,6 @@
 .e3wCardForm .formes {
   float: left;
 }
-.e3wCardForm :global .ant-card-head {
-  padding: 0 !important;
-  margin: 0 12px;
-  border: none;
-}
-.e3wCardForm :global .ant-card-body {
-  padding: 0 !important;
-}
 s {
   display: inline-block;
   width: 3px;

package/assets/flow.css

@@ -3,218 +3,15 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-/* #5867ad */
 /*流程图部分*/
 .flowmain {
   margin: auto;
   width: 100%;
   background: #fff;
 }
-.flowtop {
-  width: 100%;
-}
-.flowtop .floatcenter {
-  width: 90%;
-  margin: 0 auto;
-  /* 
-    公式：  线宽 (100% / n -22px) / 2
-    思路： 
-      虚拟： 将每个节点 + 左侧线宽 + 右侧线宽看成一个块，所有块组合成整体top   虚拟的每个节点块长度都相等   除了首尾节点 其它节点的宽为： 100% / n
-      实际： 
-        第一个节点： 左侧填充一个线宽 + 节点 + 右侧两个线    (100% / n -22px) / 2 * 3 + 22px    节点 + 3个线宽
-        最后一个节点： 节点 + 右侧填充一个线宽                 (100% / n -22px) / 2 + 22px      节点 + 1个线宽
-        其它节点： 节点 + 右侧两个线                         (100% / n -22px) / 2 * 2 + 22px    节点 + 2个线宽
-      最终确保： 节点 + 填充 + 线 = top宽
-      每个节点都有属于不与其它节点公用的两个线宽的长度
-      构图： -o--o--o-
-    流程节点：
-      节点： 22px
-      线宽： (100% / n -22px) / 2
-    */
-}
-.flowtop .floatcenter .renderTopTemp2:first-child {
-  width: calc((100% / 2 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 2 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp2 {
-  width: calc(100% / 2);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp2 .flowline2 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp2:last-child {
-  width: calc((100% / 2 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 2 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp3:first-child {
-  width: calc((100% / 3 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 3 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp3 {
-  width: calc(100% / 3);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp3 .flowline3 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp3:last-child {
-  width: calc((100% / 3 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 3 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp4:first-child {
-  width: calc((100% / 4 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 4 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp4 {
-  width: calc(100% / 4);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp4 .flowline4 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp4:last-child {
-  width: calc((100% / 4 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 4 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp5:first-child {
-  width: calc((100% / 5 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 5 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp5 {
-  width: calc(100% / 5);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp5 .flowline5 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp5:last-child {
-  width: calc((100% / 5 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 5 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp6:first-child {
-  width: calc((100% / 6 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 6 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp6 {
-  width: calc(100% / 6);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp6 .flowline6 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp6:last-child {
-  width: calc((100% / 6 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 6 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp7:first-child {
-  width: calc((100% / 7 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 7 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp7 {
-  width: calc(100% / 7);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp7 .flowline7 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp7:last-child {
-  width: calc((100% / 7 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 7 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp8:first-child {
-  width: calc((100% / 8 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 8 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp8 {
-  width: calc(100% / 8);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp8 .flowline8 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp8:last-child {
-  width: calc((100% / 8 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 8 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp9:first-child {
-  width: calc((100% / 9 - 22px) / 2 * 3 + 22px);
-  padding-left: calc((100% / 9 - 22px) / 2);
-}
-.flowtop .floatcenter .renderTopTemp9 {
-  width: calc(100% / 9);
-  float: left;
-}
-.flowtop .floatcenter .renderTopTemp9 .flowline9 {
-  float: left;
-  margin-top: 15px;
-  height: 4px;
-  width: calc(100% - 22px);
-}
-.flowtop .floatcenter .renderTopTemp9:last-child {
-  width: calc((100% / 9 - 22px) / 2 + 22px);
-  padding-right: calc((100% / 9 - 22px) / 2);
-}
-.flowmid {
-  width: 100%;
-  height: 34px;
-}
-.flowmid .floatcenter {
-  width: 90%;
-  margin: 0 auto;
-}
-.flowmid .floatcenter div.flowtext2 {
-  width: calc(100% / 2);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext3 {
-  width: calc(100% / 3);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext4 {
-  width: calc(100% / 4);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext5 {
-  width: calc(100% / 5);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext6 {
-  width: calc(100% / 6);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext7 {
-  width: calc(100% / 7);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext8 {
-  width: calc(100% / 8);
-  float: left;
-}
-.flowmid .floatcenter div.flowtext9 {
-  width: calc(100% / 9);
-  float: left;
+.floatcenter {
+  position: relative;
+  left: 67%;
 }
 .floatcenter2_1 {
   position: absolute;
@@ -506,63 +303,147 @@
   color: #fff;
   /*浮动区块居中，必须配合.float-center使用*/
   position: relative;
+  left: -50%;
 }
-/* 主节点活动节点样式*/
-.flowmain .flowcircle-active-haierblue {
+/*renderTop有几个大节点时（3-9）*/
+.flowmain .flowline2 {
   float: left;
-  margin-top: 5px;
-  width: 22px;
-  height: 22px;
-  line-height: 22px;
-  text-align: center;
-  border-radius: 50%;
-  color: #fff;
+  margin-top: 15px;
+  width: 30.8%;
+  height: 4px;
   /*浮动区块居中，必须配合.float-center使用*/
   position: relative;
+  left: -50%;
 }
-.flowmain .flowcircle-active-haierblue::before {
-  border-bottom: 2px solid #5867ad;
-  content: '';
-  height: 2px;
-  width: 100%;
-  position: absolute;
-  bottom: -4px;
-  right: 0;
+.flowmain .flowline3 {
+  float: left;
+  margin-top: 15px;
+  width: 30.6%;
+  height: 4px;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -50%;
 }
-.flowmain .flowcircle-active-haierorange {
+.flowmain .flowline4 {
   float: left;
-  margin-top: 5px;
-  width: 22px;
-  height: 22px;
-  line-height: 22px;
-  text-align: center;
-  border-radius: 50%;
-  color: #fff;
+  margin-top: 15px;
+  width: 19.8%;
+  height: 4px;
   /*浮动区块居中，必须配合.float-center使用*/
   position: relative;
+  left: -50%;
 }
-.flowmain .flowcircle-active-haierorange::before {
-  border-bottom: 2px solid #ad7c59;
-  content: '';
-  height: 2px;
-  width: 100%;
-  position: absolute;
-  bottom: -4px;
-  right: 0;
+.flowmain .flowline5 {
+  float: left;
+  margin-top: 15px;
+  width: 14.4%;
+  height: 4px;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -50%;
+}
+.flowmain .flowline6 {
+  float: left;
+  margin-top: 15px;
+  width: 11.2%;
+  height: 4px;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -50%;
+}
+.flowmain .flowline7 {
+  float: left;
+  margin-top: 15px;
+  width: 9.03%;
+  height: 4px;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -50%;
+}
+.flowmain .flowline8 {
+  float: left;
+  margin-top: 15px;
+  width: 7.4%;
+  height: 4px;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -50%;
+}
+.flowmain .flowline9 {
+  float: left;
+  margin-top: 15px;
+  width: 6.348%;
+  height: 4px;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -50%;
+}
+.flowmid {
+  height: 34px;
+}
+/*renderMid下的有几个flowtext（3-9）*/
+.flowmid .flowtext2 {
+  width: 32.4%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -65.5%;
+}
+.flowmid .flowtext3 {
+  width: 32.4%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -65.5%;
+}
+.flowmid .flowtext4 {
+  width: 21.6%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -60%;
+}
+.flowmid .flowtext5 {
+  width: 16.2%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -57.5%;
+}
+.flowmid .flowtext6 {
+  width: 13.1%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -56%;
+}
+.flowmid .flowtext7 {
+  width: 10.8%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -54.8%;
+}
+.flowmid .flowtext8 {
+  width: 9.13%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -54%;
+}
+.flowmid .flowtext9 {
+  width: 8%;
+  float: left;
+  /*浮动区块居中，必须配合.float-center使用*/
+  position: relative;
+  left: -53%;
 }
-/*renderTop有几个大节点时（3-9）*/
 .flowmid .floawt1 {
   text-align: center;
   height: 24px;
   line-height: 32px;
   font-size: 14px;
 }
-.flowmid .floawt1detail {
-  text-align: center;
-  height: 24px;
-  line-height: 18px;
-  font-size: 14px;
-}
 .flowmid .floawt2 {
   text-align: center;
   height: 20px;
@@ -588,7 +469,7 @@
 .flowbottom .flowdoc {
   display: inline-block;
   margin: 0 2px;
-  height: 30px;
+  height: 35px;
   text-align: center;
   /*浮动区块居中，必须配合.float-center使用*/
   position: relative;
@@ -816,14 +697,12 @@
 }
 .flowmain .borderblue {
   border: 1px solid #5867ad;
-  border-radius: 4px;
 }
 .flowmain .borderorange {
   border: 1px solid #ad7c59;
 }
 .flowmain .borderblueDashed {
   border: 1px dashed #5867ad;
-  border-radius: 4px;
 }
 .flowmain .borderorangeDashed {
   border: 1px dashed #ad7c59;
@@ -836,22 +715,20 @@
 }
 .flowmain .flowbottomtextblue {
   text-align: center;
-  line-height: 30px;
+  line-height: 35px;
   color: #5867ad;
 }
 .flowmain .flowdoc img {
   display: inline-block;
   position: absolute;
-  right: -1px;
-  bottom: -1px;
+  right: 0;
+  bottom: 0;
   z-index: 1;
   width: 21px;
-  border-bottom-right-radius: 4px;
 }
 .flowmain .flowbottomtextorange {
   text-align: center;
-  line-height: 30px;
-  border-radius: 4px;
+  line-height: 35px;
 }
 .flowmain .flowbottomtextorange a {
   color: #ad7c59;
@@ -859,9 +736,8 @@
 }
 .flowmain .flowbottomtextgrey {
   text-align: center;
-  line-height: 30px;
+  line-height: 35px;
   color: #999999;
-  border-radius: 4px;
 }
 .flowmain .flowbottomtextgrey a {
   text-align: center;
@@ -982,33 +858,3 @@
   margin-left: -75px;
 }
 /*一个节点*/
-/* 流程图状态颜色 */
-.common {
-  height: 12px;
-  width: 12px;
-}
-.planDate-style {
-  color: #000000;
-  font-weight: normal;
-  margin-left: 12px;
-}
-.planDate-style .wait-style sup {
-  height: 12px;
-  width: 12px;
-  background-color: #bfbfbf;
-}
-.planDate-style .delay-style sup {
-  height: 12px;
-  width: 12px;
-  background-color: #fa8c16;
-}
-.planDate-style .normal-style sup {
-  height: 12px;
-  width: 12px;
-  background-color: #52c41a;
-}
-.planDate-style .normal-style :global .ant-scroll-number,
-.planDate-style .delay-style :global .ant-scroll-number,
-.planDate-style .wait-style :global .ant-scroll-number {
-  transform: translate(2px, -2px);
-}

package/assets/formPage.css

@@ -4,94 +4,12 @@
 .ant-upload-list-item .ant-upload-list-item-info {
   width: auto;
 }
+.ant-upload-list-item .ant-upload-list-item-name {
+  padding-right: 24px;
+}
 .ant-upload-list-item .anticon-cross {
   right: -2px;
 }
-.e3wFormPageNoBorder {
-  margin: 12px;
-}
-.e3wFormPageNoBorder > div > .ant-row {
-  padding: 3px;
-}
-.e3wFormPageNoBorder > div > .ant-row .ant-btn {
-  height: 24px;
-  color: #5468b2;
-}
-.e3wFormPageNoBorder .hasAfterBtns :global .ant-calendar-picker {
-  min-width: 100% !important;
-}
-.e3wFormPage {
-  border-top: 1px solid #e8e8e8;
-  border-left: 1px solid #e8e8e8;
-  border-right: 1px solid #e8e8e8;
-  margin: 12px;
-}
-.e3wFormPage > div > .ant-row {
-  padding: 3px;
-  border-bottom: 1px solid #e8e8e8;
-}
-.e3wFormPage > div > .ant-row .ant-btn {
-  height: 24px;
-  color: #5468b2;
-}
-.e3wFormPage .hasAfterBtns :global .ant-calendar-picker {
-  min-width: 100% !important;
-}
 .e3wFormItem .ant-form-item {
   margin-bottom: 8px;
 }
-.formContent:not(:first-child) {
-  padding-left: 3px;
-}
-.formContent :global .ant-input-group-wrapper {
-  vertical-align: middle;
-}
-.formContent :global .ant-form-item-label {
-  line-height: 24px;
-}
-.formContent :global .ant-form-item-control {
-  line-height: 24px;
-}
-.formContent :global .ant-form-item-required::before {
-  margin-left: -10px;
-}
-.formContent :global .ant-form-item-label {
-  padding-left: 12px;
-}
-.formContentAlone:not(:first-child) {
-  padding-left: 3px;
-}
-.formContentAlone:not(:first-child) {
-  padding-left: 3px;
-}
-.formContentAlone :global .ant-input-group-wrapper {
-  vertical-align: middle;
-}
-.formContentAlone :global .ant-form-item-label {
-  line-height: 24px;
-}
-.formContentAlone :global .ant-form-item-control {
-  line-height: 24px;
-}
-.formContentAlone :global .ant-form-item-required::before {
-  margin-left: -10px;
-}
-.formContentAlone :global .ant-form-item-label {
-  padding-left: 12px;
-}
-.formContentAlone :global .ant-input-number {
-  border-radius: 4px 0 0 4px;
-}
-.formContentAlone :global .ant-form-item-required::before {
-  margin-left: -10px;
-}
-.formContentAlone :global .ant-form-item-label {
-  padding-left: 12px;
-}
-.countContent:after {
-  content: attr(data-count);
-  color: rgba(0, 0, 0, 0.45);
-  pointer-events: none;
-  float: right;
-  white-space: nowrap;
-}