page

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

src/common/css/__less/row.less

@@ -3,32 +3,39 @@
 **/
 
 @totalCell: 24;
-.col-width(@col: 8, @total: @totalCell){
+.col-width(@col: 8, @total: @totalCell) {
-   width: (@col/@total)*100%;
+    width: (@col / @total) * 100%;
 }
 
 .col(@i, @mv) when (@i > 0) {
-  .col((@i - 1), @mv);    // 递归调用自身
+    .col((@i - 1), @mv); // 递归调用自身
-  .col-@{mv}-@{i} {
+    .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();
+    .clearfix();
-  .media({
+    .colr(@totalCell);
-    .col(@totalCell, xs);
+    .media({
-  }, xs);
+        .col(@totalCell, lg);
- .media({
+    }, lg);
-    .col(@totalCell, sm);
+    .media({
-  }, sm);
+        .col(@totalCell, md);
-   .media({
+    }, md);
-    .col(@totalCell, md);
+    .media({
-  }, md);
+        .col(@totalCell, sm);
-   .media({
+    }, sm);
-    .col(@totalCell, lg);
+    .media({
-  }, lg);
+        .col(@totalCell, xs);
-}
+    }, xs);
+}

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;

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

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: extract(@hide-array, @i);
-  .@{name} {
+    .hidden-@{name} {
-    display: @display;
+        .media({
-  }
+            display: none;
-  .hide((@i + 1));
+        }, @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);

src/common/css/reset.css

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

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

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

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=device-width, initial-scale=1, user-scalable=no")
-    meta(name="viewport" content="width=800, initial-scale=1.0") 
+    //- meta(name="viewport" content="width=800, initial-scale=1.0") 
     include ../__include/head.pug
     block head
   body

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 
+    .line.hidden-sm
-    .motto.hidden-xs 衣带渐宽终不悔
+    .motto.hidden-sm 
-    .row
+        span 衣带渐宽终不悔
-      .col-lg-12.col-md-6.col-sm-6.card 1231
+    .tags
-      .col-lg-12.col-md-6.col-sm-6.card 1231
+        .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