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 {
.van-button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
}
.van-row {
padding: 0 15px;

View File

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

View File

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

View File

@ -1,18 +1,54 @@
<template>
<div class="examples-container">
<router-view></router-view>
<div class="footer">
<div class="examples-container" ref="container">
<div class="demo-content" ref="demo">
<router-view></router-view>
</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">
</div>
</div>
</template>
<script>
import Vue from 'vue';
export default {
computed: {
visible() {
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>
@ -48,7 +84,6 @@ export default {
}
.examples-container {
padding-bottom: 54px;
height: 100%;
overflow: auto;
background: #f8f8f8;
@ -89,10 +124,13 @@ export default {
margin-top: 30px;
width: 100%;
padding: 10px 0 20px;
position: fixed;
bottom: 0;
left: 0;
background: #f8f8f8;
&.footer-fixed {
position: absolute;
bottom: 0;
left: 0;
}
}
.zanui-logo {

View File

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