ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 16:44:21 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix wap style

Browse Source
This commit is contained in:
cookfront
2017-04-18 20:43:01 +08:00
parent e9807c1ad3
commit 674084534f
22 changed files with 127 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/examples-dist/actionsheet.vue
View File

@@ -1,25 +1,19 @@
<template><section class="demo-actionSheet"><h1 class="demo-title">ActionSheet 行动按钮</h1><example-block title="基础用法">
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
</example-block><example-block title="带取消按钮的ActionSheet">
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
</example-block><example-block title="带标题的ActionSheet">
<div class="zan-row">
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
</div>
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</zan-actionsheet>

41
docs/examples-dist/badge.vue
View File

@@ -1,21 +1,38 @@
<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<div class="badge-group-wrapper">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</div>
</example-block><example-block title="选中某个badge">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<div class="badge-group-wrapper">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</div>
</example-block></section></template>
<style>
@component-namespace demo {
@b badge {
.badge-group-wrapper {
padding: 30px 20px;
background-color: #fff;
}
.zan-badge-group {
margin: 0 auto;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
export default {

2
docs/examples-dist/image-preview.vue
View File

@@ -1,4 +1,4 @@
<template><section class="demo-imagePreview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="">
<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
<zan-button @click="handleImagePreview">预览图片</zan-button>

4
docs/examples-dist/loading.vue
View File

@@ -1,12 +1,12 @@
<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
<zan-loading class="some-customized-class"></zan-loading>
</example-block><example-block title="">
</example-block><example-block title="渐变浅色spinner">
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
</example-block><example-block title="">
</example-block><example-block title="单色spinner">
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>

20
docs/examples-dist/popup.vue
View File

@@ -1,5 +1,5 @@
<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
<zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
从中间弹出popup
</zan-popup>
@@ -7,22 +7,23 @@
</example-block><example-block title="从不同位置弹出菜单">
<zan-button block="" @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
<zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup>
<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
更新成功
</zan-popup>
<zan-button block="" @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
</zan-popup>
<zan-button block="" @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
</zan-popup>
@@ -33,9 +34,8 @@
<style>
@component-namespace demo {
@b popup {
.examples,
.example-block {
padding: 0 15px;
.zan-button {
margin: 10px 15px;
}
.zan-popup-1 {
@@ -65,10 +65,6 @@
width: 100%;
height: 100%;
}
.zan-button {
margin: 10px 0;
}
}
}
</style>

2
docs/examples-dist/quantity.vue
View File

@@ -14,7 +14,7 @@
@component-namespace demo {
@b quantity {
.zan-quantity {
margin: 15px;
margin-left: 15px;
}
.curr-quantity {

15
docs/examples-dist/switch.vue
View File

@@ -5,14 +5,14 @@
</example-block><example-block title="基础用法">
</example-block><example-block title="">
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
</example-block><example-block title="">
</example-block><example-block title="禁用状态">
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
@@ -21,7 +21,7 @@
</example-block><example-block title="">
</example-block><example-block title="loading状态">
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
@@ -34,10 +34,17 @@
<style>
@component-namespace demo {
@b switch {
.examples {
.examples,
.example-block {
text-align: center;
}
.example-block {
.demo-sub-title {
text-align: left;
}
}
@e text {
margin: 20px auto;
}

2
docs/examples-dist/uploader.vue
View File

@@ -1,4 +1,4 @@
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="">
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
<div class="uploader-container">
<zan-uploader :after-read="logContent">
<zan-icon name="photograph"></zan-icon>