mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix mobile style
This commit is contained in:
parent
5d0cdbc3f1
commit
39b0d0f094
@ -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;
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user