Skip to content

Commit 8e527b2

Browse files
microzzmicrozz
committed
加入登录
1 parent 05b05ab commit 8e527b2

File tree

10 files changed

+199
-27
lines changed

10 files changed

+199
-27
lines changed

‎src/App.vue‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,55 @@
11
<template>
22
<div id="app">
3+
34
<VHeader></VHeader>
5+
46
<VContent></VContent>
7+
58
<AsideMenu></AsideMenu>
9+
10+
<transition name="show-login">
11+
<Login v-if="isShowLogin"></Login>
12+
</transition>
13+
14+
615
</div>
716
</template>
817

918
<script>
1019
import VHeader from './components/Header/Header.vue';
1120
import VContent from './components/Content/Content.vue';
1221
import AsideMenu from './components/AsideMenu/AsideMenu.vue';
22+
import Login from './components/Login/Login.vue';
1323
1424
export default {
1525
name: 'app',
1626
components: {
1727
VHeader,
1828
VContent,
19-
AsideMenu
29+
AsideMenu,
30+
Login
31+
},
32+
computed: {
33+
isShowLogin() {
34+
return this.$store.state.isShowLogin;
35+
}
2036
}
2137
}
2238
</script>
2339

2440
<style lang="scss">
2541
@import "./common/style/base.scss";
2642
43+
.show-login-enter-active {
44+
transition: all .3s ease;
45+
}
46+
.show-login-leave-active {
47+
transition: all .2s ease-in;
48+
}
49+
.show-login-enter, .show-login-leave-active {
50+
transform: translateX(200px);
51+
opacity: 0;
52+
}
2753
2854
#app {
2955
position: relative;

‎src/common/icons/icon-back.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/common/icons/icon-cnode.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/common/style/base.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,9 +128,10 @@ pre, code {display: block;overflow: auto;background: #f4f4f4;padding: 5px 10px;b
128128
transition: all .5s ease;
129129
}
130130
.slide-fade-enter, .slide-fade-leave-active {
131-
transform: translateX(40px);
131+
transform: translateX(60px);
132132
opacity: 0;
133133
}
134+
134135
.slide-left-enter-active {
135136
transition: all .3s ease;
136137
}
@@ -141,3 +142,14 @@ pre, code {display: block;overflow: auto;background: #f4f4f4;padding: 5px 10px;b
141142
transform: translateX(-150px);
142143
opacity: 0;
143144
}
145+
146+
.slide-top-enter-active {
147+
transition: all .5s ease;
148+
}
149+
.slide-top-leave-active {
150+
transition: all .2s ease-out;
151+
}
152+
.slide-top-enter, .slide-top-leave-active {
153+
transform: translateY(-5px);
154+
opacity: 0;
155+
}

‎src/components/AsideMenu/AsideMenu.vue‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<div class="user">
77
<div class="user-avatar">
8-
<img src="../../common/icons/icon-unlogin.svg" alt="">
8+
<img @click="showLogin" src="../../common/icons/icon-unlogin.svg" alt="">
99
</div>
1010
<div class="username">
1111
点击头像登录
@@ -30,6 +30,7 @@
3030
<i class="icon-about"></i>关于
3131
</div>
3232

33+
<div class="cnode"></div>
3334

3435
</div>
3536

@@ -53,6 +54,9 @@ export default {
5354
methods: {
5455
showAsideMenu() {
5556
this.$store.commit('showAsideMenu', false);
57+
},
58+
showLogin() {
59+
this.$store.commit('showLogin', true);
5660
}
5761
}
5862
}
@@ -139,8 +143,14 @@ export default {
139143
background: url('../../common/icons/icon-about.svg');
140144
background-size: contain;
141145
}
142-
.about {
143-
// letter-spacing: 1em;
146+
.cnode {
147+
margin-top: 150px;
148+
flex: 1;
149+
width: 50%;
150+
background-color: red;
151+
background: url('../../common/icons/icon-cnode.svg') no-repeat;
152+
background-size: contain;
153+
opacity: .1;
144154
}
145155
}
146156
}

‎src/components/Content/ArticleList.vue‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
<template lang="html">
22
<div class="article-list">
3-
<div v-for="item of articleList" class="item">
4-
<div class="avatar">
5-
<img :src="item.author.avatar_url" alt="">
6-
</div>
7-
<div class="title">
8-
<p>
9-
<span class="flag" :class="{special: item.top || item.good}">{{(item.top ? '置顶' : '') || (item.good ? '精华': '') || types[item.tab]}}</span>
10-
<!-- <a :href="item.id">{{item.title}}</a> -->
11-
<router-link :to="{name: 'article', params: {id: item.id}}">{{item.title}}</router-link>
12-
</p>
13-
<p class="view">
14-
<span class="viewed">{{item.reply_count}}</span>/{{item.visit_count}}
15-
<span class="date"> {{changeTime(item.last_reply_at)}}</span>
16-
</p>
3+
4+
<transition-group name="slide-top">
5+
<div v-for="(item, index) of articleList" :key="item.last_reply_at+index" class="item">
6+
<div class="avatar">
7+
<img :src="item.author.avatar_url" alt="">
8+
</div>
9+
<div class="title">
10+
<p>
11+
<span class="flag" :class="{special: item.top || item.good}">{{(item.top ? '置顶' : '') || (item.good ? '精华': '') || types[item.tab]}}</span>
12+
<router-link :to="{name: 'article', params: {id: item.id}}">{{item.title}}</router-link>
13+
</p>
14+
<p class="view">
15+
<span class="viewed">{{item.reply_count}}</span>/{{item.visit_count}}
16+
<span class="date"> {{changeTime(item.last_reply_at)}}</span>
17+
</p>
18+
</div>
19+
1720
</div>
21+
</transition-group>
1822

19-
</div>
2023

2124
<div class="more">
2225
<i v-show="isMore" class="icon-more"></i>

‎src/components/Content/Content.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,8 @@ export default {
174174
z-index: 1;
175175
bottom: 10px;
176176
right: 15px;
177-
width: 40px;
178-
height: 40px;
177+
width: 45px;
178+
height: 45px;
179179
.icon-top {
180180
display: inline-block;
181181
width: 100%;
@@ -188,9 +188,9 @@ export default {
188188
@media screen and (min-width: 760px) {
189189
.top {
190190
bottom: 10px;
191-
right: 30px;
192-
width: 50px;
193-
height: 50px;
191+
right: 60px;
192+
width: 55px;
193+
height: 55px;
194194
}
195195
}
196196
}

‎src/components/Header/Header.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<i @click.stop.prevent="showAsideMenu" class="icon-menu"></i>
66
<h1>CNode社区</h1>
77
<i class="icon-msg"></i>
8+
<span class="msg-count">10</span>
89
</div>
910

1011
</div>
@@ -48,11 +49,26 @@ export default {
4849
background-size: contain;
4950
}
5051
i.icon-msg {
51-
right: 20px;
52+
right: 30px;
5253
top: 23px;
5354
background: url('../../common/icons/icon-msg.svg') no-repeat;
5455
background-size: contain;
5556
}
57+
span.msg-count {
58+
position: absolute;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
z-index: 1;
63+
width: 20px;
64+
height: 20px;
65+
right: 15px;
66+
top: 18px;
67+
text-align: center;
68+
background-color: #ff4081;
69+
border-radius: 10px;
70+
font-size: 80%;
71+
}
5672
h1 {
5773
flex: 5;
5874
letter-spacing: 2px;

‎src/components/Login/Login.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template lang="html">
2+
<div class="login">
3+
<div class="login-header">
4+
<i @click="showLogin" class="icon-back"></i>登录
5+
</div>
6+
7+
<div class="input">
8+
<input type="text" placeholder="请输入Access Token">
9+
<button>验证</button>
10+
</div>
11+
12+
</div>
13+
</template>
14+
15+
<script>
16+
export default {
17+
name: 'login',
18+
methods: {
19+
showLogin() {
20+
this.$store.commit('showLogin', false);
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style lang="scss" scoped>
27+
.login {
28+
position: absolute;
29+
display: flex;
30+
flex-direction: column;
31+
// justify-content: center;
32+
align-items: center;
33+
z-index: 1;
34+
top: 0;
35+
bottom: 0;
36+
right: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
background-color: white;
41+
42+
.login-header {
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
width: 100%;
47+
height: 60px;
48+
background-color: #2196f3;
49+
color: white;
50+
font-size: 1.4rem;
51+
52+
i.icon-back {
53+
position: absolute;
54+
left: 10px;
55+
display: inline-block;
56+
width: 38px;
57+
height: 38px;
58+
background: url('../../common/icons/icon-back.svg') no-repeat;
59+
background-size: contain;
60+
}
61+
}
62+
63+
.input {
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
padding-top: 50px;
68+
flex: 1;
69+
width: 100%;
70+
// background-color: rgba(0, 0, 0, .1);
71+
72+
input {
73+
outline: none;
74+
border: none;
75+
height: 40px;
76+
width: 70%;
77+
// border-radius: 5px;
78+
border-bottom: 1px solid gray;
79+
font-size: 1.5rem;
80+
padding: 0;
81+
}
82+
input:focus {
83+
border-bottom: 1px solid #2962FF;
84+
}
85+
86+
button {
87+
margin-top: 50px;
88+
font-size: 1.3rem;
89+
background-color: #2196f3;
90+
color: white;
91+
border: none;
92+
padding: 5px 10px;
93+
border-radius: 3px;
94+
letter-spacing: 3px;
95+
outline: none;
96+
}
97+
}
98+
}
99+
</style>

‎src/main.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const store = new Vuex.Store({
2121
articleList: [],
2222
isLoading: false,
2323
isMore: false,
24-
isShowAsideMenu: false
24+
isShowAsideMenu: false,
25+
isShowLogin: false
2526
},
2627

2728
mutations: {
@@ -38,6 +39,9 @@ const store = new Vuex.Store({
3839
},
3940
showAsideMenu(state, flag) {
4041
state.isShowAsideMenu = flag;
42+
},
43+
showLogin(state, flag) {
44+
state.isShowLogin = flag;
4145
}
4246
},
4347

0 commit comments

Comments
 (0)