From 285e655d1bb1311cc49e2e648bed6f22204750d1 Mon Sep 17 00:00:00 2001 From: 1549469775 <1549469775@qq.com> Date: Mon, 18 Oct 2021 14:20:17 +0800 Subject: [PATCH] page --- src/common/css/__less/meida.less | 10 ++-- src/common/css/__less/row.less | 53 ++++++++++++--------- src/common/css/__less/util.less | 2 +- src/common/css/__less/visible copy.less | 57 ++++++++++++++++++++++ src/common/css/__less/visible.less | 57 ++++------------------ src/common/css/reset.css | 3 ++ src/common/css/style.less | 11 +++-- src/css/index/index.less | 84 ++++++++++++++++++++++++++++++--- src/html/__layout/layout.pug | 4 +- src/html/index.pug | 35 +++++++++++--- 10 files changed, 220 insertions(+), 96 deletions(-) create mode 100644 src/common/css/__less/visible copy.less diff --git a/src/common/css/__less/meida.less b/src/common/css/__less/meida.less index 744d371..4b463d2 100644 --- a/src/common/css/__less/meida.less +++ b/src/common/css/__less/meida.less @@ -1,24 +1,24 @@ /** * 响应式 媒体查询类 **/ - +// PC端有限规则 .choose(@type, @style) when (@type=xs){ - @media (max-width: 767.9999px){ + @media (max-width: 768px){ @style(); } } .choose(@type, @style) when (@type=sm){ - @media (min-width: 768px) and (max-width: 991.9999px){ + @media (max-width: 920px){ @style(); } } .choose(@type, @style) when (@type=md){ - @media (min-width: 992px) and (max-width: 1199.9999px) { + @media (max-width: 1200px) { @style(); } } .choose(@type, @style) when (@type=lg){ - @media (min-width: 1200px) { + @media (max-width: 1366px) { @style(); } } diff --git a/src/common/css/__less/row.less b/src/common/css/__less/row.less index bf58757..1aae81b 100644 --- a/src/common/css/__less/row.less +++ b/src/common/css/__less/row.less @@ -3,32 +3,39 @@ **/ @totalCell: 24; -.col-width(@col: 8, @total: @totalCell){ - width: (@col/@total)*100%; +.col-width(@col: 8, @total: @totalCell) { + width: (@col / @total) * 100%; } .col(@i, @mv) when (@i > 0) { - .col((@i - 1), @mv); // 递归调用自身 - .col-@{mv}-@{i} { + .col((@i - 1), @mv); // 递归调用自身 + .col-@{mv}-@{i} { float: left; + .col-width(@i); } - .col-@{mv}-@{i} { - .col-width(@i); - } - } - +} + +.colr(@i) when (@i > 0) { + .colr((@i - 1)); // 递归调用自身 + .col-@{i} { + float: left; + .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 + .clearfix(); + .colr(@totalCell); + .media({ + .col(@totalCell, lg); + }, lg); + .media({ + .col(@totalCell, md); + }, md); + .media({ + .col(@totalCell, sm); + }, sm); + .media({ + .col(@totalCell, xs); + }, xs); +} diff --git a/src/common/css/__less/util.less b/src/common/css/__less/util.less index e35387b..c04f274 100644 --- a/src/common/css/__less/util.less +++ b/src/common/css/__less/util.less @@ -69,7 +69,7 @@ .over-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; diff --git a/src/common/css/__less/visible copy.less b/src/common/css/__less/visible copy.less new file mode 100644 index 0000000..7aae3b8 --- /dev/null +++ b/src/common/css/__less/visible copy.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/__less/visible.less b/src/common/css/__less/visible.less index b2ba3fb..f4d0a10 100644 --- a/src/common/css/__less/visible.less +++ b/src/common/css/__less/visible.less @@ -3,55 +3,14 @@ **/ @display: block; -@hide-array: hidden-xs, hidden-sm, hidden-md, hidden-lg; +@hide-array: xs, sm, md, lg; .hide(@i: 1) when(@i <= length(@hide-array)) { - @name: extract(@hide-array, @i); - .@{name} { - display: @display; - } - .hide((@i + 1)); + @name: extract(@hide-array, @i); + .hidden-@{name} { + .media({ + display: none; + }, @name); + } + .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 index a8ef7f1..fcdace3 100644 --- a/src/common/css/reset.css +++ b/src/common/css/reset.css @@ -45,4 +45,7 @@ q:before, q:after { table { border-collapse: collapse; border-spacing: 0; +} +a{ + text-decoration: none; } \ No newline at end of file diff --git a/src/common/css/style.less b/src/common/css/style.less index 2884045..17f876d 100644 --- a/src/common/css/style.less +++ b/src/common/css/style.less @@ -14,7 +14,10 @@ body{ .container{ margin: 0 auto; - width: 700px; + max-width: 800px; + .media({ + margin: 0 15px; + },xs,sm,md) } /** @@ -78,7 +81,7 @@ header{ top: 0; z-index: 999; font-size: 1.333em; - background-color: #fffef870; + background-color: rgba(255, 254, 248, 0.44); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-bottom: 15px; @@ -93,7 +96,7 @@ header{ height: 100%; padding: 0 10px; &:hover{ - background-color: #fffef870; + background-color: rgba(255, 254, 248, 0.44); } } .menulist{ @@ -131,7 +134,7 @@ header{ height: 5px; display: block; border-radius: 6px; - background-color: #fffef870; + background-color: rgba(255, 254, 248, 0.44); transition: height .4s ease; } } \ No newline at end of file diff --git a/src/css/index/index.less b/src/css/index/index.less index a416323..2aa3f39 100644 --- a/src/css/index/index.less +++ b/src/css/index/index.less @@ -1,7 +1,7 @@ .panel{ - // background-color: #fffef870; + // background-color: rgba(255, 254, 248, 0.44); border-radius: 6px; padding: 8px; text-align: center; @@ -25,7 +25,7 @@ position: absolute; right: 100%; top: 200px; - background-color: #fffef870; + background-color: rgba(255, 254, 248, 0.44); border-top-left-radius: 6px; border-bottom-left-radius: 6px; width: 45px; @@ -50,11 +50,83 @@ } .motto{ - text-align: center; font-size: 20px; - margin: 6px 0; + line-height: 1; + margin-top: 6px; + margin-bottom: 12px; + padding-top: 8px; + span{ + position: relative; + &::before{ + content: "座右铭"; + position: absolute; + font-size: 12px; + transform: scale(.9); + transform-origin: left bottom; + left: 0; + bottom: 100%; + } + } } -.panel{ - +.card{ + color: #333333; + height: 70px; + margin: 8px 10px; + background-color: rgba(255, 254, 248, 0.44); + border-radius: 4px; + padding: 5px 10px; + box-shadow: 0px 5px 9px 0px rgba(134, 134, 134, 0.2); + display: flex; + align-items: center; + cursor: pointer; + transition: transform .5s ease, background .5s ease; + &:hover{ + transform: scale(1.1) translateY(-6px); + background-color: rgba(255, 255, 255, 0.8); + // .card__right .title,.desc{ + // color: red !important; + // } + } + .avatar{ + width: 50px; + height: 50px; + border-radius: 50px; + display: block; + } + .card__right{ + flex: 1; + width: 0; + margin-left: 8px; + .title{ + line-height: 25px; + font-size: 16px; + color: #333; + } + .desc{ + font-size: 14px; + line-height: 1; + color: #999; + } + } +} + +.tags{ + margin-left: -6px; + .tag{ + user-select: none; + font-size: 12px; + cursor: pointer; + padding: 6px 8px; + line-height: 1; + display: inline-block; + background-color: rgba(255, 254, 248, 0.44); + border-radius: 4px; + margin: 4px 0; + margin-left: 6px; + &::before{ + content: "#"; + margin-right: 6px; + } + } } \ No newline at end of file diff --git a/src/html/__layout/layout.pug b/src/html/__layout/layout.pug index 8624b57..2731e71 100644 --- a/src/html/__layout/layout.pug +++ b/src/html/__layout/layout.pug @@ -6,8 +6,8 @@ html(lang="zh-cn") meta(name="description" content="一个简单的工具站，demo站") meta(name="keyword" content="工具,博客,demo") meta(name="author" content="温小鱼儿") - //- meta(name="viewport" content="width=device-width, initial-scale=1, user-scalable=no") - meta(name="viewport" content="width=800, initial-scale=1.0") + meta(name="viewport" content="width=device-width, initial-scale=1, user-scalable=no") + //- meta(name="viewport" content="width=800, initial-scale=1.0") include ../__include/head.pug block head body diff --git a/src/html/index.pug b/src/html/index.pug index 88f54f1..75d65c9 100644 --- a/src/html/index.pug +++ b/src/html/index.pug @@ -3,14 +3,37 @@ extends __layout/layout.pug block title //-标题 - - var title = "今生今世" + - var title = "个人简章" block content .container.page include __include/header include __include/person - .line - .motto.hidden-xs 衣带渐宽终不悔 - .row - .col-lg-12.col-md-6.col-sm-6.card 1231 - .col-lg-12.col-md-6.col-sm-6.card 1231 \ No newline at end of file + .line.hidden-sm + .motto.hidden-sm + span 衣带渐宽终不悔 + .tags + .tag 阿萨 + .tag 阿萨 + .tag 阿萨 + .row(style="margin: 0 -10px;") + .col-lg-6.col-md-8.col-xs-12.col-6 + a(href="#").card + .card__left + img(src="http://img.daimg.com/uploads/allimg/211005/3-211005154240.jpg", alt="壁纸").avatar + .card__right + .title.ellipsis titletitletitl + .desc.over-ellipsis descdescde + .col-lg-6.col-md-8.col-xs-12.col-6 + a(href="#").card + .card__left + img(src="http://img.daimg.com/uploads/allimg/211005/3-211005154240.jpg", alt="壁纸").avatar + .card__right + .title.ellipsis titletitletitl + .desc.over-ellipsis descdescde + .col-lg-6.col-md-8.col-xs-12.col-6 + .card 3 + .col-lg-6.col-md-8.col-xs-12.col-6 + .card 4 + .col-lg-6.col-md-8.col-xs-12.col-6 + .card 5 \ No newline at end of file