init

.env.development

@@ -0,0 +1,5 @@
+NODE_ENV = development
+
+VUE_APP_API_BASE_URL = /prod-api
+VUE_APP_API_TARGET_URL = http://39.101.76.77:8081/
+VUE_APP_FILE_TARGET_URL = http://39.101.76.77:8081/

.env.production

@@ -0,0 +1,5 @@
+NODE_ENV = production
+
+VUE_APP_API_BASE_URL = /prod-api
+VUE_APP_API_TARGET_URL = http://39.101.76.77:8081/
+VUE_APP_FILE_TARGET_URL = http://39.101.76.77:8081/

.eslintrc.js

@@ -0,0 +1,61 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/strongly-recommended', '@vue/standard'],
+  rules: {
+    'max-len': [
+      1,
+      {
+        code: 200, // 单行最大长度200，字符串，正则，注释除外
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+        ignoreRegExpLiterals: true,
+        ignoreComments: false,
+      },
+    ],
+    'comma-dangle': [2, 'always-multiline'], // 尾随逗号
+    quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], // 字符串单引号
+    semi: [2, 'always', { omitLastInOneLineBlock: true }], // 尾随分号
+    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'generator-star-spacing': 2, // generater函数标识*两侧必须空格隔开
+    'no-mixed-operators': 0, // 逻辑运算符允许混合使用 && ||
+    'no-unused-vars': [2, { args: 'none' }], // 已声明变量必须在使用中，函数参数除外
+    'prefer-const': 2,
+    'template-curly-spacing': [2, 'always'], // 模版字符串单行空格
+    indent: [2, 2], // 缩进两空格
+    'lines-between-class-members': 0,
+
+    'vue/component-name-in-template-casing': 2, // 自定义组件名大驼峰
+    'vue/html-self-closing': 0, // 标签无需自动闭合为单标签
+    'vue/html-closing-bracket-newline': 2, // 多属性标签结束箭头独占一行
+    'vue/multi-word-component-names': [2, { ignores: ['index', 'Index'] }], // 组件名称大驼峰
+    'vue/no-unused-components': 2, // 局部注册组件必须在使用中
+
+    'vue/max-attributes-per-line': 2, // 标签单行属性数量限制，默认1
+    'vue/attribute-hyphenation': 0, // 自定义组件的属性不强制使用-分割的连字符
+    'vue/no-use-v-if-with-v-for': 0, // v-if和v-for可以共存
+
+    'vue/singleline-html-element-content-newline': 2, // 标签内容换行
+    'vue/multiline-html-element-content-newline': 2,
+
+    'vue/no-parsing-error': 2, // 语法错误提示
+    'vue/html-indent': [2, 2], // 缩进两空格
+
+    'vue/no-mutating-props': 0, // 可以修改prop对象参数的属性
+  },
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
+      env: { jest: true },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,28 @@
+.DS_Store
+node_modules
+/dist
+
+# built files
+
+# Lock files
+yarn.lock
+package-lock.json
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,3 @@
+# official-website
+
+昊坤官网

babel.config.js

@@ -0,0 +1,18 @@
+const plugins = ['@babel/plugin-proposal-optional-chaining'];
+
+plugins.push([
+  'import',
+  {
+    libraryName: 'ant-design-vue',
+    libraryDirectory: 'es',
+    style: 'css',
+  },
+  'antd',
+]);
+
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+  plugins,
+};

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  }
+}

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "form-designer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --mode=development",
+    "serve:prod": "vue-cli-service serve --mode=production",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint --fix"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "axios": "^1.7.2",
+    "babel-plugin-import": "^1.13.8",
+    "core-js": "^3.8.3",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.5.1",
+    "element-ui": "^2.15.14",
+    "vue": "2.7.16",
+    "vue-resize-directive": "^1.2.0",
+    "vue-router": "^3.6.5",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "eslint": "^8.0.1",
+    "eslint-plugin-vue": "^9.2.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
+    "sass": "^1.74.1",
+    "sass-loader": "^13.0.0",
+    "vue-template-compiler": "2.7.16"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>logo.png">
+    <title>昊坤能源</title>
+    <link rel="preload" href="/static/fontFace/Microsoft-YaHei-Semibold.ttc" as="font" type="font/ttc" crossorigin>
+    <link rel="preload" href="/static/fontFace/Microsoft-YaHei-Regular.ttc" as="font" type="font/ttc" crossorigin>
+    <link rel="preload" href="/static/fontFace/Microsoft-YaHei-Light.ttc" as="font" type="font/ttc" crossorigin>
+    <style>
+      @font-face
+      {
+          font-family: MicrosoftYaHei;
+          src: url('/static/fontFace/Microsoft-YaHei-Regular.ttc')
+      }
+      @font-face
+      {
+          font-family: MicrosoftYaHeiBold;
+          src: url('/static/fontFace/Microsoft-YaHei-Bold.ttc')
+      }
+      @font-face
+      {
+          font-family: MicrosoftYaHeiHeavy;
+          src: url('/static/fontFace/Microsoft-YaHei-Heavy.ttc')
+      }
+      @font-face
+      {
+          font-family: MicrosoftYaHeiLight;
+          src: url('/static/fontFace/Microsoft-YaHei-Light.ttc')
+      }
+      @font-face
+      {
+          font-family: MicrosoftYaHeiSemibold;
+          src: url('/static/fontFace/Microsoft-YaHei-Semibold.ttc')
+      }
+      @font-face
+      {
+          font-family: MicrosoftYaHeiSemilight;
+          src: url('/static/fontFace/Microsoft-YaHei-Semilight.ttc')
+      }
+      @font-face
+      {
+        font-family: MicrosoftYaHeiRegular;
+        src: url('/static/fontFace/Microsoft-YaHei-Regular.ttc')
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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,170 @@
+<template>
+  <div
+    id="app"
+    class="scroll-y-container"
+    v-infinite-scroll="load"
+    :infinite-scroll-distance="infiniteScrollDistance"
+    @scroll="handleScroll"
+    v-resize="handleResize"
+  >
+    <router-view></router-view>
+    <transition name="nav">
+      <div
+        v-if="navShow"
+        class="nav-wrapper"
+      >
+        <NavBar
+          :theme="navTheme"
+          :bgColor="navBgColor"
+          :shadow="navShadow"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex';
+import NavBar from '@/components/NavBar.vue';
+
+export default {
+  name: 'App',
+  components: {
+    NavBar,
+  },
+  data () {
+    return {
+      defaultTheme: {
+        dark: {
+          bgColor: '#ffffff00',
+          shadow: false,
+        },
+        light: {
+          bgColor: '#ffffffff',
+          shadow: true,
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      scrollTop: state => state.scroll.scrollTop,
+      infiniteScrollDistance: state => state.scroll.infiniteScrollDistance,
+      navShow: state => state.nav.show,
+      navTheme: state => state.nav.theme,
+      navBgColor: state => state.nav.bgColor,
+      navShadow: state => state.nav.shadow,
+    }),
+    routerPath () {
+      return this.$route.path;
+    },
+  },
+  watch: {
+    $route () {
+      this.forceScroll(0);
+      this.setNavShow(true);
+    },
+  },
+  created () {
+    this.$event.$on('nav-theme', (theme, options = {}) => {
+      if (theme in this.defaultTheme) {
+        const { bgColor, shadow } = { ...this.defaultTheme[theme], ...options };
+        this.setNavTheme(theme);
+        this.setNavBgColor(bgColor);
+        this.setNavShadow(shadow);
+      }
+    });
+  },
+  methods: {
+    ...mapMutations(['setScrollTop', 'forceScroll', 'setNavShow', 'setNavTheme', 'setNavBgColor', 'setNavShadow', 'setWebScale']),
+    handleScroll (e) {
+      if (this.scrollTop < e.target.scrollTop) {
+        this.setNavShow(false);
+      }
+      if (this.scrollTop > e.target.scrollTop) {
+        this.setNavShow(true);
+      }
+      this.setScrollTop(e.target.scrollTop);
+    },
+    load () {
+      this.$event.$emit('load-more');
+    },
+    handleResize (app) {
+      document.getElementsByTagName('html')[0].style.cssText = `
+        font-size: ${ app.offsetWidth < 1920 ? app.offsetWidth / 1920 : 1 }px;
+      `;
+      this.setWebScale(app.offsetWidth < 1920 ? app.offsetWidth / 1920 : 1);
+    },
+  },
+};
+</script>
+
+<style>
+@import '~@/assets/css/common.css';
+
+html, body {
+  width: 100%;
+  height: 100%;
+  /* background-color: #f5f5f5; */
+  overflow: hidden;
+}
+body {
+  font-size: 16rem;
+}
+#app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+/* #app::-webkit-scrollbar {
+  width: 8rem;
+}
+#app::-webkit-scrollbar-button {
+  display: none;
+}
+#app::-webkit-scrollbar-thumb {
+  background-color: #00000066;
+  border-radius: 6px;
+  cursor: pointer;
+}
+#app::-webkit-scrollbar-thumb:active {
+  cursor: grab;
+}
+#app::-webkit-scrollbar-thumb:hover {
+  background-color: #000000aa;
+}
+#app::-webkit-scrollbar-track {
+  background-color: #00000022;
+} */
+.scroll-y-container {
+  overflow-y: overlay !important;
+}
+</style>
+
+<style scoped>
+.nav-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+}
+.nav-enter-active {
+  transition: all 0.5s;
+  opacity: 1;
+  transform: translateY(0);
+}
+.nav-enter {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+.nav-leave-active {
+  transition: all 0.5s;
+  opacity: 1;
+  transform: translateY(-100%);
+}
+.nav-leave {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

src/assets/css/common.css

@@ -0,0 +1,135 @@
+@charset "utf-8";
+@import url(normalize.css);
+html,
+body,
+div,
+p,
+ul,
+li,
+dl,
+dt,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+input,
+select,
+button,
+textarea,
+iframe,
+table,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+img {
+  border: 0 none;
+  vertical-align: top;
+  max-width: 100%;
+}
+ul,
+li {
+  list-style-type: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 14rem;
+}
+button {
+  cursor: pointer;
+}
+body {
+  background: #fff;
+  color: #363636;
+  line-height: 1.2;
+}
+a,
+a:link {
+  color: #222;
+  text-decoration: none;
+}
+a:visited {
+}
+a:active,
+a:hover {
+  text-decoration: underline;
+}
+a:focus {
+  outline: none;
+}
+
+.wrapper1130 {
+  width: 1130rem;
+  margin: 0 auto;
+}
+.wrapper1400 {
+  width: 1400rem;
+  margin: 0 auto;
+}
+.wrapper1680 {
+  width: 1680rem;
+  margin: 0 auto;
+}
+.wrapper1920 {
+  width: 1920rem;
+  margin: 0 auto;
+}
+
+.text-posi-abs {
+  position: absolute;
+  left: var(--l);
+  right: var(--r);
+  top: var(--t);
+  bottom: var(--b);
+  width: var(--w);
+  height: var(--h);
+  font-family: var(--ff);
+  font-size: var(--fs);
+  line-height: var(--lh, 1);
+  font-weight: var(--fw);
+  color: var(--c);
+  letter-spacing: var(--ls);
+  white-space: var(--ws, normal);
+  text-align: var(--ta);
+}
+.image-posi-abs {
+  position: absolute;
+  left: var(--l);
+  right: var(--r);
+  top: var(--t);
+  bottom: var(--b);
+  width: var(--w);
+  height: var(--h);
+  border-radius: var(--br, 20rem);
+  overflow: hidden;
+}
+.image-posi-abs > img {
+  transition: transform 0.4s;
+}
+.image-posi-abs > img:hover {
+  transform: scale(1.1)
+}
+.box-posi-abs {
+  position: absolute;
+  left: var(--l);
+  right: var(--r);
+  top: var(--t);
+  bottom: var(--b);
+  width: var(--w);
+  height: var(--h);
+  background-color: var(--bgc);
+}
+.screen-content-right .el-carousel__indicators--horizontal {
+  bottom: 100rem !important;
+}
+@import url(transition.css);
+@import url(quill.bubble.css);

src/assets/css/normalize.css

@@ -0,0 +1,344 @@
+
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+/**
+* 1. Set default font family to sans-serif.
+* 2. Prevent iOS text size adjust after orientation change, without disabling
+* user zoom.
+*/
+html {
+/*font-family: sans-serif; !* 1 *!*/
+-ms-text-size-adjust: 100%; /* 2 */
+-webkit-text-size-adjust: 100%; /* 2 */
+}
+/**
+* Remove default margin.
+*/
+body {
+    font-family: MicrosoftYaHei;
+    margin: 0;
+}
+/* HTML5 display definitions
+========================================================================== */
+/**
+* Correct `block` display not defined for any HTML5 element in IE 8/9.
+* Correct `block` display not defined for `details` or `summary` in IE 10/11
+* and Firefox.
+* Correct `block` display not defined for `main` in IE 11.
+*/
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+display: block;
+}
+/**
+* 1. Correct `inline-block` display not defined in IE 8/9.
+* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+*/
+audio,
+canvas,
+progress,
+video {
+display: inline-block; /* 1 */
+vertical-align: baseline; /* 2 */
+}
+/**
+* Prevent modern browsers from displaying `audio` without controls.
+* Remove excess height in iOS 5 devices.
+*/
+audio:not([controls]) {
+display: none;
+height: 0;
+}
+/**
+* Address `[hidden]` styling not present in IE 8/9/10.
+* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+*/
+[hidden],
+template {
+display: none;
+}
+/* Links
+========================================================================== */
+/**
+* Remove the gray background color from active links in IE 10.
+*/
+a {
+background-color: transparent;
+}
+/**
+* Improve readability when focused and also mouse hovered in all browsers.
+*/
+a:active,
+a:hover {
+outline: 0;
+}
+/* Text-level semantics
+========================================================================== */
+/**
+* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+*/
+abbr[title] {
+border-bottom: 1rem dotted;
+}
+/**
+* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+*/
+b,
+strong {
+font-weight: bold;
+}
+/**
+* Address styling not present in Safari and Chrome.
+*/
+dfn {
+font-style: italic;
+}
+/**
+* Address variable `h1` font-size and margin within `section` and `article`
+* contexts in Firefox 4+, Safari, and Chrome.
+*/
+h1 {
+font-size: 2em;
+margin: 0.67em 0;
+}
+/**
+* Address styling not present in IE 8/9.
+*/
+mark {
+background: #ff0;
+color: #000;
+}
+/**
+* Address inconsistent and variable font size in all browsers.
+*/
+small {
+font-size: 80%;
+}
+/**
+* Prevent `sub` and `sup` affecting `line-height` in all browsers.
+*/
+sub,
+sup {
+font-size: 75%;
+line-height: 0;
+position: relative;
+vertical-align: baseline;
+}
+sup {
+top: -0.5em;
+}
+sub {
+bottom: -0.25em;
+}
+/* Embedded content
+========================================================================== */
+/**
+* Remove border when inside `a` element in IE 8/9/10.
+*/
+img {
+border: 0;
+}
+/**
+* Correct overflow not hidden in IE 9/10/11.
+*/
+svg:not(:root) {
+overflow: hidden;
+}
+/* Grouping content
+========================================================================== */
+/**
+* Address margin not present in IE 8/9 and Safari.
+*/
+figure {
+margin: 1em 40rem;
+}
+/**
+* Address differences between Firefox and other browsers.
+*/
+hr {
+-moz-box-sizing: content-box;
+box-sizing: content-box;
+height: 0;
+}
+/**
+* Contain overflow in all browsers.
+*/
+pre {
+overflow: auto;
+}
+/**
+* Address odd `em`-unit font size rendering in all browsers.
+*/
+code,
+kbd,
+pre,
+samp {
+font-family: monospace, monospace;
+font-size: 1em;
+}
+/* Forms
+========================================================================== */
+/**
+* Known limitation: by default, Chrome and Safari on OS X allow very limited
+* styling of `select`, unless a `border` property is set.
+*/
+/**
+* 1. Correct color not being inherited.
+* Known issue: affects color of disabled elements.
+* 2. Correct font properties not being inherited.
+* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+color: inherit; /* 1 */
+font: inherit; /* 2 */
+margin: 0; /* 3 */
+}
+/**
+* Address `overflow` set to `hidden` in IE 8/9/10/11.
+*/
+button {
+overflow: visible;
+}
+/**
+* Address inconsistent `text-transform` inheritance for `button` and `select`.
+* All other form control elements do not inherit `text-transform` values.
+* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+* Correct `select` style inheritance in Firefox.
+*/
+button,
+select {
+text-transform: none;
+}
+/**
+* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+* and `video` controls.
+* 2. Correct inability to style clickable `input` types in iOS.
+* 3. Improve usability and consistency of cursor style between image-type
+* `input` and others.
+*/
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+-webkit-appearance: button; /* 2 */
+cursor: pointer; /* 3 */
+}
+/**
+* Re-set default cursor for disabled elements.
+*/
+button[disabled],
+html input[disabled] {
+cursor: default;
+}
+/**
+* Remove inner padding and border in Firefox 4+.
+*/
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+border: 0;
+padding: 0;
+}
+/**
+* Address Firefox 4+ setting `line-height` on `input` using `!important` in
+* the UA stylesheet.
+*/
+input {
+line-height: normal;
+}
+/**
+* It's recommended that you don't attempt to style these elements.
+* Firefox's implementation doesn't respect box-sizing, padding, or width.
+*
+* 1. Address box sizing set to `content-box` in IE 8/9/10.
+* 2. Remove excess padding in IE 8/9/10.
+*/
+input[type="checkbox"],
+input[type="radio"] {
+box-sizing: border-box; /* 1 */
+padding: 0; /* 2 */
+}
+/**
+* Fix the cursor style for Chrome's increment/decrement buttons. For certain
+* `font-size` values of the `input`, it causes the cursor style of the
+* decrement button to change from `default` to `text`.
+*/
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+height: auto;
+}
+/**
+* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+* (include `-moz` to future-proof).
+*/
+input[type="search"] {
+-webkit-appearance: textfield; /* 1 */
+-moz-box-sizing: content-box;
+-webkit-box-sizing: content-box; /* 2 */
+box-sizing: content-box;
+}
+/**
+* Remove inner padding and search cancel button in Safari and Chrome on OS X.
+* Safari (but not Chrome) clips the cancel button when the search input has
+* padding (and `textfield` appearance).
+*/
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+-webkit-appearance: none;
+}
+/**
+* Define consistent border, margin, and padding.
+*/
+fieldset {
+border: 1rem solid #c0c0c0;
+margin: 0 2rem;
+padding: 0.35em 0.625em 0.75em;
+}
+/**
+* 1. Correct `color` not being inherited in IE 8/9/10/11.
+* 2. Remove padding so people aren't caught out if they zero out fieldsets.
+*/
+legend {
+border: 0; /* 1 */
+padding: 0; /* 2 */
+}
+/**
+* Remove default vertical scrollbar in IE 8/9/10/11.
+*/
+textarea {
+overflow: auto;
+}
+/**
+* Don't inherit the `font-weight` (applied by a rule above).
+* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+*/
+optgroup {
+font-weight: bold;
+}
+/* Tables
+========================================================================== */
+/**
+* Remove most spacing between table cells.
+*/
+table {
+border-collapse: collapse;
+border-spacing: 0;
+}
+td,
+th {
+padding: 0;
+}

src/assets/css/quill.bubble.css

@@ -0,0 +1,952 @@
+/*!
+ * Quill Editor v1.3.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13rem;
+  height: 100%;
+  margin: 0rem;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000rem;
+  height: 1rem;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12rem 15rem;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15rem;
+  pointer-events: none;
+  position: absolute;
+  right: 15rem;
+}
+.ql-bubble.ql-toolbar:after,
+.ql-bubble .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-bubble.ql-toolbar button,
+.ql-bubble .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24rem;
+  padding: 3rem 5rem;
+  width: 28rem;
+}
+.ql-bubble.ql-toolbar button svg,
+.ql-bubble .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-bubble.ql-toolbar button:active:hover,
+.ql-bubble .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-bubble.ql-toolbar input.ql-image[type=file],
+.ql-bubble .ql-toolbar input.ql-image[type=file] {
+  display: none;
+}
+.ql-bubble.ql-toolbar button:hover,
+.ql-bubble .ql-toolbar button:hover,
+.ql-bubble.ql-toolbar button:focus,
+.ql-bubble .ql-toolbar button:focus,
+.ql-bubble.ql-toolbar button.ql-active,
+.ql-bubble .ql-toolbar button.ql-active,
+.ql-bubble.ql-toolbar .ql-picker-label:hover,
+.ql-bubble .ql-toolbar .ql-picker-label:hover,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
+.ql-bubble.ql-toolbar .ql-picker-item:hover,
+.ql-bubble .ql-toolbar .ql-picker-item:hover,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
+  color: #fff;
+}
+.ql-bubble.ql-toolbar button:hover .ql-fill,
+.ql-bubble .ql-toolbar button:hover .ql-fill,
+.ql-bubble.ql-toolbar button:focus .ql-fill,
+.ql-bubble .ql-toolbar button:focus .ql-fill,
+.ql-bubble.ql-toolbar button.ql-active .ql-fill,
+.ql-bubble .ql-toolbar button.ql-active .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #fff;
+}
+.ql-bubble.ql-toolbar button:hover .ql-stroke,
+.ql-bubble .ql-toolbar button:hover .ql-stroke,
+.ql-bubble.ql-toolbar button:focus .ql-stroke,
+.ql-bubble .ql-toolbar button:focus .ql-stroke,
+.ql-bubble.ql-toolbar button.ql-active .ql-stroke,
+.ql-bubble .ql-toolbar button.ql-active .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
+.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
+.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #fff;
+}
+@media (pointer: coarse) {
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active),
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
+    color: #ccc;
+  }
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #ccc;
+  }
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #ccc;
+  }
+}
+.ql-bubble {
+  box-sizing: border-box;
+}
+.ql-bubble * {
+  box-sizing: border-box;
+}
+.ql-bubble .ql-hidden {
+  display: none;
+}
+.ql-bubble .ql-out-bottom,
+.ql-bubble .ql-out-top {
+  visibility: hidden;
+}
+.ql-bubble .ql-tooltip {
+  position: absolute;
+  transform: translateY(10rem);
+}
+.ql-bubble .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-bubble .ql-tooltip.ql-flip {
+  transform: translateY(-10rem);
+}
+.ql-bubble .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-bubble .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-bubble .ql-stroke {
+  fill: none;
+  stroke: #ccc;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-bubble .ql-stroke-miter {
+  fill: none;
+  stroke: #ccc;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-bubble .ql-fill,
+.ql-bubble .ql-stroke.ql-fill {
+  fill: #ccc;
+}
+.ql-bubble .ql-empty {
+  fill: none;
+}
+.ql-bubble .ql-even {
+  fill-rule: evenodd;
+}
+.ql-bubble .ql-thin,
+.ql-bubble .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-bubble .ql-transparent {
+  opacity: 0.4;
+}
+.ql-bubble .ql-direction svg:last-child {
+  display: none;
+}
+.ql-bubble .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-bubble .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-bubble .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-bubble .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-bubble .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-bubble .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-bubble .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-bubble .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-bubble .ql-editor a {
+  text-decoration: underline;
+}
+.ql-bubble .ql-editor blockquote {
+  border-left: 4rem solid #ccc;
+  margin-bottom: 5rem;
+  margin-top: 5rem;
+  padding-left: 16rem;
+}
+.ql-bubble .ql-editor code,
+.ql-bubble .ql-editor pre {
+  background-color: #f0f0f0;
+  border-radius: 3rem;
+}
+.ql-bubble .ql-editor pre {
+  white-space: pre-wrap;
+  margin-bottom: 5rem;
+  margin-top: 5rem;
+  padding: 5rem 10rem;
+}
+.ql-bubble .ql-editor code {
+  font-size: 85%;
+  padding: 2rem 4rem;
+}
+.ql-bubble .ql-editor pre.ql-syntax {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-bubble .ql-editor img {
+  max-width: 100%;
+}
+.ql-bubble .ql-picker {
+  color: #ccc;
+  display: inline-block;
+  float: left;
+  font-size: 14rem;
+  font-weight: 500;
+  height: 24rem;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-bubble .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8rem;
+  padding-right: 2rem;
+  position: relative;
+  width: 100%;
+}
+.ql-bubble .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22rem;
+}
+.ql-bubble .ql-picker-options {
+  background-color: #444;
+  display: none;
+  min-width: 100%;
+  padding: 4rem 8rem;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-bubble .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5rem;
+  padding-top: 5rem;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
+  color: #777;
+  z-index: 2;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #777;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #777;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1rem;
+  top: 100%;
+  z-index: 1;
+}
+.ql-bubble .ql-color-picker,
+.ql-bubble .ql-icon-picker {
+  width: 28rem;
+}
+.ql-bubble .ql-color-picker .ql-picker-label,
+.ql-bubble .ql-icon-picker .ql-picker-label {
+  padding: 2rem 4rem;
+}
+.ql-bubble .ql-color-picker .ql-picker-label svg,
+.ql-bubble .ql-icon-picker .ql-picker-label svg {
+  right: 4rem;
+}
+.ql-bubble .ql-icon-picker .ql-picker-options {
+  padding: 4rem 0rem;
+}
+.ql-bubble .ql-icon-picker .ql-picker-item {
+  height: 24rem;
+  width: 24rem;
+  padding: 2rem 4rem;
+}
+.ql-bubble .ql-color-picker .ql-picker-options {
+  padding: 3rem 5rem;
+  width: 152rem;
+}
+.ql-bubble .ql-color-picker .ql-picker-item {
+  border: 1rem solid transparent;
+  float: left;
+  height: 16rem;
+  margin: 2rem;
+  padding: 0rem;
+  width: 16rem;
+}
+.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9rem;
+  right: 0;
+  top: 50%;
+  width: 18rem;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-bubble .ql-picker.ql-header {
+  width: 98rem;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-bubble .ql-picker.ql-font {
+  width: 108rem;
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-bubble .ql-picker.ql-size {
+  width: 98rem;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10rem;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18rem;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32rem;
+}
+.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-bubble .ql-toolbar .ql-formats {
+  margin: 8rem 12rem 8rem 0rem;
+}
+.ql-bubble .ql-toolbar .ql-formats:first-child {
+  margin-left: 12rem;
+}
+.ql-bubble .ql-color-picker svg {
+  margin: 1rem;
+}
+.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
+.ql-bubble .ql-color-picker .ql-picker-item:hover {
+  border-color: #fff;
+}
+.ql-bubble .ql-tooltip {
+  background-color: #444;
+  border-radius: 25rem;
+  color: #fff;
+}
+.ql-bubble .ql-tooltip-arrow {
+  border-left: 6rem solid transparent;
+  border-right: 6rem solid transparent;
+  content: " ";
+  display: block;
+  left: 50%;
+  margin-left: -6rem;
+  position: absolute;
+}
+.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
+  border-bottom: 6rem solid #444;
+  top: -6rem;
+}
+.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
+  border-top: 6rem solid #444;
+  bottom: -6rem;
+}
+.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
+  display: block;
+}
+.ql-bubble .ql-tooltip.ql-editing .ql-formats {
+  visibility: hidden;
+}
+.ql-bubble .ql-tooltip-editor {
+  display: none;
+}
+.ql-bubble .ql-tooltip-editor input[type=text] {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 13rem;
+  height: 100%;
+  outline: none;
+  padding: 10rem 20rem;
+  position: absolute;
+  width: 100%;
+}
+.ql-bubble .ql-tooltip-editor a {
+  top: 10rem;
+  position: absolute;
+  right: 20rem;
+}
+.ql-bubble .ql-tooltip-editor a:before {
+  color: #ccc;
+  content: "\D7";
+  font-size: 16rem;
+  font-weight: bold;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a {
+  position: relative;
+  white-space: nowrap;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::before {
+  background-color: #444;
+  border-radius: 15rem;
+  top: -5rem;
+  font-size: 12rem;
+  color: #fff;
+  content: attr(href);
+  font-weight: normal;
+  overflow: hidden;
+  padding: 5rem 15rem;
+  text-decoration: none;
+  z-index: 1;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::after {
+  border-top: 6rem solid #444;
+  border-left: 6rem solid transparent;
+  border-right: 6rem solid transparent;
+  top: 0;
+  content: " ";
+  height: 0;
+  width: 0;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::before,
+.ql-container.ql-bubble:not(.ql-disabled) a::after {
+  left: 0;
+  margin-left: 50%;
+  position: absolute;
+  transform: translate(-50%, -100%);
+  transition: visibility 0s ease 200ms;
+  visibility: hidden;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
+.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
+  visibility: visible;
+}

src/assets/css/transition.css

@@ -0,0 +1,352 @@
+.fade-slide-top-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.fade-slide-top-enter {
+  opacity: 0;
+  transform: translateY(var(--initial, -80rem));
+}
+.fade-slide-bottom-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  transform: translateY(0);
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.fade-slide-bottom-enter {
+  opacity: 0;
+  transform: translateY(var(--initial, 80rem));
+}
+.fade-slide-left-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  transform: translateX(0);
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.fade-slide-left-enter {
+  opacity: 0;
+  transform: translateX(var(--initial, -100rem));
+}
+.fade-slide-right-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  transform: translateX(0);
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.fade-slide-right-enter {
+  opacity: 0;
+  transform: translateX(var(--initial, 100rem));
+}
+
+.fade-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.fade-enter {
+  opacity: 0;
+}
+
+.scale-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  transform: scale(1, 1);
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.scale-enter {
+  opacity: 0;
+  transform: scale(var(--initialX, var(--initial, 0.5)), var(--initialY, var(--initial, 0.5)));
+}
+
+.fade-clock-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.fade-clock-enter-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  animation: fadeClock var(--tdu, 0.8s) linear var(--tde, 0s) 1 forwards normal;
+}
+.fade-clock-enter {
+  position: relative;
+  opacity: 0;
+}
+.fade-clock-enter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  animation: fadeClock var(--tdu, 0.8s) linear var(--tde, 0s) 1 forwards normal;
+}
+@keyframes fadeClock {
+  0% {
+    background-image: conic-gradient(transparent 0deg, transparent 0deg, #F5F5F8 0deg, #F5F5F8 360deg);
+  }
+  5% {
+    background-image: conic-gradient(transparent 0deg, transparent 18deg, #F5F5F8 18deg, #F5F5F8 360deg);
+  }
+  10% {
+    background-image: conic-gradient(transparent 0deg, transparent 36deg, #F5F5F8 36deg, #F5F5F8 360deg);
+  }
+  15% {
+    background-image: conic-gradient(transparent 0deg, transparent 54deg, #F5F5F8 54deg, #F5F5F8 360deg);
+  }
+  20% {
+    background-image: conic-gradient(transparent 0deg, transparent 72deg, #F5F5F8 72deg, #F5F5F8 360deg);
+  }
+  25% {
+    background-image: conic-gradient(transparent 0deg, transparent 90deg, #F5F5F8 90deg, #F5F5F8 360deg);
+  }
+  30% {
+    background-image: conic-gradient(transparent 0deg, transparent 108deg, #F5F5F8 108deg, #F5F5F8 360deg);
+  }
+  35% {
+    background-image: conic-gradient(transparent 0deg, transparent 126deg, #F5F5F8 126deg, #F5F5F8 360deg);
+  }
+  40% {
+    background-image: conic-gradient(transparent 0deg, transparent 144deg, #F5F5F8 144deg, #F5F5F8 360deg);
+  }
+  45% {
+    background-image: conic-gradient(transparent 0deg, transparent 162deg, #F5F5F8 162deg, #F5F5F8 360deg);
+  }
+  50% {
+    background-image: conic-gradient(transparent 0deg, transparent 180deg, #F5F5F8 180deg, #F5F5F8 360deg);
+  }
+  55% {
+    background-image: conic-gradient(transparent 0deg, transparent 198deg, #F5F5F8 198deg, #F5F5F8 360deg);
+  }
+  60% {
+    background-image: conic-gradient(transparent 0deg, transparent 216deg, #F5F5F8 216deg, #F5F5F8 360deg);
+  }
+  65% {
+    background-image: conic-gradient(transparent 0deg, transparent 234deg, #F5F5F8 234deg, #F5F5F8 360deg);
+  }
+  70% {
+    background-image: conic-gradient(transparent 0deg, transparent 252deg, #F5F5F8 252deg, #F5F5F8 360deg);
+  }
+  75% {
+    background-image: conic-gradient(transparent 0deg, transparent 270deg, #F5F5F8 270deg, #F5F5F8 360deg);
+  }
+  80% {
+    background-image: conic-gradient(transparent 0deg, transparent 288deg, #F5F5F8 288deg, #F5F5F8 360deg);
+  }
+  85% {
+    background-image: conic-gradient(transparent 0deg, transparent 306deg, #F5F5F8 306deg, #F5F5F8 360deg);
+  }
+  90% {
+    background-image: conic-gradient(transparent 0deg, transparent 324deg, #F5F5F8 324deg, #F5F5F8 360deg);
+  }
+  95% {
+    background-image: conic-gradient(transparent 0deg, transparent 342deg, #F5F5F8 342deg, #F5F5F8 360deg);
+  }
+  100% {
+    background-image: conic-gradient(transparent 0deg, transparent 360deg, #F5F5F8 360deg, #F5F5F8 360deg);
+  }
+}
+
+.curtain-bottom-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.curtain-bottom-enter-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+  transition: height var(--tdu, 0.8s) linear;
+  transition-delay: var(--tde, 0s);
+  background-color: var(--initial, #ffffff);
+}
+.curtain-bottom-enter {
+  position: relative;
+  opacity: 0;
+}
+.curtain-bottom-enter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--initial, #ffffff);
+}
+.curtain-top-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.curtain-top-enter-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 0;
+  transition: height var(--tdu, 0.8s) linear;
+  transition-delay: var(--tde, 0s);
+  background-color: var(--initial, #ffffff);
+}
+.curtain-top-enter {
+  position: relative;
+  opacity: 0;
+}
+.curtain-top-enter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--initial, #ffffff);
+}
+.curtain-right-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.curtain-right-enter-active::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  transition: width var(--tdu, 0.8s) linear;
+  transition-delay: var(--tde, 0s);
+  /*background-color: var(--initial, #ffffff);*/
+}
+.curtain-right-enter {
+  position: relative;
+  opacity: 0;
+}
+.curtain-right-enter::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--initial, #ffffff);
+}
+.curtain-left-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.curtain-left-enter-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  transition: width var(--tdu, 0.8s) linear;
+  transition-delay: var(--tde, 0s);
+  /*background-color: var(--initial, #ffffff);*/
+}
+.curtain-left-enter {
+  position: relative;
+  opacity: 0;
+}
+.curtain-left-enter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--initial, #ffffff);
+}
+.curtain-center-align-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.curtain-center-align-enter-active::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 0;
+  height: 100%;
+  transform: translateX(-50%);
+  transition: width var(--tdu, 0.8s) linear;
+  transition-delay: var(--tde, 0s);
+  background-color: var(--initial, #ffffff);
+}
+.curtain-center-align-enter {
+  position: relative;
+  opacity: 0;
+}
+.curtain-center-align-enter::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateX(-50%);
+  background-color: var(--initial, #ffffff);
+}
+.curtain-center-vertical-enter-active {
+  transition: all 0.8s;
+  opacity: 1;
+  position: relative;
+  transition-duration: var(--tdu, 0.8s);
+  transition-delay: var(--tde, 0s);
+}
+.curtain-center-vertical-enter-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 0;
+  transform: translateY(-50%);
+  transition: height var(--tdu, 0.8s) linear;
+  transition-delay: var(--tde, 0s);
+  background-color: var(--initial, #ffffff);
+}
+.curtain-center-vertical-enter {
+  position: relative;
+  opacity: 0;
+}
+.curtain-center-vertical-enter::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translateY(-50%);
+  background-color: var(--initial, #ffffff);
+}

src/components/AntChart/CustomChart.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="chart-wrapper"
+    :style="`--height:${typeof height === 'string' ? height : `${height}px`};`"
+    v-resize="handleResize"
+  >
+    <div
+      :id="chartId"
+      class="chart-body"
+    />
+  </div>
+</template>
+
+<script>
+import * as Echarts from 'echarts';
+import { loadingOptions, defaultOptions } from './constant';
+
+export default {
+  props: {
+    height: { type: [String, Number], default: '100%' },
+    chartId: { type: String, required: true },
+    mapData: { type: Array, default: () => [] },
+    loadingOptions: { type: Object, default: () => ({}) },
+    options: { type: Object, default: () => ({}) },
+    immediate: { type: Boolean, default: false },
+  },
+  data () {
+    return {
+      chart: null,
+      loading: true,
+      bindAction: null,
+    };
+  },
+  computed: {
+    loadingOpts () {
+      return Object.deepAssign({}, loadingOptions, this.loadingOptions);
+    },
+    chartOptions () {
+      return Object.deepAssign(defaultOptions, this.loadingOptions, this.options);
+    },
+  },
+  watch: {
+    loadingOptions () {
+      this.initChart(true, false);
+    },
+    options () {
+      this.updateChart();
+    },
+  },
+  created () {
+    this.initMap();
+  },
+  mounted () {
+    this.initChart(!this.immediate, true);
+    this.bindAction = this.handleVisibilityChange.bind(this);
+    document.addEventListener('visibilitychange', this.bindAction);
+  },
+  beforeDestroy () {
+    this.dispose();
+    document.removeEventListener('visibilitychange', this.bindAction);
+  },
+  methods: {
+    dispose () {
+      this.chart && this.chart.dispose();
+      this.chart = null;
+    },
+    handleVisibilityChange () {
+      if (document.hidden) {
+        this.dispose();
+      } else {
+        this.dispose();
+        this.$nextTick(() => {
+          this.initChart(this.loading, false);
+        });
+      }
+    },
+    handleResize () {
+      this.dispose();
+      this.$nextTick(() => {
+        this.initChart(this.loading, true);
+      });
+    },
+    initMap () {
+      this.mapData.forEach((map) => {
+        if (Echarts.getMap(map.mapName)) return;
+        Echarts.registerMap(map.mapName, {
+          type: 'FeatureCollection',
+          features: map.features,
+          UTF8Encoding: true,
+        });
+      });
+    },
+    initChart (loading, force) {
+      if (force || (!this.chart && document.querySelector(`#${ this.chartId }`))) {
+        this.dispose();
+        this.chart = Echarts.init(document.querySelector(`#${ this.chartId }`), { width: 'auto', height: 'auto' });
+      }
+      if (loading) {
+        this.loading = true;
+        this.chart.setOption(this.loadingOpts);
+      } else {
+        this.chart.setOption(this.chartOptions);
+        this.$emit('binding-event', this.chart);
+      }
+    },
+    updateChart () {
+      if (!this.chart && document.querySelector(`#${ this.chartId }`)) {
+        this.dispose();
+        this.chart = Echarts.init(document.querySelector(`#${ this.chartId }`), { width: 'auto', height: 'auto' });
+      }
+      if (this.chart) {
+        this.loading = false;
+        // console.log(`----${this.chartId}----`, this.chartOptions)
+        this.chart.setOption(this.chartOptions, true);
+        this.$emit('binding-event', this.chart);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart-wrapper {
+  height: var(--height);
+  display: flex;
+  flex-direction: column;
+  .chart-body {
+    flex: 1;
+  }
+}
+</style>

src/components/AntChart/constant.js

@@ -0,0 +1,45 @@
+export const loadingOptions = {
+  graphic: {
+    elements: [
+      {
+        type: 'group',
+        left: 'center',
+        top: 'center',
+        children: new Array(7).fill(0).map((val, i) => ({
+          type: 'rect',
+          x: i * 20,
+          shape: {
+            x: 0,
+            y: -40,
+            width: 10,
+            height: 80,
+          },
+          style: {
+            fill: '#5470c6',
+          },
+          keyframeAnimation: {
+            duration: 1000,
+            delay: i * 200,
+            loop: true,
+            keyframes: [
+              {
+                percent: 0.5,
+                scaleY: 0.3,
+                easing: 'cubicIn',
+              },
+              {
+                percent: 1,
+                scaleY: 1,
+                easing: 'cubicOut',
+              },
+            ],
+          },
+        })),
+      },
+    ],
+  },
+};
+
+export const defaultOptions = {
+  grid: { left: 10, right: 10, top: 40, bottom: 10 },
+};

src/components/ArrowHalfRound.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="svg-wrapper group">
+    <svg
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-full h-full"
+    >
+      <g
+        class="transition-transform transform origin-center stroke-current group-hover:translate-x-0.5"
+      >
+        <path
+          d="M28 20H14"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+        <path
+          d="M25 23L28 20L25 17"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </g>
+      <path
+        d="M7 6.56497C14.3204 -0.854991 26.1892 -0.854991 33.5097 6.56497C40.8301 13.9849 40.8301 26.0151 33.5097 33.435C26.1892 40.855 14.3204 40.855 7 33.435"
+        class="transition-all stroke-current group-hover:dashoffset-0 dashoffset-30 dasharray-30"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style scoped>
+.svg-wrapper {
+  width: 80rem;
+  height: 80rem;
+}
+.w-full {
+  width: 100%;
+}
+.h-full {
+  height: 100%;
+}
+svg {
+  display: block;
+  vertical-align: middle;
+}
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+
+  --tw-border-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+
+  --tw-shadow: 0 0 transparent;
+
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0rem;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 transparent;
+  --tw-ring-shadow: 0 0 transparent;
+}
+
+.origin-center {
+  transform-origin: center;
+}
+.transform {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.stroke-current {
+  stroke: currentColor;
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.3s;
+}
+
+.stroke-current {
+  stroke: currentColor;
+}
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.3s;
+}
+.dashoffset-30 {
+  stroke-dashoffset: 120;
+}
+.dasharray-30 {
+  stroke-dasharray: 120;
+}
+
+.group:hover .group-hover\:translate-x-0\.5 {
+  --tw-translate-x: 2rem;
+}
+.group:hover .group-hover\:dashoffset-0 {
+  stroke-dashoffset: 0;
+}
+</style>

src/components/FootBar.vue

@@ -0,0 +1,236 @@
+<template>
+  <div
+    class="foot-bar"
+    :class="'foot-bar-' + theme"
+  >
+    <div class="wrapper1680">
+      <div style="display: flex;justify-content: space-between;">
+        <div>
+          <div style="width: calc(500rem * 0.6);height: calc(44rem * 0.6);margin-bottom: 60rem;">
+            <img
+              :src="'/static/img/foot/logo-'+ theme +'.png'"
+              style="width: 100%; height: 100%;"
+            />
+          </div>
+          <div style="display: flex;margin-bottom: 60rem;">
+            <div
+              v-for="(item, index) in navLinks"
+              :key="index"
+              style="width: 240rem;"
+            >
+              <div style="height: 18rem;margin-bottom: 20rem;">
+                <span
+                  v-if="item.children"
+                  style="white-space: nowrap;font-size: 18rem;"
+                >{{ item.title }}</span>
+              </div>
+              <div>
+                <div
+                  v-for="link in item.children"
+                  :key="link.title"
+                  style="margin-bottom: 20rem;"
+                >
+                  <a
+                    :href="link.path"
+                    :title="link.title"
+                    style="white-space: nowrap;color: #999999;font-size: 14rem;"
+                  >
+                    {{ link.title }}
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div
+              v-for="(item, index) in contacts"
+              :key="index"
+              style="width: 300rem;"
+            >
+              <div style="height: 18rem;margin-bottom: 20rem;">
+                <span
+                  v-if="item.children"
+                  style="white-space: nowrap;font-size: 18rem;"
+                >{{ item.title }}</span>
+              </div>
+              <div>
+                <div
+                  v-for="(link, index) in item.children"
+                  :key="link.title"
+                  style="margin-bottom: 20rem;"
+                >
+                  <a
+                    :title="link.title"
+                    style="white-space: nowrap;color: #999999;font-size: 14rem;display: inline-block;"
+                  >
+                    <img
+                      :src="link.src"
+                      style="width: 14rem;height: 14rem;"
+                    >
+                    {{ link.title }}
+                    <span v-if="index != 4"> {{ link.value }}</span>
+                    <span
+                      v-else
+                      style="padding-left:100rem"
+                    > {{ link.value }}</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div style="margin-bottom: 20rem;font-size: 18rem;">
+            友情链接
+          </div>
+          <div style="display: flex;">
+            <div
+              v-for="item in outLinks"
+              :key="item.url"
+              style="width: 260rem;"
+            >
+              <a
+                target="_blank"
+                :href="item.url"
+                :title="item.title"
+                style="white-space: nowrap;color: #999999;font-size: 14rem;"
+              >
+                {{ item.title }}
+              </a>
+            </div>
+          </div> -->
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: flex-end;">
+          <div style="height: 86rem;"></div>
+          <div style="font-size: 18rem;line-height: 1">
+            扫描关注
+          </div>
+          <div style="height: 50rem;"></div>
+          <div style="display: flex;">
+            <div
+              v-for="(item, index) in codes"
+              :key="index"
+              style="margin-left: 40rem;width: 74rem;height: 74rem;"
+            >
+              <img
+                :src="item.src"
+                alt=""
+                style="width: 100%;height: 100%;"
+              >
+            </div>
+          </div>
+          <div style="flex: 1;"></div>
+          <!-- <div style="display: flex;align-items: center;color: #999999;font-size: 14rem;line-height: 1;">
+            <div>版权所有© 昊坤能源</div>
+            <div style="width: 1rem;height: 14rem;background-color: #999999;margin: 0 12rem;"></div>
+            <div>
+              <a
+                target="_blank"
+                href="https://beian.miit.gov.cn"
+                style="white-space: nowrap;color: #999999;"
+              >
+                京ICP备17007077号-1
+              </a>
+            </div>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    theme: { validator: v => ['dark', 'light'].includes(v), default: 'dark' },
+  },
+  data () {
+    return {
+      outLinks: [
+        { title: '中华人民共和国国务院', url: 'https://www.gov.cn/' },
+        { title: '中华人民共和国外交部', url: 'https://www.fmprc.gov.cn/' },
+        { title: '中华人民共和国商务部', url: 'https://www.mofcom.gov.cn/' },
+        { title: '中华人民共和国国家发展和改革委员会', url: 'https://www.ndrc.gov.cn/' },
+      ],
+      navLinks: [
+        {
+          title: '关于我们',
+          children: [
+            { title: '简介', path: '/recruit/beautifulHk', hash: 'develop-bar' },
+            { title: '使命', path: '/recruit/beautifulHk', hash: 'work-bar' },
+            { title: '远景', path: '/recruit/beautifulHk', hash: 'life-bar' },
+            { title: '价值观', path: '/recruit/socialRecruit' },
+          ],
+        },
+        {
+          title: '业务领域',
+          children: [
+            { title: '资本服务', path: '/business/petrochemical' },
+            { title: '高薪技术', path: '/business/gas' },
+            { title: '能源环保', path: '/business/ironOre' },
+            { title: '全球供应链', path: '/business/construction' },
+            { title: '商业管理', path: '/business/construction' },
+            { title: '健康产业', path: '/business/construction' },
+            { title: '基础设施', path: '/business/construction' },
+            { title: '未来农业', path: '/business/construction' },
+          ],
+        },
+        {
+          title: '新闻咨询',
+          children: [
+            { title: '公告通知', path: '/' },
+            { title: '公司咨询', path: '/' },
+            { title: '政策法规', path: '/' },
+            { title: '行业动态', path: '/newsTrend' },
+          ],
+        },
+        {
+          title: '投资与合作',
+          children: [
+            { title: '投资者', path: '/' },
+            { title: '合作邀约', path: '/' },
+            { title: '合作伙伴', path: '/' },
+          ],
+        },
+        {
+          title: '人才招募',
+          children: [
+            { title: '人才战略', path: '/' },
+            { title: '招募信息', path: '/' },
+          ],
+        },
+      ],
+      contacts: [
+        {
+          title: '联系我们',
+          children: [
+            { title: '热线电话：', value: '+86 400-900-6725', src: '/static/img/foot/icon-phone.png' },
+            { title: '公司网址：', value: 'www.FutureStar.Ltd', src: '/static/img/foot/icon-website.png' },
+            { title: '总部地址：', value: '海南省三亚市天涯区育春路7巷9号', src: '/static/img/foot/icon-address.png' },
+            { title: '北京地址：', value: '北京市朝阳区王四营甲6号观音堂', src: '/static/img/foot/icon-address.png' },
+            { title: '', value: '文化大道117号', src: '/' },
+          ],
+        },
+      ],
+      codes: [
+        { src: '/static/img/foot/code1.png' },
+        // { src: '/static/img/foot/code2.png' },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.foot-bar-light {
+  color: #000000;
+  background: #F5F5F7;
+}
+.foot-bar-dark {
+  color: #FFFFFF;
+  background: #405176;
+}
+.foot-bar {
+  padding: 80rem 0 60rem;
+}
+a:hover {
+  color: #FFD100 !important;
+  text-decoration: none;
+}
+</style>

src/components/NavBar.vue

@@ -0,0 +1,298 @@
+<template>
+  <div
+    class="nav-bar-wrapper"
+    :class="{
+      'nav-bar-shadow': shadow,
+    }"
+    :style="{ backgroundColor: bgColor }"
+  >
+    <div
+      class="nav-bar"
+      :class="'nav-bar-' + theme"
+    >
+      <div class="nav-left">
+        <div
+          class="logo-wrapper"
+          @click="$router.push('/')"
+        >
+          <img
+            :src="'/static/img/logo-' + theme +'.png'"
+            alt=""
+            style="height: 100%;"
+          />
+        </div>
+      </div>
+      <div class="nav-center">
+        <div class="nav-menus">
+          <div
+            v-for="menu in menus"
+            :key="menu.path"
+            class="nav-menu"
+            :class="{ 'current-route': $route.path.startsWith(menu.path) && menu.path !== '/' }"
+            @click.stop="menu.children || $router.push(menu.path)"
+          >
+            <span>{{ menu.title }}</span>
+            <div
+              class="nav-submenus"
+              v-if="menu.children"
+            >
+              <div>
+                <div
+                  v-for="childMenu in menu.children"
+                  :key="childMenu.title + childMenu.path"
+                  class="nav-submenu"
+                  :class="{ 'current-route': $route.path === childMenu.path }"
+                  @click.stop="$router.push({path:childMenu.path, hash: childMenu?.hash || ''} )"
+                >
+                  <span>{{ childMenu.title }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="nav-right">
+        <div class="qr-codes">
+          <div
+            v-for="qr in qrs"
+            :key="qr.icon"
+            class="qr-code"
+            v-on="qr.listeners"
+          >
+            <img
+              :src="qr.icon"
+              alt=""
+            />
+            <img
+              class="weixin"
+              src="/static/img/foot/code1.png"
+            >
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    theme: { validator: v => ['dark', 'light'].includes(v), default: 'dark' },
+    bgColor: { type: String, default: '#ffffff00' },
+    shadow: { type: Boolean, default: false },
+  },
+  data () {
+    return {
+      menus: [
+        {
+          title: '首页',
+          path: '/',
+        },
+        {
+          title: '关于我们',
+          children: [
+            { title: '简介', path: '/recruit/beautifulHk' },
+            { title: '使命', path: '/recruit/beautifulHk' },
+            { title: '远景', path: '/recruit/beautifulHk' },
+            { title: '价值观', path: '/recruit/socialRecruit' },
+          ],
+        },
+        {
+          title: '业务领域',
+          children: [
+            { title: '资本服务', path: '/business/petrochemical' },
+            { title: '高薪技术', path: '/business/gas' },
+            { title: '能源环保', path: '/business/ironOre' },
+            { title: '全球供应链', path: '/business/construction' },
+            { title: '商业管理', path: '/business/construction' },
+            { title: '健康产业', path: '/business/construction' },
+            { title: '基础设施', path: '/business/construction' },
+            { title: '未来农业', path: '/business/construction' },
+          ],
+        },
+        {
+          title: '投资与合作',
+          children: [
+            { title: '投资者', path: '/' },
+            { title: '合作邀约', path: '/' },
+            { title: '合作伙伴', path: '/' },
+          ],
+        },
+        {
+          title: '人才招募',
+          children: [
+            { title: '人才战略', path: '/' },
+            { title: '招募信息', path: '/' },
+          ],
+        },
+        {
+          title: '联系我们',
+          path: '/',
+        },
+      ],
+    };
+  },
+  computed: {
+    qrs () {
+      return [
+        { icon: '/static/img/nav/icon-wechat-' + this.theme + '.png' },
+        { icon: '/static/img/nav/icon-email-' + this.theme + '.png', listeners: { click: this.handlePost } },
+        { icon: '/static/img/nav/icon-earth-' + this.theme + '.png' },
+      ];
+    },
+  },
+  methods: {
+    handlePost () {
+      const a = document.createElement('a');
+      a.href = 'mailto:why@shtril.com';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.nav-bar-wrapper {
+  width: 100%;
+}
+.nav-bar-shadow {
+  box-shadow: 0 5rem 20rem #00000016;
+}
+.nav-bar {
+  width: 1920rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 28rem 60rem;
+  box-sizing: border-box;
+  transition: background-color .3s;
+}
+.nav-left {
+  width: 0;
+  flex: 1;
+}
+.logo-wrapper {
+  height: 76rem;
+  cursor: pointer;
+}
+.nav-menus {
+  display: flex;
+}
+.nav-center {
+  padding-left: 300rem;
+  box-sizing: border-box;
+}
+.nav-menu {
+  font-family: MicrosoftYaHeiLight;
+  font-weight: 300;
+  font-size: 16rem;
+  line-height: 76rem;
+  cursor: pointer;
+  position: relative;
+}
+.nav-menu:not(:last-of-type) {
+  margin-right: 100rem;
+}
+.nav-menu:hover::after {
+  content: '';
+  position: absolute;
+  bottom: 20rem;
+  left: 0;
+  width: 100%;
+  height: 2rem;
+  background-color: #F0D145;
+}
+.nav-submenus {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  padding: 10rem 0;
+  display: none;
+}
+.nav-submenus > div {
+  padding: 10rem 30rem;
+  border-radius: 4rem;
+  box-shadow: 0 5rem 20rem #00000016;
+}
+.nav-submenu {
+  font-size: 14rem;
+  line-height: 42rem;
+  text-align: center;
+  white-space: nowrap;
+}
+.nav-menu:hover .nav-submenus {
+  display: block;
+}
+.nav-right {
+  width: 0;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+/* theme-dark --- start */
+.nav-bar-dark {
+  color: #ffffff;
+}
+.nav-bar-dark .nav-submenus > div {
+  background-color: rgba(255, 255, 255, 0.98);
+}
+.nav-bar-dark .nav-submenu {
+  color: rgba(17, 17, 17, 0.6);
+}
+.nav-bar-dark .nav-submenu:hover {
+  color: rgba(17, 17, 17, 1);
+}
+.nav-bar-dark .nav-submenu.current-route {
+  color: rgba(17, 17, 17, 1);
+}
+.nav-bar-dark .nav-submenu:not(:last-child) {
+  border-bottom: 1rem solid rgba(0, 0, 0, 0.1);
+}
+/* theme-dark --- end */
+/* theme-light --- start */
+.nav-bar-light {
+  color: #111111;
+}
+.nav-bar-light .nav-submenus > div {
+  background-color: rgba(255, 255, 255, 0.98);
+}
+.nav-bar-light .nav-submenu {
+  color: rgba(17, 17, 17, 0.6);
+}
+.nav-bar-light .nav-submenu:hover {
+  color: rgba(17, 17, 17, 1);
+}
+.nav-bar-light .nav-submenu.current-route {
+  color: rgba(17, 17, 17, 1);
+}
+.nav-bar-light .nav-submenu:not(:last-child) {
+  border-bottom: 1rem solid rgba(0, 0, 0, 0.1);
+}
+/* theme-light --- end */
+.qr-codes {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.qr-code {
+  cursor: pointer;
+}
+.qr-code + .qr-code {
+  margin-left: 69rem;
+}
+.weixin{
+  width: 71rem;
+  position: absolute;
+  top:50rem;
+  display: none;
+}
+.qr-codes .qr-code:last-child {
+  margin-left: 59rem;
+}
+.qr-codes .qr-code:first-child:hover .weixin{
+  display: block;
+}
+</style>

src/components/NextPage.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="next-page"
+    @click="$emit('click')"
+  >
+    <div
+      style="font-size: 16rem;padding-right: 8rem;color: #ffffff;"
+      class=""
+    >
+      向下滑动翻页
+    </div>
+    <div
+      style="height: 22rem;width: 13rem;"
+      class="relative animate-bounce"
+    >
+      <i
+        class="el-icon-arrow-down"
+        style="position: absolute;top: 0;opacity: 0.6;"
+      ></i>
+      <i
+        class="el-icon-arrow-down"
+        style="position: absolute;bottom: 0;"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style scoped>
+.next-page {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #ffffff;
+}
+.relative {
+  position: relative;
+}
+.animate-bounce{
+  animation:bounce 1s infinite;
+}
+@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
+svg{display:inline}
+.opacity-60{opacity:.6}
+.top-0{top:0rem}
+.absolute{position:absolute}
+.bottom-0{bottom:0rem}
+.align-\[-0\.15em\]{vertical-align:-.15em}
+.fill-current{fill:#ffffff}
+.overflow-hidden{overflow:hidden}
+</style>

src/core/eventBus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+Vue.prototype.$event = new Vue();

src/core/extends.js

@@ -0,0 +1,32 @@
+Object.isObject = function (target) {
+  return target !== null && typeof target === 'object' && target.toString() === '[object Object]';
+};
+
+Object.deepAssign = function (...resources) {
+  let res;
+  for (let i = 0; i < resources.length;) {
+    const resource = resources[i];
+    if (Object.isObject(resource)) {
+      i++;
+    } else {
+      res = resources.splice(0, i + 1).reverse()[0];
+      i = 0;
+      continue;
+    }
+  }
+  if (resources.length === 0) {
+    return res;
+  } else if (resources.length === 1) {
+    return resources[0];
+  }
+  const allKeys = [...new Set(resources.flatMap(resource => Object.keys(resource)))];
+  res = {};
+  allKeys.forEach(key => {
+    res[key] = Object.deepAssign(
+      ...resources
+        .filter(resource => Object.prototype.hasOwnProperty.call(resource, key))
+        .map(resource => resource[key]),
+    );
+  });
+  return res;
+};

src/core/index.js

@@ -0,0 +1,5 @@
+import './extends';
+import './resize';
+import './request';
+import './prototype';
+import './eventBus';