Skip to content

Commit 706fca0

Browse files
lc11235lc11235
committed
add new design
1 parent 3efd923 commit 706fca0

13 files changed

+200
-130
lines changed

‎README.md

-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ fakerli blog based on ssr
1212
1. 增加log支持，在后台增加log分析和储存，后台界面增加log日志分析界面（包括访问度，程序执行，内存分布，错误处理(前面可以用echart来表现)，错误自动邮件发布）。进度：0%
1313
1. ~~增加nginx服务器支持。进度：100%~~
1414
1. ~~增加https支持。进度：99%~~(1.需要增加DNS CAA记录，但是这个需要DNS支持；2.支持TLS1.3； 3.支持CSP对引用文件的验证；4.HSTS Preload已经申请(等待通过即可))
15-
1. 增加下拉加载的支持。进度: 0%
1615
1. 给归档页面增加一个按照年份的列表，参照[ququ的博客](https://imququ.com/post/archives.html)。进度：稍等，不急。
17-
1. 参考[这个页面](http://herozhou.coding.me/vue-framework-wz/#/login)。
1816
1. 正式区的首页图无法自动更换。
1917
1. gitalk的权限问题。

‎build/dev-client.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
/**
2-
* eslint - disable
3-
*/
1+
/* eslint - disable */
42
require('eventsource-polyfill');
53
const hotClient = require('webpack-hot-middleware/client?noinfo=true&reload=true');
64

‎build/webpack.client.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ let config = merge(baseConfig, {
1313
externals: {
1414
'jquery': 'jQuery',
1515
'THREE': 'THREE',
16-
'Stats': 'Stats',
1716
},
1817
module: {
1918
rules: [{

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@
6565
"cross-env": "^5.0.1",
6666
"css-loader": "^0.28.4",
6767
"ejs": "^2.5.6",
68+
"eslint": "^4.7.2",
69+
"eslint-plugin-html":"^3.2.2",
6870
"eslint-config-alloy": "^1.0.0",
6971
"eslint-config-lcy-vue": "^2.0.2",
7072
"eslint-config-mysticatea": "^11.0.0",

‎src/admin.vue

+28-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<template>
22
<div id="app" class="g-doc">
3-
<backend-menu v-if="!isLogin"></backend-menu>
4-
<div class="back-wrap" :class="{'back-left': !isLogin, 'back-height': isLogin}">
5-
<div :class="{'back-body-wrap': !isLogin}">
3+
<backend-header v-if="!isLogin" />
4+
<div class="backend-center">
5+
<backend-menu v-if="!isLogin"></backend-menu>
6+
<backendPage v-if="!isLogin" :pageTitle="getTitle" />
7+
<div class="back-wrap" :class="{'back-left': !isLogin, 'back-height': isLogin}">
68
<transition name="fade" mode="out-in">
79
<router-view :key="key"></router-view>
810
</transition>
@@ -17,6 +19,8 @@
1719
import NProgress from 'nprogress';
1820
import backendMenu from './components/backend-menu.vue';
1921
import footerItem from './components/footer.vue';
22+
import backendHeader from './components/backend-header.vue';
23+
import backendPage from './components/backend-page-header.vue';
2024
2125
export default {
2226
name: 'backend',
@@ -32,10 +36,30 @@
3236
},
3337
isLogin() {
3438
return this.$route.path === '/backend/login' || this.$route.path === '/backend/register';
39+
},
40+
getTitle() {
41+
let title = '';
42+
switch (this.$route.path) {
43+
case '/backend/article/list':
44+
title = '管理文章';
45+
break;
46+
case '/backend/article/insert':
47+
title = '发布文章';
48+
break;
49+
case '/backend/tag/list':
50+
title = '管理标签';
51+
break;
52+
case '/backend/tag/insert':
53+
title = '添加标签';
54+
break;
55+
default:
56+
title = '管理账号';
57+
}
58+
return title;
3559
}
3660
},
3761
components: {
38-
backendMenu, footerItem
62+
backendMenu, footerItem, backendHeader, backendPage
3963
},
4064
watch: {
4165
'global.progress'(val) {

‎src/assets/css/style.css

+124-91
Original file line numberDiff line numberDiff line change
@@ -156,9 +156,6 @@ body {
156156
.canvas{
157157
display: inline-block;
158158
}
159-
.g-doc{
160-
background-color: #f6f6f6;
161-
}
162159

163160
.feed-content{
164161
margin-bottom: 30px;
@@ -671,50 +668,6 @@ article .entry-content-archive .date{
671668
border-top: 1px solid #ddd;
672669
}
673670

674-
#backmenu{
675-
position: fixed;
676-
top: 0;
677-
left: 0;
678-
bottom: 0;
679-
z-index: 66;
680-
width: 250px;
681-
min-height: 100%;
682-
background: #fff;
683-
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
684-
-webkit-transition: .4s cubic-bezier(.18, .81, .3, .89);
685-
transition: .4s cubic-bezier(.18, .81, .3, .89);
686-
}
687-
688-
#backmenu.hide{
689-
-webkit-transform: translateX(-100%);
690-
transform: translateX(-100%);
691-
}
692-
693-
.back-article{
694-
width: 100%;
695-
min-height: calc(100vh - 80px);
696-
background-color: #3f3f3f;
697-
color: #999999;
698-
}
699-
700-
.back-wrap{
701-
position: relative;
702-
overflow: hidden;
703-
}
704-
705-
.back-height {
706-
height: 100vh;
707-
}
708-
709-
.back-left {
710-
margin: 30px auto 0;
711-
width: 900px;
712-
}
713-
714-
.back-body-wrap {
715-
min-height: calc(100vh - 30px - 80px);
716-
}
717-
718671
.card-question-head {
719672
background: white;
720673
border-radius: 4px;
@@ -764,49 +717,6 @@ article .entry-content-archive .date{
764717
color: #000;
765718
}
766719

767-
.article-select{
768-
position: fixed;
769-
width: 20%;
770-
height: 10%;
771-
top: 30%;
772-
left: 40%;
773-
z-index: 9999;
774-
}
775-
776-
.article-select.left{
777-
left: 1%;
778-
width: 10%;
779-
-webkit-transition: .5s cubic-bezier(.18, .81, .3, .89);
780-
transition: .5s cubic-bezier(.18, .81, .3, .89);
781-
}
782-
783-
.article-opacity{
784-
position: fixed;
785-
left: 0;
786-
top: 0;
787-
width: 100%;
788-
zoom: 1;
789-
background: #2f2e2e;
790-
z-index: 999;
791-
width:100%;
792-
height:100%;
793-
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
794-
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
795-
opacity:0.5;/*其他，透明度50%*/
796-
}
797-
798-
.article-button-list{
799-
margin-bottom: 10px;
800-
}
801-
802-
.article-upload{
803-
position: absolute;
804-
width: 20%;
805-
height: 5%;
806-
top: 30%;
807-
left: 40%;
808-
}
809-
810720
.search-opacity{
811721
position: fixed;
812722
top: 0;
@@ -973,6 +883,51 @@ article .entry-content-archive .date{
973883
right: 20px;
974884
}
975885

886+
/* 后端页面的样式 */
887+
.g-doc{
888+
background-color: #f6f6f6;
889+
}
890+
891+
#backmenu{
892+
position: absolute;
893+
top: 0;
894+
left: 0;
895+
bottom: 0;
896+
z-index: 66;
897+
width: 250px;
898+
min-height: 100%;
899+
background: #202020;
900+
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
901+
-webkit-transition: .4s cubic-bezier(.18, .81, .3, .89);
902+
transition: .4s cubic-bezier(.18, .81, .3, .89);
903+
}
904+
905+
#backmenu.hide{
906+
-webkit-transform: translateX(-100%);
907+
transform: translateX(-100%);
908+
}
909+
910+
.back-article{
911+
width: 100%;
912+
min-height: calc(100vh - 80px);
913+
background-color: #3f3f3f;
914+
color: #999999;
915+
}
916+
917+
.back-wrap{
918+
position: relative;
919+
overflow: hidden;
920+
}
921+
922+
.back-height {
923+
height: 100vh;
924+
}
925+
926+
.back-left {
927+
margin-left: 300px;
928+
width: 900px;
929+
}
930+
976931
#canvascontainer {
977932
position: absolute;
978933
top: 0px;
@@ -988,7 +943,85 @@ article .entry-content-archive .date{
988943
margin: 120px auto;
989944
}
990945

946+
.logout-button {
947+
position: absolute;
948+
top: 0;
949+
right: 0;
950+
}
951+
952+
.back-header {
953+
width: 100%;
954+
height: 55px;
955+
margin: 0;
956+
padding: 0;
957+
background-color: #143f6d;
958+
border-bottom: 1px solid #cfd8dc;
959+
}
960+
961+
.backend-center {
962+
position: relative;
963+
min-height: calc(100vh - 55px - 80px);
964+
}
965+
966+
.back-card {
967+
background: transparent;
968+
border-radius: 4px;
969+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
970+
position: relative;
971+
display: block;
972+
}
973+
974+
.back-card+.back-card {
975+
margin-top: 10px;
976+
}
977+
978+
.back-card-me .side-entry {
979+
border-top: 1px solid #eef2f2;
980+
display: block;
981+
height: 54px;
982+
line-height: 54px;
983+
padding: 0 25px;
984+
color: #999;
985+
position: relative;
986+
}
987+
988+
.back-card-me .side-entry.active, .card-me .side-entry:hover {
989+
color: #3aced5;
990+
}
991+
992+
.back-card-me .side-entry .icon {
993+
vertical-align: -2px;
994+
margin-right: 12px;
995+
}
996+
997+
.article-button-list{
998+
display: inline-block;
999+
}
1000+
1001+
.article-button-list.left {
1002+
width: 442px;
1003+
margin-right: 12px
1004+
}
1005+
1006+
.article-button-list.right {
1007+
width: 442px;
1008+
}
1009+
1010+
.article-upload{
1011+
width: 60%;
1012+
height: 300px;
1013+
margin: 0 auto;
1014+
}
1015+
1016+
.back-page-header {
1017+
margin-left: 255px;
1018+
line-height: 3;
1019+
font-size: 2em;
1020+
}
9911021

1022+
.back-page-ul li {
1023+
display: inline-block;
1024+
}
9921025
/*自己引入*/
9931026
nav ul, nav ol {
9941027
list-style: none;
@@ -2266,7 +2299,7 @@ a:hover .icon-arrow-right {
22662299
}
22672300

22682301
.settings-main-content {
2269-
padding: 0 24px
2302+
padding: 0
22702303
}
22712304

22722305
.settings-section {

‎src/components/backend-header.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class="back-header">
3+
<logout />
4+
</div>
5+
</template>
6+
7+
<script lang="babel">
8+
import logout from './logout.vue';
9+
export default {
10+
name: 'backendHeader',
11+
components: {
12+
logout
13+
}
14+
};
15+
</script>

‎src/components/backend-menu.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<aside id="backmenu">
33
<div>
4-
<div class="card card-me">
4+
<div class="back-card back-card-me">
55
<router-link to="/backend/admin/list" active-class="active" class="side-entry">
66
<i class="icon icon-arrow-right"></i>
77
<i class="fa fa-list-ul"></i>
88
管理账号
99
</router-link>
1010
</div>
11-
<div class="card card-me">
11+
<div class="back-card back-card-me">
1212
<router-link to="/backend/tag/insert" active-class="active" class="side-entry">
1313
<i class="icon icon-arrow-right"></i>
1414
<i class="fa fa-list-ul"></i>

0 commit comments

Comments
 (0)