style

src/css/index/index.less

@@ -129,4 +129,30 @@
             margin-right: 6px;
         }
     }
+}
+
+.search-box{
+    .input-wrapper{
+        display: flex;
+        align-items: center;
+        padding: 4px 10px;
+        background-color: rgba(255, 254, 248, 0.44);
+        
+        border-radius: 25px;
+        font-size: 16px;
+        box-sizing: border-box;
+        .icon{
+            margin-right: 5px;
+            display: flex;
+            align-items: center;
+        }
+        input{
+            // width: 200px;
+            font-size: inherit;
+            color: #333333;
+            border: 0;
+            outline: 0;
+            background-color: transparent;
+        }
+    }
 }

src/html/__include/icon/search.pug

@@ -0,0 +1,3 @@
+svg.icon(style='width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg')
+  path(d='M639.800062 0.15995c-211.997751 0-383.880037 171.882287-383.880037 383.880038 0 64.811746 16.218932 125.816682 44.626054 179.399937l-266.924586 266.860606 0.22393 0.19194A112.444861 112.444861 0 0 0 0 910.979319a112.892721 112.892721 0 0 0 112.892721 112.892721c31.510153 0 59.949266-12.987941 80.454858-33.877413l-0.06398-0.06398 266.828616-266.796626c53.615245 28.503093 114.716151 44.786004 179.687847 44.786004 211.997751 0 383.880037-171.882287 383.880038-383.880037s-171.882287-383.880037-383.880038-383.880038zM153.392065 950.007123a55.982505 55.982505 0 0 1-40.499344 17.370571 56.430366 56.430366 0 0 1-56.462355-56.430365c0-15.931022 6.717901-30.166573 17.370571-40.499344l-0.28791-0.25592 258.031365-258.031365a387.111028 387.111028 0 0 0 79.783068 79.911028l-257.935395 257.935395zM639.800062 703.972009c-176.648797 0-319.900031-143.283224-319.900031-319.900031 0-176.648797 143.251234-319.900031 319.900031-319.900032 176.616807 0 319.900031 143.251234 319.900032 319.900032 0 176.616807-143.283224 319.900031-319.900032 319.900031z' fill='#333333')
+  path(d='M639.800062 160.109966a223.930022 223.930022 0 0 0-223.930021 223.930022 15.995002 15.995002 0 0 0 31.990003 0 191.940019 191.940019 0 0 1 191.940018-191.940019 15.995002 15.995002 0 0 0 0-31.990003z' fill='#333333')

src/html/index.pug

@@ -16,14 +16,19 @@ block content
         .tag 阿萨
         .tag 阿萨
         .tag 阿萨
+    form(action="javascript:return true").search-box
+        .input-wrapper
+            label(for="search").icon 
+                include __include/icon/search
+            input(type="search" placeholder="请输入搜索" id="search")
     .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
+                .title.ellipsis 百度
+                .desc.over-ellipsis 百度一下，你就知道
       .col-lg-6.col-md-8.col-xs-12.col-6 
         a(href="#").card 
             .card__left

src/public/static/avatar.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M639.800062 0.15995c-211.997751 0-383.880037 171.882287-383.880037 383.880038 0 64.811746 16.218932 125.816682 44.626054 179.399937l-266.924586 266.860606 0.22393 0.19194A112.444861 112.444861 0 0 0 0 910.979319a112.892721 112.892721 0 0 0 112.892721 112.892721c31.510153 0 59.949266-12.987941 80.454858-33.877413l-0.06398-0.06398 266.828616-266.796626c53.615245 28.503093 114.716151 44.786004 179.687847 44.786004 211.997751 0 383.880037-171.882287 383.880038-383.880037s-171.882287-383.880037-383.880038-383.880038zM153.392065 950.007123a55.982505 55.982505 0 0 1-40.499344 17.370571 56.430366 56.430366 0 0 1-56.462355-56.430365c0-15.931022 6.717901-30.166573 17.370571-40.499344l-0.28791-0.25592 258.031365-258.031365a387.111028 387.111028 0 0 0 79.783068 79.911028l-257.935395 257.935395zM639.800062 703.972009c-176.648797 0-319.900031-143.283224-319.900031-319.900031 0-176.648797 143.251234-319.900031 319.900031-319.900032 176.616807 0 319.900031 143.251234 319.900032 319.900032 0 176.616807-143.283224 319.900031-319.900032 319.900031z" fill="#333333" /><path d="M639.800062 160.109966a223.930022 223.930022 0 0 0-223.930021 223.930022 15.995002 15.995002 0 0 0 31.990003 0 191.940019 191.940019 0 0 1 191.940018-191.940019 15.995002 15.995002 0 0 0 0-31.990003z" fill="#333333" /></svg>