lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI布局优化

This commit is contained in:
xugaoyi 2020-04-23 17:15:18 +08:00
parent 6ce09133c2
commit 54af6da86b
20 changed files with 119 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/.vuepress/styles/index.styl
View File

@ -5,7 +5,11 @@ h1
width 1.6rem
// 评论区颜色重置
// // 评论区颜色重置
#vuepress-plugin-comment
@media (min-width: 1200px)
box-shadow: 0 3px 3px 0 rgba(0,0,30,0.1), 0px 4px 4px 0 rgba(0,0,0,0.1)
margin-top: -5px
.gt-container
.gt-meta
border-color var(--borderColor)!important

11
docs/.vuepress/styles/palette.styl
View File

@ -13,18 +13,23 @@
// // 布局
// $navbarHeight = 3.6rem
// $sidebarWidth = 18rem
// $contentWidth = 830px
// $contentWidth = 860px
// $homePageWidth = 1080px
// $rightMenuWidth = 280px // 右侧菜单
// $rightMenuWidth = 230px // 右侧菜单
// // 代码块
// $lineNumbersWrapperWidth = 2.5rem
// // 响应式节点
// $cardLayout = 1200px // 卡片式布局响应节点
// // 浅色模式
// .theme-mode-light
// --bg: #fff
// --textColor: #004050
// --textLightenColor: #0085AD
// --sidebarBg: rgba(255,255,255,.85)
// --borderColor: rgba(0,0,0,.15)
// --codeBgColor: #f6f6f6
// --codeColor: #525252
@ -35,6 +40,7 @@
// --bg: rgb(30,30,34)
// --textColor: rgb(150,150,154)
// --textLightenColor: #0085AD
// --sidebarBg: rgba(30,30,34,.3)
// --borderColor: #2C2C3A
// --codeBgColor: #252526
// --codeColor: #fff
@ -45,6 +51,7 @@
// --bg: #f5f5d5
// --textColor: #004050
// --textLightenColor: #0085AD
// --sidebarBg: #f5f5d5
// --borderColor: rgba(0,0,0,.15)
// --codeBgColor: #282c34
// --codeColor: #fff

5
docs/06.收藏夹/01.网站.md
View File

@ -99,10 +99,11 @@ article: false
## 设计
- [创造师导航](http://chuangzaoshi.com/)
- [设计师网址导航](http://hao.uisdc.com/)
- [uimovement](https://uimovement.com/) 能从这个网站找到不少动画交互的灵感
- [awwwards](https://www.awwwards.com/)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
- [dribbble](https://dribbble.com/) 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面招的
- [dribbble](https://dribbble.com/) 经常能在上面找到很多有创意好看的 gif 或者图片
- [Bēhance](https://www.behance.net/) dribbble 是设计师的微博，Bēhance 是设计师的博客
- [Logojoy](https://logojoy.com/) 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
- [brandmark](http://brandmark.io/) 另一个在线制作 logo 网站

2
theme-vdoing/components/ArticleInfo.vue
View File

@ -91,7 +91,7 @@ function zero(d){
@extend $wrapper
position: relative
z-index: 1
margin: 2.6rem 0 -3.1rem 0
margin-top .5rem
color #888
.articleInfo
overflow hidden

2
theme-vdoing/components/Buttons.vue
View File

@ -200,7 +200,7 @@ export default {
text-align center
cursor pointer
// color var(--textLightenColor)
background rgba(255,255,255,.1)
background var(--bg)
&:hover
&:before
color $accentColor

2
theme-vdoing/components/Catalogue.vue
View File

@ -91,8 +91,8 @@ export default {
dl,dd
margin 0
.column-wrapper
margin-top .6rem
display flex
margin-top 4.6rem!important
padding-bottom 2rem
border-bottom 1px solid var(--borderColor)
img

19
theme-vdoing/components/Footer.vue
View File

@ -42,23 +42,30 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
.iconfont
padding 0 10px
font-size 19px
.footer
padding 2.5rem 2.5rem 3rem
padding 1.5rem 1.5rem 2rem
text-align center
color var(--textColor)
opacity .6
color #666
box-sizing border-box
font-size .85rem
transition all .2s ease
@media (min-width: $cardLayout)
background var(--pageBg)
a
color var(--textColor)
color #666
@media (min-width: ($MQMobile + 1px))
.sidebar-open .footer
width auto
margin-left $sidebarWidth
padding-left ($sidebarWidth + 1.5rem)
@media (min-width 1520px)
.have-rightmenu .footer
padding-right ($rightMenuWidth + 1.5rem)
.no-sidebar .footer
width auto
margin-left 0
padding-left 0
</style>

5
theme-vdoing/components/Home.vue
View File

@ -252,9 +252,10 @@ export default {
background #517EA9
.i-body
background bottom no-repeat
// background-color var(--homeBg)
background-color rgba(220,220,220,0.1)
background-color var(--pageBg)
overflow hidden
.footer
background none
.banner
width 100%
min-height 450px

4
theme-vdoing/components/Home改版.vue
View File

@ -227,7 +227,7 @@ export default {
<style lang="stylus">
.i-body
background bottom no-repeat
background-color rgba(220,220,220,0.1)
background-color var(--pageBg)
overflow hidden
.banner
width 100%
@ -402,6 +402,8 @@ export default {
margin-bottom 6px
.slogan
color var(--textColor)
.footer
background none
@keyframes heart

5
theme-vdoing/components/Navbar.vue
View File

@ -92,6 +92,7 @@ $navbar-horizontal-padding = 1.5rem
.navbar
padding $navbar-vertical-padding $navbar-horizontal-padding
line-height $navbarHeight - 1.4rem
transition transform 0.3s
a, span, img
display inline-block
.logo
@ -118,6 +119,10 @@ $navbar-horizontal-padding = 1.5rem
flex: 0 0 auto
vertical-align top
.hide-navbar
.navbar
transform translateY(-100%)
@media (max-width: $MQMobile)
.navbar
padding-left 4rem

44
theme-vdoing/components/Page.vue
View File

@ -12,6 +12,7 @@
<RightMenu v-if="showRightMenu"/>
<Content class="theme-vdoing-content" />
</div>
<PageEdit />
<PageNav v-bind="{ sidebarItems }" />
@ -74,8 +75,12 @@ export default {
@require '../styles/variable.styl'
.page
padding-bottom 2rem
padding-bottom 3rem
display block
padding-top ($navbarHeight)
@media (min-width $cardLayout)
padding-top ($navbarHeight + 2rem)
background var(--pageBg)
>*
@extend $vdoing-wrapper
@ -86,23 +91,11 @@ export default {
/**
* 右侧菜单的自适应
*/
@media (min-width: 1680px) // 在大屏时
.have-rightmenu // 有右侧菜单时
.page
.theme-vdoing-wrapper
max-width ($contentWidth + $rightMenuWidth)
>*:not(.theme-vdoing-wrapper)
transform translateX(-($rightMenuWidth / 2))
@media (min-width: 1520px) and (max-width: 1679px)
@media (min-width: 720px) and (max-width: 1519px)
.have-rightmenu
.page
transition: all 0s!important
.theme-vdoing-wrapper
max-width ($contentWidth + $rightMenuWidth)
&.sidebar-open
.page >*
margin 0 0 0 2rem
.page
padding-right 0!important
@media (max-width: 1519px)
.right-menu-wrapper
display none
@ -110,21 +103,4 @@ export default {
.sidebar .sidebar-sub-headers
display none
// @media (min-width: 1360px) and (max-width: 1519px)
// .have-rightmenu
// .page
// .theme-vdoing-wrapper
// max-width ($contentWidth + $rightMenuWidth - 200px)
// .theme-vdoing-content,.page-edit,.page-nav,#vuepress-plugin-comment,.article:not(.article-home)
// max-width ($contentWidth - 200px)
// .right-menu-wrapper
// // margin-left ($contentWidth - 180px)
// @media (max-width: 1359px) // 小于等于1359时隐藏右侧锚点菜单
// .right-menu-wrapper
// display none
// @media (min-width: 1360px) // 大于等于1360时隐藏左侧锚点菜单
// .sidebar .sidebar-sub-headers
// display none
</style>

1
theme-vdoing/components/PageNav.vue
View File

@ -186,6 +186,7 @@ function flatten (items, res) {
margin-top -35px
outline 0
transition all .2s
border-radius 2px
@media (max-width: 1340px)
width 50px
@media (max-width: 960px)

4
theme-vdoing/components/RightMenu.vue
View File

@ -49,12 +49,12 @@ export default {
.right-menu-wrapper
width $rightMenuWidth
float right
margin-right -20px
margin-right -($rightMenuWidth + 60px)
position sticky
top 0
font-size .9rem
.right-menu-padding
padding-top ($navbarHeight + 3rem)
padding-top ($navbarHeight + 1rem)
.right-menu-content
max-height 80vh
position relative

1
theme-vdoing/components/SidebarButton.vue
View File

@ -41,6 +41,7 @@
transition left .2s ease
&:hover
box-shadow 0 2px 6px rgba(0,0,0,.15)
background var(--bg)
.icon
display inline
width 1rem

10
theme-vdoing/components/UpdateArticle.vue
View File

@ -71,7 +71,7 @@ export default {
@require '../styles/wrapper.styl'
.article
@extend $wrapper
padding 2rem 2.5rem 0 2.5rem
padding 1.8rem 2rem 0 2rem
&:not(.article-home)
margin-top 2rem
border 8px solid rgba(160,160,160,.1)
@ -109,7 +109,7 @@ export default {
display flex
padding 8px 0
margin 0
height 55px
height 45px
width 100%
// width 50%
// @media (max-width: $MQNarrow)
@ -122,7 +122,7 @@ export default {
width 50px
margin-left 22px
font-weight bold
line-height: 55px;
line-height: 45px;
@media (max-width: $MQNarrow)
width 45px
dt
@ -132,7 +132,7 @@ export default {
color var(--textColor)
flex 1
display: flex;
height: 55px;
height: 45px;
align-items: center;
div
overflow: hidden;
@ -151,7 +151,7 @@ export default {
color #999
text-align right
font-size .9rem
line-height: 55px;
line-height: 45px;
@media (max-width: $MQNarrow)
width 95px
</style>

31
theme-vdoing/layouts/Layout.vue
View File

@ -61,6 +61,7 @@ import Sidebar from '@theme/components/Sidebar.vue'
import Buttons from '@theme/components/Buttons.vue'
import { resolveSidebarItems } from '../util'
import storage from 'good-storage' // 本地存储
import _ from 'lodash'
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
@ -69,6 +70,7 @@ export default {
data () {
return {
hideNavbar: false,
isSidebarOpen: true,
showSidebar: false,
themeMode: 'light'
@ -124,6 +126,7 @@ export default {
return [
{
'no-navbar': !this.shouldShowNavbar,
'hide-navbar': this.hideNavbar, // 向下滚动隐藏导航栏
'sidebar-open': this.isSidebarOpen,
'no-sidebar': !this.shouldShowSidebar,
'have-rightmenu': this.showRightMenu,
@ -153,9 +156,35 @@ export default {
this.$router.afterEach(() => {
this.isSidebarOpenOfclientWidth()
})
},
// 向下滚动收起导航栏
let p = 0, t = 0;
window.addEventListener('scroll', _.throttle(() => {
if(!this.isSidebarOpen) { // 侧边栏关闭时
p = this.getScrollTop()
if(t < p) { // 向下滚动
this.hideNavbar = true
} else { // 向上
this.hideNavbar = false
}
setTimeout(() => {t = p},0)
}
}, 300))
},
watch: {
isSidebarOpen() {
if(this.isSidebarOpen) { // 侧边栏打开时，恢复导航栏显示
this.hideNavbar = false
}
}
},
methods: {
getScrollTop () {
return window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0
},
isSidebarOpenOfclientWidth() {
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
this.isSidebarOpen = false

13
theme-vdoing/styles/index.styl
View File

@ -1,5 +1,5 @@
// 引入字体图标
@import '//at.alicdn.com/t/font_1678482_suhesk0rdo7.css'
@import '//at.alicdn.com/t/font_1678482_ry1g3lguu0k.css'
@require './config'
@require './code'
@ -11,7 +11,6 @@
html, body
padding 0
margin 0
background-color #fff
body
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
@ -88,7 +87,6 @@ a,input,button
.page
transition padding .2s ease
// padding-left $sidebarWidth
padding-left 0
.navbar
@ -100,7 +98,6 @@ a,input,button
height $navbarHeight
background-color var(--bg)
box-sizing border-box
border-bottom 1px solid var(--borderColor)
box-shadow 0 2px 5px rgba(0,0,0,.06)
.sidebar-mask
@ -114,7 +111,7 @@ a,input,button
.sidebar
font-size 16px
background-color rgba(220,220,220,.1)
background-color var(--sidebarBg)
width $sidebarWidth
position fixed
z-index 13
@ -126,7 +123,7 @@ a,input,button
border-right 1px solid var(--borderColor)
overflow-y auto
transform translateX(-100%)
transition transform .2s ease
transition transform .2s
@media (max-width: $MQMobile)
background-color var(--bg)
@ -135,7 +132,7 @@ a,input,button
word-wrap break-word
@extend $wrapper
> *:first-child
margin-top $navbarHeight
// margin-top $navbarHeight // 内容第一个元素的top距离
a:hover
text-decoration underline
@ -198,7 +195,7 @@ h1, h2, h3, h4, h5, h6
margin-bottom 0
&:first-child
margin-top -1.5rem
// margin-top -1.5rem
margin-bottom 1rem
+ p, + pre, + .custom-block

3
theme-vdoing/styles/mobile.styl
View File

@ -50,6 +50,9 @@ $mobileSidebarWidth = $sidebarWidth * 0.95
left $sidebarWidth
.page
padding-left $sidebarWidth
&.have-rightmenu
.page
padding-right $rightMenuWidth
&.no-sidebar
.page
padding-left 0

14
theme-vdoing/styles/palette.styl
View File

@ -33,18 +33,24 @@ $badgeErrorColor = #DA5961
// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 830px
$contentWidth = 860px
$homePageWidth = 1080px
$rightMenuWidth = 280px // 右侧菜单
$rightMenuWidth = 230px // 右侧菜单
// 代码块
$lineNumbersWrapperWidth = 2.5rem
// 响应式节点
$cardLayout = 1200px // 卡片式布局响应节点
// 浅色模式
.theme-mode-light
--bg: #fff
--textColor: #004050
--textLightenColor: #0085AD
--sidebarBg: rgba(255,255,255,.85)
--pageBg: rgba(220,220,220,0.2)
--borderColor: rgba(0,0,0,.15)
--codeBgColor: #f6f6f6
--codeColor: #525252
@ -55,6 +61,8 @@ $lineNumbersWrapperWidth = 2.5rem
--bg: rgb(30,30,34)
--textColor: rgb(150,150,154)
--textLightenColor: #0085AD
--sidebarBg: rgba(120,120,120,.1)
--pageBg: rgba(120,120,120,.1)
--borderColor: #2C2C3A
--codeBgColor: #252526
--codeColor: #fff
@ -65,6 +73,8 @@ $lineNumbersWrapperWidth = 2.5rem
--bg: #f5f5d5
--textColor: #004050
--textLightenColor: #0085AD
--sidebarBg: #f5f5d5
--pageBg: rgba(220,220,220,0.1)
--borderColor: rgba(0,0,0,.15)
--codeBgColor: #282c34
--codeColor: #fff

7
theme-vdoing/styles/wrapper.styl
View File

@ -1,7 +1,12 @@
$vdoing-wrapper
max-width $contentWidth
margin 0 auto
padding 2rem 2.5rem
padding 1rem 2.5rem 2rem 2.5rem
&:not(.footer)
@media (min-width: $cardLayout)
background var(--bg)
border-radius 5px
box-shadow 0 1px 3px 0 rgba(0,0,30,0.1), 1px 2px 4px 0 rgba(0,0,0,0.1)
@media (max-width: $MQNarrow)
padding 2rem
@media (max-width: $MQMobileNarrow)