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

git

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

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

@ -3,126 +3,102 @@
<van-nav-bar class="layout-bar"
title="设置"
@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">
<van-swipe-item>
<img src="../../assets/bar1.jpg" class="" width="100%"/>
</van-swipe-item>
</van-swipe>
<van-notice-bar
text="连云港警方“快递哥消防宣传公益使者”行动"
left-icon="volume-o" :scrollable="false"/>
<div class="body">
<van-cell-group title="基本设置">
<van-cell title="个人信息" is-link @click="onItem('10')" value="" />
<van-cell title="修改密码" is-link @click="onItem('20')" value="" />
</van-cell-group>
<van-grid>
<van-grid-item
v-for="g in grids"
:key="g.key"
:icon="g.icon"
:text="g.text"
/>
</van-grid>
<van-cell-group title="帮助中心">
<van-cell title="使用指导" is-link @click="onItem('30')" icon="label-o" value=""/>
<van-cell title="意见反馈" is-link @click="onItem('40')" icon="question-o" value=""/>
<van-cell title="关于我们" is-link @click="onItem('50')" icon="info-o" value=""/>
<van-cell title="联系我们" is-link @click="onItem('60')" icon="phone-o" value="12345678900"/>
</van-cell-group>
<van-button style="margin-top: 30px" type="danger" size="large" @click="onExit">安全退出</van-button>
</div>
</div>
</template>
<script>
import {
NavBar,
Grid,
GridItem,
Swipe,
SwipeItem,
Toast,
NoticeBar,
CellGroup,
Cell,
Button,
Icon,
} from 'vant';
export default {
components: {
[NavBar.name]: NavBar,
[Grid.name]: Grid,
[GridItem.name]: GridItem,
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem,
[NoticeBar.name]: NoticeBar,
[Toast.name]: Toast,
[CellGroup.name]: CellGroup,
[Cell.name]: Cell,
[Button.name]: Button,
[Icon.name]: Icon,
},
data() {
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: {
onClickLeft() {
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>
<style lang="less">
.layout {
padding-top: 50px;
padding-bottom: 50px;
.layout {
&-bar {
position: fixed;
width: 100%;
top: 0px;
}
&-swipe {
img {
width: 100%;
display: block;
}
.body{
margin-top: 50px;
}
}
</style>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.