From 50a3f119eac2e33147935b7c72b432753cbc34fb Mon Sep 17 00:00:00 2001 From: 1549469775 <1549469775@qq.com> Date: Sat, 25 Sep 2021 21:12:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E9=94=99=E5=93=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/__less/common.less | 57 --------------- src/common/__less/meida.less | 28 -------- src/common/__less/row.less | 47 ------------- src/common/css/__less/common.less | 4 ++ src/common/css/__less/meida.less | 32 +++++++++ src/common/css/__less/row.less | 34 +++++++++ src/common/css/__less/util.less | 79 +++++++++++++++++++++ src/common/css/__less/visible.less | 57 +++++++++++++++ src/common/css/reset.css | 48 +++++++++++++ src/common/css/style.less | 137 +++++++++++++++++++++++++++++++++++++ src/common/js/main.js | 1 + src/common/reset.css | 48 ------------- src/common/style.less | 131 ----------------------------------- src/html/__include/person.pug | 6 +- src/html/index.pug | 4 +- 15 files changed, 396 insertions(+), 317 deletions(-) delete mode 100644 src/common/__less/common.less delete mode 100644 src/common/__less/meida.less delete mode 100644 src/common/__less/row.less create mode 100644 src/common/css/__less/common.less create mode 100644 src/common/css/__less/meida.less create mode 100644 src/common/css/__less/row.less create mode 100644 src/common/css/__less/util.less create mode 100644 src/common/css/__less/visible.less create mode 100644 src/common/css/reset.css create mode 100644 src/common/css/style.less create mode 100644 src/common/js/main.js delete mode 100644 src/common/reset.css delete mode 100644 src/common/style.less diff --git a/src/common/__less/common.less b/src/common/__less/common.less deleted file mode 100644 index b93dec7..0000000 --- a/src/common/__less/common.less +++ /dev/null @@ -1,57 +0,0 @@ -@import (reference) "./meida.less"; - -.hairline(@content) { - &::after { - content: " "; - box-sizing: border-box; - pointer-events: none; - border: 0 solid #ebedf0; - position: absolute; - top: -50%; - right: -50%; - bottom: -50%; - left: -50%; - -webkit-transform: scale(0.5); - transform: scale(0.5); - @content(); - } -} - -.hairline--all() { - .hairline({ - border-width: 1px; - }); -} -.hairline { - .hairline--all(); -} - -.ellipsis(@lines: 1) when (@lines = 1){ - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.ellipsis{ - .ellipsis() -} -.over-ellipsis{ - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; -} - -.clearfix { - &:after { - clear: both; - content: '.'; - display: block; - height: 0; - line-height: 0; - overflow: hidden; - } - *height: 1%; -} \ No newline at end of file diff --git a/src/common/__less/meida.less b/src/common/__less/meida.less deleted file mode 100644 index a4b6ac6..0000000 --- a/src/common/__less/meida.less +++ /dev/null @@ -1,28 +0,0 @@ -.choose(@type, @style) when (@type=xs){ - @media (max-width: 768px){ - @style(); - } -} -.choose(@type, @style) when (@type=sm){ - @media (max-width: 920px){ - @style(); - } -} -.choose(@type, @style) when (@type=md){ - @media (max-width: 1200px){ - @style(); - } -} -.choose(@type, @style) when (@type=lg){ - @media (max-width: 1366px){ - @style(); - } -} -.loop(@i,@style,@list) when (@i 0) { + .col((@i - 1), @mv); // 递归调用自身 + .col-@{mv}-@{i} { + float: left; + } + .col-@{mv}-@{i} { + .col-width(@i); + } + } + +.row { + .clearfix(); + .media({ + .col(@totalCell, xs); + }, xs); + .media({ + .col(@totalCell, sm); + }, sm); + .media({ + .col(@totalCell, md); + }, md); + .media({ + .col(@totalCell, lg); + }, lg); +} \ No newline at end of file diff --git a/src/common/css/__less/util.less b/src/common/css/__less/util.less new file mode 100644 index 0000000..e35387b --- /dev/null +++ b/src/common/css/__less/util.less @@ -0,0 +1,79 @@ +/** +* 工具类 +**/ + +/** +* START============清除浮动=================START +**/ +.clearfix() { + &:after { + clear: both; + content: "."; + display: block; + height: 0; + line-height: 0; + overflow: hidden; + } + *height: 1%; +} + +.clearfix { + .clearfix(); +} +/** +* OVER=============清除浮动==================OVER +**/ +/** +* START============移动端头发丝=================START +**/ +.hairline(@content) { + &::after { + content: " "; + box-sizing: border-box; + pointer-events: none; + border: 0 solid #ebedf0; + position: absolute; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; + -webkit-transform: scale(0.5); + transform: scale(0.5); + @content(); + } +} + +.hairline--all() { + .hairline({ + border-width: 1px; + }); +} +.hairline { + .hairline--all(); +} +/** +* OVER=============移动端头发丝==================OVER +**/ +/** +* START============文本溢出省略号=================START +**/ +.ellipsis(@lines: 1) when (@lines = 1) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ellipsis { + .ellipsis(); +} +.over-ellipsis { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; +} +/** +* OVER=============文本溢出省略号==================OVER +**/ diff --git a/src/common/css/__less/visible.less b/src/common/css/__less/visible.less new file mode 100644 index 0000000..b2ba3fb --- /dev/null +++ b/src/common/css/__less/visible.less @@ -0,0 +1,57 @@ +/** +* 响应式类，控制元素的显示隐藏 +**/ +@display: block; + +@hide-array: hidden-xs, hidden-sm, hidden-md, hidden-lg; +.hide(@i: 1) when(@i <= length(@hide-array)) { + @name: extract(@hide-array, @i); + .@{name} { + display: @display; + } + .hide((@i + 1)); +} +.hide(); + +@visible-array: visible-xs, visible-sm, visible-md, visible-lg; +.visible(@i: 1) when(@i <= length(@visible-array)) { + @name: extract(@visible-array, @i); + .@{name} { + display: none; + } + .visible((@i + 1)); +} +.visible(); + +.media({ + .visible-xs { + display: @display !important; + } + .hidden-xs { + display: none !important; + } +}, xs); +.media({ + .visible-sm { + display: @display !important; + } + .hidden-sm { + display: none !important; + } +}, sm); +.media({ + .visible-md { + display: @display !important; + } + .hidden-md { + display: none !important; + } + }, md); +.media({ + .visible-lg { + display: @display !important; + } + .hidden-lg { + display: none !important; + } + }, lg); diff --git a/src/common/css/reset.css b/src/common/css/reset.css new file mode 100644 index 0000000..a8ef7f1 --- /dev/null +++ b/src/common/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/src/common/css/style.less b/src/common/css/style.less new file mode 100644 index 0000000..2884045 --- /dev/null +++ b/src/common/css/style.less @@ -0,0 +1,137 @@ +@import "./__less/common.less"; + +html, body{ + background-color: #43b244; + color: #fffef8; + height: 100%; + margin: 0; + padding: 0; +} + +body{ + font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; +} + +.container{ + margin: 0 auto; + width: 700px; +} + +/** +* 用户头像 +**/ +.userProfile{ + display: flex; + align-items: center; + height: 100px; +// width: 300px; + font-size: 2.0833em; + line-height: 1.3; + .head{ + width: 100px; + height: 100%; + position: relative; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + .avatar{ + width: 100%; + height: 100%; + position: absolute; + border-radius: 50%; + overflow: hidden; + left: 0; + right: 0; + bottom: 0; + top: 0; + transition: transform .6s linear, left .6s linear; + } + &:hover .avatar{ + transform: rotate(-360deg); + left: -105%; + } + } + .text{ + flex: 1; + width: 0; + margin-left: 10px; + .userName{ + font-size: 1em; + } + .userDesc{ + margin-top: 4px; + font-size: .7em; + } + } +} + +/** +* 用户头像End +**/ +.mb{ + margin-bottom: 20px; +} +header{ + position: sticky; + top: 0; + z-index: 999; + font-size: 1.333em; + background-color: #fffef870; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + margin-bottom: 15px; + padding: 0 30px; + height: 35px; + line-height: 35px; + .item{ + color: inherit; + text-decoration: none; + cursor: pointer; + display: inline-block; + height: 100%; + padding: 0 10px; + &:hover{ + background-color: #fffef870; + } + } + .menulist{ + li{ + float: left; + } + } + .oplist{ + li{ + float: right; + } + } +} + + +.line{ + height: 15px; + width: 200px; + margin: 0 auto; + cursor: pointer; + position: relative; + &:hover{ + height: 15px; + &::after{ + height: 15px; + } + } + &::after{ + content: ""; + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); + height: 5px; + display: block; + border-radius: 6px; + background-color: #fffef870; + transition: height .4s ease; + } +} \ No newline at end of file diff --git a/src/common/js/main.js b/src/common/js/main.js new file mode 100644 index 0000000..d1ee04c --- /dev/null +++ b/src/common/js/main.js @@ -0,0 +1 @@ +console.log(123222); \ No newline at end of file diff --git a/src/common/reset.css b/src/common/reset.css deleted file mode 100644 index a8ef7f1..0000000 --- a/src/common/reset.css +++ /dev/null @@ -1,48 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/src/common/style.less b/src/common/style.less deleted file mode 100644 index ca8d585..0000000 --- a/src/common/style.less +++ /dev/null @@ -1,131 +0,0 @@ -@import "./__less/common.less"; - -html, body{ - background-color: #43b244; - color: #fffef8; - height: 100%; - margin: 0; - padding: 0; -} - -body{ - font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; -} - -.container{ - margin: 0 auto; - width: 700px; -} - -/** -* 用户头像 -**/ -.userProfile{ - display: flex; - align-items: center; - height: 100px; - width: 300px; - font-size: 2.0833em; - line-height: 1.3; - .head{ - width: 100px; - height: 100%; - position: relative; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - .avatar{ - width: 100%; - height: 100%; - position: absolute; - border-radius: 50%; - overflow: hidden; - left: 0; - right: 0; - bottom: 0; - top: 0; - transition: transform .6s linear, left .6s linear; - } - &:hover .avatar{ - transform: rotate(-360deg); - left: -105%; - } - } - .text{ - flex: 1; - width: 0; - margin-left: 10px; - .userName{ - font-size: 1em; - } - .userDesc{ - margin-top: 4px; - font-size: .7em; - } - } -} - -/** -* 用户头像End -**/ -.mb{ - margin-bottom: 20px; -} -header{ - position: sticky; - top: 0; - z-index: 999; - font-size: 1.333em; - background-color: #fffef870; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - margin-bottom: 15px; - padding: 0 30px; - height: 35px; - line-height: 35px; - .item{ - color: inherit; - text-decoration: none; - cursor: pointer; - display: inline-block; - height: 100%; - padding: 0 10px; - &:hover{ - background-color: #fffef870; - } - } - .menulist{ - li{ - float: left; - } - } - .oplist{ - li{ - float: right; - } - } -} - - -.line{ - height: 15px; - width: 200px; - margin: 0 auto; - cursor: pointer; - &:hover{ - height: 15px; - &::after{ - height: 15px; - } - } - &::after{ - content: ""; - height: 5px; - display: block; - border-radius: 6px; - background-color: #fffef870; - transition: height .4s ease; - } -} \ No newline at end of file diff --git a/src/html/__include/person.pug b/src/html/__include/person.pug index 76c6a88..9c74381 100644 --- a/src/html/__include/person.pug +++ b/src/html/__include/person.pug @@ -1,7 +1,7 @@ .userProfile.mb - var avatarURL = "https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg" - .head XYX + .head WXY img(src=avatarURL, alt="topuser", srcset="").avatar .text - .userName 温小鱼 - .userDesc.over-ellipsis 红尘一剑，骑马远游。 \ No newline at end of file + .userName 温小鱼 + .userDesc.over-ellipsis 红尘一剑 \ No newline at end of file diff --git a/src/html/index.pug b/src/html/index.pug index be727a0..ba5a4e5 100644 --- a/src/html/index.pug +++ b/src/html/index.pug @@ -10,6 +10,4 @@ block content include __include/header include __include/person .line - .motto 衣带渐宽终不悔 - .row - .column-3.panel adsdaad \ No newline at end of file + .motto.hidden-xs 衣带渐宽终不悔 \ No newline at end of file