默认提交

@@ -8,6 +8,9 @@
   <meta name="viewport"
     content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <!-- <script src="<%= BASE_URL %>static/js/weixin/jweixin-1.6.0.js"></script>
+  <script src="<%= BASE_URL %>static/js/kd/kd-sdk.1.0.0.js"></script>
+  <script src="<%= BASE_URL %>static/js/kd/kd.js"></script> -->
   <title>vue-cli3-framework</title>
 </head>
 

+let appId = 'e13baf8d4a0d468eae005935332c5429';
+let appKey = '1c60d1543db640e5970ffa4a794eb5c6';
+KD.init(appId, appKey);
+let weixin = new KD.weixin();
+weixin.initConfig();
+// window.weixin = weixin;
+let openId = weixin.getOpenId();
+window.openId = openId;
+window.openid = openId;
+window.wxUserInfo = null;
+
+let urlShortCode = 's2n7/';
+let href = location.href;
+if (href.indexOf("192.168.") != -1 || href.indexOf("172.20.") != -1) {
+    urlShortCode = "";
+}
+let domain = `${location.protocol}//${document.domain}/${urlShortCode}`;
+let shareTitle = "";
+let shareDesc = "";
+let shareLink = `${domain}index.html`;
+let shareImgUrl = `${domain}share.png`;
+
+window.shareCodeLink = shareLink;
+
+var KdIns = window.KdIns || ({});
+// 设置分享
+KdIns.setShare = function (title, desc, link, imgUrl) {
+    if (!title) title = shareTitle;
+    if (!desc) desc = shareDesc;
+    if (!link) link = shareLink;
+    if (!imgUrl) imgUrl = shareImgUrl;
+    weixin.setShare(title, desc, link, imgUrl, (pos) => {})
+}
+
+console.log("domain:", domain);
+KdIns.setShare(``, ``, ``, ``);
+
+// KdIns.setShareShareCode = function (shareCode) {
+//     let shareCodeLink = `${shareLink}#/coop?shareCode=${shareCode}`;
+//     window.shareCodeLink = shareCodeLink;
+//     KdIns.setShare(``, ``, shareCodeLink, ``);
+// }
+
+// KdIns.getShareLink = function (shareCode) {
+//     let shareCodeLink = `${shareLink}#/coop?shareCode=${shareCode}`;
+//     return shareCodeLink;
+// }
+
+// 
+KdIns.setShareShareCode = function (shareCode) {
+    let shareCodeLink = `${shareLink}?f=coop&shareCode=${shareCode}`;
+    window.shareCodeLink = shareCodeLink;
+    KdIns.setShare(``, ``, shareCodeLink, ``);
+}
+KdIns.getShareLink = function (shareCode) {
+    let shareCodeLink = `${shareLink}?f=coop&shareCode=${shareCode}`;
+    return shareCodeLink;
+}
+
+
+// 读取微信身份
+KdIns.getUserInfo = function () {
+    return new Promise((resolve, reject) => {
+        weixin.getUserInfo((res) => {
+            window.wxUserInfo = res;
+            window.wxUserInfo.avatar = window.wxUserInfo.headimgurl;
+            resolve(res);
+        });
+    });
+}
+
+// 读取微信身份CGI模式，需要用户显示授权后才能获得数据。获取信息中包含了用户的关注信息与unionid
+KdIns.getCgiUserInfo = function () {
+    return new Promise((resolve, reject) => {
+        weixin.getCgiUserInfo((res) => {
+            resolve(res);
+        });
+    });
+}
\ No newline at end of file

@@ -35,8 +35,7 @@ export default {
     },
   },
   mounted() {
-    console.log("111");
-    this.initWaterMark();
+    // this.initWaterMark();
   },
 };
 </script>
@@ -69,21 +68,6 @@ div {
   margin: 20px;
 }
 
-.app__title {
-  font-size: $fontSize;
-  line-height: $fontSize + 4px;
-  font-weight: bold;
-  padding-bottom: 10px;
-  margin-bottom: 20px;
-  border-bottom: 0.5px solid #eeeeee;
-}
-
-.app__desc {
-  font-size: $fontSizeSmaller;
-  line-height: $fontSizeSmaller + 2px;
-  margin-bottom: 20px;
-  color: $colorGray;
-}
 
 .app__bgc {
   position: fixed;

 module.exports = {
-  testListGet: '/xxx/xxx/list',
 
+  login: '/front/userApi/login', // 登录
+  profile: '/front/userApi/profile', // 个人信息
+  uploadProfile: '/front/userApi/uploadProfile', // 更新头像昵称
+
+  
+  upload: '/common/upload', // 上传文件 [x]
+  list: "xxx",
+  
+  // areaQuery: 'https://api.k.wxpai.cn/bizproxy/kdapi/area', // post 区域查询
 
-  areaQuery: 'https://api.k.wxpai.cn/bizproxy/kdapi/area', // post 区域查询
 }
\ No newline at end of file

@@ -102,7 +102,7 @@ axios.interceptors.response.use(
 /**
  * 分解参数&拦截请求
  */
- function analysisParams(params) {
+function analysisParams(params) {
   let {
     url,
     data,
@@ -196,6 +196,22 @@ export const httpPost = params => {
  data.append('path', '/pro/mzczcradmin/')
  data.append('file', file.file)
  */
+// export const formdata = params => {
+//   let {
+//     url,
+//     data,
+//   } = params;
+
+//   let formData = new FormData(); //使用formData对象
+//   for (let key in data) {
+//     formData.append(key, data[key]);
+//   }
+//   return axios.post(`${base}${url}`, formData, {
+//     headers: {
+//       "Content-Type": "multipart/form-data"
+//     }
+//   }).then(res => res.data.content);
+// }
 export const formdata = params => {
   let {
     url,
@@ -208,13 +224,16 @@ export const formdata = params => {
   }
   return axios.post(`${base}${url}`, formData, {
     headers: {
-      "Content-Type": "multipart/form-data"
+      "Content-Type": "multipart/form-data",
+      "-kd-platform-module": MODULE_CODE,
+      "-kd-platform-env": ENV
     }
   }).then(res => res.data.content);
 }
 
 
 
+
 /**
  * 打点
  * @param {*} params

@@ -6,13 +6,15 @@ import store from './store'
 import api from '@/api/api'
 import {
 	httpGet,
-	httpPost
+	httpPost,
+	formdata
 } from '@/api/fetch-api.js'
 
 // import Mock from './mock'
 // Mock.bootstrap();
 
 import 'amfe-flexible/index.js'
+import vant from '@/utils/vant-util'
 
 // import '@/styles/index.scss' // global css
 import '@/styles/fonticon.scss' //  图标字体
@@ -22,30 +24,70 @@ import '@/assets/fonts/font.scss' //  字体引入
 Vue.config.productionTip = false
 
 
-import {
-	Swipe,
-	SwipeItem,
-	Lazyload,
-	Tab,
-	Tabs,
-	Sticky,
-	Popup,
-	Tabbar,
-	TabbarItem,
-	Icon,
-	Toast,
-	Button
-} from 'vant';
-
-Vue.use(Swipe).use(SwipeItem)
-	.use(Lazyload)
-	.use(Tab).use(Tabs)
-	.use(Sticky)
-	.use(Popup)
-	.use(Tabbar).use(TabbarItem)
-	.use(Icon)
-	.use(Button)
-	.use(Toast);
+
+
+// 原app节点请通过 document.getElementById('app') 获取
+// routes里的component组件需要以import方式引入，否则页面创建的时候，app还没挂载。
+
+
+
+// function initVue() {
+
+// 	let codeSn = getQuery("c");
+// 	if (process.env.NODE_ENV == "development") {
+// 		openid = "oDPvDjjha8EVFhJaceqxs3Bta-1k";
+// 	}
+// 	console.log("openid:", openid);
+// 	app.post({
+// 		url: app.api.login,
+// 		data: {
+// 			openid: openid
+// 		}
+// 	}).then((result) => {
+// 		console.log("result:", result);
+// 		setToken(result.sessionId);
+// 		// console.log("KdIns:", KdIns);
+
+// 		// 显示授权，或者头像昵称
+// 		// if (process.env.NODE_ENV == "development") {
+// 		// 	let wxUserInfo = {}
+// 		// 	wxUserInfo.avatar = 'https://thirdwx.qlogo.cn/mmopen/vi_32/g5XHJelCh5ca3HbruKTM38uaOk0lqzMK4vDb7bLsUNiacRfEc7wp8wLP6GDlFicFFXZ1xAuTnSl8GfSoibPUgY1eg/132';
+// 		// 	wxUserInfo.nickname = "SimonFungC";;
+// 		// 	app.post({
+// 		// 		url: app.api.uploadProfile,
+// 		// 		data: wxUserInfo
+// 		// 	}).then((result) => {})
+// 		// } else {
+// 		// 	KdIns.getUserInfo().then((res) => {
+// 		// 		let wxUserInfo = res;
+// 		// 		wxUserInfo.avatar = wxUserInfo.headimgurl;
+// 		// 		app.post({
+// 		// 			url: app.api.uploadProfile,
+// 		// 			data: wxUserInfo
+// 		// 		}).then((result) => {})
+// 		// 	})
+// 		// }
+
+
+// 		window.vue = new Vue({
+// 			router,
+// 			store,
+// 			data: {
+// 				isInit: false,
+// 				// wxUserInfo: wxUserInfo,
+// 				codeSn: codeSn,
+// 			},
+// 			render: h => h(VueApp)
+// 		}).$mount('#app');
+
+// 		// console.log('window.vue:',window.vue);
+// 	}).catch((err) => {
+
+// 	});
+
+// }
+// initVue();
+
 
 let app = new Vue({
 	router,
@@ -56,12 +98,11 @@ let app = new Vue({
 	render: h => h(VueApp)
 }).$mount('#app')
 
+
 // 挂载全局app
 app.api = api;
 app.get = httpGet;
 app.post = httpPost;
+app.uploadFile = formdata;
 app.router = router;
 window.app = app;
\ No newline at end of file
-
-// 原app节点请通过 document.getElementById('app') 获取
-// routes里的component组件需要以import方式引入，否则页面创建的时候，app还没挂载。
\ No newline at end of file

+import areaList from '@common/area.js'
+import {
+    Toast
+} from 'vant';
+
+export default {
+    data() {
+        return {
+            key: 'value',
+            fileList: [],
+
+            areaVisible: false,
+            areaList: [],
+            // 姓名、手机号、省市区、详细地址
+            editable: false,
+            formData: { // 奖品信息。抽奖后显示
+                "winCode": "",
+                "name": "",
+                "mobile": "",
+                "province": "",
+                "city": "",
+                "district": "",
+                "address": "",
+                "extData": "",
+                "prize": { // 奖品信息
+                    "prizeName": "",
+                    "prizePic": "",
+                    "prizeThumb": "",
+                    "prizeType": "", // 如果不中奖，奖品标识为lose
+                    "outParams": "",
+                    "extParams": "",
+                    "outParamsVo": { // outParams参数格式化}
+                    }
+                }
+            },
+
+            page: 1,
+            size: 10,
+            loading: false,
+            finished: false,
+            list: [],
+        }
+    },
+    components: {},
+    computed: {
+        areaStr() {
+            let result = "";
+            let {
+                province,
+                city,
+                district
+            } = this.formData;
+            if (province && city && district) {
+                result = `${province}-${city}-${district}`
+            }
+            return result;
+        }
+    },
+    methods: {
+        resetPage() {
+            this.loading = false;
+            this.page = 1;
+            this.total = 0;
+            this.list = [];
+            this.finished = false;
+        },
+        onLoad() {
+            if (this.finished) {
+                this.loading = false;
+            } else {
+                this.page++;
+                this.queryList();
+            }
+
+        },
+
+        queryList() {
+            app.get({
+                url: app.api.list,
+                data: {
+                    page: this.page,
+                    size: this.size
+                }
+            }).then((result) => {
+                this.list = this.list.concat(result.list);
+                this.finished = this.list.length >= result.total;
+                this.loading = false;
+            }).catch((err) => {
+                this.loading = false;
+                this.finished = true;
+            });
+        },
+
+
+        // 显示地区
+        onShowAreaSelect() {
+            if (!this.editable) return;
+            this.areaVisible = true;
+        },
+        // 确认省市区
+        onAreaConfirm(val) {
+            this.areaVisible = false;
+            if (val && val.length >= 3) {
+                this.formData.province = val[0].name || "";
+                this.formData.city = val[1].name || "";
+                this.formData.district = val[2].name || "";
+
+                this.formData.provinceCode = val[0].code || "";
+                this.formData.cityCode = val[1].code || "";
+                this.formData.districtCode = val[2].code || "";
+            }
+        },
+
+        beforeAvatarUpload(file) {
+            const size = 10 * 1024 * 1024;
+            if (file.size > size) {
+                Toast('上传图片大小不能超过10M');
+                return false;
+            }
+            return true;
+        },
+        afterRead(file) {
+            console.log("file:", file);
+            if (file.length == undefined) {
+                this.uploadFile(file);
+            } else {
+                for (let index = 0; index < file.length; index++) {
+                    this.uploadFile(file[index]);
+                }
+            }
+        },
+        uploadFile(file) {
+            file.status = 'uploading';
+            file.message = '上传中...';
+            this.loading = true;
+            app.uploadFile({
+                    url: app.api.upload,
+                    // data: formData
+                    data: {
+                        file: file.file,
+                        subPath: this.subPath
+                    }
+                })
+                .then(res => {
+                    file.status = 'done';
+                    file.message = '';
+                    file.url = res;
+                    console.log("file:", file);
+                    console.log("fileList:", this.fileList);
+                    this.loading = false;
+                })
+                .catch(e => {
+                    file.status = 'failed';
+                    file.message = '上传失败';
+                    this.loading = false;
+                    this.refreshFileList();
+                    Toast("上传失败，请上传体积小于10的文件")
+                });
+        },
+        refreshFileList() {
+            let fileList = this.fileList.filter(item => {
+                return item.url
+            });
+            this.fileList = fileList
+        },
+        initData() {
+            this.editable = true;
+        }
+    },
+    mounted() {
+        this.areaList = areaList;
+        this.initData();
+    },
+    created() {}
+}
\ No newline at end of file

+.top-space {
+    height: 60px;
+}
+
+.form {
+    margin: 0 auto 0;
+    padding: 0 30px;
+    @extend .bb;
+
+    &-item {
+        margin: 0 auto 60px;
+        &-tit {}
+
+        .cont {}
+    }
+}
+
+.btn-wrap {
+    margin: 60px auto 0;
+    padding: 0 30px;
+    @extend .bb;
+
+    .btn {
+        @include bc();
+    }
+}
\ No newline at end of file

+
+<template>
+  <div class="page">
+    <div class="app__bgc bgc"></div>
+    <div class="app__bg bg"></div>
+    <div class="app__content main">
+      <div class="top-space"></div>
+      <div class="content">
+
+        <div class="form">
+
+          <div class="form-item">
+            <div class="form-tit">列表</div>
+            <div class="cont">
+              <div class="list">
+                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
+                  :immediate-check="false">
+
+                  <div v-for="(item,index) in list" :key="item.id">
+                    {{ index }}
+                  </div>
+                </van-list>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-item">
+            <div class="form-tit">地区</div>
+            <div class="cont">
+              <div @click="onShowAreaSelect" class="val">
+                <input readonly="true" v-model="areaStr" class="ipt" type="text">
+              </div>
+            </div>
+
+          </div>
+
+          <div class="form-item">
+            <div class="form-tit">图片上传</div>
+            <div class="cont">
+              <van-uploader v-model="fileList" :after-read="afterRead" accept="image/png, image/jpeg, video/mp4"
+                preview-size='26vw' :max-count="9">
+              </van-uploader>
+            </div>
+          </div>
+        </div>
+
+        <div class="btn-wrap">
+          <div class="btn">提 交</div>
+        </div>
+      </div>
+    </div>
+    <van-popup v-model="areaVisible" position="bottom" get-container="body">
+      <van-area title="省市区选择" :area-list="areaList" @confirm="onAreaConfirm" @cancel="areaVisible=false" />
+    </van-popup>
+  </div>
+</template>
+
+<script src="./exp.js"></script>
+<style lang="scss" scoped>
+@import "./exp.scss";
+</style>
\ No newline at end of file

 .content {
-  color: $colorBlue;
-  @extend .underline;
+
 }

@@ -20,6 +20,14 @@ const routes = [{
     }
   },
   {
+    path: '/exp',
+    name: 'exp',
+    component: () => import('./pages/exp/exp.vue'),
+    meta: {
+      title: ''
+    }
+  },
+  {
     path: '/demo',
     name: 'demo',
     component: () => import('./pages/demo/demo.vue'),

@@ -17,6 +17,7 @@
 
   -ms-text-overflow: ellipsis;
 }
+
 @mixin ellipsis1() {
   display: -webkit-box;
   word-break: break-all;
@@ -51,6 +52,7 @@
 
 // 清除浮动
 @mixin clearfix() {
+
   &:before,
   &:after {
     content: " "; // 1
@@ -101,81 +103,40 @@
   border: 0;
 }
 
-// 橙色底实心 自定义圆角按钮
-@mixin btc($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) {
-  @extend .fcc;
-  padding: 0 $padding;
-  height: $hei;
-  line-height: normal;
-  text-align: center;
-  border-radius: $borderRadius;
-  background-color: $cOrange;
-  font-size: $fontSize;
-  color: #ffffff;
-  letter-spacing: 1.4px;
-  cursor: pointer;
-  user-select: none;
-}
-
-// 白底空心 自定义圆角按钮
-@mixin btc-o($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) {
-  @extend .fcc;
-  @extend .bb;
-  padding: 0 $padding;
-  height: $hei;
-  line-height: normal;
-  text-align: center;
-  border-radius: $borderRadius;
-  font-size: $fontSize;
-  color: $cOrange;
-  letter-spacing: 1.4px;
-  background-color: #ffffff;
-  cursor: pointer;
-  border: solid 1px $cOrange;
-  user-select: none;
-}
-
-// 定宽 橙色底实心圆角按钮
-@mixin btc2($wid: 118px, $hei: 22px, $fontSize: 14px) {
-  width: $wid;
-  height: $hei;
-  line-height: $hei + 2px;
+
+// 居中按钮样式
+@mixin btc($width, $height) {
+  width: $width;
+  height: $height;
+  line-height: $height;
   text-align: center;
-  border-radius: $hei * 0.5;
-  background-color: $cOrange;
-  font-size: $fontSize;
-  color: #ffffff;
-  letter-spacing: 1.4px;
-  cursor: pointer;
-  user-select: none;
 }
 
-// 橙框橙字
-@mixin btc3($hei: 22px, $fontSize: 14px) {
-  height: $hei;
-  line-height: $hei;
-  padding: 0 12px;
+
+
+// 通用按钮
+@mixin bc($width:100%, $height:88px, $fontSize:30px) {
+  color: #FFFFFF;
+  position: relative;
+  width: $width;
+  height: $height;
+  line-height: $height;
   text-align: center;
-  border-radius: 2px;
   font-size: $fontSize;
-  letter-spacing: 1.4px;
-  cursor: pointer;
-  user-select: none;
-  color: $cOrange;
-  border: solid 1px $cOrange;
-}
-
-// 定宽 黑色底实心圆角按钮
-@mixin btc4($wid: 118px, $hei: 22px, $fontSize: 14px) {
-  width: $wid;
-  height: $hei;
-  line-height: $hei + 2px;
+  border-radius: 8px;
+  background-color: $colorMain;
+}
+
+// 通用按钮
+@mixin bc-o($width:100%, $height:88px, $fontSize:30px) {
+  position: relative;
+  width: $width;
+  height: $height;
+  line-height: $height;
   text-align: center;
-  border-radius: $hei * 0.5;
-  background-color: $cLightDard;
   font-size: $fontSize;
-  color: #ffffff;
-  letter-spacing: 1.4px;
-  cursor: pointer;
-  user-select: none;
+  border-radius: 8px;
+  color: $colorMain;
+  border: solid 1PX $colorMain;
+  background-color: transparent;
 }
\ No newline at end of file

@@ -64,3 +64,17 @@
 .pointer {
   cursor: pointer;
 }
+
+
+.untouch {
+  pointer-events: none;
+}
+
+
+.ell {
+  @include ellipsis(1);
+}
+
+.ell2 {
+  @include ellipsis(2);
+}
\ No newline at end of file

-/**
- * ------------------------------------------------------------------
- * Sass 变量
- *
- * ------------------------------------------------------------------
- *
- */
-
-// Margin
-$marginTopSmaller: 20px;
-$marginTopSmall: 30px;
-$marginTopMedium: 40px;
-$marginTopLarge: 60px;
-$marginTopLarger: 80px;
-
-// Padding
-$paddingTopSmaller: 20px;
-$paddingTopSmall: 30px;
-$paddingTopMedium: 40px;
-$paddingTopLarge: 60px;
-$paddingTopLarger: 80px;
-
-// Color
-$colorBlue: #20A0FF;
-$colorGreen: #13CE66;
-$colorGray: #475669;
-$colorBlack: #000;
-$colorRed: #FF4949;
-$colorYellow: #F7BA2A;
-
-$color: #787878;
-$colorLink: #1D8CE0;
-
-$backGroundColor: #fff;
-
-// Font
-$fontSize: 32px;
+// Font 文字
+
+// 大标题 Medium 26pt 34H 500
+$fontSizeTitleLarger: 52px;
+
+// 标准标题 Medium 20pt 28H 500
+$fontSizeTitleLarge: 40px;
+
+// 标准标题 Medium 18pt 24H 500
+$fontSizeTitle: 36rpx;
+
+// 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400
+$fontSizeNavLarge: 34px;
+
+// 正文5 大部分正文文字+导航栏的文字 Regular 16pt 22H 400
+$fontSizeNav: 32px;
+
+// 正文4 信息较多且需要多呈现时的正文使用 Regular 15pt 21H 400
+$fontSize: 30px;
+
+// 正文3 信息较多且需要多呈现时的正文使用 Regular 14pt 21H 400
 $fontSizeSmall: 28px;
-$fontSizeSmaller: 24px;
-$fontSizeLarge: 36px;
-$fontSizeLarger: 44px;
+
+// 正文2 对主题进行释意的文字+协议条款文字等 Regular 13pt 19H 400
+$fontSizeRemark: 26px;
+
+// 正文1 对主题进行释意的文字+协议条款文字等 Regular 12pt 16H 400
+$fontSizeRemarkSmall: 24px;
+
+// 标签栏辅助文字 Medium 10pt 14H 500
+$fontSizeTag: 20px;
+
+// 表单中数据文字 Regular 8pt 10H 400
+$fontSizeData: 16px;
+
+
+// Color  颜色 以下来自 有赞建议
+$color: #323233; // 文字色，指主文字1
+$colorText: #646566; // 文字色，指主文字2
+$colorLight: #969799; // 文字色，指辅助、说明文字
+$colorTips: #969799; // 文字色，指 disable、提示文字等
+$colorBorder: #DCDEE0; // 边框、线色
+$colorBorderLight: #EBEDF0; // 边框、线色
+$colorBg: #F2F3F5; // 深色背景
+$colorBgLight: #F7F8FA; // 浅色背景
+
+$colorBlack: #000000; // 黑色
+$colorWhite: #ffffff; // 白色
+
+// 功能色
+$colorLink:#576B95; // 文字链颜色
+$colorSuccess: #07C160; // 成功色
+$colorDanger: #EE0A24; // 报错色
+$colorWarning: #ED6A0C; // 通知消息中的文本颜色
+$colorWarning: #FFFBE8; // 通知消息中的背景颜色
+$colorInfo: #FAAB0C; // 文字辅助颜色
+
+
+
+// 业务色  以下颜色为自定义
+$colorMain:#409EFF; // 主题颜色 根据业务定义  // #EE0A24有赞默认
+$colorPrice: #ee0a24; // 价格颜色
+// $fontGray:#9F9E9E; // 提示文字颜色
+
+
+// BorderRadius 角边
+$borderRaidus: 16px; // 默认卡片编辑 角边
+$borderRaidusPopup: 40px; // 模态面板编辑 角边
+$borderRaidusDialog: 32px; // 对话框 角边
+
+
+// Space 间距 有赞建议为8的倍数（8点网格系统）
+$marginLarge:32px; // 外边距 多用于主内容离屏幕边缘
+$margin:24px; // 外边距 多用于主内容离屏幕边缘
+$marginSmall: 16px; // 小外边距 多用于内容间上下距离
+$marginSmaller: 8px; // 小外边距 多用列表item间上下左右距离
+
+$paddinglarge:32px; // 内边距
+$padding: 24px;
+$paddingSmall: 16px;
+$paddingSmaller: 8px;
+
+// 页面样式
+$pageBottom: 160px; // 页面底部
+$contentWid: 690px; //内容宽度   （由间距为8的倍数所得）
+$contentWidth: 710px; //内容宽度   （由间距为8的倍数所得）
+$screenWidth: 750px; // 屏幕宽度

+import Vue from 'vue'
+
+import {
+	Swipe,
+	SwipeItem,
+	Lazyload,
+	Tab,
+	Tabs,
+	Sticky,
+	Popup,
+	Tabbar,
+	TabbarItem,
+	Icon,
+	Uploader,
+    Area,
+    List,
+	Toast,
+	Button
+} from 'vant';
+
+Vue.use(Swipe).use(SwipeItem)
+	.use(Lazyload)
+	.use(Tab).use(Tabs)
+	.use(Sticky)
+	.use(Popup)
+	.use(Tabbar).use(TabbarItem)
+	.use(Icon)
+	.use(Uploader)
+	.use(Area)
+	.use(List)
+	.use(Button)
+	.use(Toast);