From 5e96e5657e02bf2c73ae379dd3a30845d59aed12 Mon Sep 17 00:00:00 2001 From: 1549469775 <1549469775@qq.com> Date: Tue, 19 Oct 2021 17:52:50 +0800 Subject: [PATCH] style --- src/css/index/index.less | 26 ++++++++++++++++++++++++++ src/html/__include/icon/search.pug | 3 +++ src/html/index.pug | 9 +++++++-- src/public/static/avatar.svg | 1 + 4 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/html/__include/icon/search.pug create mode 100644 src/public/static/avatar.svg diff --git a/src/css/index/index.less b/src/css/index/index.less index 2aa3f39..bb08adf 100644 --- a/src/css/index/index.less +++ b/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; + } + } } \ No newline at end of file diff --git a/src/html/__include/icon/search.pug b/src/html/__include/icon/search.pug new file mode 100644 index 0000000..2b4bfa0 --- /dev/null +++ b/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') diff --git a/src/html/index.pug b/src/html/index.pug index 75d65c9..3b1df3c 100644 --- a/src/html/index.pug +++ b/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 diff --git a/src/public/static/avatar.svg b/src/public/static/avatar.svg new file mode 100644 index 0000000..051db1e --- /dev/null +++ b/src/public/static/avatar.svg @@ -0,0 +1 @@ + \ No newline at end of file