wangbing
6 years ago
parent
cb1a0c707c
commit
b234caefa5
@ -0,0 +1,10 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: ['@vue/app'],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'import',
|
||||||
|
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
|
||||||
|
'vant'
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"name": "lyg_ydjw",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Collection of vant demos.",
|
||||||
|
"author": "wangbing",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vant": "^2.0.0",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-router": "^3.0.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^3.8.0",
|
||||||
|
"@vue/cli-plugin-eslint": "^3.8.0",
|
||||||
|
"@vue/cli-service": "^3.8.3",
|
||||||
|
"babel-plugin-import": "^1.12.0",
|
||||||
|
"less": "^3.8.1",
|
||||||
|
"less-loader": "^5.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"rules": {},
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"plugins": {
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"Android >= 4.0",
|
||||||
|
"iOS >= 7"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>vant-demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
@ -0,0 +1,10 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import App from './App';
|
||||||
|
import { router } from './router';
|
||||||
|
import './style/index.less';
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
el: '#app',
|
||||||
|
render: h => h(App)
|
||||||
|
});
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import Router from 'vue-router';
|
||||||
|
|
||||||
|
Vue.use(Router);
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
redirect: '/nav'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'nav',
|
||||||
|
component: () => import('./view/nav'),
|
||||||
|
meta: {
|
||||||
|
title: '会员中心'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'user',
|
||||||
|
component: () => import('./view/user'),
|
||||||
|
meta: {
|
||||||
|
title: '会员中心'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'cart',
|
||||||
|
component: () => import('./view/cart'),
|
||||||
|
meta: {
|
||||||
|
title: '购物车'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'goods',
|
||||||
|
component: () => import('./view/goods'),
|
||||||
|
meta: {
|
||||||
|
title: '商品详情'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// add route path
|
||||||
|
routes.forEach(route => {
|
||||||
|
route.path = route.path || '/' + (route.name || '');
|
||||||
|
});
|
||||||
|
|
||||||
|
const router = new Router({ routes });
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const title = to.meta && to.meta.title;
|
||||||
|
if (title) {
|
||||||
|
document.title = title;
|
||||||
|
}
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
export {
|
||||||
|
router
|
||||||
|
};
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
@font-face {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: vant-icon;
|
||||||
|
src: url('../assets/vant-icon-c2acf5.ttf')
|
||||||
|
}
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<van-nav-bar class="layout-bar"
|
||||||
|
title="应用导航"
|
||||||
|
left-text="退出"
|
||||||
|
right-text="设置"
|
||||||
|
left-arrow
|
||||||
|
@click-left="onClickLeft"
|
||||||
|
@click-right="onClickRight"/>
|
||||||
|
|
||||||
|
<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,
|
||||||
|
} from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
[NavBar.name]: NavBar,
|
||||||
|
[Grid.name]: Grid,
|
||||||
|
[GridItem.name]: GridItem,
|
||||||
|
[Swipe.name]: Swipe,
|
||||||
|
[SwipeItem.name]: SwipeItem,
|
||||||
|
[NoticeBar.name]: NoticeBar,
|
||||||
|
},
|
||||||
|
|
||||||
|
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() {
|
||||||
|
Toast('返回');
|
||||||
|
},
|
||||||
|
onClickRight() {
|
||||||
|
Toast('按钮');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</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>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
<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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
outputDir: './dict',
|
||||||
|
publicPath: process.env.NODE_ENV === 'production' ? './' : './',
|
||||||
|
devServer: {
|
||||||
|
disableHostCheck: true
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in new issue