Initial commit

.babelrc

+{
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

.editorconfig

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# Mac OSX
+.DS_Store
+
+# Vim swap files
+*.swp

README.md

+# beyond-clouds-front
+
+> beyond-clouds project 
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

action/config.js

+export default  {
+  ip:'http://localhost:8081/',
+
+  api:{
+    get:{
+      user:{
+        getAllUsers:'users',
+      },
+    },
+  },
+  default_data: {
+
+
+  }
+}

action/request.js

+
+import config from './config';
+import axios from 'axios';
+const baseUrl = config.ip;
+import state from '../store/state';
+
+/**
+ * ajax请求封装
+ * @param url
+ * @param options
+ * @returns {Promise<any>}
+ */
+const requests = (url, options) => {
+
+
+  const defaultHeaders = {
+    "Content-Type": "application/json"
+  };
+  let  accessToken = state().token;
+  if (accessToken) {
+    defaultHeaders.token = accessToken;
+  }
+  const {
+    method = "GET",
+    headers = options.headers||defaultHeaders,
+    data = {} } = options;
+  const upperMethod = method.toUpperCase();
+  let body = data;
+
+  return new Promise((resolve) => {
+    axios( {
+        url:`${baseUrl}${url}`,
+        timeout: 6000,
+        method:upperMethod,
+        headers:headers,
+        data:body,
+      }
+    ).then(res=> resolve(res.data))
+      .catch(err => {
+        console.log(err)
+
+      })
+  })
+};
+
+/**
+ * get请求
+ * @param url
+ * @returns {Promise<any>}
+ */
+const get = (url) => {
+  return requests(url, {
+    method: "get"
+  });
+};
+
+/**
+ * delete请求
+ * @param url
+ * @returns {Promise<any>}
+ */
+const del = (url, data) => {
+  return requests(url, {
+    method: "DELETE",
+    data
+
+  });
+};
+
+/**
+ * post请求
+ * @param url
+ * @param data
+ * @returns {Promise<any>}
+ */
+const post = (url, data,headers) => {
+  return requests(url, {
+    method: "post",
+    data,headers
+  })
+};
+
+/**
+ * put请求
+ * @param url
+ * @param data
+ * @returns {Promise<any>}
+ */
+const put = (url, data) => {
+  return requests(url, {
+    method: "PUT",
+    data
+  })
+};
+
+export { requests, get, post, del, put }

action/utils/aria-dialog.js

+import Utils from './aria-utils';
+
+/**
+ * @constructor
+ * @desc Dialog object providing modal focus management.
+ *
+ * Assumptions: The element serving as the dialog container is present in the
+ * DOM and hidden. The dialog container has role='dialog'.
+ *
+ * @param dialogId
+ *          The ID of the element serving as the dialog container.
+ * @param focusAfterClosed
+ *          Either the DOM node or the ID of the DOM node to focus when the
+ *          dialog closes.
+ * @param focusFirst
+ *          Optional parameter containing either the DOM node or the ID of the
+ *          DOM node to focus when the dialog opens. If not specified, the
+ *          first focusable element in the dialog will receive focus.
+ */
+var aria = aria || {};
+var tabEvent;
+
+aria.Dialog = function(dialog, focusAfterClosed, focusFirst) {
+  this.dialogNode = dialog;
+  if (this.dialogNode === null || this.dialogNode.getAttribute('role') !== 'dialog') {
+    throw new Error('Dialog() requires a DOM element with ARIA role of dialog.');
+  }
+
+  if (typeof focusAfterClosed === 'string') {
+    this.focusAfterClosed = document.getElementById(focusAfterClosed);
+  } else if (typeof focusAfterClosed === 'object') {
+    this.focusAfterClosed = focusAfterClosed;
+  } else {
+    this.focusAfterClosed = null;
+  }
+
+  if (typeof focusFirst === 'string') {
+    this.focusFirst = document.getElementById(focusFirst);
+  } else if (typeof focusFirst === 'object') {
+    this.focusFirst = focusFirst;
+  } else {
+    this.focusFirst = null;
+  }
+
+  if (this.focusFirst) {
+    this.focusFirst.focus();
+  } else {
+    Utils.focusFirstDescendant(this.dialogNode);
+  }
+
+  this.lastFocus = document.activeElement;
+  tabEvent = (e) => {
+    this.trapFocus(e);
+  };
+  this.addListeners();
+};
+
+aria.Dialog.prototype.addListeners = function() {
+  document.addEventListener('focus', tabEvent, true);
+};
+
+aria.Dialog.prototype.removeListeners = function() {
+  document.removeEventListener('focus', tabEvent, true);
+};
+
+aria.Dialog.prototype.closeDialog = function() {
+  this.removeListeners();
+  if (this.focusAfterClosed) {
+    setTimeout(() => {
+      this.focusAfterClosed.focus();
+    });
+  }
+};
+
+aria.Dialog.prototype.trapFocus = function(event) {
+  if (Utils.IgnoreUtilFocusChanges) {
+    return;
+  }
+  if (this.dialogNode.contains(event.target)) {
+    this.lastFocus = event.target;
+  } else {
+    Utils.focusFirstDescendant(this.dialogNode);
+    if (this.lastFocus === document.activeElement) {
+      Utils.focusLastDescendant(this.dialogNode);
+    }
+    this.lastFocus = document.activeElement;
+  }
+};
+
+export default aria.Dialog;

action/utils/aria-utils.js

+var aria = aria || {};
+
+aria.Utils = aria.Utils || {};
+
+/**
+ * @desc Set focus on descendant nodes until the first focusable element is
+ *       found.
+ * @param element
+ *          DOM node for which to find the first focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+aria.Utils.focusFirstDescendant = function(element) {
+  for (var i = 0; i < element.childNodes.length; i++) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Find the last descendant node that is focusable.
+ * @param element
+ *          DOM node for which to find the last focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+
+aria.Utils.focusLastDescendant = function(element) {
+  for (var i = element.childNodes.length - 1; i >= 0; i--) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Set Attempt to set focus on the current node.
+ * @param element
+ *          The node to attempt to focus on.
+ * @returns
+ *  true if element is focused.
+ */
+aria.Utils.attemptFocus = function(element) {
+  if (!aria.Utils.isFocusable(element)) {
+    return false;
+  }
+  aria.Utils.IgnoreUtilFocusChanges = true;
+  try {
+    element.focus();
+  } catch (e) {
+  }
+  aria.Utils.IgnoreUtilFocusChanges = false;
+  return (document.activeElement === element);
+};
+
+aria.Utils.isFocusable = function(element) {
+  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
+    return true;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden' && element.type !== 'file';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+};
+
+/**
+ * 触发一个事件
+ * mouseenter, mouseleave, mouseover, keyup, change, click 等
+ * @param  {Element} elm
+ * @param  {String} name
+ * @param  {*} opts
+ */
+aria.Utils.triggerEvent = function(elm, name, ...opts) {
+  let eventName;
+
+  if (/^mouse|click/.test(name)) {
+    eventName = 'MouseEvents';
+  } else if (/^key/.test(name)) {
+    eventName = 'KeyboardEvent';
+  } else {
+    eventName = 'HTMLEvents';
+  }
+  const evt = document.createEvent(eventName);
+
+  evt.initEvent(name, ...opts);
+  elm.dispatchEvent
+    ? elm.dispatchEvent(evt)
+    : elm.fireEvent('on' + name, evt);
+
+  return elm;
+};
+
+aria.Utils.keys = {
+  tab: 9,
+  enter: 13,
+  space: 32,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  esc: 27
+};
+
+export default aria.Utils;

action/utils/dom.js

+/* istanbul ignore next */
+
+import Vue from 'vue';
+
+const isServer = Vue.prototype.$isServer;
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+const ieVersion = isServer ? 0 : Number(document.documentMode);
+
+/* istanbul ignore next */
+const trim = function(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+/* istanbul ignore next */
+const camelCase = function(name) {
+  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+    return offset ? letter.toUpperCase() : letter;
+  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+};
+
+/* istanbul ignore next */
+export const on = (function() {
+  if (!isServer && document.addEventListener) {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const off = (function() {
+  if (!isServer && document.removeEventListener) {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const once = function(el, event, fn) {
+  var listener = function() {
+    if (fn) {
+      fn.apply(this, arguments);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+};
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+};
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+};
+
+/* istanbul ignore next */
+export const getStyle = ieVersion < 9 ? function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'styleFloat';
+  }
+  try {
+    switch (styleName) {
+      case 'opacity':
+        try {
+          return element.filters.item('alpha').opacity / 100;
+        } catch (e) {
+          return 1.0;
+        }
+      default:
+        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
+    }
+  } catch (e) {
+    return element.style[styleName];
+  }
+} : function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'cssFloat';
+  }
+  try {
+    var computed = document.defaultView.getComputedStyle(element, '');
+    return element.style[styleName] || computed ? computed[styleName] : null;
+  } catch (e) {
+    return element.style[styleName];
+  }
+};
+
+/* istanbul ignore next */
+export function setStyle(element, styleName, value) {
+  if (!element || !styleName) return;
+
+  if (typeof styleName === 'object') {
+    for (var prop in styleName) {
+      if (styleName.hasOwnProperty(prop)) {
+        setStyle(element, prop, styleName[prop]);
+      }
+    }
+  } else {
+    styleName = camelCase(styleName);
+    if (styleName === 'opacity' && ieVersion < 9) {
+      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
+    } else {
+      element.style[styleName] = value;
+    }
+  }
+};
+
+export const isScroll = (el, vertical) => {
+  if (isServer) return;
+
+  const determinedDirection = vertical !== null || vertical !== undefined;
+  const overflow = determinedDirection
+    ? vertical
+      ? getStyle(el, 'overflow-y')
+      : getStyle(el, 'overflow-x')
+    : getStyle(el, 'overflow');
+
+  return overflow.match(/(scroll|auto)/);
+};
+
+export const getScrollContainer = (el, vertical) => {
+  if (isServer) return;
+
+  let parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window;
+    }
+    if (isScroll(parent, vertical)) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+
+  return parent;
+};
+
+export const isInContainer = (el, container) => {
+  if (isServer || !el || !container) return false;
+
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  } else {
+    containerRect = container.getBoundingClientRect();
+  }
+
+  return elRect.top < containerRect.bottom &&
+    elRect.bottom > containerRect.top &&
+    elRect.right > containerRect.left &&
+    elRect.left < containerRect.right;
+};

action/utils/merge.js

+export default function(target) {
+  for (let i = 1, j = arguments.length; i < j; i++) {
+    let source = arguments[i] || {};
+    for (let prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        let value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+};

action/utils/vdom.js

+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+function hasOwn(obj, key) {
+  return hasOwnProperty.call(obj, key);
+};
+
+export function isVNode(node) {
+  return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');
+};

assets/base.scss

+@import 'common.scss';
+
+

assets/common.scss

+@import './reset.scss';  //样式重置
+
+
+
+//变量
+$length:1px;
+$font-size:1px;
+$fontColor:rgba(255,255,255,0.6);
+$fontColorHover:rgba(255,255,255,1);
+$bgImage:linear-gradient(#EDF5F8,#FAFAFA);
+$pageWidth:1256*$length;
+
+$index1:100;
+$index2:200;
+$index3:300;
+$index4:400;
+$index5:500;
+
+//混合
+@mixin fontStyle($value1,$value2,$value3,$value4,$value5){
+  font-size:$value1*$font-size;
+  height:$value2*$length;
+  line-height: $value2*$length;
+  font-weight: $value3;
+  color:$value4;
+  text-align: $value5;
+}
+
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -ms-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+@mixin transform($value) {
+  transform:$value;
+  -webkit-transform:$value;
+  -moz-transform:$value;
+  -ms-transform:$value;
+  -o-transform:$value;
+}
+@mixin transition($value) {
+  transition:$value;
+  -webkit-transition:$value;
+  -moz-transition:$value;
+  -ms-transition:$value;
+}
+@mixin box-shadow($value){
+  box-shadow:$value;
+  -webkit-box-shadow: $value;
+  -ms-box-shadow: $value;
+  -moz-box-shadow: $value;
+}
+@mixin filter($value){
+  -webkit-filter: $value;
+  -moz-filter: $value;
+  -ms-filter: $value;
+  filter: $value;
+}
+
+
+//继承
+%flex-column-center{
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+}
+%flex-column-spb{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  align-items:center;
+}
+%flex-row-center{
+  display:flex;
+  flex-direction:row;
+  justify-content:center;
+  align-items:center;
+}
+%flex-row-spb{
+  display:flex;
+  flex-direction:row;
+  justify-content:space-between;
+  align-items:center;
+}
+%animate-transition{
+  transition:.6s ease;
+}
+%cursorPointer{
+  cursor:pointer
+}
+
+
+//文字超出不换行
+%nowrap{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+//行内元素垂直居中
+%inlineBlockV{
+  &:before{
+    content:'';
+    display: inline-block;
+    height:100%;
+    vertical-align: middle;
+  }
+}
+
+//清除浮动
+%clearFix{
+  &:after {
+    visibility: hidden;
+    clear: both;
+    display: block;
+    content: ".";
+    height: 0
+  }
+
+  & {
+    *zoom: 1
+  }
+}
+
+//定义一些过渡
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}

assets/font/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1578735288924'); /* IE9 */
+  src: url('iconfont.eot?t=1578735288924#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1578735288924') format('woff'),
+  url('iconfont.ttf?t=1578735288924') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1578735288924#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.yun-icon--info:before {
+  content: "\e63f";
+}
+
+.yun-icon--warning:before {
+  content: "\e62f";
+}
+
+.yun-icon--success:before {
+  content: "\e61c";
+}
+
+.yun-icon--error:before {
+  content: "\e660";
+}
+
+.yun-icon--add:before {
+  content: "\e603";
+}
+
+.yun-icon--volume:before {
+  content: "\e604";
+}
+
+.yun-icon--call:before {
+  content: "\e605";
+}
+
+.yun-icon--visible:before {
+  content: "\e606";
+}
+
+.yun-icon--view:before {
+  content: "\e607";
+}
+
+.yun-icon--close1:before {
+  content: "\e608";
+}
+
+.yun-icon--video:before {
+  content: "\e609";
+}
+
+.yun-icon--close2:before {
+  content: "\e60a";
+}
+
+.yun-icon--top:before {
+  content: "\e60b";
+}
+
+.yun-icon--comment:before {
+  content: "\e60c";
+}
+
+.yun-icon--star:before {
+  content: "\e60d";
+}
+
+.yun-icon--crown:before {
+  content: "\e60e";
+}
+
+.yun-icon--share:before {
+  content: "\e60f";
+}
+
+.yun-icon--down_arrow:before {
+  content: "\e610";
+}
+
+.yun-icon--sex_woman:before {
+  content: "\e611";
+}
+
+.yun-icon--download:before {
+  content: "\e612";
+}
+
+.yun-icon--sex_man:before {
+  content: "\e613";
+}
+
+.yun-icon--emoji:before {
+  content: "\e614";
+}
+
+.yun-icon--search:before {
+  content: "\e615";
+}
+
+.yun-icon--fullScreen:before {
+  content: "\e616";
+}
+
+.yun-icon--scrollTo_top:before {
+  content: "\e618";
+}
+
+.yun-icon--home:before {
+  content: "\e617";
+}
+
+.yun-icon--hot:before {
+  content: "\e619";
+}
+
+.yun-icon--project:before {
+  content: "\e61a";
+}
+
+.yun-icon--img:before {
+  content: "\e61b";
+}
+
+.yun-icon--play:before {
+  content: "\e61d";
+}
+
+.yun-icon--invisible:before {
+  content: "\e61e";
+}
+
+.yun-icon--phone:before {
+  content: "\e61f";
+}
+
+.yun-icon--notification:before {
+  content: "\e620";
+}
+
+.yun-icon--left_arrow:before {
+  content: "\e621";
+}
+
+.yun-icon--like_egg:before {
+  content: "\e622";
+}
+
+.yun-icon--message:before {
+  content: "\e623";
+}
+
+.yun-icon--like1:before {
+  content: "\e624";
+}
+
+.yun-icon--mail:before {
+  content: "\e625";
+}
+
+.yun-icon--like2:before {
+  content: "\e626";
+}
+
+.yun-icon--link:before {
+  content: "\e627";
+}
+

assets/reset.scss

+
+input{
+  outline:none;
+  box-sizing:border-box;
+  border:none;
+}
+textarea{
+  outline:none;
+  box-sizing:border-box;
+  border:none;
+}
+/* 清除默认样式 start */
+blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
+  margin: 0;
+  padding: 0
+}
+body, button, input, select, textarea {
+  font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
+}
+
+address, cite, dfn, em, var {
+  font-style: normal;
+}
+
+code, kbd, pre, samp {
+  font-family: courier new, courier, monospace;
+}
+
+ol, ul, li {
+  list-style: none;
+}
+
+input {
+  border: 0;
+  outline: none;
+}
+
+fieldset, img {
+  border: 0;
+}
+img {
+  vertical-align: top;
+}
+button {
+  border-radius: 0;
+  outline: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
+body, html {
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",
+  Roboto,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",
+  "Helvetica Neue","Helvetica",Arial,"Monaco","Menlo","Consolas",sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+a:hover , a:active , a:focus {
+  text-decoration: none;
+  color: black;
+}
+i, em {
+  font-style: normal;
+}
+b {
+  font-weight: normal;
+}
+u {
+  text-decoration: none;
+}

assets/svg/500.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="196" height="196" viewBox="0 0 196 196">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#00aae6"/>
+      <stop offset="1" stop-color="#005573"/>
+    </linearGradient>
+  </defs>
+  <g id="组_5209" data-name="组 5209" transform="translate(-862 -414)">
+    <circle id="椭圆_203" data-name="椭圆 203" cx="98" cy="98" r="98" transform="translate(862 414)" fill="url(#linear-gradient)"/>
+    <circle id="椭圆_205" data-name="椭圆 205" cx="3" cy="3" r="3" transform="translate(1011 457)" fill="#fff" opacity="0.1"/>
+    <circle id="椭圆_206" data-name="椭圆 206" cx="2" cy="2" r="2" transform="translate(1044 501)" fill="#fff" opacity="0.6"/>
+    <circle id="椭圆_208" data-name="椭圆 208" cx="1" cy="1" r="1" transform="translate(1001 474)" fill="#fff" opacity="0.1"/>
+    <circle id="椭圆_209" data-name="椭圆 209" cx="1" cy="1" r="1" transform="translate(991 483)" fill="#fff"/>
+    <circle id="椭圆_210" data-name="椭圆 210" cx="2" cy="2" r="2" transform="translate(893 462)" fill="#fff"/>
+    <circle id="椭圆_211" data-name="椭圆 211" cx="1" cy="1" r="1" transform="translate(894 502)" fill="#fff"/>
+    <path id="交叉_1" data-name="交叉 1" d="M94.428,4875.936v-42.013L76.7,4825.059l-23.242,40.257q-3.571-1.825-6.97-3.93l23.044-39.911-.136-.069.23-.1,15.645-27.1a18,18,0,1,1,24.384,0l39.063,67.657q-3.416,2.071-7.007,3.864L118.02,4824.7l-17.591,8.795v42.477q-1.212.03-2.429.03Q96.206,4876,94.428,4875.936Zm-15.108-55.414-1.117,1.933,16.225,8.113v-16.342Zm21.109,9.618,16.088-8.045-.614-1.063-15.474-6.447Zm0-31.4v12.6l13,5.418-10.7-18.541A18.034,18.034,0,0,1,100.429,4798.736Zm-18.637,17.507,12.637-5.267v-12.251a18.332,18.332,0,0,1-2.227-.511Z" transform="translate(862 -4266)" fill="#fff"/>
+    <g id="组_5208" data-name="组 5208" transform="translate(804.718 408.001)">
+      <g id="组_5199" data-name="组 5199" transform="translate(108.103 34)">
+        <g id="组_5196" data-name="组 5196" opacity="0.3">
+          <path id="路径_5769" data-name="路径 5769" d="M186.037,56.908a3.835,3.835,0,0,1-2.407-.847,65.51,65.51,0,0,0-81.829,0,3.856,3.856,0,0,1-4.817-6.023,73.217,73.217,0,0,1,91.464,0,3.858,3.858,0,0,1-2.411,6.869Z" transform="translate(-95.535 -34)" fill="#fff"/>
+        </g>
+        <g id="组_5197" data-name="组 5197" transform="translate(16.514 23.142)" opacity="0.2">
+          <path id="路径_5770" data-name="路径 5770" d="M161.568,62.28a3.833,3.833,0,0,1-2.233-.715,42.375,42.375,0,0,0-49.142,0,3.857,3.857,0,0,1-4.476-6.283,50.091,50.091,0,0,1,58.094,0,3.857,3.857,0,0,1-2.243,7Z" transform="translate(-104.099 -46)" fill="#fff"/>
+        </g>
+      </g>
+      <g id="组_5203" data-name="组 5203" transform="translate(82 60.102)">
+        <g id="组_5200" data-name="组 5200">
+          <path id="路径_5772" data-name="路径 5772" d="M101.053,141.9a3.848,3.848,0,0,1-3.014-1.448,73.217,73.217,0,0,1,0-91.464,3.856,3.856,0,0,1,6.023,4.817,65.51,65.51,0,0,0,0,81.829,3.857,3.857,0,0,1-3.008,6.266Z" transform="translate(-82 -47.535)" fill="#fff" opacity="0.3"/>
+        </g>
+        <g id="组_5201" data-name="组 5201" transform="translate(23.142 16.513)" opacity="0.1">
+          <path id="路径_5773" data-name="路径 5773" d="M106.427,117.43a3.855,3.855,0,0,1-3.145-1.618,50.091,50.091,0,0,1,0-58.094,3.857,3.857,0,0,1,6.283,4.476,42.375,42.375,0,0,0,0,49.142,3.856,3.856,0,0,1-3.138,6.094Z" transform="translate(-94 -56.098)" fill="#fff"/>
+        </g>
+      </g>
+      <g id="组_5207" data-name="组 5207" transform="translate(170.847 60.103)">
+        <g id="组_5204" data-name="组 5204" transform="translate(34.809)" opacity="0.1">
+          <path id="路径_5775" data-name="路径 5775" d="M149.976,141.9a3.857,3.857,0,0,1-3.008-6.266,65.51,65.51,0,0,0,0-81.829,3.856,3.856,0,0,1,6.023-4.817,73.217,73.217,0,0,1,0,91.464A3.848,3.848,0,0,1,149.976,141.9Z" transform="translate(-146.121 -47.535)" fill="#fff"/>
+        </g>
+        <g id="组_5205" data-name="组 5205" transform="translate(18.295 16.513)" opacity="0.1">
+          <path id="路径_5776" data-name="路径 5776" d="M141.411,117.43a3.856,3.856,0,0,1-3.138-6.094,42.375,42.375,0,0,0,0-49.142,3.857,3.857,0,0,1,6.283-4.476,50.091,50.091,0,0,1,0,58.094A3.855,3.855,0,0,1,141.411,117.43Z" transform="translate(-137.558 -56.098)" fill="#fff"/>
+        </g>
+      </g>
+    </g>
+    <path id="md-star" d="M20.8,22.4l2.55,1.538a.7.7,0,0,0,1.045-.759l-.674-2.9a.7.7,0,0,1,.224-.688L26.2,17.634a.7.7,0,0,0-.4-1.228l-2.968-.254a.7.7,0,0,1-.585-.426l-1.159-2.735a.7.7,0,0,0-1.291,0l-1.159,2.735a.7.7,0,0,1-.585.426l-2.968.254a.7.7,0,0,0-.4,1.228l2.252,1.952a.7.7,0,0,1,.224.688l-.675,2.9a.7.7,0,0,0,1.045.759L20.079,22.4A.7.7,0,0,1,20.8,22.4Z" transform="translate(1029.559 415.677)" fill="#00aae6"/>
+    <path id="md-star-2" data-name="md-star" d="M16.684,16.03l.9.542a.247.247,0,0,0,.368-.268l-.238-1.023a.247.247,0,0,1,.079-.243l.794-.688a.247.247,0,0,0-.141-.433l-1.046-.09a.247.247,0,0,1-.206-.15l-.409-.964a.247.247,0,0,0-.455,0l-.409.964a.247.247,0,0,1-.206.15l-1.046.09a.247.247,0,0,0-.141.433l.794.688a.248.248,0,0,1,.079.243l-.238,1.023a.247.247,0,0,0,.368.268l.9-.542A.247.247,0,0,1,16.684,16.03Z" transform="translate(984.444 425.392)" fill="#00aae6"/>
+  </g>
+</svg>

assets/svg/dingding.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="22.885" viewBox="0 0 18 22.885">
+  <path id="路径_5737" data-name="路径 5737" d="M164.983,58.925a4.245,4.245,0,0,1-.274.708h0l-.016.027c-.8,1.713-2.887,5.074-2.887,5.074a.125.125,0,0,0-.011-.021l-.61,1.064h2.94l-5.615,7.478,1.275-5.087h-2.313l.8-3.364c-.65.157-1.419.373-2.329.666,0,0-1.231.722-3.548-1.39,0,0-1.562-1.378-.656-1.723a26.906,26.906,0,0,1,3.038-.491c1.579-.214,2.55-.327,2.55-.327s-4.868.073-6.022-.109-2.62-2.112-2.932-3.808c0,0-.483-.931,1.038-.491s7.814,1.716,7.814,1.716-8.185-2.513-8.73-3.126a9.63,9.63,0,0,1-1.465-5.027.368.368,0,0,1,.488-.307s6.051,2.769,10.189,4.285S165.447,56.962,164.983,58.925Z" transform="translate(-147.023 -50.37)" fill="#497dfb"/>
+</svg>

assets/svg/qq.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="17.749" viewBox="0 0 15 17.749">
+  <g id="组_5227" data-name="组 5227" transform="translate(-77.989)">
+    <path id="路径_3410" data-name="路径 3410" d="M202.023,921.312a10.215,10.215,0,0,0-1.774.089,11.9,11.9,0,0,0-1.863-.089c-1.952,0-3.726.8-3.726,1.331s1.508.444,3.46.444a7.764,7.764,0,0,0,2.129-.266,14.566,14.566,0,0,0,2.04.177c1.952,0,3.46.089,3.46-.444S203.974,921.312,202.023,921.312Z" transform="translate(-114.648 -905.343)" fill="#efab1b"/>
+    <g id="组_5226" data-name="组 5226">
+      <g id="组_5225" data-name="组 5225">
+        <path id="路径_3411" data-name="路径 3411" d="M92.343,10.557c-.355-.976-.8-2.04-1.242-3.016v-.71C91.1,3.016,89.149,0,85.512,0s-5.589,3.016-5.589,6.831v.71c-.444.976-.887,2.04-1.242,3.016-.8,2.129-.8,3.992-.532,4.17.177.089.887-.621,1.6-1.774a5.446,5.446,0,0,0,5.767,4.791,5.386,5.386,0,0,0,5.767-4.879c.621,1.153,1.331,1.863,1.508,1.774.355-.089.266-2.04-.444-4.081Z" fill="#040000"/>
+        <path id="路径_3412" data-name="路径 3412" d="M269.156,127.96c-.532,0-.976.621-.976,1.419s.444,1.419.976,1.419.976-.621.976-1.419-.444-1.419-.976-1.419Zm3.016,0c-.532,0-.976.621-.976,1.331,0,.8.444,1.419.976,1.419s.976-.621.976-1.331c0-.8-.444-1.419-.976-1.419Zm2.04,6.21a23.791,23.791,0,0,1-7.1,0,5.847,5.847,0,0,0-.8,3.637c0,2.661,1.508,4.879,4.347,4.879s4.347-2.218,4.347-4.879A5.847,5.847,0,0,0,274.212,134.17Z" transform="translate(-185.063 -125.742)" fill="#fff"/>
+        <path id="路径_3413" data-name="路径 3413" d="M320.961,317.341c-1.863,0-3.46.355-3.46.71,0,.266,2.04,1.153,3.46,1.153s3.46-.887,3.46-1.153C324.332,317.7,322.824,317.341,320.961,317.341Z" transform="translate(-235.36 -311.84)" fill="#efab1b"/>
+        <path id="路径_3414" data-name="路径 3414" d="M160.393,429.946a19.27,19.27,0,0,1-5.5.71,18.4,18.4,0,0,1-5.5-.71c-.266.621-.532,1.331-.8,1.952a22.1,22.1,0,0,0,2.839.71v2.573a6.714,6.714,0,0,0,1.419.177,5.561,5.561,0,0,0,.976-.089v-2.4h1.065a22.653,22.653,0,0,0,6.388-.887A20.3,20.3,0,0,0,160.393,429.946Z" transform="translate(-69.381 -422.494)" fill="#db2920"/>
+      </g>
+      <path id="路径_3415" data-name="路径 3415" d="M425.431,184.262a.541.541,0,1,0,.444.532C425.786,184.529,425.608,184.262,425.431,184.262Zm3.105.355a.9.9,0,0,0-.621-.177c-.444.089-.621.266-.621.355,0,0-.089.177,0,.266s.177-.089.177-.089a.612.612,0,0,1,.444-.266,1.076,1.076,0,0,1,.444.089.125.125,0,1,0,.177-.177Z" transform="translate(-340.984 -181.069)" fill="#040000"/>
+    </g>
+  </g>
+</svg>

assets/svg/wechat.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14.679" viewBox="0 0 18 14.679">
+  <g id="组_5224" data-name="组 5224" transform="translate(-1145 -642)">
+    <path id="路径_3407" data-name="路径 3407" d="M203.225,254.7Zm5.814,4.968c0-2.547-2.547-4.626-5.409-4.626-3.033,0-5.418,2.079-5.418,4.626s2.385,4.626,5.418,4.626a8.207,8.207,0,0,0,1.908-.315l1.746.963-.477-1.593A4.867,4.867,0,0,0,209.039,259.673Zm-7.173-.8a.687.687,0,0,1-.639-.639.7.7,0,0,1,.639-.639.655.655,0,1,1,0,1.278Zm3.51,0a.679.679,0,0,1-.63-.639.686.686,0,0,1,.63-.639.655.655,0,1,1,0,1.278Z" transform="translate(953.961 391.732)" fill="#85df45"/>
+    <path id="路径_3409" data-name="路径 3409" d="M203.225,254.7c.207,0,.414.018.612.036-.549-2.565-3.294-4.473-6.426-4.473-3.5,0-6.372,2.385-6.372,5.418a5.235,5.235,0,0,0,2.547,4.3l-.639,1.917,2.232-1.116a11.21,11.21,0,0,0,2.232.315q.3,0,.594-.027a4.675,4.675,0,0,1-.2-1.332A5.221,5.221,0,0,1,203.225,254.7Zm-3.429-1.728a.8.8,0,1,1,0,1.593.809.809,0,1,1,0-1.593Zm-4.455,1.593a.811.811,0,1,1,0-1.593.8.8,0,0,1,0,1.593Z" transform="translate(953.961 391.732)" fill="#85dd45"/>
+  </g>
+</svg>

assets/svg/weibo.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16.532" viewBox="0 0 20 16.532">
+  <g id="组_4882" data-name="组 4882" transform="translate(-354 -484)">
+    <path id="a" d="M10.521,12.524a3.227,3.227,0,0,1-1.763,1.708,3.4,3.4,0,0,1-2.5.137,2.538,2.538,0,0,1-1.646-1.441,2.463,2.463,0,0,1,.072-2.135A3.335,3.335,0,0,1,6.376,9.21a3.457,3.457,0,0,1,2.349-.216,2.644,2.644,0,0,1,1.768,1.361,2.406,2.406,0,0,1,.028,2.169Zm-2.99.159a.963.963,0,0,0,.123-.786.847.847,0,0,0-.5-.57,1.115,1.115,0,0,0-.814-.011,1.23,1.23,0,0,0-.669.524.964.964,0,0,0-.145.78A.845.845,0,0,0,6,13.2a1.063,1.063,0,0,0,.831.029,1.291,1.291,0,0,0,.7-.541ZM8.58,11.305a.351.351,0,0,0,.039-.3.322.322,0,0,0-.2-.211.463.463,0,0,0-.558.216q-.19.353.145.513a.452.452,0,0,0,.323-.006.441.441,0,0,0,.245-.211Z" transform="translate(354 484)"/>
+    <path id="a-2" data-name="a" d="M18.632,1.784a5.3,5.3,0,0,1,1.255,2.534,5.317,5.317,0,0,1-.151,2.75.765.765,0,0,1-.379.456.7.7,0,0,1-.58.046.757.757,0,0,1-.446-.387.78.78,0,0,1-.056-.592,3.785,3.785,0,0,0,.112-1.959,3.73,3.73,0,0,0-.893-1.8,3.613,3.613,0,0,0-1.651-1.087,3.748,3.748,0,0,0-1.93-.1.731.731,0,0,1-.58-.108.757.757,0,0,1-.335-.5A.754.754,0,0,1,13.1.457a.746.746,0,0,1,.485-.336,5.226,5.226,0,0,1,2.722.131,5.09,5.09,0,0,1,2.321,1.532Zm-3.146,1.11a2.48,2.48,0,0,1,1.127.746,2.625,2.625,0,0,1,.608,1.236,2.579,2.579,0,0,1-.073,1.338.661.661,0,0,1-.329.387.629.629,0,0,1-.5.045.655.655,0,0,1-.379-.336A.666.666,0,0,1,15.9,5.8a1.229,1.229,0,0,0-.268-1.264,1.182,1.182,0,0,0-1.194-.4.653.653,0,0,1-.5-.091.589.589,0,0,1-.279-.421.673.673,0,0,1,.089-.507.62.62,0,0,1,.413-.29,2.509,2.509,0,0,1,1.328.063Zm0,0" transform="translate(354 484)" fill="#ff9a33"/>
+    <path id="a-3" data-name="a" d="M17.438,10.747a3.5,3.5,0,0,1-.413,1.589A5.621,5.621,0,0,1,15.81,13.9a9.391,9.391,0,0,1-1.88,1.338,10.3,10.3,0,0,1-2.522.945,12.676,12.676,0,0,1-3.018.353,12.359,12.359,0,0,1-3.068-.382,10.76,10.76,0,0,1-2.683-1.059,5.769,5.769,0,0,1-1.913-1.72A3.9,3.9,0,0,1,0,11.1,6.041,6.041,0,0,1,.775,8.31a12.622,12.622,0,0,1,2.2-2.938,11.254,11.254,0,0,1,3.81-2.688q1.924-.763,2.75.08.725.729.223,2.38a.347.347,0,0,0-.011.228.139.139,0,0,0,.112.08.463.463,0,0,0,.162-.006,1.2,1.2,0,0,0,.151-.04l.067-.023a7.044,7.044,0,0,1,2.745-.672,1.983,1.983,0,0,1,1.707.695,2.133,2.133,0,0,1,0,2.027,1.362,1.362,0,0,1-.05.228.121.121,0,0,0,.05.142.578.578,0,0,0,.134.085q.056.023.19.068a4.878,4.878,0,0,1,1.149.535,2.973,2.973,0,0,1,.892.928,2.426,2.426,0,0,1,.379,1.327ZM14,10.7a2.99,2.99,0,0,0-.993-1.936,5.446,5.446,0,0,0-2.326-1.242A8.324,8.324,0,0,0,7.62,7.285,7.551,7.551,0,0,0,3.5,8.9a3.426,3.426,0,0,0-1.478,3.012,2.989,2.989,0,0,0,.993,1.936,5.439,5.439,0,0,0,2.326,1.241,8.312,8.312,0,0,0,3.063.239,7.551,7.551,0,0,0,4.123-1.612A3.427,3.427,0,0,0,14,10.7Z" transform="translate(354 484)" fill="#e6172d"/>
+  </g>
+</svg>

components/common/icon/index.js

+import YunIcon from './src/icon.vue';
+
+
+YunIcon.install =function (Vue) {
+  Vue.component(YunIcon.name,YunIcon)
+}
+
+
+export default YunIcon;

components/common/icon/src/icon.vue

+<template>
+  <i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:'middle'}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
+</template>
+
+<script>
+  export default {
+    name: 'yunIcon',
+
+    props: {
+      name: String,
+      size: Number,
+      color: String,
+      hoverColor:String,
+      canClick:{
+        type:Boolean,
+        default:true,
+      },
+    },
+
+    data(){
+      return{
+        prevColor:'',
+        nowColor:this.color,
+        cursor:this.canClick?'pointer':'auto'
+      }
+    },
+
+
+    methods:{
+      changeStyle1(){
+        this.prevColor=this.nowColor;
+        this.nowColor=this.hoverColor;
+      },
+      changeStyle2(){
+        this.hoverColor=this.nowColor;
+          this.nowColor=this.prevColor;
+      }
+    }
+  };
+</script>

components/common/input/index.js

+import YunInput from './src/input.vue';
+
+
+YunInput.install = function (Vue) {
+  Vue.component(YunInput.name,YunInput)
+}
+
+export default YunInput;

components/common/input/src/input.vue

+<template>
+  <div class="yun-input">
+    <!--前置内容-->
+    <input
+      ref="input"
+      @input="handleInput"
+      :value="value"
+      :placeholder="placeholder"
+      :style="{width:width,height:height}"
+      type="text">
+
+    <!--后置内容-->
+    <div class="input-after"  v-if="words" >
+      <span :style="{color:wordsColor}" class="words">{{words}}</span>
+    </div>
+    <div class="input-after" v-if="iconName">
+      <yun-icon :name="iconName"  :color="iconColor?iconColor:'#ccc'"  :hoverColor="iconHoverColor?iconHoverColor:'#F8A06F'"></yun-icon>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'yunInput',
+
+    props: {
+      value: [String, Number],
+      width:String,
+      height:String,
+
+      iconName:String,
+      iconColor:String,
+      iconHoverColor:String,
+
+      words:String,
+      wordsColor:String,
+      placeholder:String,
+    },
+
+    data(){
+      return{
+      }
+    },
+
+    computed:{
+      nativeInputValue() {
+        return this.value === null || this.value === undefined ? '' : String(this.value);
+      },
+    },
+
+
+    methods:{
+
+
+      getInput() {
+        return this.$refs.input;
+      },
+
+      setNativeInputValue() {
+        const input = this.getInput();
+        if (!input) return;
+
+        if (input.value === this.nativeInputValue) return;
+        input.value = this.nativeInputValue;
+      },
+
+      handleInput(event) {
+        // should not emit input during composition
+        // see: https://github.com/ElemeFE/element/issues/10516
+        if (this.isComposing) return;
+
+        // hack for https://github.com/ElemeFE/element/issues/8548
+        // should remove the following line when we don't support IE
+        if (event.target.value === this.nativeInputValue) return;
+        this.$emit('input', event.target.value);
+        this.$emit('change', event.target.value);
+        // ensure native input value is controlled
+        // see: https://github.com/ElemeFE/element/issues/12850
+        this.$nextTick(this.setNativeInputValue);
+      },
+    },
+
+    watch: {
+      nativeInputValue() {
+        this.setNativeInputValue();
+      },
+    },
+  };
+</script>
+
+
+<style lang="scss" scoped>
+  @import "../../../../assets/common";
+  .yun-input{
+    display: inline-block;
+    background-color:#F4F8FA;
+    border-radius:4*$length;
+    overflow: hidden;
+    text-align: left;
+    line-height: 1;
+    @extend %inlineBlockV;
+    > input {
+      background-color:#F4F8FA;
+      padding:9*$length 14*$length;
+      line-height: 1;
+      @include fontStyle(12,16,500,#999,start);
+      height:auto;
+    }
+
+    .input-after{
+      @extend %inlineBlockV;
+
+      height:100%;
+      display: inline-block;
+      padding-right:14*$length;
+      text-align: center;
+
+      .icon{
+        @extend %cursorPointer;
+      }
+      .words{
+        @extend %cursorPointer;
+        @include fontStyle(14,16,500,#666,start);
+      }
+
+
+    }
+  }
+</style>

components/common/message-box/index.js

+import MessageBox from './src/main';
+
+export default MessageBox;

components/common/message-box/src/main.js

+
+const defaults = {
+  title:'',
+  message: '',
+  type: '',
+  iconClass: '',
+  showInput: false,
+  showClose: true,
+  modalFade: true,
+  lockScroll: true,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  closeOnHashChange: true,
+  inputValue: '',
+  inputPlaceholder: '',
+  inputType: 'text',
+  inputPattern: null,
+  inputValidator: null,
+  inputErrorMessage: '',
+  showConfirmButton: true,
+  showCancelButton: true,
+  confirmButtonPosition: 'right',
+  confirmButtonHighlight: false,
+  cancelButtonHighlight: false,
+  confirmButtonText: '',
+  cancelButtonText: '',
+  confirmButtonClass: '',
+  cancelButtonClass: '',
+  customClass: '',
+  beforeClose: null,
+  dangerouslyUserHTMLString: false,
+  center: false,
+  roundButton: false,
+  distinguishCancelAndClose: false
+}
+
+
+import Vue from 'vue';
+import msgboxVue from './main.vue';
+
+
+import merge from '../../../../action/utils/merge';
+import { isVNode } from '../../../../action/utils/vdom';
+
+
+const MessageBoxConstructor = Vue.extend(msgboxVue);
+
+let currentMsg, instance;
+let msgQueue = [];
+
+const defaultCallback = action => {
+  if (currentMsg) {
+    let callback = currentMsg.callback;
+    if (typeof callback === 'function') {
+      if (instance.showInput) {
+        callback(instance.inputValue, action);
+      } else {
+        callback(action);
+      }
+    }
+    if (currentMsg.resolve) {
+      if (action === 'confirm') {
+        if (instance.showInput) {
+          currentMsg.resolve({ value: instance.inputValue, action });
+        } else {
+          currentMsg.resolve(action);
+        }
+      } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
+        currentMsg.reject(action);
+      }
+    }
+  }
+};
+
+const initInstance = () => {
+
+  instance = new MessageBoxConstructor({
+    el: document.createElement('div')
+  });
+  instance.callback = defaultCallback;
+};
+
+const showNextMsg = () => {
+  if (!instance) {
+    initInstance();
+  }
+  instance.action = '';
+
+  if (!instance.visible || instance.closeTimer) {
+    if (msgQueue.length > 0) {
+      currentMsg = msgQueue.shift();
+
+      let options = currentMsg.options;
+      for (let prop in options) {
+        if (options.hasOwnProperty(prop)) {
+          instance[prop] = options[prop];
+        }
+      }
+      if (options.callback === undefined) {
+        instance.callback = defaultCallback;
+      }
+
+      let oldCb = instance.callback;
+      instance.callback = (action, instance) => {
+        oldCb(action, instance);
+        showNextMsg();
+      };
+      if (isVNode(instance.message)) {
+        instance.$slots.default = [instance.message];
+        instance.message = null;
+      } else {
+        delete instance.$slots.default;
+      }
+      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
+        if (instance[prop] === undefined) {
+          instance[prop] = true;
+        }
+      });
+      document.body.appendChild(instance.$el);
+
+      Vue.nextTick(() => {
+        instance.visible = true;
+      });
+    }
+  }
+};
+
+const MessageBox = function(options, callback) {
+  if (Vue.prototype.$isServer) return;
+  if (typeof options === 'string' || isVNode(options)) {
+    options = {
+      message: options
+    };
+    if (typeof arguments[1] === 'string') {
+      options.title = arguments[1];
+    }
+  } else if (options.callback && !callback) {
+    callback = options.callback;
+  }
+
+
+
+  if (typeof Promise !== 'undefined') {
+    return new Promise((resolve, reject) => { // eslint-disable-line
+      msgQueue.push({
+        options: merge({}, defaults, MessageBox.defaults, options),
+        callback: callback,
+        resolve: resolve,
+        reject: reject
+      });
+
+      showNextMsg();
+    });
+  } else {
+    msgQueue.push({
+      options: merge({}, defaults, MessageBox.defaults, options),
+      callback: callback
+    });
+    showNextMsg();
+  }
+};
+
+MessageBox.setDefaults = defaults => {
+  MessageBox.defaults = defaults;
+};
+
+MessageBox.alert = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  } else if (title === undefined) {
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'alert',
+    closeOnPressEscape: false,
+    closeOnClickModal: false
+  }, options));
+};
+
+MessageBox.confirm = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  } else if (title === undefined) {
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'confirm',
+    showCancelButton: true
+  }, options));
+};
+
+MessageBox.prompt = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  } else if (title === undefined) {
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    showCancelButton: true,
+    showInput: true,
+    $type: 'prompt'
+  }, options));
+};
+
+MessageBox.close = () => {
+  instance.doClose();
+  instance.visible = false;
+  msgQueue = [];
+  currentMsg = null;
+};
+
+export default MessageBox;
+export { MessageBox };

components/common/message/index.js

+import Message from './src/main.js';
+
+
+export default Message;

components/common/message/src/main.js

+import Vue from 'vue';
+import Main from './main.vue';
+let MessageConstructor = Vue.extend(Main);
+
+let instance;
+let instances = [];
+let seed = 1;
+
+const Message = function (options) {
+  console.log(options);
+   if(Vue.prototype.$isServer) return;
+   options = options || {};
+   if(typeof options === 'string') {
+     options = {
+       message:options
+     }
+   }
+   let userOnClose = options.onClose;
+   let id = 'message+_' + seed++;
+
+   options.onClose = function () {
+     Message.close(id,userOnClose);
+   };
+   instance = new MessageConstructor({
+     data:options,
+   });
+   instance.id = id;
+  // if (isVNode(instance.message)) {
+  //   instance.$slots.default = [instance.message];
+  //   instance.message = null;
+  // }
+
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+
+  let verticalOffset = options.offset || 20;
+  instances.forEach(item =>{
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+
+  instance.verticalOffset = verticalOffset;
+  instance.visible = true;
+  instance.$el.style.zIndex = 2000;  // 后期需要传递
+  instances.push(instance);
+  return instance;
+
+};
+
+
+
+
+['success', 'warning', 'info', 'error'].forEach(type=>{
+  Message[type] = options =>{
+    if(typeof options === 'string'){
+      options = {
+        message: options,
+      }
+    }
+    options.type = type;
+    return Message(options)
+  }
+});
+
+
+Message.close = function (id,userOnClose) {
+  let len = instances.length;
+  let index = -1;
+  let removedHeight;
+  for(let i = 0; i<len; i++){
+    if (id === instances[i].id){
+      removedHeight = instances[i].$el.offsetHeight;
+      index = i;
+      if(typeof userOnClose === 'function'){
+        userOnClose(instances[i])
+      }
+
+      instances.splice(i,1);
+      break;
+    }
+  }
+
+  if(len <= 1 || index === -1 || index > instances.length - 1) return ;
+  for (let i = index ; i< len - 1; i++){
+    let dom = instances[i].$el;
+    dom.style['top'] =
+      parseInt(dom.style['top'], 10) - removedHeight -16 + 'px';
+  }
+};
+
+
+Message.closeAll = function () {
+  for(let i = instances.length - 1; i>=0; i--){
+    instances[i].close();
+  }
+}
+
+
+export default Message;
+
+

components/common/message/src/main.vue

+<template>
+  <transition name="yun-message-fade" @after-leave="handleAfterLeave">
+    <div
+      :class="[
+        'yun-message',
+        type && !iconClass ? `yun-message--${ type }`:'',
+        center ? 'is-center' : '',
+        showClose ? 'is-closable' : '',
+        customClass
+      ]"
+      :style = positionStyle
+      v-show="visible"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer"
+      role="alert"
+    >
+      <i :class="iconClass" v-if="iconClass"></i>
+      <i :class="typeClass" v-else></i>
+      <slot>
+        <p v-if="!dangerouslyUseHTMLString" class=" yun-message__content">{{message}}</p>
+        <div v-else v-html="message" class="yun-message__content"></div>
+      </slot>
+      <i v-if="showClose" class="yun-message__closeBtn yun-icon-close" @click="close"></i>
+    </div>
+  </transition>
+</template>
+
+
+<script>
+  import '../../../../assets/base.scss'
+
+  const typeMap = {
+    success:'success',
+    info:'info',
+    warning:'warning',
+    error:'error'
+  };
+
+
+  export default {
+    data(){
+      return {
+        visible:false,
+        message:'',
+        duration:3000,
+        type:'info',
+        iconClass:'',
+        customClass:'',
+        onClose:null,
+        showClose:false,
+        closed:false,
+        verticalOffset:20,
+        timer:null,
+        dangerouslyUseHTMLString:false,
+        center:false
+      }
+    },
+    methods: {
+
+      //
+      handleAfterLeave(){
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+
+      //  关闭消息
+      close(){
+        this.closed = true;
+        if(typeof this.onClose === 'function') {
+          this.onClose(this);
+        }
+      },
+
+
+      // 清除定时器
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+
+
+      // 消息定时关闭
+      startTimer() {
+        if(this.duration > 0) {
+          this.timer = setTimeout(()=>{
+            if(!this.closed) {
+              this.close()
+            }
+          },this.duration)
+        }
+      },
+
+      //  监听esc键关闭消息
+      keydown(e) {
+        if(e.keyCode === 27){
+          if(!this.closed){
+            this.close();
+          }
+        }
+      }
+    },
+
+
+    computed:{
+      typeClass(){
+        return this.type && !this.iconClass
+          ? `yun-message__icon iconfont yun-icon--${typeMap[this.type]}`
+          :'';
+      },
+
+      positionStyle(){
+        return {
+          'top':`${this.verticalOffset}px`
+        };
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.visible = false;
+        }
+      }
+    },
+
+
+    mounted() {
+      this.startTimer();
+      document.addEventListener('keydown',this.keydown);
+    },
+
+    beforeDestroy() {
+      document.removeEventListener('keydown',this.keydown);
+    }
+
+  }
+</script>
+
+
+<style lang="scss">
+
+  /* Color
+-------------------------- */
+  /// color|1|Brand Color|0
+  $--color-primary: #409EFF !default;
+  /// color|1|Background Color|4
+  $--color-white: #FFFFFF !default;
+  /// color|1|Background Color|4
+  $--color-black: #000000 !default;
+  /// color|1|Functional Color|1
+  $--color-success: #67C23A !default;
+  /// color|1|Functional Color|1
+  $--color-warning: #E6A23C !default;
+  /// color|1|Functional Color|1
+  $--color-danger: #F56C6C !default;
+  /// color|1|Functional Color|1
+  $--color-info: #909399 !default;
+  /// color|1|Font Color|2
+  $--color-text-secondary: #909399 !default;
+  /// color|1|Font Color|2
+  $--color-text-placeholder: #C0C4CC !default;
+
+  $--color-success-light: #e1f3d8 !default;
+  $--color-warning-light: #fdf6ec !default;
+  $--color-danger-light:  #fef0f0 !default;
+  $--color-info-light: $--color-info !default;
+
+  $--color-success-lighter:  $--color-success !default;
+  $--color-warning-lighter:  $--color-warning!default;
+  $--color-danger-lighter:  $--color-danger !default;
+  $--color-info-lighter:  $--color-info!default;
+
+  /// color||Color|0
+  $--message-success-font-color: $--color-success !default;
+  /// color||Color|0
+  $--message-info-font-color: $--color-info !default;
+  /// color||Color|0
+  $--message-warning-font-color: $--color-warning !default;
+  /// color||Color|0
+  $--message-danger-font-color: $--color-danger !default;
+
+  /// color||Color|0
+  $--message-close-icon-color: $--color-text-placeholder !default;
+  /// height||Other|4
+  $--message-close-size:16px !default;
+  /// color||Color|0
+  $--message-close-hover-color: $--color-text-secondary !default;
+
+  p {
+    margin: 0;
+  }
+  .yun-message-fade-enter,
+  .yun-message-fade-leave-active {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+
+  .yun-message{
+    position: fixed;
+    left: 50%;
+    top: 20px;
+    transform: translateX(-50%);
+    transition: opacity 0.3s, transform .4s, top 0.4s;
+    overflow: hidden;
+    padding: 15px 15px 15px 20px ;
+    display: flex;
+    align-items: center;
+
+    min-width: 380px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border:1px solid #EBEEF5;
+
+    background-color: #edf2fc;
+  }
+
+  .is-center{
+    justify-content: center;
+  }
+  .is-closable{
+    .yun-message__content{
+      padding-right: 16px;
+    }
+  }
+
+  .yun-message--success{
+    background-color: $--color-success-light;
+    border-color: $--color-success-light;
+    color: $--message-success-font-color;
+    .yun-message__content {
+      color: $--message-success-font-color;
+    }
+  }
+  .yun-message--warning{
+    background-color: $--color-warning-light;
+    border-color: $--color-warning-light;
+    color: $--message-warning-font-color;
+    .yun-message__content {
+      color: $--message-warning-font-color;
+    }
+  }
+  .yun-message--error{
+    background-color: $--color-danger-light;
+    border-color:  $--color-danger-light;
+    color: $--message-danger-font-color;
+    .yun-message__content {
+      color: $--message-danger-font-color;
+    }
+  }
+  .yun-message--info{
+    color: $--message-info-font-color;
+
+    .yun-message__content {
+      color: $--message-info-font-color;
+    }
+  }
+
+  .yun-message__content{
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    &:focus {
+      outline-width: 0;
+    }
+  }
+
+  .yun-message__icon {
+    margin-right: 10px;
+  }
+
+  .yun-message__closeBtn{
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: $--message-close-icon-color;
+    font-size: $--message-close-size;
+
+    &:focus {
+      outline-width: 0;
+    }
+    &:hover {
+      color: $--message-close-hover-color;
+    }
+  }
+
+</style>

components/pc/pageHeader.vue

+<template>
+  <div class="bc-layout-container-header">>
+    <div class="container-header">
+      <div class="header-center">
+        <div class="header-center-l">
+          <embed src="../../assets/svg/logo.svg" width="111" height="26"
+                 type="image/svg+xml"
+                 pluginspage="http://www.adobe.com/svg/viewer/install/" />
+
+          <ul>
+            <li>首页</li>
+            <li>项目</li>
+            <li>博客</li>
+            <li>问答</li>
+            <li>资讯</li>
+            <li>动态</li>
+            <li>话题</li>
+          </ul>
+
+          <yun-input iconName="search" width='182px' placeholder="请输入关键词" v-model="searchValue"></yun-input>
+        </div>
+        <div class="header-center-r" v-if="!user_id">
+          <div></div>
+          <p class="login-word">
+            <span>登录</span>
+            ·
+            <span>注册</span>
+
+          </p>
+        </div>
+        <div class="header-center-r" v-if="user_id">
+          <yun-icon name="add" color="#ccc" hoverColor="#8CD88C" @mouseover.native="showHideBox1=true"></yun-icon>
+          <yun-icon name="notification"  color="#ccc"  hoverColor="#F8A06F"></yun-icon>
+          <img class="user-photo" :src="photo" alt="" @mouseover="showHideBox2=true">
+          <transition  name="fade">
+            <ul class="abs-box abs-box1" v-if="showHideBox1" @mouseleave="showHideBox1=false">
+              <li>发布项目</li>
+              <li>写博客</li>
+              <li>发表动态</li>
+              <li>我要提问</li>
+              <li>资讯投稿</li>
+            </ul>
+          </transition>
+          <transition  name="fade">
+          <ul class="abs-box abs-box2" v-if="showHideBox2" @mouseleave="showHideBox2=false">
+            <li>我的主页</li>
+            <li>我的喜欢</li>
+            <li>我的收藏</li>
+            <li>我的关注</li>
+            <li>账号资料</li>
+            <li>安全退出</li>
+          </ul>
+          </transition>
+        </div>
+
+      </div>
+
+    </div>
+    <div class="container-header-pad"></div>
+  </div>
+
+</template>
+
+
+<script>
+    export default {
+      name:'container-header',
+      data(){
+        return{
+          user_id:'1234',
+          photo:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2575047779,2966283883&fm=26&gp=0.jpg',
+          showHideBox1:false,
+          showHideBox2:false,
+          searchValue:'',
+        }
+      }
+    }
+</script>
+
+<style lang="scss">
+  @import '../../assets/base';
+
+  .bc-layout-container-header{
+
+    >.container-header{
+      position:fixed;
+      top:0;
+      left:0;
+      right:0;
+      height:66*$length;
+      background-color: #fff;
+      >.header-center{
+        width:$pageWidth;
+        margin:0 auto;
+        @include fontStyle(17,66,500,#333,start);
+        @extend %flex-row-spb;
+        .header-center-l{
+          @extend %flex-row-spb;
+          justify-content: flex-start;
+
+          >ul{
+            margin-left:61*$length;
+            margin-right:170*$length;
+            li{
+              display: inline-block;
+              margin-left:40*$length;
+              @include fontStyle(14,19,500,#666,start);
+              @extend %animate-transition;
+              @extend %cursorPointer;
+              &:hover{
+                color:#00AAE6;
+              }
+
+            }
+          }
+        }
+        .header-center-r{
+          position:relative;
+          width:152*$length;
+          @extend %flex-row-spb;
+          .login-word{
+            span{
+              @include fontStyle(14,19,500,#666,start);
+              @extend %animate-transition;
+              @extend %cursorPointer;
+              margin:0 2px;
+              &:hover{
+                color:#00AAE6;
+              }
+            }
+          }
+          .user-photo{
+            height:32*$length;
+            width:32*$length;
+            border-radius:100%;
+            @extend %cursorPointer;
+          }
+          .abs-box{
+            transition: .4s ease;
+            position:absolute;
+            top:74*$length;
+            padding:10*$length 40*$length;
+            background-color: #fff;
+            border-radius: 4*$length;
+            box-shadow:0 6px 20px rgba(0,0,0,.08);
+            li{
+              margin:0 auto;
+              padding:10*$length 0;
+              @include fontStyle(14,19,500,#666,center);
+              @extend %animate-transition;
+              @extend %cursorPointer;
+              &:hover{
+                color:#00AAE6;
+              }
+            }
+          }
+          .abs-box1{
+            left:calc(-50% + 10px);
+          }
+          .abs-box2{
+            right:calc(-50% + 16px);
+          }
+        }
+
+      }
+    }
+    >.bc-layout-container-header-pad{
+      height:66*$length;
+      background-color: transparent;
+    }
+  }
+
+</style>

jest.config.js

+module.exports = {
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    '^~/(.*)$': '<rootDir>/$1',
+    '^vue$': 'vue/dist/vue.common.js'
+  },
+  moduleFileExtensions: ['js', 'vue', 'json'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest'
+  },
+  'collectCoverage': true,
+  'collectCoverageFrom': [
+    '<rootDir>/components/**/*.vue',
+    '<rootDir>/pages/**/*.vue'
+  ]
+}

layouts/default.vue

+<template>
+  <div class="bc-layout-container">
+    <page-header></page-header>
+    <nuxt />
+  </div>
+</template>
+
+
+<script>
+  import PageHeader from '../components/pc/pageHeader';
+  export default {
+    name:'layouts',
+    components:{
+      PageHeader
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import '../assets/base';
+  .bc-layout-container{
+    background-image: $bgImage;
+  }
+</style>

nuxt.config.js

+
+module.exports = {
+  mode: 'universal',
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: process.env.npm_package_name || '',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: { color: '#fff' },
+  /*
+  ** Global CSS
+  */
+  css: [
+    '~/assets/base.scss',
+    '~/assets/font/iconfont.css'
+  ],
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [
+    {src:'~/plugins/mavonEditor.js',ssr:false},
+    {src:'~/plugins/messageBox.js',ssr:false},
+    {src:'~/plugins/message.js',ssr:false},
+    {src:'~/plugins/yunIcon.js',ssr:false},
+    {src:'~/plugins/yunInput.js',ssr:false}
+  ],
+  /*
+  ** Nuxt.js dev-modules
+  */
+  buildModules: [
+  ],
+  /*
+  ** Nuxt.js modules
+  */
+  modules: [
+
+
+  ],
+  /*
+  ** Build configuration
+  */
+  build: {
+    /*
+    ** You can extend webpack config here
+    */
+    extend (config, ctx) {
+    }
+  }
+}

package.json

+{
+  "name": "beyond-clouds-front",
+  "version": "1.0.0",
+  "description": "beyond-clouds project ",
+  "author": "pigbigbig",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
+    "build": "nuxt build",
+    "start": "cross-env NODE_ENV=production node server/index.js",
+    "generate": "nuxt generate",
+    "test": "jest"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "cross-env": "^5.2.0",
+    "koa": "^2.6.2",
+    "mavon-editor": "^2.7.7",
+    "nuxt": "^2.0.0",
+    "vue-cropper": "^0.4.9"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.27",
+    "babel-jest": "^24.1.0",
+    "jest": "^24.1.0",
+    "node-sass": "^4.13.0",
+    "nodemon": "^1.18.9",
+    "sass-loader": "^8.0.0",
+    "vue-jest": "^4.0.0-0"
+  }
+}

pages/index.vue

+<template>
+  <div class="container">
+    <div>
+      <h1 class="title">
+        beyond-clouds-front
+      </h1>
+      <h2 class="subtitle" @click="showAlert">
+        beyond-clouds project
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import Logo from '~/components/Logo.vue'
+
+export default {
+  components: {
+    Logo
+  },
+
+  data(){
+    return{
+      hello:'fasdfasf'
+    }
+  },
+  methods:{
+    showAlert(){
+      this.$alert('确认清空消息列表？', '', {
+        confirmButtonText: '确定',
+        // callback: action => {
+        //   this.$message({
+        //     type: 'info',
+        //     message: `action: ${ action }`,
+        //     confirmButtonPosition: 'left',
+        //   });
+        // }
+      });
+    }
+  },
+
+
+  mounted(){
+
+
+    // this.$message({
+    //   message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
+    //   type:'info'
+    // })
+
+  }
+}
+</script>
+
+<style>
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  background-color: #fff;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  display: block;
+  font-weight: 300;
+  font-size: 100px;
+  color: #35495e;
+  letter-spacing: 1px;
+}
+
+.subtitle {
+  font-weight: 300;
+  font-size: 42px;
+  color: #526488;
+  word-spacing: 5px;
+  padding-bottom: 15px;
+}
+
+.links {
+  padding-top: 15px;
+}
+</style>

plugins/mavonEditor.js

+import Vue from 'vue';
+import mavonEditor from 'mavon-editor';
+
+
+Vue.use(mavonEditor);

plugins/message.js

+import Vue from 'vue';
+import Message from '../components/common/message/index';
+
+Vue.prototype.$message = Message;
+

plugins/messageBox.js

+import Vue from 'vue';
+import MessageBox from '../components/common/message-box/index'
+
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;

plugins/yunIcon.js

+import YunIcon from '../components/common/icon';
+import Vue from 'vue';
+
+
+Vue.use(YunIcon)

plugins/yunInput.js

+import YunInput from '../components/common/input';
+import Vue from 'vue';
+
+
+Vue.use(YunInput)

server/index.js

+const Koa = require('koa')
+const consola = require('consola')
+const { Nuxt, Builder } = require('nuxt')
+
+const app = new Koa()
+
+// Import and Set Nuxt.js options
+const config = require('../nuxt.config.js')
+config.dev = app.env !== 'production'
+
+async function start () {
+  // Instantiate nuxt.js
+  const nuxt = new Nuxt(config)
+
+  const {
+    host = process.env.HOST || '127.0.0.1',
+    port = process.env.PORT || 3000
+  } = nuxt.options.server
+
+  // Build in development
+  if (config.dev) {
+    const builder = new Builder(nuxt)
+    await builder.build()
+  } else {
+    await nuxt.ready()
+  }
+
+  app.use((ctx) => {
+    ctx.status = 200
+    ctx.respond = false // Bypass Koa's built-in response handling
+    ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
+    nuxt.render(ctx.req, ctx.res)
+  })
+
+  app.listen(port, host)
+  consola.ready({
+    message: `Server listening on http://${host}:${port}`,
+    badge: true
+  })
+}
+
+start()

store/mutations.js

+export default {
+  changeStateToken(state,token){
+    state.token = token
+  }
+}

store/state.js

+export default () =>({
+  token:'',
+  user_id:'',
+})

test/Logo.spec.js

+import { mount } from '@vue/test-utils'
+import Logo from '@/components/Logo.vue'
+
+describe('Logo', () => {
+  test('is a Vue instance', () => {
+    const wrapper = mount(Logo)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+})