diff --git a/themes/yilia/source-src/css/core/_animation.scss b/themes/yilia/source-src/css/core/_animation.scss index 8929508..7d9bd62 100644 --- a/themes/yilia/source-src/css/core/_animation.scss +++ b/themes/yilia/source-src/css/core/_animation.scss @@ -256,22 +256,22 @@ @keyframes leftIn { from { - transform: translate3d(0, 0, 0); + transform: translate(0, 0); background:$colorBodyBg; } to { - transform: translate3d(333px, 0, 0); + transform: translate(333px, 0); background: none; } } @keyframes leftOut { from { - transform: translate3d(333px, 0, 0); + transform: translate(333px, 0); background: none; } to { - transform: translate3d(0, 0, 0); + transform: translate(0, 0); background:$colorBodyBg; } } @@ -288,22 +288,22 @@ @keyframes smallLeftIn { from { - transform: translate3d(0, 0, 0); + transform: translate(0, 0); opacity: 0; } to { - transform: translate3d(300px, 0, 0); + transform: translate(300px, 0); opacity: 1; } } @keyframes smallleftOut { from { - transform: translate3d(300px, 0, 0); + transform: translate(300px, 0); opacity: 1; } to { - transform: translate3d(0, 0, 0); + transform: translate(0, 0); opacity: 0; } } diff --git a/themes/yilia/source-src/css/mobile.scss b/themes/yilia/source-src/css/mobile.scss index 07607d7..8184fdf 100644 --- a/themes/yilia/source-src/css/mobile.scss +++ b/themes/yilia/source-src/css/mobile.scss @@ -1,8 +1,3 @@ -html, body, #container { - height: auto; - overflow-x: hidden; - overflow-y: auto; -} #mobile-nav { display: block; } diff --git a/themes/yilia/source-src/css/night.scss b/themes/yilia/source-src/css/night.scss index 9200ac8..1e3fa53 100644 --- a/themes/yilia/source-src/css/night.scss +++ b/themes/yilia/source-src/css/night.scss @@ -6,6 +6,38 @@ $articleBg_night: #15202b; // 文章背景色 $borderColor_night: #38444d; // 边框颜色 $textColor_night: #d5d5d5; // 文字颜色 +@keyframes leftIn_night { + from { + transform: translate(0, 0); + background:$mainBg_night; + } + to { + transform: translate(333px, 0); + background: none; + } +} + +@keyframes leftOut_night { + from { + transform: translate(333px, 0); + background: none; + } + to { + transform: translate(0, 0); + background:$mainBg_night; + } +} + +%anmLeftIn_night { + @extend %anmCommon; + animation-name: leftIn_night; +} + +%anmLeftOut_night { + @extend %anmCommon; + animation-name: leftOut_night; +} + body.night { background: $mainBg_night; // 展开菜单之后的背景 @@ -15,6 +47,12 @@ body.night { // 主背景 .mid-col { background: $mainBg_night; + &.show { + @extend %anmLeftIn_night; + } + &.hide { + @extend %anmLeftOut_night; + } } // 文章区域 .article{ diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index 227fed6..fe23de6 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/themes/yilia/source-src/js/slider.js @@ -196,12 +196,13 @@ const waifuTools = { }, "tools.eye"() { // 切换到夜间模式 + document.querySelector('.mid-col').classList.remove('hide') let night = document.querySelector('body').classList.toggle('night') localStorage.setItem('night', night) }, "tools.chart"() { // 一言 - axios.get('https://www.colorfulsweet.site/hitokoto?length=40&format=json').then(res => { + axios.get('https://www.colorfulsweet.site/api/hitokoto?length=40&format=json').then(res => { this.showMessage(res.data.hitokoto + (res.data.from?`  ——${res.data.from}`:'')) }) }