Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 274edc5

Browse files
搭建手机登录UI逻辑
1 parent 4947b4e commit 274edc5

File tree

11 files changed

+692
-67
lines changed

11 files changed

+692
-67
lines changed

‎src/App.vue‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,23 @@
2020
<router-view v-if="!$route.meta.keepAlive"></router-view>
2121
</transition>
2222
</div> -->
23-
<vue-route-transition :keepAlive="true"></vue-route-transition>
23+
<!-- 启动页 -->
24+
<div id="app">
25+
<Launch></Launch>
26+
<vue-route-transition :keepAlive="true"></vue-route-transition>
27+
</div>
2428
</template>
2529

2630
<script>
2731
import tabBar from "./components/tabBar/TabBar";
2832
import navigationBar from "./components/navigationBar/NavigationBar";
2933
import MHBarButtonItem from "./assets/js/MHBarButtonItem.js";
34+
import Launch from "./components/launch/Launch";
3035
export default {
3136
name: "app",
37+
components: {
38+
Launch
39+
},
3240
data() {
3341
return {
3442
blackBackItem: new MHBarButtonItem(
@@ -40,10 +48,7 @@ export default {
4048
leaveAnimate: "" // 页面离开动效
4149
};
4250
},
43-
components: {
44-
tabBar,
45-
navigationBar
46-
},
51+
4752
watch: {
4853
// 监听路由变化 设置页面的过度效果
4954
$route(to, from) {
@@ -86,10 +91,11 @@ export default {
8691

8792
<style scoped>
8893
/* app 容器 */
89-
.app__wrapper {
94+
#app {
9095
overflow: hidden;
9196
position: relative;
9297
height: 100%;
98+
width: 100%;
9399
}
94100
95101
/*

‎src/components/alert-view/AlertView.vue‎

Whitespace-only changes.

‎src/components/launch/Launch.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div class="launch" :class="{ hide: hide }"></div>
3+
</template>
4+
<script>
5+
// 启动页
6+
export default {
7+
name: "launch",
8+
data() {
9+
return {
10+
hide: false
11+
};
12+
},
13+
mounted() {
14+
setTimeout(() => {
15+
this.hide = true;
16+
}, 2000);
17+
}
18+
};
19+
</script>
20+
<style>
21+
.launch {
22+
position: fixed;
23+
top: 0;
24+
bottom: 0;
25+
width: 100%;
26+
height: 100%;
27+
z-index: 1000;
28+
background: #000b17;
29+
transition: 0.3s;
30+
-webkit-transition: 0.3s;
31+
background-image: url("~@/assets/images/login/BootImage_375x667.png");
32+
background-position: center;
33+
background-repeat: no-repeat;
34+
background-size: contain;
35+
}
36+
37+
.launch.hide {
38+
opacity: 0;
39+
display: none;
40+
}
41+
</style>

‎src/components/loading/Loading.vue‎

Whitespace-only changes.

‎src/components/toast/Toast.vue‎

Whitespace-only changes.

‎src/components/vue-route-transition/RouteTransition.vue‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
v-bind:css="false"
4545
>
4646
<router-view
47-
v-if="keepAlive === false || $route.meta.keepAlive === false"
47+
v-if="keepAlive === false || !$route.meta.keepAlive"
4848
></router-view>
4949
</transition>
5050
<!-- <transition-group :name="state.pageDirection" @leave="setRouterMap">
@@ -106,15 +106,15 @@ export default {
106106
}
107107
108108
console.log(el.style.transform);
109-
console.log("-----------------");
109+
//console.log("-----------------");
110110
},
111111
// 当与 CSS 结合使用时
112112
// 回调函数 done 是可选的
113113
enter: function(el, done) {
114114
// ...
115-
console.log("enter", el);
116-
console.log(this.state.pageDirection);
117-
console.log("-----------------");
115+
//console.log("enter", el);
116+
//console.log(this.state.pageDirection);
117+
//console.log("-----------------");
118118
// eslint-disable-next-line no-unused-expressions
119119
el.offsetWidth;
120120
let dir = this.state.pageDirection;
@@ -143,9 +143,9 @@ export default {
143143
},
144144
afterEnter: function(el) {
145145
// ...
146-
console.log("afterEnter", el);
147-
console.log(this.state.pageDirection);
148-
console.log("-----------------");
146+
//console.log("afterEnter", el);
147+
//console.log(this.state.pageDirection);
148+
//console.log("-----------------");
149149
},
150150
151151
// --------
@@ -154,9 +154,9 @@ export default {
154154
155155
beforeLeave: function(el) {
156156
// ...
157-
console.log("beforeLeave", el);
158-
console.log(this.state.pageDirection);
159-
console.log("-----------------");
157+
//console.log("beforeLeave", el);
158+
//console.log(this.state.pageDirection);
159+
//console.log("-----------------");
160160
161161
let dir = this.state.pageDirection;
162162
if (dir === "slide-left") {
@@ -173,15 +173,15 @@ export default {
173173
// 回调函数 done 是可选的
174174
leave: function(el, done) {
175175
// ...
176-
console.log("leave", el);
177-
console.log(this.state.pageDirection);
176+
//console.log("leave", el);
177+
//console.log(this.state.pageDirection);
178178
let dir = this.state.pageDirection;
179179
let to = this.state.routerMap.to.replace(/\//g, "_");
180180
let from = this.state.routerMap.from.replace(/\//g, "_");
181-
console.log("setRouterMap", dir);
182-
console.log("setRouterMap", to);
183-
console.log("setRouterMap", from);
184-
console.log("-----------------");
181+
//console.log("setRouterMap", dir);
182+
//console.log("setRouterMap", to);
183+
//console.log("setRouterMap", from);
184+
//console.log("-----------------");
185185
// eslint-disable-next-line no-unused-expressions
186186
el.offsetWidth;
187187
if (dir === "slide-left") {
@@ -205,18 +205,18 @@ export default {
205205
},
206206
afterLeave: function(el) {
207207
// ...
208-
console.log("afterLeave", el);
209-
console.log(this.state.pageDirection);
210-
console.log("-----------------");
208+
//console.log("afterLeave", el);
209+
//console.log(this.state.pageDirection);
210+
//console.log("-----------------");
211211
},
212212
213213
addRouteChain(route) {
214-
console.log("addRouteChain - ", this.state.addCount);
215-
console.log("addRouteChain - ", localSessionRouteChain.length);
214+
//console.log("addRouteChain - ", this.state.addCount);
215+
//console.log("addRouteChain - ", localSessionRouteChain.length);
216216
if (this.state.addCount === 0 && localSessionRouteChain.length > 0) {
217217
// 排除刷新的时候
218218
this.state.addCount = 1;
219-
console.log("哭泣哭泣");
219+
//console.log("哭泣哭泣");
220220
} else {
221221
if (
222222
this.state.addCount === 0 ||
@@ -255,9 +255,9 @@ export default {
255255
let dir = this.state.pageDirection;
256256
let to = this.state.routerMap.to.replace(/\//g, "_");
257257
let from = this.state.routerMap.from.replace(/\//g, "_");
258-
console.log("setRouterMap", dir);
259-
console.log("setRouterMap", to);
260-
console.log("setRouterMap", from);
258+
//console.log("setRouterMap", dir);
259+
//console.log("setRouterMap", to);
260+
//console.log("setRouterMap", from);
261261
try {
262262
if (dir === "slide-left") {
263263
// 进入

‎src/main.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,6 @@ MHPreferenceSettingHelper.initialize()
5656
// }
5757

5858

59-
// 记录样式
60-
router.beforeEach((to, from , next) => {
61-
// ...
62-
console.log('beforeEach-to', to)
63-
console.log('beforeEach-from', from)
64-
next()
65-
})
66-
6759
new Vue({
6860
router,
6961
store,

‎src/router.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,7 @@ import DataSetting from './views/contacts/DataSetting.vue'
3737
const Login = resolve => require(['./views/login/Login.vue'], resolve)
3838
// 当前账号登陆
3939
import CurrentLogin from './views/login/CurrentLogin.vue'
40-
// 其他账号登陆
41-
import OtherLogin from './views/login/OtherLogin.vue'
40+
4241
// 语言选择
4342
import LanguagePicker from './views/login/languagePicker/LanguagePicker.vue'
4443

@@ -161,7 +160,15 @@ export default new Router({
161160
{
162161
path: '/current-login/other-login',
163162
name: 'other-login',
164-
component: OtherLogin
163+
component: OtherLogin => require(['./views/login/OtherLogin.vue'], OtherLogin),
164+
meta: {
165+
keepAlive: true
166+
}
167+
},
168+
{
169+
path: '/phone-login',
170+
name: 'PhoneLogin',
171+
component: PhoneLogin => require(['./views/login/phoneLogin/PhoneLogin.vue'], PhoneLogin)
165172
},
166173
// {
167174
// path: '/mainframe',

‎src/views/login/CurrentLogin.vue‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,13 @@ export default {
145145
methods: {
146146
itemDidClick(idx) {
147147
switch (idx) {
148-
case 0:
149-
break;
150-
case 1:
151-
break;
152-
default:
153-
this.showActionSheet = true;
154-
break;
148+
case 0:
149+
break;
150+
case 1:
151+
break;
152+
default:
153+
this.showActionSheet = true;
154+
break;
155155
}
156156
},
157157
// 配置actionsheet items
@@ -171,12 +171,12 @@ export default {
171171
didClickItem(idx) {
172172
if (idx === 0) return;
173173
switch (idx) {
174-
case 1:
175-
break;
176-
case 2:
177-
break;
178-
default:
179-
break;
174+
case 1:
175+
break;
176+
case 2:
177+
break;
178+
default:
179+
break;
180180
}
181181
},
182182
changeBtnDidClick() {
@@ -394,13 +394,13 @@ export default {
394394
.mh-current-login__more-item:not(:last-child)::after {
395395
content: "";
396396
position: absolute;
397-
width: 1px;
397+
width: 2px;
398398
top: 0;
399399
right: 0;
400400
bottom: 0;
401401
background-color: #000;
402-
-webkit-transform: scale(0.5);
403-
-ms-transform: scale(0.5);
404-
transform: scale(0.5);
402+
-webkit-transform: scaleY(0.5);
403+
-ms-transform: scaleY(0.5);
404+
transform: scaleY(0.5);
405405
}
406406
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /