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