From 6a6e3637a8959603c86be1616ba8cdd1f2d55590 Mon Sep 17 00:00:00 2001 From: pengYYYYY Date: Tue, 19 Oct 2021 16:21:14 +0800 Subject: [PATCH] feat: update less --- src/assets/tencent-logo.png | Bin 0 -> 11383 bytes src/components/card/index.vue | 3 + src/components/color.vue | 1 + src/components/result/index.vue | 10 +- src/components/trend/index.vue | 2 - src/config/proxy.ts | 6 - src/constants/index.ts | 7 + src/pages/detail/advanced/index.less | 157 +++++++--- src/pages/detail/advanced/index.vue | 234 ++++++++++++--- src/pages/detail/base/index.less | 33 ++- src/pages/detail/base/index.vue | 1 - src/pages/detail/secondary/index.less | 11 +- src/pages/detail/secondary/index.vue | 71 +++-- src/pages/form/base/index.less | 14 +- src/pages/form/step/index.less | 14 +- src/pages/list/select/index.vue | 21 +- src/pages/login/index.less | 398 +++++++++++++------------- src/pages/result/success/index.vue | 5 +- src/pages/user/index.less | 297 +++++++++---------- src/style/index.less | 23 +- 20 files changed, 807 insertions(+), 501 deletions(-) create mode 100644 src/assets/tencent-logo.png diff --git a/src/assets/tencent-logo.png b/src/assets/tencent-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..26fdb929bdae041d53e85df094f3c539a9f146cd GIT binary patch literal 11383 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 FV1n}(`KJH? literal 0 HcmV?d00001 diff --git a/src/components/card/index.vue b/src/components/card/index.vue index e38b04d..e727111 100644 --- a/src/components/card/index.vue +++ b/src/components/card/index.vue @@ -86,6 +86,9 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; + // position: absolute; + // top: 30px; + // right: 32px; } &-container { diff --git a/src/components/color.vue b/src/components/color.vue index 2237060..993ad96 100644 --- a/src/components/color.vue +++ b/src/components/color.vue @@ -34,3 +34,4 @@ export default defineComponent({ display: inline-block; } + diff --git a/src/components/result/index.vue b/src/components/result/index.vue index 75eb5ed..0784025 100644 --- a/src/components/result/index.vue +++ b/src/components/result/index.vue @@ -49,20 +49,20 @@ export default defineComponent({ .result { &-link { - color: @primary-color; + color: @brand-color; text-decoration: none; cursor: pointer; &:hover { - color: @primary-color; + color: @brand-color; } &:active { - color: @primary-color; + color: @brand-color; } &--active { - color: @primary-color; + color: @brand-color; } &:focus { @@ -88,7 +88,7 @@ export default defineComponent({ &-tip { margin: 16px 0 8px; font-size: @font-size-base; - color: @text-level-2-color; + color: @text-color-secondary; line-height: 22px; } } diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue index a1efd44..cc5e5e4 100644 --- a/src/components/trend/index.vue +++ b/src/components/trend/index.vue @@ -77,8 +77,6 @@ export default defineComponent({ diff --git a/src/pages/login/index.less b/src/pages/login/index.less index 3b1ebd0..8d2fe1d 100644 --- a/src/pages/login/index.less +++ b/src/pages/login/index.less @@ -1,301 +1,301 @@ @import '@/style/index'; .login-wrapper { - width: 100%; - height: 100%; - background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg); - background-size: cover; - background-position: 50%; - position: relative; + width: 100%; + height: 100%; + background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg); + background-size: cover; + background-position: 50%; + position: relative; } .login-container { - position: absolute; - top: 28%; - left: 12%; - min-height: 500px; - line-height: 22px; + position: absolute; + top: 28%; + left: 12%; + min-height: 500px; + line-height: 22px; } .title-container { - .icon { - width: 290px; - height: 60px; - } + .icon { + width: 290px; + height: 60px; + } - .side-title { - margin-top: 24.9px; + .side-title { + margin-top: 24.9px; - .tip1, - .tip2 { - display: inline-block; - margin-right: 8px; - } + .tip1, + .tip2 { + display: inline-block; + margin-right: 8px; + } - .tip1 { - font-size: 14px; - color: rgba(0,0,0,.60); - } + .tip1 { + font-size: 14px; + color: rgba(0,0,0,.60); + } - .tip2 { - font-size: 14px; - color: @brand-color-8; - cursor: pointer; - } - } + .tip2 { + font-size: 14px; + color: @brand-color-8; + cursor: pointer; + } + } } .login-step1 { - .input-container { - margin-top: 72px; + .input-container { + margin-top: 72px; - .t-input { - display: block; - } + .t-input { + display: block; + } - .t-popup-reference { - margin: 24px 0; - } - } + .t-popup-reference { + margin: 24px 0; + } + } - .check-container { + .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .t-checkbox__label { + color: @text-color-secondary; - span { - color: @brand-color-8; - } - } - } + span { + color: @brand-color-8; + } + } + } } .login-step3 { - .input-container { - margin-top: 34px; - } + .input-container { + margin-top: 34px; + } } .input-container { - .tip-container { - margin-bottom: 16px; + .tip-container { + margin-bottom: 16px; - .tip1 { - font-size: 14px; - color: rgba(0,0,0,.60); - } + .tip1 { + font-size: 14px; + color: rgba(0,0,0,.60); + } - .tip2 { - float: right; - font-size: 14px; - color: @brand-color-8; + .tip2 { + float: right; + font-size: 14px; + color: @brand-color-8; - .t-icon { - height: 20px; - vertical-align: text-bottom; - } - } - } + .t-icon { + height: 20px; + vertical-align: text-bottom; + } + } + } - .button-container { - margin-top: 16px; - } + .button-container { + margin-top: 16px; + } - .check-container { - font-size: 14px; - color: rgba(0,0,0,.60); + .check-container { + font-size: 14px; + color: rgba(0,0,0,.60); - .tip { - float: right; - font-size: 14px; - color: @brand-color-8; - } - } + .tip { + float: right; + font-size: 14px; + color: @brand-color-8; + } + } } .login-step1 { - .bottom-container { - margin-top: 72px; - } + .bottom-container { + margin-top: 72px; + } } .login-step3 { - .bottom-container { - margin-top: 32px; - } + .bottom-container { + margin-top: 32px; + } - .input-container .tip-container { - width: 192px; - } + .input-container .tip-container { + width: 192px; + } } .login-step2 { - .input-container { - margin-top: 108.9px; + .input-container { + margin-top: 108.9px; - .tip1 { - cursor: pointer; - } - } + .tip1 { + cursor: pointer; + } + } } .bottom-container { - margin-top: 66px; + margin-top: 66px; - .tip { - font-size: 14px; - color: @brand-color-8; - cursor: pointer; - } + .tip { + font-size: 14px; + color: @brand-color-8; + cursor: pointer; + } - i { - font-style: normal; - color: @gray-color-3; - margin: 0 14px; - } + i { + font-style: normal; + color: @gray-color-3; + margin: 0 14px; + } } .rex-check { - font-family: PingFangSC-Regular; - font-size: 14px; - color: @text-color-placeholder; - line-height: 22px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: @text-color-placeholder; + line-height: 22px; } .format-correct { - color: @text-color-primary; + color: @text-color-primary; - .t-icon { - color: @success-color-5; - } + .t-icon { + color: @success-color-5; + } } .login-step4 { - .input-container { - margin-top: 64px; + .input-container { + margin-top: 64px; - .t-input { - display: block; - } + .t-input { + display: block; + } - .t-popup-reference { - margin: 24px 0; - } + .t-popup-reference { + margin: 24px 0; + } - .verification-code { - margin-bottom: 24px; + .verification-code { + margin-bottom: 24px; - .t-input { - display: inline-block; - } + .t-input { + display: inline-block; + } - button { - width: 102px; - height: 40px; - margin-left: 11px; - } - } - } + button { + width: 102px; + height: 40px; + margin-left: 11px; + } + } + } - .bottom-container { - margin-top: 66px; - } + .bottom-container { + margin-top: 66px; + } - .check-container { + .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .t-checkbox__label { + color: @text-color-secondary; - span { - color: @brand-color-8; - } - } - } + span { + color: @brand-color-8; + } + } + } } .login-step5 { - .input-container { - margin-top: 64px; + .input-container { + margin-top: 64px; - .t-input { - display: block; - } + .t-input { + display: block; + } - .t-popup-reference { - margin: 24px 0; - } + .t-popup-reference { + margin: 24px 0; + } - .t-select-popup-reference { - margin: 0; - } - } + .t-select-popup-reference { + margin: 0; + } + } - .bottom-container { - margin-top: 66px; - } + .bottom-container { + margin-top: 66px; + } - .check-container { + .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .t-checkbox__label { + color: @text-color-secondary; - span { - color: @brand-color-8; - } - } - } + span { + color: @brand-color-8; + } + } + } } .login-step6 { - .input-container { - margin-top: 64px; + .input-container { + margin-top: 64px; - .t-input { - display: block; - } + .t-input { + display: block; + } - .t-popup-reference { - margin: 24px 0; - } + .t-popup-reference { + margin: 24px 0; + } - .verification-code { - margin: 24px 0; + .verification-code { + margin: 24px 0; - .t-input { - display: inline-block; - } + .t-input { + display: inline-block; + } - button { - width: 102px; - height: 40px; - margin-left: 11px; - } - } - } + button { + width: 102px; + height: 40px; + margin-left: 11px; + } + } + } - .bottom-container { - margin-top: 66px; - } + .bottom-container { + margin-top: 66px; + } - .check-container { + .check-container { - .t-checkbox__label { - color: @text-color-secondary; + .t-checkbox__label { + color: @text-color-secondary; - span { - color: @brand-color-8; - } - } - } + span { + color: @brand-color-8; + } + } + } } \ No newline at end of file diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue index e0d8665..78de320 100644 --- a/src/pages/result/success/index.vue +++ b/src/pages/result/success/index.vue @@ -45,6 +45,7 @@ export default defineComponent({ justify-content: center; align-items: center; height: 75vh; + &-icon { font-size: 64px; color: @success-color; @@ -53,7 +54,7 @@ export default defineComponent({ &-title { margin-top: 16px; font-size: 20px; - color: rgba(0, 0, 0, 0.9); + color: rgba(0, 0, 0, .9); text-align: center; line-height: 22px; } @@ -61,7 +62,7 @@ export default defineComponent({ &-describe { margin: 8px 0 32px; font-size: 14px; - color: rgba(0, 0, 0, 0.6); + color: rgba(0, 0, 0, .6); line-height: 22px; } } diff --git a/src/pages/user/index.less b/src/pages/user/index.less index aa95d03..6c5ece2 100644 --- a/src/pages/user/index.less +++ b/src/pages/user/index.less @@ -1,35 +1,42 @@ @import '@/style/index'; -.user-panel { +.user-panel { @media (max-width: @screen-sm-max) { + .user-right { min-width: 100%; } } @media (min-width: @screen-md-min) { + .user-right { min-width: 33.33%; } } + .user-right { transition: width .3s linear; + &-greeting { margin-bottom: 16px; background: #fff; border-radius: @border-radius; } + &-trend { margin-bottom: 16px; background: #fff; border-radius: @border-radius; } + &-todo { margin-bottom: 16px; background: #fff; border-radius: @border-radius; } } + .head-bar { display: flex; justify-content: space-between; @@ -37,11 +44,17 @@ .title { line-height: 24px; - font-family: PingFangSC-Medium; - font-size: 16px; - color: @text-level-1-color; + font-family: PingFangSC; + font-size: 20px; + color: @text-color-primary; text-align: left; } + + .t-icon { + font-size: 16px; + color: rgba(0, 0, 0, .9); + } + .more { display: flex; align-items: center; @@ -49,250 +62,218 @@ line-height: 22px; font-family: PingFangSC-Regular; font-size: 14px; - color: @text-level-1-color; + color: @text-color-primary; cursor: pointer; .t-icon { vertical-align: bottom; font-size: 20px; } + &:hover { color: @brand-color-8; } } } - .user-left { + .user-right-panel { + .user-top { - padding: 24px; - margin: 0 16px 16px 0; - background: #fff; + padding: 48px; + margin: 0 0 16px 16px; + background: @brand-color; border-radius: @border-radius; .account { - text-align: center; - margin-bottom: 48px; - color: @text-level-1-color; + text-align: left; + margin-bottom: 0; + color: @text-color-primary; .img { display: block; - width: 122px; - height: 122px; + width: 90px; + height: 90px; border-radius: @border-radius-50; - background: #EBEDF1; - margin-top: 16px; - margin-left: 50%; - transform: translateX(-50%); + border: 1px solid @brand-color; + background: #ebedf1; } + .name { line-height: 37px; font-family: PingFangSC-Semibold; - font-size: 26px; - margin-top: 16px; + font-size: 20px; + margin-top: 36px; + color: #fff; } + .position { line-height: 24px; font-family: PingFangSC-Regular; font-size: 14px; margin-top: 8px; + color: #fff; } } + .user-info { line-height: 24px; font-family: PingFangSC-Regular; font-size: 14px; - color: @text-level-1-color; - .hiredate, .del, .mail { + color: @text-color-primary; + + .hiredate, + .del, + .mail { display: flex; } + .t-icon { height: 24px; margin-right: 8px; } + .del { margin: 16px 0; } } } - .user-bottom { - padding: 24px 24px 0 24px; - margin: 0 16px 16px 0; + + .user-middle { + padding: 28px 32px 5px 32px; + margin: 0 0 16px 16px; background: #fff; border-radius: @border-radius; + .t-list { + margin: 20px 0; + } + .t-list-item { - height: 64px; - min-width: 230px; - margin: 8px 0 16px 0; - background: #F3F3F3; - border-radius: @border-radius; + padding: 15px 0; .t-list-item__meta-avatar { - height: 32px; - width: 32px; - margin: auto; - } - .t-list-item__meta-content { - line-height: 22px; - margin-left: 10px; - padding: 5px 0; - } - .t-list-item__meta-title { - display: inline-block; - margin: 0 7px 0 0; + height: 50px; + width: 50px; + margin: 0 24px 0 0; } + .t-list-item__meta-description { display: inline-block; - color: @text-color-secondary; - font-size: 12px; - } - .t-list-item__action { - li { - margin-right: 16px; - cursor: pointer; - } - .t-icon { - color: @text-level-1-color; - - &:hover { - color: @brand-color-8; - } - } + color: rgba(0, 0, 0, .4); + font-size: 14px; } } } + + .user-bottom { + padding: 24px 24px 5px 24px; + margin: 0 0 16px 16px; + background: #fff; + border-radius: @border-radius; + + .content { + width: 70%; + margin: 24px 0 12px 0; + } + + .user-right-logo { + width: 48px; + } + } } - .user-right { + + .user-left-panel { + .user-top { - .user-right-greeting { - padding: 24px; + + .user-left-greeting { + padding: 28px 32px; line-height: 28px; font-family: PingFangSC-Semibold; font-size: 20px; - color: @text-level-1-color; + color: @text-color-primary; text-align: left; + background-color: #fff; + border-radius: @border-radius; + .regular { + margin: 0 0 0 15px; vertical-align: bottom; - font-family: PingFangSC-Regular; + font-family: PingFangSC-Semibold; font-size: 14px; } } - .user-right-trend { - padding: 24px; - .t-list-item { - padding: 8px 0; - cursor: pointer; + .user-left-logo { + float: right; + width: 180px; + } - .text { - display: flex; - line-height: 20px; + .user-right-info { + margin: 16px 0; + padding: 32px; + background-color: #fff; + border-radius: @border-radius; + + .content { + width: 90%; + } + + .contract { + width: 340px; + height: 88px; + border-radius: @border-radius; + margin: 8px 0; + + &-title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 24px; + margin: 20px 0 6px 0; font-family: PingFangSC-Regular; font-size: 14px; - color: @text-level-1-color; - - .t-icon { - margin-right: 8px; - height: 20px; - font-size: 16px; - color: @text-level-3-color; - } - p { - display: inline-block; - } + color: rgba(0, 0, 0, .4); } - .t-list-item__action { - line-height: 20px; + + &-detail { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 40px; font-family: PingFangSC-Regular; - font-size: 12px; - color: @text-level-2-color; - } - &:hover { - .text { - color: @brand-color-8; - - .t-icon { - color: @brand-color-8; - } - } + font-size: 14px; + color: rgba(0, 0, 0, .9); } } - .t-list-item:last-child { - padding-bottom: 0; - } - } - .user-right-todo { - padding: 24px; - - .empty-list { - margin-top: 18px; - line-height: 20px; - font-family: PingFangSC-Regular; - font-size: 14px; - color: @text-level-3-color; - text-align: center; - - img { - margin-bottom: 2px; - width: 42px; - } + + .contract:last-child { + margin-bottom: 0; } } } + .user-bottom { - padding: 24px; + margin: 0 0 16px 0; + padding: 28px 32px; background: #fff; border-radius: @border-radius; - .contract { - width: 340px; - height: 88px; - border-radius: @border-radius; - margin: 8px 0; - cursor: pointer; - - &-type { - position: relative; - float: left; - margin: 13px 16px; + .user-bottom-container { + margin-top: 15px; - img { - width: 64px; - height: 64px; - } - } - &-title { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 24px; - margin: 20px 0 6px 0; - font-family: PingFangSC-Medium; - font-size: 16px; - color: @text-level-1-color; - } - &-date { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 22px; - font-family: PingFangSC-Regular; + .unit { font-size: 14px; - color: @text-level-3-color; + font-family: PingFangSC-Regular; + color: rgba(0, 0, 0, .4); } - &:hover { - background: #f7f7f7; + + .time-picker { + float: right; + width: 250px; } } - .contract:last-child, - .contract:nth-last-child(2) { - margin-bottom: 0; - } } } - .user-bottom .user-right{ - height: 447px; - background: #fff; - border-radius: @border-radius; - } } + diff --git a/src/style/index.less b/src/style/index.less index 5a6c41b..41a1e3b 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -9,13 +9,12 @@ @import './sidenav.less'; body { - color: @text-level-2-color; + color: @text-color-secondary; font-family: -apple-system, BlinkMacSystemFont, @font-family; font-size: @font-size-base; line-height: 1.5; -webkit-font-smoothing: antialiased; padding: 0; - min-width: @screen-sm-min; } pre { @@ -57,7 +56,7 @@ p { .@{prefix}-text-tip { font-size: 12px; - color: @text-level-3-color; + color: @text-color-placeholder; } .@{prefix}-pic { @@ -67,16 +66,16 @@ p { } .@{prefix}-main-link { - color: @text-level-1-color; + color: @text-color-primary; text-decoration: none; cursor: pointer; &:hover { - color: @text-level-1-color; + color: @text-color-primary; } &:active { - color: @text-level-1-color; + color: @text-color-primary; } &--active { @@ -89,7 +88,7 @@ p { } .@{prefix}-link { - color: @primary-color; + color: @brand-color; text-decoration: none; margin-right: @spacer-3; @@ -97,15 +96,15 @@ p { cursor: pointer; &:hover { - color: @primary-color; + color: @brand-color; } &:active { - color: @primary-color; + color: @brand-color; } &--active { - color: @primary-color; + color: @brand-color; } &:focus { @@ -160,7 +159,7 @@ p { height: 0; border-style: solid; border-width: 0 6px 8px 6px; - border-color: transparent transparent #00A870 transparent; + border-color: transparent transparent #00a870 transparent; } .@{prefix}-down-triangle { @@ -168,5 +167,5 @@ p { height: 0; border-style: solid; border-width: 8px 6px 0 6px; - border-color: #E34D59 transparent transparent transparent; + border-color: #e34d59 transparent transparent transparent; } \ No newline at end of file