cnhis-design-vue 3.1.42-beta.0 → 3.1.42-release.0

package/es/components/steps-wheel/index.d.ts

@@ -57,7 +57,6 @@ declare const StepsWheel: SFCWithInstall<import("vue").DefineComponent<{
             default: string;
         };
     }>> & {}>>;
-    cssVars: import("vue").ComputedRef<import("vue").CSSProperties>;
     nodeRowCount: import("vue").ComputedRef<number>;
     lastNodeRenderShow: import("vue").ComputedRef<boolean>;
     noDataMsg: import("vue").Ref<string>;

package/es/components/steps-wheel/src/StepsWheel.vue.d.ts

@@ -56,7 +56,6 @@ declare const _default: import("vue").DefineComponent<{
             default: string;
         };
     }>> & {}>>;
-    cssVars: import("vue").ComputedRef<import("vue").CSSProperties>;
     nodeRowCount: import("vue").ComputedRef<number>;
     lastNodeRenderShow: import("vue").ComputedRef<boolean>;
     noDataMsg: import("vue").Ref<string>;

package/es/components/steps-wheel/src/StepsWheel.vue.js

@@ -1 +1 @@
-import{defineComponent as e,computed as t,toRefs as l,ref as n,watch as s,openBlock as o,createElementBlock as i,normalizeStyle as p,unref as r,normalizeClass as a,createElementVNode as d,Fragment as u,renderList as c,createCommentVNode as m,withDirectives as f,renderSlot as h,toDisplayString as v,vShow as g,createBlock as I,withCtx as x,createVNode as y,createTextVNode as B}from"vue";import{NTooltip as w,NEmpty as T}from"naive-ui";import{useTheme as S}from"../../../shared/mixins/useTheme.js";import{defaultCssVars as _}from"./constants/index.js";import b from"../../../_virtual/plugin-vue_export-helper.js";const k={class:"stepBox"},C=["title"],$=d("ul",{class:"nodeTipContent"},[d("li",null,[d("p",null,[d("span",{style:{"margin-right":"10px"}},"(1)"),B(" 2022-07-30 14:15:12 ")]),d("p",null,"周老师"),d("p",null,"步骤条提示"),d("p",null,"咱这是测试案例,请使用插槽：#nodeTipBox 自定义")]),d("li",null,[d("p",null,[d("span",{style:{"margin-right":"10px"}},"(2)"),B(" 2022-07-30 14:15:12 ")]),d("p",null,"周老师"),d("p",null,"步骤条提示"),d("p",null,"咱这是个测试案例,请使用插槽：#nodeTipBox 自定义")])],-1),L=["title"],R=["title"],j=["title"],M={key:0,style:{height:"48px"}},N={key:1},D={key:1};var W=b(e({__name:"StepsWheel",props:{stepInfo:{type:Object,default:()=>({list:[],cols:6})},currentStep:{type:Number,default:1},toolTipShow:{type:Boolean,default:!0},lastNodeRender:{type:Boolean,default:!1},noDataMsg:{type:String,default:"暂无节点数据"},placement:{type:String,default:"center"}},setup(e){const B=e,b=S(_,"StepsWheel"),W=t((()=>Math.ceil(P.value.length/B.stepInfo.cols))),A=t((()=>B.lastNodeRender)),{noDataMsg:E}=l(B),O=n(null),F=t((()=>{var e;let t=72;if(null==(e=null==O?void 0:O.value)?void 0:e.length){let e=O.value[0],l=window.getComputedStyle?window.getComputedStyle(e):e.currentStyle;t=isNaN(parseInt(l["min-width"]))?72:parseInt(l["min-width"])}return`${20+B.stepInfo.cols*t}px`})),P=n([]),q=n([]),z=e=>{if(q.value.length){if(e.rowIndex===q.value.length)return!0;if(e.rowIndex<q.value.length)return q.value[e.rowIndex].some((e=>null==e?void 0:e.title))}return!1},G=e=>{const{list:t=[]}=B.stepInfo;return e.rowIndex%2==0&&"frist"==e.nodeType&&e.nodeIndex!==t.length},H=e=>{const{list:t=[]}=B.stepInfo;return e.rowIndex%2!=0&&"last"==e.nodeType&&e.nodeIndex!==t.length},J=(e,t)=>e.rowIndex%2==0?B.currentStep>=t+(B.stepInfo.cols-2*e.sort):B.currentStep>=t+2,K=(e,t)=>{let l=e.length,n=l%t==0?l/t:Math.floor(l/t+1),s=[];for(let l=0;l<n;l++){let n=e.slice(l*t,l*t+t);s.push(n)}return s},Q=e=>{const{cols:t}=B.stepInfo;let l=K(P.value,t),n=l[l.length-1].filter((e=>e));return W.value%2==0?e!=n[n.length-1].nodeIndex-(t-2*n[n.length-1].sort):e!=n[n.length-1].nodeIndex-1},U=e=>{const{cols:t}=B.stepInfo;let l=K(P.value,t),n=l[l.length-1].filter((e=>e));return W.value%2==0?A.value&&e==n[0].nodeIndex-(t-2*n[0].sort):A.value&&e==n[n.length-1].nodeIndex-1},V=(e,t)=>{const{cols:l}=B.stepInfo;let n=K(P.value,l),s=n[n.length-1].filter((e=>e));return W.value%2==0?"circle"===t?A.value&&e==s[0].nodeIndex-(l-2*s[0].sort)-l:A.value&&e==s[0].nodeIndex-(l-2*s[0].sort):"circle"===t?A.value&&e==s[s.length-1].nodeIndex-1-l:A.value&&e==s[s.length-1].nodeIndex-2};return s((()=>B.stepInfo),(e=>{var t;(null==(t=null==e?void 0:e.list)?void 0:t.length)&&((e,t)=>{let l=e.length+1,n=Math.ceil(e.length/t),s=!0,o=[];for(var i=0;i<n;i++)o[i]=new Array(t),o[i].fill(null);let p=0,r=0;for(let n=1;n<l;n++)o[p][r]=Object.assign(e[n-1],{nodeIndex:n,rowIndex:p+1}),s?n%t!=0?r++:(s=!s,p++):n%t!=0?r--:(s=!s,p++);let a=[];o.map((e=>{e.map(((e,t)=>e&&(e.sort=t))),e[0]&&(e[0].nodeType="frist"),e[e.length-1]&&(e[e.length-1].nodeType="last"),a=[...a,...e]})),P.value=a,q.value=o})(e.list,e.cols)}),{immediate:!0,deep:!0}),(t,l)=>(o(),i("div",{class:"step-wheel-box",style:p({minWidth:r(F),...r(b)})},[P.value.length?(o(),i("div",{key:0,class:a(["stepOut",{placementLeft:"left"===e.placement,placementRight:"right"===e.placement}])},[d("ul",k,[(o(!0),i(u,null,c(P.value,((l,n)=>(o(),i("li",{ref_for:!0,ref_key:"stepItemRef",ref:O,key:(null==l?void 0:l.stepId)||n,class:a(["stepItem",{[`stepItem_${n+1}`]:!0,[`${null==l?void 0:l.stepId}`]:!!(null==l?void 0:l.stepId)}])},[l?(o(),i(u,{key:0},[m(" 步骤头部信息 "),f(d("div",{class:a(["stepTopBox",{finished:U(n),stepTopBox_right:"right"===e.placement,stepTopBox_left:"left"===e.placement}])},[h(t.$slots,"stepTopBox",{stepItem:l},(()=>[d("span",{title:l.title},v(l.title),9,C)]))],2),[[g,l.title]]),m(" 步骤条的节点，此处为圆圈 "),e.toolTipShow?(o(),I(r(w),{key:0,placement:"top","show-arrow":!0,trigger:"hover",style:p({opacity:"0.88"})},{trigger:x((()=>[d("div",{class:a(["icon",{active:e.currentStep>=l.nodeIndex,finished:U(n)}])},null,2)])),default:x((()=>[h(t.$slots,"nodeTipBox",{stepItem:l,stepId:l.stepId},(()=>[$]))])),_:2},1032,["style"])):(o(),i("div",{key:1,class:a(["icon",{active:e.currentStep>=l.nodeIndex,finished:U(n)}])},null,2)),m(" 步骤条连接线，动态显示  "),"last"!==l.nodeType?f((o(),i("div",{key:2,class:a(["line",{lineActive:J(l,n),finished:V(n)}])},null,2)),[[g,Q(n)]]):m("v-if",!0),m(" 步骤条弯曲连线，动态渲染 "),G(l)||H(l)?(o(),i("div",{key:3,class:a({lineCircleActive:e.currentStep>l.nodeIndex,lineCircleFinished:V(n,"circle"),lineCircleRight:H(l),lineCircleLeft:G(l),lineCirclePlacementRight:H(l)&&"right"===e.placement,lineCirclePlacementLeft:G(l)&&"left"===e.placement})},null,2)):m("v-if",!0),m(" 步骤底部信息 "),d("div",{class:a(["stepBottomBox",{stepBottomBox_right:"right"===e.placement,stepBottomBox_left:"left"===e.placement}])},[h(t.$slots,"stepBottomBox",{stepItem:l},(()=>[m(" 步骤名称  "),f(d("p",{class:a(["stepLabel",{labelFinsh:U(n),stepLabel_right:"right"===e.placement,stepLabel_left:"left"===e.placement}]),title:l.label},v(l.label),11,L),[[g,l.label]]),d("div",{class:a({stepBottomCustomBox:!0,alignItemsEnd:"left"===e.placement,alignItemsStart:"right"===e.placement})},[h(t.$slots,"stepBottomCustomBox",{stepItem:l},(()=>[d("div",{class:a({stepBottomDefaultBox:!0,alignItemsEnd:"left"===e.placement,alignItemsStart:"right"===e.placement}),style:{width:"100%",display:"flex",flexDirection:"column"}},[f(d("p",{class:"stepExtra",title:l.person},v(l.person),9,R),[[g,l.person]]),m(" 步骤时间  "),f(d("p",{class:"statusTime",title:l.statusTime},v(l.statusTime),9,j),[[g,l.statusTime]])],2)]))],2)])),z(l)?(o(),i("div",M)):m("v-if",!0)],2)],64)):(o(),i("div",N,[m("null元素占位")]))],2)))),128))])],2)):(o(),i("div",D,[y(r(T),{description:r(E)},null,8,["description"])]))],4))}}),[["__file","StepsWheel.vue"]]);export{W as default};
+import{defineComponent as e,computed as t,toRefs as l,ref as n,watch as s,openBlock as o,createElementBlock as i,normalizeStyle as p,unref as a,normalizeClass as r,createElementVNode as d,Fragment as u,renderList as c,createCommentVNode as m,withDirectives as f,renderSlot as h,toDisplayString as v,vShow as g,createBlock as I,withCtx as x,createVNode as y,createTextVNode as B}from"vue";import{NTooltip as w,NEmpty as T}from"naive-ui";import S from"../../../_virtual/plugin-vue_export-helper.js";const _={class:"stepBox"},b=["title"],k=d("ul",{class:"nodeTipContent"},[d("li",null,[d("p",null,[d("span",{style:{"margin-right":"10px"}},"(1)"),B(" 2022-07-30 14:15:12 ")]),d("p",null,"周老师"),d("p",null,"步骤条提示"),d("p",null,"咱这是测试案例,请使用插槽：#nodeTipBox 自定义")]),d("li",null,[d("p",null,[d("span",{style:{"margin-right":"10px"}},"(2)"),B(" 2022-07-30 14:15:12 ")]),d("p",null,"周老师"),d("p",null,"步骤条提示"),d("p",null,"咱这是个测试案例,请使用插槽：#nodeTipBox 自定义")])],-1),C=["title"],$=["title"],L=["title"],R={key:0,style:{height:"48px"}},M={key:1},N={key:1};var D=S(e({__name:"StepsWheel",props:{stepInfo:{type:Object,default:()=>({list:[],cols:6})},currentStep:{type:Number,default:1},toolTipShow:{type:Boolean,default:!0},lastNodeRender:{type:Boolean,default:!1},noDataMsg:{type:String,default:"暂无节点数据"},placement:{type:String,default:"center"}},setup(e){const B=e,S=t((()=>Math.ceil(O.value.length/B.stepInfo.cols))),D=t((()=>B.lastNodeRender)),{noDataMsg:j}=l(B),A=n(null),E=t((()=>{var e;let t=72;if(null==(e=null==A?void 0:A.value)?void 0:e.length){let e=A.value[0],l=window.getComputedStyle?window.getComputedStyle(e):e.currentStyle;t=isNaN(parseInt(l["min-width"]))?72:parseInt(l["min-width"])}return`${20+B.stepInfo.cols*t}px`})),O=n([]),W=n([]),F=e=>{if(W.value.length){if(e.rowIndex===W.value.length)return!0;if(e.rowIndex<W.value.length)return W.value[e.rowIndex].some((e=>null==e?void 0:e.title))}return!1},P=e=>{const{list:t=[]}=B.stepInfo;return e.rowIndex%2==0&&"frist"==e.nodeType&&e.nodeIndex!==t.length},q=e=>{const{list:t=[]}=B.stepInfo;return e.rowIndex%2!=0&&"last"==e.nodeType&&e.nodeIndex!==t.length},z=(e,t)=>e.rowIndex%2==0?B.currentStep>=t+(B.stepInfo.cols-2*e.sort):B.currentStep>=t+2,G=(e,t)=>{let l=e.length,n=l%t==0?l/t:Math.floor(l/t+1),s=[];for(let l=0;l<n;l++){let n=e.slice(l*t,l*t+t);s.push(n)}return s},H=e=>{const{cols:t}=B.stepInfo;let l=G(O.value,t),n=l[l.length-1].filter((e=>e));return S.value%2==0?e!=n[n.length-1].nodeIndex-(t-2*n[n.length-1].sort):e!=n[n.length-1].nodeIndex-1},J=e=>{const{cols:t}=B.stepInfo;let l=G(O.value,t),n=l[l.length-1].filter((e=>e));return S.value%2==0?D.value&&e==n[0].nodeIndex-(t-2*n[0].sort):D.value&&e==n[n.length-1].nodeIndex-1},K=(e,t)=>{const{cols:l}=B.stepInfo;let n=G(O.value,l),s=n[n.length-1].filter((e=>e));return S.value%2==0?"circle"===t?D.value&&e==s[0].nodeIndex-(l-2*s[0].sort)-l:D.value&&e==s[0].nodeIndex-(l-2*s[0].sort):"circle"===t?D.value&&e==s[s.length-1].nodeIndex-1-l:D.value&&e==s[s.length-1].nodeIndex-2};return s((()=>B.stepInfo),(e=>{var t;(null==(t=null==e?void 0:e.list)?void 0:t.length)&&((e,t)=>{let l=e.length+1,n=Math.ceil(e.length/t),s=!0,o=[];for(var i=0;i<n;i++)o[i]=new Array(t),o[i].fill(null);let p=0,a=0;for(let n=1;n<l;n++)o[p][a]=Object.assign(e[n-1],{nodeIndex:n,rowIndex:p+1}),s?n%t!=0?a++:(s=!s,p++):n%t!=0?a--:(s=!s,p++);let r=[];o.map((e=>{e.map(((e,t)=>e&&(e.sort=t))),e[0]&&(e[0].nodeType="frist"),e[e.length-1]&&(e[e.length-1].nodeType="last"),r=[...r,...e]})),O.value=r,W.value=o})(e.list,e.cols)}),{immediate:!0,deep:!0}),(t,l)=>(o(),i("div",{class:"step-wheel-box",style:p({minWidth:a(E)})},[O.value.length?(o(),i("div",{key:0,class:r(["stepOut",{placementLeft:"left"===e.placement,placementRight:"right"===e.placement}])},[d("ul",_,[(o(!0),i(u,null,c(O.value,((l,n)=>(o(),i("li",{ref_for:!0,ref_key:"stepItemRef",ref:A,key:(null==l?void 0:l.stepId)||n,class:r(["stepItem",{[`stepItem_${n+1}`]:!0,[`${null==l?void 0:l.stepId}`]:!!(null==l?void 0:l.stepId)}])},[l?(o(),i(u,{key:0},[m(" 步骤头部信息 "),f(d("div",{class:r(["stepTopBox",{finished:J(n),stepTopBox_right:"right"===e.placement,stepTopBox_left:"left"===e.placement}])},[h(t.$slots,"stepTopBox",{stepItem:l},(()=>[d("span",{title:l.title},v(l.title),9,b)]))],2),[[g,l.title]]),m(" 步骤条的节点，此处为圆圈 "),e.toolTipShow?(o(),I(a(w),{key:0,placement:"top","show-arrow":!0,trigger:"hover",style:p({opacity:"0.88"})},{trigger:x((()=>[d("div",{class:r(["icon",{active:e.currentStep>=l.nodeIndex,finished:J(n)}])},null,2)])),default:x((()=>[h(t.$slots,"nodeTipBox",{stepItem:l,stepId:l.stepId},(()=>[k]))])),_:2},1032,["style"])):(o(),i("div",{key:1,class:r(["icon",{active:e.currentStep>=l.nodeIndex,finished:J(n)}])},null,2)),m(" 步骤条连接线，动态显示  "),"last"!==l.nodeType?f((o(),i("div",{key:2,class:r(["line",{lineActive:z(l,n),finished:K(n)}])},null,2)),[[g,H(n)]]):m("v-if",!0),m(" 步骤条弯曲连线，动态渲染 "),P(l)||q(l)?(o(),i("div",{key:3,class:r({lineCircleActive:e.currentStep>l.nodeIndex,lineCircleFinished:K(n,"circle"),lineCircleRight:q(l),lineCircleLeft:P(l),lineCirclePlacementRight:q(l)&&"right"===e.placement,lineCirclePlacementLeft:P(l)&&"left"===e.placement})},null,2)):m("v-if",!0),m(" 步骤底部信息 "),d("div",{class:r(["stepBottomBox",{stepBottomBox_right:"right"===e.placement,stepBottomBox_left:"left"===e.placement}])},[h(t.$slots,"stepBottomBox",{stepItem:l},(()=>[m(" 步骤名称  "),f(d("p",{class:r(["stepLabel",{labelFinsh:J(n),stepLabel_right:"right"===e.placement,stepLabel_left:"left"===e.placement}]),title:l.label},v(l.label),11,C),[[g,l.label]]),d("div",{class:r({stepBottomCustomBox:!0,alignItemsEnd:"left"===e.placement,alignItemsStart:"right"===e.placement})},[h(t.$slots,"stepBottomCustomBox",{stepItem:l},(()=>[d("div",{class:r({stepBottomDefaultBox:!0,alignItemsEnd:"left"===e.placement,alignItemsStart:"right"===e.placement}),style:{width:"100%",display:"flex",flexDirection:"column"}},[f(d("p",{class:"stepExtra",title:l.person},v(l.person),9,$),[[g,l.person]]),m(" 步骤时间  "),f(d("p",{class:"statusTime",title:l.statusTime},v(l.statusTime),9,L),[[g,l.statusTime]])],2)]))],2)])),F(l)?(o(),i("div",R)):m("v-if",!0)],2)],64)):(o(),i("div",M,[m("null元素占位")]))],2)))),128))])],2)):(o(),i("div",N,[y(a(T),{description:a(j)},null,8,["description"])]))],4))}}),[["__file","StepsWheel.vue"]]);export{D as default};

package/es/components/steps-wheel/style/index.css

@@ -1 +1 @@
-.step-wheel-box{font-family:PingFangSC-Medium,PingFang SC;font-size:16px;font-weight:500;height:100%;overflow:hidden;width:100%}.step-wheel-box .stepOut{display:flex;justify-content:center}.step-wheel-box .stepOut .stepBox{display:flex;flex-wrap:wrap;list-style:none;width:100%}.step-wheel-box .stepOut .stepItem{font-family:SimSun;font-size:16px;min-width:73px;position:relative;text-align:center;top:48px;width:15%}.step-wheel-box .stepOut .stepItem .lineCircleRight{border-color:#fff;border-bottom:1px dashed rgba(3,2,2,.4);border-left:0 dashed rgba(3,2,2,.4)!important;border-radius:0 25px 25px 0;border-right:1px dashed rgba(3,2,2,.4);border-top:1px dashed rgba(3,2,2,.4);display:block;height:100%;left:55%;position:absolute;top:6px;width:30%}.step-wheel-box .stepOut .stepItem .lineCirclePlacementRight{width:100%}.step-wheel-box .stepOut .stepItem .lineCircleLeft{border-color:#fff;border-bottom:1px dashed rgba(3,2,2,.4);border-left:1px dashed rgba(3,2,2,.4);border-radius:25px 0 0 25px;border-right:0 dashed rgba(3,2,2,.4)!important;border-top:1px dashed rgba(3,2,2,.4);display:block;height:100%;left:15%;position:absolute;top:6px;width:30%}.step-wheel-box .stepOut .stepItem .lineCirclePlacementLeft{left:-55%;width:100%}.step-wheel-box .stepOut .stepItem .lineCircleActive{border-top:1px solid var(--c-color-primary)}.step-wheel-box .stepOut .stepItem .lineCircleFinished{border-top:1px solid var(--c-color-finish)}.step-wheel-box .stepOut .stepItem .icon{background:#969696;border-radius:50%;height:13px;margin:0 auto;position:relative;width:13px;z-index:888}.step-wheel-box .stepOut .stepItem .active{background-color:var(--c-color-primary)}.step-wheel-box .stepOut .stepItem .finished{background-color:var(--c-color-finish)!important;border-color:var(--c-color-finish)!important;color:#fff!important}.step-wheel-box .stepOut .stepItem .labelFinsh{color:var(--c-color-finish)!important}.step-wheel-box .stepOut .stepItem .line{border-bottom:1px dashed rgba(3,2,2,.4);left:55%;position:absolute;top:6px;width:90%;z-index:111}.step-wheel-box .stepOut .stepItem .lineActive{border-bottom:1px solid var(--c-color-primary)}.step-wheel-box .stepOut .stepItem .stepTopBox{background:rgba(110,153,255,.11);border-radius:4px;color:var(--c-color-primary);cursor:pointer;height:40px;left:50%;line-height:40px;max-width:70%;min-width:73px;overflow:hidden;padding:0 5px;position:absolute;text-overflow:ellipsis;top:-48px;transform:translateX(-50%);white-space:nowrap}.step-wheel-box .stepOut .stepItem .stepTopBox_right{transform:translateX(-10%)}.step-wheel-box .stepOut .stepItem .stepTopBox_left{transform:translateX(-90%)}.step-wheel-box .stepOut .stepItem .stepBottomBox{align-items:center;cursor:pointer;display:flex;flex-direction:column;min-width:73px;overflow:hidden;padding:8px 0;width:100%}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox{align-items:center;display:flex;flex-direction:column;height:calc(100% - 27px);width:100%}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox .stepBottomDefaultBox{align-items:center}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox .alignItemsEnd{align-items:flex-end;text-align:right}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox .alignItemsStart{align-items:flex-start;text-align:left}.step-wheel-box .stepOut .stepItem .stepBottomBox .alignItemsEnd{align-items:flex-end;text-align:right}.step-wheel-box .stepOut .stepItem .stepBottomBox .alignItemsStart{align-items:flex-start;text-align:left}.step-wheel-box .stepOut .stepItem .stepBottomBox_right{align-items:flex-start;left:45%;position:relative}.step-wheel-box .stepOut .stepItem .stepBottomBox_left{align-items:flex-end;left:-45%;position:relative}.step-wheel-box .stepOut .stepItem .stepLabel{color:#212121;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.step-wheel-box .stepOut .stepItem .stepLabel_right{text-align:left}.step-wheel-box .stepOut .stepItem .stepLabel_left{text-align:right}.step-wheel-box .stepOut .stepItem .stepExtra{border:1px solid #cacaca;border-radius:4px;display:inline-block;margin:0;max-width:90%;overflow:hidden;padding:0 4px;text-overflow:ellipsis;white-space:nowrap;width:auto}.step-wheel-box .stepOut .stepItem .statusTime{color:rgba(0,0,0,.6);font-size:14px;font-weight:400;margin:0;max-width:90%}.placementRight{left:-1%;position:relative}.placementLeft{left:10%;position:relative}.nodeTipContent{margin:0;max-height:200px;max-width:400px;overflow:auto;padding:0;text-align:center}.nodeTipContent li{list-style:none;margin-bottom:5px}.nodeTipContent li p{margin:0}
+.step-wheel-box{font-family:PingFangSC-Medium,PingFang SC;font-size:16px;font-weight:500;height:100%;overflow:hidden;width:100%}.step-wheel-box .stepOut{display:flex;justify-content:center}.step-wheel-box .stepOut .stepBox{display:flex;flex-wrap:wrap;list-style:none;width:100%}.step-wheel-box .stepOut .stepItem{font-family:SimSun;font-size:16px;min-width:73px;position:relative;text-align:center;top:48px;width:15%}.step-wheel-box .stepOut .stepItem .lineCircleRight{border-color:#fff;border-bottom:1px dashed rgba(3,2,2,.4);border-left:0 dashed rgba(3,2,2,.4)!important;border-radius:0 25px 25px 0;border-right:1px dashed rgba(3,2,2,.4);border-top:1px dashed rgba(3,2,2,.4);display:block;height:100%;left:55%;position:absolute;top:6px;width:30%}.step-wheel-box .stepOut .stepItem .lineCirclePlacementRight{width:100%}.step-wheel-box .stepOut .stepItem .lineCircleLeft{border-color:#fff;border-bottom:1px dashed rgba(3,2,2,.4);border-left:1px dashed rgba(3,2,2,.4);border-radius:25px 0 0 25px;border-right:0 dashed rgba(3,2,2,.4)!important;border-top:1px dashed rgba(3,2,2,.4);display:block;height:100%;left:15%;position:absolute;top:6px;width:30%}.step-wheel-box .stepOut .stepItem .lineCirclePlacementLeft{left:-55%;width:100%}.step-wheel-box .stepOut .stepItem .lineCircleActive{border:1px solid #2563f4}.step-wheel-box .stepOut .stepItem .lineCircleFinished{border:1px solid #5dc055}.step-wheel-box .stepOut .stepItem .icon{background:#969696;border-radius:50%;height:13px;margin:0 auto;position:relative;width:13px;z-index:888}.step-wheel-box .stepOut .stepItem .active{background-color:#2563f4}.step-wheel-box .stepOut .stepItem .finished{background-color:#5dc055!important;border-color:#5dc055!important;color:#fff!important}.step-wheel-box .stepOut .stepItem .labelFinsh{color:#5dc055!important}.step-wheel-box .stepOut .stepItem .line{border-bottom:1px dashed rgba(3,2,2,.4);left:55%;position:absolute;top:6px;width:90%;z-index:111}.step-wheel-box .stepOut .stepItem .lineActive{border-bottom:1px solid #2563f4}.step-wheel-box .stepOut .stepItem .stepTopBox{background:rgba(110,153,255,.11);border-radius:4px;color:#2563f4;cursor:pointer;height:40px;left:50%;line-height:40px;max-width:70%;min-width:73px;overflow:hidden;padding:0 5px;position:absolute;text-overflow:ellipsis;top:-48px;transform:translateX(-50%);white-space:nowrap}.step-wheel-box .stepOut .stepItem .stepTopBox_right{transform:translateX(-10%)}.step-wheel-box .stepOut .stepItem .stepTopBox_left{transform:translateX(-90%)}.step-wheel-box .stepOut .stepItem .stepBottomBox{align-items:center;cursor:pointer;display:flex;flex-direction:column;min-width:73px;overflow:hidden;padding:8px 0;width:100%}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox{align-items:center;display:flex;flex-direction:column;height:calc(100% - 27px);width:100%}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox .stepBottomDefaultBox{align-items:center}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox .alignItemsEnd{align-items:flex-end;text-align:right}.step-wheel-box .stepOut .stepItem .stepBottomBox .stepBottomCustomBox .alignItemsStart{align-items:flex-start;text-align:left}.step-wheel-box .stepOut .stepItem .stepBottomBox .alignItemsEnd{align-items:flex-end;text-align:right}.step-wheel-box .stepOut .stepItem .stepBottomBox .alignItemsStart{align-items:flex-start;text-align:left}.step-wheel-box .stepOut .stepItem .stepBottomBox_right{align-items:flex-start;left:45%;position:relative}.step-wheel-box .stepOut .stepItem .stepBottomBox_left{align-items:flex-end;left:-45%;position:relative}.step-wheel-box .stepOut .stepItem .stepLabel{color:#212121;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.step-wheel-box .stepOut .stepItem .stepLabel_right{text-align:left}.step-wheel-box .stepOut .stepItem .stepLabel_left{text-align:right}.step-wheel-box .stepOut .stepItem .stepExtra{border:1px solid #cacaca;border-radius:4px;display:inline-block;margin:0;max-width:90%;overflow:hidden;padding:0 4px;text-overflow:ellipsis;white-space:nowrap;width:auto}.step-wheel-box .stepOut .stepItem .statusTime{color:rgba(0,0,0,.6);font-size:14px;font-weight:400;margin:0;max-width:90%}.placementRight{left:-1%;position:relative}.placementLeft{left:10%;position:relative}.nodeTipContent{margin:0;max-height:200px;max-width:400px;overflow:auto;padding:0;text-align:center}.nodeTipContent li{list-style:none;margin-bottom:5px}.nodeTipContent li p{margin:0}