10 | ${key}
11 | ${val}
12 |
13 | `;
14 | })
15 | .join("");
16 |
17 | return `
18 |
20 | key
21 | value
22 |
23 | ${trs}
24 |
3 |
9 |
10 |
11 |
37 |
38 |
73 |
--------------------------------------------------------------------------------
/docs/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import VueRouter from "vue-router";
3 | import {
4 | Alert,
5 | Card,
6 | Collapse,
7 | CollapseItem,
8 | Message,
9 | Notification
10 | } from "element-ui";
11 | import App from "./App.vue";
12 | import Home from "./pages/home.vue";
13 | import Started from "./pages/started.vue";
14 | import CustomEvents from "./pages/custom-events.vue";
15 | import TrackView from "./pages/track-view.vue";
16 | import BlockShow from "./pages/block-show.vue";
17 | import VueTrack from "../";
18 | import trackEvents from "./tracks";
19 |
20 | Vue.use(VueRouter);
21 | Vue.use(Alert);
22 | Vue.use(Card);
23 | Vue.use(Collapse);
24 | Vue.use(CollapseItem);
25 | Vue.use(VueTrack, {
26 | trackEvents,
27 | trackEnable: {
28 | UVPV: "routeUpdate",
29 | TONP: true
30 | }
31 | });
32 |
33 | Vue.prototype.$message = Message;
34 | Vue.prototype.$notify = Notification;
35 |
36 | const router = new VueRouter({
37 | routes: [
38 | {
39 | path: "/",
40 | name: "HOME",
41 | component: Home
42 | },
43 | {
44 | path: "/started",
45 | name: "STARTED",
46 | component: Started
47 | },
48 | {
49 | path: "/custom-events",
50 | name: "CUSTOM_EVENTS",
51 | component: CustomEvents
52 | },
53 | {
54 | path: "/track-view",
55 | name: "TRACK_VIEW",
56 | component: TrackView,
57 | meta: {
58 | keepAlive: true
59 | }
60 | },
61 | {
62 | path: "/block-show",
63 | name: "BLOCK_SHOW",
64 | component: BlockShow
65 | },
66 | {
67 | path: "*",
68 | redirect: "/"
69 | }
70 | ]
71 | });
72 |
73 | /* eslint-disable no-new */
74 | new Vue({
75 | el: "#app",
76 | router,
77 | render: h => h(App)
78 | });
79 |
--------------------------------------------------------------------------------
/src/utils/dom.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 宋慧武
3 | * @Date: 2019-04-08 11:13:34
4 | * @Last Modified by: 宋慧武
5 | * @Last Modified time: 2020-06-04 17:08:44
6 | */
7 |
8 | /**
9 | * @desc 是否为元素几点
10 | *
11 | * @param {DOMElement} ele 一个 DOM 元素
12 | * @return {Boolean}
13 | */
14 | export const isElement = ele => ele && ele.nodeType === 1;
15 |
16 | /**
17 | * @desc 获取 DOM CSS 属性的值
18 | *
19 | * @param {DOMElement} ele A DOM 元素
20 | * @returns {String}
21 | */
22 | export function getStylePropValue(ele, prop) {
23 | return window.getComputedStyle(ele).getPropertyValue(prop);
24 | }
25 |
26 | /**
27 | * @desc 元素是否在可视区域可见
28 | *
29 | * @param {Object} rect 元素大小及相对可视区域的位置信息
30 | * @returns {Boolean} true => 可见 false => 不可见
31 | */
32 | export function isInViewport(rect, viewport) {
33 | if (!rect || (rect.width <= 0 || rect.height <= 0)) {
34 | return false;
35 | }
36 |
37 | return (
38 | rect.bottom > 0 &&
39 | rect.right > 0 &&
40 | rect.top < window.innerHeight &&
41 | rect.left < window.innerWidth &&
42 | !(
43 | rect.left > viewport.right ||
44 | rect.top > viewport.bottom ||
45 | rect.right < viewport.left ||
46 | rect.bottom < viewport.top
47 | )
48 | );
49 | }
50 |
51 | /**
52 | * @desc 元素是否隐藏
53 | *
54 | * @param {DOMElement} ele A DOM 元素
55 | * @returns {Boolean} true => 未隐藏可见 false => 隐藏不可见
56 | */
57 | export function isVisible(ele) {
58 | if (ele === window.document) {
59 | return true;
60 | }
61 | if (!ele || !ele.parentNode) {
62 | return false;
63 | }
64 |
65 | const parent = ele.parentNode;
66 | const visibility = getStylePropValue(ele, "visibility");
67 | const display = getStylePropValue(ele, "display");
68 |
69 | if (visibility === "hidden" || display === "none") {
70 | return false;
71 | }
72 | return parent ? isVisible(parent) : true;
73 | }
74 |
--------------------------------------------------------------------------------
/tests/unit/track-click-native.spec.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 宋慧武
3 | * @Date: 2019-05-28 17:46:45
4 | * @Last Modified by: 宋慧武
5 | * @Last Modified time: 2019-05-28 18:37:50
6 | */
7 | import Vue from "vue";
8 | import VTrack from "@/";
9 | import VueRouter from "vue-router";
10 | import { mount, createLocalVue } from "@vue/test-utils";
11 |
12 | const localVue = createLocalVue();
13 | const mockTrackAction = jest.fn();
14 | const trackEvents = {
15 | 18015: mockTrackAction
16 | };
17 | const Button = Vue.extend({
18 | template: `
19 |
20 | `
21 | });
22 | const TrackClickNative = Vue.extend({
23 | template: `
24 |
25 | `,
26 | components: {
27 | Button
28 | },
29 | data() {
30 | return {
31 | count: 0
32 | };
33 | },
34 | methods: {
35 | handleNativeEvent() {
36 | this.count += 1;
37 | }
38 | }
39 | });
40 | const RouterLinkTrackClickNative = Vue.extend({
41 | template: `
42 | {{ lang }}
4 |
5 |
7 |
8 | {{ n }}
6 |
3 |
4 |
41 |
42 |
43 |
45 |
53 |
54 |
55 |
58 |
59 |
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "v-track",
3 | "version": "0.8.10",
4 | "description": "一个基于Vue指令的埋点插件",
5 | "author": "LHammer v-track
5 |yarn add v-track or npm add v-track --save
6 |
37 |
38 | 🕹一个基于Vue指令实现的埋点插件~
39 |
40 | 
4 | 
5 | 
6 | 
7 | 
8 | 
9 |
10 | v-track通过 Vue [自定义指令](https://cn.vuejs.org/v2/guide/custom-directive.html)的方式将埋点代码与业务代码完全解耦~
11 |
12 | ## 安装
13 |
14 | ### YARN
15 |
16 | ```shell
17 | $ yarn add v-track
18 | ```
19 |
20 | ### NPM
21 |
22 | ```shell
23 | $ npm install v-track --save
24 | ```
25 |
26 | ### CDN
27 |
28 | 目前可以通过[unpkg.com/v-track](https://unpkg.com/v-track/)获取到最新版本的资源，在页面上使用 script 标签直接引入文件即可开始使用
29 |
30 | ```html
31 |
32 | ```
33 |
34 | 或者
35 |
36 | ```html
37 |
38 | ```
39 |
40 | > 建议使用 CDN 引入 v-track 的用户在链接地址上锁定版本，以免将来 v-track 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/) or [jsdelivr.com](https://www.jsdelivr.com/)。
41 |
42 | ## 用法
43 |
44 | ```js
45 | import Vue from "vue"
46 | import VTrack from "v-track"
47 | import trackEvents from "./track-events"
48 |
49 | Vue.use(VTrack, {
50 | trackEvents, // 埋点事件对象
51 | trackEnable: {
52 | UVPV: true, // 是否开启UVPV统计，v0.8.3新增routeUpdate，即在当前路由参数发生改变时埋点，默认为false
53 | TONP: true // 是否开启页面停留时长统计，默认为false
54 | }
55 | })
56 | ```
57 |
58 | ```js
59 | /* track-events.js */
60 | export default {
61 | /**
62 | * @name UVPV 固定名称不支持修改
63 | * @desc UV、PV埋点
64 | * @param {Object} context 当前上下文
65 | */
66 | UVPV(context) {
67 | ...
68 | },
69 | /**
70 | * @name TONP 固定名称不支持修改
71 | * @desc 页面停留时间埋点（Time on Page）
72 | * @param {Object} context 当前上下文
73 | * @param {Timestamp} et 进入页面时间
74 | * @param {Timestamp} dt 离开页面时间
75 | */
76 | TONP(context, { et, dt }) {
77 | ...
78 | },
79 | /**
80 | * @name 18015 埋点唯一标识ID（自定义）
81 | * @param {Object} context 当前上下文
82 | * @param {Object} args 剩余参数
83 | */
84 | 18015(context, args) {
85 | ...
86 | }
87 | ...
88 | }
89 | ```
90 |
91 | ```HTML
92 |
93 |
3 |
21 |
22 |
23 |
30 |
31 |
32 |
33 |
41 |
42 |
43 |
44 |
152 |
--------------------------------------------------------------------------------
/src/utils/vis-monitor.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 宋慧武
3 | * @Date: 2019-04-08 11:13:34
4 | * @Last Modified by: 宋慧武
5 | * @Last Modified time: 2020-06-07 10:47:44
6 | */
7 | import { isElement, isVisible, isInViewport } from "./dom";
8 | import { isFun, debounce } from "./helper";
9 |
10 | /**
11 | * @class
12 | * @name VisMonitor
13 | *
14 | * @desc 目标元素控制器
15 | */
16 | export default class VisMonitor {
17 | constructor(ele, ref, refwin = window, percent = 1) {
18 | if (!isElement(ele)) {
19 | throw new Error("not an element node");
20 | }
21 | if (percent > 1 && percent <= 0) {
22 | throw new Error("'percent' must be a number between 0 and 1");
23 | }
24 | this.ele = ele;
25 | this.ref = ref;
26 | this.refWin = refwin;
27 | this.started = false;
28 | this.percent = percent;
29 | this.prevPerc = null; // 保存前一次曝光百分比
30 | this.listeners = {};
31 | this.removeScrollLisener = null;
32 | this.init();
33 | }
34 |
35 | init() {
36 | if (!this.started) {
37 | const listener = debounce(this.visibilitychange.bind(this));
38 |
39 | listener();
40 | this.removeScrollLisener = (listener => {
41 | if (this.ref) {
42 | return this.ref.$on("scroll", listener);
43 | } else {
44 | this.refWin.addEventListener("scroll", listener, true);
45 | return () =>
46 | this.refWin.removeEventListener("scroll", listener, true);
47 | }
48 | })(listener);
49 | this.started = true;
50 | }
51 | }
52 |
53 | viewport() {
54 | const win = this.refWin;
55 | const rect = isElement(win) ? win.getBoundingClientRect() : win;
56 |
57 | return {
58 | top: isElement(win) ? rect.top : 0,
59 | right: rect.right || rect.innerWidth,
60 | bottom: rect.bottom || rect.innerHeight,
61 | left: rect.left || 0,
62 | height: win.innerHeight || win.offsetHeight,
63 | width: win.innerWidth || win.offsetWidth
64 | };
65 | }
66 |
67 | /**
68 | * 监听自定义事件
69 | */
70 | $on(evt, cbk) {
71 | const queue = this.listeners[evt] || (this.listeners[evt] = []);
72 |
73 | queue.push(cbk);
74 | return this;
75 | }
76 |
77 | /**
78 | * 移除监听自定义事件
79 | */
80 | $off(evt, cbk) {
81 | if (!cbk) return;
82 |
83 | let queue = this.listeners[evt];
84 | let v;
85 | let i = queue.length;
86 |
87 | while (i--) {
88 | v = queue[i];
89 | if (v === cbk || v.cbk === cbk) {
90 | queue.splice(i, 1);
91 | break;
92 | }
93 | }
94 | return this;
95 | }
96 |
97 | /**
98 | * 监听自定义事件，但只触发一次
99 | */
100 | $once(evt, cbk) {
101 | const on = (...args) => {
102 | this.$off(evt, on);
103 | cbk.apply(this, args);
104 | };
105 |
106 | on.cbk = cbk;
107 | this.$on(evt, on);
108 | return this;
109 | }
110 |
111 | /**
112 | * 触发当前实例的监听回调
113 | */
114 | $emit(evt, ...args) {
115 | const queue = this.listeners[evt] || [];
116 |
117 | queue.forEach(sub => sub.apply(this, args));
118 | return this;
119 | }
120 |
121 | /**
122 | * 计算元素可见比例，如果比例为100%，则触发 fullyvisible 事件
123 | */
124 | visibilitychange() {
125 | const rect = this.ele.getBoundingClientRect();
126 | const view = this.viewport();
127 |
128 | if (!isInViewport(rect, view) || !isVisible(this.ele)) {
129 | this.prevPerc = 0;
130 | return 0;
131 | }
132 |
133 | let vh = 0;
134 | let vw = 0;
135 | let perc = 0;
136 |
137 | if (view.top < 0) {
138 | view.top = 0;
139 | }
140 |
141 | if (view.bottom > window.innerHeight) {
142 | view.bottom = window.innerHeight;
143 | }
144 |
145 | if (view.left < 0) {
146 | view.left = 0;
147 | }
148 |
149 | if (view.right > window.innerWidth) {
150 | view.right = window.innerWidth;
151 | }
152 |
153 | if (rect.top >= view.top && rect.bottom > view.bottom) {
154 | vh = view.bottom - rect.top;
155 | } else if (rect.top < view.top && rect.bottom <= view.bottom) {
156 | vh = rect.bottom - view.top;
157 | } else {
158 | vh = rect.height;
159 | }
160 |
161 | if (rect.left >= view.left && rect.right > view.right) {
162 | vw = view.right - rect.left;
163 | } else if (rect.left < view.left && rect.right <= view.right) {
164 | vw = rect.right - view.left;
165 | } else {
166 | vw = rect.width;
167 | }
168 |
169 | perc = (vh * vw) / (rect.height * rect.width);
170 |
171 | if (this.prevPerc < this.percent && perc >= this.percent) {
172 | this.$emit("fullyvisible");
173 | this.prevPerc = perc;
174 | }
175 | }
176 |
177 | /**
178 | * 销毁当前实例的事件
179 | */
180 | destroy() {
181 | isFun(this.removeScrollLisener) && this.removeScrollLisener();
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/docs/pages/block-show.vue:
--------------------------------------------------------------------------------
1 |
2 | +
35 | +
37 | +
39 |
3 |
21 |
22 |
23 |
24 |
30 |
31 |
37 |
38 |
44 |
45 |
46 |
47 |
53 |
54 |
60 |
61 |
67 |
68 |
69 |
83 |
84 |
90 |
91 |
92 |
109 |
110 |
116 |
117 |
118 |
119 |
178 |
--------------------------------------------------------------------------------
/docs/dist/css/app.2e14d2d6.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
4 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}body{background:#fff;margin:0;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}header{background:#40b883;padding:32px;padding-bottom:8px}header .description,header nav{text-align:center}header .description{color:#fff;margin-top:15px}section .section-content{margin:0 42px;padding:64px 0;-webkit-box-sizing:border-box;box-sizing:border-box}section .section-content.small{padding:32px 0}section .section-content.mini{padding:16px 0}section .section-content.large{padding:152px 0}section.nav{text-align:center;background:#40b883;padding:24px;padding-bottom:35px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}section.nav>*{-webkit-box-flex:1;-ms-flex:auto 0 0px;flex:auto 0 0}section.nav a{display:inline-block;padding:8px 16px;color:#fff;background:#62c99b;border-radius:3px}section.nav a:hover{background:#88d6b4}section.nav a:not(:last-child){margin-right:8px}.collapse .section-content{padding:12px 0 64px 0}h1{color:#fff;text-align:center;margin:0 0 32px}a{color:#40b883;text-decoration:none;cursor:pointer}a:hover{color:#62c99b}.command{background:#339268;color:#fff;font-family:monospace;max-width:500px;margin:20px auto;border-radius:2px;padding:12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}.command,.plus{text-align:center}.plus{color:#40b883;font-size:32px;margin:12px}.demo,.snippets{max-width:1200px;margin:auto}.snippet+.snippet{margin-top:20px}.snippet:last-child{margin-bottom:39px}.snippets{border-radius:0 0 3px 3px}.demo,.snippets{background:#f9f9f9}.demo{margin-top:42px;border-radius:3px 3px 0 0;overflow:hidden}.demo .section-content{text-align:center;max-width:560px;margin:auto}.demo.viewport{height:364px;overflow:auto}.demo.viewport .section-content.large{padding:375px 0}.footer{font-size:14px;text-align:center;background:#e7f7f0}.track-button{width:229px;height:39px;background:#40b883;border-radius:5px;color:#fff;line-height:39px;margin:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.track-button:hover{background:#50c28f}.track-button:active{background:#39a576}.v-track-table .header,.v-track-table .row{display:-webkit-box;display:-ms-flexbox;display:flex}.v-track-table .header span,.v-track-table .header strong,.v-track-table .row span,.v-track-table .row strong{-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:29px;border-bottom:1px solid #ebeef5}.v-track-table .row:hover{background:#fafafa;cursor:pointer}.notification__large{width:399px}.notification__large .el-notification__group{width:100%}.message-offset{top:88px}.section-content.collapse-wrapper{padding:20px;margin:20px auto;background:#fff;max-width:690px;text-align:left;-webkit-box-shadow:0 2px 4px rgba(232,237,250,.9);box-shadow:0 2px 4px rgba(232,237,250,.9)}.code-snippet{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background:#2e3440;border-radius:3px;font-family:Roboto Mono,monospace;font-size:10pt;overflow:auto;position:relative}.code-snippet>*{-webkit-box-flex:1;-ms-flex:auto 0 0px;flex:auto 0 0}.code-snippet .line-numbers,.code-snippet .render{color:#d8dee9;padding:20px;padding-right:0}.code-snippet .line-numbers{background:#2e3440;color:#bdbdbd;border-radius:2px 0 0 2px;line-height:18px}.code-snippet .render{white-space:pre;line-height:18px}.code-snippet .language{position:absolute;top:0;right:0;color:#bdbdbd;padding:4px 4px 6px 6px;border-radius:0 0 0 2px}
--------------------------------------------------------------------------------
/docs/utils/date.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author LHammer
3 | * @desc date parse or format date
4 | * @see https://github.com/l-hammer/YDTemplate/blob/master/src/utils/es6/date.js
5 | */
6 | const twoDigits = /\d\d?/;
7 | const fourDigits = /\d{4}/;
8 | const token = /d{1,2}|M{1,2}|yy(?:yy)?|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g;
9 | const masks = {
10 | default: "yyyy-MM-dd HH:mm:ss",
11 | date: "yyyy-MM-dd",
12 | datetime: "yyyy-MM-dd HH:mm:ss",
13 | time: "HH:mm:ss",
14 | year: "yyyy",
15 | enDate: "M/d/yy",
16 | cnDate: "yyyy 年 MM 月 dd 日"
17 | };
18 |
19 | const pad = (val, len) => {
20 | val = String(val);
21 | len = len || 2;
22 | while (val.length < len) {
23 | val = `0${val}`;
24 | }
25 | return val;
26 | };
27 |
28 | const formatFlags = {
29 | yyyy(dateObj) {
30 | return pad(dateObj.getFullYear(), 4);
31 | },
32 | yy(dateObj) {
33 | return String(dateObj.getFullYear()).substr(2);
34 | },
35 | M(dateObj) {
36 | return dateObj.getMonth() + 1;
37 | },
38 | MM(dateObj) {
39 | return pad(dateObj.getMonth() + 1);
40 | },
41 | d(dateObj) {
42 | return dateObj.getDate();
43 | },
44 | dd(dateObj) {
45 | return pad(dateObj.getDate());
46 | },
47 | h(dateObj) {
48 | return dateObj.getHours() % 12 || 12;
49 | },
50 | hh(dateObj) {
51 | return pad(dateObj.getHours() % 12 || 12);
52 | },
53 | H(dateObj) {
54 | return dateObj.getHours();
55 | },
56 | HH(dateObj) {
57 | return pad(dateObj.getHours());
58 | },
59 | m(dateObj) {
60 | return dateObj.getMinutes();
61 | },
62 | mm(dateObj) {
63 | return pad(dateObj.getMinutes());
64 | },
65 | s(dateObj) {
66 | return dateObj.getSeconds();
67 | },
68 | ss(dateObj) {
69 | return pad(dateObj.getSeconds());
70 | }
71 | };
72 |
73 | /**
74 | * Format a date
75 | * @method format
76 | * @param {Date|number} dateObj new Date(2018, 2, 9)
77 | * @param {String} mask Format of the date e.g. 'yyyy-MM-dd HH:mm:ss' or 'cnDate'
78 | */
79 | export const format = (dateObj, mask) => {
80 | if (typeof dateObj === "number") {
81 | dateObj = new Date(dateObj);
82 | }
83 |
84 | if (
85 | Object.prototype.toString.call(dateObj) !== "[object Date]" ||
86 | isNaN(dateObj.getTime())
87 | ) {
88 | throw new Error("Invalid Date in date.format");
89 | }
90 | mask = masks[mask] || mask || masks.default;
91 |
92 | // return 不可省略
93 | mask = mask.replace(token, $0 => {
94 | return $0 in formatFlags
95 | ? formatFlags[$0](dateObj)
96 | : $0.slice(1, $0.length - 1);
97 | });
98 |
99 | return mask;
100 | };
101 |
102 | const parseFlags = {
103 | yyyy: [
104 | fourDigits,
105 | (d, v) => {
106 | d.year = v;
107 | }
108 | ],
109 | yy: [
110 | twoDigits,
111 | (d, v) => {
112 | const da = new Date();
113 | const cent = +`${da.getFullYear()}`.substr(0, 2);
114 | d.year = `${v > 68 ? cent - 1 : cent}${v}`;
115 | }
116 | ],
117 | M: [
118 | twoDigits,
119 | (d, v) => {
120 | d.month = v - 1;
121 | }
122 | ],
123 | d: [
124 | twoDigits,
125 | (d, v) => {
126 | d.day = v;
127 | }
128 | ],
129 | h: [
130 | twoDigits,
131 | (d, v) => {
132 | d.hour = v;
133 | }
134 | ],
135 | m: [
136 | twoDigits,
137 | (d, v) => {
138 | d.minute = v;
139 | }
140 | ],
141 | s: [
142 | twoDigits,
143 | (d, v) => {
144 | d.second = v;
145 | }
146 | ]
147 | };
148 | parseFlags.MM = parseFlags.M;
149 | parseFlags.dd = parseFlags.d;
150 | parseFlags.hh = parseFlags.h;
151 | parseFlags.H = parseFlags.h;
152 | parseFlags.HH = parseFlags.h;
153 | parseFlags.mm = parseFlags.m;
154 | parseFlags.ss = parseFlags.s;
155 |
156 | /**
157 | * Format a date
158 | * @method parse
159 | * @param {String} dateStr Date String e.g. '2018-02-09 09:29:29' or '2018 年 02 月 09 日'
160 | * @param {String} mask Parse of the format date e.g. 'yyyy-MM-dd HH:mm:ss' or 'cnDate'
161 | * @param {Date}
162 | */
163 | export const parse = (dateStr, mask) => {
164 | let isVaild = true;
165 | const dateInfo = {};
166 | const today = new Date();
167 |
168 | if (typeof dateStr !== "string") {
169 | throw new Error("Invalid format in fecha.parse");
170 | }
171 |
172 | mask = masks[mask] || mask || masks.default;
173 | /**
174 | * @function replace @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace;
175 | * @param {String} $0 匹配的子串
176 | */
177 | mask.replace(token, function($0) {
178 | if (parseFlags[$0]) {
179 | const flag = parseFlags[$0];
180 | /**
181 | * 搜索匹配到子串(e.g. yyyy)对应flag(fourDigits)的位置
182 | * @function search 未匹配到时返回-1，即按位取反为0时表示没有对应的flag
183 | */
184 | const index = dateStr.search(flag[0]);
185 | if (!~index) {
186 | isVaild = false;
187 | } else {
188 | /**
189 | * 为避免重复返回，将已经返回的值result从dateStr中删除
190 | */
191 | dateStr.replace(flag[0], function(result) {
192 | flag[1](dateInfo, result);
193 | dateStr = dateStr.substr(index + result.length);
194 | return result;
195 | });
196 | }
197 | }
198 | return parseFlags[$0] ? "" : $0.slice(1, $0.length - 1);
199 | });
200 |
201 | if (!isVaild) {
202 | return false;
203 | }
204 |
205 | const date = new Date(
206 | dateInfo.year || today.getFullYear(),
207 | dateInfo.month || 0,
208 | dateInfo.day || 1,
209 | dateInfo.hour || 0,
210 | dateInfo.minute || 0,
211 | dateInfo.second || 0
212 | );
213 | return date;
214 | };
215 |
216 | export default {
217 | format,
218 | parse
219 | };
220 |
--------------------------------------------------------------------------------
/docs/pages/track-view.vue:
--------------------------------------------------------------------------------
1 |
2 |
32 |
33 | 我只想被曝光一次
34 |
35 |
36 |
55 |
56 | 我想被曝光无数次
57 |
58 |
59 |
3 |
21 |
22 |
23 |
24 |
30 |
31 |
37 |
38 |
39 |
40 |
41 |
47 |
48 |
49 |
50 |
56 |
57 |
64 |
65 |
76 |
77 |
78 |
79 |
85 |
86 |
93 |
94 |
105 |
106 |
107 |
108 |
114 |
115 |
122 |
123 |
134 |
135 |
136 |
137 |
235 |
--------------------------------------------------------------------------------
/src/hooks/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 宋慧武
3 | * @Date: 2019-03-06 17:49:29
4 | * @Last Modified by: 宋慧武
5 | * @Last Modified time: 2020-06-05 20:23:06
6 | */
7 | import {
8 | zipArray,
9 | exactlySameVnode,
10 | _exactMatch,
11 | _partialMatch
12 | } from "../utils/helper";
13 | import * as debug from "../utils/debug";
14 | import { isVisible } from "../utils/dom";
15 | import VisMonitor from "../utils/vis-monitor";
16 |
17 | const MODIFIERS = ["async", "delay", "watch", "show", "once", "custom"]; // 修饰符
18 |
19 | /*******************************************************************************
20 | * @desc 监听数据发生改变时触发埋点，需处理两种情况：
21 | * ① 初始化时开始监听 v-track:xxxxx.watch="{ common_exp }"
22 | * ops.immediate 表示初始化时立即开始监听
23 | *
24 | * ② 点击事件之后开始监听 v-track:18016.click.async="{ refreshHotSpot, exposureId }"
25 | * el.contains(this.target) 避免多个“地方”同时监听同一个值出现多次上报的问题
26 | *******************************************************************************/
27 | function _watcher(el, exp, cbk, ctt, ops = {}) {
28 | el.$unwatch = ctt.$watch(
29 | () => ctt[exp],
30 | (nv, ov) => {
31 | nv !== ov && (ops.immediate || el.contains(this.target)) && cbk();
32 | this.target = null; // 释放当前操作的watcher
33 | }
34 | );
35 | }
36 |
37 | /*************************************************************************
38 | * @desc 自定义指令 v-track
39 | *
40 | * @param {*} el 指令所绑定的元素
41 | * @param {String} arg 埋点对应event ID
42 | * @param {Boolean} modifiers.click true: 事件行为埋点; false: 页面级埋点
43 | * @param {Boolean} modifiers.watch 异步埋点
44 | * @param {Boolean} modifiers.async 点击事件异步埋点
45 | * @param {Boolean} modifiers.delay 埋点是否延迟执行，默认先执行埋点再执行cbk
46 | *
47 | * @property {Function} tck 对应埋点方法
48 | *
49 | * @example v-track:18015
50 | * @example v-track:18015.watch
51 | * @example v-track:18015.watch.delay
52 | * @example v-track:18015.click
53 | * @example v-track:18015.click.async
54 | * @example v-track:18015.click.delay
55 | * @example v-track:18015.[自定义事件名].delay
56 | * @example v-track:18015.[自定义事件名].async
57 | *************************************************************************/
58 | export function bind(
59 | el,
60 | { value, arg: id, modifiers, rawName },
61 | { context, componentInstance },
62 | _,
63 | __,
64 | events
65 | ) {
66 | if (!events[id]) throw new Error("tracking event does not exist");
67 |
68 | let queue = [];
69 | let tck = events[id].bind(null, context);
70 | const watcher = (exp, cbk, ops) =>
71 | _watcher.call(this, el, exp, cbk, context, ops);
72 | const exactMatch = (...args) => _exactMatch.call(null, modifiers, args);
73 | const partialMatch = (...args) => _partialMatch.call(null, modifiers, args);
74 |
75 | if (!Object.keys(modifiers).length) {
76 | events[id](context, value);
77 | }
78 | // 异步埋点
79 | else if (exactMatch("watch")) {
80 | const exp = Object.keys(value).shift();
81 |
82 | watcher(exp, tck, {
83 | immediate: true
84 | });
85 | }
86 | // 指定延长时间埋点
87 | else if (exactMatch("delay")) {
88 | el.$timer && clearTimeout(el.$timer);
89 | el.$timer = setTimeout(() => {
90 | events[id](context);
91 | }, value);
92 | } else if (exactMatch("watch", "delay")) {
93 | const { delay, ...args } = value;
94 | const exp = [...Object.keys(args)].pop();
95 |
96 | tck = () => {
97 | el.$timer && clearTimeout(el.$timer);
98 | el.$timer = setTimeout(() => {
99 | const visible = isVisible(context.$el);
100 |
101 | visible && events[id](context);
102 | }, delay);
103 | };
104 | watcher(exp, tck, {
105 | immediate: true
106 | });
107 | }
108 | // 区域曝光埋点
109 | else if (partialMatch("show")) {
110 | const [args] = zipArray(value);
111 | const tck = events[id].bind(null, context, ...args);
112 | const once = partialMatch("once");
113 | const custom = partialMatch("custom");
114 |
115 | if (!el.$visMonitor) {
116 | setTimeout(() => {
117 | const vm = new VisMonitor(
118 | el,
119 | custom && context.$refs[value.ref],
120 | value && context.$refs[value.viewport],
121 | value && value.percent
122 | );
123 |
124 | (once ? vm.$once : vm.$on).call(vm, "fullyvisible", tck);
125 | el.$visMonitor = vm;
126 | }, 0);
127 | }
128 | } else if (
129 | (!componentInstance && modifiers.click) ||
130 | (componentInstance && partialMatch("native"))
131 | ) {
132 | /**
133 | * @desc DOM元素事件行为埋点(需区分是否带参数)
134 | * @var {Function} fn 获取第一个参数作为回调函数
135 | * @var {String} exp 获取最后一个参数并作为监听对象
136 | */
137 | switch (typeof value) {
138 | case "object": {
139 | const [args, keys] = zipArray(value);
140 | const fn = args.shift();
141 | const exp = [...keys].pop();
142 |
143 | debug.checkFun(fn);
144 | tck = events[id].bind(null, context, ...args);
145 | queue = [tck, fn.bind(null, ...args)];
146 | modifiers.delay && queue.reverse();
147 | modifiers.async && watcher(exp, queue.shift());
148 | break;
149 | }
150 | case "function":
151 | queue = [tck, value];
152 | modifiers.delay && queue.reverse();
153 | break;
154 | }
155 | el.$listener = e => {
156 | this.target = e.target;
157 | queue.forEach(sub => sub(e));
158 | };
159 | el.addEventListener("click", el.$listener);
160 | } else if (
161 | /**
162 | * @desc 组件自定义事件行为埋点(需区分是否带参数)
163 | * @var {Function} fn 获取第一个参数作为回调函数
164 | * @var {String} exp 获取最后一个参数并作为监听对象
165 | */
166 | componentInstance &&
167 | componentInstance.$el === el
168 | ) {
169 | let args, keys, fn, exp;
170 | const eventName = Object.keys(modifiers)
171 | .filter(key => !MODIFIERS.includes(key))
172 | .pop();
173 |
174 | if (typeof value === "object") {
175 | [args, keys] = zipArray(value);
176 | fn = args.shift();
177 | exp = [...keys].pop();
178 | debug.checkFun(fn);
179 | }
180 |
181 | if (el[`$on_${eventName}`]) return;
182 | componentInstance.$on(eventName, (...data) => {
183 | this.target = el;
184 | tck = events[id].bind(null, context, ...data);
185 | queue = [tck, (fn || value).bind(null, ...data)];
186 | modifiers.delay && queue.reverse();
187 | modifiers.async && watcher(exp, queue.shift());
188 | queue.forEach(sub => sub());
189 | el[`$on_${eventName}`] = true; // 避免重复监听
190 | });
191 | } else {
192 | throw new Error(`${rawName} directive is not supported`);
193 | }
194 | }
195 |
196 | /**
197 | * @desc 由于 DOM 更新采用 diff 算法更新，如果新旧节点相同，则 el 会全等，导致 bind 绑定无法更
198 | * 新，出现事件绑定诡异的问题，但由于 DOM update 执行频率很高，会导致性能问题，所以这里加
199 | * 了一层exactlySameVnode过滤，即只有在新旧节点发生变化时才会重新绑定，否则相反
200 | *
201 | * @param {*} el 同bind
202 | * @param {...any} args 同bind
203 | */
204 | export function updated(el, ...args) {
205 | if (!el.$listener) return;
206 | if (!exactlySameVnode(args[1], args[2])) {
207 | unbind.call(this, el);
208 | bind.call(this, el, ...args);
209 | }
210 | }
211 |
212 | export function unbind(el) {
213 | el.$listener && el.removeEventListener("click", el.$listener);
214 | el.$timer && clearTimeout(el.$timer);
215 | el.$unwatch && el.$unwatch();
216 | el.$visMonitor && el.$visMonitor.destroy();
217 | }
218 |
--------------------------------------------------------------------------------
/docs/pages/home.vue:
--------------------------------------------------------------------------------
1 |
2 |
58 |
63 |
87 |
92 |
116 |
121 |
3 |
21 |
22 |
23 |
24 |
30 |
31 |
37 |
38 |
39 |
41 |
42 |
43 |
44 |
50 |
51 |
55 |
56 |
57 |
63 |
64 |
65 |
66 |
72 |
73 |
82 |
83 |
84 |
95 |
96 |
97 |
98 |
104 |
105 |
111 |
112 |
113 |
116 |
117 |
118 |
119 |
125 |
132 |
133 |
142 |
143 |
144 |
147 |
148 |
149 |
150 |
270 |
--------------------------------------------------------------------------------
/docs/assets/normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
350 |
--------------------------------------------------------------------------------
/docs/pages/custom-events.vue:
--------------------------------------------------------------------------------
1 |
2 |
32 |
35 |
36 |
52 |
53 |
54 |
74 |
80 |
81 |
106 |
109 |
110 |
134 |
140 |
141 |
3 |
21 |
22 |
23 |
24 |
30 |
31 |
35 |
36 |
37 |
44 |
45 |
46 |
47 |
53 |
54 |
60 |
61 |
62 |
73 |
74 |
75 |
76 |
82 |
83 |
115 |
116 |
117 |
128 |
129 |
130 |
131 |
137 |
144 |
145 |
149 |
150 |
151 |
162 |
163 |
164 |
165 |
292 |
--------------------------------------------------------------------------------
/docs/dist/css/chunk-vendors.c687a9b2.css:
--------------------------------------------------------------------------------
1 | .el-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #ebeef5;position:fixed;background-color:#fff;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;overflow:hidden}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:13px;margin-right:8px}.el-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#606266;text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:24px;width:24px;font-size:24px}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.el-notification__closeBtn:hover{color:#606266}.el-notification .el-icon-success{color:#67c23a}.el-notification .el-icon-error{color:#f56c6c}.el-notification .el-icon-info{color:#909399}.el-notification .el-icon-warning{color:#e6a23c}.el-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.el-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}@font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f5.woff) format("woff"),url(../fonts/element-icons.732389de.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-ice-cream-round:before{content:"\E6A0"}.el-icon-ice-cream-square:before{content:"\E6A3"}.el-icon-lollipop:before{content:"\E6A4"}.el-icon-potato-strips:before{content:"\E6A5"}.el-icon-milk-tea:before{content:"\E6A6"}.el-icon-ice-drink:before{content:"\E6A7"}.el-icon-ice-tea:before{content:"\E6A9"}.el-icon-coffee:before{content:"\E6AA"}.el-icon-orange:before{content:"\E6AB"}.el-icon-pear:before{content:"\E6AC"}.el-icon-apple:before{content:"\E6AD"}.el-icon-cherry:before{content:"\E6AE"}.el-icon-watermelon:before{content:"\E6AF"}.el-icon-grape:before{content:"\E6B0"}.el-icon-refrigerator:before{content:"\E6B1"}.el-icon-goblet-square-full:before{content:"\E6B2"}.el-icon-goblet-square:before{content:"\E6B3"}.el-icon-goblet-full:before{content:"\E6B4"}.el-icon-goblet:before{content:"\E6B5"}.el-icon-cold-drink:before{content:"\E6B6"}.el-icon-coffee-cup:before{content:"\E6B8"}.el-icon-water-cup:before{content:"\E6B9"}.el-icon-hot-water:before{content:"\E6BA"}.el-icon-ice-cream:before{content:"\E6BB"}.el-icon-dessert:before{content:"\E6BC"}.el-icon-sugar:before{content:"\E6BD"}.el-icon-tableware:before{content:"\E6BE"}.el-icon-burger:before{content:"\E6BF"}.el-icon-knife-fork:before{content:"\E6C1"}.el-icon-fork-spoon:before{content:"\E6C2"}.el-icon-chicken:before{content:"\E6C3"}.el-icon-food:before{content:"\E6C4"}.el-icon-dish-1:before{content:"\E6C5"}.el-icon-dish:before{content:"\E6C6"}.el-icon-moon-night:before{content:"\E6EE"}.el-icon-moon:before{content:"\E6F0"}.el-icon-cloudy-and-sunny:before{content:"\E6F1"}.el-icon-partly-cloudy:before{content:"\E6F2"}.el-icon-cloudy:before{content:"\E6F3"}.el-icon-sunny:before{content:"\E6F6"}.el-icon-sunset:before{content:"\E6F7"}.el-icon-sunrise-1:before{content:"\E6F8"}.el-icon-sunrise:before{content:"\E6F9"}.el-icon-heavy-rain:before{content:"\E6FA"}.el-icon-lightning:before{content:"\E6FB"}.el-icon-light-rain:before{content:"\E6FC"}.el-icon-wind-power:before{content:"\E6FD"}.el-icon-baseball:before{content:"\E712"}.el-icon-soccer:before{content:"\E713"}.el-icon-football:before{content:"\E715"}.el-icon-basketball:before{content:"\E716"}.el-icon-ship:before{content:"\E73F"}.el-icon-truck:before{content:"\E740"}.el-icon-bicycle:before{content:"\E741"}.el-icon-mobile-phone:before{content:"\E6D3"}.el-icon-service:before{content:"\E6D4"}.el-icon-key:before{content:"\E6E2"}.el-icon-unlock:before{content:"\E6E4"}.el-icon-lock:before{content:"\E6E5"}.el-icon-watch:before{content:"\E6FE"}.el-icon-watch-1:before{content:"\E6FF"}.el-icon-timer:before{content:"\E702"}.el-icon-alarm-clock:before{content:"\E703"}.el-icon-map-location:before{content:"\E704"}.el-icon-delete-location:before{content:"\E705"}.el-icon-add-location:before{content:"\E706"}.el-icon-location-information:before{content:"\E707"}.el-icon-location-outline:before{content:"\E708"}.el-icon-location:before{content:"\E79E"}.el-icon-place:before{content:"\E709"}.el-icon-discover:before{content:"\E70A"}.el-icon-first-aid-kit:before{content:"\E70B"}.el-icon-trophy-1:before{content:"\E70C"}.el-icon-trophy:before{content:"\E70D"}.el-icon-medal:before{content:"\E70E"}.el-icon-medal-1:before{content:"\E70F"}.el-icon-stopwatch:before{content:"\E710"}.el-icon-mic:before{content:"\E711"}.el-icon-copy-document:before{content:"\E718"}.el-icon-full-screen:before{content:"\E719"}.el-icon-switch-button:before{content:"\E71B"}.el-icon-aim:before{content:"\E71C"}.el-icon-crop:before{content:"\E71D"}.el-icon-odometer:before{content:"\E71E"}.el-icon-time:before{content:"\E71F"}.el-icon-bangzhu:before{content:"\E724"}.el-icon-close-notification:before{content:"\E726"}.el-icon-microphone:before{content:"\E727"}.el-icon-turn-off-microphone:before{content:"\E728"}.el-icon-position:before{content:"\E729"}.el-icon-postcard:before{content:"\E72A"}.el-icon-message:before{content:"\E72B"}.el-icon-chat-line-square:before{content:"\E72D"}.el-icon-chat-dot-square:before{content:"\E72E"}.el-icon-chat-dot-round:before{content:"\E72F"}.el-icon-chat-square:before{content:"\E730"}.el-icon-chat-line-round:before{content:"\E731"}.el-icon-chat-round:before{content:"\E732"}.el-icon-set-up:before{content:"\E733"}.el-icon-turn-off:before{content:"\E734"}.el-icon-open:before{content:"\E735"}.el-icon-connection:before{content:"\E736"}.el-icon-link:before{content:"\E737"}.el-icon-cpu:before{content:"\E738"}.el-icon-thumb:before{content:"\E739"}.el-icon-female:before{content:"\E73A"}.el-icon-male:before{content:"\E73B"}.el-icon-guide:before{content:"\E73C"}.el-icon-news:before{content:"\E73E"}.el-icon-price-tag:before{content:"\E744"}.el-icon-discount:before{content:"\E745"}.el-icon-wallet:before{content:"\E747"}.el-icon-coin:before{content:"\E748"}.el-icon-money:before{content:"\E749"}.el-icon-bank-card:before{content:"\E74A"}.el-icon-box:before{content:"\E74B"}.el-icon-present:before{content:"\E74C"}.el-icon-sell:before{content:"\E6D5"}.el-icon-sold-out:before{content:"\E6D6"}.el-icon-shopping-bag-2:before{content:"\E74D"}.el-icon-shopping-bag-1:before{content:"\E74E"}.el-icon-shopping-cart-2:before{content:"\E74F"}.el-icon-shopping-cart-1:before{content:"\E750"}.el-icon-shopping-cart-full:before{content:"\E751"}.el-icon-smoking:before{content:"\E752"}.el-icon-no-smoking:before{content:"\E753"}.el-icon-house:before{content:"\E754"}.el-icon-table-lamp:before{content:"\E755"}.el-icon-school:before{content:"\E756"}.el-icon-office-building:before{content:"\E757"}.el-icon-toilet-paper:before{content:"\E758"}.el-icon-notebook-2:before{content:"\E759"}.el-icon-notebook-1:before{content:"\E75A"}.el-icon-files:before{content:"\E75B"}.el-icon-collection:before{content:"\E75C"}.el-icon-receiving:before{content:"\E75D"}.el-icon-suitcase-1:before{content:"\E760"}.el-icon-suitcase:before{content:"\E761"}.el-icon-film:before{content:"\E763"}.el-icon-collection-tag:before{content:"\E765"}.el-icon-data-analysis:before{content:"\E766"}.el-icon-pie-chart:before{content:"\E767"}.el-icon-data-board:before{content:"\E768"}.el-icon-data-line:before{content:"\E76D"}.el-icon-reading:before{content:"\E769"}.el-icon-magic-stick:before{content:"\E76A"}.el-icon-coordinate:before{content:"\E76B"}.el-icon-mouse:before{content:"\E76C"}.el-icon-brush:before{content:"\E76E"}.el-icon-headset:before{content:"\E76F"}.el-icon-umbrella:before{content:"\E770"}.el-icon-scissors:before{content:"\E771"}.el-icon-mobile:before{content:"\E773"}.el-icon-attract:before{content:"\E774"}.el-icon-monitor:before{content:"\E775"}.el-icon-search:before{content:"\E778"}.el-icon-takeaway-box:before{content:"\E77A"}.el-icon-paperclip:before{content:"\E77D"}.el-icon-printer:before{content:"\E77E"}.el-icon-document-add:before{content:"\E782"}.el-icon-document:before{content:"\E785"}.el-icon-document-checked:before{content:"\E786"}.el-icon-document-copy:before{content:"\E787"}.el-icon-document-delete:before{content:"\E788"}.el-icon-document-remove:before{content:"\E789"}.el-icon-tickets:before{content:"\E78B"}.el-icon-folder-checked:before{content:"\E77F"}.el-icon-folder-delete:before{content:"\E780"}.el-icon-folder-remove:before{content:"\E781"}.el-icon-folder-add:before{content:"\E783"}.el-icon-folder-opened:before{content:"\E784"}.el-icon-folder:before{content:"\E78A"}.el-icon-edit-outline:before{content:"\E764"}.el-icon-edit:before{content:"\E78C"}.el-icon-date:before{content:"\E78E"}.el-icon-c-scale-to-original:before{content:"\E7C6"}.el-icon-view:before{content:"\E6CE"}.el-icon-loading:before{content:"\E6CF"}.el-icon-rank:before{content:"\E6D1"}.el-icon-sort-down:before{content:"\E7C4"}.el-icon-sort-up:before{content:"\E7C5"}.el-icon-sort:before{content:"\E6D2"}.el-icon-finished:before{content:"\E6CD"}.el-icon-refresh-left:before{content:"\E6C7"}.el-icon-refresh-right:before{content:"\E6C8"}.el-icon-refresh:before{content:"\E6D0"}.el-icon-video-play:before{content:"\E7C0"}.el-icon-video-pause:before{content:"\E7C1"}.el-icon-d-arrow-right:before{content:"\E6DC"}.el-icon-d-arrow-left:before{content:"\E6DD"}.el-icon-arrow-up:before{content:"\E6E1"}.el-icon-arrow-down:before{content:"\E6DF"}.el-icon-arrow-right:before{content:"\E6E0"}.el-icon-arrow-left:before{content:"\E6DE"}.el-icon-top-right:before{content:"\E6E7"}.el-icon-top-left:before{content:"\E6E8"}.el-icon-top:before{content:"\E6E6"}.el-icon-bottom:before{content:"\E6EB"}.el-icon-right:before{content:"\E6E9"}.el-icon-back:before{content:"\E6EA"}.el-icon-bottom-right:before{content:"\E6EC"}.el-icon-bottom-left:before{content:"\E6ED"}.el-icon-caret-top:before{content:"\E78F"}.el-icon-caret-bottom:before{content:"\E790"}.el-icon-caret-right:before{content:"\E791"}.el-icon-caret-left:before{content:"\E792"}.el-icon-d-caret:before{content:"\E79A"}.el-icon-share:before{content:"\E793"}.el-icon-menu:before{content:"\E798"}.el-icon-s-grid:before{content:"\E7A6"}.el-icon-s-check:before{content:"\E7A7"}.el-icon-s-data:before{content:"\E7A8"}.el-icon-s-opportunity:before{content:"\E7AA"}.el-icon-s-custom:before{content:"\E7AB"}.el-icon-s-claim:before{content:"\E7AD"}.el-icon-s-finance:before{content:"\E7AE"}.el-icon-s-comment:before{content:"\E7AF"}.el-icon-s-flag:before{content:"\E7B0"}.el-icon-s-marketing:before{content:"\E7B1"}.el-icon-s-shop:before{content:"\E7B4"}.el-icon-s-open:before{content:"\E7B5"}.el-icon-s-management:before{content:"\E7B6"}.el-icon-s-ticket:before{content:"\E7B7"}.el-icon-s-release:before{content:"\E7B8"}.el-icon-s-home:before{content:"\E7B9"}.el-icon-s-promotion:before{content:"\E7BA"}.el-icon-s-operation:before{content:"\E7BB"}.el-icon-s-unfold:before{content:"\E7BC"}.el-icon-s-fold:before{content:"\E7A9"}.el-icon-s-platform:before{content:"\E7BD"}.el-icon-s-order:before{content:"\E7BE"}.el-icon-s-cooperation:before{content:"\E7BF"}.el-icon-bell:before{content:"\E725"}.el-icon-message-solid:before{content:"\E799"}.el-icon-video-camera:before{content:"\E772"}.el-icon-video-camera-solid:before{content:"\E796"}.el-icon-camera:before{content:"\E779"}.el-icon-camera-solid:before{content:"\E79B"}.el-icon-download:before{content:"\E77C"}.el-icon-upload2:before{content:"\E77B"}.el-icon-upload:before{content:"\E7C3"}.el-icon-picture-outline-round:before{content:"\E75F"}.el-icon-picture-outline:before{content:"\E75E"}.el-icon-picture:before{content:"\E79F"}.el-icon-close:before{content:"\E6DB"}.el-icon-check:before{content:"\E6DA"}.el-icon-plus:before{content:"\E6D9"}.el-icon-minus:before{content:"\E6D8"}.el-icon-help:before{content:"\E73D"}.el-icon-s-help:before{content:"\E7B3"}.el-icon-circle-close:before{content:"\E78D"}.el-icon-circle-check:before{content:"\E720"}.el-icon-circle-plus-outline:before{content:"\E723"}.el-icon-remove-outline:before{content:"\E722"}.el-icon-zoom-out:before{content:"\E776"}.el-icon-zoom-in:before{content:"\E777"}.el-icon-error:before{content:"\E79D"}.el-icon-success:before{content:"\E79C"}.el-icon-circle-plus:before{content:"\E7A0"}.el-icon-remove:before{content:"\E7A2"}.el-icon-info:before{content:"\E7A1"}.el-icon-question:before{content:"\E7A4"}.el-icon-warning-outline:before{content:"\E6C9"}.el-icon-warning:before{content:"\E7A3"}.el-icon-goods:before{content:"\E7C2"}.el-icon-s-goods:before{content:"\E7B2"}.el-icon-star-off:before{content:"\E717"}.el-icon-star-on:before{content:"\E797"}.el-icon-more-outline:before{content:"\E6CC"}.el-icon-more:before{content:"\E794"}.el-icon-phone-outline:before{content:"\E6CB"}.el-icon-phone:before{content:"\E795"}.el-icon-user:before{content:"\E6E3"}.el-icon-user-solid:before{content:"\E7A5"}.el-icon-setting:before{content:"\E6CA"}.el-icon-s-tools:before{content:"\E7AC"}.el-icon-delete:before{content:"\E6D7"}.el-icon-delete-solid:before{content:"\E7C9"}.el-icon-eleme:before{content:"\E7C7"}.el-icon-platform-eleme:before{content:"\E7CA"}.el-icon-loading{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.el-message__closeBtn:focus,.el-message__content:focus{outline-width:0}.el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#ebeef5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67c23a}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#e6a23c}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#f56c6c}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#c0c4cc;font-size:16px}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67c23a}.el-message .el-icon-error{color:#f56c6c}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#e6a23c}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.el-fade-in-enter,.el-fade-in-leave-active,.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active,.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-enter-active,.el-fade-in-leave-active,.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45);transform:scale(.45)}.collapse-transition{-webkit-transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out;transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{-webkit-transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out;transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-collapse{border-top:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.el-collapse-item.is-disabled .el-collapse-item__header{color:#bbb;cursor:not-allowed}.el-collapse-item__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:48px;line-height:48px;background-color:#fff;color:#303133;cursor:pointer;border-bottom:1px solid #ebeef5;font-size:13px;font-weight:500;-webkit-transition:border-bottom-color .3s;transition:border-bottom-color .3s;outline:0}.el-collapse-item__arrow{margin:0 8px 0 auto;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;font-weight:300}.el-collapse-item__arrow.is-active{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.el-collapse-item__header.focusing:focus:not(:hover){color:#409eff}.el-collapse-item__header.is-active{border-bottom-color:transparent}.el-collapse-item__wrap{will-change:height;background-color:#fff;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #ebeef5}.el-collapse-item__content{padding-bottom:25px;font-size:13px;color:#303133;line-height:1.769230769230769}.el-collapse-item:last-child{margin-bottom:-1px}.el-card{border-radius:4px;border:1px solid #ebeef5;background-color:#fff;overflow:hidden;color:#303133;-webkit-transition:.3s;transition:.3s}.el-card.is-always-shadow,.el-card.is-hover-shadow:focus,.el-card.is-hover-shadow:hover{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #ebeef5;-webkit-box-sizing:border-box;box-sizing:border-box}.el-card__body{padding:20px}.el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}.el-alert.is-light .el-alert__closebtn{color:#c0c4cc}.el-alert.is-dark .el-alert__closebtn,.el-alert.is-dark .el-alert__description{color:#fff}.el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-alert--success.is-light{background-color:#f0f9eb;color:#67c23a}.el-alert--success.is-light .el-alert__description{color:#67c23a}.el-alert--success.is-dark{background-color:#67c23a;color:#fff}.el-alert--info.is-light{background-color:#f4f4f5;color:#909399}.el-alert--info.is-dark{background-color:#909399;color:#fff}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning.is-light{background-color:#fdf6ec;color:#e6a23c}.el-alert--warning.is-light .el-alert__description{color:#e6a23c}.el-alert--warning.is-dark{background-color:#e6a23c;color:#fff}.el-alert--error.is-light{background-color:#fef0f0;color:#f56c6c}.el-alert--error.is-light .el-alert__description{color:#f56c6c}.el-alert--error.is-dark{background-color:#f56c6c;color:#fff}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}
--------------------------------------------------------------------------------
/docs/dist/js/app.efe84ade.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var a,i,c=e[0],o=e[1],l=e[2],p=0,v=[];p
32 |
33 |
34 |
55 |
58 |
59 |
84 |
89 |
90 |
95 |
96 |
104 |
105 |
112 |
113 |
114 |
91 | 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
92 |
93 | 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
94 | 简化流程：设计简洁直观的操作流程；
97 |
98 | 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
99 |
100 |
101 | 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
102 |
103 |
106 | 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
107 |
108 |
109 | 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
110 |
111 |
146 |
147 |
148 | \n '.concat(e,"\n ").concat(n,"\n
\n ")}).join("");return'\n \n key\n value\n
\n '.concat(n,"\n