fix mobile style

This commit is contained in:
cookfront 2017-04-20 15:39:40 +08:00
parent 5d0cdbc3f1
commit 39b0d0f094
5 changed files with 77 additions and 30 deletions

View File

@ -78,6 +78,7 @@
@b button { @b button {
.van-button { .van-button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
} }
.van-row { .van-row {
padding: 0 15px; padding: 0 15px;

View File

@ -15,20 +15,30 @@
</example-block><example-block title="禁用状态"> </example-block><example-block title="禁用状态">
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch> <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
<div class="demo-switch__text">ON, DISABLED</div> <div class="demo-switch__text">打开</div>
</van-col>
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch> <van-col span="12">
<div class="demo-switch__text">OFF, DISABLED</div> <van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
</example-block><example-block title="loading状态"> </example-block><example-block title="loading状态">
<van-row>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch> <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
<div class="demo-switch__text">ON, LOADING</div> <div class="demo-switch__text">打开</div>
</van-col>
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch> <van-col span="12">
<div class="demo-switch__text">OFF, LOADING</div> <van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
@ -36,9 +46,17 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b switch { @b switch {
.van-switch {
float: left;
margin: 0 15px;
}
@e text { @e text {
display: inline-block; display: inline-block;
line-height: 32px; line-height: 32px;
float: left;
font-size: 14px;
color: #333;
} }
} }
} }
@ -51,7 +69,7 @@ export default {
data() { data() {
return { return {
switchState1: true, switchState1: true,
switchState2: true, switchState2: false,
switchStateTrue: true, switchStateTrue: true,
switchStateFalse: false switchStateFalse: false
}; };

View File

@ -3,6 +3,7 @@
@b button { @b button {
.van-button { .van-button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
} }
.van-row { .van-row {
padding: 0 15px; padding: 0 15px;

View File

@ -1,18 +1,54 @@
<template> <template>
<div class="examples-container"> <div class="examples-container" ref="container">
<div class="demo-content" ref="demo">
<router-view></router-view> <router-view></router-view>
<div class="footer"> </div>
<div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
<img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo"> <img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue';
export default { export default {
computed: { computed: {
visible() { visible() {
return ['/'].indexOf(this.$route.path) < 0; return ['/'].indexOf(this.$route.path) < 0;
} }
},
data() {
return {
isFooterFixed: false
};
},
mounted() {
this.computeFooterFixed();
},
watch: {
'$route.path': function(val) {
Vue.nextTick(() => {
this.computeFooterFixed();
});
}
},
methods: {
computeFooterFixed() {
if (this.$refs.container) {
const demoSize = this.$refs.demo.getBoundingClientRect();
const containerSize = this.$refs.container.getBoundingClientRect();
if (demoSize.height < containerSize.height - 54) {
this.isFooterFixed = true;
return;
}
}
this.isFooterFixed = false;
}
} }
}; };
</script> </script>
@ -48,7 +84,6 @@ export default {
} }
.examples-container { .examples-container {
padding-bottom: 54px;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background: #f8f8f8; background: #f8f8f8;
@ -89,10 +124,13 @@ export default {
margin-top: 30px; margin-top: 30px;
width: 100%; width: 100%;
padding: 10px 0 20px; padding: 10px 0 20px;
position: fixed; background: #f8f8f8;
&.footer-fixed {
position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #f8f8f8; }
} }
.zanui-logo { .zanui-logo {

View File

@ -27,25 +27,14 @@ const router = new VueRouter({
routes: routesConfig routes: routesConfig
}); });
let indexScrollTop = 0;
router.beforeEach((route, redirect, next) => { router.beforeEach((route, redirect, next) => {
if (route.path !== '/') { if (route.path !== '/') {
indexScrollTop = document.body.scrollTop; window.scrollTo(0, 0);
} }
document.title = route.meta.title || document.title; document.title = route.meta.title || document.title;
next(); next();
}); });
router.afterEach(route => {
if (route.path !== '/') {
document.body.scrollTop = 0;
} else {
Vue.nextTick(() => {
document.body.scrollTop = indexScrollTop;
});
}
});
new Vue({ // eslint-disable-line new Vue({ // eslint-disable-line
render: h => h(App), render: h => h(App),
router router