workflow.less 4.48 KB
Newer Older
1 2 3 4 5
// 流程首页
.flowContainer {
  position: relative;
  display: flex;
  width: 100%;
6 7
  height: 100%;

8 9 10 11
  .treeContainer {
    position: relative;
    left: 0;
    top: 0;
12
    height: 100%;
13 14
    width: 250px;
    margin-right: 10px;
15

16 17 18
    transition-property: width, left;
    transition-duration: 0.5s;
    white-space: nowrap;
19 20 21 22 23 24

    .ant-card-body {
      height: 100%;
      padding: 12px 24px 24px 10px;
    }

25 26 27 28 29 30
    .processTitle {
      font-size: 15px;
      font-weight: bold;
      color: #333e51;
      padding-left: 14px;
    }
31

32
    .treeContent {
33
      height: calc(100% - 50px);
34 35
      overflow-y: scroll;
    }
36

37 38 39 40 41 42
    .treeHeadIcon {
      color: #1890ff;
      font-size: 25px;
      vertical-align: middle;
      margin-left: 130px;
    }
43

44 45 46
    .ant-tree-treenode {
      width: 100%;
    }
47

48 49 50
    .ant-tree-title {
      width: 100%;
    }
51

52 53 54 55 56
    .nodeTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
57
      margin-bottom: 5px;
58

59 60
      .nodeTip {
        display: none;
61

62 63 64 65 66 67 68
        .fs {
          font-size: 18px;
          margin-left: 5px;
          color: #1890ff;
        }
      }
    }
69

70 71 72 73 74 75 76
    .nodeTitle:hover {
      .nodeTip {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
77

78 79 80 81 82 83 84 85 86 87 88
    .switcher {
      display: block;
      position: absolute;
      font-size: 18px;
      color: #1890ff !important;
      top: 50%;
      right: 2px;
      transform: translate(0%, -50%);
      z-index: 1;
    }
  }
89

90 91 92 93
  .treeContainerHide {
    left: 0px;
    top: 0;
    width: 26px;
94 95


96 97 98 99 100 101
  }

  // 流程图
  .flowChartContainer {
    position: relative;
    width: 100%;
102
    height: calc(100%);
103
    background-color: #fff;
104 105

    .chartBox {
106
      position: relative;
107
      // display: flex;
108
      height: calc(100% - 52px);
109

110 111 112 113 114
      .flowName {
        position: absolute;

        top: 10px;
        left: 50%;
115
        transform: translateX(-200%);
116 117 118 119 120 121
        font-size: 24px;
        font-weight: 700;
        color: #1585FF;
        z-index: 9;
      }

122 123 124 125
      .myOverviewDiv {
        position: absolute;
        height: 150px;
        width: 300px;
126
        left: 0;
127 128 129 130 131
        bottom: 0;
        background-color: #ccc;
        z-index: 9;

      }
132 133
    }

134
    .control {
135
      display: flex;
136
      justify-content: space-between;
137
      height: 52px;
138 139
      align-items: center;
      padding: 0 10px;
140

141 142
      .nodeList {
        display: flex;
143 144
        align-items: center;

145 146 147 148 149 150 151 152 153 154 155
        .myPaletteSubprocess {
          height: 52px;
          width: 130px;

          canvas {
            height: 100%;
            width: 1000px;
          }

        }

156
        .myPaletteDiv {
邓超's avatar
邓超 committed
157
          // margin-right: 20px;
158
          height: 52px;
159 160 161 162 163 164 165
          width: 380px;

          canvas {
            height: 100%;
            width: 1000px;
          }
        }
166

167
        .lineBox {
168
          height: 52px;
169 170
          width: 1px;
          background-color: #ccc;
171
          // margin-right: 10px;
172 173
        }

174 175 176 177
        .nodeBox {
          display: flex;
          align-items: center;
          justify-content: center;
178
          height: 52px;
179 180

          padding: 0 10px;
181 182 183 184 185 186 187 188 189 190 191 192 193
          border-radius: 10px;
          background-color: #D9E0FF;
          margin-right: 10px;

          .nodeImg {
            img {
              height: 35px;
            }

            margin-right: 5px;
          }
        }
      }
194

195
      .buttonList {
196
        display: flex;
197 198 199 200 201 202 203 204 205
        justify-content: flex-start;
        margin: 15px 0 15px 0;

        .ant-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
        }
206
      }
207

208
    }
209

210

211 212 213 214
    canvas {
      border: 0px;
      outline: none;
    }
215

216
    .myDiagramDiv {
217
      width: calc(100% - 360px);
218
      // flex: 1;
219
      height: 100%;
220 221 222
    }
  }
}
223

224 225 226
// 角色用户列表
.pageContent {
  display: flex;
227

228 229 230
  .roleContent {
    width: 50%;
    margin-right: 10px;
231

232 233 234 235
    .treeContent {
      width: 100%;
      height: 370px;
      margin: 10px 0 10px 0;
皮倩雯's avatar
皮倩雯 committed
236
      padding: 8px 20px 20px 20px;
237 238
      box-sizing: border-box;
      border: 1px solid #ccc;
239

240 241 242 243
      .ant-tree-list-holder {
        height: 285px;
      }
    }
244

皮倩雯's avatar
皮倩雯 committed
245 246 247 248
    .footer {
      position: relative;
      z-index: 999;
    }
249
  }
250

251 252
  .userContent {
    width: 50%;
253

254 255 256 257 258 259 260
    .userCheckBox {
      margin-top: 41px;
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      height: 370px;
      border: 1px solid #ccc;
261

262 263 264 265 266 267 268
      .checkContent {
        height: 285px;
        width: 100%;
        overflow-y: scroll;
      }
    }
  }
269
}