Skip to content

Commit ec1b3cf

Browse files
author
张晨曦
committed
开发中心和头部初步样式调整
1 parent a192655 commit ec1b3cf

File tree

21 files changed

+2594
-1316
lines changed

21 files changed

+2594
-1316
lines changed

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"svgo": "1.3.0",
6060
"vue": "2.6.12",
6161
"vue-i18n": "8.22.1",
62-
"vue-luban-menu": "^1.3.2",
62+
"vue-luban-menu": "^1.4.0",
6363
"vue-router": "3.4.8",
6464
"vuedraggable": "2.24.3",
6565
"vuescroll": "4.16.1",

‎web/src/apps/workflows/assets/styles/process.scss‎

Lines changed: 133 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -15,145 +15,145 @@
1515
*
1616
*/
1717

18-
@import '@/common/style/variables.scss';
19-
.page-process{
20-
height: 100%;
21-
width: 100%;
22-
@include bg-color($light-base-color, $dark-base-color);
23-
position: relative;
24-
.bread-crumb{
25-
margin: 5px;
26-
}
27-
.process-readonly-tip-card {
28-
@include font-color(#fff, #000);
29-
font-size: $font-size-small;
30-
position: absolute;
31-
font-weight: 700;
32-
z-index: 9999;
33-
top: 0;
34-
right: 1rem;
35-
background-color: $error-color;
36-
.tipClose {
37-
position: absolute;
38-
top: 5px;
39-
right: 5px;
40-
// color: #080808;
41-
@include font-color(#fff, #000);
42-
}
18+
@import "@/common/style/variables.scss";
19+
.page-process {
20+
height: 100%;
21+
width: 100%;
22+
@include bg-color($light-base-color, $dark-base-color);
23+
position: relative;
24+
.bread-crumb {
25+
margin: 5px;
26+
}
27+
.process-readonly-tip-card {
28+
@include font-color(#fff, #000);
29+
font-size: $font-size-small;
30+
position: absolute;
31+
font-weight: 700;
32+
z-index: 9999;
33+
top: 0;
34+
right: 1rem;
35+
background-color: $error-color;
36+
.tipClose {
37+
position: absolute;
38+
top: 5px;
39+
right: 5px;
40+
// color: #080808;
41+
@include font-color(#fff, #000);
4342
}
43+
}
4444
}
4545

4646
.process-tabs {
47-
position: $relative;
48-
height: calc(100%);
49-
overflow: hidden;
50-
&.no-tab{
51-
.process-tab{
52-
display: none;
53-
@include bg-color($light-base-color, $dark-base-color);
54-
}
55-
.process-container{
56-
height: 100%;
57-
}
58-
}
47+
position: $relative;
48+
height: calc(100%);
49+
overflow: hidden;
50+
&.no-tab {
5951
.process-tab {
60-
display: flex;
61-
flex-direction: row;
62-
flex-wrap: nowrap;
63-
justify-content: flex-start;
64-
align-items: flex-start;
65-
height: 32px;
66-
padding: 0 20px;
67-
box-sizing: border-box;
68-
border-top: $border-width-base $border-style-base $border-color-split;
69-
border-bottom: $border-width-base $border-style-base $border-color-split;
70-
@include border-color($border-color-split, $dark-workspace-background);
71-
@include bg-color($body-background, $dark-base-color);
72-
.process-tab-item {
73-
position: $relative;
74-
height: 30px;
75-
line-height: 30px;
76-
padding: 0 20px;
77-
padding-left: 25px;
78-
border-right: $border-width-base $border-style-base $border-color-split;
79-
@include border-color($border-color-split, $dark-base-color);
80-
@include bg-color($background-color-base, $dark-base-color);
81-
@include font-color($title-color, $dark-workflow-font-color);
82-
cursor: pointer;
83-
min-width: 100px;
84-
max-width: 200px;
85-
overflow: hidden;
86-
text-align: center;
87-
&:first-child{
88-
border-left: $border-width-base $border-style-base $border-color-split;
89-
@include border-color($border-color-split, $dark-base-color);
90-
}
91-
&.active {
92-
margin-top: -1px;
93-
&:before{
94-
content: "";
95-
position: absolute;
96-
top: -1px;
97-
left: 0;
98-
right: 0;
99-
height: 3px;
100-
@include bg-color($primary-color, $dark-primary-color);
101-
}
102-
height: 32px;
103-
line-height: 31px;
104-
@include bg-color($body-background, $dark-base-color);
105-
@include font-color($primary-color, $dark-primary-color);
106-
.tab-icon {
107-
top: 9px;
108-
}
109-
}
110-
.process-tab-name{
111-
width: 100%;
112-
overflow: hidden;
113-
white-space: nowrap;
114-
text-overflow: ellipsis;
115-
padding-right: 5px;
116-
padding-left: 5px;
117-
font-size: $font-size-large;
118-
}
119-
.process-tab-unsave-icon {
120-
position: absolute;
121-
top: 50%;
122-
right: 10px;
123-
transform: translateY(-50%);
124-
}
125-
.ivu-icon{
126-
position: absolute;
127-
right: 10px;
128-
top: 10px;
129-
}
130-
.tab-icon {
131-
position: absolute;
132-
left: 7px;
133-
top: 8px;
134-
width: 15px;
135-
height: 15px;
136-
vertical-align: middle;
137-
}
138-
// .flow {
139-
// width: 12px;
140-
// height: 12px;
141-
// }
142-
.hivesql {
143-
width: 16px;
144-
height: 16px;
145-
}
146-
// .display {
147-
// width: 13px;
148-
// height: 13px;
149-
// }
150-
.dashboard {
151-
width: 14px;
152-
height: 14px;
153-
}
154-
}
52+
display: none;
53+
@include bg-color($light-base-color, $dark-base-color);
15554
}
15655
.process-container {
157-
height: calc(100% - 32px);
56+
height: 100%;
57+
}
58+
}
59+
.process-tab {
60+
display: flex;
61+
flex-direction: row;
62+
flex-wrap: nowrap;
63+
justify-content: flex-start;
64+
align-items: flex-start;
65+
height: 32px;
66+
// padding: 0 20px;
67+
box-sizing: border-box;
68+
border-top: $border-width-base $border-style-base $border-color-split;
69+
border-bottom: $border-width-base $border-style-base $border-color-split;
70+
@include border-color($border-color-split, $dark-workspace-background);
71+
@include bg-color($body-background, $dark-base-color);
72+
.process-tab-item {
73+
position: $relative;
74+
height: 30px;
75+
line-height: 30px;
76+
padding: 0 20px;
77+
padding-left: 25px;
78+
border-right: $border-width-base $border-style-base $border-color-split;
79+
@include border-color($border-color-split, $dark-base-color);
80+
@include bg-color(#ffffff, $dark-base-color);
81+
@include font-color($title-color, $dark-workflow-font-color);
82+
cursor: pointer;
83+
min-width: 100px;
84+
max-width: 200px;
85+
overflow: hidden;
86+
text-align: center;
87+
&:first-child {
88+
border-left: $border-width-base $border-style-base $border-color-split;
89+
@include border-color($border-color-split, $dark-base-color);
90+
}
91+
&.active {
92+
margin-top: -1px;
93+
&:before {
94+
content: "";
95+
position: absolute;
96+
top: -1px;
97+
left: 0;
98+
right: 0;
99+
height: 2px;
100+
@include bg-color($primary-color, $dark-primary-color);
101+
}
102+
height: 32px;
103+
line-height: 31px;
104+
@include bg-color(#ebf5ff, $dark-base-color);
105+
@include font-color($primary-color, $dark-primary-color);
106+
.tab-icon {
107+
top: 9px;
108+
}
109+
}
110+
.process-tab-name {
111+
width: 100%;
112+
overflow: hidden;
113+
white-space: nowrap;
114+
text-overflow: ellipsis;
115+
padding-right: 5px;
116+
padding-left: 5px;
117+
font-size: 14px;
118+
}
119+
.process-tab-unsave-icon {
120+
position: absolute;
121+
top: 50%;
122+
right: 10px;
123+
transform: translateY(-50%);
124+
}
125+
.ivu-icon {
126+
position: absolute;
127+
right: 10px;
128+
top: 10px;
129+
}
130+
.tab-icon {
131+
position: absolute;
132+
left: 7px;
133+
top: 8px;
134+
width: 15px;
135+
height: 15px;
136+
vertical-align: middle;
137+
}
138+
// .flow {
139+
// width: 12px;
140+
// height: 12px;
141+
// }
142+
.hivesql {
143+
width: 16px;
144+
height: 16px;
145+
}
146+
// .display {
147+
// width: 13px;
148+
// height: 13px;
149+
// }
150+
.dashboard {
151+
width: 14px;
152+
height: 14px;
153+
}
158154
}
155+
}
156+
.process-container {
157+
height: calc(100% - 32px);
158+
}
159159
}

0 commit comments

Comments
 (0)