wangbing
6 years ago
parent
b234caefa5
commit
b73c59e642
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Encoding" defaultCharsetForPropertiesFiles="UTF-8">
|
||||
<file url="PROJECT" charset="UTF-8" />
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<includedPredefinedLibrary name="ECMAScript 6" />
|
||||
</component>
|
||||
</project>
|
||||
@ -1,13 +1,52 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
<div id="app">
|
||||
<transition :name="transitionName">
|
||||
<router-view class="child-view" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
transitionName: 'slide-right'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
if(to.path == '/'){
|
||||
this.transitionName = 'slide-right';
|
||||
}else{
|
||||
this.transitionName = 'slide-left';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-size: 16px;
|
||||
background-color: #f8f8f8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
body {
|
||||
font-size: 16px;
|
||||
background-color: #f8f8f8;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.child-view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
.slide-left-enter, .slide-right-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(50px, 0);
|
||||
transform: translate(50px, 0);
|
||||
}
|
||||
.slide-left-leave-active, .slide-right-enter {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(-50px, 0);
|
||||
transform: translate(-50px, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
import { router } from './router';
|
||||
import {router} from './router';
|
||||
import './style/index.less';
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
router,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
|
||||
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<van-nav-bar class="layout-bar"
|
||||
title="设置"
|
||||
@click-left="onClickLeft"
|
||||
left-arrow/>
|
||||
|
||||
<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-grid>
|
||||
<van-grid-item
|
||||
v-for="g in grids"
|
||||
:key="g.key"
|
||||
:icon="g.icon"
|
||||
:text="g.text"
|
||||
/>
|
||||
</van-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
NavBar,
|
||||
Grid,
|
||||
GridItem,
|
||||
Swipe,
|
||||
SwipeItem,
|
||||
Toast,
|
||||
NoticeBar,
|
||||
Icon,
|
||||
} from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[NavBar.name]: NavBar,
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem,
|
||||
[Swipe.name]: Swipe,
|
||||
[SwipeItem.name]: SwipeItem,
|
||||
[NoticeBar.name]: NoticeBar,
|
||||
[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)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.layout {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
&-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
&-swipe {
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
|
||||
<van-row class="user-links">
|
||||
<van-col span="6">
|
||||
<van-icon name="pending-payment" />
|
||||
待付款
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon name="records" />
|
||||
待接单
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon name="tosend" />
|
||||
待发货
|
||||
</van-col>
|
||||
<van-col span="6">
|
||||
<van-icon name="logistics" />
|
||||
已发货
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-cell-group class="user-group">
|
||||
<van-cell icon="records" title="全部订单" is-link />
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell icon="points" title="我的积分" is-link />
|
||||
<van-cell icon="gold-coin-o" title="我的优惠券" is-link />
|
||||
<van-cell icon="gift-o" title="我收到的礼物" is-link />
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Row, Col, Icon, Cell, CellGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Row.name]: Row,
|
||||
[Col.name]: Col,
|
||||
[Icon.name]: Icon,
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.user {
|
||||
&-poster {
|
||||
width: 100%;
|
||||
height: 53vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&-links {
|
||||
padding: 15px 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue