Skip to content

Commit 032c714

Browse files
cuongdevjscuongdevjs
committed
#update:
_feature login _module store vuex _router redirect _mixins file _move scss to file _register module vuex in app-main
1 parent 0fe33d8 commit 032c714

File tree

15 files changed

+344
-274
lines changed

15 files changed

+344
-274
lines changed

‎src/App-main.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,24 @@
44

55
<script lang="ts">
66
import { Component, Vue } from "vue-property-decorator";
7+
import { LoginModule } from "./store/modules/login";
8+
import { generalInfo } from "./store/modules/generalApp";
9+
import { DrawingModule } from "./store/modules/userDrawing";
710
@Component
8-
export default class AppMain extends Vue {}
11+
export default class AppMain extends Vue {
12+
// declare module
13+
public get isLogged() {
14+
return LoginModule.isLogged;
15+
}
16+
17+
public get listNodes() {
18+
return DrawingModule.listNodes;
19+
}
20+
21+
public get isCollapseMenu() {
22+
return generalInfo.isCollapse;
23+
}
24+
}
925
</script>
1026

1127
<style scoped></style>

‎src/assets/style/general/_general.scss‎

Lines changed: 81 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -78,105 +78,105 @@
7878
width: 100%;
7979
height: calc(100vh - 48px);
8080
position: relative;
81-
}
8281

83-
.pPopupDetail {
84-
position: absolute;
85-
top: 0;
86-
left: 0;
87-
padding: 0;
88-
max-width: 240px;
89-
@include size(100%, 100%);
90-
background-color: var(--color-light-2);
91-
border-left: 1px solid hsla(240, 1%, 85%, 0.5);
92-
box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1);
93-
z-index: 10;
94-
95-
&-title {
96-
margin: 4px 0 0;
97-
}
82+
.pPopupDetail {
83+
position: absolute;
84+
top: 0;
85+
left: 0;
86+
padding: 0;
87+
max-width: 240px;
88+
@include size(100%, 100%);
89+
background-color: var(--color-light-2);
90+
border-left: 1px solid hsla(240, 1%, 85%, 0.5);
91+
box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1);
92+
z-index: 10;
93+
94+
&-title {
95+
margin: 4px 0 0;
96+
}
9897

99-
&-header {
100-
position: relative;
101-
}
98+
&-header {
99+
position: relative;
100+
}
102101

103-
&-iClose {
104-
color: var(--color-dark);
105-
background: var(--color-light);
106-
@include size(24px, 24px);
107-
border-radius: 8px;
108-
transition: all 0.15s ease-out;
102+
&-iClose {
103+
color: var(--color-dark);
104+
background: var(--color-light);
105+
@include size(24px, 24px);
106+
border-radius: 8px;
107+
transition: all 0.15s ease-out;
109108

110-
&:hover {
111-
color: var(--color-red);
112-
background: white;
109+
&:hover {
110+
color: var(--color-red);
111+
background: white;
112+
}
113113
}
114-
}
115114

116-
.form {
117-
height: calc(100% - 98px);
118-
border-bottom: 1px solid var(--color-light);
119-
padding: 0 8px 8px;
115+
.form {
116+
height: calc(100% - 98px);
117+
border-bottom: 1px solid var(--color-light);
118+
padding: 0 8px 8px;
120119

121-
.el-form-item {
122-
margin-bottom: 0;
120+
.el-form-item {
121+
margin-bottom: 0;
122+
}
123123
}
124-
}
125124

126-
.header {
127-
margin: 12px 8px;
128-
color: var(--color-dark);
129-
@extend .flex-row__between;
130-
}
125+
.header {
126+
margin: 12px 8px;
127+
color: var(--color-dark);
128+
@extend .flex-row__between;
129+
}
131130

132-
.el-form-item__content {
133-
line-height: initial;
134-
border-bottom: 1px solid var(--color-light);
135-
padding: 4px 0 12px;
131+
.el-form-item__content {
132+
line-height: initial;
133+
border-bottom: 1px solid var(--color-light);
134+
padding: 4px 0 12px;
136135

137-
.label {
138-
width: 100%;
139-
font-size: 13px;
140-
margin-bottom: 4px;
141-
display: block;
142-
}
136+
.label {
137+
width: 100%;
138+
font-size: 13px;
139+
margin-bottom: 4px;
140+
display: block;
141+
}
143142

144-
.el-input__inner {
145-
border-radius: 4px;
146-
height: 32px;
147-
line-height: 32px;
148-
padding: 0 8px;
143+
.el-input__inner {
144+
border-radius: 4px;
145+
height: 32px;
146+
line-height: 32px;
147+
padding: 0 8px;
149148

150-
&:focus {
151-
background: white !important;
152-
border-color: transparent !important;
153-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
149+
&:focus {
150+
background: white !important;
151+
border-color: transparent !important;
152+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
153+
}
154154
}
155155
}
156-
}
157156

158-
.actions {
159-
padding: 8px;
160-
background-color: white;
161-
@extend .flex-row__between;
162-
163-
button {
164-
height: 32px;
165-
display: flex;
166-
align-items: center;
167-
padding: 0 20px;
168-
border: none;
169-
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
170-
}
157+
.actions {
158+
padding: 8px;
159+
background-color: white;
160+
@extend .flex-row__between;
161+
162+
button {
163+
height: 32px;
164+
display: flex;
165+
align-items: center;
166+
padding: 0 20px;
167+
border: none;
168+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
169+
}
171170

172-
.btnSave {
173-
background: var(--color-blue);
174-
}
171+
.btnSave {
172+
background: var(--color-blue);
173+
}
175174

176-
.btnDelete {
177-
background: rgba(229, 77, 66, 0.2);
178-
color: var(--color-red);
179-
box-shadow: none;
175+
.btnDelete {
176+
background: rgba(229, 77, 66, 0.2);
177+
color: var(--color-red);
178+
box-shadow: none;
179+
}
180180
}
181181
}
182182
}

‎src/assets/style/index.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@import "./mixins/variable";
2-
@import "./mixins/_mixin";
2+
@import "./mixins/mixin";
33
@import "./mixins/animation";
44

55
@import "./general/base";
66
@import "./general/layout";
77
@import "./general/general";
8+
9+
@import "./page/login";

‎src/assets/style/page/_login.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.pLogin {
2+
height: 100vh;
3+
width: 100%;
4+
background: #20a8d8 !important;
5+
font-family: "Nunito", sans-serif;
6+
7+
.pHeader {
8+
font-size: 55px;
9+
font-family: "Nunito", sans-serif;
10+
font-weight: 700;
11+
}
12+
13+
&-scroll {
14+
width: 100%;
15+
height: calc(100% - 20px);
16+
padding: 50px 38px 125px 38px;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
}
22+
23+
.leftSection {
24+
color: #ffffff;
25+
26+
.logo-lv1 {
27+
width: 200px;
28+
}
29+
30+
.tt-2 {
31+
font-size: 20px;
32+
opacity: 0.8;
33+
width: 80%;
34+
}
35+
}
36+
37+
.rightSection {
38+
max-width: 500px;
39+
width: 40%;
40+
height: 100%;
41+
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
42+
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
43+
background-color: #fff;
44+
min-width: 350px;
45+
position: relative;
46+
overflow: hidden;
47+
-webkit-overflow-scrolling: touch;
48+
border-radius: 8px 0 0px 8px;
49+
50+
.logo-lv2 {
51+
width: 150px;
52+
margin-top: -25px;
53+
}
54+
55+
.title {
56+
font-size: 18px;
57+
text-align: center;
58+
margin: 20px 0 10px 0;
59+
margin-top: -15px;
60+
}
61+
62+
.btnSubmit {
63+
width: 100%;
64+
background-color: #039be5;
65+
}
66+
}
67+
}

‎src/config/auth.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
export default {
22
saveToken(token: string) {
3-
return localStorage.setItem("bus_token", token);
3+
return localStorage.setItem("aquaDraw_token", token);
44
},
55

66
removeToken() {
7-
return localStorage.removeItem("bus_token");
7+
return localStorage.removeItem("aquaDraw_token");
88
},
99

1010
checkIsAuthenticated: function() {
11-
let tokenDataStr = localStorage.getItem("bus_token");
11+
let tokenDataStr = localStorage.getItem("aquaDraw_token");
1212
return Promise.resolve(tokenDataStr);
1313
},
1414

1515
getToken() {
16-
let tokenStr = localStorage.getItem("bus_token");
16+
let tokenStr = localStorage.getItem("aquaDraw_token");
1717
return tokenStr || null;
1818
},
1919

‎src/config/axios.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ axios.interceptors.request.use(
1919
: store.dispatch("LOGOUT");
2020
});
2121
// config progressbar start
22-
temp === 0 && new Vue().$Progress.start();
22+
temp === 0 && app.$Progress.start();
2323
temp++;
2424
// config data not auto convert to json data that convert to type object[key]=value
2525
config.paramsSerializer = (params: any) => {
@@ -39,13 +39,13 @@ axios.interceptors.response.use(
3939
(response: any) => {
4040
// config progressbar finish
4141
temp--;
42-
temp === 0 && new Vue().$Progress.finish();
42+
temp === 0 && app.$Progress.finish();
4343

4444
return response.data;
4545
},
4646
(error: any) => {
4747
temp--;
48-
temp === 0 && new Vue().$Progress.fail();
48+
temp === 0 && app.$Progress.fail();
4949

5050
if (error.response.status === 500) {
5151
new Vue().$messageError("Server errors! Try again!");

0 commit comments

Comments
 (0)