Browse Source

chore(stylelint): add stylelint

pull/1/head
octopustail 3 years ago
parent
commit
d84a93eb78
  1. 2
      .gitignore
  2. 8
      .stylelintignore
  3. 5
      src/components/card/index.vue
  4. 1
      src/components/color.vue
  5. 2
      src/components/footer.vue
  6. 1
      src/components/result/index.vue
  7. 1
      src/components/thumbnail/index.vue
  8. 458
      src/pages/login/index.less
  9. 1
      src/pages/result-fail/index.vue
  10. 1
      src/pages/result-success/index.vue
  11. 52
      src/pages/user/index.less
  12. 1
      src/store/modules/setting.js
  13. 10
      src/style/font-family.less
  14. 283
      src/style/index.less
  15. 151
      src/style/sidenav.less
  16. 10
      stylelint.config.js

2
.gitignore

@ -6,3 +6,5 @@ dist-ssr
.vscode
.history
README.html
.stylelintcache

8
.stylelintignore

@ -0,0 +1,8 @@
# .stylelintignore
# 旧的不需打包的样式库
*.min.css
# 其他类型文件
*.js
*.jpg
*.woff

5
src/components/card/index.vue

@ -34,12 +34,15 @@ export default {
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.card {
&-option {
position: absolute;
top: 20px;
right: 24px;
}
&-container {
padding: 24px;
margin: 16px 0;
@ -67,7 +70,7 @@ export default {
&-describe {
font-size: 14px;
color: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, .6);
line-height: 22px;
}

1
src/components/color.vue

@ -3,6 +3,7 @@
</template>
<script>
import { getBrandColor } from '@/config/color';
export default {
name: 'color',
props: {

2
src/components/footer.vue

@ -21,7 +21,7 @@ export default {
@import '@/style/index';
.@{prefix}-footer {
color: rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, .3);
line-height: 20px;
text-align: center;
}

1
src/components/result/index.vue

@ -22,6 +22,7 @@ export default {
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.result {
&-link {
color: @primary-color;

1
src/components/thumbnail/index.vue

@ -29,6 +29,7 @@ export default {
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.thumbnail {
&-container {
display: inline-block;

458
src/pages/login/index.less

@ -1,247 +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;
}
.side-title {
margin-top: 24.9px;
.tip1, .tip2 {
display: inline-block;
margin-right: 8px;
}
.tip1 {
font-size: 14px;
color: rgba(0,0,0,0.60);
}
.tip2 {
font-size: 14px;
color: @brand-color-8;
cursor: pointer;
}
.icon {
width: 290px;
height: 60px;
}
.side-title {
margin-top: 24.9px;
.tip1,
.tip2 {
display: inline-block;
margin-right: 8px;
}
.tip1 {
font-size: 14px;
color: rgba(0,0,0,.60);
}
.tip2 {
font-size: 14px;
color: @brand-color-8;
cursor: pointer;
}
}
}
.login-step1 {
.input-container {
margin-top: 72px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
.input-container {
margin-top: 72px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
}
}
.login-step3 {
.input-container {
margin-top: 34px;
}
.input-container {
margin-top: 34px;
}
}
.input-container {
.tip-container {
margin-bottom: 16px;
.tip1 {
font-size: 14px;
color: rgba(0,0,0,0.60);
}
.tip2 {
float: right;
font-size: 14px;
color: @brand-color-8;
.t-icon {
height: 20px;
vertical-align: text-bottom;
}
}
}
.button-container {
margin-top: 16px;
}
.check-container {
font-size: 14px;
color: rgba(0,0,0,0.60);
.tip {
float: right;
font-size: 14px;
color: @brand-color-8;
}
.tip-container {
margin-bottom: 16px;
.tip1 {
font-size: 14px;
color: rgba(0,0,0,.60);
}
.tip2 {
float: right;
font-size: 14px;
color: @brand-color-8;
.t-icon {
height: 20px;
vertical-align: text-bottom;
}
}
}
.button-container {
margin-top: 16px;
}
.check-container {
font-size: 14px;
color: rgba(0,0,0,.60);
.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;
}
.input-container .tip-container {
width: 192px;
}
.bottom-container {
margin-top: 32px;
}
.input-container .tip-container {
width: 192px;
}
}
.login-step2 {
.input-container {
margin-top: 108.9px;
.tip1 {
cursor: pointer;
}
.input-container {
margin-top: 108.9px;
.tip1 {
cursor: pointer;
}
}
}
.bottom-container {
margin-top: 66px;
.tip {
font-size: 14px;
color: @brand-color-8;
cursor: pointer;
}
i {
font-style: normal;
color: @gray-color-3;
margin: 0 14px;
}
margin-top: 66px;
.tip {
font-size: 14px;
color: @brand-color-8;
cursor: pointer;
}
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;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.verification-code {
margin-bottom: 24px;
.t-input {
display: inline-block;
}
button {
width: 102px;
height: 40px;
margin-left: 11px;
}
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.verification-code {
margin-bottom: 24px;
.t-input {
display: inline-block;
}
button {
width: 102px;
height: 40px;
margin-left: 11px;
}
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
}
}
.login-step5 {
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.t-select-popup-reference {
margin: 0;
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.t-select-popup-reference {
margin: 0;
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
}
}
.login-step6 {
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.verification-code {
margin: 24px 0;
.t-input {
display: inline-block;
}
button {
width: 102px;
height: 40px;
margin-left: 11px;
}
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
.input-container {
margin-top: 64px;
.t-input {
display: block;
}
.t-popup-reference {
margin: 24px 0;
}
.verification-code {
margin: 24px 0;
.t-input {
display: inline-block;
}
button {
width: 102px;
height: 40px;
margin-left: 11px;
}
}
}
.bottom-container {
margin-top: 66px;
}
.check-container {
.t-checkbox__label {
color: @text-color-secondary;
span {
color: @brand-color-8;
}
}
}
}

1
src/pages/result-fail/index.vue

@ -29,6 +29,7 @@ export default {
justify-content: center;
align-items: center;
height: 75vh;
&-icon {
font-size: 64px;
color: @error-color;

1
src/pages/result-success/index.vue

@ -30,6 +30,7 @@ export default {
justify-content: center;
align-items: center;
height: 75vh;
&-icon {
font-size: 64px;
color: @success-color;

52
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;
@ -42,6 +49,7 @@
color: @text-level-1-color;
text-align: left;
}
.more {
display: flex;
align-items: center;
@ -56,6 +64,7 @@
vertical-align: bottom;
font-size: 20px;
}
&:hover {
color: @brand-color-8;
}
@ -63,6 +72,7 @@
}
.user-left {
.user-top {
padding: 24px;
margin: 0 16px 16px 0;
@ -79,17 +89,19 @@
width: 122px;
height: 122px;
border-radius: @border-radius-50;
background: #EBEDF1;
background: #ebedf1;
margin-top: 16px;
margin-left: 50%;
transform: translateX(-50%);
}
.name {
line-height: 37px;
font-family: PingFangSC-Semibold;
font-size: 26px;
margin-top: 16px;
}
.position {
line-height: 24px;
font-family: PingFangSC-Regular;
@ -97,23 +109,30 @@
margin-top: 8px;
}
}
.user-info {
line-height: 24px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: @text-level-1-color;
.hiredate, .del, .mail {
.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;
@ -124,7 +143,7 @@
height: 64px;
min-width: 230px;
margin: 8px 0 16px 0;
background: #F3F3F3;
background: #f3f3f3;
border-radius: @border-radius;
.t-list-item__meta-avatar {
@ -132,25 +151,31 @@
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;
}
.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;
@ -162,8 +187,11 @@
}
}
}
.user-right {
.user-top {
.user-right-greeting {
padding: 24px;
line-height: 28px;
@ -171,12 +199,14 @@
font-size: 20px;
color: @text-level-1-color;
text-align: left;
.regular {
vertical-align: bottom;
font-family: PingFangSC-Regular;
font-size: 14px;
}
}
.user-right-trend {
padding: 24px;
@ -197,17 +227,21 @@
font-size: 16px;
color: @text-level-3-color;
}
p {
display: inline-block;
}
}
.t-list-item__action {
line-height: 20px;
font-family: PingFangSC-Regular;
font-size: 12px;
color: @text-level-2-color;
}
&:hover {
.text {
color: @brand-color-8;
@ -217,10 +251,12 @@
}
}
}
.t-list-item:last-child {
padding-bottom: 0;
}
}
.user-right-todo {
padding: 24px;
@ -239,6 +275,7 @@
}
}
}
.user-bottom {
padding: 24px;
background: #fff;
@ -261,6 +298,7 @@
height: 64px;
}
}
&-title {
white-space: nowrap;
text-overflow: ellipsis;
@ -271,6 +309,7 @@
font-size: 16px;
color: @text-level-1-color;
}
&-date {
white-space: nowrap;
text-overflow: ellipsis;
@ -280,17 +319,20 @@
font-size: 14px;
color: @text-level-3-color;
}
&:hover {
background: #f7f7f7;
}
}
.contract:last-child,
.contract:nth-last-child(2) {
margin-bottom: 0;
}
}
}
.user-bottom .user-right{
.user-bottom .user-right {
height: 447px;
background: #fff;
border-radius: @border-radius;

1
src/store/modules/setting.js

@ -83,6 +83,7 @@ const actions = {
async changeTheme({ commit }, payload) {
commit('update', payload);
const { backgroundTheme, brandTheme } = payload;
// eslint-disable-next-line no-return-await
return await replaceStyleVariables({
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
});

10
src/style/font-family.less

@ -1,6 +1,6 @@
@font-face {
font-family: "TencentSansW7";
src: url("data:application/font-woff;charset=utf-8;base64,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") format("woff");
font-weight: normal;
font-style: normal;
}
font-family: 'TencentSansW7';
src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
font-weight: normal;
font-style: normal;
}

283
src/style/index.less

@ -1,166 +1,171 @@
@import "./common.less";
@import "./variables.less";
@import "./rewrite.less";
@import "./font-family.less";
@import "./sidenav.less";
@import './common.less';
@import './variables.less';
@import './rewrite.less';
@import './font-family.less';
@import './sidenav.less';
body {
color: @text-level-2-color;
font-family: -apple-system, BlinkMacSystemFont, @font-family;
font-size: @font-size-base;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding: 0;
}
pre {
font-family: @font-family;
}
ul,
dl,
li,
dd,
dt {
margin: 0;
padding: 0;
list-style: none;
}
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
margin-bottom: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.@{prefix}-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: @text-level-2-color;
font-family: -apple-system, BlinkMacSystemFont, @font-family;
font-size: @font-size-base;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding: 0;
}
pre {
font-family: @font-family;
}
ul,
dl,
li,
dd,
dt {
margin: 0;
padding: 0;
list-style: none;
}
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
margin-bottom: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.@{prefix}-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.@{prefix}-text-tip {
font-size: 12px;
color: @text-level-3-color;
}
.@{prefix}-pic {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.@{prefix}-main-link {
color: @text-level-1-color;
text-decoration: none;
cursor: pointer;
&:hover {
color: @text-level-1-color;
}
.@{prefix}-text-tip {
font-size: 12px;
color: @text-level-3-color;
&:active {
color: @text-level-1-color;
}
.@{prefix}-pic {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
&--active {
color: #000;
}
.@{prefix}-main-link {
color: @text-level-1-color;
&:focus {
text-decoration: none;
cursor: pointer;
&:hover {
color: @text-level-1-color;
}
&:active {
color: @text-level-1-color;
}
&--active {
color: #000;
}
&:focus {
text-decoration: none;
}
}
}
.@{prefix}-link {
color: @primary-color;
.@{prefix}-link {
color: @primary-color;
text-decoration: none;
margin-right: @spacer-3;
text-decoration: none;
margin-right: @spacer-3;
cursor: pointer;
cursor: pointer;
&:hover {
color: @primary-color;
}
&:active {
color: @primary-color;
}
&:hover {
color: @primary-color;
}
&--active {
color: @primary-color;
}
&:active {
color: @primary-color;
}
&:focus {
text-decoration: none;
}
&--active {
color: @primary-color;
}
// 布局元素调整
.@{prefix}-wrapper {
height: 100vh;
display: flex;
flex-direction: column;
&:focus {
text-decoration: none;
}
.@{prefix}-sidenav-layout {
}
// 布局元素调整
.@{prefix}-wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
.@{prefix}-sidenav-layout {
&-relative {
height: 100%;
}
}
.@{prefix}-content-layout {
margin: @spacer-3;
&-relative {
height: 100%;
}
}
.@{prefix}-content-layout {
margin: @spacer-3;
}
.@{prefix}-footer-layout {
padding: 0;
margin-bottom: @spacer-2;
}
.@{prefix}-footer-layout {
padding: 0;
margin-bottom: @spacer-2;
}
.@{prefix}-footer {
color: rgba(0, 0, 0, 0.3);
line-height: 20px;
text-align: center;
}
.@{prefix}-footer {
color: rgba(0, 0, 0, .3);
line-height: 20px;
text-align: center;
}
.@{prefix}-icon-container {
width: 16px;
height: 16px;
margin-left: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.@{prefix}-icon-container {
width: 16px;
height: 16px;
margin-left: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.@{prefix}-flat-icon {
width: 10px;
height: 3px;
background: rgba(0,0,0,0.60);
}
.@{prefix}-flat-icon {
width: 10px;
height: 3px;
background: rgba(0,0,0,.60);
}
.@{prefix}-up-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent #00A870 transparent;
}
.@{prefix}-up-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent #00a870 transparent;
}
.@{prefix}-down-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 0 6px;
border-color: #E34D59 transparent transparent transparent;
}
.@{prefix}-down-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 0 6px;
border-color: #e34d59 transparent transparent transparent;
}

151
src/style/sidenav.less

@ -1,94 +1,101 @@
@import './variables.less';
@import './font-family.less';
.@{prefix} {
&-sidebar-layout {
height: 100%;
&-sidebar-layout {
height: 100%;
}
&-sidebar-compact {
width: 64px;
}
&-sidebar-layout-side {
z-index: 100;
}
&-sidenav {
position: fixed;
top: 0;
bottom: 0;
z-index: 10;
transition: all .3s;
min-height: 100%;
&-mix {
top: 64px;
&-fixed {
top: 64px;
z-index: 0;
}
}
&-no-fixed {
position: relative;
z-index: 1;
}
&-sidebar-compact {
width: 64px;
&-no-logo {
z-index: 1;
}
&-sidebar-layout-side {
z-index: 100;
&-logo-wrapper {
display: flex;
align-items: center;
width: 100%;
}
&-sidenav{
position: fixed;
top: 0;
bottom: 0;
z-index: 10;
transition: all .3s;
min-height: 100%;
&-mix {
top: 64px;
&-fixed {
top: 64px;
z-index: 0;
}
}
&-no-fixed {
position: relative;
z-index: 1;
}
&-no-logo {
z-index: 1;
}
&-logo-wrapper {
display: flex;
align-items: center;
width: 100%;
}
&-logo-t-logo {
width: 32px;
margin-left: 16px;
}
&-logo-tdesign-logo {
width: 112px;
}
&-logo-normal {
font-family: TencentSansKoreanW7;
color: @primary-color;
font-size: @font-size-l;
transition: all .3s;
}
&-logo-t-logo {
width: 32px;
margin-left: 16px;
}
&-logo-tdesign-logo {
width: 112px;
}
&-sidenav-placeholder {
flex: 1 1 232px;
min-width: 232px;
transition: all .3s;
&-logo-normal {
font-family: TencentSansKoreanW7;
color: @primary-color;
font-size: @font-size-l;
transition: all .3s;
}
}
&-hidden {
flex: 1 1 72px;
min-width: 72px;
transition: all .3s;
}
&-sidenav-placeholder {
flex: 1 1 232px;
min-width: 232px;
transition: all .3s;
&-hidden {
flex: 1 1 72px;
min-width: 72px;
transition: all .3s;
}
}
}
.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold {
color: rgba(255, 255, 255, 0.55)
color: rgba(255, 255, 255, .55)
}
.logo-container {
cursor: pointer;
display: inline-flex;
height: 64px;
margin-left: 24px;
}
cursor: pointer;
display: inline-flex;
height: 64px;
margin-left: 24px;
}
.optional-icon {
color: #000000;
cursor: pointer;
.optional-icon {
color: #000;
cursor: pointer;
&:hover {
color: @primary-color;
}
}
&:hover {
color: @primary-color;
}
}

10
stylelint.config.js

@ -0,0 +1,10 @@
module.exports = {
defaultSeverity: 'error',
extends: ['stylelint-config-airbnb'],
plugins: ['stylelint-scss'],
rules: {
'max-nesting-depth': 10,
'string-quotes': 'single',
'declaration-property-value-disallowed-list': { '/^border/': ['none'] },
},
};
Loading…
Cancel
Save