样式美化

pull/9/head
ruibaby 6 years ago
parent e0591f7749
commit 4799a7ec31

@ -1,7 +1,10 @@
<template>
<div class="footer">
<div class="copyright">
Proudly power by <a target="_blank" href="https://github.com/halo-dev/halo">Halo</a>
Proudly power by
<router-link :to="{ name:'About' }">
<a href="javascript:void(0);">Halo</a>
</router-link>
</div>
</div>
</template>

@ -176,6 +176,13 @@ export const asyncRouterMap = [
name: 'ToolList',
component: () => import('@/views/system/ToolList'),
meta: { title: '小工具', hiddenHeaderContent: false }
},
{
path: '/system/about',
name: 'About',
component: () => import('@/views/system/About'),
hidden: true,
meta: { title: '关于 Halo', hiddenHeaderContent: false }
}
]
}

@ -2,23 +2,17 @@
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<a-card>
<div style="margin-bottom: 16px">
<a-input
v-model="postToStage.title"
v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
size="large"
placeholder="请输入页面标题"
/>
</div>
<a-button type="primary" @click="showDrawer"></a-button>
</a-card>
<a-card>
<div id="editor">
<mavon-editor v-model="postToStage.originalContent"/>
</div>
</a-card>
<div style="margin-bottom: 16px">
<a-input
v-model="postToStage.title"
v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
size="large"
placeholder="请输入页面标题"
/>
</div>
<div id="editor">
<mavon-editor v-model="postToStage.originalContent" :boxShadow="false" :ishljs="true"/>
</div>
</a-col>
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
@ -34,17 +28,17 @@
<h3 class="post-setting-drawer-title">基本设置</h3>
<div class="post-setting-drawer-item">
<a-form layout="vertical">
<a-form-item label="页面路径:" :help="'https://localhost:8090/p/'+ (postToStage.url ? postToStage.url : '{auto_generate}')">
<a-form-item
label="页面路径:"
:help="'https://localhost:8090/p/'+ (postToStage.url ? postToStage.url : '{auto_generate}')"
>
<a-input v-model="postToStage.url"/>
</a-form-item>
<a-form-item label="页面密码:">
<a-input type="password" v-model="postToStage.password"/>
</a-form-item>
<a-form-item label="是否关闭评论:">
<a-radio-group
v-model="postToStage.disallowComment"
:defaultValue="false"
>
<a-radio-group v-model="postToStage.disallowComment" :defaultValue="false">
<a-radio :value="false">开启</a-radio>
<a-radio :value="true">关闭</a-radio>
</a-radio-group>
@ -76,11 +70,19 @@
</a-drawer>
</a-col>
</a-row>
<footer-tool-bar
:style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
>
<a-button type="primary" @click="showDrawer"></a-button>
<a-button type="dashed" style="margin-left: 8px;">附件库</a-button>
</footer-tool-bar>
</div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import FooterToolBar from '@/components/FooterToolbar'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import 'mavon-editor/dist/css/index.css'
import postApi from '@/api/post'
@ -88,9 +90,9 @@ import themeApi from '@/api/theme'
export default {
name: 'Editor',
components: {
mavonEditor
mavonEditor,
FooterToolBar
},
mixins: [mixin, mixinDevice],
data() {
return {
@ -179,17 +181,9 @@ export default {
}
</script>
<style scoped>
#editor {
margin: auto;
width: 100%;
}
.v-note-wrapper {
z-index: 1000;
}
.ant-card {
margin-bottom: 16px;
min-height: 540px;
}
.ant-form-vertical .ant-form-item {

@ -11,9 +11,11 @@
<div class="card-container">
<a-tabs type="card">
<a-tab-pane
tab="内置页面"
key="internal"
>
<span slot="tab">
<a-icon type="pushpin" />内置页面
</span>
<a-table
:columns="internalColumns"
:dataSource="internalPages"
@ -45,9 +47,12 @@
</a-table>
</a-tab-pane>
<a-tab-pane
tab="自定义页面"
key="custom"
>自定义页面</a-tab-pane>
>
<span slot="tab">
<a-icon type="fork" />内置页面
</span>
自定义页面</a-tab-pane>
</a-tabs>
</div>
</a-col>

@ -497,10 +497,6 @@ export default {
min-height: 540px;
}
.ant-card {
margin-bottom: 16px;
}
.ant-form-vertical .ant-form-item {
padding-bottom: 0;
}

@ -0,0 +1,10 @@
<template>
<div class="page-header-index-wide">About page</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>

@ -2,7 +2,10 @@
<div class="page-header-index-wide">
<div class="card-container">
<a-tabs type="card">
<a-tab-pane tab="资源文件备份" key="1">
<a-tab-pane key="1">
<span slot="tab">
<a-icon type="folder" />资源文件备份
</span>
<a-table :columns="columns" :dataSource="ResourcesData">
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="downResources('ResourcesData',record.id)"></a>
@ -14,7 +17,10 @@
</a-table>
<a-button type="primary" @click="backupData('ResourcesData')"></a-button>
</a-tab-pane>
<a-tab-pane tab="数据库备份" key="2">
<a-tab-pane key="2">
<span slot="tab">
<a-icon type="database" />资源文件备份
</span>
<a-table :columns="columns" :dataSource="DataBaseData">
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="downResources('DataBaseData',record.id)"></a>
@ -26,7 +32,10 @@
</a-table>
<a-button type="primary" @click="backupData('DataBaseData')"></a-button>
</a-tab-pane>
<a-tab-pane tab="文章备份" key="3">
<a-tab-pane key="3">
<span slot="tab">
<a-icon type="read" />文章备份
</span>
<a-table :columns="columns" :dataSource="FileData">
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="downResources('FileData',record.id)"></a>
@ -125,11 +134,8 @@ export default {
<style>
.card-container {
background: #f5f5f5;
overflow: hidden;
padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
/* height: 120px; */
margin-top: -16px;
}
@ -151,4 +157,7 @@ export default {
border-color: #fff;
background: #fff;
}
.ant-form-vertical .ant-form-item {
padding-bottom: 0;
}
</style>

@ -35,7 +35,7 @@
</a-tab-pane>
<a-tab-pane key="seo">
<span slot="tab">
<a-icon type="read" />SEO设置
<a-icon type="global" />SEO设置
</span>
<a-form layout="vertical">
<a-form-item label="关键词: " :wrapper-col="wrapperCol">

@ -4,23 +4,32 @@
<a-col :lg="10" :md="24" :style="{ 'padding-bottom': '12px' }">
<a-card :bodyStyle="{ padding: '16' }" :bordered="false">
<div class="profile-center-avatarHolder">
<div class="avatar">
<img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" />
</div>
<a-tooltip placement="right" :trigger="['hover']" title="点击可修改头像">
<template slot="title">
<span>prompt text</span>
</template>
<div class="avatar">
<img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'">
</div>
</a-tooltip>
<div class="username">{{ user.nickname }}</div>
<div class="bio">{{ user.description }}</div>
</div>
<div class="profile-center-detail">
<p>
<a-icon type="mail" />
<a-icon type="link"/>
<a href="http://localhost:8090" target="method">http://localhost:8090</a>
</p>
<p>
<a-icon type="mail"/>
{{ user.email }}
</p>
<p>
<a-icon type="calendar" />
<a-icon type="calendar"/>
{{ counts.establishDays || 0 }}
</p>
</div>
<a-divider />
<a-divider/>
<div class="general-profile">
<a-list :loading="countsLoading" itemLayout="horizontal">
<a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章</a-list-item>
@ -37,43 +46,48 @@
<a-card :bodyStyle="{ padding: '0' }" :bordered="false" title="个人资料">
<div class="card-container">
<a-tabs type="card">
<a-tab-pane key="1" tab="基本资料">
<a-tab-pane key="1">
<span slot="tab">
<a-icon type="idcard"/>基本资料
</span>
<a-form layout="vertical">
<a-form-item label="用户名:">
<a-input v-model="user.username" />
<a-input v-model="user.username"/>
</a-form-item>
<a-form-item label="昵称:">
<a-input v-model="user.nickname" />
<a-input v-model="user.nickname"/>
</a-form-item>
<a-form-item label="邮箱:">
<a-input v-model="user.email" />
<a-input v-model="user.email"/>
</a-form-item>
<a-form-item label="个人说明:">
<a-input :autosize="{ minRows: 5 }" type="textarea" v-model="user.description" />
<a-input :autosize="{ minRows: 5 }" type="textarea" v-model="user.description"/>
</a-form-item>
<a-form-item>
<a-button @click="updateProfile" type="primary">保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="密码">
<a-tab-pane key="2">
<span slot="tab">
<a-icon type="lock"/>密码
</span>
<a-form layout="vertical">
<a-form-item label="原密码:">
<a-input type="password" v-model="passwordParam.oldPassword" />
<a-input type="password" v-model="passwordParam.oldPassword"/>
</a-form-item>
<a-form-item label="新密码:">
<a-input type="password" v-model="passwordParam.newPassword" />
<a-input type="password" v-model="passwordParam.newPassword"/>
</a-form-item>
<a-form-item label="确认密码:">
<a-input type="password" v-model="passwordParam.confirmPassword" />
<a-input type="password" v-model="passwordParam.confirmPassword"/>
</a-form-item>
<a-form-item>
<a-button
:disabled="passwordUpdateButtonDisabled"
@click="updatePassword"
type="primary"
>确认更改
</a-button>
>确认更改</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
@ -162,6 +176,7 @@ export default {
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
img {
height: 100%;

Loading…
Cancel
Save