111

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV="development"
+VUE_APP_URL=" http://localhost:8080/api"

.env.production

@@ -0,0 +1,3 @@
+# 配置生产地址,就是你将来发布上线的地址
+NODE_ENV="production"
+VUE_APP_URL="http://test.huruqing.cn:3007"

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.svn
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.bak.md

@@ -0,0 +1,49 @@
+# 知识体系
+
+#### 封装 axios
+
+1. 使用拦截器统一处理请求和响应数据
+2. 挂载到原型上
+
+#### 上拉加载更多
+
+1. vant 的组件
+2. 设置初始高度，不然 bug 很严重
+
+#### 懒加载
+
+1. 懒加载是什么
+2. 如何实现
+
+#### 环境配置
+
+1. 根目录新建 .env.development （测试环境） 文件
+
+   ```
+   VUE_APP_URL="http://132.232.87.95:3000/api"
+   ```
+
+   然后新建。env.production（生产环境）文件
+
+   ```
+   VUE_APP_URL="http://132.232.94.151:3000/api"
+   ```
+
+2. 配置 package.json
+
+   ```
+    "scripts": {
+       "serve": "vue-cli-service serve --model",
+       "build": "vue-cli-service build --model",
+       "lint": "vue-cli-service lint"
+     },
+   ```
+
+3. 项目中通过 process.env.VUE_APP_URL  访问 VUE_APP_URL 的值，不同的环境取到的值不一样
+
+#### 打包部署
+
+#### 移动端适配
+
+1. amfe-flexib 设置 root 元素字体大小
+2. pxtorem  px 转 rem

README.md

@@ -0,0 +1,143 @@
+# vue 移动端模板
+
+#### 启动项目
+1. npm i 安装依赖
+1. npm run serve 启动项目
+1. cd server  (接口目录)
+1. npm i 
+1. npm run dev
+
+
+>#### 前言
+花了半天的时间整理了一个 vue 移动端项目的模板，希望多还不熟悉 vue 项目搭建的小伙伴有些帮助，也欢迎各路大神提出宝贵的建议，本文章默认你已经对 webpack 和 vue 有一定的了解。
+
+>#### 核心知识体系简介
+1. vue-cli3 脚手架
+    * 创建项目
+    * 开发环境和生产环境配置
+    * 配置跨域
+    
+2. vue-router 路由
+    * 路由配置
+    * 子路由配置
+    * 路由守卫，设置页面标题和根据登录状态判断是否允许进入特定页面
+    * 对router-link使用active-class,高亮当前路由
+    
+3. vuex 跨组件通信
+    * vuex 配置
+    * vuex 持久化
+    * vuex 使用
+    
+4. rem 移动端适配
+    * 通过 amfe-flexibe 设置 root 元素的字体大小
+    * 通过 pxtorem 把 px 转成 rem, 无需手动书写 rem
+    
+5. axios 配置
+    * 使用拦截器配置 baseURL 和给请求头加上 token
+    * 使用拦截器对返回的数据进行处理
+    * 挂载到 vue 原型上，方便使用
+    
+6. promise 使用
+    
+    * 在项目中使用 async await 把异步变成同步，编写和阅读更舒服
+    
+7. 有赞 vant-ui 库
+    * 导航栏
+    * 单元格
+    * loading
+    * ......
+    
+8. 使用keep-alive组件缓存某些组件(新增)
+
+9. 添加小型服务器接口,用来编写本项目所需接口
+
+    
+
+>####  vue-cli3 脚手架
+1. 具体操作,请移步[vue-cli3文档官网]( [https://cli.vuejs.org/zh/guide/installation.html](https://links.jianshu.com/go?to=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fguide%2Finstallation.html)
+)
+2. **开发环境和生产环境配置**
+  * 根目录新建两文件 .env.development => 开发环境配置  .env.production => 生产环境配置
+![image.png](https://upload-images.jianshu.io/upload_images/7177443-4f2c42f1c1bc4439.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+文件内容
+
+```
+// .env.development
+VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"
+```
+
+```
+// .env.production
+VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"
+```
+
+3. **package.json 配置**
+vue-cli3默认已经给你配置好了model, 开发环境对应development, 生产环境对应production,如果你不知道model,请移步[webpack文档官网]([https://www.webpackjs.com/](https://www.webpackjs.com/)
+)
+![image.png](https://upload-images.jianshu.io/upload_images/7177443-5e9e447da363cfca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+4. 在你的项目中，通过  process.env.VUE_APP_URL 可以访问到你在环境配置文件中设置的变量
+![](https://upload-images.jianshu.io/upload_images/7177443-d585aa842e655950.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+![开发环境中的变量](https://upload-images.jianshu.io/upload_images/7177443-02325513adfb846f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+>####  vue-router 路由
+这里主要讲一下路由守卫的配置，先上图
+![路由配置](https://upload-images.jianshu.io/upload_images/7177443-5f45913a5d70bf4d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+下面是路由守卫配置
+![路由守卫](https://upload-images.jianshu.io/upload_images/7177443-a935a3506fd9f567.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+>####  vuex 跨组件通信
+1. 项目中有以下几个地方用到了 vuex
+    * 设置登录状态
+    * 设置用户名
+    * 保存 token
+2. 以登录为里，做个简单说明
+![](https://upload-images.jianshu.io/upload_images/7177443-825e2e816a49413b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+登录成功时，修改登陆状态为 true
+![image.png](https://upload-images.jianshu.io/upload_images/7177443-906c4cc3e5713830.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+退出登录时，修改登录状态为 false
+![](https://upload-images.jianshu.io/upload_images/7177443-1da2a2e9208c1872.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+4. 获取 store 中 state 设置的变量通过 mapGetters, 看图
+![](https://upload-images.jianshu.io/upload_images/7177443-61be719b7d9c8a43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+![在模板中使用](https://upload-images.jianshu.io/upload_images/7177443-8b2c372f88a0f59e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+3. vuex 持久化
+    * 使用 vuex-persistedstate 插件对 vuex 的状态持久化
+    * 等你的页面刷新时，状态依然存在
+    * 本质上是这个插件帮你把状态都存到了 localStorage
+配置方法，以下是最简单的配置
+![](https://upload-images.jianshu.io/upload_images/7177443-0aa53dbad9057879.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+使用了 vuex-persistedstate 插件后，store 里的状态都存到了 localStorage
+![image.png](https://upload-images.jianshu.io/upload_images/7177443-9cf6e3db49baf726.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+>#### rem 移动端适配
+适配原理我就不多说了,不清楚请看我的另外一篇文章[用rem编写移动端自适应网页](https://www.jianshu.com/p/91ac1690be89)(https://www.jianshu.com/p/91ac1690be89),这里说一下在vue-cli3中是如何配置的
+1. 安装 amfe-flexible 插件 ```npm i amfe-flexible --save-dev```
+2. 在 main.js 中导入
+![ipone6](https://upload-images.jianshu.io/upload_images/7177443-05c1792eb5cfab79.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+3. 此时你的应用的 html 会自动根据手机的尺寸设置了 font-size, 如图
+![](https://upload-images.jianshu.io/upload_images/7177443-5ea467230b5426e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+![](https://upload-images.jianshu.io/upload_images/7177443-ee3e3fda5ec57b39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+4. 配置 pxtorem 插件，能帮你自动把 rem 转成 px, 具体配置如下，在项目根目录下的 vue.config.js（没有则新建）
+里进行配置，如图
+![](https://upload-images.jianshu.io/upload_images/7177443-2b6e79201971d86d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+>####  axios 配置
+1. axios 拦截器
+能帮我们对数据进行一些统一的处理，比如后台给我们的数据里都是把数据包在 data 对象里面，而使用 axios, 则又会再用 data 把返回的数据再包一层，如果不统一处理以下，用起来很不爽。
+2. 设置请求头，后台识别用户经常使用 token, 我们登陆的时候能拿到后台返回的 token, 然后存入 store 里，当我们发送请求时，我们可以给请求头统一加上 token, 如图
+![](https://upload-images.jianshu.io/upload_images/7177443-2a42eb0010cde4a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+3. 把 axios 的实例挂载到 vue 的实例上
+![](https://upload-images.jianshu.io/upload_images/7177443-5163a952efbac676.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+发请求的时候，只需要使用 this.$axios.get 或者 this.$axios.post 就行了，是不是很方便
+![](https://upload-images.jianshu.io/upload_images/7177443-5a0bd9bbec047aa7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+>#### Promise 的使用
+promise 是个好东西，可以把异步变同步，在项目中使用 async await 编写代码，那叫一个爽，具体用法如下：
+![](https://upload-images.jianshu.io/upload_images/7177443-9f357fbd0a04215a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+>#### 有赞 vant-ui 库
+有赞是搞电商开发的,在公众号和小程序模板界算是做得比较不错的,vant-ui是他们开源出来的一个ui库,同时他们还有小程序的ui库,感兴趣的小伙伴可以去[看看](https://youzan.github.io/vant/)(https://youzan.github.io/vant/)
+
+>
+
+

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "vant",
+        libraryDirectory: "es",
+        // 指定样式路径
+        style: name => `${name}/style/less`
+      },
+      "vant"
+    ],
+    ["@babel/plugin-syntax-dynamic-import"]
+  ]
+};

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "maizuo-h6",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --model",
+    "dev": "vue-cli-service serve --model",
+    "prod": "vue-cli-service serve --model production",
+    "build": "vue-cli-service build --model",
+    "push": "git add . && git commit -m'xxx' && git push",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "babel-plugin-import": "^1.12.2",
+    "core-js": "^2.6.5",
+    "css-loader": "^3.2.0",
+    "echarts": "^4.2.1",
+    "qs": "^6.10.1",
+    "style-loader": "^1.0.0",
+    "vue": "^2.6.10",
+    "vuex-persistedstate": "^2.5.4"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.7.0",
+    "@vue/cli-plugin-eslint": "^3.7.0",
+    "@vue/cli-service": "^3.7.0",
+    "amfe-flexible": "^2.2.1",
+    "autoprefixer": "^9.5.1",
+    "axios": "^0.18.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-pxtorem": "^4.0.1",
+    "vant": "^2.2.9",
+    "vue-router": "^3.0.6",
+    "vue-template-compiler": "^2.5.21",
+    "vuex": "^3.1.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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"> -->
+  <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">
+  <title>vue-mobile模板</title>
+  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1456778_1mgn5degp7t.css">
+  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but maizuo-h6 doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
+  </div>
+</template>
+
+<script>
+console.log(process.env.NODE_ENV);
+export default {
+  name: "app",
+  created() {
+    // this.$axios.get("/category/all").then(res => {
+    //   console.log(res);
+    // });
+  }
+};
+</script>
+
+
+

src/api/basic/index.js

@@ -0,0 +1,9 @@
+import axios from '../request'
+
+const basic = {
+    login(params) {
+        return axios.post(`/login`, params);
+    },
+}
+
+export default basic;

src/api/index.js

@@ -0,0 +1,4 @@
+import basic from './basic';
+export default {
+    basic,
+}

src/api/request.js

@@ -0,0 +1,78 @@
+import axios from "axios";
+import store from "../store";
+import router from "../router";
+import QS from 'qs'
+// 创建axios实例
+// const service = axios.create({
+//   baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL
+//   timeout: 50000 // 请求超时时间(因为需要调试后台,所以设置得比较大)
+// });
+
+axios.defaults.baseURL = process.env.VUE_APP_URL;
+axios.defaults.timeout = 60000;
+// request拦截器,在请求之前做一些处理
+axios.interceptors.request.use(
+  config => {
+    if (store.state.token) {
+      // 给请求头添加laohu-token
+      config.headers["user-token"] = store.state.token;
+    }
+    return config;
+  },
+  error => {
+    console.log(error); // for debug
+    Promise.reject(error);
+  }
+);
+
+// response 拦截器,数据返回后进行一些处理
+axios.interceptors.response.use(
+  response => {
+    /**
+     * code为非20000是抛错 可结合自己业务进行修改
+     */
+    if (response.status == 200) {
+      return response;
+    } else if (response.data.code == "603") {
+      // code为603代表token已经失效,
+      // 提示用户,然后跳转到登陆页面
+      router.push("/login");
+    } else {
+      Promise.reject(response);
+    }
+  },
+  error => {
+    Promise.reject("网络异常");
+  }
+);
+
+export default {
+  get(url, params) {
+    return new Promise((resolve, reject) => {
+      axios.get(url, {
+        params: params
+      })
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err.data)
+        })
+    });
+  },
+  post(url, params) {
+    return new Promise((resolve, reject) => {
+      axios.post(url, QS.stringify(params))
+        .then(res => {
+          console.log(res);
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err.data)
+        })
+    });
+  },
+
+}
+
+//export default service;

src/api/toast.js

@@ -0,0 +1,14 @@
+import {
+    Toast
+} from 'vant';
+
+export const loading = (flag) => {
+    if (flag) {
+        Toast.loading({
+            mask: true,
+            message: '加载中...'
+        });
+    } else {
+        Toast.clear();
+    }
+}

src/assets/style/common.less

@@ -0,0 +1,363 @@
+body {
+  background: #f4f4f4;
+  font-size: 16px !important;
+}
+
+.bd {
+  border: 1px solid;
+}
+
+.bdb {
+  border-bottom: 1px solid #ebebeb;
+}
+
+.ovh {
+  overflow: hidden;
+}
+
+.h100pc {
+  height: 100%;
+}
+
+.w100pc {
+  width: 100%;
+}
+
+.dsn {
+  display: none;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.rel {
+  position: relative;
+}
+
+.abs {
+  position: absolute;
+}
+
+.tac {
+  text-align: center;
+}
+
+.lh15 {
+  line-height: 1.5;
+}
+
+/* 颜色 */
+.f999 {
+  color: #999;
+}
+
+.fff {
+  color: #ffffff;
+}
+
+.orange {
+  color: #ff5f16;
+}
+
+/* 背景颜色 */
+.bg-green {
+  background: green;
+}
+
+.bg-gray {
+  background: gray;
+}
+
+.bg-fff {
+  background: #ffffff;
+}
+
+/* 弹性盒子公共样式 */
+/* 排列方向-横向排列 */
+.flex {
+  display: flex;
+}
+
+/* 纵向排列 */
+.flex2 {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 水平居中,垂直居中 */
+.fcc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 两端对齐 */
+.jc-sb {
+  justify-content: space-between;
+}
+
+/* 分散对齐 */
+.jc-sa {
+  justify-content: space-around;
+}
+
+/* 垂直居中 */
+.aic {
+  align-items: center;
+}
+
+/* 分配剩余空间 */
+.fg1 {
+  flex-grow: 1;
+}
+
+.fg2 {
+  flex-grow: 2;
+}
+
+
+/* 字体设置 */
+.f0 {
+  font-size: 0px
+}
+
+.f8 {
+  font-size: 8px
+}
+
+.f10 {
+  font-size: 10px
+}
+
+.f12 {
+  font-size: 12px
+}
+
+.f14 {
+  font-size: 14px
+}
+
+.f16 {
+  font-size: 16px
+}
+
+.f18 {
+  font-size: 18px
+}
+
+.f20 {
+  font-size: 20px
+}
+
+.f22 {
+  font-size: 22px
+}
+
+.f24 {
+  font-size: 24px
+}
+
+.f26 {
+  font-size: 26px
+}
+
+/* margin-top设置 */
+.mt-5 {
+  margin-top: 5px;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-15 {
+  margin-top: 15px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-25 {
+  margin-top: 25px;
+}
+
+.mt-30 {
+  margin-top: 30px;
+}
+
+/* margin-bottom设置 */
+.mb-5 {
+  margin-bottom: 5px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-15 {
+  margin-bottom: 15px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.mb-25 {
+  margin-bottom: 25px;
+}
+
+.mb-30 {
+  margin-bottom: 30px;
+}
+
+/* margin-left设置 */
+.ml-5 {
+  margin-left: 5px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+
+.ml-15 {
+  margin-left: 15px;
+}
+
+.ml-20 {
+  margin-left: 20px;
+}
+
+.ml-25 {
+  margin-left: 25px;
+}
+
+.ml-30 {
+  margin-left: 30px;
+}
+
+/* margin-right设置 */
+.mr-5 {
+  margin-right: 5px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.mr-15 {
+  margin-right: 15px;
+}
+
+.mr-20 {
+  margin-right: 20px;
+}
+
+.mr-25 {
+  margin-right: 25px;
+}
+
+.mr-30 {
+  margin-right: 30px;
+}
+
+/* padding-top设置 */
+.pt-5 {
+  padding-top: 5px;
+}
+
+.pt-10 {
+  padding-top: 10px;
+}
+
+.pt-15 {
+  padding-top: 15px;
+}
+
+.pt-20 {
+  padding-top: 20px;
+}
+
+.pt-25 {
+  padding-top: 25px;
+}
+
+.pt-30 {
+  padding-top: 30px;
+}
+
+/* padding-bottom设置 */
+.pb-5 {
+  padding-bottom: 5px;
+}
+
+.pb-10 {
+  padding-bottom: 10px;
+}
+
+.pb-15 {
+  padding-bottom: 15px;
+}
+
+.pb-20 {
+  padding-bottom: 20px;
+}
+
+.pb-25 {
+  padding-bottom: 25px;
+}
+
+.pb-30 {
+  padding-bottom: 30px;
+}
+
+/* padding-left设置 */
+.pl-5 {
+  padding-left: 5px;
+}
+
+.pl-10 {
+  padding-left: 10px;
+}
+
+.pl-15 {
+  padding-left: 15px;
+}
+
+.pl-20 {
+  padding-left: 20px;
+}
+
+.pl-25 {
+  padding-left: 25px;
+}
+
+.pl-30 {
+  padding-left: 30px;
+}
+
+/* padding-right设置 */
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pr-10 {
+  padding-right: 10px;
+}
+
+.pr-15 {
+  padding-right: 15px;
+}
+
+.pr-20 {
+  padding-right: 20px;
+}
+
+.pr-25 {
+  padding-right: 25px;
+}
+
+.pr-30 {
+  padding-right: 30px;
+}

src/assets/style/font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/style/font/demo_index.html

@@ -0,0 +1,676 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1456778" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">待收货</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe678;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe678;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe677;</span>
+                <div class="name">首页</div>
+                <div class="code-name">&amp;#xe677;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65c;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe65c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">购物车—线</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">待发货</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6b4;</span>
+                <div class="name">反馈</div>
+                <div class="code-name">&amp;#xe6b4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe694;</span>
+                <div class="name">礼物</div>
+                <div class="code-name">&amp;#xe694;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">客服</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">钱包</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe733;</span>
+                <div class="name">下箭头</div>
+                <div class="code-name">&amp;#xe733;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8a0;</span>
+                <div class="name"> 我的</div>
+                <div class="code-name">&amp;#xe8a0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe670;</span>
+                <div class="name">打勾</div>
+                <div class="code-name">&amp;#xe670;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe641;</span>
+                <div class="name">home</div>
+                <div class="code-name">&amp;#xe641;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">购物车</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe72f;</span>
+                <div class="name">红包</div>
+                <div class="code-name">&amp;#xe72f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">缓存</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">定位</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">右箭头</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">退货</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">标准待分享2</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8a1;</span>
+                <div class="name">下箭头</div>
+                <div class="code-name">&amp;#xe8a1;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daishouhuo"></span>
+            <div class="name">
+              待收货
+            </div>
+            <div class="code-name">.icon-daishouhuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              首页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gouwuchexian"></span>
+            <div class="name">
+              购物车—线
+            </div>
+            <div class="code-name">.icon-gouwuchexian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-1111113"></span>
+            <div class="name">
+              待发货
+            </div>
+            <div class="code-name">.icon-1111113
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-iconfontfankui"></span>
+            <div class="name">
+              反馈
+            </div>
+            <div class="code-name">.icon-iconfontfankui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-liwu"></span>
+            <div class="name">
+              礼物
+            </div>
+            <div class="code-name">.icon-liwu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kefu"></span>
+            <div class="name">
+              客服
+            </div>
+            <div class="code-name">.icon-kefu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qianbao"></span>
+            <div class="name">
+              钱包
+            </div>
+            <div class="code-name">.icon-qianbao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiajiantou"></span>
+            <div class="name">
+              下箭头
+            </div>
+            <div class="code-name">.icon-xiajiantou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wode"></span>
+            <div class="name">
+               我的
+            </div>
+            <div class="code-name">.icon-wode
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dagou"></span>
+            <div class="name">
+              打勾
+            </div>
+            <div class="code-name">.icon-dagou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-home"></span>
+            <div class="name">
+              home
+            </div>
+            <div class="code-name">.icon-home
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiaolunkuo-"></span>
+            <div class="name">
+              购物车
+            </div>
+            <div class="code-name">.icon-tubiaolunkuo-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-hongbao"></span>
+            <div class="name">
+              红包
+            </div>
+            <div class="code-name">.icon-hongbao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huancun"></span>
+            <div class="name">
+              缓存
+            </div>
+            <div class="code-name">.icon-huancun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuejuan_Location"></span>
+            <div class="name">
+              定位
+            </div>
+            <div class="code-name">.icon-yuejuan_Location
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></span>
+            <div class="name">
+              右箭头
+            </div>
+            <div class="code-name">.icon-iconfontyoujiantou-copy-copy-copy-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuihuo"></span>
+            <div class="name">
+              退货
+            </div>
+            <div class="code-name">.icon-tuihuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biaozhundaifenxiang"></span>
+            <div class="name">
+              标准待分享2
+            </div>
+            <div class="code-name">.icon-biaozhundaifenxiang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiajiantou-copy"></span>
+            <div class="name">
+              下箭头
+            </div>
+            <div class="code-name">.icon-xiajiantou-copy
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daishouhuo"></use>
+                </svg>
+                <div class="name">待收货</div>
+                <div class="code-name">#icon-daishouhuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye"></use>
+                </svg>
+                <div class="name">首页</div>
+                <div class="code-name">#icon-shouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gouwuchexian"></use>
+                </svg>
+                <div class="name">购物车—线</div>
+                <div class="code-name">#icon-gouwuchexian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-1111113"></use>
+                </svg>
+                <div class="name">待发货</div>
+                <div class="code-name">#icon-1111113</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-iconfontfankui"></use>
+                </svg>
+                <div class="name">反馈</div>
+                <div class="code-name">#icon-iconfontfankui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-liwu"></use>
+                </svg>
+                <div class="name">礼物</div>
+                <div class="code-name">#icon-liwu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kefu"></use>
+                </svg>
+                <div class="name">客服</div>
+                <div class="code-name">#icon-kefu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qianbao"></use>
+                </svg>
+                <div class="name">钱包</div>
+                <div class="code-name">#icon-qianbao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiajiantou"></use>
+                </svg>
+                <div class="name">下箭头</div>
+                <div class="code-name">#icon-xiajiantou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wode"></use>
+                </svg>
+                <div class="name"> 我的</div>
+                <div class="code-name">#icon-wode</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dagou"></use>
+                </svg>
+                <div class="name">打勾</div>
+                <div class="code-name">#icon-dagou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-home"></use>
+                </svg>
+                <div class="name">home</div>
+                <div class="code-name">#icon-home</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiaolunkuo-"></use>
+                </svg>
+                <div class="name">购物车</div>
+                <div class="code-name">#icon-tubiaolunkuo-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-hongbao"></use>
+                </svg>
+                <div class="name">红包</div>
+                <div class="code-name">#icon-hongbao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huancun"></use>
+                </svg>
+                <div class="name">缓存</div>
+                <div class="code-name">#icon-huancun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuejuan_Location"></use>
+                </svg>
+                <div class="name">定位</div>
+                <div class="code-name">#icon-yuejuan_Location</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-iconfontyoujiantou-copy-copy-copy-copy"></use>
+                </svg>
+                <div class="name">右箭头</div>
+                <div class="code-name">#icon-iconfontyoujiantou-copy-copy-copy-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuihuo"></use>
+                </svg>
+                <div class="name">退货</div>
+                <div class="code-name">#icon-tuihuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaozhundaifenxiang"></use>
+                </svg>
+                <div class="name">标准待分享2</div>
+                <div class="code-name">#icon-biaozhundaifenxiang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiajiantou-copy"></use>
+                </svg>
+                <div class="name">下箭头</div>
+                <div class="code-name">#icon-xiajiantou-copy</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/style/font/iconfont.json

@@ -0,0 +1,163 @@
+{
+  "id": "1456778",
+  "name": "苏打优选",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "91804",
+      "name": "待收货",
+      "font_class": "daishouhuo",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "908503",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "915611",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "1085722",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "1110582",
+      "name": "购物车—线",
+      "font_class": "gouwuchexian",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "1162363",
+      "name": "待发货",
+      "font_class": "1111113",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "1215021",
+      "name": "反馈",
+      "font_class": "iconfontfankui",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "1382060",
+      "name": "礼物",
+      "font_class": "liwu",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "1577002",
+      "name": "客服",
+      "font_class": "kefu",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "1610138",
+      "name": "钱包",
+      "font_class": "qianbao",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "1833855",
+      "name": "下箭头",
+      "font_class": "xiajiantou",
+      "unicode": "e733",
+      "unicode_decimal": 59187
+    },
+    {
+      "icon_id": "2076312",
+      "name": " 我的",
+      "font_class": "wode",
+      "unicode": "e8a0",
+      "unicode_decimal": 59552
+    },
+    {
+      "icon_id": "2392549",
+      "name": "打勾",
+      "font_class": "dagou",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "2488741",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "3670096",
+      "name": "购物车",
+      "font_class": "tubiaolunkuo-",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "5294023",
+      "name": "红包",
+      "font_class": "hongbao",
+      "unicode": "e72f",
+      "unicode_decimal": 59183
+    },
+    {
+      "icon_id": "5452460",
+      "name": "缓存",
+      "font_class": "huancun",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "5460006",
+      "name": "定位",
+      "font_class": "yuejuan_Location",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "5849780",
+      "name": "右箭头",
+      "font_class": "iconfontyoujiantou-copy-copy-copy-copy",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "7400719",
+      "name": "退货",
+      "font_class": "tuihuo",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "9031364",
+      "name": "标准待分享2",
+      "font_class": "biaozhundaifenxiang",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "9173301",
+      "name": "下箭头",
+      "font_class": "xiajiantou-copy",
+      "unicode": "e8a1",
+      "unicode_decimal": 59553
+    }
+  ]
+}

src/assets/style/index.less

@@ -0,0 +1,4 @@
+// @import './reset.less';
+@import './rerset.less';
+@import './common.less';
+@import './font/iconfont.css';

src/assets/style/rerset.less

@@ -0,0 +1,347 @@
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+    box-sizing: border-box;
+}
+
+body {
+    line-height: 1
+}
+
+:focus {
+    outline: 1
+}
+
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+    display: block
+}
+
+ul {
+    list-style: none
+}
+
+blockquote,
+q {
+    quotes: none
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none
+}
+
+a {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+    text-decoration: none;
+    color: black
+}
+
+ins {
+    background-color: #ff9;
+    color: #000;
+    text-decoration: none
+}
+
+mark {
+    background-color: #ff9;
+    color: #000;
+    font-style: italic;
+    font-weight: bold
+}
+
+del {
+    text-decoration: line-through
+}
+
+abbr[title],
+dfn[title] {
+    border-bottom: 1px dotted #000;
+    cursor: help
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #cccccc;
+    margin: 1em 0;
+    padding: 0
+}
+
+input,
+select {
+    vertical-align: middle
+}
+
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent
+}
+
+a {
+    text-decoration: none;
+    color: black
+}
+
+body {
+    line-height: 1
+}
+
+:focus {
+    outline: 1
+}
+
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+    display: block
+}
+
+ul {
+    list-style: none
+}
+
+blockquote,
+q {
+    quotes: none
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none
+}
+
+a {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent
+}
+
+ins {
+    background-color: #ff9;
+    color: #000;
+    text-decoration: none
+}
+
+mark {
+    background-color: #ff9;
+    color: #000;
+    font-style: italic;
+    font-weight: bold
+}
+
+del {
+    text-decoration: line-through
+}
+
+abbr[title],
+dfn[title] {
+    border-bottom: 1px dotted #000;
+    cursor: help
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #cccccc;
+    margin: 1em 0;
+    padding: 0
+}
+
+input,
+select {
+    vertical-align: middle
+}

src/assets/style/theme.less

@@ -0,0 +1,719 @@
+// Basic Colors
+@black: #000;
+@white: #fff;
+@red: rgb(192, 49, 49);
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+@gray: #c8c9cc;
+@gray-light: #e5e5e5;
+@gray-darker: #7d7e80;
+@gray-dark: #969799;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
+// Component Colors
+@text-color: #323233;
+@active-color: #f2f3f5;
+@active-opacity: .7;
+@disabled-opacity: .5;
+@background-color: #f8f8f8;
+@background-color-light: #fafafa;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+
+// Animation
+@animation-duration-base: .3s;
+@animation-duration-fast: .2s;
+
+// Border
+@border-color: #ebedf0;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-max: 999px;
+
+// ActionSheet
+@action-sheet-max-height: 90%;
+@action-sheet-header-height: 44px;
+@action-sheet-header-font-size: @font-size-lg;
+@action-sheet-description-color: @gray-darker;
+@action-sheet-description-font-size: @font-size-md;
+@action-sheet-description-line-height: 20px;
+@action-sheet-item-height: 50px;
+@action-sheet-item-background: @white;
+@action-sheet-item-font-size: @font-size-lg;
+@action-sheet-item-text-color: @text-color;
+@action-sheet-item-disabled-text-color: @gray;
+@action-sheet-subname-color: @gray-darker;
+@action-sheet-subname-font-size: @font-size-sm;
+@action-sheet-close-icon-size: 18px;
+@action-sheet-close-icon-color: @gray-dark;
+@action-sheet-close-icon-padding: 0 @padding-sm;
+@action-sheet-cancel-padding-top: @padding-xs;
+@action-sheet-cancel-padding-color: @background-color;
+
+// AddressEdit
+@address-edit-buttons-padding: @padding-xl @padding-md;
+@address-edit-button-margin-bottom: @padding-sm;
+@address-edit-detail-finish-color: @blue;
+@address-edit-detail-finish-font-size: @font-size-sm;
+
+// AddressList
+@address-list-disabled-text-color: @gray-dark;
+@address-list-disabled-text-font-size: @font-size-sm;
+@address-list-disabled-text-line-height: 30px;
+@address-list-add-button-z-index: 999;
+@address-list-item-padding: @padding-md;
+@address-list-item-text-color: @gray-darker;
+@address-list-item-disabled-text-color: @gray-dark;
+@address-list-item-font-size: @font-size-sm;
+@address-list-item-line-height: 16px;
+@address-list-item-radio-icon-color: @red;
+@address-list-edit-icon-size: 16px;
+
+// Button
+@button-mini-height: 22px;
+@button-mini-min-width: 50px;
+@button-mini-font-size: @font-size-xs;
+@button-mini-line-height: 20px;
+@button-small-height: 30px;
+@button-small-font-size: @font-size-sm;
+@button-small-min-width: 60px;
+@button-small-line-height: 28px;
+@button-normal-font-size: @font-size-md;
+@button-large-height: 50px;
+@button-large-line-height: 48px;
+@button-default-height: 44px;
+@button-default-line-height: 42px;
+@button-default-font-size: @font-size-lg;
+@button-default-color: @text-color;
+@button-default-background-color: @white;
+@button-default-border-color: @border-color;
+@button-primary-color: @white;
+@button-primary-background-color: @green;
+@button-primary-border-color: @green;
+@button-info-color: @white;
+@button-info-background-color: @blue;
+@button-info-border-color: @blue;
+@button-danger-color: @white;
+@button-danger-background-color: @red;
+@button-danger-border-color: @red;
+@button-warning-color: @white;
+@button-warning-background-color: @orange;
+@button-warning-border-color: @orange;
+@button-border-width: @border-width-base;
+@button-border-radius: @border-radius-sm;
+@button-round-border-radius: @border-radius-max;
+@button-plain-background-color: @white;
+@button-disabled-opacity: @disabled-opacity;
+
+// Card
+@card-padding: @padding-xs @padding-md;
+@card-font-size: @font-size-sm;
+@card-text-color: @text-color;
+@card-background-color: @background-color-light;
+@card-thumb-size: 90px;
+@card-title-line-height: 16px;
+@card-desc-color: @gray-darker;
+@card-desc-line-height: 20px;
+@card-price-color: @red;
+@card-origin-price-color: @gray-darker;
+@card-origin-price-font-size: @font-size-xs;
+
+// Cell
+@cell-font-size: @font-size-md;
+@cell-line-height: 24px;
+@cell-vertical-padding: 10px;
+@cell-horizontal-padding: @padding-md;
+@cell-text-color: @text-color;
+@cell-background-color: @white;
+@cell-border-color: @border-color;
+@cell-active-color: @active-color;
+@cell-required-color: @red;
+@cell-label-color: @gray-dark;
+@cell-label-font-size: @font-size-sm;
+@cell-label-line-height: 18px;
+@cell-label-margin-top: 3px;
+@cell-value-color: @gray-dark;
+@cell-icon-size: 16px;
+@cell-right-icon-color: @gray-dark;
+@cell-large-vertical-padding: @padding-sm;
+@cell-large-title-font-size: @font-size-lg;
+@cell-large-label-font-size: @font-size-md;
+
+// CellGroup
+@cell-group-background-color: @white;
+@cell-group-title-color: @gray-dark;
+@cell-group-title-padding: @padding-md @padding-md @padding-xs;
+@cell-group-title-font-size: @font-size-md;
+@cell-group-title-line-height: 16px;
+
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-light;
+@checkbox-transition-duration: @animation-duration-fast;
+@checkbox-label-margin: @padding-xs;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray;
+@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-background-color: @border-color;
+
+// Circle
+@circle-text-color: @text-color;
+@circle-text-font-weight: @font-weight-bold;
+@circle-text-font-size: @font-size-md;
+@circle-text-line-height: 18px;
+
+// Collapse
+@collapse-item-transition-duration: @animation-duration-base;
+@collapse-item-content-padding: @padding-md;
+@collapse-item-content-font-size: 13px;
+@collapse-item-content-line-height: 1.5;
+@collapse-item-content-text-color: @gray-dark;
+@collapse-item-content-background-color: @white;
+@collapse-item-title-disabled-color: @gray;
+
+// ContactCard
+@contact-card-padding: @padding-md;
+@contact-card-add-icon-size: 40px;
+@contact-card-add-icon-color: @blue;
+@contact-card-value-line-height: 20px;
+
+// ContactEdit
+@contact-edit-buttons-padding: @padding-xl @padding-md;
+@contact-edit-button-margin-bottom: @padding-sm;
+@contact-edit-field-label-width: 65px;
+
+// ContactList
+@contact-list-edit-icon-size: 16px;
+@contact-list-add-button-z-index: 999;
+@contact-list-item-padding: @padding-md;
+
+// CountDown
+@count-down-text-color: @text-color;
+@count-down-font-size: @font-size-md;
+@count-down-line-height: 20px;
+
+// Coupon
+@coupon-margin: 0 @padding-md @padding-md;
+@coupon-content-height: 100px;
+@coupon-content-padding: @padding-lg 0 0 @padding-md;
+@coupon-background-color: @white;
+@coupon-active-background-color: @active-color;
+@coupon-border-radius: @border-radius-md;
+@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+@coupon-head-width: 85px;
+@coupon-amount-color: @red;
+@coupon-amount-font-size: 24px;
+@coupon-currency-font-size: 50%;
+@coupon-name-font-size: @font-size-lg;
+@coupon-disabled-text-color: @gray-dark;
+@coupon-description-padding: @padding-xs @padding-md;
+@coupon-description-background-color: @background-color-light;
+@coupon-description-border-color: @border-color;
+
+// CouponCell
+@coupon-cell-selected-text-color: @text-color;
+
+// CouponList
+@coupon-list-background-color: @background-color;
+@coupon-list-field-padding: @padding-xs @padding-md;
+@coupon-list-exchange-button-height: 32px;
+@coupon-list-empty-image-size: 200px;
+@coupon-list-empty-tip-color: @gray-dark;
+@coupon-list-empty-tip-font-size: @font-size-md;
+@coupon-list-empty-tip-line-height: 20px;
+
+// Dialog
+@dialog-width: 320px;
+@dialog-small-screen-width: 90%;
+@dialog-font-size: @font-size-lg;
+@dialog-transition: @animation-duration-base;
+@dialog-border-radius: 16px;
+@dialog-background-color: @white;
+@dialog-header-font-weight: @font-weight-bold;
+@dialog-header-line-height: 24px;
+@dialog-header-padding-top: @padding-lg;
+@dialog-header-isolated-padding: @padding-lg 0;
+@dialog-message-padding: @padding-lg;
+@dialog-message-font-size: @font-size-md;
+@dialog-message-line-height: 20px;
+@dialog-message-max-height: 60vh;
+@dialog-has-title-message-text-color: @gray-darker;
+@dialog-has-title-message-padding-top: @padding-sm;
+@dialog-confirm-button-text-color: @blue;
+
+// Divider
+@divider-margin: @padding-md 0;
+@divider-text-color: @gray-dark;
+@divider-font-size: @font-size-md;
+@divider-line-height: 24px;
+@divider-border-color: @border-color;
+@divider-content-padding: @padding-md;
+@divider-content-left-width: 10%;
+@divider-content-right-width: 10%;
+
+// DropdownMenu
+@dropdown-menu-height: 50px;
+@dropdown-menu-background-color: @white;
+@dropdown-menu-title-font-size: 15px;
+@dropdown-menu-title-text-color: @text-color;
+@dropdown-menu-title-active-text-color: @blue;
+@dropdown-menu-title-disabled-text-color: @gray-dark;
+@dropdown-menu-title-padding: 0 @padding-xs;
+@dropdown-menu-title-line-height: 18px;
+@dropdown-menu-option-active-color: @blue;
+@dropdown-menu-content-max-height: 80%;
+
+// Field
+@field-label-width: 90px;
+@field-input-text-color: @text-color;
+@field-input-error-text-color: @red;
+@field-input-disabled-text-color: @gray-dark;
+@field-placeholder-text-color: @gray-dark;
+@field-icon-size: 16px;
+@field-clear-icon-size: 16px;
+@field-clear-icon-color: @gray;
+@field-right-icon-color: @gray-dark;
+@field-error-message-color: @red;
+@field-error-message-text-color: 12px;
+@field-text-area-min-height: 60px;
+@field-word-limit-color: @gray-darker;
+@field-word-limit-font-size: @font-size-sm;
+@field-word-limit-line-height: 16px;
+
+// GridItem
+@grid-item-content-padding: @padding-md @padding-xs;
+@grid-item-content-background-color: @white;
+@grid-item-content-active-color: @active-color;
+@grid-item-icon-size: 28px;
+@grid-item-text-color: @gray-darker;
+@grid-item-text-font-size: @font-size-sm;
+
+// GoodsAction
+@goods-action-background-color: @white;
+@goods-action-icon-width: 48px;
+@goods-action-icon-height: 50px;
+@goods-action-icon-color: @text-color;
+@goods-action-icon-size: 18px;
+@goods-action-icon-font-size: @font-size-xs;
+@goods-action-icon-active-color: @active-color;
+@goods-action-icon-text-color: @gray-darker;
+@goods-action-button-height: 40px;
+@goods-action-button-warning-color: @gradient-orange;
+@goods-action-button-danger-color: @gradient-red;
+
+// IndexAnchor
+@index-anchor-padding: 0 @padding-md;
+@index-anchor-text-color: @text-color;
+@index-anchor-font-weight: @font-weight-bold;
+@index-anchor-font-size: @font-size-md;
+@index-anchor-line-height: 32px;
+@index-anchor-background-color: transparent;
+@index-anchor-sticky-background-color: @white;
+
+// IndexBar
+@index-bar-index-font-size: @font-size-xs;
+@index-bar-index-line-height: 14px;
+
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: @font-size-sm;
+@info-font-weight: @font-weight-bold;
+@info-border-width: @border-width-base;
+@info-background-color: @red;
+@info-dot-color: @red;
+@info-dot-size: 8px;
+@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+
+// Image
+@image-placeholder-text-color: @gray-dark;
+@image-placeholder-font-size: @font-size-md;
+@image-placeholder-background-color: @background-color;
+
+// ImagePreview
+@image-preview-index-text-color: @white;
+@image-preview-index-font-size: @font-size-md;
+@image-preview-overlay-background-color: rgba(0, 0, 0, .9);
+
+// List
+@list-icon-margin-right: 5px;
+@list-text-color: @gray-dark;
+@list-text-font-size: @font-size-md;
+@list-text-line-height: 50px;
+
+// Loading
+@loading-text-color: @gray-dark;
+@loading-text-font-size: @font-size-md;
+@loading-spinner-color: @gray;
+@loading-spinner-size: 30px;
+@loading-spinner-animation-duration: .8s;
+
+// NavBar
+@nav-bar-height: 46px;
+@nav-bar-background-color: @white;
+@nav-bar-arrow-size: 16px;
+// @nav-bar-icon-color: @blue;
+// @nav-bar-text-color: @blue;
+@nav-bar-icon-color: @red;
+@nav-bar-text-color: @red;
+@nav-bar-title-font-size: @font-size-lg;
+@nav-bar-title-text-color: @text-color;
+
+// NoticeBar
+@notice-bar-height: 40px;
+@notice-bar-padding: 0 @padding-md;
+@notice-bar-wrapable-padding: @padding-xs @padding-md;
+@notice-bar-text-color: @orange-dark;
+@notice-bar-font-size: @font-size-md;
+@notice-bar-line-height: 24px;
+@notice-bar-background-color: @orange-light;
+@notice-bar-icon-size: 16px;
+@notice-bar-icon-min-width: 22px;
+
+// Notify
+@notify-padding: @padding-xs @padding-md;
+@notify-font-size: @font-size-md;
+@notify-line-height: 20px;
+@notify-primary-background-color: @blue;
+@notify-success-background-color: @green;
+@notify-danger-background-color: @red;
+@notify-warning-background-color: @orange;
+
+// NumberKeyboard
+@number-keyboard-background-color: @white;
+@number-keyboard-key-height: 54px;
+@number-keyboard-key-background: #ebedf0;
+@number-keyboard-key-font-size: 24px;
+@number-keyboard-key-active-color: @active-color;
+@number-keyboard-delete-font-size: @font-size-lg;
+@number-keyboard-title-color: @gray-darker;
+@number-keyboard-title-height: 30px;
+@number-keyboard-title-font-size: @font-size-md;
+@number-keyboard-close-padding: 0 @padding-md;
+@number-keyboard-close-color: @blue;
+@number-keyboard-close-font-size: @font-size-md;
+@number-keyboard-button-text-color: @white;
+@number-keyboard-button-background-color: @blue;
+@number-keyboard-cursor-color: @text-color;
+@number-keyboard-cursor-width: 1px;
+@number-keyboard-cursor-height: 40%;
+@number-keyboard-cursor-animation-duration: 1s;
+
+// Overlay
+@overlay-background-color: rgba(0, 0, 0, 0.7);
+
+// Pagination
+@pagination-height: 40px;
+@pagination-font-size: @font-size-md;
+@pagination-item-width: 36px;
+@pagination-item-default-color: @blue;
+@pagination-item-disabled-color: @gray-darker;
+@pagination-item-disabled-background-color: @background-color;
+@pagination-background-color: @white;
+@pagination-desc-color: @gray-darker;
+@pagination-disabled-opacity: @disabled-opacity;
+
+// Panel
+@panel-background-color: @white;
+@panel-header-value-color: @red;
+@panel-footer-padding: @padding-xs @padding-md;
+
+// PasswordInput
+@password-input-height: 50px;
+@password-input-margin: 0 @padding-md;
+@password-input-font-size: 20px;
+@password-input-border-radius: 6px;
+@password-input-background-color: @white;
+@password-input-info-color: @gray-dark;
+@password-input-info-font-size: @font-size-md;
+@password-input-error-info-color: @red;
+@password-input-dot-size: 10px;
+@password-input-dot-color: @black;
+
+// Picker
+@picker-background-color: @white;
+@picker-toolbar-height: 44px;
+@picker-title-font-size: @font-size-lg;
+@picker-action-padding: 0 @padding-md;
+@picker-action-font-size: @font-size-md;
+@picker-action-text-color: @blue;
+@picker-action-active-color: @active-color;
+@picker-option-font-size: @font-size-lg;
+@picker-option-text-color: @black;
+@picker-option-disabled-opacity: .3;
+@picker-loading-icon-color: @blue;
+@picker-loading-mask-color: rgba(255, 255, 255, .9);
+
+// Popup
+@popup-background-color: @white;
+@popup-transition: transform @animation-duration-base ease-out;
+@popup-round-border-radius: 20px;
+@popup-close-icon-size: 18px;
+@popup-close-icon-color: @gray-dark;
+@popup-close-icon-margin: 16px;
+@popup-close-icon-z-index: 1;
+
+// Progress
+@progress-height: 4px;
+@progress-color: @blue;
+@progress-background-color: @gray-light;
+@progress-pivot-padding: 0 5px;
+@progress-pivot-text-color: @white;
+@progress-pivot-font-size: @font-size-xs;
+@progress-pivot-line-height: 1.6;
+@progress-pivot-background-color: @blue;
+
+// PullRefresh
+@pull-refresh-head-height: 50px;
+@pull-refresh-head-font-size: @font-size-md;
+@pull-refresh-head-text-color: @gray-dark;
+
+// Radio
+@radio-size: 20px;
+@radio-border-color: @gray-light;
+@radio-transition-duration: @animation-duration-fast;
+@radio-label-margin: @padding-xs;
+@radio-label-color: @text-color;
+@radio-checked-icon-color: @blue;
+@radio-disabled-icon-color: @gray;
+@radio-disabled-label-color: @gray;
+@radio-disabled-background-color: @border-color;
+
+// Rate
+@rate-icon-size: 20px;
+@rate-icon-gutter: 4px;
+
+// Search
+@search-padding: 10px @padding-sm;
+@search-background-color: #f7f8fA;
+@search-input-height: 34px;
+@search-label-padding: 0 5px;
+@search-label-color: @text-color;
+@search-label-font-size: @font-size-md;
+@search-left-icon-color: @gray-dark;
+@search-action-padding: 0 @padding-xs;
+@search-action-text-color: @text-color;
+@search-action-font-size: @font-size-md;
+
+// Sidebar
+@sidebar-width: 85px;
+
+// SidebarItem
+@sidebar-font-size: @font-size-md;
+@sidebar-line-height: 20px;
+@sidebar-text-color: @text-color;
+@sidebar-disabled-text-color: @gray;
+@sidebar-padding: 20px @padding-sm 20px @padding-xs;
+@sidebar-active-color: @active-color;
+@sidebar-background-color: @background-color-light;
+@sidebar-selected-font-weight: @font-weight-bold;
+@sidebar-selected-text-color: @text-color;
+@sidebar-selected-border-color: @red;
+@sidebar-selected-background-color: @white;
+
+// Skeleton
+@skeleton-row-height: 16px;
+@skeleton-row-background-color: @active-color;
+@skeleton-row-margin-top: @padding-sm;
+@skeleton-avatar-background-color: @active-color;
+@skeleton-animation-duration: 1.2s;
+
+// Slider
+@slider-active-background-color: @blue;
+@slider-inactive-background-color: @gray-light;
+@slider-disabled-opacity: @disabled-opacity;
+@slider-button-width: 24px;
+@slider-button-height: 24px;
+@slider-button-border-radius: 50%;
+@slider-button-background-color: @white;
+@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+
+// Step
+@step-text-color: @gray-dark;
+@step-process-text-color: @text-color;
+@step-font-size: @font-size-md;
+@step-line-color: @border-color;
+@step-finish-line-color: @green;
+@step-finish-text-color: @text-color;
+@step-icon-size: 12px;
+@step-circle-size: 5px;
+@step-circle-color: @gray-dark;
+@step-horizontal-title-font-size: @font-size-sm;
+
+// Steps
+@steps-background-color: @white;
+
+// Sticky
+@sticky-z-index: 99;
+
+// Stepper
+@stepper-active-color: #e8e8e8;
+@stepper-background-color: @active-color;
+@stepper-button-icon-color: @text-color;
+@stepper-button-disabled-color: #f7f8fa;
+@stepper-button-disabled-icon-color: @gray;
+@stepper-input-width: 32px;
+@stepper-input-height: 28px;
+@stepper-input-font-size: @font-size-md;
+@stepper-input-text-color: @text-color;
+@stepper-input-disabled-text-color: @gray;
+@stepper-input-disabled-background-color: @active-color;
+@stepper-border-radius: @border-radius-md;
+
+// SubmitBar
+@submit-bar-height: 50px;
+@submit-bar-z-index: 100;
+@submit-bar-background-color: @white;
+@submit-bar-button-width: 110px;
+@submit-bar-price-color: @red;
+@submit-bar-price-font-size: 18px;
+@submit-bar-currency-font-size: @font-size-md;
+@submit-bar-text-color: @text-color;
+@submit-bar-text-font-size: @font-size-md;
+@submit-bar-tip-padding: @padding-xs @padding-sm;
+@submit-bar-tip-font-size: @font-size-sm;
+@submit-bar-tip-line-height: 1.5;
+@submit-bar-tip-color: #f56723;
+@submit-bar-tip-background-color: #fff7cc;
+@submit-bar-tip-icon-size: 12px;
+
+// Swipe
+@swipe-indicator-size: 6px;
+@swipe-indicator-margin: @padding-sm;
+@swipe-indicator-active-opacity: 1;
+@swipe-indicator-inactive-opacity: .3;
+@swipe-indicator-active-background-color: @blue;
+@swipe-indicator-inactive-background-color: @border-color;
+
+// Switch
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-z-index: 1;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: @animation-duration-base;
+@switch-disabled-opacity: @disabled-opacity;
+@switch-border: @border-width-base solid rgba(0, 0, 0, .1);
+
+// SwitchCell
+@switch-cell-padding-top: @cell-vertical-padding - 1px;
+@switch-cell-padding-bottom: @cell-vertical-padding - 1px;
+@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
+@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
+
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: @font-size-sm;
+@tabbar-item-text-color: @gray-darker;
+@tabbar-item-active-color: @blue;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 18px;
+@tabbar-item-margin-bottom: 5px;
+
+// Tab
+@tab-text-color: @gray-darker;
+@tab-active-text-color: @text-color;
+@tab-disabled-text-color: @gray;
+@tab-font-size: @font-size-md;
+
+// Tabs
+@tabs-default-color: @red;
+@tabs-line-height: 44px;
+@tabs-card-height: 30px;
+@tabs-nav-background-color: @white;
+@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-color: @tabs-default-color;
+
+// Tag
+@tag-padding: .2em .5em;
+@tag-font-size: @font-size-xs;
+@tag-medium-font-size: @font-size-sm;
+@tag-large-font-size: @font-size-md;
+@tag-text-color: @white;
+@tag-border-radius: .2em;
+@tag-round-border-radius: @border-radius-max;
+@tag-dander-color: @red;
+@tag-primary-color: @blue;
+@tag-success-color: @green;
+@tag-warning-color: @orange;
+@tag-default-color: @gray-dark;
+@tag-plain-background-color: @white;
+
+// Toast
+@toast-max-width: 70%;
+@toast-font-size: @font-size-md;
+@toast-text-color: @white;
+@toast-loading-icon-color: @white;
+@toast-line-height: 20px;
+@toast-border-radius: @border-radius-md;
+@toast-background-color: rgba(@text-color, .88);
+@toast-icon-size: 40px;
+@toast-text-min-width: 96px;
+@toast-text-padding: @padding-xs @padding-sm;
+@toast-default-padding: @padding-md;
+@toast-default-width: 90px;
+@toast-default-min-height: 90px;
+@toast-position-top-distance: 50px;
+@toast-position-bottom-distance: 50px;
+
+// TreeSelect
+@tree-select-font-size: @font-size-md;
+@tree-select-nav-background-color: @background-color-light;
+@tree-select-content-background-color: @white;
+@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm;
+@tree-select-item-height: 44px;
+@tree-select-item-active-color: @red;
+@tree-select-item-disabled-color: @gray;
+
+// Uploader
+@uploader-size: 80px;
+@uploader-icon-size: 24px;
+@uploader-icon-color: @gray-dark;
+@uploader-text-color: @gray-dark;
+@uploader-text-font-size: @font-size-sm;
+@uploader-upload-border-color: @gray-light;
+@uploader-upload-border-radius: 4px;
+@uploader-upload-background-color: @white;
+@uploader-delete-color: @gray-dark;
+@uploader-delete-icon-size: 18px;
+@uploader-delete-background-color: @white;
+@uploader-file-background-color: @background-color;
+@uploader-file-icon-size: 20px;
+@uploader-file-icon-color: @gray-darker;
+@uploader-file-name-padding: 0 @padding-base;
+@uploader-file-name-margin-top: @padding-xs;
+@uploader-file-name-font-size: @font-size-sm;
+@uploader-file-name-text-color: @gray-darker;
+
+// Sku
+@sku-item-background-color: #f7f8fa;
+@sku-icon-gray-color: #dcdde0;
+@sku-upload-mask-color: rgba(50, 50, 51, .8);

src/components/Footer.vue

@@ -0,0 +1,106 @@
+<template>
+  <!-- <ul class="footer flex jc-sa w100pc fixed bott0 bg-fff aic footer">
+    <li class="item">
+      <router-link to="/index" class="flex2 aic f20 yellow" active-class="active">
+        <van-icon class="text" name="wap-home"></van-icon>
+        <i class="icon-home iconfont f18 text"></i>
+        <p class="mt-5 f12 text">首页</p>
+      </router-link>
+    </li>
+    <li class="item">
+      <router-link to="/cart" class="flex2 aic f20 text" active-class="active">
+        <van-icon class="text" name="shopping-cart-o"></van-icon>
+        <p class="mt-5 text f12">购物车</p>
+      </router-link>
+    </li>
+    <li class="item">
+      <router-link to="/my" class="flex2 aic f20 text" active-class="active">
+        <van-icon class="text" name="user-o"></van-icon>
+        <p class="mt-5 text f12">我的</p>
+      </router-link>
+    </li>
+    <li class="item">
+      <router-link to="/demo" class="flex2 aic f20 text" active-class="active">
+        <van-icon class="text" name="user-o"></van-icon>
+        <p class="mt-5 text f12">例子</p>
+      </router-link>
+    </li>
+  </ul> -->
+  <div>
+    <router-view />
+    <van-tabbar v-model="active">
+      <van-tabbar-item
+        v-for="(item, index) in tabbars"
+        :key="index"
+        :to="item.name"
+      >
+        <span>{{ item.title }}</span>
+        <img
+          slot="icon"
+          slot-scope="props"
+          :src="props.active ? item.active : item.normal"
+        />
+      </van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tabbar",
+  data() {
+    return {
+      active: 0,
+      tabbars: [
+        {
+          name: "/",
+          title: "首页",
+          normal: "http://test2.h-etrip.com/app/assets/img/TabsHome.png",
+          active: "http://test2.h-etrip.com/app/assets/img/TabsHomeFocus.png",
+        },
+        {
+          name: "/cart",
+          title: "购物车",
+          normal: "http://test2.h-etrip.com/app/assets/img/TabsTravel.png",
+          active: "http://test2.h-etrip.com/app/assets/img/TabsTravelFocus.png",
+        },
+        {
+          name: "/my/center",
+          title: "我的",
+          normal: "http://test2.h-etrip.com/app/assets/img/TabsFace.png",
+          active: "http://test2.h-etrip.com/app/assets/img/TabsFaceFocus.png",
+        },
+      ],
+    };
+  },
+  methods: {},
+  // 通过路由跳转判断选中的样式
+  created() {
+    let { title } = this.$route.meta;
+    if (title == "/index") {
+      this.active = 0;
+    } else if (title == "/cart") {
+      this.active = 1;
+    } else if (title == "/my") {
+      this.active = 2;
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+.footer {
+  border-top: 1px solid #ebebeb;
+  height: 50px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  bottom: 0;
+  .text {
+    color: #797d82;
+  }
+  .active .text {
+    color: @red;
+  }
+}
+</style>

src/components/NotFound.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="not-found">
+    <van-nav-bar title left-text="返回" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
+    <img src="../assets/img/not.jpeg" alt />
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less">
+.not-found {
+  .van-nav-bar {
+    background: #ececec;
+  }
+  img {
+    width: 100%;
+  }
+  min-height: 100vh;
+  background: #ececec;
+}
+</style>

src/components/Vant.js

@@ -0,0 +1,51 @@
+import Vue from "vue";
+import {
+  Icon,
+  Tab,
+  Tabs,
+  List,
+  Cell,
+  Button,
+  Popup,
+  Field,
+  Dialog,
+  Toast,
+  Swipe,
+  SwipeItem,
+  Area,
+  NavBar,
+  CellGroup,
+  Image,
+  Sticky,
+  Form,
+  Lazyload,
+  Grid,
+  GridItem,
+  Tabbar,
+  TabbarItem
+
+} from "vant";
+
+Vue.use(Icon);
+Vue.use(Tab);
+Vue.use(Tabs);
+Vue.use(List);
+Vue.use(Cell);
+Vue.use(Button);
+Vue.use(Popup);
+Vue.use(Field);
+Vue.use(Dialog);
+Vue.use(Toast);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
+Vue.use(Area);
+Vue.use(NavBar);
+Vue.use(CellGroup);
+Vue.use(Image);
+Vue.use(Sticky);
+Vue.use(Form);
+Vue.use(Lazyload);
+Vue.use(Grid);
+Vue.use(GridItem);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);

src/components/demo.vue

@@ -0,0 +1,41 @@
+
+<template>
+  <div>
+    <div></div>
+    <Footer page="demo"></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/Footer";
+export default {
+  components: {
+    Footer
+  },
+  i18n: {
+    "zh-CN": {
+      type: "加载类型",
+      color: "自定义颜色",
+      text: "加载文案"
+    },
+    "en-US": {
+      type: "Type",
+      color: "Color",
+      text: "Text"
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+div {
+  height: 100px;
+  width: 100px;
+  background: green;
+}
+.van-loading {
+  display: inline-block;
+  margin: 5px 0 5px 20px;
+  background: gray;
+}
+</style>

src/main.js

@@ -0,0 +1,25 @@
+import Vue from "vue";
+// import "vant/lib/index.css";
+import App from "./App.vue";
+import router from "./router/index";
+// import "@/assets/style/font/iconfont.css";
+import "@/assets/style/index.less";
+import $axios from "@/api";
+import mixin from "./mixin/index";
+import store from "./store/index";
+
+import "@/components/Vant";
+// rem
+import "amfe-flexible";
+// 把变量挂载到vue的原型上
+Vue.prototype.$axios = $axios;
+
+Vue.mixin(mixin);
+
+Vue.config.productionTip = false;
+
+new Vue({
+  store,
+  router,
+  render: h => h(App)
+}).$mount("#app");

src/mixin/index.js

@@ -0,0 +1,12 @@
+export default {
+  data() {
+    return {};
+  },
+  fomatDate(time) {
+    let date = new Date(time);
+    let Y = date.getFullYear();
+    let M = date.getMonth() + 1;
+    let D = date.getDate();
+    return `${Y}年-${M}月-${D}日`;
+  }
+};

src/router/index.js

@@ -0,0 +1,78 @@
+import Vue from "vue";
+import Router from "vue-router";
+import store from "../store/index";
+
+Vue.use(Router);
+
+const router = new Router({
+  routes: [
+    {
+      path: "/",
+      redirect: "/index"
+    },
+    {
+      path: "/index",
+      component: () => import("@/views/index/index"),
+      meta: {
+        title: "每日生鲜",
+        // 缓存首页
+        keepAlive: true
+      }
+    },
+    {
+      path: "/cart",
+      meta: {
+        title: "购物车"
+      },
+      component: () => import("@/views/cart/index")
+    },
+    {
+      path: "/my",
+      component: () => import("@/views/my/index"),
+      redirect: "/my/center",
+      children: [
+        {
+          path: "center",
+          meta: {
+            title: "个人中心"
+          },
+          component: () => import("@/views/my/children/center")
+        },
+        {
+          path: "set",
+          meta: {
+            title: "设置"
+          },
+          component: () => import("@/views/my/children/set")
+        }
+      ]
+    },
+    {
+      path: "/login",
+      component: () => import("@/views/login/index"),
+      meta: {
+        title: "登陆"
+      }
+    },
+    {
+      path: "*",
+      component: () => import("@/components/NotFound")
+    }
+  ]
+});
+
+router.beforeEach((to, from, next) => {
+  let { title, needLogin } = to.meta;
+  let { isLogin } = store.state;
+  document.title = title;
+
+  if (needLogin && !isLogin) {
+    next({
+      path: "/login"
+    });
+  } else {
+    next();
+  }
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createPersistedState from 'vuex-persistedstate'
+Vue.use(Vuex);
+const config = {
+    plugins: [createPersistedState()],
+    state: {
+        isLogin: false,
+        username: '',
+        token: ''
+    },
+    getters: {
+        isLogin: state => state.isLogin,
+        token: state => state.token,
+        username: state => state.username
+    },
+    mutations: {
+        updateLogin(state, payload) {
+            state.isLogin = payload;
+        },
+        updateToken(state, payload) {
+            state.token = payload;
+        },
+        updateUsername(state, payload) {
+            state.username = payload;
+        }
+    },
+    actions: {}
+}
+const store = new Vuex.Store(config);
+export default store;

src/views/cart/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <van-nav-bar title="购物车" left-text="返回" left-arrow />
+    <div>我是购物车的内容呢</div>
+    <Footer page="cart"></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/Footer";
+export default {
+  components: {
+    Footer
+  }
+};
+</script>
+
+<style>
+</style>

src/views/index/index.vue

@@ -0,0 +1,112 @@
+{<template>
+  <div class="swiper">
+    <van-swipe :autoplay="3000">
+      <van-swipe-item v-for="(image, index) in images" :key="index">
+        <img v-lazy="image" />
+      </van-swipe-item>
+    </van-swipe>
+
+    <van-grid class="gird" :gutter="10" :border="false" :column-num="3">
+      <van-grid-item v-for="(item, index) in gridImages" :key="index">
+        <van-image :src="item.src" />
+        <div class="grid-box">{{ item.text }}</div>
+      </van-grid-item>
+    </van-grid>
+    <Footer page="index"></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/Footer";
+// import { Tabbar, TabbarItem } from "vant";
+// import { Tab, Tabs } from "vant";
+
+export default {
+  // components: {
+  //   [Tab.name]: Tab,
+  //   [Tabs.name]: Tabs
+  // },
+  data() {
+    return {
+      images: [
+        "https://img01.yzcdn.cn/vant/apple-1.jpg",
+        "https://img01.yzcdn.cn/vant/apple-2.jpg",
+      ],
+      gridImages: [
+        { src: "https://img01.yzcdn.cn/vant/apple-1.jpg", text: "图片1" },
+        { src: "https://img01.yzcdn.cn/vant/apple-2.jpg", text: "图片2" },
+        { src: "https://img01.yzcdn.cn/vant/apple-3.jpg", text: "图片3" },
+        { src: "https://img01.yzcdn.cn/vant/apple-4.jpg", text: "图片4" },
+        { src: "https://img01.yzcdn.cn/vant/apple-5.jpg", text: "图片5" },
+        { src: "https://img01.yzcdn.cn/vant/apple-6.jpg", text: "图片6" },
+      ],
+    };
+  },
+  created() {
+    let index = this.active + 1;
+    this.list = this[`list${index}`]; // this.list1
+    // this.getGoods();
+  },
+  components: {
+    Footer,
+  },
+  methods: {
+    onchange(index) {
+      this.list = this[`list${index + 1}`];
+    },
+
+    getGoods() {
+      let url = "/goods"; // /api/goods
+      this.$axios
+        .get(url)
+        .then((res) => {
+          console.log("res", res);
+        })
+        .catch((err) => {
+          console.log("err", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.swiper {
+  width: 100%;
+  height: 170px;
+  .van-swipe {
+    width: 100%;
+    height: 100%;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  .custom-indicator {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    padding: 2px 5px;
+    font-size: 12px;
+    color: #fff;
+    background: #fff;
+  }
+}
+
+.gird {
+  .grid-box {
+    margin-top: 10px;
+    font-size: 15px;
+  }
+  .van-image {
+    height: 80px;
+  }
+  .van-image__img,
+  .van-image__error,
+  .van-image__loading {
+    height: 100%;
+  }
+}
+</style>
+}

src/views/login/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <header class="login">
+    <van-icon name="point-gift-o" class="orange mt-30 logo"></van-icon>
+    <van-cell-group>
+      <van-field
+        v-model.number="loginData.account"
+        label="用户名"
+        placeholder="用户名"
+        type="tel"
+        :maxlength="11"
+        colon
+        clearable
+        required
+        label-width="60px"
+        left-icon="contact"
+      >
+        <template #button>
+          <van-button
+            :type="countdown ? 'primary' : 'warning'"
+            size="small"
+            @click="sendCode"
+          >
+            <span v-if="countdown">{{ text }}</span>
+            <span v-if="!countdown">{{ text }} ({{ count }})</span></van-button
+          >
+        </template>
+      </van-field>
+      <van-field
+        v-model="loginData.password"
+        colon
+        required
+        clearable
+        type="password"
+        name="密码"
+        label="密码"
+        placeholder="请输入密码"
+        label-width="60px"
+        left-icon="closed-eye"
+      >
+      </van-field>
+      <div style="margin: 16px">
+        <van-button round block type="info" @click="onSubmit">登录</van-button>
+      </div> </van-cell-group
+    >>
+  </header>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      loginData: {
+        account: "",
+        password: "",
+      },
+      text: "发送验证码",
+      timer: null,
+      countdown: true,
+      count: "",
+    };
+  },
+  methods: {
+    async onSubmit() {
+      if (this.loginData.account == "") {
+        this.$toast("用户名不能为空");
+        return false;
+      }
+      if (this.loginData.account) {
+        if (!/^1[3456789]\d{9}$/.test(this.loginData.account)) {
+          this.$toast("手机号码格式不正确，请重填");
+          return false;
+        }
+      }
+
+      if (this.loginData.password == "") {
+        this.$toast("密码不能为空");
+        return false;
+      }
+
+      const result = await this.$axios.basic.login(this.loginData);
+      console.log(result);
+      if (result && result.code == 0) {
+        //修改登陆状态
+        this.$store.commit("updateLogin", true);
+        // 把token存入store
+        this.$store.commit("updateToken", result.data.token);
+        // 把用户名存入store
+        this.$store.commit("updateUsername", result.data.name);
+        this.$router.push("/my");
+      }
+      // this.$axios.post(url, data).then(res => {
+      //   // 修改登陆状态
+      //   this.$store.commit("updateLogin", true);
+      //   // 把token存入store
+      //   this.$store.commit("updateToken", res.user.token);
+      //   // 把用户名存入store
+      //   this.$store.commit("updateUsername", res.user.phone);
+      //   this.$router.push("/my");
+      // }).catch(err=> {
+      //   console.log('登陆失败')
+      // });
+    },
+
+    sendCode() {
+      if (!this.loginData.account) {
+        this.$toast("清先输入用户名");
+        return;
+      }
+
+      if (this.loginData.account) {
+        if (!/^1[3456789]\d{9}$/.test(this.loginData.account)) {
+          this.$toast("手机号码格式不正确，请重填");
+          return;
+        }
+      }
+      const TIME_COUNT = 60;
+      if (!this.timer) {
+        this.count = TIME_COUNT;
+        this.countdown = false;
+        this.text = "重新发送";
+        this.timer = setInterval(() => {
+          if (this.count > 0 && this.count <= TIME_COUNT) {
+            this.count--;
+          } else {
+            this.countdown = true;
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        }, 1000);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import "./login.less";
+.logo {
+  font-size: 100px !important;
+  margin-bottom: 150px;
+}
+
+.reg_active {
+  color: #fff;
+  border: none;
+}
+.reg_disActive {
+  /* background: #07c160; */
+  color: #323233;
+  background: #07c160;
+  border: none;
+}
+</style>
+

src/views/login/login.less

@@ -0,0 +1,34 @@
+/* 本页公共样式 */
+.login {
+    height: 100vh;
+    background-color: #fff;
+}
+
+// 手机号码
+header {
+    text-align: center;
+
+    img {
+        margin: 79px auto;
+    }
+
+    // 验证码
+    .handset {
+        border-bottom: 1px solid #f8f8f8;
+
+        input {
+            border: none;
+            outline: none;
+        }
+    }
+
+    // 登录按钮
+    .butt {
+        margin-top: 20px;
+        border-radius: 3px;
+        background-color: #ff5f16;
+        width: calc((260vw - 5px)/3);
+        height: 40px;
+        border: none;
+    }
+}

src/views/my/children/center.less

@@ -0,0 +1,76 @@
+/* 本页公共样式 */
+.gray {
+    color: #797d82;
+}
+
+.bott0 {
+    bottom: 0;
+}
+
+.orange {
+    color: #ff5f16
+}
+
+.yellow {
+    color: #ffb232
+}
+
+.bd-gray {
+    border-bottom: 1px solid #f5f5f5;
+}
+
+// 头部图片
+.beijin {
+    background: url(../../../assets/img/personal/beij.png) repeat-y center center;
+    height: 200px;
+    background-size: cover;
+    margin-top: -44px;
+}
+
+// 用户名和头像
+.users {
+    top: 55px;
+    left: 22px;
+    position: absolute;
+
+    // 头像
+    .imege {
+        height: 65px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+    }
+}
+
+// 导航
+.nav {
+    height: 75px;
+
+    .iconfont {
+        font-weight: bold;
+    }
+
+    .cit {
+        height: 26px;
+    }
+}
+
+// 主体
+main {
+    .list {
+        height: 50px;
+
+        .image {
+            height: 20px;
+        }
+    }
+
+    .foun {
+        font-size: 12px;
+    }
+
+}
+
+/* 底部 */
+.footer {
+    height: 50px;
+}

src/views/my/children/center.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="center">
+    <!-- 头部 -->
+    <header>
+      <div class="beijin"></div>
+      <div class="flex aic users pixed" style="width:50%;">
+        <img :src="require('../../../assets/img/personal/tx.jpg')" class="imege" />
+        <router-link v-if="!isLogin" to="/login" class="f16 fff ml-20">立即登录</router-link>
+        <span v-else class="f16 fff ml-20">用户 {{username.slice(-4)}}</span>
+      </div>
+    </header>
+
+    <!-- 主体 -->
+    <main class="mt-10">
+      <div class="bg-fff">
+        <van-cell title="我的订单" isLink to="/order"></van-cell>
+        <van-cell title="优惠卡" isLink></van-cell>
+        <van-cell title="钱包" isLink></van-cell>
+        <van-cell title="设置" isLink to="/my/set"></van-cell>
+      </div>
+    </main>
+
+    <Footer page="my" />
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/Footer";
+import { mapGetters } from "vuex";
+export default {
+  components: {
+    Footer
+  },
+
+  computed: {
+    ...mapGetters(["username", "isLogin"])
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "./center.less";
+</style>

src/views/my/children/set.less

@@ -0,0 +1,35 @@
+/* 本页公共样式 */
+.gray {
+    color: #797d82;
+}
+
+.bott0 {
+    bottom: 0;
+}
+
+.orange {
+    color: #ff5f16
+}
+
+.f15 {
+    font-size: 15px;
+}
+
+.bd-gray {
+    border-bottom: 1px solid #f5f5f5;
+}
+
+// 设置
+header {
+    .city {
+        height: 44px;
+        line-height: 44px;
+    }
+}
+
+// 账号ID
+.id {
+    height: 49px;
+    line-height: 49px;
+
+}

src/views/my/children/set.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="page">
+    <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="back"></van-nav-bar>
+
+    <van-cell-group class="mt-10">
+      <van-cell title="账号id" value="888888"></van-cell>
+      <van-cell isLink title="登录密码" value="未设置"></van-cell>
+      <van-cell isLink title="安全密码" value="未设置"></van-cell>
+    </van-cell-group>
+
+    <!-- 退出登录 -->
+    <div class="logout f16 flex fcc bg-fff fixed w100pc" @click="logout">
+      <p class="blue">退出登录</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    back() {
+      history.back();
+    },
+    async logout() {
+      let url = "/logout";
+      let res = await this.$axios.post(url);
+      // 修改登陆状态
+      this.$store.commit("updateLogin", false);
+      // 把用户名置空
+      this.$store.commit("updateUsername", "");
+      // 清除token
+      this.$store.commit("updateToken", "");
+      this.$router.push("/my");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.logout {
+  bottom: 0;
+  height: 50px;
+  color: #ff5f16;
+}
+</style>
+

src/views/my/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/order/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <van-nav-bar title="我的订单" left-text="返回" @click-left="back" left-arrow/>
+    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <template v-for="(item,index) in list">
+        <van-card
+          :num="index"
+          :key="item.id"
+          :price="item.price"
+          :desc="desc"
+          :title="title"
+          :thumb="item.imageURL"
+        />
+      </template>
+    </van-list>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [],
+      loading: false,
+      finished: false
+    };
+  },
+
+  created() {
+    this.getList();
+  },
+
+  methods: {
+    back() {
+      history.back();
+    },
+    async getList() {
+      let url = "/order";
+      this.loading = true;
+      try {
+        let res = await this.$axios.get(url);
+        this.list = res.list;
+      } catch (error) {}
+      this.loading = false;
+      this.finished = true;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.card__footer {
+  padding-top: 10px;
+}
+.card__tags {
+  .van-tag {
+    margin-right: 5px;
+  }
+}
+</style>
+
+

vue.config.js

@@ -0,0 +1,145 @@
+const autoprefixer = require("autoprefixer");
+const pxtorem = require("postcss-pxtorem");
+const path = require('path');
+const themePath = path.resolve(__dirname, 'src/assets/style/theme.less');
+
+module.exports = {
+  // 关闭eslint检查
+  lintOnSave: false,
+  // 配置css前缀,px转rem
+  css: {
+    loaderOptions: {
+      less: {
+        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
+        // `primary` is global variables fields name
+        // modifyVars: {
+        //   // 直接覆盖变量
+        //   "text-color": "#111",
+        //   "border-color": "#eee",
+        //   "nav-bar-text-color": "#c03131",
+        //   "van-nav-bar__text": "#c03131",
+        //   "nav-bar-title-text-color": "#c03131",
+
+        //   // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+        //   // hack: `true; @import "@/assets/style/my-theme.less";`
+        // }
+        modifyVars: {
+          hack: `true; @import "${themePath}";`
+        }
+      },
+      postcss: {
+        plugins: [
+          autoprefixer(),
+          pxtorem({
+            rootValue: 37.5,
+            propList: ["*"]
+          })
+        ]
+      }
+    }
+  },
+
+  configureWebpack: {
+    externals: {
+      axios: "axios" // 配置使用CDN
+    }
+  },
+  devServer: {
+    // 代理
+    proxy: {
+      // 只要请求地址有'api'都会匹配上
+      "/api": {
+        target: "http://localhost:5000",
+        ws: true,
+        // 允许跨域
+        changeOrigin: true,
+        pathRewrite: {
+          "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
+        }
+      }
+    }
+  }
+
+  // css: {
+  //   loaderOptions: {
+  //     // 给 less-loader 传递 Less.js 相关选项
+  //     less: {
+  //       // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
+  //       // `primary` is global variables fields name
+  //       // modifyVars: {
+  //       //   // 直接覆盖变量
+  //       //   "text-color": "#111",
+  //       //   "border-color": "#eee",
+  //       //   "nav-bar-text-color": "#c03131",
+  //       //   "van-nav-bar__text": "#c03131",
+  //       //   "nav-bar-title-text-color": "#c03131",
+
+  //       //   // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+  //       //   // hack: `true; @import "@/assets/style/my-theme.less";`
+  //       // }
+  //       modifyVars: {
+  //         red: "#03a9f4",
+  //         blue: "#3eaf7c",
+  //         orange: "#f08d49",
+  //         "text-color": "#111"
+  //       }
+  //     }
+  //   }
+  // }
+
+  // chainWebpack: config => {
+  //   const lessRule = config.module.rule("less");
+  //   lessRule.uses.clear();
+  //   lessRule
+  //     .test(/\.less$/)
+  //     .use("style-loader")
+  //     .loader("css-loader")
+  //     .loader("less-loader")
+  //     .options({
+  //       modifyVars: {
+  //         // 直接覆盖变量
+  //         "text-color": "#111",
+  //         "border-color": "#eee",
+  //         // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+  //         hack: `true; @import "@/assets/style/my-theme.less";`
+  //       }
+  //     });
+  // }
+
+  // // 自定义主题样式
+  // rules: [
+  //   {
+  //     test: /\.less$/,
+  //     use: [
+  //       // ...其他 loader 配置
+  //       {
+  //         loader: "less-loader",
+  //         options: {
+  //           modifyVars: {
+  //             // 直接覆盖变量
+  //             "text-color": "#111",
+  //             "border-color": "#eee",
+  //             // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+  //             hack: `true; @import "@/assets/style/my-theme.less";`
+  //           }
+  //         }
+  //       }
+  //     ]
+  //   }
+  // ]
+  // devServer: {
+  //     // 代理
+  //     proxy: {
+  //         // 只要请求地址有'api'都会匹配上
+  //         "/api": {
+  //             target: "http://132.232.94.151:3005",
+  //             ws: true,
+  //             // 允许跨域
+  //             changeOrigin: true,
+  //             pathRewrite: {
+  //                 "^/api": "" //通过pathRewrite重写地址，将前缀/api转为/
+  //             }
+  //         }
+  //     }
+  // }
+};