-
{{projectData.desc}}
-
-
- {{$L('显示已完成')}}
-
-
-
- {{ flowTitle }}
-
-
-
+
+
+
+
{{projectData.desc}}
+
+
+ {{$L('显示已完成')}}
+
+
+
+ {{ flowTitle }}
+
+
+
diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss
index b73810087..8e9117f8b 100644
--- a/resources/assets/sass/dark.scss
+++ b/resources/assets/sass/dark.scss
@@ -96,19 +96,17 @@ body.dark-mode-reverse {
}
.project-panel {
- .project-head {
- .project-titbox {
- .project-title {
- .top-text {
- color: #000000;
- }
+ .project-titbox {
+ .project-title {
+ .top-text {
+ color: #000000;
}
- .project-icons {
- > li {
- &.project-icon {
- &.active {
- color: #000000;
- }
+ }
+ .project-icons {
+ > li {
+ &.project-icon {
+ &.active {
+ color: #000000;
}
}
}
diff --git a/resources/assets/sass/pages/components/project-panel.scss b/resources/assets/sass/pages/components/project-panel.scss
index f398b91cf..95c72b22a 100644
--- a/resources/assets/sass/pages/components/project-panel.scss
+++ b/resources/assets/sass/pages/components/project-panel.scss
@@ -1,244 +1,239 @@
.project-panel {
display: flex;
flex-direction: column;
- .project-head {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin: 32px 32px 0;
- .project-titbox {
- width: 100%;
+ .project-titbox {
+ width: 100%;
+ padding: 32px 32px 4px;
+ .project-title {
+ float: left;
display: flex;
- align-items: flex-start;
- justify-content: space-between;
- margin-bottom: 20px;
- .project-title {
+ align-items: center;
+ margin-bottom: 8px;
+ .project-back {
+ display: none;
+ }
+ > h1 {
+ color: #333333;
+ font-size: 28px;
+ font-weight: 600;
+ }
+ .project-load {
display: flex;
align-items: center;
- .project-back {
- display: none;
- }
- > h1 {
- color: #333333;
- font-size: 28px;
- font-weight: 600;
- }
- .project-load {
- display: flex;
- align-items: center;
- margin-left: 18px;
- .common-loading {
- width: 22px;
- height: 22px;
- }
- }
- .top-text {
- height: 24px;
- line-height: 24px;
- border-radius:4px;
- padding: 0 6px;
- margin-top: 3px;
- margin-left: 10px;
- background-color: #8BCF70;
- color:#FFFFFF;
- text-align: center;
- white-space: nowrap;
+ margin-left: 18px;
+ .common-loading {
+ width: 22px;
+ height: 22px;
}
}
- .project-icons {
+ .top-text {
+ height: 24px;
+ line-height: 24px;
+ border-radius:4px;
+ padding: 0 6px;
+ margin-top: 3px;
+ margin-left: 10px;
+ background-color: #8BCF70;
+ color:#FFFFFF;
+ text-align: center;
+ white-space: nowrap;
+ }
+ }
+ .project-icons {
+ float: right;
+ display: flex;
+ align-items: center;
+ margin-top: 3px;
+ margin-bottom: 8px;
+ > li {
+ list-style: none;
display: flex;
align-items: center;
- flex-shrink: 0;
- margin-top: 3px;
- > li {
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 36px;
- height: 36px;
- border-radius: 50%;
- position: relative;
- margin-left: 16px;
- cursor: pointer;
- transition: box-shadow 0.3s;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ position: relative;
+ margin-left: 16px;
+ cursor: pointer;
+ transition: box-shadow 0.3s;
+ &:hover {
+ box-shadow: 0 0 6px #cccccc;
+ }
+ &.cursor-default {
+ cursor: default;
+ }
+ &.project-avatar {
+ width: auto;
+ min-width: 36px;
&:hover {
- box-shadow: 0 0 6px #cccccc;
+ box-shadow: none;
}
- &.cursor-default {
- cursor: default;
- }
- &.project-avatar {
- width: auto;
- min-width: 36px;
- &:hover {
- box-shadow: none;
- }
- > ul {
- display: flex;
- align-items: center;
- > li {
- list-style: none;
- margin-left: -6px;
- transition: transform 0.2s;
- .ivu-badge {
- position: absolute;
- top: -5px;
- left: 23px;
- transform: scale(0.8);
- }
- &:hover {
- transform: scale(1.05);
- }
- &:first-child {
- margin-left: 0;
- }
- &.more {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 17px;
- width: 30px;
- height: 32px;
- color: #aaaaaa;
- background-color: transparent;
- border-color: transparent;
- transform: scale(1) !important;
- z-index: 1;
- }
+ > ul {
+ display: flex;
+ align-items: center;
+ > li {
+ list-style: none;
+ margin-left: -6px;
+ transition: transform 0.2s;
+ .ivu-badge {
+ position: absolute;
+ top: -5px;
+ left: 23px;
+ transform: scale(0.8);
+ }
+ &:hover {
+ transform: scale(1.05);
+ }
+ &:first-child {
+ margin-left: 0;
+ }
+ &.more {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 17px;
+ width: 30px;
+ height: 32px;
+ color: #aaaaaa;
+ background-color: transparent;
+ border-color: transparent;
+ transform: scale(1) !important;
+ z-index: 1;
}
}
}
- &.project-icon {
- border-radius: 50%;
- background-color: #F2F3F5;
- .menu-icon {
- font-size: 20px;
- width: 36px;
- height: 36px;
- line-height: 36px;
- }
- .menu-badge {
- position: absolute;
- top: -6px;
- left: 20px;
- transform: scale(0.8);
- }
- .search-input {
- margin: 2px 0;
- width: 170px;
- }
- &.active {
- color: #ffffff;
- background-color: $primary-color;
- }
+ }
+ &.project-icon {
+ border-radius: 50%;
+ background-color: #F2F3F5;
+ .menu-icon {
+ font-size: 20px;
+ width: 36px;
+ height: 36px;
+ line-height: 36px;
+ }
+ .menu-badge {
+ position: absolute;
+ top: -6px;
+ left: 20px;
+ transform: scale(0.8);
+ }
+ .search-input {
+ margin: 2px 0;
+ width: 170px;
+ }
+ &.active {
+ color: #ffffff;
+ background-color: $primary-color;
}
}
}
}
- .project-subbox {
- width: 100%;
- .project-subtitle {
- float: left;
- color: #999999;
- line-height: 24px;
- padding: 6px 0;
- }
- .project-switch {
- float: right;
- margin: 3px 0 3px 32px;
+ }
+ .project-subbox {
+ width: 100%;
+ padding: 0 32px;
+ .project-subtitle {
+ float: left;
+ color: #999999;
+ line-height: 24px;
+ margin: 6px 0;
+ }
+ .project-switch {
+ float: right;
+ margin: 3px 0 3px 32px;
+ display: flex;
+ align-items: flex-end;
+ .project-checkbox {
display: flex;
- align-items: flex-end;
- .project-checkbox {
+ align-items: center;
+ margin-right: 14px;
+ opacity: 0.9;
+ height: 30px;
+ .ivu-checkbox-focus {
+ box-shadow: none;
+ }
+ }
+ .project-select {
+ display: flex;
+ align-items: center;
+ margin-right: 14px;
+ opacity: 0.9;
+ height: 30px;
+ .project-flow {
+ font-size: 13px;
+ height: 28px;
+ line-height: 26px;
+ padding: 0 8px;
+ border-radius: 4px;
+ background: #f7f7f7;
+ border: 1px solid #e8eaec;
display: flex;
align-items: center;
- margin-right: 14px;
- opacity: 0.9;
- height: 30px;
- .ivu-checkbox-focus {
- box-shadow: none;
+ justify-content: center;
+ cursor: pointer;
+ &.start {
+ background-color: rgba($flow-status-start-color, 0.1);
+ border-color: rgba($flow-status-start-color, 0.1);
+ color: $flow-status-start-color;
+ }
+ &.progress {
+ background-color: rgba($flow-status-progress-color, 0.1);;
+ border-color: rgba($flow-status-progress-color, 0.1);;
+ color: $flow-status-progress-color;
+ }
+ &.test {
+ background-color: rgba($flow-status-test-color, 0.1);;
+ border-color: rgba($flow-status-test-color, 0.1);;
+ color: $flow-status-test-color;
+ }
+ &.end {
+ background-color: rgba($flow-status-end-color, 0.1);;
+ border-color: rgba($flow-status-end-color, 0.1);;
+ color: $flow-status-end-color;
}
}
- .project-select {
- display: flex;
- align-items: center;
- margin-right: 14px;
- opacity: 0.9;
- height: 30px;
- .project-flow {
- font-size: 13px;
- height: 28px;
- line-height: 26px;
- padding: 0 8px;
- border-radius: 4px;
- background: #f7f7f7;
- border: 1px solid #e8eaec;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- &.start {
- background-color: rgba($flow-status-start-color, 0.1);
- border-color: rgba($flow-status-start-color, 0.1);
- color: $flow-status-start-color;
- }
- &.progress {
- background-color: rgba($flow-status-progress-color, 0.1);;
- border-color: rgba($flow-status-progress-color, 0.1);;
- color: $flow-status-progress-color;
- }
- &.test {
- background-color: rgba($flow-status-test-color, 0.1);;
- border-color: rgba($flow-status-test-color, 0.1);;
- color: $flow-status-test-color;
- }
- &.end {
- background-color: rgba($flow-status-end-color, 0.1);;
- border-color: rgba($flow-status-end-color, 0.1);;
- color: $flow-status-end-color;
- }
- }
+ }
+ .project-switch-button {
+ display: flex;
+ align-items: center;
+ background-color: #ffffff;
+ border-radius: 6px;
+ height: 30px;
+ position: relative;
+ transition: all 0.2s;
+ .active {
+ color: $primary-color;
}
- .project-switch-button {
- display: flex;
- align-items: center;
- background-color: #ffffff;
+ .slider {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 33.3%;
+ height: 100%;
+ z-index: 0;
+ color: $primary-color;
border-radius: 6px;
+ border: 1px solid $primary-color;
+ background-color: rgba($primary-color, 0.1);
+ transition: left 0.2s;
+ }
+ &:hover {
+ box-shadow: 0 0 10px #e6ecfa;
+ }
+ > div {
+ z-index: 1;
+ width: 32px;
height: 30px;
- position: relative;
- transition: all 0.2s;
- .active {
- color: $primary-color;
- }
- .slider {
- position: absolute;
- top: 0;
- left: 0;
- width: 33.3%;
- height: 100%;
- z-index: 0;
- color: $primary-color;
- border-radius: 6px;
- border: 1px solid $primary-color;
- background-color: rgba($primary-color, 0.1);
- transition: left 0.2s;
- }
- &:hover {
- box-shadow: 0 0 10px #e6ecfa;
- }
- > div {
- z-index: 1;
- width: 32px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 6px;
- cursor: pointer;
- color: $primary-text-color;
- > i {
- font-size: 17px;
- }
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ cursor: pointer;
+ color: $primary-text-color;
+ > i {
+ font-size: 17px;
}
}
}
@@ -1026,50 +1021,48 @@
@media (max-width: 768px) {
.project-panel {
- .project-head {
- margin: 12px 16px 0;
- .project-titbox {
- display: block;
- margin-bottom: 16px;
- .project-title {
- float: left;
- padding-bottom: 8px;
- .project-back {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-left: -16px;
- width: 52px;
- > i {
- font-size: 26px;
- }
- }
- > h1 {
- font-size: 22px;
+ .project-titbox {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background-color: #fafafa;
+ padding: 12px 16px 4px;
+ .project-title {
+ float: left;
+ .project-back {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: -16px;
+ width: 52px;
+ > i {
+ font-size: 26px;
}
}
- .project-icons {
- float: right;
- margin-left: 24px;
- margin-top: 4px;
- justify-content: flex-end;
+ > h1 {
+ font-size: 22px;
}
}
- .project-subbox {
- display: block;
- .project-subtitle {
- margin-bottom: 6px;
- word-break: break-all;
- text-overflow: ellipsis;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .project-switch {
- margin-left: 0;
- justify-content: flex-end;
- }
+ .project-icons {
+ float: right;
+ margin-left: 24px;
+ margin-top: 4px;
+ justify-content: flex-end;
+ }
+ }
+ .project-subbox {
+ padding: 0 16px;
+ .project-subtitle {
+ word-break: break-all;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+ .project-switch {
+ margin-left: 0;
+ justify-content: flex-end;
}
}
.project-column {
diff --git a/resources/assets/sass/pages/page-login.scss b/resources/assets/sass/pages/page-login.scss
index 08ad6fad5..298922495 100644
--- a/resources/assets/sass/pages/page-login.scss
+++ b/resources/assets/sass/pages/page-login.scss
@@ -63,12 +63,19 @@
.login-code {
.ivu-input-group-prepend,
.ivu-input-group-append {
- font-size: 14px;
+ font-size: 16px;
background: transparent;
border-color: #f1f1f1;
+ > span {
+ font-size: 14px;
+ }
+ }
+ .ivu-input-group-prepend {
+ padding-right: 0;
}
.ivu-input {
border-left-color: transparent;
+ box-shadow: none;
}
.login-code-end {
margin: -6px -7px;
@@ -187,10 +194,31 @@
width: 44px;
}
- .ivu-input-wrapper-large .ivu-input-prefix i,
- .ivu-input-wrapper-large .ivu-input-suffix i {
- font-size: 20px;
- line-height: 44px;
+ .ivu-input-wrapper-large {
+ .ivu-input-prefix i,
+ .ivu-input-suffix i {
+ font-size: 20px;
+ line-height: 44px;
+ }
+ .ivu-input-icon {
+ height: 44px;
+ line-height: 44px;
+ }
+ }
+
+ .login-code {
+ .ivu-input-group-prepend,
+ .ivu-input-group-append {
+ font-size: 18px;
+ background: #ffffff;
+ .login-code-end {
+ height: 42px;
+ }
+ }
+ .ivu-input-group-prepend {
+ padding-left: 12px;
+ padding-right: 2px;
+ }
}
}
}