From 0ef864496681378d42a79ea5eec6ba081f95b647 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Mon, 8 Jul 2019 14:28:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E5=90=88=E5=85=A8=E6=96=87=E6=A3=80?= =?UTF-8?q?=E7=B4=A2=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/yilia/layout/_partial/post/share.ejs | 2 +- themes/yilia/layout/_partial/search.ejs | 20 ++++++++++ themes/yilia/layout/_partial/tools.ejs | 2 +- themes/yilia/layout/layout.ejs | 2 + themes/yilia/source-src/css/share.scss | 15 +++----- themes/yilia/source-src/css/tools.scss | 41 +++++++++++++++++++++ themes/yilia/source-src/js/share.js | 4 +- themes/yilia/source-src/js/slider.js | 40 +++++++++++++++++++- 8 files changed, 111 insertions(+), 15 deletions(-) create mode 100644 themes/yilia/layout/_partial/search.ejs diff --git a/themes/yilia/layout/_partial/post/share.ejs b/themes/yilia/layout/_partial/post/share.ejs index d884615..6172d16 100644 --- a/themes/yilia/layout/_partial/post/share.ejs +++ b/themes/yilia/layout/_partial/post/share.ejs @@ -44,4 +44,4 @@ -
\ No newline at end of file +<%#
%> \ No newline at end of file diff --git a/themes/yilia/layout/_partial/search.ejs b/themes/yilia/layout/_partial/search.ejs new file mode 100644 index 0000000..71e9105 --- /dev/null +++ b/themes/yilia/layout/_partial/search.ejs @@ -0,0 +1,20 @@ +
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
\ No newline at end of file diff --git a/themes/yilia/layout/_partial/tools.ejs b/themes/yilia/layout/_partial/tools.ejs index 2d559f2..7f7e1bb 100644 --- a/themes/yilia/layout/_partial/tools.ejs +++ b/themes/yilia/layout/_partial/tools.ejs @@ -26,7 +26,7 @@ - +
diff --git a/themes/yilia/layout/layout.ejs b/themes/yilia/layout/layout.ejs index c6b2fc0..e296e23 100644 --- a/themes/yilia/layout/layout.ejs +++ b/themes/yilia/layout/layout.ejs @@ -31,6 +31,8 @@
<%- partial('_partial/footer') %>
+
+ <%- partial('_partial/search') %> <%- partial('_partial/tools') %> <%- partial('_partial/viewer') %> diff --git a/themes/yilia/source-src/css/share.scss b/themes/yilia/source-src/css/share.scss index 91aa753..f36859b 100644 --- a/themes/yilia/source-src/css/share.scss +++ b/themes/yilia/source-src/css/share.scss @@ -41,9 +41,9 @@ } } .page-modal { - //display: none; + display: none; position: fixed; - top: 24%; + top: 50%; left: 50%; z-index: 1001; padding: 20px; @@ -53,21 +53,16 @@ border-radius: 4px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); opacity: 0; - transform: translate(-50%, -200%); + transform: translate(-50%, -50%); + transition: .3s; p { margin-bottom: 10px; } - &.ready { - visibility: hidden; - display: block; - transform: translate(-50%, -100%); - transition: .3s; - } &.in { + display: block; visibility: visible; opacity: 1; - transform: translate(-50%, 0); } .close { diff --git a/themes/yilia/source-src/css/tools.scss b/themes/yilia/source-src/css/tools.scss index ec08a42..704c9c2 100644 --- a/themes/yilia/source-src/css/tools.scss +++ b/themes/yilia/source-src/css/tools.scss @@ -243,4 +243,45 @@ label.bui-switch-label { } } } +} + +.js-search-box { + .search { + border-bottom: 1px solid #ccc; + background: #f5f5f5; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + width: 500px; + display: flex; + line-height: 40px; + .search-input-icon { + padding: 0 10px; + } + .search-input { + flex-grow: 1; + input[type=text] { + padding: 5px 0; + width: 100%; + outline: 0; + border: none; + background: 0 0; + } + } + } + .search-result { + height: 700px; + .search-result-item { + text-align: left; + border-bottom: 1px dashed $colorC; + padding: 10px 10px 0; + &:hover { + border-bottom-color: $colorA; + } + } + .more-item { + cursor: pointer; + text-align: center; + transform: rotate(180deg) + } + } } \ No newline at end of file diff --git a/themes/yilia/source-src/js/share.js b/themes/yilia/source-src/js/share.js index 476ee66..d500bac 100644 --- a/themes/yilia/source-src/js/share.js +++ b/themes/yilia/source-src/js/share.js @@ -11,7 +11,7 @@ function showWXModal() { }) qrcodeInit = true } - wx.classList.add('in', 'ready') + wx.classList.add('in') mask.classList.add('in') } @@ -19,7 +19,7 @@ function hideModal() { let modals = document.querySelectorAll('.page-modal') let mask = document.querySelector('.mask') Array.prototype.forEach.call(modals, modal => { - modal.classList.remove('in', 'ready') + modal.classList.remove('in') }) mask.classList.remove('in') } diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index 8e8ee56..f0d98c3 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/themes/yilia/source-src/js/slider.js @@ -14,7 +14,7 @@ function setScrollZero() { em.scrollTop = 0 }) } -var waifuTipTimer = null +var waifuTipTimer = null, fullTextSearchTimer = null new Vue({ el: '#container', data: { @@ -28,6 +28,12 @@ new Vue({ showCategories: false, search: null, searchItems: [], + fullTextSearch: { + pageNum: 1, + limit: 10, + words: null + }, + fullTextSearchItems: [], waifu: { tip: null, // 提示语文字 tipOpacity: 0, // 提示语框透明度 @@ -81,6 +87,19 @@ new Vue({ } this.search = null }, + openFullTextSearch() { + this.hideSlider() + this.$refs.fullTextSearch.classList.add('in') + this.$refs.mask.classList.add('in') + }, + loadMoreSearchResult() { + this.fullTextSearch.pageNum ++ + axios.get(window.themeConfig.root + 'api/common/search', {params: this.fullTextSearch}).then(res => { + let result = res.data + this.fullTextSearchItems.hasMore = (result.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit) + this.fullTextSearchItems.push(...result.data) + }) + }, searchKeydown(event) { if(event.keyCode == 13){ // 回车键 this.addSearchItem(this.search) @@ -117,6 +136,25 @@ new Vue({ item.isHide = false }) } + }, + fullTextSearch: { + deep: true, + handler(newVal, oldVal) { + if(!newVal.words) { + return + } + if(fullTextSearchTimer) { + clearTimeout(fullTextSearchTimer) + } + fullTextSearchTimer = setTimeout(() => { + this.fullTextSearchItems.length = 0 + axios.get(window.themeConfig.root + 'api/common/search', {params: newVal}).then(res => { + let result = res.data + this.fullTextSearchItems.hasMore = (result.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit) + this.fullTextSearchItems.push(...result.data) + }) + }, 1000) + } } }, mounted () {