starter
/
starter-vant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

git

Browse Source
master
wangbing 5 years ago
parent b73c59e642
commit b4d2a98027
2 changed files with 97 additions and 108 deletions
Show Stats Download Patch File Download Diff File

65
src/view/nav/index.vue
Unescape View File

@ -4,27 +4,31 @@
@click-left="onClickLeft" @click-left="onClickLeft"
@click-right="onClickRight" @click-right="onClickRight"
title="应用导航"> title="应用导航">
<van-icon name="home-o" slot="left"/> <van-icon name="ellipsis" slot="left"/>
<van-icon name="ellipsis" slot="right"/> <van-icon name="home-o" slot="right"/>
</van-nav-bar> </van-nav-bar>
<van-swipe class="layout-swipe" :autoplay="3000"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-swipe-item> <div class="body">
<img src="../../assets/bar1.jpg" class="" width="100%"/> <van-swipe class="swipe" :autoplay="3000">
</van-swipe-item> <van-swipe-item>
</van-swipe> <img src="../../assets/bar1.jpg" class="" width="100%"/>
<van-notice-bar </van-swipe-item>
text="连云港警方“快递哥消防宣传公益使者”行动" </van-swipe>
left-icon="volume-o" :scrollable="false"/> <van-notice-bar
text="连云港警方“快递哥消防宣传公益使者”行动"
left-icon="volume-o" :scrollable="false"/>
<van-grid> <van-grid>
<van-grid-item <van-grid-item
v-for="g in grids" v-for="g in grids"
:key="g.key" :key="g.key"
:icon="g.icon" :icon="g.icon"
:text="g.text" :text="g.text"/>
/> </van-grid>
</van-grid>
</div>
</van-pull-refresh>
</div> </div>
</template> </template>
@ -38,6 +42,7 @@
Toast, Toast,
NoticeBar, NoticeBar,
Icon, Icon,
PullRefresh,
} from 'vant'; } from 'vant';
export default { export default {
@ -47,8 +52,10 @@
[GridItem.name]: GridItem, [GridItem.name]: GridItem,
[Swipe.name]: Swipe, [Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem, [SwipeItem.name]: SwipeItem,
[Toast.name]: Toast,
[NoticeBar.name]: NoticeBar, [NoticeBar.name]: NoticeBar,
[Icon.name]: Icon, [Icon.name]: Icon,
[PullRefresh.name]: PullRefresh,
}, },
data() { data() {
@ -99,15 +106,20 @@
text: "发案回访", text: "发案回访",
icon: "photo-o" icon: "photo-o"
} }
] ],
isLoading: false,
}; };
}, },
methods: { methods: {
onClickLeft() { onClickLeft() {
this.$router.push('nav'); this.$router.push('set');
}, },
onClickRight() { onClickRight() {
this.$router.push('set'); this.$router.push('nav');
},
onRefresh() {
Toast("Refresh finish");
this.isLoading = false;
} }
} }
}; };
@ -115,21 +127,22 @@
<style lang="less"> <style lang="less">
.layout { .layout {
padding-top: 50px;
padding-bottom: 50px;
&-bar { &-bar {
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0px; top: 0px;
} }
&-swipe { .body {
margin-top: 50px;
}
.swipe {
img { img {
width: 100%; width: 100%;
display: block; display: block;
} }
} }
} }
</style> </style>

140
src/view/set/index.vue
Unescape View File

@ -3,126 +3,102 @@
<van-nav-bar class="layout-bar" <van-nav-bar class="layout-bar"
title="设置" title="设置"
@click-left="onClickLeft" @click-left="onClickLeft"
left-arrow/> @click-right="onClickRight"
left-arrow>
<van-icon name="home-o" slot="right"/>
</van-nav-bar>
<van-swipe class="layout-swipe" :autoplay="3000"> <div class="body">
<van-swipe-item> <van-cell-group title="基本设置">
<img src="../../assets/bar1.jpg" class="" width="100%"/> <van-cell title="个人信息" is-link @click="onItem('10')" value="" />
</van-swipe-item> <van-cell title="修改密码" is-link @click="onItem('20')" value="" />
</van-swipe> </van-cell-group>
<van-notice-bar
text="连云港警方“快递哥消防宣传公益使者”行动"
left-icon="volume-o" :scrollable="false"/>
<van-grid> <van-cell-group title="帮助中心">
<van-grid-item <van-cell title="使用指导" is-link @click="onItem('30')" icon="label-o" value=""/>
v-for="g in grids" <van-cell title="意见反馈" is-link @click="onItem('40')" icon="question-o" value=""/>
:key="g.key" <van-cell title="关于我们" is-link @click="onItem('50')" icon="info-o" value=""/>
:icon="g.icon" <van-cell title="联系我们" is-link @click="onItem('60')" icon="phone-o" value="12345678900"/>
:text="g.text" </van-cell-group>
/>
</van-grid> <van-button style="margin-top: 30px" type="danger" size="large" @click="onExit">安全退出</van-button>
</div>
</div> </div>
</template> </template>
<script> <script>
import { import {
NavBar, NavBar,
Grid,
GridItem,
Swipe,
SwipeItem,
Toast, Toast,
NoticeBar, CellGroup,
Cell,
Button,
Icon, Icon,
} from 'vant'; } from 'vant';
export default { export default {
components: { components: {
[NavBar.name]: NavBar, [NavBar.name]: NavBar,
[Grid.name]: Grid, [Toast.name]: Toast,
[GridItem.name]: GridItem, [CellGroup.name]: CellGroup,
[Swipe.name]: Swipe, [Cell.name]: Cell,
[SwipeItem.name]: SwipeItem, [Button.name]: Button,
[NoticeBar.name]: NoticeBar,
[Icon.name]: Icon, [Icon.name]: Icon,
}, },
data() { data() {
return { return {
grids: [
{
key: "1",
text: "地址管理",
icon: "photo-o"
},
{
key: "2",
text: "房屋管理",
icon: "photo-o"
},
{
key: "3",
text: "人口管理",
icon: "photo-o"
},
{
key: "4",
text: "单位管理",
icon: "photo-o"
},
{
key: "5",
text: "综合查询",
icon: "photo-o"
},
{
key: "6",
text: "综合查询",
icon: "photo-o"
},
{
key: "7",
text: "情报线索",
icon: "photo-o"
},
{
key: "8",
text: "入户访查",
icon: "photo-o"
},
{
key: "9",
text: "发案回访",
icon: "photo-o"
}
]
}; };
}, },
methods: { methods: {
onClickLeft() { onClickLeft() {
this.$router.go(-1) this.$router.go(-1)
}, },
onClickRight() {
this.$router.push('nav');
},
onItem(index) {
switch (index){
case "10":
Toast("10");
break
case "20":
Toast("20");
break
case "30":
Toast("30");
break
case "40":
Toast("40");
break
case "50":
Toast("50");
break
case "60":
Toast("60");
break
}
},
onExit() {
Toast("已退出");
},
} }
}; };
</script> </script>
<style lang="less"> <style lang="less">
.layout {
padding-top: 50px;
padding-bottom: 50px;
.layout {
&-bar { &-bar {
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0px; top: 0px;
} }
&-swipe { .body{
img { margin-top: 50px;
width: 100%;
display: block;
}
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.