Skip to content

Commit 8356e3e

Browse files
anjoy8anjoy8
committed
add header
增加头部样式
1 parent 3de40e2 commit 8356e3e

File tree

3 files changed

+220
-39
lines changed

3 files changed

+220
-39
lines changed

‎public/blogv.png

11.1 KB
Loading

‎public/favicon.ico

0 Bytes
Binary file not shown.

‎src/App.vue

+220-39
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,63 @@
11
<template>
2-
<div id="app">
3-
<div id="nav">
4-
<router-link to="/">Home</router-link>
5-
|
6-
<router-link to="/home2">Home2</router-link>
7-
|
8-
<router-link to="/about">Form</router-link>
9-
|
10-
<router-link to="/Vuex">Vuex</router-link>
11-
|
12-
<router-link to="/Login">Login</router-link>
13-
|
14-
15-
<span align-end style="cursor: pointer;">
2+
<div id="app">
3+
<header style="width:100%;background: none;height: 0;">
4+
<div class="header-container">
5+
<div class="header-container-content">
6+
<a class="header-container-logo" href="/" rel="noopener noreferrer">
7+
<img src="/blogv.png" style="width: 60px;" />
8+
</a>
9+
<div class="header-container-userinfo">
1610
<template v-if="!user.isAuthenticated">
17-
<span icon="person"></span>
18-
<span @click="login">LoginId4</span>
11+
<a
12+
@click="login"
13+
class="header-container-userinfo-login header-container-user-btn header-container-in header-container-user-size"
14+
role="button"
15+
tabindex="-1"
16+
>
17+
<span>登录</span>
18+
</a>
19+
<a
20+
href="https://ids.neters.club/account/register"
21+
target="_blank"
22+
class="header-container-userinfo-login header-container-user-btn header-container-hv header-container-user-size"
23+
role="button"
24+
tabindex="-1"
25+
>
26+
<span>注册</span>
27+
</a>
1928
</template>
2029
<template v-else>
21-
<span style="color: darkcyan;">{{ user.name }}</span>
22-
<span icon="person"></span>
23-
<span @click="logout"> 退出</span>
30+
<a href="https://ids.neters.club/" class="header-container-banner-item-btn">{{ user.name }}</a>
31+
<a
32+
href="/Editor"
33+
class="header-container-user-btn header-container-hv header-container-user-size _1YbC5u"
34+
role="button"
35+
tabindex="-1"
36+
>
37+
<span>写文章</span>
38+
</a>
39+
<span class="header-container-logout" @click="logout">注销</span>
2440
</template>
25-
</span>
41+
</div>
42+
<div class="header-container-banner">
43+
<div class="_2RZATq">
44+
<nav class="header-container-banner-item">
45+
<a class="header-container-banner-item-btn" href="/">首页</a>
46+
<a
47+
class="header-container-banner-item-btn"
48+
href="http://vueadmin.neters.club/"
49+
>Admin管理后台</a>
50+
</nav>
51+
</div>
52+
</div>
2653
</div>
27-
<router-view/>
54+
</div>
55+
</header>
56+
<div id="nav">
57+
2858
</div>
59+
<router-view />
60+
</div>
2961
</template>
3062

3163
<script>
@@ -67,26 +99,175 @@ export default {
6799
</script>
68100

69101
<style lang="css">
70-
@import "./style/stylehome.css";
71-
@import "./style/base.css";
72-
@import "./style/m.css";
102+
@import "./style/stylehome.css";
103+
@import "./style/base.css";
104+
@import "./style/m.css";
73105
</style>
74106

75107

76108
<style lang="stylus">
77-
#app
78-
font-family 'Avenir', Helvetica, Arial, sans-serif
79-
-webkit-font-smoothing antialiased
80-
-moz-osx-font-smoothing grayscale
81-
color #2c3e50
82-
83-
#nav
84-
padding 30px
85-
text-align center
86-
87-
a
88-
font-weight bold
89-
color #2c3e50
90-
&.router-link-exact-active
91-
color #42b983
109+
#app {
110+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
111+
-webkit-font-smoothing: antialiased;
112+
-moz-osx-font-smoothing: grayscale;
113+
color: #2c3e50;
114+
}
115+
116+
#nav {
117+
padding: 30px;
118+
text-align: center;
119+
}
120+
121+
a {
122+
font-weight: bold;
123+
color: #2c3e50;
124+
125+
&.router-link-exact-active {
126+
color: #42b983;
127+
}
128+
}
129+
130+
.header-container {
131+
position: fixed;
132+
top: 0;
133+
left: 0;
134+
right: 0;
135+
overflow: hidden;
136+
background-color: #fff;
137+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
138+
z-index: 100;
139+
}
140+
141+
.header-container-content {
142+
height: 56px;
143+
min-width: 1200px;
144+
max-width: 1440px;
145+
margin: 0 auto;
146+
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
147+
}
148+
149+
.header-container-logo {
150+
float: left;
151+
color: #ec7259;
152+
margin: 0 30px;
153+
}
154+
155+
.header-container-userinfo {
156+
float: right;
157+
margin: 0 16px;
158+
}
159+
160+
.header-container-userinfo-login {
161+
padding-left: 24px;
162+
padding-right: 24px;
163+
}
164+
165+
.header-container-in, .header-container-in:focus, .header-container-in:hover {
166+
background-color: transparent;
167+
border-color: transparent;
168+
}
169+
170+
.header-container-in {
171+
color: #969696;
172+
}
173+
174+
.header-container-user-size {
175+
font-size: 16px;
176+
padding: 8px 16px;
177+
}
178+
179+
.header-container-user-btn {
180+
position: relative;
181+
flex-shrink: 0;
182+
display: inline-flex;
183+
justify-content: center;
184+
align-items: center;
185+
border-radius: 50px;
186+
touch-action: manipulation;
187+
cursor: pointer;
188+
background-image: none;
189+
white-space: nowrap;
190+
-webkit-user-select: none;
191+
-moz-user-select: none;
192+
-ms-user-select: none;
193+
user-select: none;
194+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
195+
font-size: 14px;
196+
padding: 4px 12px;
197+
color: #969696;
198+
background-color: #fff;
199+
border: 1px solid #999;
200+
}
201+
202+
.header-container-userinfo-login {
203+
padding-left: 24px;
204+
padding-right: 24px;
205+
}
206+
207+
.header-container-user-size {
208+
font-size: 16px;
209+
padding: 8px 16px;
210+
}
211+
212+
.header-container-hv, .header-container-hv[disabled]:hover {
213+
color: #ec7259;
214+
background-color: #fff;
215+
border-color: #ec7259;
216+
}
217+
218+
.header-container-hv._1YbC5u, .header-container-hv._1YbC5u[disabled]:hover {
219+
color: #fff;
220+
background-color: #ec7259;
221+
border-color: #ec7259;
222+
}
223+
224+
.header-container-user-btn+.header-container-user-btn, .header-container-user-btn>.anticon+span, .header-container-user-btn>span+.anticon {
225+
margin-left: 8px;
226+
}
227+
228+
[role=button], button {
229+
cursor: pointer;
230+
-webkit-user-select: none;
231+
-moz-user-select: none;
232+
-ms-user-select: none;
233+
user-select: none;
234+
}
235+
236+
.header-container-banner {
237+
display: block;
238+
height: 56px;
239+
}
240+
241+
.header-container-banner {
242+
box-sizing: content-box;
243+
padding-left: 16px;
244+
padding-right: 16px;
245+
margin-left: auto;
246+
margin-right: auto;
247+
}
248+
249+
.header-container-banner-item {
250+
flex-shrink: 0;
251+
}
252+
253+
.header-container-logo, .header-container-banner-item, .header-container-userinfo, .header-container-userinfo ._3Sn1bM, .header-container-banner-item-btn {
254+
display: flex;
255+
align-items: center;
256+
height: 56px;
257+
}
258+
259+
.header-container-banner-item-btn {
260+
font-size: 17px;
261+
color: #333;
262+
padding: 0 20px;
263+
cursor: pointer;
264+
}
265+
.header-container-logout{
266+
color: #007bff;
267+
margin-left: 10px;
268+
border: 1px solid transparent;
269+
padding: .375rem .75rem;
270+
border-radius: .25rem;
271+
border-color: #007bff;
272+
}
92273
</style>

0 commit comments

Comments
 (0)