Demo
/
gulp-demo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

page

master
1549469775 4 years ago
parent
9e65934cd8
commit
285e655d1b
10 changed files with 220 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/common/css/__less/meida.less
  2. 53
      src/common/css/__less/row.less
  3. 2
      src/common/css/__less/util.less
  4. 57
      src/common/css/__less/visible copy.less
  5. 57
      src/common/css/__less/visible.less
  6. 3
      src/common/css/reset.css
  7. 11
      src/common/css/style.less
  8. 84
      src/css/index/index.less
  9. 4
      src/html/__layout/layout.pug
  10. 35
      src/html/index.pug

10
src/common/css/__less/meida.less
View File

@ -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();
}
}

53
src/common/css/__less/row.less
View File

@ -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);
}
.clearfix();
.colr(@totalCell);
.media({
.col(@totalCell, lg);
}, lg);
.media({
.col(@totalCell, md);
}, md);
.media({
.col(@totalCell, sm);
}, sm);
.media({
.col(@totalCell, xs);
}, xs);
}

2
src/common/css/__less/util.less
View File

@ -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;

57
src/common/css/__less/visible copy.less
View File

@ -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);

57
src/common/css/__less/visible.less
View File

@ -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);

3
src/common/css/reset.css
View File

@ -45,4 +45,7 @@ q:before, q:after {
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
}

11
src/common/css/style.less
View File

@ -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;
}
}

84
src/css/index/index.less
View File

@ -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;
}
}
}

4
src/html/__layout/layout.pug
View File

@ -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

35
src/html/index.pug
View File

@ -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
.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
Write Preview
Loading…
Cancel
Save