From b6571b96d5ae3cc9631bbf563c4590f4d95fe33a Mon Sep 17 00:00:00 2001 From: zyronon Date: Sat, 21 Aug 2021 00:32:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86sass=E6=8D=A2=E4=B8=BAless=EF=BC=8C?= =?UTF-8?q?=E5=8F=97=E4=B8=8D=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +- src/App.vue | 3 +- src/assets/scss/{anim.scss => anim.less} | 0 src/assets/scss/color.less | 14 + src/assets/scss/color.scss | 14 - src/assets/scss/{custom.scss => custom.less} | 22 +- src/assets/scss/{index.scss => index.less} | 2 +- src/assets/scss/{layout.scss => layout.less} | 0 src/assets/scss/utils.less | 140 +++++++ src/assets/scss/utils.scss | 157 ------- src/assets/scss/variables.less | 2 + src/assets/scss/variables.scss | 2 - src/components/Back.vue | 2 +- src/components/BaseButton.vue | 14 +- src/components/BaseHeader.vue | 4 +- src/components/Check.vue | 2 +- src/components/Comment.vue | 2 +- src/components/Footer.vue | 10 +- src/components/Indicator.vue | 4 +- src/components/Loading.vue | 4 +- src/components/Mask.vue | 2 +- src/components/NoMore.vue | 4 +- src/components/Other.vue | 2 +- src/components/Posters.vue | 2 +- src/components/Search.vue | 4 +- src/components/Share.vue | 2 +- src/components/Video.vue | 4 +- src/components/common/Music.vue | 2 +- src/components/dialog/ConfirmDialog.vue | 6 +- src/components/dialog/FadeDialog.vue | 2 +- src/components/dialog/FromBottomDialog.vue | 8 +- src/components/dialog/NoticeDialog.vue | 4 +- src/components/dialog/SelectDialog.vue | 2 +- src/components/dialog/SimpleConfirmDialog.vue | 2 +- src/components/home/home3.vue | 4 +- src/components/slide/SlideColumnList.vue | 2 +- src/components/slide/SlideItem.vue | 2 +- src/components/slide/SlideList.vue | 4 +- src/components/slide/SlideRowList.vue | 2 +- src/main.js | 2 +- src/pages/home/Attention.vue | 369 ++++++++-------- src/pages/home/Attention2.vue | 73 ++++ src/pages/home/Index 布局完成.vue | 2 +- src/pages/home/Index.vue | 2 +- src/pages/home/Index2.vue | 2 +- src/pages/home/Publish.vue | 4 +- src/pages/home/Test.vue | 2 +- src/pages/home/testt.vue | 191 +++++++++ src/pages/login/Base.scss | 4 +- src/pages/login/Help.vue | 2 +- src/pages/login/Login.vue | 4 +- src/pages/login/OtherLogin.vue | 2 +- src/pages/login/PasswordLogin.vue | 2 +- src/pages/login/RetrievePassword.vue | 2 +- src/pages/login/VerificationCode.vue | 2 +- src/pages/login/components/LoginInput.vue | 4 +- src/pages/login/components/Tooltip.vue | 2 +- src/pages/login/countryChoose.vue | 12 +- src/pages/me/Me.vue | 24 +- src/pages/me/Me2.vue | 50 +-- src/pages/me/Me3.vue | 48 +-- src/pages/me/MyCard.vue | 5 +- src/pages/me/MyCollect.vue | 2 +- src/pages/me/VideoDetail.vue | 14 +- src/pages/me/rightMenu/LookHistory.vue | 4 +- .../MinorProtection/DetailSetting.vue | 6 +- .../me/rightMenu/MinorProtection/Index.vue | 2 +- .../rightMenu/MinorProtection/TriggerTime.vue | 2 +- src/pages/me/rightMenu/Setting.vue | 8 +- src/pages/me/userinfo/AddSchool.vue | 6 +- src/pages/me/userinfo/ChooseCity.vue | 10 +- src/pages/me/userinfo/ChooseDepartment.vue | 8 +- src/pages/me/userinfo/ChooseLocation.vue | 12 +- src/pages/me/userinfo/ChooseProvince.vue | 10 +- src/pages/me/userinfo/ChooseSchool.vue | 12 +- src/pages/me/userinfo/DeclareSchool.vue | 10 +- src/pages/me/userinfo/DisplayType.vue | 2 +- src/pages/me/userinfo/EditUserInfo.vue | 14 +- src/pages/me/userinfo/EditUserInfoItem.vue | 16 +- src/pages/me/我的动态.vue | 12 +- src/pages/message/Chat.vue | 36 +- src/pages/message/ChatDetail.vue | 8 +- src/pages/message/Message.vue | 38 +- src/pages/message/SetRemark.vue | 12 +- src/pages/message/components/ChatMessage.vue | 22 +- .../message/components/swtich/switches.less | 394 ++++++++++++++++++ .../message/components/swtich/switches.scss | 275 ------------ .../message/components/swtich/switches.vue | 2 +- src/pages/other/ServiceProtocol.vue | 2 +- src/pages/people/AddressList.vue | 8 +- src/pages/people/FaceToFace.vue | 2 +- src/pages/people/FindAcquaintance.vue | 24 +- src/pages/people/Scan.vue | 4 +- src/pages/people/components/People.vue | 16 +- src/router/index.js | 2 + 95 files changed, 1322 insertions(+), 947 deletions(-) rename src/assets/scss/{anim.scss => anim.less} (100%) create mode 100644 src/assets/scss/color.less delete mode 100644 src/assets/scss/color.scss rename src/assets/scss/{custom.scss => custom.less} (79%) rename src/assets/scss/{index.scss => index.less} (94%) rename src/assets/scss/{layout.scss => layout.less} (100%) create mode 100644 src/assets/scss/utils.less delete mode 100644 src/assets/scss/utils.scss create mode 100644 src/assets/scss/variables.less delete mode 100644 src/assets/scss/variables.scss create mode 100644 src/pages/home/Attention2.vue create mode 100644 src/pages/home/testt.vue create mode 100644 src/pages/message/components/swtich/switches.less delete mode 100644 src/pages/message/components/swtich/switches.scss diff --git a/package.json b/package.json index 52aaf81..af85f78 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,9 @@ "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", - "mobile-select": "^1.1.2", - "node-sass": "^4.9.3", - "sass-loader": "^7.1.0" + "less": "^4.1.1", + "less-loader": "^7.0.0", + "mobile-select": "^1.1.2" }, "eslintConfig": { "root": false, diff --git a/src/App.vue b/src/App.vue index 1197922..4417fdd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -87,7 +87,7 @@ export default { }, } - diff --git a/src/assets/scss/anim.scss b/src/assets/scss/anim.less similarity index 100% rename from src/assets/scss/anim.scss rename to src/assets/scss/anim.less diff --git a/src/assets/scss/color.less b/src/assets/scss/color.less new file mode 100644 index 0000000..8b77e69 --- /dev/null +++ b/src/assets/scss/color.less @@ -0,0 +1,14 @@ +@main-bg: rgb(22, 26, 37); +@active-main-bg: rgb(31, 37, 52); +@second-text-color: rgb(143, 143, 158); +@second-btn-color: rgb(58, 58, 70); +@second-btn-color-tran: rgba(58, 58, 70, .4); +@line-color: rgb(37, 45, 66); + + +@primary-btn-color: rgb(252, 47, 86); +@disable-primary-btn-color: rgba(252, 47, 86, .5); + +.second-text-color { + color: @second-text-color; +} diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss deleted file mode 100644 index 797a180..0000000 --- a/src/assets/scss/color.scss +++ /dev/null @@ -1,14 +0,0 @@ -$main-bg: rgb(22, 26, 37); -$active-main-bg: rgb(31, 37, 52); -$second-text-color: rgb(143, 143, 158); -$second-btn-color: rgb(58, 58, 70); -$second-btn-color-tran: rgba(58, 58, 70, .4); -$line-color: rgb(37, 45, 66); - - -$primary-btn-color: rgb(252, 47, 86); -$disable-primary-btn-color: rgba(252, 47, 86, .5); - -.second-text-color { - color: $second-text-color; -} diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.less similarity index 79% rename from src/assets/scss/custom.scss rename to src/assets/scss/custom.less index 0000c93..1c6f2dc 100644 --- a/src/assets/scss/custom.scss +++ b/src/assets/scss/custom.less @@ -26,7 +26,7 @@ &.no-active { &:active { - background: $main-bg; + background: @main-bg; } } @@ -35,11 +35,11 @@ } &.border { - border-bottom: 1px solid $line-color; + border-bottom: 1px solid @line-color; } &:active { - background: $active-main-bg; + background: @active-main-bg; } .left { @@ -58,7 +58,7 @@ display: flex; justify-content: space-between; align-items: center; - color: $second-text-color; + color: @second-text-color; img { margin-left: .5rem; @@ -77,21 +77,21 @@ font-size: 1.4rem; &.primary { - background: $primary-btn-color; + background: @primary-btn-color; &:active { - background: $disable-primary-btn-color; + background: @disable-primary-btn-color; } } &.no-active { &:active { &.primary { - background: $primary-btn-color; + background: @primary-btn-color; } &.dark { - background: $second-btn-color; + background: @second-btn-color; } &.white { @@ -113,10 +113,10 @@ } &.dark { - background: $second-btn-color; + background: @second-btn-color; &:active { - background: $second-btn-color-tran; + background: @second-btn-color-tran; } } @@ -134,7 +134,7 @@ p { .line { height: 1px; - background: $line-color; + background: @line-color; width: 100%; } diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.less similarity index 94% rename from src/assets/scss/index.scss rename to src/assets/scss/index.less index f0ad56f..84d901d 100644 --- a/src/assets/scss/index.scss +++ b/src/assets/scss/index.less @@ -15,7 +15,7 @@ html, body { width: 100%; height: 100%; //background: #2e3244; - background: $main-bg; + background: @main-bg; font-size: 62.5%; //letter-spacing: .11rem; margin: 0; diff --git a/src/assets/scss/layout.scss b/src/assets/scss/layout.less similarity index 100% rename from src/assets/scss/layout.scss rename to src/assets/scss/layout.less diff --git a/src/assets/scss/utils.less b/src/assets/scss/utils.less new file mode 100644 index 0000000..b72ef5e --- /dev/null +++ b/src/assets/scss/utils.less @@ -0,0 +1,140 @@ +@use "sass:math"; + + +///* +// +//width +// +//*/ +//$width: 500; +//@while $width >= 0 { +// .w#{$width}p { +// width: #{$width}px !important; +// } +// $width: $width - 10; +//} +// +// +//$width: 100; +//@while $width >= 0 { +// .w#{$width} { +// //width: math.percentage($width / 100) !important; +// } +// $width: $width - 1; +//} +// +///* +// +//$height +// +//*/ +//$height: 500; +//@while $height >= 0 { +// .h#{$height}p { +// height: #{$height}px !important; +// } +// $height: $height - 10; +//} +// +// +//$height: 100; +//@while $height >= 0 { +// .h#{$height} { +// //height: math.percentage($height / 100) !important; +// } +// $height: $height - 1; +//} +// + +/* + +margin + +*/ + + +.ml(5); +.ml(@n, @i: 1) when (@i =< @n) { + .ml@{i}r { + margin-left: (1rem * @i) !important; + } + .ml(@n, (@i + 1)); +} + +.mr(5); +.mr(@n, @i: 1) when (@i =< @n) { + .mr@{i}r { + margin-left: (1rem * @i) !important; + } + .mr(@n, (@i + 1)); +} + +.mt(5); +.mt(@n, @i: 1) when (@i =< @n) { + .mt@{i}r { + margin-left: (1rem * @i) !important; + } + .mt(@n, (@i + 1)); +} + +.mb(5); +.mb(@n, @i: 1) when (@i =< @n) { + .mb@{i}r { + margin-left: (1rem * @i) !important; + } + .mb(@n, (@i + 1)); +} + + +/* +padding +*/ + + +.pb(5); +.pb(@n, @i: 1) when (@i =< @n) { + .pb@{i}r { + margin-left: (1rem * @i) !important; + } + .pb(@n, (@i + 1)); +} + +.pt(5); +.pt(@n, @i: 1) when (@i =< @n) { + .pt@{i}r { + margin-left: (1rem * @i) !important; + } + .pt(@n, (@i + 1)); +} + +.pl(5); +.pl(@n, @i: 1) when (@i =< @n) { + .pl@{i}r { + margin-left: (1rem * @i) !important; + } + .pl(@n, (@i + 1)); +} + +.pr(5); +.pr(@n, @i: 1) when (@i =< @n) { + .pr@{i}r { + margin-left: (1rem * @i) !important; + } + .pr(@n, (@i + 1)); +} + + +/* + +font + +*/ + +.f(40); +.f(@n, @i: 10) when (@i =< @n) { + .f@{i} { + margin-left: (1px * @i) !important; + } + .f(@n, (@i + 1)); +} + diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss deleted file mode 100644 index fa258af..0000000 --- a/src/assets/scss/utils.scss +++ /dev/null @@ -1,157 +0,0 @@ -@use "sass:math"; - - -///* -// -//width -// -//*/ -//$width: 500; -//@while $width >= 0 { -// .w#{$width}p { -// width: #{$width}px !important; -// } -// $width: $width - 10; -//} -// -// -//$width: 100; -//@while $width >= 0 { -// .w#{$width} { -// //width: math.percentage($width / 100) !important; -// } -// $width: $width - 1; -//} -// -///* -// -//$height -// -//*/ -//$height: 500; -//@while $height >= 0 { -// .h#{$height}p { -// height: #{$height}px !important; -// } -// $height: $height - 10; -//} -// -// -//$height: 100; -//@while $height >= 0 { -// .h#{$height} { -// //height: math.percentage($height / 100) !important; -// } -// $height: $height - 1; -//} -// - -/* - -margin - -*/ -$margin: 5; - -@while $margin >= 0 { - .ml#{$margin}r { - margin-left: #{$margin}rem !important; - } - $margin: $margin - 1; -} - -$margin: 5; -@while $margin >= 0 { - .mr#{$margin}r { - margin-right: #{$margin}rem !important; - } - $margin: $margin - 1; -} - -$margin: 5; -@while $margin >=0 { - .mt#{$margin}r { - margin-top: #{$margin}rem !important; - } - $margin: $margin - 1; -} - -$margin: 5; -@while $margin >= 0 { - .mb#{$margin}r { - margin-bottom: #{$margin}rem !important; - } - $margin: $margin - 1; -} - -$margin: 5; -@while $margin >= 0 { - .m#{$margin}r { - margin: #{$margin}rem !important; - } - $margin: $margin - 1; -} - - -/* - -padding - -*/ - - -$padding: 5; -@while $padding >= 0 { - .pl#{$padding}r { - padding-left: #{$padding}rem !important; - } - $padding: $padding - 1; -} - -$padding: 5; -@while $padding >= 0 { - .pr#{$padding}r { - padding-right: #{$padding}rem !important; - } - $padding: $padding - 1; -} - -$padding: 5; -@while $padding >= 0 { - .pt#{$padding}r { - padding-top: #{$padding}rem !important; - } - $padding: $padding - 1; -} - -$padding: 5; -@while $padding >= 0 { - .pb#{$padding}r { - padding-bottom: #{$padding}rem !important; - } - $padding: $padding - 1; -} - -$padding: 5; -@while $padding >= 0 { - .p#{$padding}r { - padding: #{$padding}rem !important; - } - $padding: $padding - 1; -} - - -/* - -font - -*/ - -$font: 40; -@while $font >=10 { - .f#{$font} { - font-size: #{$font}px !important; - } - $font: $font - 1; -} - diff --git a/src/assets/scss/variables.less b/src/assets/scss/variables.less new file mode 100644 index 0000000..35ca1d5 --- /dev/null +++ b/src/assets/scss/variables.less @@ -0,0 +1,2 @@ +@footer-height: 6rem; +@header-height: 6rem; \ No newline at end of file diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss deleted file mode 100644 index 3063082..0000000 --- a/src/assets/scss/variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$footer-height: 6rem; -$header-height: 6rem; \ No newline at end of file diff --git a/src/components/Back.vue b/src/components/Back.vue index 302ff30..c80f8c3 100644 --- a/src/components/Back.vue +++ b/src/components/Back.vue @@ -37,7 +37,7 @@ export default { } - diff --git a/src/components/Other.vue b/src/components/Other.vue index 368fc2f..a9e9209 100644 --- a/src/components/Other.vue +++ b/src/components/Other.vue @@ -121,7 +121,7 @@ export default { } - - \ No newline at end of file diff --git a/src/pages/login/Base.scss b/src/pages/login/Base.scss index 5a1e38b..bc71912 100644 --- a/src/pages/login/Base.scss +++ b/src/pages/login/Base.scss @@ -19,14 +19,14 @@ .sub-title { font-size: 1.2rem; - color: $second-text-color; + color: @second-text-color; } } .notice { margin-top: 1rem; font-size: 1.3rem; - color: $primary-btn-color; + color: @primary-btn-color; } .button { diff --git a/src/pages/login/Help.vue b/src/pages/login/Help.vue index f36137b..2d009b9 100644 --- a/src/pages/login/Help.vue +++ b/src/pages/login/Help.vue @@ -27,7 +27,7 @@ export default { } - diff --git a/src/pages/me/MyCollect.vue b/src/pages/me/MyCollect.vue index 58bebc8..89d2904 100644 --- a/src/pages/me/MyCollect.vue +++ b/src/pages/me/MyCollect.vue @@ -137,7 +137,7 @@ } - + diff --git a/src/pages/other/ServiceProtocol.vue b/src/pages/other/ServiceProtocol.vue index 94e6962..7081a85 100644 --- a/src/pages/other/ServiceProtocol.vue +++ b/src/pages/other/ServiceProtocol.vue @@ -1614,7 +1614,7 @@ export default { } -