mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 10:20:19 +08:00
fix mobile style
This commit is contained in:
parent
5d0cdbc3f1
commit
39b0d0f094
@ -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;
|
||||||
|
@ -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-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
||||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
<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-col span="12">
|
||||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
||||||
<div class="demo-switch__text">OFF, LOADING</div>
|
<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
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user