Skip to content

Commit 7ab461f

Browse files
pl1998pl1998
committed
前端样式调整
1 parent 19ce965 commit 7ab461f

File tree

6 files changed

+285
-258
lines changed

6 files changed

+285
-258
lines changed

‎app/.env.development‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
NODE_ENV = 'development'
22

3-
VUE_APP_BASE_API = 'https://api.pltrue.top/api'
3+
VUE_APP_BASE_API = 'http://127.0.0.1:9091/api'
44
VUE_APP_URL = 'http://localhost:8081'
55

66
VUE_APP_GITHUB_CLIENT_ID = '684a49aa60ce60372463'

‎app/src/components/Drawer.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<el-button @click="drawer = true" icon="el-icon-user" style="border:none" circle></el-button>
2+
<!-- <el-button class="btn-home" @click="drawer = true" icon="el-icon-user" style="border:none" ></el-button> -->
3+
<button class="btn btn-lg btn-default" @click="drawer = true"><i class="fa fa-user"></i></button>
34
<el-drawer
45
title="我是标题"
56
v-model="drawer"
@@ -128,4 +129,11 @@ export default {
128129
};
129130
},
130131
};
131-
</script>
132+
</script>
133+
<style lang="scss" scoped>
134+
.btn-home{
135+
width: 30px;
136+
height: 30px;
137+
138+
}
139+
</style>

‎app/src/components/layouts/Nav.vue‎

Lines changed: 98 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,115 @@
11
<template>
2-
<nav
3-
class="navbar navbar-expand-lg navbar-light bg-light shadow p-3 mb-5 bg-white rounded topnav "
4-
>
2+
<div class="menu-nav bg">
53
<div class="container">
6-
<a href="/" class="navbar-brand">
7-
<img class="h-10 w-10" :src="logo" />
8-
</a>
9-
<button
10-
class="navbar-toggler"
11-
type="button"
12-
data-toggle="collapse"
13-
data-target="#navbarSupportedContent"
14-
aria-controls="navbarSupportedContent"
15-
aria-expanded="false"
16-
aria-label="Toggle navigation"
4+
<el-menu
5+
:default-active="activeIndex"
6+
class="menu el-menu-demo mb-5"
7+
style="border: none"
8+
mode="horizontal"
9+
@select="handleSelect"
1710
>
18-
<span class="navbar-toggler-icon"></span>
19-
</button>
20-
21-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
22-
<ul class="navbar-nav mr-auto">
23-
<li class="nav-item">
24-
<a class="nav-link" href="/?keywords=文章"
25-
>文章 <span class="sr-only">(current)</span></a
26-
>
27-
</li>
28-
29-
<li class="nav-item dropdown">
30-
<a
31-
class="nav-link dropdown-toggle"
32-
href="#"
33-
id="navbarDropdown"
34-
role="button"
35-
data-toggle="dropdown"
36-
aria-haspopup="true"
37-
aria-expanded="false"
11+
<el-menu-item index="0">
12+
<router-link :to="`/`">
13+
<img class="h-10 w-10" :src="logo" />
14+
</router-link>
15+
</el-menu-item>
16+
<el-menu-item index="1">
17+
<a href="/?keywords=">文章</a>
18+
</el-menu-item>
19+
<el-submenu index="2">
20+
<template #title>分类</template>
21+
<el-menu-item index="2-1"
22+
><a class="a-text" href="/?keywords=php">PHP</a></el-menu-item
23+
>
24+
<el-menu-item index="2-2"
25+
><a class="a-text" href="/?keywords=Go">Go</a></el-menu-item
26+
>
27+
<el-menu-item index="2-3"
28+
><a class="a-text" href="/?keywords=Js">Js</a></el-menu-item
29+
>
30+
<el-menu-item index="2-3"
31+
><a class="a-text" href="/?keywords=Linux">Linux</a></el-menu-item
32+
>
33+
</el-submenu>
34+
<el-menu-item index="3">
35+
<router-link :to="`/timeline`">归档</router-link>
36+
</el-menu-item>
37+
<el-menu-item index="4"
38+
><router-link :to="`/open_source`">开源</router-link></el-menu-item
39+
>
40+
<el-menu-item class="float-right" index="8">
41+
<Drawer></Drawer>
42+
</el-menu-item>
43+
<el-menu-item class="float-right" index="5" v-if="auth">
44+
<el-submenu index="6">
45+
<template #title
46+
><img
47+
v-if="users.avatar"
48+
:src="users.avatar"
49+
class="login-avatar"
50+
/>
51+
{{ users.name }}
52+
</template>
53+
<el-menu-item @click="logout" index="6-1"
54+
><i class="fa fa-sign-in"></i>退出登录</el-menu-item
3855
>
39-
分类
40-
</a>
41-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
42-
<a class="dropdown-item" href="/?keywords=php">PHP</a>
43-
<a class="dropdown-item" href="/?keywords=Go">GO</a>
44-
<a class="dropdown-item" href="/?keywords=docker">docker</a>
45-
<a class="dropdown-item" href="/?keywords=JavaScript"
46-
>JavaScript</a
47-
>
48-
</div>
49-
</li>
50-
<li class="nav-item">
51-
<router-link class="nav-link" :to="`/timeline`">归档</router-link>
52-
</li>
53-
<li class="nav-item">
54-
<router-link class="nav-link" :to="`/open_source`">开源</router-link>
55-
</li>
56-
</ul>
57-
<form class="form-inline my-2 my-lg-0">
58-
<div>
59-
<el-button @click="show3 = !show3">Click Me</el-button>
60-
<div style="margin-top: 20px; height: 200px">
61-
<el-collapse-transition>
62-
<div v-show="show3">
63-
<div class="transition-box">el-collapse-transition</div>
64-
<div class="transition-box">el-collapse-transition</div>
65-
</div>
66-
</el-collapse-transition>
67-
</div>
68-
</div>
69-
<ul v-if="auth" class="navbar-nav mr-auto">
70-
<li class="nav-item dropdown">
71-
<a
72-
class="user-name bgnav-link dropdown-toggle"
73-
href="#"
74-
id="navbarDropdown"
75-
role="button"
76-
data-toggle="dropdown"
77-
aria-haspopup="true"
78-
aria-expanded="false"
79-
>
80-
<img
81-
v-if="users.avatar"
82-
:src="users.avatar"
83-
class="login-avatar"
84-
/>
85-
{{users.name}}
86-
</a>
87-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
88-
<a class="dropdown-item" @click="logout">退出</a>
89-
<!-- <a class="dropdown-item" href="#">Another action</a>
90-
<div class="dropdown-divider"></div>
91-
<a class="dropdown-item" href="#">Something else here</a> -->
92-
</div>
93-
</li>
94-
</ul>
56+
</el-submenu>
57+
</el-menu-item>
58+
<el-menu-item v-else class="float-right" index="7">
59+
<button class="btn btn-lg btn-default" @click="login">
60+
<i class="fa fa-home"></i>
61+
</button>
62+
<!-- <el-button
9563
96-
<el-button
97-
v-else
9864
@click="login"
9965
style="border: none"
10066
icon="el-icon-s-home"
10167
circle
102-
></el-button>
103-
<Drawer></Drawer>
104-
<DialogLogin
105-
:title="已关闭账号注册"
106-
:show="show"
107-
:before-close="handleClose"
108-
></DialogLogin>
109-
</form>
110-
</div>
68+
></el-button> -->
69+
</el-menu-item>
70+
</el-menu>
11171
</div>
112-
</nav>
72+
</div>
73+
74+
<DialogLogin
75+
:title="已关闭账号注册"
76+
:show="show"
77+
:before-close="handleClose"
78+
></DialogLogin>
79+
<div class="line"></div>
80+
11381
</template>
11482
<script>
11583
import DialogLogin from "../DialogLogin";
11684
import Drawer from "../Drawer";
11785
import logo from "../../assets/logo.jpg";
11886
import { mapState } from "vuex";
119-
import store from '../../store';
87+
import store from "../../store";
12088
export default {
12189
name: "Nav",
12290
components: { Drawer, DialogLogin },
12391
12492
computed: {
125-
...mapState(["auth","users"]),
93+
...mapState(["auth", "users"]),
12694
},
12795
12896
data() {
12997
return {
13098
name: "Latent",
13199
show: false,
132100
logo: logo,
133-
show3: false
101+
show3: false,
134102
};
135103
},
136104
methods: {
137-
logout()
138-
{
139-
this.$confirm('是否退出登录?', '提示', {
140-
confirmButtonText: '确定',
141-
cancelButtonText: '取消',
142-
type: 'warning'
143-
}).then(() => {
144-
store.dispatch('userLogout')
145-
})
105+
logout() {
106+
this.$confirm("是否退出登录?", "提示", {
107+
confirmButtonText: "确定",
108+
cancelButtonText: "取消",
109+
type: "warning",
110+
}).then(() => {
111+
store.dispatch("userLogout");
112+
});
146113
},
147114
handleClose(done) {
148115
this.show = false;
@@ -159,12 +126,24 @@ export default {
159126
};
160127
</script>
161128
<style lang="scss">
162-
.user-name{
163-
font-size: 10px;
164-
font-weight: bold;
165-
color: rgba(0,0,0,.5);
129+
.menu-nav {
130+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
131+
.menu {
132+
border: none;
133+
.a-text {
134+
width: 100%;
135+
height: 100%;
136+
display: block;
137+
}
138+
}
139+
}
140+
141+
.user-name {
142+
font-size: 10px;
143+
font-weight: bold;
144+
color: rgba(0, 0, 0, 0.5);
166145
}
167-
.user-name:hover{
146+
.user-name:hover {
168147
text-decoration: none;
169148
}
170149
</style>

‎app/src/router/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const routes= [
1111
name: 'Home',
1212
component: Home,
1313
meta:{
14-
title:'Latent的个人博客',
14+
title:'',//Latent的个人博客
1515
}
1616
},
1717
{

‎app/src/style/main.scss‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
@media (max-width: 750px){
3-
3+
44
body {
55

66
.reply{
@@ -125,7 +125,7 @@ body {
125125
a :hover {
126126
color: #fff;
127127
background-color: #dc3545;
128-
128+
129129
}
130130
.label{
131131
margin-bottom: 5px;
@@ -169,6 +169,26 @@ body {
169169
height: 30px;
170170
border-radius:90%
171171
}
172+
173+
.reply-child-avatar{
174+
width: 30px;
175+
height: 30px;
176+
border: 1px solid #fff;
177+
178+
179+
}
180+
181+
.reply-avatar{
182+
width: 30px;
183+
height: 30px;
184+
border: 1px solid #fff;
185+
box-shadow: 0 1px 10px 0 #a3b4bf;
186+
margin-left: -65px;
187+
margin-top: -40px;
188+
}
189+
190+
191+
172192
.is-size-7{
173193
font-size: .8rem !important;
174194
}
@@ -187,7 +207,7 @@ body {
187207
.tags {
188208
color: #4a4a4a;
189209
background-color: #c2bcbc;
190-
210+
191211
display: inline-flex;
192212
font-size: .75rem;
193213
height: 2em;

0 commit comments

Comments
 (0)