github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed some style bugs.

pull/3445/head
ruibaby 2019-04-29 20:27:51 +08:00
parent fe38230c97
commit b77988ba50
7 changed files with 303 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/GlobalHeader/GlobalHeader.vue
View File

@ -1,21 +1,54 @@
<template>
<transition name="showHeader">
<div v-if="visible" class="header-animat">
<div
v-if="visible"
class="header-animat"
>
<a-layout-header
v-if="visible"
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
:style="{ padding: '0' }">
<div v-if="mode === 'sidemenu'" class="header">
<a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
:style="{ padding: '0' }"
>
<div
v-if="mode === 'sidemenu'"
class="header"
>
<a-icon
v-if="device==='mobile'"
class="trigger"
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click="toggle"
/>
<a-icon
v-else
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="toggle"
/>
<user-menu></user-menu>
</div>
<div v-else :class="['top-nav-header-index', theme]">
<div
v-else
:class="['top-nav-header-index', theme]"
>
<div class="header-index-wide">
<div class="header-index-left">
<logo class="top-nav-header" v-if="device !== 'mobile'"/>
<s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
<a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
<logo
class="top-nav-header"
v-if="device !== 'mobile'"
/>
<s-menu
v-if="device !== 'mobile'"
mode="horizontal"
:menu="menus"
:theme="theme"
/>
<a-icon
v-else
class="trigger"
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click="toggle"
/>
</div>
<user-menu class="header-index-right"></user-menu>
</div>
@ -117,7 +150,8 @@ export default {
.showHeader-leave-active {
transition: all 0.5s ease;
}
.showHeader-enter, .showHeader-leave-to {
.showHeader-enter,
.showHeader-leave-to {
opacity: 0;
}
</style>

98
src/components/SettingDrawer/SettingDrawer.vue
View File

@ -1,18 +1,33 @@
<template>
<div class="setting-drawer" ref="settingDrawer">
<a-drawer width="300" closable @close="onClose" :visible="visible" :zIndex="9999">
<div
class="setting-drawer"
ref="settingDrawer"
>
<a-drawer
width="300"
closable
@close="onClose"
:visible="visible"
:zIndex="9999"
>
<div class="setting-drawer-index-content">
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">整体风格设置</h3>
<div class="setting-drawer-index-blockChecbox">
<a-tooltip>
<template slot="title">暗色菜单风格</template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
<div
class="setting-drawer-index-item"
@click="handleMenuTheme('dark')"
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg"
alt="dark"
>
<div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
<div
class="setting-drawer-index-selectIcon"
v-if="navTheme === 'dark'"
>
<a-icon type="check" />
</div>
</div>
@ -20,12 +35,18 @@
<a-tooltip>
<template slot="title">亮色菜单风格</template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
<div
class="setting-drawer-index-item"
@click="handleMenuTheme('light')"
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg"
alt="light"
>
<div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
<div
class="setting-drawer-index-selectIcon"
v-if="navTheme !== 'dark'"
>
<a-icon type="check" />
</div>
</div>
@ -42,8 +63,14 @@
:key="index"
>
<template slot="title">{{ item.key }}</template>
<a-tag :color="item.color" @click="changeColor(item.color)">
<a-icon type="check" v-if="item.color === primaryColor"></a-icon>
<a-tag
:color="item.color"
@click="changeColor(item.color)"
>
<a-icon
type="check"
v-if="item.color === primaryColor"
></a-icon>
</a-tag>
</a-tooltip>
</div>
@ -54,22 +81,34 @@
<h3 class="setting-drawer-index-title">导航模式</h3>
<div class="setting-drawer-index-blockChecbox">
<div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
<div
class="setting-drawer-index-item"
@click="handleLayout('sidemenu')"
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg"
alt="sidemenu"
>
<div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
<div
class="setting-drawer-index-selectIcon"
v-if="layoutMode === 'sidemenu'"
>
<a-icon type="check" />
</div>
</div>
<div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
<div
class="setting-drawer-index-item"
@click="handleLayout('topmenu')"
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg"
alt="topmenu"
>
<div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
<div
class="setting-drawer-index-selectIcon"
v-if="layoutMode !== 'sidemenu'"
>
<a-icon type="check" />
</div>
</div>
@ -81,43 +120,64 @@
<h3 class="setting-drawer-index-title">仪表盘</h3>
<a-list :split="false">
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">文章总数</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">评论总数</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">附件总数</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">成立天数</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">最新文章</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">最新日志</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small"/>
<a-switch
slot="actions"
size="small"
/>
<a-list-item-meta>
<div slot="title">最新评论</div>
</a-list-item-meta>

2
src/components/global.less
View File

@ -1,7 +1,7 @@
@import './index.less';
body {
overflow-y: scroll;
overflow-y: scroll!important;
}
.layout.ant-layout {

4
src/layouts/BasicLayout.vue
View File

@ -43,9 +43,7 @@
/>
<!-- layout content -->
<a-layout-content
:style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }"
>
<a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
<transition name="page-transition">
<route-view />
</transition>

11
src/views/interface/ThemeEdit.vue
View File

@ -35,7 +35,7 @@
:xs="24"
:style="{'padding-bottom':'12px'}"
>
<a-card title="Anatole 主题">
<a-card :title="activatedTheme.name+' 主题'">
<theme-file
:files="files"
@listenToSelect="handleSelectFile"
@ -67,11 +67,13 @@ export default {
},
files: [],
file: {},
content: ''
content: '',
activatedTheme: {}
}
},
created() {
this.loadFiles()
this.loadActivatedTheme()
},
methods: {
onSelect(keys) {
@ -85,6 +87,11 @@ export default {
this.files = response.data.data
})
},
loadActivatedTheme() {
themeApi.getActivatedTheme().then(response => {
this.activatedTheme = response.data.data
})
},
handleSelectFile(file) {
const _this = this
if (!file.editable) {

22
src/views/interface/ThemeList.vue
View File

@ -18,12 +18,16 @@
<a-card
hoverable
:title="item.name"
:bodyStyle="{ padding: 0 }"
>
<img
<!-- <img
:alt="item.name"
:src="item.screenshots"
slot="cover"
>
> -->
<div class="theme-thumb">
<img :alt="item.name" :src="item.screenshots">
</div>
<template
class="ant-card-actions"
slot="actions"
@ -381,4 +385,18 @@ export default {
bottom: 80px;
right: 20px;
}
.theme-thumb {
width: 100%;
margin: 0 auto;
position: relative;
padding-bottom: 56%;
overflow: hidden;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
</style>

11
src/views/post/PostEdit.vue
View File

@ -20,17 +20,12 @@
/>
</div>
</a-col>
</a-row>
<a-col
:xl="24"
:lg="24"
:md="24"
:sm="24"
:xs="24"
>
<a-drawer
title="文章设置"
:width="isMobile()?'100%':'460'"
placement="right"
closable
@close="onClose"
:visible="visible"
@ -165,8 +160,6 @@
>发布</a-button>
</div>
</a-drawer>
</a-col>
</a-row>
<AttachmentDrawer v-model="attachmentDrawerVisible" />