初始化项目

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,14 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/dev-api'
+# 开发环境
+# VUE_APP_DOMAIN_PREFIX = 'https://ceresdev.zkthink.com/businessapi'
+VUE_APP_DOMAIN_PREFIX = '/businessapi'
+
+# 演示环境
+# VUE_APP_DOMAIN_PREFIX = 'https://ceres.zkthink.com/businessapi'
+
+# VUE_APP_DOMAIN_PREFIX = 'http://localhost:9004'
+

.env.production

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+
+VUE_APP_DOMAIN_PREFIX = 'https://ceresdev.zkthink.com/businessapi'

.env.staging

@@ -0,0 +1,9 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+
+VUE_APP_DOMAIN_PREFIX = 'https://ceresdev.zkthink.com/businessapi'

.eslintignore

@@ -0,0 +1,5 @@
+build/*.js
+src/assets
+public
+dist
+canvas-container

.eslintrc.js

@@ -0,0 +1,198 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [0, 'always-multiline'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [0, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+yarn.lock
+dist/

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false

Dockerfile

@@ -0,0 +1,2 @@
+FROM registry.cn-shenzhen.aliyuncs.com/sumply-shop/nginx
+COPY dist/ /home/ui-merchant/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README-zh.md

@@ -0,0 +1,35 @@
+
+cereShop 前端源码
+
+#### 项目源码
+
+
+
+#### 项目基础要求
+node：10.0.0及以上
+npm：最新的即可
+
+
+#### Build Setup
+``` bash
+
+# 安装依赖
+npm install
+
+# 启动服务 localhost:8013
+npm run dev
+
+
+#### 常见问题
+
+1、linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题
+
+解决方案：
+```
+1. 单独安装：npm install --unsafe-perm node-sass 
+2. 直接使用：npm install --unsafe-perm
+```
+
+2、加速node-sass安装
+
+https://www.ydyno.com/archives/1219.html

README.md

@@ -0,0 +1,39 @@
+
+cereShop 前端源码
+
+#### 项目源码
+
+
+
+#### 项目基础要求
+node：10.0.0及以上
+npm：最新的即可
+
+
+#### Build Setup
+``` bash
+
+# 安装依赖
+npm install
+
+# 启动服务 localhost:8013
+npm run dev
+
+
+#### 常见问题
+
+1、linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题
+
+解决方案：
+```
+1. 单独安装：npm install --unsafe-perm node-sass 
+2. 直接使用：npm install --unsafe-perm
+```
+
+2、加速node-sass安装
+
+https://www.ydyno.com/archives/1219.html
+
+3、echarts版本不要用5.0.0
+安装命令
+npm install echarts@4.2.0-rc.2 --save

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

build/index.js

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', './']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

canvas-container/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

canvas-container/assets/font_icon/demo.css

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

canvas-container/assets/font_icon/iconfont.css

@@ -0,0 +1,367 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2224733 */
+  src: url('iconfont.woff2?t=1629634638571') format('woff2'),
+       url('iconfont.woff?t=1629634638571') format('woff'),
+       url('iconfont.ttf?t=1629634638571') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lunbo:before {
+  content: "\e683";
+}
+
+.icon-new:before {
+  content: "\e6db";
+}
+
+.icon-huiyuan:before {
+  content: "\e61f";
+}
+
+.icon-shangpin:before {
+  content: "\e676";
+}
+
+.icon-gonggao1:before {
+  content: "\e6f0";
+}
+
+.icon-mofang1:before {
+  content: "\e66f";
+}
+
+.icon-arrange1:before {
+  content: "\e601";
+}
+
+.icon-price:before {
+  content: "\e604";
+}
+
+.icon-arrange2:before {
+  content: "\e605";
+}
+
+.icon-gonggao:before {
+  content: "\ea7a";
+}
+
+.icon-miaosha:before {
+  content: "\e650";
+}
+
+.icon-zhekou:before {
+  content: "\e652";
+}
+
+.icon-pintuan:before {
+  content: "\e653";
+}
+
+.icon-miaosha1:before {
+  content: "\e64b";
+}
+
+.icon-xinpin:before {
+  content: "\e64c";
+}
+
+.icon-zhekou1:before {
+  content: "\e64d";
+}
+
+.icon-toubu:before {
+  content: "\e64e";
+}
+
+.icon-pintuan1:before {
+  content: "\e64f";
+}
+
+.icon-weibiaoti-zhuanhuan-:before {
+  content: "\e607";
+}
+
+.icon-kong:before {
+  content: "\e674";
+}
+
+.icon-youhuiquan3:before {
+  content: "\e621";
+}
+
+.icon-youhuiquan4:before {
+  content: "\e624";
+}
+
+.icon-youhuiquan2:before {
+  content: "\e625";
+}
+
+.icon-youhuiquan1:before {
+  content: "\e626";
+}
+
+.icon-kapian8:before {
+  content: "\e628";
+}
+
+.icon-kapian6:before {
+  content: "\e62a";
+}
+
+.icon-kapian7:before {
+  content: "\e62e";
+}
+
+.icon-kapian1:before {
+  content: "\e627";
+}
+
+.icon-kapian3:before {
+  content: "\e629";
+}
+
+.icon-kapian2:before {
+  content: "\e62b";
+}
+
+.icon-kapian5:before {
+  content: "\e62c";
+}
+
+.icon-kapian4:before {
+  content: "\e62f";
+}
+
+.icon-app:before {
+  content: "\e630";
+}
+
+.icon-fuzhufenge:before {
+  content: "\e631";
+}
+
+.icon-pc:before {
+  content: "\e632";
+}
+
+.icon-h5:before {
+  content: "\e634";
+}
+
+.icon-tuwen:before {
+  content: "\e635";
+}
+
+.icon-shangpinliebiao:before {
+  content: "\e636";
+}
+
+.icon-leibieliebiao:before {
+  content: "\e637";
+}
+
+.icon-shipin:before {
+  content: "\e638";
+}
+
+.icon-tuwendaohang:before {
+  content: "\e639";
+}
+
+.icon-zidingyi:before {
+  content: "\e63a";
+}
+
+.icon-xiaochengxu:before {
+  content: "\e63b";
+}
+
+.icon-tuwenliebiao:before {
+  content: "\e63c";
+}
+
+.icon-youhuiquan:before {
+  content: "\e63d";
+}
+
+.icon-wenben2:before {
+  content: "\e63e";
+}
+
+.icon-pinpailiebiao:before {
+  content: "\e640";
+}
+
+.icon-dianputoubu:before {
+  content: "\e641";
+}
+
+.icon-mofang:before {
+  content: "\e642";
+}
+
+.icon-yihangliangge:before {
+  content: "\e643";
+}
+
+.icon-yihangsange:before {
+  content: "\e644";
+}
+
+.icon-yihangsige:before {
+  content: "\e645";
+}
+
+.icon-yizuoliangyou:before {
+  content: "\e646";
+}
+
+.icon-lianghangliangge:before {
+  content: "\e647";
+}
+
+.icon-yishangliangxia:before {
+  content: "\e648";
+}
+
+.icon-close:before {
+  content: "\e602";
+}
+
+.icon-tihuantupian:before {
+  content: "\e66c";
+}
+
+.icon-xuanze:before {
+  content: "\e62d";
+}
+
+.icon-xuanze-danxuan:before {
+  content: "\e661";
+}
+
+.icon-xuanze1:before {
+  content: "\e618";
+}
+
+.icon-jinggao:before {
+  content: "\e608";
+}
+
+.icon-shanchu1:before {
+  content: "\e651";
+}
+
+.icon-chakan:before {
+  content: "\e622";
+}
+
+.icon-iconfontquestion:before {
+  content: "\e60a";
+}
+
+.icon-fangkuai:before {
+  content: "\e73f";
+}
+
+.icon-shanchu:before {
+  content: "\e633";
+}
+
+.icon-tupian:before {
+  content: "\e64a";
+}
+
+.icon-tupian1:before {
+  content: "\e61e";
+}
+
+.icon-tuodongweizhi:before {
+  content: "\e703";
+}
+
+.icon-add2:before {
+  content: "\e603";
+}
+
+.icon-wenben:before {
+  content: "\e649";
+}
+
+.icon-A:before {
+  content: "\e600";
+}
+
+.icon-wenben1:before {
+  content: "\e8c2";
+}
+
+.icon-youduiqi:before {
+  content: "\ec82";
+}
+
+.icon-zuoduiqi:before {
+  content: "\ec86";
+}
+
+.icon-juzhong:before {
+  content: "\e619";
+}
+
+.icon-add1:before {
+  content: "\e664";
+}
+
+.icon-sousuo:before {
+  content: "\e63f";
+}
+
+.icon-arrow-up:before {
+  content: "\e660";
+}
+
+.icon-add:before {
+  content: "\e685";
+}
+
+.icon-success:before {
+  content: "\e687";
+}
+
+.icon-subtract:before {
+  content: "\e68a";
+}
+
+.icon-arrow-down:before {
+  content: "\e695";
+}
+
+.icon-arrow-right:before {
+  content: "\e6ab";
+}
+
+.icon-arrow-left:before {
+  content: "\e6bc";
+}
+
+.icon-phone-menu:before {
+  content: "\e771";
+}
+
+.icon-user:before {
+  content: "\e67d";
+}
+
+.icon-shoppingCart:before {
+  content: "\e623";
+}
+

canvas-container/assets/font_icon/iconfont.json

@@ -0,0 +1,625 @@
+{
+  "id": "2224733",
+  "name": "cereshop",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "9468467",
+      "name": "轮播",
+      "font_class": "lunbo",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "12598705",
+      "name": "new",
+      "font_class": "new",
+      "unicode": "e6db",
+      "unicode_decimal": 59099
+    },
+    {
+      "icon_id": "11219616",
+      "name": "会员",
+      "font_class": "huiyuan",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "8262494",
+      "name": "商品",
+      "font_class": "shangpin",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "17004151",
+      "name": "公告",
+      "font_class": "gonggao1",
+      "unicode": "e6f0",
+      "unicode_decimal": 59120
+    },
+    {
+      "icon_id": "22142857",
+      "name": "魔方",
+      "font_class": "mofang1",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "23733851",
+      "name": "arrange1",
+      "font_class": "arrange1",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "23733852",
+      "name": "price",
+      "font_class": "price",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "23733853",
+      "name": "arrange2",
+      "font_class": "arrange2",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "4609686",
+      "name": "公告",
+      "font_class": "gonggao",
+      "unicode": "ea7a",
+      "unicode_decimal": 60026
+    },
+    {
+      "icon_id": "19849914",
+      "name": "秒杀",
+      "font_class": "miaosha",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "19849915",
+      "name": "折扣",
+      "font_class": "zhekou",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "19849916",
+      "name": "拼团",
+      "font_class": "pintuan",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "19827115",
+      "name": "秒杀1",
+      "font_class": "miaosha1",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "19827116",
+      "name": "新品",
+      "font_class": "xinpin",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "19827117",
+      "name": "折扣1",
+      "font_class": "zhekou1",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "19827118",
+      "name": "头部",
+      "font_class": "toubu",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "19827119",
+      "name": "拼团1",
+      "font_class": "pintuan1",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "11640000",
+      "name": "长方形",
+      "font_class": "weibiaoti-zhuanhuan-",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "10541266",
+      "name": "空",
+      "font_class": "kong",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "18863998",
+      "name": "优惠券3",
+      "font_class": "youhuiquan3",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "18863999",
+      "name": "优惠券4",
+      "font_class": "youhuiquan4",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "18864000",
+      "name": "优惠券2",
+      "font_class": "youhuiquan2",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "18864001",
+      "name": "优惠券1",
+      "font_class": "youhuiquan1",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "18870310",
+      "name": "卡片8",
+      "font_class": "kapian8",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "18870312",
+      "name": "卡片6",
+      "font_class": "kapian6",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "18870314",
+      "name": "卡片7",
+      "font_class": "kapian7",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "18870683",
+      "name": "卡片1",
+      "font_class": "kapian1",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "18870798",
+      "name": "卡片3",
+      "font_class": "kapian3",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "18870799",
+      "name": "卡片2",
+      "font_class": "kapian2",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "18870800",
+      "name": "卡片5",
+      "font_class": "kapian5",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "18870801",
+      "name": "卡片4",
+      "font_class": "kapian4",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "18907727",
+      "name": "app",
+      "font_class": "app",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "18907728",
+      "name": "辅助分割",
+      "font_class": "fuzhufenge",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "18907729",
+      "name": "pc",
+      "font_class": "pc",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "18907730",
+      "name": "h5",
+      "font_class": "h5",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "18907732",
+      "name": "图文",
+      "font_class": "tuwen",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "18907733",
+      "name": "商品列表",
+      "font_class": "shangpinliebiao",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "18907734",
+      "name": "类别列表",
+      "font_class": "leibieliebiao",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "18907735",
+      "name": "视频",
+      "font_class": "shipin",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "18907736",
+      "name": "图文导航",
+      "font_class": "tuwendaohang",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "18907737",
+      "name": "自定义",
+      "font_class": "zidingyi",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "18907738",
+      "name": "小程序",
+      "font_class": "xiaochengxu",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "18907739",
+      "name": "图文列表",
+      "font_class": "tuwenliebiao",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "18907741",
+      "name": "优惠券",
+      "font_class": "youhuiquan",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "18907742",
+      "name": "文本",
+      "font_class": "wenben2",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "18907743",
+      "name": "品牌列表",
+      "font_class": "pinpailiebiao",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "18907805",
+      "name": "店铺头部",
+      "font_class": "dianputoubu",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "18908808",
+      "name": "魔方",
+      "font_class": "mofang",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "18908809",
+      "name": "一行两个",
+      "font_class": "yihangliangge",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "18908810",
+      "name": "一行三个",
+      "font_class": "yihangsange",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "18908811",
+      "name": "一行四个",
+      "font_class": "yihangsige",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "18908812",
+      "name": "一左两右",
+      "font_class": "yizuoliangyou",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "18908813",
+      "name": "两行两个",
+      "font_class": "lianghangliangge",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "18908814",
+      "name": "一上两下",
+      "font_class": "yishangliangxia",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "16963297",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "1630982",
+      "name": "替换图片",
+      "font_class": "tihuantupian",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "1472518",
+      "name": "选择",
+      "font_class": "xuanze",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "2570139",
+      "name": "选择",
+      "font_class": "xuanze-danxuan",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "16391281",
+      "name": "选择",
+      "font_class": "xuanze1",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "15076931",
+      "name": "警告",
+      "font_class": "jinggao",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "14404139",
+      "name": "删 除",
+      "font_class": "shanchu1",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "8649511",
+      "name": "查看",
+      "font_class": "chakan",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "584016",
+      "name": "问号",
+      "font_class": "iconfontquestion",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "14384498",
+      "name": "方块",
+      "font_class": "fangkuai",
+      "unicode": "e73f",
+      "unicode_decimal": 59199
+    },
+    {
+      "icon_id": "690725",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "1172721",
+      "name": "图片",
+      "font_class": "tupian",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "6049692",
+      "name": "图片",
+      "font_class": "tupian1",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "15994506",
+      "name": "拖动位置",
+      "font_class": "tuodongweizhi",
+      "unicode": "e703",
+      "unicode_decimal": 59139
+    },
+    {
+      "icon_id": "12609224",
+      "name": "add",
+      "font_class": "add2",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "2404491",
+      "name": "文本",
+      "font_class": "wenben",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "9567573",
+      "name": "A",
+      "font_class": "A",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "10885439",
+      "name": "文本",
+      "font_class": "wenben1",
+      "unicode": "e8c2",
+      "unicode_decimal": 59586
+    },
+    {
+      "icon_id": "6337463",
+      "name": "右对齐",
+      "font_class": "youduiqi",
+      "unicode": "ec82",
+      "unicode_decimal": 60546
+    },
+    {
+      "icon_id": "6337473",
+      "name": "左对齐",
+      "font_class": "zuoduiqi",
+      "unicode": "ec86",
+      "unicode_decimal": 60550
+    },
+    {
+      "icon_id": "11976280",
+      "name": "居中",
+      "font_class": "juzhong",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "15838424",
+      "name": "add",
+      "font_class": "add1",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "695192",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "608218",
+      "name": "导航",
+      "font_class": "arrow-up",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "608288",
+      "name": "加上",
+      "font_class": "add",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "608290",
+      "name": "检查",
+      "font_class": "success",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "608293",
+      "name": "减去",
+      "font_class": "subtract",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "608317",
+      "name": "箭头",
+      "font_class": "arrow-down",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
+    {
+      "icon_id": "608352",
+      "name": "箭头",
+      "font_class": "arrow-right",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "609192",
+      "name": "箭头",
+      "font_class": "arrow-left",
+      "unicode": "e6bc",
+      "unicode_decimal": 59068
+    },
+    {
+      "icon_id": "609891",
+      "name": "列表",
+      "font_class": "phone-menu",
+      "unicode": "e771",
+      "unicode_decimal": 59249
+    },
+    {
+      "icon_id": "380396",
+      "name": "user",
+      "font_class": "user",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "10554762",
+      "name": "Shopping cart, finance, business",
+      "font_class": "shoppingCart",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    }
+  ]
+}

canvas-container/assets/font_icon/iconfont.svg

@@ -0,0 +1,260 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="miaosha" unicode="&#58960;" d="M779.82 91.28c143.46 149.7 138.4 387.36-11.3 530.82S381.16 760.5 237.7 610.8c-139.16-145.21-139.16-374.3 0-519.51l-97.54-130.03c-11.31-15.08-8.25-36.47 6.83-47.78 15.08-11.31 36.47-8.25 47.78 6.83l94.54 126.07c130.79-95.29 308.12-95.29 438.91 0l94.54-126.07c11.31-15.08 32.7-18.14 47.78-6.83 15.08 11.31 18.14 32.7 6.83 47.78l-97.55 130.02zM542.89 350.33c0-7.39-2.4-14.57-6.83-20.48L433.67 193.33c-11.31-15.08-32.7-18.14-47.78-6.83-15.08 11.31-18.14 32.7-6.83 47.78l95.56 127.41V555.11c0 18.85 15.28 34.13 34.13 34.13s34.13-15.28 34.13-34.13l0.01-204.78zM322.24 812.28c-67.48 65.8-175.52 64.44-241.32-3.04-64.62-66.27-64.63-171.98-0.02-238.26 13.33-13.32 34.93-13.32 48.26 0l193.07 193.04c13.33 13.32 13.33 34.93 0.01 48.26zM936.57 812.28c-66.64 66.62-174.66 66.62-241.3 0-13.32-13.33-13.32-34.93 0-48.26l193.04-193.04c13.33-13.32 34.93-13.32 48.26 0 66.62 66.64 66.62 174.66 0 241.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhekou" unicode="&#58962;" d="M614.96 773.48l65.02-13.52c39.21-8.14 72.76-33.3 91.56-68.65l223.31-419.98c23.26-43.79 6.63-98.14-37.14-121.42l-317.2-168.66a89.369 89.369 0 0 0-51.86-10.02 89.77 89.77 0 0 1 26.44 35.92l2.6 7.41 139.07 454.88a134.738 134.738 0 0 1-11.4 105.39l-4.8 7.86-119.99 182.9a140.75 140.75 0 0 1-5.61 7.89z m-381.6-59.41l161.2 68.08c59.91 25.23 129.29 4.07 164.94-50.29l96.4-147.01a134.715 134.715 0 0 0 16.21-113.25L533.05 16.72c-14.5-47.43-64.7-74.12-112.12-59.64L77.42 62.12a89.756 89.756 0 0 0-53.06 43.7 89.795 89.795 0 0 0-6.61 68.42l139.2 455.1a134.658 134.658 0 0 0 76.41 84.73z m128.65-105.03a67.351 67.351 0 0 1 79.57-85.32c23.45 5.42 42.23 22.93 49.26 45.94 10.87 35.58-9.15 73.23-44.72 84.11-35.58 10.87-73.23-9.15-84.11-44.73z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="pintuan" unicode="&#58963;" d="M227.15 291.37c24.2 25.65 51.3 48.07 80.41 66.58 5.68 3.57 11.37 7.02 17.17 10.26 6.69 3.79 13.5 7.47 20.52 10.81 6.35 3.13 12.82 6.02 19.29 8.81-14.16 8.92-27.55 19.18-39.82 30.67-16.95 15.84-31.89 33.79-44.38 53.64-26.43 42.04-41.93 92-41.93 145.64 0 39.37 8.47 76.61 23.2 110.4-30.44-8.47-57.77-24.75-79.62-46.83-34.13-34.24-55.31-82.08-55.31-134.94 0-26.43 5.24-51.52 14.83-74.27 9.59-22.97 23.42-43.49 40.59-60.66 16.39-16.39 35.68-29.78 57.09-39.03-19.85-5.02-38.92-11.93-57.09-20.86-40.49-19.85-75.94-48.62-103.82-84.53-12.94-16.73-24.2-34.91-33.57-54.31-20.52-42.16-32.34-90.11-32.34-141.52 0-7.58 10.93-14.16 32.34-19.96 15.16-4.13 35.57-7.69 61.67-10.82 12.71 85.65 48.4 163.93 99.47 226.61 6.7 8.36 13.94 16.39 21.3 24.31z m731-44.94c-4.68 7.02-9.59 13.94-14.72 20.52-32.12 41.04-74.27 73.16-122.34 92.78-17.06 6.92-34.79 12.38-53.3 15.95 19.96 9.7 38.02 22.86 53.3 39.03 15.61 16.5 28.21 35.8 37.14 57.21 9.48 22.75 14.83 47.84 14.83 74.27 0 51.19-19.85 97.46-51.97 131.48-21.63 22.86-48.73 40.03-79.18 49.29 14.5-33.46 22.75-70.37 22.75-109.29 0-53.64-15.5-103.6-41.93-145.64-7.48-11.82-15.73-22.97-24.87-33.46-17.18-19.85-37.14-37.03-59.33-50.97 8.03-3.34 15.95-7.13 23.75-11.04 11.27-5.69 22.19-11.82 32.9-18.62 0.89 0 1.79 0.11 2.79 0.11-0.89 0-1.79-0.11-2.79-0.11 0.89-0.56 1.79-1.23 2.79-1.79 28.21-18.18 54.31-40.03 77.84-64.9 7.36-7.81 14.61-15.83 21.41-24.31 51.3-63.01 87.1-141.85 99.7-228.06 24.42 1.23 44.83 3.13 61.45 5.8 34.57 5.58 52.08 14.39 52.08 26.43-0.11 65.13-19.41 125.47-52.3 175.32z m0 0M416.29 437.01c10.37-5.24 21.3-9.7 32.67-12.94 16.73-4.91 34.35-7.69 52.64-7.69 17.28 0 33.9 2.56 49.96 7.02 11.04 3.01 21.74 7.03 32.01 12.05 19.18 9.26 36.8 21.75 51.96 36.69 37.25 36.69 60.56 88.43 60.56 145.64 0 42.6-12.94 82.07-34.79 114.64-19.63 29.21-46.39 52.63-77.72 67.8-24.98 12.05-52.64 18.96-81.97 18.96-30.67 0-59.55-7.58-85.31-20.63-30.11-15.28-55.87-38.25-74.72-66.57-21.63-32.45-34.46-71.82-34.46-114.08 0-57.32 23.31-108.95 60.55-145.64 14.27-14.29 30.66-26.11 48.62-35.25zM700.1 267.06l-2.23 1.89c-9.26 8.03-18.85 15.5-28.66 22.41-26.65 18.62-55.42 33.01-85.64 42.49-6.69 2.12-13.38 4.24-20.19 5.8-20.18 4.68-40.82 7.36-61.78 7.36-16.17 0-32.12-1.89-47.73-4.57-12.71-2.23-25.2-5.24-37.47-9.03-30.22-9.48-58.66-23.75-84.98-42.04-2.12-1.56-4.35-2.9-6.47-4.46-8.47-6.13-16.61-12.82-24.42-19.74-64.46-56.88-110.51-139.51-125.23-232.96-3.12-19.74-5.13-39.7-5.35-60.22 6.36-6.02 37.69-26.32 179.32-38.81 40.93-3.57 91.11-6.58 152.56-8.36 62.78 1.67 113.64 4.68 155.12 8.36 14.95 1.34 28.66 2.68 41.26 4.24 9.26 1.12 17.84 2.23 25.87 3.35 83.3 11.82 104.38 26.2 109.4 31.11-0.22 21.74-2.45 43.04-6.13 63.9-16.18 90.99-63.02 172.63-127.25 229.28z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="miaosha1" unicode="&#58955;" d="M957.74 389.9c0 62.43-13.09 121.74-36.42 175.58 36.89 26.79 60.98 70.15 60.98 119.24 0 81.42-65.99 147.41-147.41 147.41-44.86 0-84.97-20.11-112.01-51.73-61.86 32.93-132.4 51.73-207.38 51.73-74.98 0-145.52-18.8-207.39-51.73-27.03 31.62-67.15 51.73-112.01 51.73-81.42 0-147.41-65.99-147.41-147.41 0-49.09 24.09-92.45 60.98-119.24-23.33-53.86-36.42-113.17-36.42-175.58 0-138.31 63.56-261.69 162.98-342.78l-85.06-85.06c-9.59-9.59-9.59-25.15 0-34.74 9.59-9.6 25.15-9.6 34.75 0l90.76 90.75c68.92-44.36 150.76-70.39 238.82-70.39s169.89 26.04 238.82 70.39l90.76-90.75c9.59-9.6 25.15-9.6 34.74 0 9.6 9.59 9.6 25.15 0 34.74l-85.06 85.06c99.42 81.08 162.98 204.47 162.98 342.78zM765.71 754.4c17.78 17.65 42.22 28.59 69.19 28.59 54.19 0 98.28-44.08 98.28-98.28 0-29.84-13.65-56.28-34.71-74.32-33.08 57.33-78.42 106.64-132.76 144.01z m155.56-188.82c-3.8 8.75-8.04 17.25-12.37 25.7 4.39-8.41 8.57-16.94 12.37-25.7zM196.11 782.99c26.97 0 51.41-10.94 69.19-28.59-54.34-37.37-99.68-86.67-132.76-143.99-21.06 18.04-34.71 44.48-34.71 74.32 0 54.18 44.09 98.26 98.28 98.26zM122.1 591.28c-4.34-8.45-8.58-16.95-12.37-25.7 3.8 8.76 7.98 17.29 12.37 25.7z m0.3-201.38c0 216.75 176.34 393.09 393.1 393.09 216.75 0 393.09-176.34 393.09-393.09S732.26-3.21 515.5-3.21c-216.75 0-393.1 176.35-393.1 393.11z m0 0M495.52 427.4h-82.35l78.91 157.84h129.26L538.43 419.4H645.8L390 163.61z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xinpin" unicode="&#58956;" d="M607.17 238.57l-37 164.08h32.94l19.65-112.04 0.02-0.08c0.49-2.25 1.01-7.03 1.55-14.21l7.98 0.3c-0.17-1.7-1.74-3.45-3.95-3.45-2.07 0-3.59 1.56-3.87 3.06 0.11-0.61 0.48-4.14 0.62-5.47l0.37-3.59h7.86l0.48 3.45c1.02 7.39 2.1 14.12 3.21 20.01l26.74 112.11h36.54l28.28-113.34c0.06-0.63 0.24-1.73 0.84-3.53 1.03-5.97 1.52-10.75 1.52-14.6v-4h8.42l0.32 3.65c0.58 6.59 1.35 12.86 2.36 19.17l18.89 112.64h32.04l-37-164.08h-39l-26.65 106.78-0.02 0.07c-1.54 5.33-2.59 11.6-3.12 18.64l-7.98-0.04c-0.51-7.87-1.54-14.06-3.05-18.41l-0.05-0.14-28.41-107.01h-40.53z m-184.51 0.11V402.76h129.49v-24.01h-97.06v-45.34h90.65v-23.91h-90.65v-48.48h99.45v-22.34H422.66z m-70.52 0l-69.22 105.58c-5.12 8.29-8.05 13.23-9.49 16.01l-7.54-2.07c0.5-9.02 0.75-18.91 0.75-29.38v-4h0.11v-86.04H236.7V402.86h37.51l66.8-104.1 0.05-0.07c4.73-6.72 7.72-12.01 9.16-16.16l7.78 1.31v0.92l-0.02 0.19c-0.5 5.2-0.74 13.73-0.74 26.09v91.71h30.04v-164.08h-35.14zM183.9-96.38c-48.5 0-87.95 38-87.95 84.71V748.4c0 46.65 39.5 84.6 88.06 84.6h648.87c48.52 0 88.07-37.96 88.17-84.61v-759.85c0-46.71-39.45-84.71-87.95-84.71-10.24 0-20.32 1.72-29.98 5.11l-260.98 90.49c-10.59 3.62-21.52 5.45-32.5 5.45-11.02 0-21.91-1.83-32.39-5.45l-263.46-90.8c-9.74-3.32-19.81-5.01-29.89-5.01z m-38.24 84.81c0-23.01 19.91-37.26 38.35-37.26 4.46 0 8.85 0.74 13.05 2.21l263.45 90.79c15.71 5.48 32.23 8.25 49.13 8.25 16.93 0 33.53-2.78 49.34-8.25l260.96-90.48c4.41-1.53 8.84-2.31 13.16-2.31 17.35 0 35.99 12.61 38.14 33.26h0.31V575.09H145.66v-586.66z m38.35 797.24c-21.27 0-38.57-16.72-38.57-37.27v-126.08h726V748.4c0 20.55-17.3 37.27-38.57 37.27H184.01z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhekou1" unicode="&#58957;" d="M956.9-36.96H481.74c-9.34 0-16.91 7.58-16.91 16.91 0 9.34 7.58 16.91 16.91 16.91h441.34V556.32L678.06 801.35a16.894 16.894 0 0 0 0 23.94 16.906 16.906 0 0 0 23.95 0l254.9-254.9v-607.35z m0 0M658.17 845.45v-33.82c6.36 0 12.04-4.06 14.07-10.15L775.88 490.7c1.35-4.19 0.81-8.66-1.49-12.45L478.9-2.05c-2.71-4.47-7.44-7.03-12.72-7.03-2.84 0-5.41 0.81-7.84 2.3L82.08 232.69c-6.76 4.33-8.93 13.39-4.6 20.29l297.79 483.96c2.03 3.25 5.28 5.68 9.07 6.63L654.8 811.22c1.21 0.27 2.43 0.41 3.65 0.41l-0.28 33.82m0 0c-3.92 0-7.85-0.54-11.77-1.49l-270.46-67.65c-12.31-3.11-23-10.82-29.63-21.65L48.52 270.71c-13.94-22.59-7.17-52.22 15.29-66.56l376.26-239.48a48.685 48.685 0 0 1 26.11-7.58c16.37 0 32.2 8.26 41.41 23.14l295.48 480.31c7.58 12.31 9.2 27.19 4.74 40.86L704.17 812.17c-6.63 20.29-25.57 33.28-46 33.28z m0 0M554.53 654.41c21.51 0 39.1-17.59 39.1-39.1s-17.59-39.1-39.1-39.1-39.1 17.59-39.1 39.1 17.59 39.1 39.1 39.1m0 33.82c-40.32 0-72.92-32.6-72.92-72.92s32.6-72.93 72.92-72.93 72.93 32.61 72.93 72.93c0 40.32-32.61 72.92-72.93 72.92z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="toubu" unicode="&#58958;" d="M166.5-103.13c-35.12 0-63.69 28.57-63.69 63.7V426.54c0 14.57 11.85 26.43 26.42 26.43 14.57 0 26.42-11.86 26.42-26.43v-476.82h698.58V426.54c0 14.57 11.85 26.43 26.42 26.43 14.57 0 26.43-11.86 26.43-26.43v-465.97c0-35.12-28.58-63.7-63.7-63.7H166.5zM235.32 365.9c-35.97 0-68.26 7.5-95.97 22.27-0.35 0.19-0.75 0.41-1.14 0.64l-0.18 0.11-0.18 0.1c-65.64 35.67-106.46 104.25-106.55 179 0 12.83 7.61 32.69 64.64 157.27l1.32 2.88c13.69 29.93 26.62 58.2 35.02 77.68 10.03 23.33 32.97 38.4 58.44 38.4h630.55c25.63 0 48.65-15.22 58.63-38.78 8.54-20.19 21.67-49.38 35.56-80.28 55.77-124.05 63.19-143.81 63.13-156.57 0.02-74.62-40.65-143.16-106.13-178.93-27.97-15.32-60.72-23.18-97.35-23.36-47.05 0-92.86 16.21-128.94 45.65l-6.86 5.6-6.86-5.6c-35.62-29.11-80.68-45.36-126.87-45.74-46.79 0.31-92.28 16.51-128.1 45.63l-6.86 5.58-6.85-5.6c-36.02-29.5-81.64-45.81-128.45-45.95z m-70.08 68.39c19.77-10.31 43.32-15.53 70.01-15.53 44.57 0.13 86.52 19.72 115.11 53.77a26.324 26.324 0 0 0 20.2 9.43c7.84 0 15.2-3.43 20.23-9.4 28.41-33.72 70.2-53.21 114.67-53.49h0.15c43.8 0.36 85.14 19.89 113.43 53.6 4.69 5.59 12.06 8.8 20.24 8.8 8.17 0 15.56-3.2 20.26-8.79 28.52-34 70.6-53.51 115.43-53.51 27.7 0.14 51.94 5.81 72.11 16.86 47.23 25.79 77.35 75.25 78.61 129.05l0.04 1.75-0.51 1.67c-5.29 17.36-30.44 73.76-57.97 135-13.36 29.72-27.18 60.46-36 81.27l-2.8 6.62H183.59l-2.82-6.56c-8.81-20.46-23.02-51.52-36.77-81.55-22.53-49.23-53.36-116.58-59.29-135.53l-0.54-1.72 0.05-1.8c1.4-54.22 32.02-103.77 79.9-129.32l1.12-0.62zM469.19 27.33v175.5c0 14.57 11.86 26.42 26.43 26.42h18.63c14.57 0 26.43-11.85 26.43-26.42v-175.51h-71.49z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="pintuan1" unicode="&#58959;" d="M777.5-61.1c-12.64 0-23.3 9.43-24.8 21.98v0.28l-0.19 0.19c-0.57 0.57-0.94 1.42-1.04 2.36-11.13 177.13-158.64 315.68-335.87 315.68-177.23 0.1-324.74-138.65-335.78-315.68-0.09-0.94-0.47-1.79-1.04-2.36l-0.19-0.19v-0.28a24.91 24.91 0 0 0-24.8-21.98c-13.68 0-24.9 11.22-24.9 24.99 0 3.11 0.57 6.13 1.7 8.96l0.09 0.09v0.1c6.04 78.1 35.37 151.76 84.61 212.79C161.88 243.37 223.19 286 292.8 309.29l1.7 0.57-1.51 0.85c-38.95 21.03-71.96 51.69-95.73 88.85-26.6 41.5-40.65 89.51-40.65 139.03 0 69.14 26.97 134.31 75.93 183.17 49.05 49.05 114.03 75.93 183.17 75.93 69.14 0 134.31-26.98 183.26-75.93 48.95-48.95 75.93-114.03 75.93-183.17 0-49.43-14.06-97.52-40.65-139.03-23.87-37.25-56.97-67.91-95.74-88.85l-1.51-0.85 1.69-0.57C608.2 286 669.6 243.46 716.2 185.83c49.42-61.03 78.66-134.78 84.6-212.97v-0.19c1.13-2.92 1.7-5.94 1.7-8.77 0-13.77-11.23-25-25-25zM415.69 747.69c-115.35 0-209.1-93.85-209.1-209.11 0-115.35 93.85-209.1 209.1-209.1 115.26 0 209.01 93.84 209.01 209.1s-93.75 209.11-209.01 209.11z m0 0M969.07-61.1c-12.64 0-23.3 9.43-24.81 21.98v0.28l-0.19 0.19c-0.56 0.57-0.94 1.42-1.04 2.36-9.15 148.65-117.05 274.94-262.3 307.1-0.47 0.1-0.94 0.38-1.51 0.76-15.94 12.64-33.39 24.52-53.58 36.22-1.32 0.76-2.08 2.36-1.79 3.87 0.09 0.57-0.76 7.73-0.48 8.4v0.09c0 0.29 0.1 0.47 0.1 0.66 0.09 0.28-0.19 0.75-0.19 0.94-0.38 1.99-0.38 2.36-0.75 3.59-0.28 1.13-0.38 2.26 0.19 3.3 0.66 1.04 1.7 1.7 2.83 1.8 108.75 9.62 190.62 99.04 190.62 208.06 0 107.91-84.23 199.39-191.66 208.17-0.85 0.09-1.6 0.47-2.26 1.13-15 14.9-32.35 28.48-51.59 40.46-1.32 0.85-1.98 2.45-1.6 3.96 0.38 1.6 1.6 2.64 3.11 2.93 13.2 1.79 24.24 2.64 34.99 2.64 69.23 0 134.4-26.97 183.17-75.92 48.95-49.05 75.83-114.04 75.83-183.17 0-49.42-14.06-97.52-40.65-139.02-23.77-37.26-56.87-67.91-95.64-88.85l-1.51-0.85 1.7-0.56c69.42-23.3 130.82-65.93 177.41-123.47 49.33-60.83 78.57-134.5 84.7-212.88v-0.19c1.13-3.02 1.6-6.04 1.6-8.86 0-6.51-2.64-13.01-7.35-17.64-4.34-4.83-10.66-7.48-17.35-7.48z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="weibiaoti-zhuanhuan-" unicode="&#58887;" d="M23.232 609.408h977.536v-535.488H23.232V609.408z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kong" unicode="&#58996;" d="M468.732394 870.039437h30.287324v-129.802817h-30.287324zM659.109859 721.487324l64.901409 112.495775-23.076057 12.980281-64.901408-112.495774zM885.543662 559.95493c-1.442254 2.884507-4.326761 5.769014-8.653521 7.211267L470.174648 650.816901h-7.211268L134.129577 521.014085c-1.442254 0-1.442254-1.442254-2.884507-1.442254l-2.884507-2.884507-1.442253-1.442254-100.957747-175.954929c-1.442254-2.884507-2.884507-7.211268-1.442253-11.538028 1.442254-2.884507 4.326761-5.769014 8.653521-7.211268l93.746479-24.51831v-253.83662c0-5.769014 4.326761-10.095775 8.653521-11.538028l458.63662-131.24507c2.884507-1.442254 7.211268 0 10.095774 1.442253l288.450705 161.532395c4.326761 2.884507 5.769014 5.769014 5.769014 11.538028l-2.884507 249.509859 5.769014 2.884507 109.611267 64.901409c2.884507 1.442254 5.769014 5.769014 5.769014 8.653521v7.211267l-129.802817 151.43662-1.442253 1.442254zM54.805634 340.732394l90.861972 154.321127 7.211267-1.442253 124.033803-30.287324 294.219718-72.112676-108.169014-158.647888-408.157746 108.169014z m95.188732-288.450704V288.811268h1.442254l12.980281-2.884507 299.988733-79.323944c5.769014-1.442254 10.095775 0 12.980281 5.769014l100.957747 148.552113 4.326761-432.676057-432.676057 124.033803z m451.425352 359.121127l-317.295774 76.439437-103.842254 24.518309 288.450704 112.495775 370.659155-76.439437-24.51831-14.422535-36.056338-21.633803-173.070422-102.4-4.326761 1.442254z m7.211268-480.270423l-4.326761 444.214085 20.19155-34.614085 72.112676-121.149295c2.884507-5.769014 11.538028-7.211268 17.307042-4.326761l157.205634 92.304225 2.884507-227.876056-265.374648-148.552113z m103.842253 311.526761L624.495775 391.211268l8.653521 5.769014 157.205634 93.746479 79.323943 47.594366 113.938028-132.687324-271.143662-162.974648zM125.476056 516.687324h2.884507l-4.32676 2.884507zM318.738028 709.949296l-74.997183 105.284507-23.076056-15.864789 74.997183-105.284507zM872.56338 552.743662l1.442254 1.442253-406.715493 83.650705-327.391549-128.360564h-1.442254L36.056338 332.078873l432.676056-113.938028L591.323944 399.864789l-310.084507 74.997183 325.949295-77.88169 177.397183 103.842253-177.397183-105.284507 100.957747-168.743662 295.661972 174.512676zM173.070423 508.033803l428.349295-103.842254 27.402817 17.307043c-191.819718 64.901408-233.64507 145.667606-223.549296 187.492957l-232.202816-100.957746z"  horiz-adv-x="1038" />
+
+    
+    <glyph glyph-name="youhuiquan3" unicode="&#58913;" d="M160.66 763.36v-664.64h725.06V763.36H160.66z m226.58-558.89H236.19v60.42h151.05v-60.42z m0 151.05H236.19V657.63h151.05v-302.11z m211.48-151.05H447.66v60.42h151.05v-60.42z m0 151.05H447.66V657.63h151.05v-302.11z m211.47-151.05H659.14v60.42h151.05v-60.42z m0 151.05H659.14V657.63h151.05v-302.11z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youhuiquan4" unicode="&#58916;" d="M155 768.01v-668.63h729.41V768.01H155z m243.14-554.66H185.4v60.78h212.75v-60.78z m0 106.38H185.4V654.04h212.75v-334.31z m303.92-106.38H489.32v60.78h212.75v-60.78z m0 106.38H489.32V654.04h212.75v-334.31z m151.96-106.38h-91.18v60.78h91.18v-60.78z m0 106.38h-91.18V654.04h91.18v-334.31z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youhuiquan2" unicode="&#58917;" d="M155 768.6v-668.63h729.41V768.6H155z m334.32-562.25H215.79v60.78h273.53v-60.78z m0 151.96H215.79V662.23h273.53v-303.92z m334.31-151.96H550.1v60.78h273.53v-60.78z m0 151.96H550.1V662.23h273.53v-303.92z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youhuiquan1" unicode="&#58918;" d="M167.75 755.97V95.2h720.84V755.97H167.75z m196.47-65.64c48.7 0 91.63-39.15 91.63-89.49 0-50.38-40.1-89.5-91.63-89.5-48.67 0-91.63 39.16-91.63 89.5s42.96 89.49 91.63 89.49z m434.26-529.49H257.85v60.07h540.63v-60.07z m0 124.21c0-1.53-485.52-1.53-485.52-1.53-5.52 0-11.02 1.53-16.55 4.58-11.05 7.65-11.05 18.35-1.84 27.52L408.6 448.64c9.19 7.65 22.08 9.18 33.12 3.07l99.29-58.12L719.4 552.63c9.21 7.63 53.35 47.39 79.08 3.06v-270.64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian8" unicode="&#58920;" d="M151.09 621.84v-518.02h736.13V621.84H151.09zM832.7 158.35H205.62V567.31H832.7v-408.96zM280.6 471.89h272.64v-54.53H280.6zM280.6 308.3h272.64v-54.53H280.6zM703.19 471.89h54.53v-218.11h-54.53z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian6" unicode="&#58922;" d="M292 454.32h276.21v-55.24H292zM292 288.59h276.21v-55.24H292zM140.08 606.24v-524.8h745.77v524.8H140.08z m524.81-469.56H195.33V551h469.56v-414.32z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian7" unicode="&#58926;" d="M276.91 444.98h270.64v-54.13H276.91zM276.91 282.59h270.64v-54.13H276.91zM155.12 607.36v-514.22h730.74V607.36H155.12z m676.61-460.09H209.25V553.24h622.48v-405.97zM669.34 336.72m-67.66 0a67.66 67.66 0 1 1 135.32 0 67.66 67.66 0 1 1-135.32 0Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian1" unicode="&#58919;" d="M869.88 177.72H148.17V385.48l14.99 3.88c14.33 3.71 24.34 16.55 24.34 31.22s-10.01 27.51-24.34 31.22l-14.99 3.88V663.45h721.71v-207.76l-14.99-3.88c-14.33-3.71-24.34-16.55-24.34-31.22s10.01-27.51 24.34-31.22l14.99-3.88v-207.77z m-681.71 40h641.71V356.34c-23.76 12.19-39.33 36.77-39.33 64.25 0 27.47 15.57 52.06 39.33 64.25V623.45H188.17v-138.62c23.76-12.19 39.33-36.77 39.33-64.25s-15.57-52.06-39.33-64.25v-138.61zM377.93 525.47h262.2v-52.44h-262.2zM377.93 368.15h262.2v-52.44h-262.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian3" unicode="&#58921;" d="M377.93 531.47h262.2v-52.44h-262.2zM377.93 374.15h262.2v-52.44h-262.2zM381.1 532.16h263.93v-52.79H381.1zM381.1 373.8h263.93v-52.79H381.1zM378.79 537.11h267.26v-53.45H378.79zM378.79 376.75h267.26v-53.45H378.79zM879.86 183.03H144.98V677.38h734.88v-200.36h-20c-25.81 0-46.82-21-46.82-46.82 0-25.81 21-46.81 46.82-46.81h20v-200.36z m-694.88 40h654.88V345.71c-38.26 9.05-66.82 43.5-66.82 84.49 0 40.99 28.55 75.44 66.82 84.49V637.38H184.98v-414.35z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian2" unicode="&#58923;" d="M377.93 531.47h262.2v-52.44h-262.2zM377.93 374.15h262.2v-52.44h-262.2zM381.1 532.16h263.93v-52.79H381.1zM381.1 373.8h263.93v-52.79H381.1zM783.05 182.25H243.08l-93.12 62.08v335.7l90.89 90.89h544.43l90.89-90.89v-335.7l-93.12-62.08z m-527.86 40h515.75l65.23 43.49V563.46l-67.46 67.46H257.42l-67.46-67.46v-297.73l65.23-43.48z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian5" unicode="&#58924;" d="M872.83 121.16h-737.4v496h737.4v-496z m-697.4 40h657.4v416h-657.4v-416zM760.54 228.46H237.72V509.87h522.82v-281.41z m-482.82 40h442.82V469.87H277.72v-201.41z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="kapian4" unicode="&#58927;" d="M377.93 531.47h262.2v-52.44h-262.2zM377.93 374.15h262.2v-52.44h-262.2zM381.1 532.16h263.93v-52.79H381.1zM381.1 373.8h263.93v-52.79H381.1zM378.79 537.11h267.26v-53.45H378.79zM378.79 376.75h267.26v-53.45H378.79zM377.35 537.25h266.33v-53.27H377.35zM377.35 377.45h266.33v-53.27H377.35zM876.74 184.34H144.28V677.1h732.46v-492.76z m-692.46 40h652.46V637.1H184.28v-412.76z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="app" unicode="&#58928;" d="M382.25 162.58c-17.76 0.04-32.26 14.53-32.3 32.3 0.02 17.78 14.51 32.3 32.3 32.34h242.29c17.79-0.04 32.28-14.55 32.3-32.34-0.04-17.76-14.53-32.26-32.3-32.3H382.25zM285.3 17.16c-48.98 0.04-88.86 39.92-88.9 88.9V687.57c0.04 48.98 39.92 88.86 88.9 88.9h436.12c49-0.02 88.9-39.9 88.94-88.9v-581.51c-0.04-49-39.94-88.88-88.94-88.9H285.3z m-0.01 710.71c-22.16-0.05-40.22-18.12-40.28-40.28v-581.54c0.05-22.17 18.12-40.25 40.28-40.3h436.15c22.19 0.03 40.28 18.1 40.34 40.28V687.57c-0.05 22.2-18.15 40.27-40.33 40.3H285.29z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fuzhufenge" unicode="&#58929;" d="M262.9 714.47v-47.53h491.12v47.53H896.6v-142.58h-47.53v-398.54h47.53v-142.58H754.01V78.3H262.9v-47.53H120.31V173.35h47.53V571.89h-47.53V714.47H262.9z m-31.69-572.8H152v-79.21h79.21v79.21z m633.7 0H785.7v-79.21h79.21v79.21z m-110.9 477.75H262.9v-47.53h-47.53v-398.54h47.53v-47.53h491.12v47.53h47.53V571.89h-47.53v47.53z m-522.8 63.37H152v-79.21h79.21v79.21z m633.7 0H785.7v-79.21h79.21v79.21z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="pc" unicode="&#58930;" d="M218.31 37.440000000000055c-19.19 0-28.13 8.94-28.13 28.13 0 19.19 8.94 28.13 28.13 28.13h570.46c19.19 0 28.13-8.94 28.13-28.13 0-19.19-8.94-28.13-28.13-28.13H218.31zM213.3 174.76c-47.7 0-86.51 41.05-86.51 91.52V667.72c0 50.46 38.81 91.52 86.51 91.52h580.48c47.7 0 86.51-41.05 86.51-91.52v-401.45c0-50.46-38.81-91.52-86.51-91.52H213.3z m0 528.22c-18.51 0-33.57-15.81-33.57-35.25v-401.45c0-19.44 15.06-35.25 33.57-35.25h580.48c18.51 0 33.57 15.81 33.57 35.25V667.72c0 19.44-15.06 35.25-33.57 35.25H213.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="h5" unicode="&#58932;" d="M605.46 564.44V723.16l176.4-158.72h-176.4zM779.3 70.36000000000001H204.5V725.72h362.56V554.2c0-15.36 12.8-30.72 30.72-30.72H779.3v-453.12z m40.97 517.12L636.19 761.56c-5.12 5.12-12.8 7.68-20.48 7.68H186.59c-15.36 0-28.16-12.8-28.16-28.16v-688.64c0-15.36 12.8-28.16 28.16-28.16h613.2c15.36 0 28.16 12.8 28.16 28.16V569.56c0 7.68-2.56 12.8-7.68 17.92z m0 0M476.3 236.76h-28.16v76.8H361.1v-76.8h-25.6V408.28h25.6v-71.68h87.04v71.68h28.16v-171.52z m156.16 12.8c-12.8-10.24-28.16-15.36-43.52-15.36-12.8 0-28.16 2.56-38.4 12.8-12.8 7.68-20.48 23.04-20.48 38.4h28.16c0-7.68 5.12-15.36 10.24-20.48 15.36-7.68 33.28-7.68 46.08 2.56 7.68 5.12 10.24 15.36 10.24 25.6 0 10.24-2.56 17.92-7.68 25.6-5.12 7.68-15.36 10.24-25.6 10.24-5.12 0-12.8 0-17.92-2.56-5.12-2.56-10.24-7.68-12.8-12.8h-25.6l10.24 94.72h99.84v-23.04h-81.92l-5.12-48.64c5.12 5.12 10.24 7.68 17.92 10.24 7.68 2.56 12.8 2.56 20.48 2.56 15.36 0 28.16-5.12 38.4-15.36 10.24-12.8 15.36-28.16 15.36-43.52 2.56-15.36-5.12-30.72-17.92-40.96z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tuwen" unicode="&#58933;" d="M795.61 37.4H239.92c-47.14 0.15-85.31 38.33-85.47 85.46V678.55c0.15 47.14 38.33 85.31 85.47 85.46H795.6c47.13-0.15 85.31-38.33 85.46-85.46v-555.69c-0.14-47.13-38.32-85.31-85.45-85.46zM239.92 721.28c-23.5 0-42.73-19.24-42.73-42.77V122.9c0-23.53 19.24-42.77 42.77-42.77h555.61c23.53 0 42.77 19.23 42.77 42.77V678.51c0 23.53-19.24 42.77-42.77 42.77H239.92z m0 0M175.77 106.6a25.723 25.723 0 0 0-19.24 10.38c-4.29 10.38-2.14 22.84 8.55 29.07l342.2 186.84c8.58 4.15 19.27 4.15 25.71-4.15l115.5-112.11L847.4 351.57c10.69 6.23 23.53 4.15 29.93-4.15 6.44-10.38 4.29-22.84-4.25-29.07l-213.9-145.32c-8.55-6.23-19.27-4.15-27.82 2.08L513.71 289.29 186.46 108.67c-4.29 0-6.4-2.07-10.69-2.07z m470.57 290.65c0-22.94 19.14-41.52 42.77-41.52 23.63 0 42.8 18.58 42.8 41.52 0.07 22.94-19 41.59-42.63 41.69-23.6 0.1-42.84-18.41-42.94-41.35v-0.34zM282.69 625.61h342.27c12.8 0 21.38-8.31 21.38-20.76 0-12.46-8.55-20.76-21.38-20.76H282.72c-12.84 0-21.38 8.3-21.38 20.76s8.55 20.76 21.38 20.76h-0.03z m0-103.8H475.2c12.84 0 21.42-8.31 21.42-20.76 0-12.46-8.58-20.76-21.42-20.76H282.72c-12.84 0-21.38 8.3-21.38 20.76 0 12.45 8.55 20.76 21.38 20.76h-0.03z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shangpinliebiao" unicode="&#58934;" d="M640.34 35.19c-47.94 0-86.94 39-86.94 86.94V271.71c0 47.94 39 86.94 86.94 86.94h149.58c47.94 0 86.94-39 86.94-86.94v-149.58c0-47.94-39-86.94-86.94-86.94H640.34z m0 278.05c-22.9 0-41.53-18.63-41.53-41.53v-149.58c0-22.9 18.63-41.53 41.53-41.53h149.58c22.9 0 41.53 18.63 41.53 41.53V271.71c0 22.9-18.63 41.53-41.53 41.53H640.34zM240.26 35.19c-47.94 0-86.94 39-86.94 86.94V271.71c0 47.94 39 86.94 86.94 86.94h149.58c47.94 0 86.94-39 86.94-86.94v-149.58c0-47.94-39-86.94-86.94-86.94H240.26z m0 278.05c-22.9 0-41.53-18.63-41.53-41.53v-149.58c0-22.9 18.63-41.53 41.53-41.53h149.58c22.9 0 41.52 18.63 41.52 41.53V271.71c0 22.9-18.63 41.53-41.52 41.53H240.26z m400.08 115.3c-47.94 0-86.94 39-86.94 86.94V665.05c0 47.94 39 86.94 86.94 86.94h149.58c47.94 0 86.94-39 86.94-86.94v-149.58c0-47.94-39-86.94-86.94-86.94H640.34z m0 278.04c-22.9 0-41.53-18.63-41.53-41.53v-149.58c0-22.9 18.63-41.52 41.53-41.52h149.58c22.9 0 41.53 18.63 41.53 41.52V665.05c0 22.9-18.63 41.53-41.53 41.53H640.34zM240.26 428.54c-47.94 0-86.94 39-86.94 86.94V665.05c0 47.94 39 86.94 86.94 86.94h149.58c47.94 0 86.94-39 86.94-86.94v-149.58c0-47.94-39-86.94-86.94-86.94H240.26z m0 278.04c-22.9 0-41.53-18.63-41.53-41.53v-149.58c0-22.9 18.63-41.52 41.53-41.52h149.58c22.9 0 41.52 18.63 41.52 41.52V665.05c0 22.9-18.63 41.53-41.52 41.53H240.26z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="leibieliebiao" unicode="&#58935;" d="M197.82 37.69c-22.31 0.01-40.48 18.17-40.51 40.48V717.52c0.03 22.29 18.19 40.45 40.48 40.48h118.36c22.29-0.03 40.45-18.19 40.48-40.48v-639.34c-0.03-22.27-18.17-40.43-40.45-40.48H197.82z m-6.88 33.59H323.1V724.4H190.94v-653.12zM458.26 37.69c-22.29 0.03-40.45 18.19-40.47 40.48V196.53c0.02 22.29 18.18 40.45 40.48 40.48h378.87c22.27-0.03 40.43-18.17 40.48-40.45V78.2c-0.01-22.31-18.17-40.48-40.48-40.51h0.01-378.89z m-6.88 33.63h392.67V203.45H451.38v-132.13z m6.88 226.85c-22.29 0.02-40.45 18.18-40.47 40.48V457.01c0.02 22.29 18.18 40.44 40.48 40.47h378.87c22.27-0.03 40.43-18.17 40.48-40.45v-118.36c-0.01-22.31-18.17-40.48-40.48-40.51h0.01-378.89z m-6.88 33.62h392.67V463.93H451.38v-132.14z m6.88 226.85c-22.29 0.03-40.45 18.19-40.47 40.48V717.48c0.01 22.31 18.17 40.48 40.48 40.51h378.87c22.29-0.03 40.45-18.19 40.48-40.48v-118.36c-0.01-22.31-18.17-40.49-40.48-40.51h0.01-378.89z m-6.88 33.63h392.67V724.4H451.38v-132.13z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shipin" unicode="&#58936;" d="M851.07 768.24H185.43c-28.29 0-49.92-21.63-49.92-49.92v-632.36c0-28.29 21.63-49.92 49.92-49.92h665.64c28.29 0 49.92 21.63 49.92 49.92V718.32c0 28.29-21.63 49.92-49.92 49.92z m-144.78-33.28l96.52-99.85H674.68l-96.52 99.85h128.13z m-166.41 0l96.52-99.85H508.26l-96.52 99.85h128.14z m-166.41 0l96.52-99.85H341.85l-96.52 99.85h128.14z m-204.68-16.64c0 9.98 6.66 16.64 16.64 16.64h21.63l96.52-99.85H168.79v83.21z m698.92-632.36c0-9.98-6.66-16.64-16.64-16.64H185.43c-9.98 0-16.64 6.66-16.64 16.64V601.83h698.93v-515.87z m0 549.15h-26.63l-96.52 99.85h106.5c9.98 0 16.64-6.66 16.64-16.64v-83.21z m0 0M451.68 177.48c8.32 0 18.3 1.66 26.63 6.66l189.71 109.83c33.28 18.3 33.28 64.9 0 83.2L478.31 487.01c-8.32 4.99-16.64 6.65-26.63 6.65-26.62 0-49.92-13.31-49.92-41.6v-232.98c0-28.29 23.3-41.6 49.92-41.6zM435.04 445.4c0 9.99 8.32 16.64 16.64 16.64 3.33 0 6.66 0 8.32-1.66l189.71-109.83c6.66-4.99 8.32-11.65 8.32-13.31 0-3.33 0-9.98-8.32-13.31l-189.7-109.84c-3.33-1.66-4.99-1.66-8.32-1.66-8.32 0-16.64 6.66-16.64 16.64V445.4z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tuwendaohang" unicode="&#58937;" d="M224.05 72.37c-24.95 0-45.25 20.3-45.25 45.25V653.49c0 24.95 20.3 45.25 45.25 45.25h593.02c24.95 0 45.25-20.3 45.25-45.25v-535.87c0-24.95-20.3-45.25-45.25-45.25H224.05z m-4.17 41.08h601.36v544.2H219.88v-544.2zM308.09 296.42h67.51c15 0 22.5-7.5 22.5-22.5s-7.5-22.5-22.5-22.5h-67.51c-15 0-22.5 7.5-22.5 22.5-0.01 14.99 7.5 22.5 22.5 22.5z m0 0M486.44 296.42h67.51c15 0 22.5-7.5 22.5-22.5s-7.5-22.5-22.5-22.5h-67.51c-15 0-22.5 7.5-22.5 22.5-0.01 14.99 7.5 22.5 22.5 22.5z m0 0M380.5 519.69c10.68 0 19.33-8.66 19.33-19.33v-77.32c0-10.68-8.65-19.33-19.33-19.33h-77.32c-10.68 0-19.33 8.65-19.33 19.33v77.32c0 10.67 8.65 19.33 19.33 19.33h77.32zM559.22 519.69c10.68 0 19.33-8.66 19.33-19.33v-77.32c0-10.68-8.65-19.33-19.33-19.33H481.9c-10.68 0-19.33 8.65-19.33 19.33v77.32c0 10.67 8.65 19.33 19.33 19.33h77.32zM737.93 519.69c10.68 0 19.33-8.66 19.33-19.33v-77.32c0-10.68-8.65-19.33-19.33-19.33h-77.32c-10.68 0-19.33 8.65-19.33 19.33v77.32c0 10.67 8.65 19.33 19.33 19.33h77.32z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zidingyi" unicode="&#58938;" d="M865.84 548.76v53.6c0 46.03-26.53 89.64-75.64 89.64H527.3l-10.14 27.03c-10.26 19.43-24.61 31.48-46.66 31.48H206.8c-44 0-79.77-36.63-79.77-81.65v-499.92c0-44.94 35.77-101.11 79.77-101.11h620.66c44 0 79.77 56.14 79.77 101.11V475.77c0 26.61-17.68 54.77-41.39 72.99z m-85.79 102.13c17.05 0 50.83 2.11 49.11-48.53v-33.9c-0.82 0.04 12.6 0.08-2.5 0.08h-229.5l-43.81 82.31h226.69v0.04z m90.59-491.92c0-17.98-28.13-53.72-44.98-53.72H205.04c-16.82 0-41.43 35.73-41.43 53.72V668.83c0 30.04 26.33 44.78 43.18 44.78h263.75c3.59 0 6.86-1.95 8.58-5.26l87.11-160.02c4.29-8.04 12.64-13.03 21.73-13.07H814.1c17.63 0 56.56-41.9 56.56-59.49v-316.8h-0.02z m0 0M325.19 653c-22.61-1.01-40.42-19.64-40.42-42.27 0-22.63 17.81-41.26 40.42-42.27 22.61 1.01 40.42 19.63 40.42 42.27 0 22.63-17.81 41.26-40.42 42.27"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiaochengxu" unicode="&#58939;" d="M508.58 784.3199999999999c-197.9 0-358.4-160.5-358.4-358.4 0-197.91 160.5-358.4 358.4-358.4 197.91 0 358.4 160.5 358.4 358.4 0.01 197.91-160.49 358.4-358.4 358.4z m0-665.6c-169.7 0-307.2 137.42-307.2 307.2s137.5 307.2 307.2 307.2c169.71 0 307.2-137.5 307.2-307.2 0.01-169.7-137.49-307.2-307.2-307.2z m0 0M591.2 615.48c-20.68 0-40.9-5.32-58.48-15.38-33.66-19.05-53.76-52.43-53.76-89.3v-166.92c0-16.55-9.7-32.03-25.79-41.29-9.82-5.42-20.35-8.15-31.3-8.15-31.25 0-56.68 22.18-56.68 49.45 0 8.43 2.14 16.12 6.5 23.1 6.55 11.38 18.47 19.97 33.52 24.25l2.28 0.5c15.58 0 27.79 12.22 27.79 27.79 0 15.57-12.2 27.79-27.79 27.79-5.72 0-11.75-0.99-18.95-3.14-27.26-8.1-50.06-25.3-64.25-48.5-9.6-16.1-14.68-34-14.68-51.79 0-57.9 50.5-105.05 112.57-105.05 21 0 41.18 5.53 58.14 15.88 33.68 18.98 53.78 52.37 53.78 89.32V510.47c0 16.55 9.7 32 25.81 41.3 9.8 5.41 20.3 8.15 31.27 8.15 31.43 0 57-22.19 57-49.45 0-8.34-2.15-16.03-6.45-23.02-6.63-11.17-18.6-19.82-33.7-24.37l-2.15-0.46c-15.58 0-27.79-12.22-27.79-27.78 0-15.57 12.2-27.79 27.79-27.79 5.52 0 10.97 0.9 18.95 3.14 27.26 8.1 50.06 25.3 64.25 48.5 9.6 16.1 14.68 34 14.68 51.79 0.01 57.89-50.48 105-112.56 105z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tuwenliebiao" unicode="&#58940;" d="M829.03 691.11H189.79c-34.8 0-63.04-20.49-63.04-45.75v-359.64c0-25.25 28.23-45.75 63.04-45.75h639.24c34.81 0 63.04 20.5 63.04 45.75V645.36c0 25.26-28.23 45.75-63.04 45.75z m-639.24-46.4h639.24c9.28 0 16.63-4.95 16.63-11.17v-222.25L697.16 500c-8.12 4.95-20.49 5.22-29.39 0.78l-184.46-93.16-97.84 46.83c-7.73 3.91-18.56 3.91-26.68 0l-185.63-88.48V633.53c0 6.23 7.35 11.18 16.63 11.18z m639.24-355.78H189.79c-9.28 0-16.63 4.95-16.63 11.17v27.58l199.16 94.78 187.17-89.8c10.44-4.95 25.13-3.36 32.48 3.64 7.35 7 5.03 16.9-5.41 21.85l-63.81 30.43 157.78 79.62 159.71-95.52c1.55-1.04 3.48-1.55 5.41-2.36v-70.27c0.01-6.17-7.34-11.12-16.62-11.12z m0 0M372.32 489.87c27.76 0 50.35 22.54 50.35 50.35 0 27.8-22.59 50.35-50.35 50.35-27.77 0-50.35-22.54-50.35-50.35 0-27.81 22.59-50.35 50.35-50.35z m0 0M346.14 540.22c0-9.36 4.99-18 13.09-22.67 8.1-4.68 18.08-4.68 26.18 0a26.184 26.184 0 0 1 13.09 22.67c0 9.35-4.99 17.99-13.09 22.67a26.164 26.164 0 0 1-26.18 0 26.184 26.184 0 0 1-13.09-22.67z m0 0M173.16 116.07h560.08v-46.41H173.16v46.41z m-1.93 77.34h371.25v-30.82H171.23v30.82z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youhuiquan" unicode="&#58941;" d="M372.55 399.84h30.89v85.54h-30.89v-85.54z m0-47.13h30.89v-85.55h-30.89v85.55z m0 0M858.98 453.69c1.7 0.79 21.62 8.71 22.47 9.11h3.39V602.4c0 30.89-26.71 55.84-59.78 55.84H202.68c-32.65 0-59.78-24.95-59.78-55.84v-138.41l2.54-0.79c24.59-5.94 46.64-20.59 58.93-38.41 12.72-18.62 18.66-34.85 17.81-50.69-0.84-15.44-6.78-32.08-18.66-48.71-11.87-17.03-32.65-30.1-58.51-36.04l-2.54-0.79v-138.81c0-30.89 26.71-55.84 59.78-55.84h622.38c32.65 0 59.78 24.95 59.78 55.84v139.6l-2.54 0.79c-32.23 8.32-57.66 32.47-68.26 64.16-9.75 28.91-1.27 58.61 24.16 83.96 6.37 5.93 13.58 11.08 21.21 15.43z m-89.87-77.22c0-45.15 29.25-87.52 80.55-117.23l1.7-0.79v-108.72c0-13.07-11.45-23.36-25.02-23.36H384.99v55.05h-32.23v-55.05H201.41c-13.99 0-25.01 10.69-25.01 23.36V253.3l1.69 0.79c39.01 21.78 80.55 65.74 80.55 122.38s-41.55 100.59-80.55 122.38l-1.69 0.79V602.8c0 13.07 11.45 23.37 25.01 23.37h151.36v-55.45h33.5v55.45h440.08c13.99 0 25.02-10.7 25.02-23.37v-108.32l-1.7-0.79c-50.89-29.3-80.56-72.07-80.56-117.22z m0 0M637.9 488.94l-40-59.8c-0.79-1.19-2.38-3.96-4.75-7.52h-9.9c-1.59 2.77-3.17 5.15-4.36 6.73l-41.58 60.99h-40.79l47.53-67.33h-44.36v-34.06h70.49v-28.52h-70.49v-34.06h70.49v-68.51h32.87v68.51h75.25v34.06h-75.25v28.52h75.25v34.06h-45.94l49.11 67.33H637.9v-0.4z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wenben2" unicode="&#58942;" d="M805.33 746.37H224.25c-43.46 0-64.95-21.52-64.95-64.11v-584.49c0-41.32 21.52-63.26 62.42-63.26h585.72c40.9 0 62.42 21.94 62.42 62.81V681.45c0 43.43-21.52 64.92-64.53 64.92z m25.7-643.48c0-25.28-3.79-29.07-28.68-29.07H226.32c-24.89 0-28.68 3.79-28.68 29.07V678.92c0 24.44 4.21 28.68 29.53 28.68h574.38c25.28 0 29.53-4.21 29.53-28.68l-0.05-576.03z m0 0M514.74 546.07h143.8c17.73 0 26.19-5.93 26.58-18.96 0.46-13.48-8-19.8-26.97-20.26-35 0-70.04-0.84-104.98 0.45-13.94 0.39-19.03-2.56-19.03-18.18 0.84-86.86 0.45-173.72 0.45-260.19 0-4.21 0.46-8.85 0-13.1-1.3-12.25-7.16-20.64-20.64-20.26-13.48 0.46-18.12 8.85-18.12 21.52V449.94c0 15.17-0.39 30.37 0 45.15 0.45 9.27-2.95 11.8-11.8 11.8-38.37-0.45-76.36-0.45-114.7 0-17.73 0-25.73 6.78-24.89 20.26 0.78 15.59 11.34 18.93 24.83 18.93h145.47z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="pinpailiebiao" unicode="&#58944;" d="M668.73 499.88c0 91.54-63.63 124.96-155.17 124.96H376.24v-449.49h48.98V369.43h86.05l112.14-194.08h56.76L562.54 374.46c62.75 7.6 109.04 62.27 106.19 125.42z m-163.41-88.8h-80.1v172.1h80.1c72.78 0 112.6-21.97 112.6-83.76s-39.82-88.34-112.6-88.34z m0 0M516.76 766.27c-202.24 0-366.18-163.94-366.18-366.18s163.94-366.18 366.18-366.18 366.18 163.94 366.18 366.18S719 766.27 516.76 766.27z m0-686.59c-176.96 0-320.41 143.45-320.41 320.41 0 176.96 143.45 320.41 320.41 320.41 176.96 0 320.41-143.45 320.41-320.41 0-176.96-143.45-320.41-320.41-320.41z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dianputoubu" unicode="&#58945;" d="M262.48 36.19c-25.9 0-46.98 21.08-46.98 46.98V426.84c0 10.75 8.74 19.49 19.49 19.49 10.75 0 19.49-8.74 19.49-19.49v-351.68h515.24V426.84c0 10.75 8.74 19.49 19.49 19.49 10.75 0 19.49-8.74 19.49-19.49v-343.68c0-25.9-21.08-46.98-46.98-46.98H262.48zM761.72 34.18H262.48c-27.01 0-48.98 21.97-48.98 48.98V426.84c0 11.85 9.64 21.49 21.49 21.49 11.85 0 21.49-9.64 21.49-21.49v-349.68h511.24V426.84c0 11.85 9.64 21.49 21.49 21.49 11.85 0 21.49-9.64 21.49-21.49v-343.68c0-27-21.97-48.98-48.98-48.98zM234.99 444.33c-9.64 0-17.49-7.85-17.49-17.49v-343.68c0-24.8 20.18-44.98 44.98-44.98h499.24c24.8 0 44.98 20.18 44.98 44.98V426.84c0 9.65-7.85 17.49-17.49 17.49-9.64 0-17.49-7.85-17.49-17.49v-353.68H252.48V426.84c0 9.65-7.85 17.49-17.49 17.49zM313.24 382.12c-26.53 0-50.35 5.53-70.78 16.42-0.26 0.14-0.55 0.3-0.84 0.47l-0.13 0.08-0.14 0.07c-48.41 26.31-78.52 76.89-78.59 132.02 0 9.47 5.61 24.11 47.68 115.99l0.97 2.13c10.1 22.07 19.64 42.93 25.83 57.29 7.4 17.21 24.32 28.32 43.11 28.32h465.07c18.91 0 35.88-11.23 43.24-28.6 6.3-14.89 15.98-36.42 26.23-59.21 41.13-91.5 46.61-106.07 46.56-115.48a150.258 150.258 0 0 0-78.28-131.97c-20.63-11.3-44.78-17.1-71.8-17.23-34.7 0-68.49 11.96-95.1 33.67l-5.06 4.13-5.06-4.13c-26.27-21.47-59.5-33.45-93.57-33.74-34.51 0.23-68.06 12.18-94.48 33.66l-5.06 4.12-5.05-4.13c-26.59-21.75-60.23-33.78-94.75-33.88z m-51.7 50.44c14.58-7.6 31.95-11.46 51.63-11.46 32.87 0.09 63.81 14.55 84.9 39.66a19.45 19.45 0 0 0 14.9 6.96c5.78 0 11.21-2.53 14.92-6.93 20.95-24.87 51.78-39.25 84.58-39.45h0.11c32.31 0.26 62.8 14.67 83.66 39.53 3.46 4.12 8.9 6.49 14.93 6.49 6.03 0 11.48-2.36 14.95-6.48 21.04-25.08 52.07-39.46 85.13-39.46 20.43 0.1 38.31 4.29 53.19 12.44 34.83 19.02 57.05 55.5 57.98 95.18l0.03 1.29-0.38 1.23c-3.9 12.8-22.45 54.41-42.76 99.57-9.86 21.92-20.05 44.59-26.55 59.94l-2.07 4.88H275.08L273 691.1c-6.5-15.09-16.98-38-27.12-60.15-16.62-36.31-39.35-85.99-43.73-99.96l-0.4-1.27 0.03-1.33c1.04-39.99 23.61-76.54 58.93-95.38l0.83-0.45zM313.24 380.12c-26.87 0-51 5.61-71.72 16.66-0.29 0.16-0.61 0.33-0.92 0.52l-0.2 0.11c-49.06 26.66-79.57 77.92-79.63 133.78 0 9.8 4.7 22.56 47.86 116.83l0.97 2.13c10.09 22.06 19.63 42.9 25.81 57.25 7.71 17.94 25.36 29.53 44.94 29.53h465.07c19.71 0 37.41-11.71 45.08-29.82 6.28-14.84 15.93-36.31 26.15-59.04l0.06-0.13c42.2-93.87 46.78-106.57 46.73-116.31 0.01-55.74-30.38-106.98-79.32-133.72-20.92-11.46-45.4-17.34-72.75-17.47-35.18 0-69.41 12.12-96.38 34.12l-3.8 3.1-3.79-3.1c-26.62-21.76-60.3-33.9-94.82-34.19-34.99 0.23-68.99 12.34-95.76 34.1l-3.8 3.09-3.79-3.1c-26.91-22.05-61.01-34.24-95.99-34.34z m-32.9 352.8c-17.99 0-34.19-10.64-41.27-27.11-6.2-14.39-15.74-35.25-25.85-57.33l-0.97-2.13c-41.58-90.83-47.5-106.18-47.5-115.16 0.06-54.39 29.77-104.31 77.54-130.26l0.34-0.19c0.26-0.16 0.53-0.3 0.77-0.43 20.13-10.73 43.62-16.18 69.82-16.18 34.07 0.1 67.26 11.97 93.48 33.42l6.31 5.17 6.33-5.15c26.07-21.19 59.18-32.98 93.23-33.21 33.59 0.28 66.37 12.1 92.3 33.29l6.32 5.17 6.33-5.16c26.26-21.42 59.58-33.22 93.84-33.22 26.67 0.13 50.51 5.84 70.84 16.98 47.65 26.04 77.25 75.93 77.24 130.22 0.04 8.93-5.72 24.21-46.38 114.66l-0.06 0.13c-10.23 22.75-19.89 44.24-26.19 59.12-7.05 16.63-23.3 27.38-41.4 27.38H280.34z m32.84-313.82c-20.01 0-37.69 3.93-52.56 11.68l-0.88 0.48c-35.92 19.17-58.9 56.37-59.96 97.08l-0.04 1.66 0.5 1.59c4.41 14.09 27.19 63.86 43.82 100.19 10.13 22.14 20.61 45.03 27.1 60.1l2.6 6.05h478.27l2.58-6.1c6.49-15.32 16.67-37.96 26.51-59.85 20.36-45.28 38.93-86.95 42.87-99.86l0.47-1.54-0.04-1.61c-0.94-40.4-23.56-77.53-59.02-96.89-15.17-8.31-33.39-12.58-54.14-12.68-33.67 0-65.26 14.64-86.68 40.18-3.09 3.66-7.98 5.77-13.41 5.77-5.44 0-10.32-2.1-13.39-5.77-21.24-25.31-52.29-39.98-85.18-40.25h-0.12c-33.41 0.21-64.79 14.84-86.12 40.16a17.476 17.476 0 0 1-13.39 6.22c-5.17 0-10.04-2.28-13.37-6.24-21.46-25.56-52.96-40.28-86.42-40.37z m-50.69 15.22c14.29-7.44 31.34-11.22 50.69-11.22 32.27 0.09 62.66 14.29 83.37 38.95a21.42 21.42 0 0 0 16.43 7.67c6.37 0 12.36-2.79 16.45-7.65 20.57-24.42 50.85-38.54 83.06-38.74h0.09c31.71 0.26 61.65 14.41 82.14 38.82 3.83 4.58 9.83 7.2 16.46 7.2 6.62 0 12.63-2.62 16.48-7.19 20.66-24.63 51.13-38.75 83.61-38.75 20.07 0.1 37.64 4.2 52.23 12.19 34.21 18.68 56.03 54.5 56.94 93.48l0.02 0.96-0.28 0.92c-3.87 12.68-22.39 54.23-42.67 99.34-9.87 21.96-20.06 44.62-26.57 59.98l-1.55 3.66h-473l-1.56-3.63c-6.51-15.12-17-38.03-27.14-60.19-16.59-36.24-39.3-85.87-43.64-99.72l-0.3-0.95 0.03-1c1.02-39.27 23.19-75.16 57.87-93.67l0.84-0.46zM485.73 132.4V261.85c0 10.75 8.74 19.49 19.49 19.49h13.74c10.75 0 19.49-8.74 19.49-19.49V132.4h-52.72z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="mofang" unicode="&#58946;" d="M169.68 719.3h135.06v-135.06H169.68zM169.68 551.81h135.06v-135.06H169.68zM169.68 384.33h135.06v-135.06H169.68zM169.68 216.84h135.06v-135.06H169.68zM345.68 719.3h135.06v-135.06H345.68zM345.68 551.81h135.06v-135.06H345.68zM345.68 384.33h135.06v-135.06H345.68zM345.68 216.84h135.06v-135.06H345.68zM521.68 719.3h135.06v-135.06H521.68zM521.68 551.81h135.06v-135.06H521.68zM521.68 384.33h135.06v-135.06H521.68zM521.68 216.84h135.06v-135.06H521.68zM697.68 719.3h135.06v-135.06H697.68zM697.68 551.81h135.06v-135.06H697.68zM697.68 384.33h135.06v-135.06H697.68z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yihangliangge" unicode="&#58947;" d="M265.79 625.55h212.6v-473.98h-212.6zM566.46 625.55h212.6v-473.98h-212.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yihangsange" unicode="&#58948;" d="M179.65 625.55h163.7v-473.98h-163.7zM425.01 625.55h163.7v-473.98h-163.7zM670.37 625.55h163.7v-473.98h-163.7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yihangsige" unicode="&#58949;" d="M174.65 625.55h122.14v-473.98H174.65zM369.86 625.55H492v-473.98H369.86zM565.07 625.55h122.14v-473.98H565.07zM760.28 625.55h122.14v-473.98H760.28z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yizuoliangyou" unicode="&#58950;" d="M169.55 720.4h275.64v-640.9H169.55zM556.37 720.4h275.64v-275.64H556.37zM556.37 355.15H673v-275.64H556.37zM715.62 355.15h116.4v-275.64h-116.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="lianghangliangge" unicode="&#58951;" d="M169.55 720.4h275.64v-275.64H169.55zM556.37 720.4h275.64v-275.64H556.37zM169.55 355.15h275.64v-275.64H169.55zM556.37 355.15h275.64v-275.64H556.37z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yishangliangxia" unicode="&#58952;" d="M169.55 720.4h661.69v-275.64H169.55zM556.37 720.4h275.64v-275.64H556.37zM556.37 355.15h275.64v-275.64H556.37zM181.22 355.15h275.64v-275.64H181.22z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="close" unicode="&#58882;" d="M512 896c282.784 0 512-229.216 512-512s-229.216-512-512-512S0 101.21600000000001 0 384 229.216 896 512 896z m-135.776-330.976a32 32 0 1 1-45.248-45.248L466.752 384l-135.776-135.776a32 32 0 1 1 45.248-45.248L512 338.75199999999995l135.776-135.776a32 32 0 1 1 45.248 45.248L557.248 384l135.776 135.776a32 32 0 1 1-45.248 45.248L512 429.248z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tihuantupian" unicode="&#58988;" d="M620.544 758.4c103.936-10.432 187.328-72.96 205.12-180.224h-60.16l97.088-144.448 97.152 144.448h-67.008c-17.792 144.448-127.168 238.336-265.344 251.712-19.136 1.536-36.864-14.848-36.864-35.712 1.28-17.92 13.568-34.24 30.016-35.776z m-150.4 73.024H132.416c-19.136 0-34.176-16.384-34.176-37.248v-321.728c0-20.864 15.04-37.248 34.176-37.248h337.728c19.136 0 34.176 16.384 34.176 37.248V794.176c0 20.864-15.04 37.248-34.176 37.248z m-32.832-324.736H165.248V759.936h272.128v-253.248h-0.064zM404.48 12.16c-116.224 10.432-205.12 87.872-209.216 216h64.256L162.496 372.608l-97.088-144.448h64.256c2.688-165.376 118.912-272.576 268.032-287.488 19.136-1.472 36.928 14.912 36.928 35.776a35.648 35.648 0 0 1-30.144 35.712z m489.6 323.264H556.288c-19.2 0-34.176-16.448-34.176-37.248v-323.264c0-20.8 14.976-37.184 34.176-37.184h337.728c19.136 0 34.112 16.384 34.112 37.184V298.176c0.064 20.8-16.32 37.248-34.048 37.248z m-32.896-324.736H589.12V262.464h272.064v-251.776z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xuanze" unicode="&#58925;" d="M512 768c211.2 0 384-172.8 384-384S723.2 0 512 0 128 172.8 128 384s172.8 384 384 384m0 64C262.4 832 64 633.6 64 384s198.4-448 448-448 448 198.4 448 448S761.6 832 512 832z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xuanze-danxuan" unicode="&#58977;" d="M512 384m-320 0a320 320 0 1 1 640 0 320 320 0 1 1-640 0ZM512 896C228.266667 896 0 667.733333 0 384s228.266667-512 512-512 512 228.266667 512 512S795.733333 896 512 896z m0-981.333333C251.733333-85.33333300000004 42.666667 123.73333300000002 42.666667 384S251.733333 853.333333 512 853.333333s469.333333-211.2 469.333333-469.333333-209.066667-469.333333-469.333333-469.333333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xuanze1" unicode="&#58904;" d="M512 832C262.4 832 64 633.6 64 384s198.4-448 448-448 448 198.4 448 448S761.6 832 512 832z m0-844.8c-217.6 0-396.8 179.2-396.8 396.8S294.4 780.8 512 780.8 908.8 601.6 908.8 384 729.6-12.8 512-12.8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jinggao" unicode="&#58888;" d="M511.3 383.8m-447.3 0a447.3 447.3 0 1 1 894.6 0 447.3 447.3 0 1 1-894.6 0ZM511.1 93.5c-27 0-49 21.9-49 49 0 27 21.9 48.9 49 48.9s49-21.9 49-48.9c0-27.1-21.9-49-49-49z m0 160c-17.9 0-32.5 29.1-32.5 64.9l-32.5 292.2c0 35.9 29.1 64.9 64.9 64.9 35.9 0 64.9-29.1 64.9-64.9l-32.5-292.2c0.2-35.8-14.4-64.9-32.3-64.9z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shanchu1" unicode="&#58961;" d="M519.606857 896a192.292571 192.292571 0 0 1-192.073143-185.782857H84.992a48.932571 48.932571 0 1 1 0-97.792h54.052571v-547.766857c0-102.838857 69.778286-186.88 155.867429-186.88h439.222857c86.089143 0 155.940571 83.529143 155.940572 186.88V611.913143h48.859428a48.932571 48.932571 0 1 1 0 97.718857H711.168A191.561143 191.561143 0 0 1 519.606857 896zM412.379429 718.921143c3.584 49.737143 46.665143 88.502857 99.84 88.502857 53.248 0 96.329143-38.765714 99.401142-88.502857H412.379429zM300.397714-33.133714c-31.012571 0-65.097143 39.131429-65.097143 95.085714V608.256h575.488v-546.816c0-55.954286-34.084571-95.085714-65.097142-95.085714H300.470857v0.512zM368.128 99.181714c24.356571 0 44.251429 21.650286 44.251429 48.786286v278.674286c0 27.136-19.894857 48.786286-44.251429 48.786285-24.356571 0-44.251429-21.650286-44.251429-48.786285v-278.674286c0-27.062857 19.309714-48.786286 44.251429-48.786286z m154.916571 0c24.356571 0 44.324571 21.650286 44.324572 48.786286v278.674286c0 27.136-19.968 48.786286-44.324572 48.786285-24.356571 0-44.251429-21.650286-44.251428-48.786285v-278.674286c0-27.062857 19.894857-48.786286 44.251428-48.786286z m132.827429 0c24.356571 0 44.251429 21.650286 44.251429 48.786286v278.674286c0 27.136-19.894857 48.786286-44.251429 48.786285-24.356571 0-44.251429-21.650286-44.251429-48.786285v-278.674286c0-27.062857 19.309714-48.786286 44.251429-48.786286z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="chakan" unicode="&#58914;" d="M457.728 896C204.8 896 0 690.688 0 437.76s205.312-457.728 458.24-457.216c252.416 0 457.216 204.8 457.216 457.728C915.456 691.2 710.656 896 457.728 896m261.632-719.36c-144.384-144.384-378.88-144.384-523.264 0s-144.384 378.88 0 523.264 378.88 144.384 523.264 0c69.632-69.632 108.544-163.84 108.544-261.632 0-98.304-38.912-192.512-108.544-261.632M1008.64-51.2l-103.936 103.424c-17.92 17.92-46.08 17.92-64 0s-17.92-46.08 0-64l103.936-103.424c18.432-15.872 45.568-15.872 64 0 17.92 16.384 18.944 43.52 2.56 61.44-0.512 1.024-1.536 1.536-2.56 2.56zM665.6 389.12H256c-22.528 0-40.96 18.432-40.96 40.96s18.432 40.96 40.96 40.96h409.6c22.528 0 40.96-18.432 40.96-40.96s-18.432-40.96-40.96-40.96zM419.84 225.28V634.88c0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96v-409.6c0-22.528-18.432-40.96-40.96-40.96s-40.96 18.432-40.96 40.96z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="iconfontquestion" unicode="&#58890;" d="M512 819C271.8 819 77 624.2 77 384c0-240.2 194.8-435 435-435 240.2 0 435 194.8 435 435C947 624.2 752.2 819 512 819L512 819zM509.2 79.6c-35.4 0-64.2 28.2-64.2 62.9s28.7 62.9 64.2 62.9c35.4 0 64.2-28.2 64.2-62.9S544.7 79.6 509.2 79.6L509.2 79.6zM681.6 435.5c-12.6-19.8-39.3-46.7-80.3-80.8-21.2-17.6-34.4-31.8-39.5-42.6-5.1-10.7-7.5-29.9-7-57.6l-91.4 0c-0.2 13.1-0.4 21.1-0.4 24 0 29.6 4.9 53.9 14.7 73 9.8 19.1 29.4 40.6 58.7 64.4 29.3 23.9 46.9 39.5 52.6 46.9 8.8 11.7 13.3 24.6 13.3 38.6 0 19.5-7.9 36.2-23.5 50.2-15.6 13.9-36.8 20.9-63.3 20.9-25.6 0-47-7.3-64.2-21.8-17.2-14.5-32-46.5-35.5-66.3-3.3-18.7-93.4-26.6-92.3 11.3 1.1 37.9 20.8 79 54.6 108.8 33.8 29.8 78.2 44.7 133.1 44.7 57.8 0 103.7-15.1 137.9-45.3 34.2-30.2 51.2-65.3 51.2-105.4C700.4 476.3 694.1 455.3 681.6 435.5L681.6 435.5z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fangkuai" unicode="&#59199;" d="M538.245 778.579l0.61-0.268 2.827-1.255v0.021L833.824 647.32l0.713-0.322c23.22-10.643 38.226-33.732 38.524-59.278l0.004-0.775V180.28c-0.305-25.548-15.313-48.639-38.535-59.279l-0.706-0.319-294.97-130.993-0.61-0.268a66.076 66.076 0 0 0-52.42 0l-0.61 0.268L190.24 120.682l-0.713 0.321c-23.22 10.643-38.226 33.736-38.523 59.283l-0.005 0.775V587.727c0.305 25.545 15.313 48.633 38.535 59.273l0.706 0.319L485.214 778.31l0.611 0.268a66.066 66.066 0 0 0 52.42 0zM215.049 525.912v-346.157L485.681 59.57V409.945L215.05 525.912z m593.968-2.452L549.732 412.375v-347.767l259.285 115.147V523.46zM512.032 720.13L223.47 591.99l291.446-124.904L803.41 590.745 512.032 720.13z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shanchu" unicode="&#58931;" d="M907.618072 663.257647 744.713682 663.257647 744.713682 779.617048c0 12.852708-10.419786 23.272495-23.272495 23.272495L302.556765 802.889543c-12.852708 0-23.272495-10.418762-23.272495-23.272495l0-116.360425L116.380904 663.256623c-12.852708 0-23.272495-10.419786-23.272495-23.272495s10.418762-23.272495 23.272495-23.272495l791.237168 0c12.852708 0 23.272495 10.419786 23.272495 23.272495S920.469756 663.257647 907.618072 663.257647zM325.829259 756.345577l372.340458 0 0-93.08793L325.829259 663.257647 325.829259 756.345577zM791.257647 523.637015c-12.852708 0-23.272495-10.418762-23.272495-23.272495l0-488.712146L256.012799 11.652375 256.012799 500.364521c0 12.852708-10.418762 23.272495-23.272495 23.272495s-23.272495-10.418762-23.272495-23.272495l0-511.983617c0-12.852708 10.418762-23.272495 23.272495-23.272495l558.516318 0c12.852708 0 23.272495 10.419786 23.272495 23.272495L814.529118 500.364521C814.529118 513.217229 804.110355 523.637015 791.257647 523.637015zM442.189684 128.012799l0 372.351721c0 12.852708-10.418762 23.272495-23.272495 23.272495s-23.272495-10.418762-23.272495-23.272495l0-372.351721c0-12.852708 10.418762-23.272495 23.272495-23.272495S442.189684 115.160091 442.189684 128.012799zM628.353257 128.012799l0 372.351721c0 12.852708-10.419786 23.272495-23.272495 23.272495s-23.272495-10.418762-23.272495-23.272495l0-372.351721c0-12.852708 10.419786-23.272495 23.272495-23.272495S628.353257 115.160091 628.353257 128.012799z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tupian" unicode="&#58954;" d="M432.888596 240.596222 359.342127 342.35367C349.598306 355.835029 333.800712 355.83489 324.05699 342.35367L188.471613 154.76041C178.727792 141.27905 184.541661 130.350499 201.457031 130.350499L447.704979 130.350499 822.658642 130.350499C839.583509 130.350499 845.267916 141.25515 835.42945 154.706718L620.563382 448.480695C610.659782 462.021318 594.773609 461.932263 584.935143 448.480695L432.888596 240.596222 432.888596 240.596222ZM273.271058 548.126148a58.4 58.4 0 1 0 119.364471 0 58.4 58.4 0 1 0-119.364471 0ZM109.081528 697.331737 914.918473 697.331737C906.5326 697.331737 899.934531 704.008842 899.934531 712.19925L899.934531 55.80075C899.934531 64.008349 906.565377 70.668263 914.918473 70.668263L109.081528 70.668263C117.4674 70.668263 124.065469 63.991158 124.065469 55.80075L124.065469 712.19925C124.065469 703.991651 117.434624 697.331737 109.081528 697.331737ZM64.383234 55.80075C64.383234 31.187602 84.345684 10.986028 109.081528 10.986028L914.918473 10.986028C939.585548 10.986028 959.616766 31.105061 959.616766 55.80075L959.616766 712.19925C959.616766 736.812398 939.654316 757.013972 914.918473 757.013972L109.081528 757.013972C84.414452 757.013972 64.383234 736.894939 64.383234 712.19925L64.383234 55.80075Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tupian1" unicode="&#58910;" d="M937.472 793.6H91.136c-46.08 0-83.456-37.376-83.456-83.456V54.272c0-46.08 37.376-83.456 83.456-83.456h846.336c46.08 0 83.456 37.376 83.456 83.456V710.144c0 46.08-37.376 83.456-83.456 83.456zM91.136 732.16h846.336c12.288 0 22.016-9.728 22.016-22.016v-437.248L762.88 447.488c-10.752 9.728-27.136 10.24-38.912 1.536l-244.224-183.296-129.536 92.16c-10.24 7.68-24.576 7.68-35.328 0l-245.76-174.08V710.144c0 12.288 9.728 22.016 22.016 22.016z m846.336-699.904H91.136c-12.288 0-22.016 9.728-22.016 22.016v54.272L332.8 294.912l247.808-176.64c13.824-9.728 33.28-6.656 43.008 7.168 9.728 13.824 6.656 33.28-7.168 43.008l-84.48 59.904 208.896 156.672 211.456-187.904c2.048-2.048 4.608-3.072 7.168-4.608v-138.24c0-12.288-9.728-22.016-22.016-22.016zM312.32 424.96c70.656 0 128 57.344 128 128S382.976 680.96 312.32 680.96 184.32 623.616 184.32 552.96s57.344-128 128-128z m0 194.56c36.864 0 66.56-29.696 66.56-66.56s-29.696-66.56-66.56-66.56-66.56 29.696-66.56 66.56 29.696 66.56 66.56 66.56z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tuodongweizhi" unicode="&#59139;" d="M369 495.5c4.2-4.6 9.9-6.9 15.6-6.9 5.1 0 10.3 1.9 14.3 5.6 8.7 8 9.2 21.5 1.3 30.1L315 617.4c-8 8.8-23.3 8.8-31.3 0l-85.3-93.1c-8-8.7-7.4-22.2 1.3-30.1 8.7-8 22.1-7.4 30.1 1.3l48.4 52.8v-328.2l-48.4 52.8c-8 8.7-21.4 9.2-30.1 1.3-8.7-8-9.2-21.5-1.3-30.1l85.3-93.1 0.3-0.3c0.6-0.6 1.4-1.2 2.1-1.8l1.2-1c0.8-0.6 1.7-1 2.7-1.5 0.3-0.2 0.6-0.4 1-0.6 1.1-0.5 2.3-0.8 3.5-1.1l0.6-0.2c1.4-0.3 2.8-0.5 4.3-0.5s3 0.2 4.3 0.5l0.6 0.2c1.2 0.3 2.4 0.6 3.5 1.1 0.3 0.1 0.6 0.4 1 0.5 0.9 0.5 1.8 0.9 2.7 1.5 0.4 0.3 0.8 0.6 1.2 1l2.1 1.8 0.3 0.3 85.3 93.1c8 8.7 7.4 22.2-1.3 30.1-8.7 8-22.1 7.4-30.1-1.3L320.6 220V548.3l48.4-52.8zM733.5 515h-270c-13.8 0-25 11.2-25 25s11.2 25 25 25h270c13.8 0 25-11.2 25-25s-11.2-25-25-25zM734 360H464c-13.8 0-25 11.2-25 25s11.2 25 25 25h270c13.8 0 25-11.2 25-25s-11.2-25-25-25zM734 205H464c-13.8 0-25 11.2-25 25s11.2 25 25 25h270c13.8 0 25-11.2 25-25s-11.2-25-25-25z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="add2" unicode="&#58883;" d="M810.666667 768H213.333333c-47.146667 0-85.333333-38.186667-85.333333-85.333333v-597.333334c0-47.146667 38.186667-85.333333 85.333333-85.333333h597.333334c47.146667 0 85.333333 38.186667 85.333333 85.333333V682.666667c0 47.146667-38.186667 85.333333-85.333333 85.333333z m-85.333334-426.666667h-170.666666v-170.666666h-85.333334v170.666666h-170.666666v85.333334h170.666666v170.666666h85.333334v-170.666666h170.666666v-85.333334z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wenben" unicode="&#58953;" d="M692.2597343921661 13.21142578125H331.711297750473v30.689996480941772a563.3140236139297 563.3140236139297 0 0 0 48.088091611862176 14.83154296875c16.200274229049683 4.278552532196046 33.656305074691765 7.757592201232912 52.39561200141907 10.638445615768433v630.340576171875h-136.73552870750427l-57.244107127189636-151.53810381889343H211.2339789867401c-2.1675199270248413 14.118209481239319-3.9642512798309326 30.233752727508545-5.419161915779114 48.23148250579833-1.4541864395141602 17.939794063568115-2.6809751987457275 36.30831241607666-3.7933409214019784 55.10410666465761-1.1123657226562498 18.59736442565918-1.9683659076690674 37.078857421875-2.6527315378189087 55.019375681877136C198.6264432668686 724.469366312027 198.2563788890838 740.6413968801498 198.2563788890838 754.78857421875h627.4886906147003c0-14.147177338600159-0.3997564315795899-30.090361833572388-1.1123657226562498-47.689059376716614-0.7415771484374999-17.655909061431885-1.6547888517379765-35.852792859077454-2.766430377960205-54.56313192844391s-2.139276266098023-37.078857421875-3.251641988754273-55.10410666465761c-1.0841220617294314-17.998453974723816-2.7099430561065674-34.48406159877777-4.9064308404922485-49.28736090660096h-28.408053517341607l-56.75889551639557 151.53810381889343H592.8891206979752V69.31492352485657c18.71033906936645-3.5659432411193848 36.22285723686218-7.07395076751709 52.366644144058235-10.638445615768433 16.229242086410522-3.508731722831726 31.85957372188568-8.415162563323973 47.00469374656678-14.83154296875v-30.633509159088135z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="A" unicode="&#58880;" d="M832 0H730.56l-72.576 210.24H361.856L293.44 0H192l270.848 768h98.24L832 0zM629.504 297.024L522.112 616.32c-3.392 10.176-7.04 28.096-11.008 53.504H508.8c-3.392-23.168-7.232-40.96-11.456-53.504l-106.56-319.296h238.72z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wenben1" unicode="&#59586;" d="M447.326316 734.315789H210.189474c0-26.947368 5.389474-48.505263 5.389473-70.063157v-113.178948h26.947369c5.389474 32.336842 5.389474 53.894737 10.778947 75.452632 5.389474 16.168421 16.168421 32.336842 26.947369 43.115789 10.778947 10.778947 21.557895 21.557895 37.726315 21.557895 16.168421 5.389474 37.726316 5.389474 64.673685 5.389474h80.842105v-549.726316c0-16.168421 0-32.336842-5.389474-43.11579 0-10.778947-5.389474-21.557895-16.168421-26.947368-5.389474-5.389474-16.168421-10.778947-32.336842-16.168421-16.168421-5.389474-32.336842-5.389474-53.894737-5.389474v-26.947368h285.642105v26.947368c-21.557895 0-43.115789 5.389474-59.28421 5.389474-16.168421 0-26.947368 5.389474-32.336842 10.778947-5.389474 5.389474-10.778947 10.778947-10.778948 21.557895 0 5.389474-5.389474 16.168421-5.389473 26.947368V701.978947h86.231579c26.947368 0 48.505263 0 64.673684-5.389473 16.168421-5.389474 32.336842-10.778947 37.726316-26.947369 32.336842-10.778947 37.726316-26.947368 43.115789-43.115789 5.389474-16.168421 10.778947-43.115789 16.168421-64.673684h26.947369v48.505263 43.115789c0 16.168421 0 26.947368 5.389473 43.11579 0 16.168421 0 32.336842 5.389474 48.505263h-253.305263c-26.947368-10.778947-48.505263-10.778947-64.673684-10.778948h-53.894737z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="youduiqi" unicode="&#60546;" d="M96 768h832v-96H96zM96 320h832v-96H96zM352 544h576v-96H352zM352 96h576v-96H352z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zuoduiqi" unicode="&#60550;" d="M96 768h832v-96H96zM96 320h832v-96H96zM96 544h576v-96H96zM96 96h576v-96H96z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="juzhong" unicode="&#58905;" d="M0 802.909091h1024v-93.090909H0zM139.636364 563.712h744.727272v-93.090909H139.636364zM139.636364 85.271273h744.727272v-93.090909H139.636364zM0 324.468364h1024v-93.090909H0z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="add1" unicode="&#58980;" d="M853.333333 416H544V725.333333c0 17.066667-14.933333 32-32 32s-32-14.933333-32-32v-309.333333H170.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h309.333333V42.666667c0-17.066667 14.933333-32 32-32s32 14.933333 32 32V352H853.333333c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sousuo" unicode="&#58943;" d="M716.29895 89.191379C641.509798 33.177824 548.629446 0 448 0 200.576432 0 0 200.576435 0 448 0 695.423568 200.576432 896 448 896 695.423565 896 896 695.423568 896 448 896 347.370554 862.822176 254.490202 806.808621 179.70105L946.011456 40.498214C970.889978 15.619686 970.970976-24.635366 945.803174-49.803174 920.809619-74.79673 879.927322-74.436992 855.501786-50.011456L716.29895 89.191379ZM448 128C624.73112 128 768 271.26888 768 448 768 624.73112 624.73112 768 448 768 271.26888 768 128 624.73112 128 448 128 271.26888 271.26888 128 448 128Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-up" unicode="&#58976;" d="M549.84704 586.19904l328.69376-328.704c20.91008-20.91008 20.91008-54.80448 0-75.70432-20.89984-20.89984-54.80448-20.89984-75.70432 0L512 472.63744 221.16352 181.80096000000003c-20.91008-20.89984-54.80448-20.89984-75.70432 0-20.91008 20.89984-20.91008 54.79424 0 75.70432l328.69376 328.704c10.45504 10.4448 24.14592 15.6672 37.84704 15.6672S539.40224 596.64384 549.84704 586.19904z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="add" unicode="&#59013;" d="M900.54656 384c0-37.56032-30.44352-68.00384-68.01408-68.00384l-252.53888 0 0-252.53888c0-37.57056-30.44352-68.01408-68.00384-68.00384-18.78016 0-35.77856 7.60832-48.0768 19.90656-12.30848 12.30848-19.9168 29.30688-19.90656 48.0768L443.99616 316.0064l-252.55936 0c-18.76992 0-35.75808 7.59808-48.0768 19.9168-12.288 12.29824-19.89632 29.29664-19.89632 48.06656-0.01024 37.56032 30.43328 68.00384 68.00384 68.00384l252.53888 0L444.0064 704.54272c0 37.56032 30.45376 68.01408 68.01408 68.01408 37.55008-0.01024 67.97312-30.43328 67.9936-67.9936L580.01408 451.9936l252.55936 0C870.12352 451.97312 900.52608 421.55008 900.54656 384z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="success" unicode="&#59015;" d="M834.73408 521.89184L473.02656 160.20479999999998c-26.78784-26.78784-70.23616-26.78784-97.04448 0L189.26592 346.94143999999994c-26.79808 26.78784-26.79808 70.23616 0 97.03424 26.79808 26.79808 70.2464 26.79808 97.03424 0.01024l138.21952-138.21952L737.6896 618.93632c26.79808 26.79808 70.2464 26.7776 97.03424 0C861.52192 592.13824 861.52192 548.70016 834.73408 521.89184z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="subtract" unicode="&#59018;" d="M900.54656 384.01024c0-37.56032-30.44352-68.00384-68.01408-68.00384L191.44704 316.0064c-18.76992 0-35.76832 7.60832-48.0768 19.9168-12.29824 12.29824-19.90656 29.29664-19.90656 48.06656-0.01024 37.57056 30.44352 68.01408 68.01408 68.00384l641.09568 0C870.12352 451.98336 900.53632 421.56032 900.54656 384.01024z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-down" unicode="&#59029;" d="M512 166.13376000000005c-13.70112 0-27.40224 5.23264-37.84704 15.6672l-328.69376 328.704c-20.91008 20.91008-20.91008 54.80448 0 75.70432 20.89984 20.89984 54.79424 20.89984 75.70432 0L512 295.36256000000003l290.83648 290.83648c20.91008 20.89984 54.80448 20.89984 75.70432 0 20.91008-20.89984 20.91008-54.79424 0-75.70432l-328.69376-328.704C539.40224 171.35616000000005 525.70112 166.13376000000005 512 166.13376000000005z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-right" unicode="&#59051;" d="M714.19904 346.15296l-328.704-328.69376c-20.91008-20.91008-54.80448-20.91008-75.70432 0-20.89984 20.89984-20.89984 54.80448 0 75.70432L600.63744 384 309.80096 674.8364799999999c-20.89984 20.91008-20.89984 54.80448 0 75.70432 20.89984 20.91008 54.79424 20.91008 75.70432 0l328.704-328.69376c10.4448-10.45504 15.6672-24.14592 15.6672-37.84704S724.64384 356.59776 714.19904 346.15296z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-left" unicode="&#59068;" d="M294.13376 384c0 13.70112 5.23264 27.40224 15.6672 37.84704l328.704 328.69376c20.91008 20.91008 54.80448 20.91008 75.70432 0 20.89984-20.89984 20.89984-54.79424 0-75.70432L423.36256 384l290.83648-290.83648c20.89984-20.89984 20.89984-54.80448 0-75.70432-20.89984-20.91008-54.79424-20.91008-75.70432 0l-328.704 328.69376C299.35616 356.59776 294.13376 370.29888000000005 294.13376 384z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="phone-menu" unicode="&#59249;" d="M355.19474 493.708274c-30.481534 0-56.383123-10.660822-77.718795-31.996493C256.147288 440.383123 245.479452 414.481534 245.479452 384c0-30.474521 10.667836-56.383123 32.003507-77.711781s47.244274-31.996493 77.718795-31.996493c30.474521 0 56.37611 10.667836 77.711781 31.996493 21.328658 21.328658 31.996493 47.23726 31.996493 77.711781 0 30.481534-10.667836 56.383123-32.003507 77.711781C411.577863 483.040438 385.676274 493.708274 355.19474 493.708274zM355.201753 786.284712c-30.481534 0-56.383123-10.667836-77.718795-31.996493-21.328658-21.335671-31.996493-47.23726-31.996493-77.711781 0-30.481534 10.660822-56.383123 31.996493-77.718795 21.335671-21.328658 47.244274-31.996493 77.718795-31.996493 30.474521 0 56.37611 10.667836 77.711781 31.996493 21.328658 21.335671 31.996493 47.23726 31.996493 77.718795 0 30.474521-10.667836 56.37611-31.996493 77.711781C411.584877 775.616877 385.683288 786.284712 355.201753 786.284712zM355.201753 201.13884900000005c-30.481534 0-56.390137-10.660822-77.718795-31.996493s-31.996493-47.23726-31.996493-77.711781c0-30.488548 10.660822-56.383123 31.996493-77.718795 21.335671-21.328658 47.244274-31.996493 77.718795-31.996493 30.474521 0 56.37611 10.667836 77.711781 31.996493 21.328658 21.335671 31.996493 47.230247 31.996493 77.718795 0 30.474521-10.667836 56.383123-31.996493 77.711781S385.683288 201.13884900000005 355.201753 201.13884900000005zM1264.057863 744.286685c-3.633096 3.612055-7.904438 5.421589-12.863123 5.421589L556.333589 749.708274c-4.951671 0-9.237041-1.802521-12.85611-5.421589-3.619068-3.626082-5.428603-7.904438-5.428603-12.85611l0-109.722301c0-4.951671 1.809534-9.230027 5.428603-12.85611 3.619068-3.612055 7.904438-5.421589 12.85611-5.421589l694.861151 0c4.958685 0 9.237041 1.802521 12.863123 5.421589 3.619068 3.626082 5.421589 7.904438 5.421589 12.85611L1269.479452 731.430575C1269.479452 736.382247 1267.669918 740.667616 1264.057863 744.286685zM1251.19474 457.138849L556.333589 457.138849c-4.951671 0-9.237041-1.802521-12.85611-5.428603-3.619068-3.619068-5.428603-7.904438-5.428603-12.85611l0-109.722301c0-4.944658 1.809534-9.230027 5.428603-12.849096 3.619068-3.626082 7.904438-5.428603 12.85611-5.428603l694.861151 0c4.958685 0 9.237041 1.802521 12.863123 5.428603 3.619068 3.619068 5.421589 7.904438 5.421589 12.849096L1269.479452 438.854137c0 4.951671-1.809534 9.244055-5.421589 12.85611C1260.424767 455.329315 1256.153425 457.138849 1251.19474 457.138849zM1251.19474 164.56942500000002L556.333589 164.56942500000002c-4.951671 0-9.237041-1.809534-12.85611-5.428603-3.619068-3.619068-5.428603-7.904438-5.428603-12.849096l0-109.722301c0-4.958685 1.809534-9.237041 5.428603-12.863123 3.619068-3.612055 7.904438-5.414575 12.85611-5.414575l694.861151 0c4.958685 0 9.237041 1.802521 12.863123 5.414575 3.619068 3.626082 5.421589 7.904438 5.421589 12.863123l0 109.722301c0 4.944658-1.809534 9.237041-5.421589 12.849096C1260.424767 162.752877 1256.153425 164.56942500000002 1251.19474 164.56942500000002z"  horiz-adv-x="1515" />
+
+    
+    <glyph glyph-name="user" unicode="&#59005;" d="M486.4 810.666667c34.133333 0 55.466667-6.4 72.533333-12.8C571.733333 795.733333 582.4 791.466667 597.333333 789.333333c4.266667 0 10.666667 0 17.066667 0 14.933333 0 25.6 2.133333 36.266667 4.266667l-6.4-27.733333 19.2-29.866667c17.066667-25.6 17.066667-76.8 14.933333-138.666667l0-34.133333 23.466667-25.6c4.266667-4.266667 6.4-12.8 6.4-21.333333l0-2.133333 0-2.133333c2.133333-19.2-6.4-44.8-25.6-57.6L661.333333 433.066667 652.8 405.333333c-8.533333-36.266667-21.333333-68.266667-32-89.6l-32-61.866667 55.466667-42.666667c19.2-14.933333 49.066667-36.266667 89.6-53.333333l2.133333 0 2.133333 0c102.4-38.4 177.066667-96 177.066667-136.533333L915.2-42.666667 106.666667-42.666667l0 59.733333c0 40.533333 74.666667 100.266667 179.2 138.666667l2.133333 0 2.133333 0c40.533333 17.066667 70.4 38.4 89.6 53.333333l55.466667 42.666667-32 61.866667c-10.666667 21.333333-21.333333 53.333333-32 89.6L362.666667 435.2l-23.466667 17.066667c-21.333333 17.066667-25.6 49.066667-23.466667 59.733333l0 2.133333 0 2.133333c0 6.4 2.133333 14.933333 6.4 19.2l23.466667 27.733333L341.333333 599.466667C337.066667 644.266667 337.066667 725.333333 377.6 746.666667l23.466667 12.8 12.8 23.466667C422.4 800 450.133333 810.666667 486.4 810.666667M486.4 896c-70.4 0-123.733333-27.733333-149.333333-74.666667-87.466667-46.933333-85.333333-166.4-81.066667-230.4-17.066667-19.2-25.6-44.8-27.733333-74.666667-2.133333-34.133333 8.533333-96 57.6-132.266667 8.533333-34.133333 21.333333-74.666667 38.4-106.666667-14.933333-10.666667-38.4-27.733333-70.4-42.666667C198.4 213.333333 21.333333 136.533333 21.333333 17.066667l0-72.533333C21.333333-96 53.333333-128 93.866667-128l836.266667 0c40.533333 0 72.533333 32 72.533333 72.533333l0 72.533333c0 121.6-177.066667 196.266667-232.533333 217.6-32 14.933333-57.6 32-72.533333 42.666667 17.066667 32 29.866667 72.533333 38.4 108.8 42.666667 34.133333 59.733333 87.466667 57.6 130.133333 0 32-10.666667 59.733333-29.866667 78.933333 2.133333 81.066667 0 140.8-29.866667 187.733333 4.266667 14.933333 4.266667 27.733333 4.266667 32C738.133333 838.4 725.333333 861.866667 704 874.666667c-12.8 6.4-25.6 10.666667-38.4 10.666667-10.666667 0-21.333333-2.133333-29.866667-6.4-2.133333-2.133333-12.8-4.266667-21.333333-4.266667-2.133333 0-4.266667 0-4.266667 0-6.4 0-14.933333 2.133333-23.466667 6.4C563.2 887.466667 533.333333 896 486.4 896L486.4 896z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shoppingCart" unicode="&#58915;" d="M443.72992 42.670079999999984A68.28032 68.28032 0 0 0 375.47008-25.600000000000023a68.27008 68.27008 0 1 0 68.25984 68.27008zM750.92992 42.670079999999984c0-37.67296-30.55616-68.27008-68.25984-68.27008S614.4 4.997119999999995 614.4 42.670079999999984c0 37.7344 30.5664 68.27008 68.27008 68.27008s68.25984-30.53568 68.25984-68.27008zM921.6 657.07008H260.49536l-10.89536 69.13024c-5.86752 37.0688-41.3696 67.39968-78.92992 67.39968H102.4v-68.25984h78.20288l86.30272-546.53952c2.92864-18.5344 20.69504-33.73056 39.46496-33.73056h546.95936v68.27008H330.56768L319.77472 281.6h533.5552L921.6 657.07008z m-125.22496-307.2H309.00224L271.26784 588.8h568.53504l-43.42784-238.92992z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

canvas-container/components/canvasEditPage.vue

@@ -0,0 +1,330 @@
+<template>
+   <div class="layout hom-layout" v-loading="loading">
+     <draggable
+       class="dragArea list-group"
+       :list="componentsData"
+       group="pageEdit"
+       @change="pageChange"
+     >
+     <div class="list-group-item" v-for="(item,index) in componentsData" :key="index" :class="[{'on':activeComponent == index},'item-'+item.type]" @click="selectComponent(item,index)">
+       <component v-show="!item.isEmpty" :isNoData.sync='item.isEmpty' :is="componentMap[terminal-1].get(item.type)" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId" @cleckLoading="cleckLoading"></component>
+       <div class="no-data" v-show="item.isEmpty">
+         <i class="iconfont icon-kong"></i>
+         <p>暂无数据<br>请在右边窗口编辑内容</p>
+       </div>
+       <div class="btns">
+         <span @click="delComponent(item,index)"><i class="iconfont icon-shanchu"></i></span>
+       </div>
+     </div>
+     </draggable>
+   </div>
+</template>
+
+<script>
+  import draggable from 'vuedraggable'
+  import componentMap from './canvasShow/componentMap'
+  import { mapGetters, mapMutations } from 'vuex'
+  export default {
+  // import testData from '@@/config/testData3'
+    name: 'canvasEditPage',
+    components: {
+      draggable
+    },
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      typeId: {
+        type: Number,
+        default: 1
+      },
+      shopId: {
+        type: Number,
+        default: 0
+      }
+    },
+    data () {
+      return {
+        activeComponent: -1,
+        componentMap: componentMap,
+        loading: false
+      }
+    },
+    mounted () {
+      // this.setComponentsData(testData)
+    },
+    computed: {
+      ...mapGetters([
+        'componentsData'
+      ])
+    },
+    methods: {
+      ...mapMutations({
+        setActiveComponent: 'SET_ACTIVECOMPONENT',
+        setComponentsData: 'SET_COMPONENTSDATA'
+      }),
+      // 画布添加或者移动了组件
+      pageChange (e) {
+        if (e.added) {
+          this.activeComponent = e.added.newIndex
+          e.added.element.index = e.added.newIndex
+          this.setActiveComponent(e.added.element)
+        }
+        if (e.moved) {
+          this.activeComponent = e.moved.newIndex
+          e.moved.element.index = e.moved.newIndex
+          this.setActiveComponent(e.moved.element)
+        }
+        this.$emit('showRightBox', true)
+      },
+      // 选中组件
+      selectComponent (item, index) {
+        this.activeComponent = index
+        item.index = index
+        this.setActiveComponent(item)
+        this.$emit('showRightBox', true)
+    },
+      // 删除组件
+      delComponent (item, index) {
+        this.$confirm('确定删除吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.activeComponent = -1
+          this.componentsData.splice(index, 1)
+          this.$emit('showRightBox', false)
+        }).catch(() => {
+        })
+      },
+      cleckLoading(){
+        if(typeof(uni) !== 'undefined'){
+          uni.getStorage({
+            key: 'sendNum',
+            success: function (res) {
+              let sendNum = res.data;
+              this.loading = parseInt(sendNum) !== 0
+            }
+          })
+        } else {
+          let sendNum = localStorage.getItem('sendNum')
+          this.loading = parseInt(sendNum) !== 0
+        }
+      },
+      // 检查组件是否为空
+      checkIsNoData(dataList) {
+        for(let i=0;i<dataList.length;i++){
+          const newVal = dataList[i].componentContent
+          let isEmpty = true
+          let _data = ''
+          switch (dataList[i].type){
+            case 'banner':
+              _data=newVal.bannerData
+              _data.forEach(function(value ){
+                if(value.bannerUrl){
+                  isEmpty = false
+                }
+              })
+              break
+            case 'notice':
+            case 'text':
+            case 'imageTextNav':
+            case 'imageText':
+            case 'imageTextList':
+            case 'brandList':
+            case 'categoryList':
+            case 'assistDiv':
+              isEmpty = false
+              break
+            case 'productList':
+              _data = newVal.productData
+              if((_data.sourceType=='1' && _data.productIdList.length > 0) || (_data.sourceType=='2' && _data.categoryId != 0)){
+                isEmpty = false
+              }
+              break
+            case 'custom':
+              _data=newVal.imgData
+              _data.forEach(function(value ){
+                if(value.src){
+                  isEmpty = false
+                }
+              })
+              break
+            case 'groupList':
+              if(this.typeId === 1){
+                isEmpty = false
+              }
+              else {
+                if(newVal.shopGroupWorkId){
+                  isEmpty = false
+                }
+              }
+              break
+            case 'spikeList':
+              if(newVal.shopSeckillId){
+                isEmpty = false
+              }
+              break
+            case 'discountList':
+              if(newVal.discountId){
+                isEmpty = false
+              }
+              break
+            case 'priceList':
+              if(newVal.priceId){
+                isEmpty = false
+              }
+              break
+            case 'vip':
+              isEmpty = false
+              break
+            case 'coupon':
+              if(newVal.selectedCoupon.length > 0){
+                isEmpty = false
+              }
+              break
+            case 'newProduct':
+              _data = newVal.productData
+              if((_data.sourceType=='1' && _data.productIdList.length > 0) || (_data.sourceType=='2' && _data.categoryId != 0)){
+                isEmpty = false
+              }
+              break
+            case 'shop':
+              _data=newVal.imgTextData
+              _data.forEach(function(value ){
+                if(value.img){
+                  isEmpty = false
+                }
+              })
+              break
+          }
+          dataList[i].isEmpty = isEmpty
+          this.$forceUpdate()
+        }
+        console.log(dataList)
+      },
+    },
+    // 监控组件是否为空
+    watch: {
+      'componentsData': {
+        handler(newVal, oldVal) {
+          this.checkIsNoData(newVal)
+        },
+        deep: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.hom-layout {
+  background-color: #fff;
+  ::v-deep .sortable-chosen {
+    .contentBox {
+      display: none;
+    }
+    .cloneText {
+      display: block;
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      font-size: 18px;
+      text-align: center;
+      background-color: $mainColor;
+      color: #fff;
+    }
+  }
+  .list-group {
+    min-height: calc(100vh - 50px);
+  }
+  .list-group-item {
+    position: relative;
+    cursor: move;
+    background-color: #fff;
+    min-height: 100px;
+    &.item-assistDiv,&.item-notice,&.item-text{
+      min-height: 0px;
+    }
+    .btns {
+      display: none;
+    }
+    &:hover {
+      &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        border: 1px $mainColor dashed;
+        z-index: 2;
+      }
+    }
+    &.on {
+      &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        border: 1px $mainColor solid;
+        z-index: 2;
+      }
+      .btns {
+        display: block;
+        position: absolute;
+        right: -13px;
+        top: 50%;
+        margin-top: -13px;
+        z-index: 3;
+        span {
+          display: block;
+          width: 26px;
+          height: 26px;
+          line-height: 26px;
+          text-align: center;
+          color: #666;
+          background-color: #fff;
+          box-shadow: 0 0 2px rgba(51, 51, 51, 0.2);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.no-data {
+  width: 100%;
+  display: flex;
+  height: 300px;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  color: #999;
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.8;
+  .iconfont {
+    font-size: 100px;
+    color: $mainColor;
+    margin-right: 50px;
+  }
+}
+</style>
+
+<style lang="scss">
+.warp {
+  width: 690px;
+  margin: 0 auto;
+  max-width: 100%;
+  &.terminal4 {
+    width: 1200px;
+    max-width: 100%;
+  }
+}
+.flex-box {
+  display: flex;
+}
+</style>

canvas-container/components/canvasShow/basics/assistDiv.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="div" :style="{backgroundColor:componentContent.bgColor,height:componentContent.height + 'px'}"></div>
+</template>
+
+<script>
+  export default {
+    name: 'assistDiv',
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .div{
+    width: 100%;
+  }
+</style>

canvas-container/components/canvasShow/basics/banner.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="banner"  :class="'terminal' + terminal">
+    <swiper :options="swiperOption">
+      <swiper-slide class="banner-item" v-for="(item,index) in bannerList" :key="index" :style="{backgroundImage: 'url('+ item.bannerUrl +')','height':componentContent.height + 'px'}" @click="jumpLink(item.linkObj)">
+<!--        <div class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.bannerUrl" v-show="item.bannerUrl"></div>-->
+      </swiper-slide>
+    </swiper>
+    <div class="swiper-pagination" slot="pagination"></div>
+  </div>
+</template>
+
+<script>
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+  import {funMixin} from '../config/mixin'
+  export default {
+    name: 'cereBanner',
+    mixins: [funMixin],
+    data () {
+      return {
+        swiperOption: {
+          autoplay: false, // 可选选项，自动滑动
+          loop: true,
+          pagination: {
+            el: '.swiper-pagination'
+          }
+        }
+      }
+    },
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    },
+    components: {
+      Swiper,
+      SwiperSlide
+    },
+    directives: {
+      swiper: directive
+    },
+    mounted() {
+      this.$forceUpdate() // 刷新轮播图
+    },
+    computed: {
+      bannerList: function () {
+        console.log(this.componentContent)
+        return this.componentContent.bannerData.filter(function (item) {
+          return item.bannerUrl
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  .banner-item {
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto 100%;
+    img {
+      width: 100%;
+    }
+  }
+  &.terminal4{
+    ::v-deep .el-carousel{
+      height: 100%;
+      .el-carousel__container{
+        height: 100%;
+      }
+    }
+    .banner-item{
+      img{
+        display: none;
+      }
+    }
+  }
+  .swiper-pagination{
+    display: flex;
+    justify-content: center;
+    bottom: 20px;
+    width: 100%;
+    ::v-deep .swiper-pagination-bullet{
+      width: 30px;
+      height: 4px;
+      background: #fff;
+      opacity: 0.5;
+      border-radius: 2px;
+      margin: 0 7.5px;
+    }
+    ::v-deep .swiper-pagination-bullet-active{
+      opacity: 1;
+      width: 58px;
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/brandList.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="brand-list warp" :class="'terminal' + terminal">
+    <h2 class="hom-title" :style="{textAlign:componentContent.textAlign}">{{componentContent.title}}</h2>
+    <div class="content-warp">
+      <ul class="clearfix">
+        <li v-for="(item, index) in componentContent.imgList" :key="index">
+          <a class="item a-link" @click="jumpLink(item.linkObj)">
+            <div class="imgBox">
+              <img :src="item.imgData" v-show="item.imgData" :alt="item.title">
+            </div>
+            <h4 class="h4">{{item.title}}</h4>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {funMixin} from '../config/mixin'
+  export default {
+    name: 'brandList',
+    mixins: [funMixin],
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .brand-list{
+    color: #fff;
+    padding: 20px 0;
+    .hom-title{
+      font-size: 22px;
+      color: #333;
+      line-height: 1em;
+      margin-bottom: 23px;
+      font-weight: bold;
+    }
+    .content-warp{
+      display: flex;
+    }
+    .first{
+      width: 24%;
+      padding-top: 10px;
+      .item{
+        background-color: #7A8594;
+        height: 336px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .h3{
+          font-size: 30px;
+          line-height: 46px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+    ul{
+      width: 100%;
+      li{
+        width: 25%;
+        float: left;
+        padding: 10px 0 0 10px;
+        .item{
+          height: auto;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .imgBox {
+            padding-bottom: 80%;
+            background-color: #cacaca;
+            position: relative;
+          }
+          .h4{
+            font-size: 18px;
+            color: #333333;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+          }
+          .p{
+            font-size: 12px;
+            margin: 7px 0 12px;
+          }
+          img {
+            max-width: 100%;
+            height: 100%;
+            max-height: 100%;
+            position: absolute;
+            margin: auto;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+          }
+        }
+      }
+    }
+  }
+  .terminal1,.terminal2,.terminal3{
+    &.brand-list{
+      .content-warp{
+        display: block;
+      }
+      .first{
+        width: 100%;
+      }
+      ul{
+        width: auto;
+        margin-left: -15px;
+        li{
+          padding: 15px 0 0 15px;
+          width: 50%;
+          .item {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/categoryList.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="category-list warp" :class="'terminal' + terminal">
+    <h2 class="hom-title" :style="{textAlign:componentContent.textAlign}">{{componentContent.title}}</h2>
+    <div class="content-warp">
+      <ul class="clearfix" :class="{number5: componentContent.categoryData.length === 5}">
+        <li v-for="(item) of componentContent.categoryData" :key="item.id">
+            <a class="item a-link" @click="jumpCategory(item)">
+            <div class="imgBox">
+               <img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.name">
+            </div>
+            </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import {funMixin} from '../config/mixin'
+  export default {
+    name: 'categoryList',
+    mixins: [funMixin],
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .category-list{
+    padding: 20px 0;
+    .hom-title{
+      font-size: 22px;
+      color: #333;
+      line-height: 1em;
+      margin-bottom: 23px;
+      font-weight: bold;
+      text-align: center;
+    }
+    .content-warp{
+      display: flex;
+      ul{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        li{
+          flex: 1;
+          padding: 10px 0 0 10px;
+          .item{
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .imgBox {
+              padding-bottom: 80%;
+              background-color: #cacaca;
+              position: relative;
+            }
+            img {
+              max-width: 100%;
+              height: 100%;
+              max-height: 100%;
+              position: absolute;
+              margin: auto;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              left: 0;
+            }
+          }
+        }
+      }
+      .number5 {
+        display: block;
+        li {
+          width: 25%;
+          float: left;
+        }
+        li:nth-child(1) {
+          width: 50%;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .category-list .content-warp{
+      display: block;
+      ul{
+        margin: -15px 0 0 -15px;
+        width: auto;
+        li{
+          flex: 0 0 50%;
+          padding: 15px 0 0 15px;
+        }
+      }
+    }
+  }
+  .terminal1,.terminal2,.terminal3{
+    &.category-list .content-warp{
+      display: block;
+      ul{
+        margin: -15px 0 0 -15px;
+        width: auto;
+        li{
+          flex: 0 0 50%;
+          padding: 15px 0 0 15px;
+        }
+      }
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/coupon/app/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="coupon">
+    <div class="coupon-list">
+      <div class="coupon-item" v-for="(item,index) in couponsData" :key="index" :class="item.state && item.state !== 3 && 'isReceive'">
+        <div class="coupon-item-content">
+          <div class="coupon-item-price">
+            <span v-if="item.couponType !== 2">￥</span>
+            <b v-if="typeId !== 1">{{item.couponContent}}</b>
+            <b v-else>{{item.reduceMoney}}</b>
+            <b v-if="item.couponType == 2">折券</b>
+          </div>
+          <div class="coupon-item-date">{{item.effectiveStart.split(' ')[0]}} - {{item.effectiveEnd.split(' ')[0]}}</div>
+          <div class="coupon-item-text">{{item.content}}</div>
+        </div>
+        <button v-if="item.state === 0" class="coupon-item-btn" @click="jumpStore(item)">立即使用</button>
+        <button v-else-if="item.state === 1" class="coupon-item-btn">已使用</button>
+        <button v-else-if="item.state === 2" class="coupon-item-btn">已过期</button>
+        <button v-else @click="receiveCoupon(item)" class="coupon-item-btn">立即领取</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon {
+  padding: 25px;
+  &-list{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &-item{
+    width: 335px;
+    height: 292px;
+    background: url("../../../static/images/coupon/bg-coupon.png") no-repeat;
+    margin-left: 28px;
+    &:nth-child(2n+1){
+      margin-left: 0;
+    }
+    &-content{
+      text-align: center;
+    }
+    &-price{
+      color: #C5AA7B;
+      margin: 26px 0 10px;
+      span{
+        font-size: 36px;
+        line-height: 68px;
+      }
+      b{
+        font-size: 50px;
+        line-height: 68px;
+      }
+    }
+    &-date,&-text{
+      font-size: 20px;
+      line-height: 28px;
+      color: #999999;
+    }
+    &-date{
+      margin-bottom: 8px;
+    }
+    &-btn{
+      display: block;
+      margin: 60px auto 0;
+      width: 112px;
+      height: 48px;
+      background-color: #C5AA7B;
+      color: #fff;
+    }
+    &.isReceive{
+      background-image: url("../../../static/images/coupon/bg-coupon2.png");
+      &-price{
+        color: #999;
+      }
+      &-btn{
+        background-color: #ccc;
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/coupon/mixin.js

@@ -0,0 +1,82 @@
+import api from '../../config/api'
+import { funMixin } from '../../config/mixin'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'textComponent',
+  mixins: [funMixin],
+  data () {
+    return {
+      couponsData: []
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'couponNum'
+    ]),
+  },
+  watch: {
+    'couponNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+      this.getData()
+  },
+  methods: {
+    getData() {
+      const _ = this
+      if(_.componentContent.selectedCoupon && _.componentContent.selectedCoupon.length > 0){
+        this.beforeGetData()
+        let _url = ''
+        if(_.typeId === 1){
+          _url =`${api.getCoupons}?page=1&pageSize=99&ids=${_.componentContent.selectedCoupon}`
+        } else if(_.typeId === 3) {
+          _url =`${api.getShopCoupons}?page=1&pageSize=99&shopId=${_.shopId}&ids=${_.componentContent.selectedCoupon}`
+        }
+        const params = {
+          method: 'GET',
+          url: _url,
+        }
+        this.sendReq(params, (res) => {
+          _.afterGetData()
+          _.couponsData = res.data.list
+          if(_.typeId === 1){
+            _.couponsData.forEach(item=>{
+              item.couponName = item.activityName
+              item.effectiveStart = item.activityStartTime
+              item.effectiveEnd = item.activityEndTime
+            })
+          }
+          if(JSON.stringify(_.componentContent.couponList) !== JSON.stringify(_.couponsData)){
+            _.componentContent.couponList = _.couponsData
+          }
+        },(err)=>{
+          _.afterGetData()
+        })
+      } else {
+        _.couponsData = []
+      }
+    }
+  }
+}

canvas-container/components/canvasShow/basics/coupon/pc/index.vue

@@ -0,0 +1,374 @@
+<template>
+  <div class="couponBox warp" :class="['terminal' + terminal,'arrange'+(componentContent.arrangeActiveIndex+1),'color'+(componentContent.colorActiveIndex+1)]">
+    <div class="couponListBox" v-if="componentContent.selectedCoupon">
+      <div class="listItemBox" v-for="(item,index) in couponsData" :key="index" :class="item.state && item.state !== 3 && 'isReceive'">
+        <div class="listItemBoxInner">
+          <div class="itemInfo">
+            <i class="flag" :class="'flag'+item.couponType"></i>
+            <div class="amount">
+              <b v-if="item.couponType !== 2">￥</b>
+              <span v-if="typeId !== 1">
+                {{item.couponContent}}
+                </span>
+              <span v-else>
+                {{item.reduceMoney}}
+                </span>
+              <b v-if="item.couponType == 2">折</b>
+            </div>
+            <div class="couponInfo">
+              <p>{{item.content}}</p>
+            </div>
+          </div>
+          <!--            <div class="itemInfo" v-else>-->
+          <!--              <div class="amount">-->
+          <!--                <b>￥</b><span>{{item.reduceMoney}}<i>满减券</i></span>-->
+          <!--              </div>-->
+          <!--              <div class="couponInfo">-->
+          <!--                <p>{{item.content}}</p>-->
+          <!--              </div>-->
+          <!--            </div>-->
+          <div v-if="item.state === 0" class="receiveBtn">
+            <span>己领取</span>
+          </div>
+          <div v-else-if="item.state === 1" class="receiveBtn">
+            <span>已使用</span>
+          </div>
+          <div v-else-if="item.state === 2" class="receiveBtn">
+            <span>已过期</span>
+          </div>
+          <div v-else class="receiveBtn" @click="receiveCoupon(item)">
+            <span>立即领取</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.couponBox {
+  min-height: 177px;
+  margin: 0 auto;
+  padding: 20px 0;
+  .couponListBox {
+    flex-wrap: wrap;
+    /**默认**/
+    .listItemBox {
+      //background-image:url('../../../static/images/coupon/border_L1.png'), url('../../../static/images/coupon/border_R1.png');
+      //background-repeat: no-repeat, no-repeat;
+      //background-position: left top, right top;
+      box-sizing: border-box;
+      .listItemBoxInner {
+        width: 100%;
+        height: 150px;
+        display: flex;
+        background-color: #FAFAFA;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        .flag{
+          display: block;
+          width: 71px;
+          height: 71px;
+          background-repeat: no-repeat;
+          position: absolute;
+          top: 0;
+          left: 0;
+          &.flag1{
+            background-image: url("../../../static/images/coupon/flag-coupon.png");
+          }
+          &.flag2{
+            background-image: url("../../../static/images/coupon/flag-coupon2.png");
+          }
+        }
+        .itemInfo {
+          flex: 1;
+        }
+        .amount {
+          max-width: 90%;
+          margin: 0 auto;
+          display: flex;
+          align-items: baseline;
+          justify-content: center;
+          line-height: 60px;
+          b {
+            font-size: 30px;
+          }
+          span {
+            font-size: 60px;
+            font-weight: bold;
+          }
+          i {
+            font-style: normal;
+            font-size: 18px;
+            margin-left: 5px;
+          }
+        }
+        .couponInfo {
+          text-align: center;
+          p {
+            display: inline-block;
+            padding: 0 42px;
+            text-align: center;
+            font-size: 18px;
+            line-height: 40px;
+            color: #C83732;
+            background: #F5E5E5;
+          }
+        }
+      }
+      .receiveBtn {
+        width: 72px;
+        margin-right: 5px;
+        background: #C5AA7B;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        position: relative;
+        &:before,&:after{
+          content: '';
+          display: block;
+          width: 25px;
+          height: 25px;
+          background-color: #fff;
+          position: absolute;
+          left: -12.5px;
+          border-radius: 50%;
+        }
+        &:before{
+          top: -12.5px;
+        }
+        &:after{
+          bottom: -12.5px;
+        }
+        span {
+          color: #FFFFFF !important;
+          writing-mode: vertical-lr;
+          font-size: 19px;
+        }
+      }
+      &.isReceive {
+        //background-image:url('../../../static/images/coupon/border_L4.png'), url('../../../static/images/coupon/border_R4.png');
+        .listItemBoxInner {
+          .flag{
+            &.flag1{
+              background-image: url("../../../static/images/coupon/flag-coupon-r.png");
+            }
+            &.flag2{
+              background-image: url("../../../static/images/coupon/flag-coupon2-r.png");
+            }
+          }
+          .itemInfo {
+            color: #999;
+            .couponInfo {
+              p {
+                color: #999;
+                background: #F1F1F1;
+              }
+            }
+          }
+          .receiveBtn {
+            cursor: auto;
+            background: #999;
+          }
+        }
+      }
+    }
+  }
+
+  @mixin cardColor($bgColor: #FF3737,$fontColor: #fff) {
+    .couponListBox {
+      .listItemBox {
+        .listItemBoxInner{
+          background: $bgColor;
+        }
+        .itemInfo {
+          .amount {
+            b {
+              color: #EC4B42;
+            }
+            span {
+              color: #EC4B42;
+              i {
+                color: #EC4B42;
+              }
+            }
+          }
+          .couponInfo {
+            color:#EC4B42;
+          }
+        }
+        .receiveBtn {
+          span {
+            color: #EC4B42;
+          }
+        }
+        &.cardStyle3{
+          .itemInfo {
+            .amount {
+              span {
+                color: $bgColor;
+                i {
+                  color: $bgColor;
+                }
+              }
+            }
+            .couponInfo {
+              color:$bgColor;
+            }
+          }
+        }
+        &.cardStyle4{
+          border: 2px solid $bgColor;
+          padding: 5px;
+          .listItemBoxInner{
+            padding: 20px 15px;
+            height: 85px;
+            border: 1px solid $bgColor;
+          }
+          .itemInfo {
+            .amount {
+              span {
+                color: $bgColor;
+                i {
+                  color: $bgColor;
+                }
+              }
+            }
+            .couponInfo {
+              color:$bgColor;
+            }
+          }
+          .receiveBtn {
+            border-left: 1px $bgColor dashed;
+            span {
+              color: $bgColor;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.arrange1{
+
+  }
+  &.arrange2{
+    max-width: 100%;
+    .couponListBox{
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .listItemBox{
+        width: 48%;
+      }
+    }
+  }
+  &.arrange3{
+    max-width: 100%;
+    .couponListBox{
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .listItemBox{
+        width: 32%;
+      }
+    }
+  }
+  &.arrange4{
+    max-width: 100%;
+    .couponListBox{
+      display: flex;
+      overflow: hidden;
+      .listItemBox{
+        width: 268px;
+        flex: 0 0 268px;
+        margin:0 25px 25px 0;
+        &:nth-child(4n){
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  //&.color1{
+  //  .listItemBox {
+  //    background-image:url('../../../static/images/coupon/border_L1.png'), url('../../../static/images/coupon/border_R1.png');
+  //    .listItemBoxInner {
+  //      border-top: 1px solid #EC4B42;
+  //      border-bottom: 1px solid #EC4B42;
+  //      .itemInfo {
+  //        color: #EC4B42;
+  //        .amount {
+  //          border-bottom: 1px solid #EC4B42;
+  //        }
+  //        .couponInfo {
+  //          p {
+  //            color: #EC4B42;
+  //          }
+  //        }
+  //      }
+  //      .receiveBtn {
+  //        background: #EC4B42;
+  //      }
+  //    }
+  //  }
+  //}
+
+  &.color2{
+    .listItemBox {
+      background-image:url('../../../static/images/coupon/border_L2.png'), url('../../../static/images/coupon/border_R2.png');
+      .listItemBoxInner {
+        border-top: 1px solid #FF7800;
+        border-bottom: 1px solid #FF7800;
+        .itemInfo {
+          color: #FF7800;
+          .amount {
+            border-bottom: 1px solid #FF7800;
+          }
+          .couponInfo {
+            p {
+              color: #FF7800;
+            }
+          }
+        }
+        .receiveBtn {
+          background: #FF7800;
+        }
+      }
+    }
+  }
+
+  &.color3{
+    .listItemBox {
+      background-image:url('../../../static/images/coupon/border_L3.png'), url('../../../static/images/coupon/border_R3.png');
+      .listItemBoxInner {
+        border-top: 1px solid #86A7FF;
+        border-bottom: 1px solid #86A7FF;
+        .itemInfo {
+          color: #86A7FF;
+          .amount {
+            border-bottom: 1px solid #86A7FF;
+          }
+          .couponInfo {
+            p {
+              color: #86A7FF;
+            }
+          }
+        }
+        .receiveBtn {
+          background: #86A7FF;
+        }
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/custom.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="custom" :class="'terminal' + terminal">
+    <div class="rowLayout" v-if="componentContent.layoutType ==='L1' || componentContent.layoutType ==='L2' || componentContent.layoutType ==='L3' || componentContent.layoutType ==='L4'">
+      <div class="customLayout" :style="{'padding':'0 ' + componentContent.pageSpacing + 'px','marginLeft':(-componentContent.imgClearance) +'px'}">
+        <ul class="clearfix" :class="'layout'+componentContent.layoutType">
+          <li v-for="(item,index) of componentContent.imgData" :key="index" :style="{'width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','paddingLeft':componentContent.imgClearance +'px'}">
+            <a class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.src" v-if="item.src"></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-else :style="{'padding':'0 ' + componentContent.pageSpacing + 'px'}">
+      <div class="boxLayout" :style="{'paddingBottom':componentContent.maxH !== 0?getItemValue(componentContent.maxH) + '%': '100%'}">
+        <div class="boxLayoutInner">
+          <div class="boxWarp">
+            <div class="customLayout" :style="{'marginLeft':(-componentContent.imgClearance) +'px','top':(-componentContent.imgClearance) +'px'}">
+              <ul class="clearfix" :class="'layout'+componentContent.layoutType">
+                <li v-for="(item,index) of componentContent.imgData" :key="index" :style="{'width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','padding':componentContent.imgClearance +'px 0 0 ' + componentContent.imgClearance +'px'}">
+                  <a class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.src" v-if="item.src"></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {funMixin} from '../config/mixin'
+  export default {
+    name: 'customComponent',
+    mixins: [funMixin],
+    data () {
+      return {
+      }
+    },
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    },
+    methods: {
+      // 计算生成格子百分比
+      getItemValue (val) {
+        const density = parseInt(this.componentContent.density)
+        if (val === 0 || density === 0) {
+          return 0
+        }
+        return (val / density * 10000 / 100.00)// 小数点后两位百分比
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .custom{
+    .boxLayout{
+      position: relative;
+      .boxLayoutInner{
+        padding-bottom: 100%;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        top: 0;
+      }
+      .boxWarp{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        overflow: hidden;
+      }
+    }
+    .customLayout{
+      position: relative;
+      ul{
+        display: flex;
+        flex-wrap: wrap;
+        position: relative;
+      }
+      li{
+        .img{
+          width: 100%;
+          display: block;
+        }
+      }
+      .layoutL1 li{
+        flex: 0 0 100%;
+      }
+      .layoutL2 li{
+        flex: 0 0 50%;
+      }
+      .layoutL3 li{
+        flex: 0 0 33.3%;
+      }
+      .layoutL4 li{
+        flex: 0 0 25%;
+      }
+      .layoutT2B2{
+        padding-bottom: 100%;
+        li{
+          width: 50%;
+          height: 50%;
+          position: absolute;
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+          &:nth-child(1){
+            left: 0;
+            top: 0;
+          }
+          &:nth-child(2){
+            right: 0;
+            top: 0;
+          }
+          &:nth-child(3){
+            left: 0;
+            bottom: 0;
+          }
+          &:nth-child(4){
+            right: 0;
+            bottom: 0;
+          }
+        }
+      }
+      .layoutL1R2{
+        padding-bottom: 100%;
+        li{
+          width: 50%;
+          height: 50%;
+          position: absolute;
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+          &:nth-child(1){
+            height: 100%;
+            left: 0;
+            top: 0;
+          }
+          &:nth-child(2){
+            right: 0;
+            top: 0;
+          }
+          &:nth-child(3){
+            right: 0;
+            bottom: 0;
+          }
+        }
+      }
+      .layoutT1B2{
+        padding-bottom: 100%;
+        li{
+          width: 50%;
+          height: 50%;
+          position: absolute;
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+          &:nth-child(1){
+            width: 100%;
+            left: 0;
+            top: 0;
+          }
+          &:nth-child(2){
+            left: 0;
+            bottom: 0;
+          }
+          &:nth-child(3){
+            right: 0;
+            bottom: 0;
+          }
+        }
+      }
+      .layoutL1T1B2{
+        padding-bottom: 50%;
+        li{
+          position: absolute;
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+          &:nth-child(1){
+            width: 50%;
+            height: 100%;
+            left: 0;
+            top: 0;
+          }
+          &:nth-child(2){
+            right: 0;
+            top: 0;
+            width: 50%;
+            height: 50%;
+          }
+          &:nth-child(3){
+            left: 50%;
+            bottom: 0;
+            width: 25%;
+            height: 50%;
+          }
+          &:nth-child(4){
+            right: 0;
+            bottom: 0;
+            width: 25%;
+            height: 50%;
+          }
+        }
+      }
+      .layoutaverage{
+        padding-bottom: 100%;
+        li{
+          position: absolute;
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/discount/app/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="hom-pro-list">
+    <div class="title">
+      <img src="../../../static/images/discount/img-title.png" alt="限时折扣"/>
+    </div>
+    <div v-if="componentContent.arrangeType == '横向滑动'" class="product-list product-swiper">
+      <swiper ref="mySwiper" class="product-list-box" :options="swiperOption">
+        <swiper-slide class="product-list-item" v-for="(item,index) in productData.products" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-list-img">
+            <img v-show="item.image" class="img" :src="item.image">
+          </div>
+          <div class="product-list-info">
+            <label class="product-name">{{item.productName}}</label>
+            <div>
+              <div class="flag">
+                <img src="../../../static/images/discount/flag-discount2.png" alt="限时折扣"/>
+              </div>
+              <label class="buy-count">剩余{{item.stockNumber}}件</label>
+            </div>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="pagination discount-pagination" slot="pagination"></div>
+    </div>
+    <div v-if="componentContent.arrangeType == '多行多列'" class="product-list">
+      <div class="product-list-box" >
+        <div class="product-list-item" v-for="(item,index) in productData.products" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-list-img">
+            <img v-show="item.image" class="img" :src="item.image">
+          </div>
+          <div class="product-list-info">
+            <label class="product-name">{{item.productName}}</label>
+            <div>
+              <div class="flag">
+                <img src="../../../static/images/discount/flag-discount2.png" alt="限时折扣"/>
+              </div>
+              <label class="buy-count">剩余{{item.stockNumber}}件</label>
+            </div>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpGroupWorks(productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 14,
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.discount-pagination',
+          clickable: true
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hom-pro-list{
+  padding: 20px 0;
+  .title{
+    text-align: center;
+    margin-bottom: 20px;
+    label{
+      background: url("../../../static/images/icon-title.png") no-repeat left center;
+      font-size: 30px;
+      font-weight: bold;
+      padding-left: 48px;
+    }
+  }
+  /**多行多列**/
+  .product-list {
+    position: relative;
+    &-box {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      padding-left: 20px;
+    }
+    &.product-swiper .product-list-box{
+      margin: 0 20px;
+      padding-left: 0;
+    }
+    &-item {
+      margin: 0 14px 20px 0;
+      width: 348px;
+    }
+    &-img {
+      width: 348px;
+      height: 348px;
+      background-color: #f5f5f5;
+      border-radius: 10px 10px 0 0;
+      .img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-info {
+      background-color: #FFFFFF;
+      //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
+      border-radius: 0 0 10px 10px;
+      padding: 20px;
+      label{
+        font-weight: normal;
+      }
+      .product-name{
+        font-size: 28px;
+        color: #333;
+        display: block;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        margin-bottom: 18px;
+        line-height: 40px;
+      }
+      .shop-box{
+        background-color: #333333;
+        border-radius: 0px 20px 20px 0px;
+        line-height: 40px;
+        display: inline-block;
+        height: 40px;
+        margin-right: 10px;
+        .shop-name{
+          font-size: 20px;
+          color: #FFEBC4;
+          padding: 0 8px 0 12px;
+        }
+        .shop-logo{
+          border: 2px solid #707070;
+          border-radius: 50%;
+          overflow: hidden;
+          float: right;
+          img{
+            width: 34px;
+            height: 34px;
+            display: block;
+          }
+        }
+      }
+      .flag{
+        float: left;
+        margin-right: 20px;
+        img{
+          height: 44px;
+        }
+      }
+      .buy-count{
+        color: #C5AA7B;
+        font-size: 20px;
+        border: 2px solid #E4E5E6;
+        line-height: 40px;
+        padding: 0 5px;
+        display: inline-block;
+      }
+      .price-warp{
+        display: flex;
+        align-items: baseline;
+        line-height: 56px;
+        margin-top: 16px;
+        .price{
+          color: #C83732;
+          font-size: 40px;
+          margin-right: 20px;
+        }
+        .original-price{
+          font-size: 24px;
+          color: #ccc;
+          text-decoration: line-through;
+        }
+      }
+    }
+    //::v-deep .swiper-pagination-bullet{
+    //  display: none;
+    //}
+  }
+}
+
+.pagination{
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  ::v-deep .swiper-pagination-bullet{
+    width: 10px;
+    height: 10px;
+    background: #333333;
+    opacity: 0.3;
+    border-radius: 5px;
+    margin: 0 5px;
+  }
+  ::v-deep .swiper-pagination-bullet-active{
+    width: 20px;
+    height: 10px;
+    opacity: 1;
+  }
+}
+.btn-more {
+  width: 170px;
+  height: 54px;
+  border: 2px solid #C5AA7B;
+  color: #C5AA7B;
+  font-size: 24px;
+  background-color: transparent;
+  margin: 20px auto 0;
+  display: block;
+}
+
+</style>

canvas-container/components/canvasShow/basics/discount/mixin.js

@@ -0,0 +1,118 @@
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import api from '../../config/api'
+import {funMixin} from '../../config/mixin'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'discountList',
+  mixins: [funMixin],
+  data () {
+    return {
+      value: 100,
+      productData: {},
+      count: [],
+      timer: null
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  computed: {
+    ...mapGetters([
+      'discountNum'
+    ]),
+  },
+  watch: {
+    'discountNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+      this.getData()
+  },
+  methods: {
+    getData() {
+      const _ = this
+      if(_.componentContent.discountId){
+        this.beforeGetData()
+        var _url= ''
+        if(this.typeId === 1){
+          _url= `${api.getMinDiscount}?ids=${_.componentContent.discountId}`
+        }
+        if(this.typeId === 3){
+          _url= `${api.getDiscounts}?shopId=${_.shopId}&ids=${_.componentContent.discountId}`
+        }
+        const params = {
+          method: 'GET',
+          url: _url,
+        }
+        this.sendReq(params, (res) => {
+          _.afterGetData()
+          if(res.data.length> 0){
+            _.productData = res.data[0]
+            // 只有进行中和未开始活动, 用倒计时
+            if(_.productData.state !==2) {
+              this.timer = setInterval(()=>{
+                _.getTime(_.productData)
+              }, 1000)
+            }
+          }
+        },(err)=>{
+          _.afterGetData()
+        })
+      } else {
+        _.productData = {
+          products:[]
+        }
+      }
+    },
+    getTime(info) {
+      const date = new Date().getTime()
+      const startTime = new Date(info.startTime.replace(/-/g,'/')).getTime()
+      const endTime = new Date(info.endTime.replace(/-/g,'/')).getTime()
+      if(startTime > date) {
+        this.countDown(startTime-date,true) // 未开始
+      } else {
+        this.countDown(endTime-date) // 进行中
+      }
+
+    },
+    countDown(time, isStart) {
+      const fn = (v) =>  v < 10 ? `0${v}` : v
+      const t = parseInt(time / 1000)
+      const text = isStart ? '开始' : '结束'
+      const hour = parseInt(t / 3600)
+      const min = parseInt((t % 3600) / 60)
+      const s = t % 60
+      this.count = [text, fn(hour), fn(min), fn(s)]
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
+}

canvas-container/components/canvasShow/basics/discount/pc/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="discount">
+    <div class="discount-top">
+      <div class="discount-top-text">全场5折起</div>
+      <div class="discount-top-time">
+<!--        距{{count[0]}}-->
+        距离本场结束还有
+        <div class="time"><span>{{count[1]}}</span>:<span>{{count[2]}}</span>:<span>{{count[3]}}</span></div></div>
+    </div>
+    <div class="discount-more" :style="{backgroundImage: 'url('+ componentContent.moreBg +')'}">
+      <div class="discount-more-overlay">
+        <button class="btn-more" @click="jumpGroupWorks(productData)">查看全部</button>
+      </div>
+    </div>
+    <div class="discount-list">
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+      <swiper class="products-swiper" :options="swiperOption">
+        <swiper-slide class="products-swiper-slide item" v-for="(item,index) in productData.products" :key="index">
+          <div class="a-link" @click="jumpProductDetail(item)">
+            <div class="itemImgBox">
+              <div class="imgBox">
+                <el-image
+                  :src="item.image"
+                  fit="contain"></el-image>
+              </div>
+            </div>
+            <div class="text">
+              <h4 class="h4">{{item.productName}}</h4>
+              <div class="priceBox">
+                <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+                <dl>
+                  <dt><img src="../../../static/images/discount/flag-discount.png" alt="折扣价"></dt>
+                  <dd>
+                    ¥{{item.price}}
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      swiperOption: {
+        slidesPerView: 3, // 显示数量
+        spaceBetween: 13, // 间隔
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.discount-pagination'
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.discount{
+  width: 1200px;
+  max-width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  &-top{
+    height: 250px;
+    padding-top: 96px;
+    margin-bottom: 15px;
+    background: url("../../../static/images/discount/bg-discount-top.png") no-repeat;
+    &-text{
+      background: url("../../../static/images/discount/bg-discount-top-text.png") no-repeat;
+      width: 176px;
+      height: 83px;
+      padding-top: 13px;
+      line-height: 50px;
+      font-size: 25px;
+      color: #fff;
+      margin: 0px auto 18px;
+      text-align: center;
+    }
+    &-time{
+      margin: 0 auto;
+      text-align: center;
+      font-size: 16px;
+      color: #FFEBC4;
+      .time{
+        font-size: 20px;
+        color: #999;
+        display: inline-block;
+        span{
+          display: inline-block;
+          line-height: 40px;
+          padding: 0 9px;
+          margin: 0 5px;
+          background-color: #343434;
+          color: #fff;
+        }
+      }
+    }
+  }
+  &-list{
+    margin-right: 303px;
+    position: relative;
+    .swiper-button-prev,.swiper-button-next{
+      width: 95px;
+      height: 95px;
+      position: absolute;
+      cursor:pointer;
+      top: 115px;
+      background-repeat: no-repeat;
+      &:after{
+        content: '';
+      }
+    }
+    .swiper-button-prev{
+      left: -22px;
+      background: url('../../../static/images/btn-prev2.png');
+    }
+    .swiper-button-next{
+      right: -22px;
+      background: url('../../../static/images/btn-next2.png');
+    }
+    .a-link{
+      cursor: pointer;
+      &:hover{
+        box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+      }
+      .itemImgBox {
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .imgBox {
+          padding-bottom: 100%;
+          background-color: #cacaca;
+          position: relative;
+          .el-image {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+      }
+      .text{
+        padding:25px 20px 17px;
+        text-align: center;
+        //height: 180px;
+        .h4{
+          font-size: 18px;
+          line-height: 24px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          color: #333333;
+          //max-height: 48px;
+        }
+        .p{
+          color: #999;
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          padding-top: 18px;
+          position: relative;
+          margin-top: 8px;
+          &:after{
+            position: absolute;
+            top: 0;
+            left: 50%;
+            margin-left: -80px;
+            width: 160px;
+            height: 2px;
+            background: #F0F0F0;
+            content: '';
+          }
+        }
+        .priceBox {
+          dl {
+            display: inline-block;
+            min-width: 130px;
+            dt{
+              float: left;
+              img{
+                display: block;
+              }
+            }
+            dd{
+              border: 1px solid #F3F4F5;
+              font-size: 25px;
+              line-height: 34px;
+              color: #C83732;
+              margin-left: 57px;
+              padding: 0 10px;
+            }
+          }
+          span.discount {
+            display: block;
+            font-size: 18px;
+            line-height: 24px;
+            padding: 15px 0 11px;
+            color: #ccc;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+  &-more{
+    width: 290px;
+    height: 466px;
+    float: right;
+    position: relative;
+    &-overlay{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0,0.6);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .btn-more{
+        width: 130px;
+        height: 41px;
+        background-color: #fff;
+        font-size: 18px;
+        color: #C5AA7B;
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/group/app/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="group-list">
+    <div class="group-warp">
+      <div class="title">
+        <label>
+          <img src="../../../static/images/group/img-title.png" alt="拼团专区"/>
+        </label>
+        <a v-show="componentContent.showMore" class="btn-all a-link" @click="jumpDiscount(productData)">更多<i class="iconfont icon-arrow-right"></i></a>
+      </div>
+      <swiper class="pro-box" :options="swiperOption">
+        <swiper-slide class="pro-item" v-for="(item,index) in productData.products" :key="index" @click="jumpProductDetail(item)">
+          <div class="pro-item-img">
+            <img v-show="item.image" class="img" :src="item.image">
+          </div>
+          <div class="pro-item-info">
+            <label class="name">{{item.productName}}</label>
+            <div class="price">
+              <label class="unit">¥ </label>
+              <label class="val"> {{item.price}}</label>
+            </div>
+            <label class="buyCount">{{item.workUsers?item.workUsers:0}}人已拼</label>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="pagination group-pagination"></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      swiperOption: {
+        slidesPerView: 3, // 显示数量
+        spaceBetween: 16, // 间隔
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.group-pagination'
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .group-list{
+    padding: 30px 20px 60px;
+    .group-warp{
+      width: 710px;
+      height: 528px;
+      padding: 0 10px;
+      background: #333333;
+      box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.3);
+      opacity: 1;
+      border-radius: 20px;
+    }
+    .title{
+      display: flex;
+      align-items:center;
+      position: relative;
+      padding: 40px 0 30px 20px;
+      .btn-all{
+        position: absolute;
+        right: 8px;
+        top: 40px;
+        line-height: 33px;
+        padding-right: 25px;
+        font-size: 24px;
+        color: #FFEBC4;
+        .iconfont{
+          content: '';
+          font-size: 26px;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+      }
+    }
+    .pro-box{
+      padding-bottom: 20px;
+      .pro-item{
+        width: 220px;
+        height: 382px;
+        background: #FFFFFF;
+        .pro-item-img{
+          .img{
+            width: 100%;
+            height: 220px;
+          }
+        }
+        .pro-item-info{
+          text-align: center;
+          padding: 0px 10px 20px;
+          .name{
+            font-size: 24px;
+            font-weight: normal;
+            color: #FFEBC4;
+            line-height: 50px;
+            background-color: #333333;
+            text-align: center;
+            margin-bottom: 18px;
+            padding: 0 5px;
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .price{
+            color: #C83732;
+            font-size: 28px;
+            font-weight: bold;
+            line-height: 40px;
+          }
+          .buyCount{
+            font-size: 24px;
+            color: #ccc;
+            line-height: 34px;
+            font-weight: normal;
+          }
+        }
+      }
+    }
+    .pagination{
+      display: flex;
+      justify-content: center;
+      ::v-deep .swiper-pagination-bullet{
+        width: 24px;
+        height: 4px;
+        background: #fff;
+        opacity: 0.5;
+        border-radius: 2px;
+        margin: 0 5px;
+      }
+      ::v-deep .swiper-pagination-bullet-active{
+        opacity: 1;
+      }
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/group/mixin.js

@@ -0,0 +1,94 @@
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import api from '../../config/api'
+import {funMixin} from '../../config/mixin'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'productList',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  data () {
+    return {
+      productData: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'groupNum'
+    ]),
+  },
+  watch: {
+    'groupNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+      this.getData()
+  },
+  methods: {
+      getData() {
+        const _ = this
+        let _url = ''
+        if(_.typeId === 1){
+          this.beforeGetData()
+          const params = {
+            method: 'GET',
+            url: `${api.getAdminGroupWorks}`,
+          }
+          this.sendReq(params, (res) => {
+            _.afterGetData()
+            _.productData.products = res.data
+            _.$forceUpdate()
+          },(err)=>{
+            _.afterGetData()
+          })
+        } else if(_.typeId === 3) {
+          if(_.componentContent.shopGroupWorkId){
+            this.beforeGetData()
+            const params = {
+              method: 'GET',
+              url: `${api.getGroupWorks}?shopId=${_.shopId}&ids=${_.componentContent.shopGroupWorkId}`,
+            }
+            this.sendReq(params, (res) => {
+              _.afterGetData()
+              _.productData = res.data[0]
+            },(err)=>{
+              _.afterGetData()
+            })
+          } else {
+            _.productData = {
+              products:[]
+            }
+          }
+        }
+
+      },
+  }
+}

canvas-container/components/canvasShow/basics/group/pc/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="product-list" :class="'terminal'+terminal">
+    <div class="picListWarp" v-if="componentContent.arrangeType == '横向滑动'">
+      <div class="picList" v-if="productData.products && productData.products.length>0">
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+        <swiper class="products-swiper" :options="swiperOption">
+          <swiper-slide class="products-swiper-slide item" v-for="(item,index) in productData.products" :key="index">
+            <div class="a-link" @click="jumpProductDetail(item)">
+              <div class="itemImgBox">
+                <div class="imgBox">
+                  <el-image
+                    :src="item.image"
+                    fit="contain"></el-image>
+                </div>
+              </div>
+              <div class="text">
+                <h4 class="h4">{{item.productName}}</h4>
+                <div class="priceBox">
+                  <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+                  <dl>
+                    <dt><img src="../../../static/images/group/flag-group.png" alt="拼团价"></dt>
+                    <dd>
+                      ¥{{item.price}}
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <div v-else class="picList" >
+      <ul class="clearfix" :class="'imgTextNum' +  componentContent.productNum"  v-if="productData.products && productData.products.length>0">
+        <li class="item" v-for="(item,index) in productData.products.slice(0, componentContent.productRowNum * componentContent.productNum)" :key="index">
+          <div class="a-link" @click="jumpProductDetail(item)">
+            <div class="itemImgBox">
+              <div class="imgBox">
+                <el-image
+                  :src="item.image"
+                  fit="contain"></el-image>
+              </div>
+            </div>
+            <div class="text">
+              <h4 class="h4">{{item.productName}}</h4>
+              <div class="priceBox">
+                <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+                <dl>
+                  <dt><img src="../../../static/images/group/flag-group.png" alt="拼团价"></dt>
+                  <dd>
+                    ¥{{item.price}}
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpGroupWorks(productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+  import {commonMixin} from '../mixin'
+  export default {
+    mixins: [commonMixin],
+    data () {
+      return {
+        swiperOption: {
+          slidesPerView: 4, // 显示数量
+          spaceBetween: 13, // 间隔
+          autoplay: false, // 可选选项，自动滑动
+          loop: true,
+          pagination: {
+            el: '.group-pagination'
+          },
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.product-list{
+  padding: 20px 0;
+  background-color: #fff;
+  .picListWarp{
+    width: 1380px;
+    max-width: 100%;
+    margin: 0 auto;
+    position: relative;
+  }
+  .picList{
+    width: 1200px;
+    max-width: 100%;
+    margin: 0 auto;
+    .swiper-button-prev,.swiper-button-next{
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      cursor:pointer;
+      top: 140px;
+      background-repeat: no-repeat;
+      &:after{
+        content: '';
+      }
+    }
+    .swiper-button-prev{
+      left: 0;
+      background: url('../../../static/images/btn-prev.png');
+    }
+    .swiper-button-next{
+      right: 0;
+      background: url('../../../static/images/btn-next.png');
+    }
+    .a-link{
+      cursor: pointer;
+      &:hover{
+        box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+      }
+      .itemImgBox {
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .imgBox {
+          padding-bottom: 100%;
+          background-color: #cacaca;
+          position: relative;
+          .el-image {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+      }
+      .text{
+        padding:25px 20px 17px;
+        text-align: center;
+        //height: 180px;
+        .h4{
+          font-size: 18px;
+          line-height: 24px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          color: #333333;
+          //max-height: 48px;
+        }
+        .p{
+          color: #999;
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          padding-top: 18px;
+          position: relative;
+          margin-top: 8px;
+          &:after{
+            position: absolute;
+            top: 0;
+            left: 50%;
+            margin-left: -80px;
+            width: 160px;
+            height: 2px;
+            background: #F0F0F0;
+            content: '';
+          }
+        }
+        .priceBox {
+          dl {
+            display: inline-block;
+            min-width: 130px;
+            dt{
+              float: left;
+              img{
+                display: block;
+              }
+            }
+            dd{
+              border: 1px solid #F3F4F5;
+              font-size: 25px;
+              line-height: 34px;
+              color: #C83732;
+              margin-left: 57px;
+              padding: 0 10px;
+            }
+          }
+          span.discount {
+            display: block;
+            font-size: 18px;
+            line-height: 24px;
+            padding: 15px 0 11px;
+            color: #ccc;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+    ul{
+      margin: -15px 0 0 -15px;
+      display: flex;
+      flex-wrap: wrap;
+      li{
+        flex: 0 0 50%;
+        padding: 15px 0 0 15px;
+        width: 0;
+      }
+    }
+    .imgTextNum2 {
+      li {
+        flex: 0 0 50%;
+      }
+    }
+    .imgTextNum3 {
+      li {
+        flex: 0 0 33.33%;
+      }
+    }
+    .imgTextNum4 {
+      li {
+        flex: 0 0 25%;
+      }
+    }
+    .imgTextNum5 {
+      li {
+        flex: 0 0 20%;
+      }
+    }
+  }
+}
+.btn-more {
+  width: 130px;
+  height: 41px;
+  border: 2px solid #C5AA7B;
+  color: #C5AA7B;
+  font-size: 18px;
+  background-color: transparent;
+  margin: 20px auto 0;
+  display: block;
+}
+</style>

canvas-container/components/canvasShow/basics/imageText.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="imageText warp" :class="['terminal'+terminal,'pos-' + componentContent.positionValue]">
+    <div class="img img-left">
+      <a class="a-link" @click="jumpLink(componentContent.linkObj)"><img :src="componentContent.imageUrl" alt=""></a>
+    </div>
+    <div class="text">
+      <h3 class="h3">{{componentContent.title}}</h3>
+      <div v-html="componentContent.content"></div>
+    </div>
+    <div class="img img-right">
+      <a class="item a-link" @click="jumpLink(componentContent.linkObj)"><img :src="componentContent.imageUrl" alt=""></a>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {funMixin} from '../config/mixin'
+  export default {
+    name: 'imageTextComponent',
+    mixins: [funMixin],
+    data () {
+      return {
+      }
+    },
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .imageText{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+    .img{
+      width: 50%;
+      padding-bottom: 30%;
+      background-color: #cacaca;
+      position: relative;
+      img{
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+        position: absolute;
+        margin: auto;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+    .text{
+      width: 40%;
+      .h3{
+        font-size: 30px;
+        margin-bottom: 24px;
+      }
+      .p{
+        font-size: 16px;
+      }
+    }
+    &.pos-top{
+      display: block;
+      text-align: center;
+      .img{
+        width: 100%;
+      }
+      .text{
+        width: 100%;
+        margin-top: 30px;
+      }
+      .img-right{
+        display: none;
+      }
+    }
+    &.pos-bottom{
+      display: block;
+      text-align: center;
+      .img{
+        width: 100%;
+      }
+      .text{
+        width: 100%;
+        margin-bottom: 30px;
+      }
+      .img-left{
+        display: none;
+      }
+    }
+    &.pos-left{
+      .img-right{
+        display: none;
+      }
+    }
+    &.pos-right{
+      .text{
+        padding-left: 20px;
+      }
+      .img-left{
+        display: none;
+      }
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/imageTextList.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="hom-pro-list warp" :class="'terminal'+terminal">
+    <div class="title">
+      <h2 class="h2" :style="{textAlign:componentContent.textAlign}">{{componentContent.title}}</h2>
+    </div>
+    <ul class="clearfix" :class="{imgTextNum4: componentContent.imgTextData.length === 4, imgTextNum5: componentContent.imgTextData.length === 5, imgTextStyle: componentContent.imgTextData.length >= 6 || componentContent.imgTextData.length === 3}">
+      <li v-for="(item,index) in componentContent.imgTextData" :key="index">
+        <a class="item a-link" @click="jumpLink(componentContent.linkObj)">
+          <div class="itemImgBox" v-show="item.isShow">
+            <div class="imgBox">
+              <img ref="getHeight" :src="item.imgData" v-show="item.imgData" :alt="item.title">
+            </div>
+          </div>
+          <div class="text">
+            <h4 class="h4">{{item.title}}</h4>
+            <p class="p">{{item.describe}}</p>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import {funMixin} from '../config/mixin'
+  export default {
+    name: 'imageTextList',
+    mixins: [funMixin],
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .hom-pro-list{
+    min-height: 450px;
+    padding: 20px 0;
+    .title{
+      margin-bottom: 23px;
+      position: relative;
+      .h2{
+        font-size: 22px;
+        color: #333;
+        line-height: 1em;
+        font-weight: bold;
+      }
+    }
+    ul{
+      margin: -15px 0 0 -15px;
+      display: flex;
+      flex-wrap: wrap;
+      li{
+        flex: 0 0 50%;
+        padding: 15px 0 0 15px;
+        box-sizing: border-box;
+        .item{
+          .itemImgBox {
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .imgBox {
+              padding-bottom: 80%;
+              background-color: #cacaca;
+              position: relative;
+              img {
+                max-width: 100%;
+                height: 100%;
+                max-height: 100%;
+                position: absolute;
+                margin: auto;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+              }
+            }
+          }
+          .text{
+            padding:16px 20px;
+            text-align: center;
+            .h4{
+              line-height: 25px;
+              overflow: hidden;
+              color: #333333;
+            }
+            .p{
+              color: #666666;
+              padding: 5px 0 10px;
+            }
+          }
+        }
+      }
+    }
+    .imgTextNum4 {
+      li {
+        flex: 0 0 50%;
+      }
+    }
+    .imgTextNum5 {
+      li {
+        flex: 0 0 33.33%;
+      }
+      li:nth-child(1) {
+        flex: 0 0 50%;
+      }
+      li:nth-child(2) {
+        flex: 0 0 50%;
+      }
+    }
+    .imgTextStyle {
+      li {
+        flex: 0 0 33.33%;
+      }
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .hom-pro-list ul li{
+      flex: 0 0 50%;
+    }
+  }
+  .terminal1,.terminal2,.terminal3{
+    &.hom-pro-list ul li{
+      flex: 0 0 50%;
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/imageTextNav.vue

@@ -0,0 +1,96 @@
+<template>
+  <ul class="ul image-text-nav" :class="'terminal' + terminal">
+    <li class="li" v-for="(item,index) in componentContent.imgTextData" :key="index" :style="{'flex':'0 0 '+ getItemValue() + '%'}">
+      <!--<router-link class="item" :to="jumpLink(item.linkObj)">-->
+        <div class="img-box">
+          <div class="img-box-inner">
+            <el-image
+              :src="item.img"
+              fit="cover"></el-image>
+          </div>
+        </div>
+        <h4 class="h4">{{item.title}}</h4>
+      <!--</router-link>-->
+    </li>
+  </ul>
+</template>
+
+<script>
+  import {funMixin} from '../config/mixin'
+  export default {
+    name: 'imageTextNav',
+    mixins: [funMixin],
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    },
+    methods: {
+      // 计算生成格子百分比
+      getItemValue (val) {
+        const len = parseInt(this.componentContent.imgTextData.length)
+        if (len === 0) {
+          return 0
+        } else {
+          return (1 / len * 10000 / 100.00)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .image-text-nav{
+    min-height: 100px;
+    width: 690px;
+    margin: 0 auto;
+    display: flex;
+    padding: 20px 0;
+    .li{
+      text-align: center;
+      .img-box{
+        .el-image{
+          width: 100px;
+          height: 100px;
+        }
+      }
+      .h4{
+        font-size: 26px;
+        color: #333;
+        line-height: 33px;
+      }
+    }
+    &.terminal4{
+      width: 1000px;
+      .li{
+        .img-box{
+          display: inline-block;
+          width: 100px;
+          height: 100px;
+          border: 2px solid #F3F4F5;
+          border-radius: 10px;
+          &-inner{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+          }
+          .el-image{
+            width: 60px;
+            height: 60px;
+          }
+        }
+        .h4{
+          font-size: 18px;
+          color: #ccc;
+          line-height: 1em;
+          padding-top: 20px;
+        }
+      }
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/live/app/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="live-list-page">
+    <div class="title">
+      <img src="../../../static/images/live/img-title.png" alt="商品推荐"/>
+    </div>
+    <div class="live-list">
+      <LiveBox class="live-item"
+               v-for="item in roomList"
+               :key="item.roomid"
+               :liveData.sync="item"
+               @click="toLiveRoom(item)"
+      />
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpGroupWorks(productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+import LiveBox from './item'
+export default {
+  mixins: [commonMixin],
+  components: {
+    LiveBox
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.live-list-page{
+  .title{
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .live-list{
+    padding-left: 20px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .live-item{
+      margin:0 14px 14px 0;
+      width: 348px;
+      height: 464px;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+  .btn-more {
+    width: 170px;
+    height: 54px;
+    border: 2px solid #C5AA7B;
+    color: #C5AA7B;
+    font-size: 24px;
+    background-color: transparent;
+    margin: 20px auto 0;
+    display: block;
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/live/app/item.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="live-box">
+    <div class="live-ongoing" v-if="liveData.live_status === 101 || isOn">
+      <img class="cover-img" :src="liveData.cover_img" />
+      <div class="status">
+        <div class="status-state">
+          <img class="img" src="../../../static/images/live/icon-live-num.png" />直播中</div>
+        <div class="status-num">1000人</div>
+      </div>
+      <div class="user">
+        <div class="user-pic">
+          <img class="img" src="../../../static/images/live/huabei.png" />
+        </div>
+        <view class="user-name">{{ liveData.anchor_name }}</view>
+      </div>
+      <div class="products">
+        <div class="uni-padding-wrap">
+          <div class="page-section swiper">
+            <div class="page-section-spacing">
+              <el-carousel height="34px" direction="vertical" indicator-position="none">
+                <el-carousel-item v-for="item in liveData.goods" :key="item.goods_id">
+                  <h3 class="medium">{{ item.name }}</h3>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="live-other" v-else>
+      <img class="cover-img" :src="liveData.cover_img" />
+      <div class="user">
+        <div class="user-pic"><img class="img" src="../../../static/images/live/huabei.png" /></div>
+        <div class="user-name">{{ liveData.anchor_name }}</div>
+      </div>
+      <div class="count-down">
+        <div class="text">开播倒计时</div>
+        <div class="time">
+          <div class="time-item dots">{{times[0]}}</div>
+          <div class="time-item dots">{{times[1]}}</div>
+          <div class="time-item">{{times[2]}}</div>
+        </div>
+      </div>
+      <div class="btn-subscribe">立即预约</div>
+      <!--      <view class="btn-subscribe subscribed">已预约</view>-->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    liveData: {
+      type: Object,
+      default: () => ({
+        name: '',
+        cover_img: ''
+      })
+    }
+  },
+  data () {
+    return {
+      background: ['color1', 'color2', 'color3'],
+      indicatorDots: false,
+      autoplay: true,
+      interval: 2000, // 自动播放间隔时长
+      duration: 500, // 幻灯片切换时长(ms)
+      times: [],
+      isOn: false
+    }
+  },
+  created() {
+    this.countTime()
+  },
+  methods: {
+    changeIndicatorDots(e) {
+      this.indicatorDots = !this.indicatorDots
+    },
+    changeAutoplay(e) {
+      this.autoplay = !this.autoplay
+    },
+    intervalChange(e) {
+      this.interval = e.target.value
+    },
+    durationChange(e) {
+      this.duration = e.target.value
+    },
+    countTime(){
+      var nowtime = new Date().getTime()  //获取当前时间
+      var starttime = this.liveData.start_time * 1000
+      if(this.liveData.live_status === 102){
+        if(starttime > nowtime){
+          var lefttime = starttime - nowtime  //距离结束时间的毫秒数
+          var leftd = Math.floor(lefttime/(1000*60*60)),  //计算小时数
+            leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
+            lefts = Math.floor(lefttime/1000%60);  //计算秒数
+          this.times = [leftd < 10?'0'+ leftd:leftd,leftm < 10?'0'+ leftm:leftm,lefts < 10?'0'+ lefts:lefts]
+          setTimeout(() => {
+            this.countTime()
+          },1000)
+        } else {
+          this.isOn = true
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.live-box{
+  position: relative;
+  color: #fff;
+  .cover-img{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 0;
+  }
+  .user{
+    display: flex;
+    line-height: 60px;
+    height: 64px;
+    &-pic{
+      .img{
+        width: 60px;
+        height: 60px;
+        border: 2px solid rgba(255, 255, 255, 0.5019607843137255);
+        border-radius: 50%;
+        overflow: hidden;
+      }
+    }
+    &-name{
+      font-size: 28px;
+      margin-left: 16px;
+    }
+  }
+  .live-ongoing{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .status{
+      position: absolute;
+      top: 22px;
+      left: 22px;
+      //width: 212upx;
+      height: 48px;
+      background: rgba(0,0,0,0.3);
+      border: 2px solid rgba(255,255,255,0.3);
+      border-radius: 24px;
+      font-size: 20px;
+      line-height: 44px;
+      display: flex;
+      padding-right: 8px;
+      &-state{
+        width: 118px;
+        height: 44px;
+        background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
+        opacity: 1;
+        border-radius: 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .img{
+          width: 20px;
+          height: 20px;
+          margin-right: 6px;
+        }
+      }
+      &-num{
+        min-width: 80px;
+        padding: 0 8px;
+      }
+    }
+    .user{
+      position: absolute;
+      bottom: 62px;
+      left: 20px;
+    }
+    .products{
+      position: absolute;
+      left: 0px;
+      bottom: 20px;
+      width: 100%;
+      padding:0 20px;
+      .swiper{
+        height: 34px;
+        line-height: 34px;
+        font-size: 24px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+  .live-other{
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .cover-img{
+      filter:blur(20px);
+      -webkit-filter:blur(20px);
+      -moz-filter:blur(20px);
+      -ms-filter:blur(20px);
+      -o-filter:blur(20px);
+    }
+    .user{
+      position: absolute;
+      top: 20px;
+      left: 20px;
+    }
+    .count-down{
+      position: relative;
+      .text{
+        font-size: 26px;
+        line-height: 36px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+        text-align: center;
+      }
+      .time{
+        display: flex;
+        &-item{
+          min-width: 52px;
+          padding: 0 5px;
+          height: 52px;
+          line-height: 52px;
+          background: #FFFFFF;
+          opacity: 1;
+          border-radius: 4px;
+          font-size: 26px;
+          color: #C83732;
+          text-align: center;
+          &.dots{
+            margin-right: 22px;
+            position: relative;
+            &:before,&:after{
+              content:'';
+              width: 6px;
+              height: 6px;
+              background: #FFFFFF;
+              position: absolute;
+              right: -14px;
+            }
+            &:before{
+              top: 14px;
+            }
+            &:after{
+              bottom: 14px;
+            }
+          }
+        }
+      }
+    }
+    .btn-subscribe{
+      width: 200px;
+      height: 64px;
+      line-height: 64px;
+      background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
+      box-shadow: 0rpx 6px 12px rgba(233, 0, 0, 0.3);
+      opacity: 1;
+      border-radius: 8px;
+      color: #fff;
+      font-size: 24px;
+      text-align: center;
+      position: absolute;
+      bottom: 60px;
+      left: 50%;
+      margin-left: -100px;
+      &.subscribed{
+        background: #FFFFFF;
+        color: #999999;
+        box-shadow: none;
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/live/mixin.js

@@ -0,0 +1,113 @@
+export const commonMixin = {
+  data() {
+    return {
+      appid: 'wx2b03c6e691cd7370',
+      roomId: [], // 填写具体的房间号
+      roomList: []
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  created() {
+    this.getLiveRooms()
+  },
+  methods: {
+    // 获取直播间列表
+    getLiveRooms () {
+      // Net.request('https://api.weixin.qq.com/wxa/business/getliveinfo?access_token=').then(res => {})
+      const response = {
+        "errcode": 0,    // 错误码，0代表成功，1代表未创建直播间
+        "errmsg": "ok",   // 错误信息
+        "total":1,
+        "room_info":[{
+          "name":"直播房间名",
+          "roomid": 1,
+          "cover_img":"https://tse4-mm.cn.bing.net/th/id/OIP-C.eJnwPMdBIGhMob2NTkqGUAHaJa?pid=ImgDet&rs=1",
+          "share_img":"http://http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",
+          "live_status": 101,
+          // "live_status": 101, // 直播间状态。101：直播中，102：未开始，103已结束，104禁播，105：暂停，106：异常，107：已过期
+          "start_time": 1568128900, // 直播间开始时间，列表按照start_time降序排列
+          "end_time": 1568131200, // 直播计划结束时间
+          "anchor_name":"里斯",
+          "goods":[{
+            "cover_img":"http://http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",
+            "url":"pages/index/index.html",
+            "name":"茶杯",
+            "price": 1889,          // 价格（分）
+            "price2": 0,
+            "price_type": 1,        // 价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
+            "goods_id": 256,        // 商品id
+            "third_party_appid": "wx3d0fae56402d8a81" //第三方商品appid ,当前小程序商品则为空
+          }],
+          "live_type": 0,				// 直播类型，1 推流 0 手机直播
+          "close_like": 0,			// 是否关闭点赞 【0：开启，1：关闭】（若关闭，观众端将隐藏点赞按钮，直播开始后不允许开启）
+          "close_goods": 0,			// 是否关闭货架 【0：开启，1：关闭】（若关闭，观众端将隐藏商品货架，直播开始后不允许开启）
+          "close_comment": 0,			// 是否关闭评论 【0：开启，1：关闭】（若关闭，观众端将隐藏评论入口，直播开始后不允许开启）
+          "close_kf": 1,				// 是否关闭客服 【0：开启，1：关闭】 默认关闭客服（直播开始后允许开启）
+          "close_replay": 1,			// 是否关闭回放 【0：开启，1：关闭】默认关闭回放（直播开始后允许开启）
+          "is_feeds_public": 0,		// 是否开启官方收录，1 开启，0 关闭
+          "creater_openid": "oawjt4t9NWZV2BYaEPA89sh1XblE", // 创建者openid
+          "feeds_img": "XXX"			// 官方收录封面
+        },{
+          "name":"直播房间名",
+          "roomid": 2,
+          "cover_img":"https://tse4-mm.cn.bing.net/th/id/OIP-C.eJnwPMdBIGhMob2NTkqGUAHaJa?pid=ImgDet&rs=1",
+          "share_img":"http://http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",
+          "live_status": 102,
+          // "live_status": 101, // 直播间状态。101：直播中，102：未开始，103已结束，104禁播，105：暂停，106：异常，107：已过期
+          "start_time": 1639223017, // 直播间开始时间，列表按照start_time降序排列
+          "end_time": 1639200008, // 直播计划结束时间
+          "anchor_name":"里斯",
+          "goods":[{
+            "cover_img":"http://http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",
+            "url":"pages/index/index.html",
+            "name":"茶杯",
+            "price": 1889,          // 价格（分）
+            "price2": 0,
+            "price_type": 1,        // 价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
+            "goods_id": 256,        // 商品id
+            "third_party_appid": "wx3d0fae56402d8a81" //第三方商品appid ,当前小程序商品则为空
+          }],
+          "live_type": 0,				// 直播类型，1 推流 0 手机直播
+          "close_like": 0,			// 是否关闭点赞 【0：开启，1：关闭】（若关闭，观众端将隐藏点赞按钮，直播开始后不允许开启）
+          "close_goods": 0,			// 是否关闭货架 【0：开启，1：关闭】（若关闭，观众端将隐藏商品货架，直播开始后不允许开启）
+          "close_comment": 0,			// 是否关闭评论 【0：开启，1：关闭】（若关闭，观众端将隐藏评论入口，直播开始后不允许开启）
+          "close_kf": 1,				// 是否关闭客服 【0：开启，1：关闭】 默认关闭客服（直播开始后允许开启）
+          "close_replay": 1,			// 是否关闭回放 【0：开启，1：关闭】默认关闭回放（直播开始后允许开启）
+          "is_feeds_public": 0,		// 是否开启官方收录，1 开启，0 关闭
+          "creater_openid": "oawjt4t9NWZV2BYaEPA89sh1XblE", // 创建者openid
+          "feeds_img": "XXX"			// 官方收录封面
+        }]
+      }
+      this.roomList = response.room_info
+    },
+    toLiveRoom (item) {
+      this.roomId.push(item.roomid)
+      if (!this.appid || !this.roomId.length) { return }
+      // 路由参数
+      let customParams = encodeURIComponent(JSON.stringify({ path: 'livePage/index', pid: 1 }))
+      // let customParams
+      // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
+      // #ifdef MP-WEIXIN
+      wx.navigateTo({
+        url: `plugin-private://${this.appid}/pages/live-player-plugin?room_id=${this.roomId}&custom_params=${customParams}`
+      })
+      // #endif
+    }
+  }
+}

canvas-container/components/canvasShow/basics/newProduct/app/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="hom-pro-list">
+    <div class="product-swiper">
+      <swiper class="product-swiper-box" :options="swiperOption">
+        <swiper-slide class="product-swiper-item" v-for="(item,index) in productData.slice(0, 3)" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-swiper-img">
+            <img class="img" :src="item.image">
+          </div>
+          <div class="product-swiper-info">
+            <label class="product-name">{{item.productName}}</label>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="pagination new-pagination"></div>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      index: 1,
+      swiperOption: {
+        slidesPerView: 3,
+        spaceBetween: 12,
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.new-pagination'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hom-pro-list{
+  ::v-deep .swiper-wrapper{
+    position: static;
+  }
+  /**横向滑动**/
+  .product-swiper{
+    width: 100%;
+    height: 454px;
+    padding: 90px 34px 0;
+    background: url("../../../static/images/newProduct/bg-product-card.png") no-repeat center;
+    position: relative;
+    &+.btn-more{
+      margin-top: 20px;
+    }
+    .title{
+      padding: 22px 0px 0 0;
+      label{
+        background-image: none;
+        color: #A56C4C;
+        font-style: italic;
+        padding: 0;
+      }
+    }
+    &-box {
+      padding-bottom: 20px;
+    }
+    &-item {
+      width: 220px;
+      position: relative;
+      background-color: #FFFFFF;
+    }
+    &-img {
+      width: 220px;
+      height: 220px;
+      position: relative;
+      &:after{
+        content: '';
+        display: block;
+        width: 54px;
+        height: 54px;
+        background: url("../../../static/images/newProduct/flag-new.png") no-repeat;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-info {
+      background-color: #FFFFFF;
+      padding: 10px;
+      text-align: center;
+      .product-name{
+        font-size: 20px;
+        color: #333;
+        display: block;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        margin-bottom: 6px;
+        line-height: 28px;
+      }
+      .price-warp{
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        line-height: 28px;
+        .price{
+          color: #C83732;
+          font-size: 20px;
+          margin-right: 10px;
+        }
+        .original-price{
+          font-size: 16px;
+          color: #ccc;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+}
+
+.pagination{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  bottom: 0;
+  ::v-deep .swiper-pagination-bullet{
+    width: 24px;
+    height: 4px;
+    background: #FFFFFF;
+    opacity: 0.5;
+    border-radius: 2px;
+    margin: 0 10px;
+  }
+  ::v-deep .swiper-pagination-bullet-active{
+    opacity: 1;
+  }
+}
+.btn-more {
+  width: 170px;
+  height: 54px;
+  border: 2px solid #C5AA7B;
+  color: #C5AA7B;
+  font-size: 24px;
+  background-color: transparent;
+  margin: 20px auto 0;
+  display: block;
+}
+
+</style>

canvas-container/components/canvasShow/basics/newProduct/mixin.js

@@ -0,0 +1,107 @@
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import {funMixin} from '../../config/mixin'
+import 'swiper/css/swiper.css'
+import api from '../../config/api'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'productList',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  data () {
+    return {
+      productData: []
+    }
+  },
+  mounted() {
+    this.getData(true)
+  },
+  watch: {
+    'newProductNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'newProductNum'
+    ]),
+    swiper() {
+      if(this.$refs.mySwiper){
+        return this.$refs.mySwiper.$swiper
+      }
+    }
+  },
+  methods: {
+    getData(isFirst) {
+      const _ = this
+      if (_.componentContent.productData.sourceType === '1') {
+        if(_.componentContent.productData.productIdList && _.componentContent.productData.productIdList.length>0){
+          this.beforeGetData()
+          _.sendReq({
+            url: `${api.getProducts}?page=1&pageSize=99&ids=${_.componentContent.productData.productIdList}`,
+            method: 'GET'
+          }, (proRes) => {
+            _.afterGetData()
+            _.productData = proRes.data.list
+            if(isFirst){
+              _.componentContent.productData.imgTextData = _.productData
+            }
+            _.$forceUpdate() // 刷新轮播图
+          },(err)=>{
+            _.afterGetData()
+          })
+        } else {
+          _.productData = []
+        }
+      } else if(_.componentContent.productData.sourceType === '2'){
+        if(_.componentContent.productData.categoryId) {
+          this.beforeGetData()
+          _.sendReq({
+            url: `${api.getProducts}?page=1&pageSize=99&classifyId=${_.componentContent.productData.categoryId}`,
+            method: 'GET'
+          }, (proRes) => {
+            _.afterGetData()
+            _.productData = proRes.data.list
+            if(isFirst){
+              _.componentContent.productData.imgTextData = _.productData
+            }
+            _.$forceUpdate() // 刷新轮播图
+            // _.swiper.update()
+          },(err)=>{
+            _.afterGetData()
+          })
+        } else {
+          _.productData = {
+            products:[]
+          }
+        }
+      }
+    },
+  }
+}

canvas-container/components/canvasShow/basics/notice.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="notice-list" :class="'terminal'+terminal" :style="{backgroundColor:componentContent.bgColor}">
+    <swiper :options="swiperOption">
+      <swiper-slide v-for="(item,index) in noticesList" :key="index">
+        <div class="a-link" @click="jumpNoticeDetail(item)" :style="{color:componentContent.titColor}"><span>{{item.noticeTitle}}</span></div>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script>
+import api from '../config/api'
+import { funMixin } from '../config/mixin'
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+export default {
+  name: "noticeComponent",
+  mixins: [funMixin],
+  data () {
+    return {
+      noticesList: [],
+      swiperOption: {
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.swiper-pagination'
+        }
+      }
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  mounted() {
+      this.getData()
+  },
+  methods: {
+    getData() {
+      this.beforeGetData()
+      const _ = this
+      let _url = `${api.getNotices}`
+      const params = {
+        method: 'GET',
+        url: _url,
+      }
+      this.sendReq(params, (res) => {
+        this.afterGetData()
+        _.noticesList = res.data
+      },(err)=>{
+        this.afterGetData()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-list{
+  height: 60px;
+  line-height: 60px;
+  padding: 0 20px;
+  .a-link{
+    display: block;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    span{
+      display: inline-block;
+      padding-left: 50px;
+      font-size: 24px;
+      background: url("../static/images/notice/ico_notice2.png") no-repeat left center;
+    }
+  }
+  &.terminal4{
+    height: 50px;
+    line-height: 50px;
+    padding: 0;
+    .swiper-container{
+      height: 100%;
+      width: 1200px;
+      max-width: 100%;
+      margin: 0 auto;
+    }
+    .a-link{
+      display: block;
+      cursor: pointer;
+      text-align: left;
+      span{
+        display: block;
+        padding-left: 25px;
+        font-size: 14px;
+        background: url("../static/images/notice/ico_notice.png") no-repeat left center;
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/price/app/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="group-list">
+    <div class="group-warp">
+      <div class="title">
+        <label>
+          <img src="../../../static/images/price/img-title.png" alt="组合优惠"/>
+        </label>
+        <div class="price-text" v-if="productData.rules">
+          {{productData.rules[0].price}}元任选{{productData.rules[0].number}}件
+        </div>
+        <a v-show="componentContent.showMore" class="btn-all a-link" @click="jumpDiscount(productData)">更多<i class="iconfont icon-arrow-right"></i></a>
+      </div>
+      <swiper class="pro-box" :options="swiperOption">
+        <swiper-slide class="pro-item" v-for="(item,index) in productData.composeProducts" :key="index" @click="jumpProductDetail(item)">
+          <div class="pro-item-img">
+            <img v-show="item.image" class="img" :src="item.image">
+          </div>
+          <div class="pro-item-info">
+            <h3 class="name">
+              {{item.productName}}
+            </h3>
+            <div class="stock">
+              还剩{{item.stockNumber}}件
+            </div>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="pagination price-pagination"></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      swiperOption: {
+        slidesPerView: 2, // 显示数量
+        spaceBetween: 20, // 间隔
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.price-pagination'
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.group-list{
+  padding: 30px 20px 60px;
+  min-height: 80px;
+  .group-warp{
+    width: 710px;
+    height: 544px;
+    padding: 0 10px;
+    background: #333333;
+    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.3);
+    opacity: 1;
+    border-radius: 20px;
+  }
+  .title{
+    display: flex;
+    align-items:center;
+    position: relative;
+    padding: 32px 0 20px 20px;
+    .price-text{
+      width: 300px;
+      height: 50px;
+      background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
+      box-shadow: 0px 6px 12px rgba(233, 0, 0, 0.3);
+      border-radius: 26px;
+      font-size: 24px;
+      color: #fff;
+      text-align: center;
+      line-height: 50px;
+      margin-left: 20px;
+    }
+    .btn-all{
+      position: absolute;
+      right: 8px;
+      top: 40px;
+      line-height: 33px;
+      padding-right: 25px;
+      font-size: 24px;
+      color: #FFEBC4;
+      .iconfont{
+        content: '';
+        font-size: 26px;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+  .pro-box{
+    padding-bottom: 20px;
+    .pro-item{
+      width: 220px;
+      height: 398px;
+      background: #FFFFFF;
+      .pro-item-img{
+        .img{
+          width: 100%;
+          height: 236px;
+        }
+      }
+      .pro-item-info{
+        padding: 0 20px;
+        .name{
+          font-size: 24px;
+          line-height: 40px;
+          color: #333333;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+        }
+        .stock{
+          padding: 0 8px;
+          height: 40px;
+          border: 2px solid #E4E5E6;
+          line-height: 40px;
+          margin: 10px 0;
+          display: inline-block;
+          font-size: 20px;
+          color: #C5AA7B;
+        }
+        .price{
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 44px;
+          color: #C83732;
+          padding-right: 10px;
+          display: inline-block;
+        }
+        .original-price{
+          font-size: 20px;
+          line-height: 28px;
+          color: #CCCCCC;
+          display: inline-block;
+        }
+      }
+    }
+  }
+  .pagination{
+    display: flex;
+    justify-content: center;
+    ::v-deep .swiper-pagination-bullet{
+      width: 24px;
+      height: 4px;
+      background: #fff;
+      opacity: 0.5;
+      border-radius: 2px;
+      margin: 0 5px;
+    }
+    ::v-deep .swiper-pagination-bullet-active{
+      opacity: 1;
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/price/mixin.js

@@ -0,0 +1,85 @@
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import api from '../../config/api'
+import {funMixin} from '../../config/mixin'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'price',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  data () {
+    return {
+      productData: {
+        composeProducts:[],
+        rules: [{
+          price: null,
+          number: null
+        }]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'priceNum'
+    ]),
+  },
+  watch: {
+    'priceNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+      getData() {
+        const _ = this
+        if(_.componentContent.priceId){
+          this.beforeGetData()
+          const params = {
+            method: 'GET',
+            url: `${api.getPrices}?shopId=${_.shopId}&ids=${_.componentContent.priceId}`,
+          }
+          this.sendReq(params, (res) => {
+            _.afterGetData()
+            if( res.data.length > 0){
+              _.productData = res.data[0]
+            }
+          },(err)=>{
+            _.afterGetData()
+          })
+        } else {
+          _.productData = {
+            products:[]
+          }
+        }
+      },
+  }
+}

canvas-container/components/canvasShow/basics/price/pc/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="product-list" :class="'terminal'+terminal">
+    <div class="picListWarp" v-if="componentContent.arrangeType == '横向滑动'">
+      <div class="picList" v-if="productData.composeProducts && productData.composeProducts.length>0">
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+        <swiper class="products-swiper" :options="swiperOption">
+          <swiper-slide class="products-swiper-slide item" v-for="(item,index) in productData.composeProducts" :key="index">
+            <div class="a-link" @click="jumpProductDetail(item)">
+              <div class="itemImgBox">
+                <div class="imgBox">
+                  <el-image
+                    :src="item.image"
+                    fit="contain"></el-image>
+                </div>
+              </div>
+              <div class="text">
+                <div class="discount-text">
+                  <span>任选{{productData.rules[0].number}}件{{productData.rules[0].price}}元</span>
+                </div>
+                <h4 class="h4">{{item.productName}}</h4>
+                <div class="priceBox">
+                  <span>¥{{item.price}}</span>
+                </div>
+                <button class="btn-cart" @click="addCart(item.id)">加入购物车</button>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <div v-else class="picList" >
+      <ul class="clearfix" :class="'imgTextNum' +  componentContent.productNum">
+        <li class="item" v-for="(item,index) in productData.composeProducts.slice(0, componentContent.productRowNum * componentContent.productNum)" :key="index">
+          <div class="a-link" @click="jumpProductDetail(item)">
+            <div class="itemImgBox">
+              <div class="imgBox">
+                <el-image
+                  :src="item.image"
+                  fit="contain"></el-image>
+              </div>
+            </div>
+            <div class="text">
+              <div class="discount-text">
+                <span>任选{{productData.rules[0].number}}件{{productData.rules[0].price}}元</span>
+              </div>
+              <h4 class="h4">{{item.productName}}</h4>
+              <div class="priceBox">
+                <span>¥{{item.price}}</span>
+              </div>
+              <button class="btn-cart" @click="addCart(item.id)">加入购物车</button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpPice(productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+  import {commonMixin} from '../mixin'
+  export default {
+    mixins: [commonMixin],
+    data () {
+      return {
+        swiperOption: {
+          slidesPerView: 4, // 显示数量
+          spaceBetween: 13, // 间隔
+          autoplay: false, // 可选选项，自动滑动
+          loop: true,
+          pagination: {
+            el: '.price-pagination'
+          },
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.product-list{
+  padding: 20px 0;
+  background-color: #fff;
+  min-height: 100px;
+  .picListWarp{
+    width: 1380px;
+    max-width: 100%;
+    margin: 0 auto;
+    position: relative;
+  }
+  .picList{
+    width: 1200px;
+    max-width: 100%;
+    margin: 0 auto;
+    .swiper-button-prev,.swiper-button-next{
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      cursor:pointer;
+      top: 140px;
+      background-repeat: no-repeat;
+      &:after{
+        content: '';
+      }
+    }
+    .swiper-button-prev{
+      left: 0;
+      background: url('../../../static/images/btn-prev.png');
+    }
+    .swiper-button-next{
+      right: 0;
+      background: url('../../../static/images/btn-next.png');
+    }
+    .a-link{
+      cursor: pointer;
+      &:hover{
+        box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+      }
+      .itemImgBox {
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .imgBox {
+          padding-bottom: 100%;
+          background-color: #cacaca;
+          position: relative;
+          .el-image {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+      }
+      .text{
+        padding:25px 10px 17px;
+        text-align: center;
+        position: relative;
+        //height: 180px;
+        .discount-text{
+          background: url("../../../static/images/price/bg-discount.png") no-repeat;
+          width: 100%;
+          height: 47px;
+          font-size: 14px;
+          color: #fff;
+          line-height: 60px;
+          text-align: center;
+          position: absolute;
+          top: -47px;
+          left: 0;
+        }
+        .h4{
+          font-size: 18px;
+          line-height: 24px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          color: #333333;
+          //max-height: 48px;
+        }
+        .p{
+          color: #999;
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+          padding-top: 18px;
+          position: relative;
+          margin-top: 8px;
+          &:after{
+            position: absolute;
+            top: 0;
+            left: 50%;
+            margin-left: -80px;
+            width: 160px;
+            height: 2px;
+            background: #F0F0F0;
+            content: '';
+          }
+        }
+        .priceBox {
+          padding-top: 11px;
+          line-height: 33px;
+          span {
+            font-size: 25px;
+            color: #C83732;
+            padding-right: 12px;
+          }
+          span.discount {
+            font-size: 18px;
+            color: #ccc;
+            text-decoration: line-through;
+          }
+        }
+        .btn-cart{
+          margin-top: 5px;
+          width: 100%;
+          height: 40px;
+          background-color: #333;
+          font-size: 18px;
+          color: #FFEBC4;
+        }
+      }
+    }
+    ul{
+      margin: -15px 0 0 -15px;
+      display: flex;
+      flex-wrap: wrap;
+      li{
+        flex: 0 0 50%;
+        padding: 15px 0 0 15px;
+        width: 0;
+      }
+    }
+    .imgTextNum2 {
+      li {
+        flex: 0 0 50%;
+      }
+    }
+    .imgTextNum3 {
+      li {
+        flex: 0 0 33.33%;
+      }
+    }
+    .imgTextNum4 {
+      li {
+        flex: 0 0 25%;
+      }
+    }
+    .imgTextNum5 {
+      li {
+        flex: 0 0 20%;
+      }
+    }
+  }
+}
+.btn-more {
+  width: 130px;
+  height: 41px;
+  border: 2px solid #C5AA7B;
+  color: #C5AA7B;
+  font-size: 18px;
+  background-color: transparent;
+  margin: 20px auto 0;
+  display: block;
+}
+</style>

canvas-container/components/canvasShow/basics/product/app/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="hom-pro-list">
+    <div class="title">
+      <img src="../../../static/images/product/img-title.png" alt="商品推荐"/>
+    </div>
+    <div v-if="componentContent.arrangeType == '横向滑动'" class="product-list product-swiper">
+      <swiper ref="mySwiper" class="product-list-box" :options="swiperOption">
+        <swiper-slide class="product-list-item" v-for="(item,index) in productData.slice(0, 10)" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-list-img">
+            <img v-show="item.image" class="img" :src="item.image">
+          </div>
+          <div class="product-list-info">
+            <label class="product-name">{{item.productName}}</label>
+            <div>
+              <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
+                <label class="shop-name">{{item.shopName}}</label>
+                <div class="shop-logo">
+                  <img :src="item.shopLogo">
+                </div>
+              </div>
+              <label class="buy-count">{{item.users?item.users: 0}}人付款</label>
+            </div>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="pagination product-pagination" slot="pagination"></div>
+    </div>
+    <div v-if="componentContent.arrangeType == '多行多列'" class="product-list">
+      <div class="product-list-box" >
+        <div class="product-list-item" v-for="(item,index) in productData" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-list-img">
+            <img v-show="item.image" class="img" :src="item.image">
+          </div>
+          <div class="product-list-info">
+            <label class="product-name">{{item.productName}}</label>
+            <div>
+              <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
+                <label class="shop-name">{{item.shopName}}</label>
+                <div class="shop-logo">
+                  <img :src="item.shopLogo">
+                </div>
+              </div>
+              <label class="buy-count">{{item.users?item.users: 0}}人付款</label>
+            </div>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 14,
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.product-pagination',
+          clickable: true
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hom-pro-list{
+  padding: 20px 0;
+  .title{
+    text-align: center;
+    margin-bottom: 20px;
+    label{
+      background: url("../../../static/images/icon-title.png") no-repeat left center;
+      font-size: 30px;
+      font-weight: bold;
+      padding-left: 48px;
+    }
+  }
+  /**多行多列**/
+  .product-list {
+    position: relative;
+    &-box {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      padding-left: 20px;
+      ::v-deep .swiper-pagination-bullet{
+        display: none;
+      }
+    }
+    &.product-swiper .product-list-box{
+      margin: 0 20px;
+      padding-left: 0;
+    }
+    &-item {
+      margin: 0 14px 20px 0;
+      width: 348px;
+    }
+    &-img {
+      width: 348px;
+      height: 348px;
+      background-color: #f5f5f5;
+      border-radius: 10px 10px 0 0;
+      .img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-info {
+      background-color: #FFFFFF;
+      //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
+      border-radius: 0 0 10px 10px;
+      padding: 20px;
+      label{
+        font-weight: normal;
+      }
+      .product-name{
+        font-size: 28px;
+        color: #333;
+        display: block;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        margin-bottom: 18px;
+        line-height: 40px;
+      }
+      .shop-box{
+        background-color: #333333;
+        border-radius: 0px 20px 20px 0px;
+        line-height: 40px;
+        display: inline-block;
+        height: 40px;
+        margin-right: 10px;
+        .shop-name{
+          font-size: 20px;
+          color: #FFEBC4;
+          padding: 0 8px 0 12px;
+        }
+        .shop-logo{
+          border: 2px solid #707070;
+          border-radius: 50%;
+          overflow: hidden;
+          float: right;
+          img{
+            width: 34px;
+            height: 34px;
+            display: block;
+          }
+        }
+      }
+      .buy-count{
+        color: #C5AA7B;
+        font-size: 20px;
+        margin-bottom: 16px;
+        border: 2px solid #E4E5E6;
+        line-height: 40px;
+        padding: 0 5px;
+        display: inline-block;
+      }
+      .price-warp{
+        display: flex;
+        align-items: baseline;
+        line-height: 56px;
+        .price{
+          color: #C83732;
+          font-size: 40px;
+          margin-right: 20px;
+        }
+        .original-price{
+          font-size: 24px;
+          color: #ccc;
+          text-decoration: line-through;
+        }
+      }
+    }
+    //::v-deep .swiper-pagination-bullet{
+    //  display: none;
+    //}
+  }
+}
+
+.pagination{
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  ::v-deep .swiper-pagination-bullet{
+    width: 10px;
+    height: 10px;
+    background: #333333;
+    opacity: 0.3;
+    border-radius: 5px;
+    margin: 0 5px;
+  }
+  ::v-deep .swiper-pagination-bullet-active{
+    width: 20px;
+    height: 10px;
+    opacity: 1;
+  }
+}
+.btn-more {
+  width: 170px;
+  height: 54px;
+  border: 2px solid #C5AA7B;
+  color: #C5AA7B;
+  font-size: 24px;
+  background-color: transparent;
+  margin: 20px auto 0;
+  display: block;
+}
+
+</style>

canvas-container/components/canvasShow/basics/product/mixin.js

@@ -0,0 +1,105 @@
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import {funMixin} from '../../config/mixin'
+import 'swiper/css/swiper.css'
+import api from '../../config/api'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'productList',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  data () {
+    return {
+      productData: []
+    }
+  },
+  watch: {
+    'productNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getData(true)
+  },
+  computed: {
+    ...mapGetters([
+      'productNum'
+    ]),
+    swiper() {
+      if(this.$refs.mySwiper){
+        return this.$refs.mySwiper.$swiper
+      }
+    }
+  },
+  methods: {
+    getData(isFirst) {
+      const _ = this
+      if (_.componentContent.productData.sourceType === '1') {
+        if(_.componentContent.productData.productIdList && _.componentContent.productData.productIdList.length>0){
+          this.beforeGetData()
+          _.sendReq({
+            url: `${api.getProducts}?page=1&pageSize=99&ids=${_.componentContent.productData.productIdList}`,
+            method: 'GET'
+          }, (proRes) => {
+            _.afterGetData()
+            _.productData = proRes.data.list
+            if(isFirst){
+              _.componentContent.productData.imgTextData = _.productData
+            }
+          },(err)=>{
+            _.afterGetData()
+          })
+        } else {
+          _.productData = []
+        }
+      } else if(_.componentContent.productData.sourceType === '2'){
+        if(_.componentContent.productData.categoryId) {
+          this.beforeGetData()
+          _.sendReq({
+            url: `${api.getProducts}?page=1&pageSize=99&classifyId=${_.componentContent.productData.categoryId}`,
+            method: 'GET'
+          }, (proRes) => {
+            _.afterGetData()
+            _.productData = proRes.data.list
+            if(isFirst){
+              _.componentContent.productData.imgTextData = _.productData
+            }
+            // _.swiper.update()
+          },(err)=>{
+            _.afterGetData()
+          })
+        } else {
+          _.productData = {
+            products:[]
+          }
+        }
+      }
+    },
+  }
+}

canvas-container/components/canvasShow/basics/product/pc/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="product-list" :class="'terminal'+terminal">
+    <div class="picListWarp" v-if="componentContent.arrangeType == '横向滑动'">
+      <div class="picList" v-if="productData && productData.length>0">
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+        <swiper ref="swiper" class="products-swiper" :options="swiperOption">
+          <swiper-slide class="products-swiper-slide item" v-for="(item,index) in productData" :key="index">
+            <div class="a-link" @click="jumpProductDetail(item)">
+              <div class="itemImgBox">
+                <div class="imgBox">
+                  <el-image
+                    :src="item.image"
+                    fit="contain"></el-image>
+                </div>
+              </div>
+              <div class="text">
+                <h4 class="h4">{{item.productName}}</h4>
+                <div class="priceBox">
+                  <span>¥{{item.price}}</span>
+                  <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <div v-else class="picList" >
+      <ul class="clearfix" :class="'imgTextNum' +  componentContent.productNum">
+        <li class="item" v-for="(item,index) in productData.slice(0, componentContent.productRowNum * componentContent.productNum)" :key="index">
+          <div class="a-link" @click="jumpProductDetail(item)">
+            <div class="itemImgBox">
+              <div class="imgBox">
+                <el-image
+                  :src="item.image"
+                  fit="contain"></el-image>
+              </div>
+            </div>
+            <div class="text">
+              <h4 class="h4">{{item.productName}}</h4>
+              <div class="priceBox">
+                <span>¥{{item.price}}</span>
+                <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+  export default {
+    mixins: [commonMixin],
+    data () {
+      return {
+        swiperOption: {
+          slidesPerView: 4, // 显示数量
+          spaceBetween: 13, // 间隔
+          autoplay: false, // 可选选项，自动滑动
+          loop: true,
+          pagination: {
+            el: '.product-pagination'
+          },
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .product-list{
+    padding: 20px 0;
+    background-color: #fff;
+    .picListWarp{
+      width: 1380px;
+      max-width: 100%;
+      margin: 0 auto;
+      position: relative;
+    }
+    .picList{
+      width: 1200px;
+      max-width: 100%;
+      margin: 0 auto;
+      .swiper-button-prev,.swiper-button-next{
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        cursor:pointer;
+        top: 140px;
+        background-repeat: no-repeat;
+        &:after{
+          content: '';
+        }
+      }
+      .swiper-button-prev{
+        left: 0;
+        background: url('../../../static/images/btn-prev.png');
+      }
+      .swiper-button-next{
+        right: 0;
+        background: url('../../../static/images/btn-next.png');
+      }
+      .a-link{
+        cursor: pointer;
+        &:hover{
+          box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+        }
+        .itemImgBox {
+          height: auto;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .imgBox {
+            padding-bottom: 100%;
+            background-color: #cacaca;
+            position: relative;
+            .el-image {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+          }
+        }
+        .text{
+          padding:25px 20px 17px;
+          text-align: center;
+          //height: 180px;
+          .h4{
+            font-size: 18px;
+            line-height: 24px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            color: #333333;
+            //max-height: 48px;
+          }
+          .p{
+            color: #999;
+            font-size: 16px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            padding-top: 18px;
+            position: relative;
+            margin-top: 8px;
+            &:after{
+              position: absolute;
+              top: 0;
+              left: 50%;
+              margin-left: -80px;
+              width: 160px;
+              height: 2px;
+              background: #F0F0F0;
+              content: '';
+            }
+          }
+          .priceBox {
+            padding-top: 11px;
+            line-height: 33px;
+            span {
+              font-size: 25px;
+              color: #C83732;
+              padding-right: 12px;
+            }
+            span.discount {
+              font-size: 18px;
+              color: #ccc;
+              text-decoration: line-through;
+            }
+          }
+        }
+      }
+      ul{
+        margin: -15px 0 0 -15px;
+        display: flex;
+        flex-wrap: wrap;
+        li{
+          flex: 0 0 50%;
+          padding: 15px 0 0 15px;
+          width: 0;
+        }
+      }
+      .imgTextNum2 {
+        li {
+          flex: 0 0 50%;
+        }
+      }
+      .imgTextNum3 {
+        li {
+          flex: 0 0 33.33%;
+        }
+      }
+      .imgTextNum4 {
+        li {
+          flex: 0 0 25%;
+        }
+      }
+      .imgTextNum5 {
+        li {
+          flex: 0 0 20%;
+        }
+      }
+    }
+  }
+  .btn-more {
+    width: 130px;
+    height: 41px;
+    border: 2px solid #C5AA7B;
+    color: #C5AA7B;
+    font-size: 18px;
+    background-color: transparent;
+    margin: 20px auto 0;
+    display: block;
+  }
+</style>

canvas-container/components/canvasShow/basics/shop.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="shop"  :class="'terminal' + terminal">
+    <swiper :options="swiperOption">
+      <swiper-slide class="shop-item" v-for="(item,index) in imgList" :key="index">
+        <div class="shop-item-warp">
+          <img class="img" :src="item.img">
+          <div class="a-link" @click="jumpLink(item.linkObj)">
+            进店逛逛<i class="iconfont icon-arrow-right"></i>
+          </div>
+        </div>
+      </swiper-slide>
+    </swiper>
+    <div class="pagination shop-pagination"></div>
+  </div>
+</template>
+
+<script>
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import {funMixin} from '../config/mixin'
+export default {
+  name: 'shop',
+  mixins: [funMixin],
+  data () {
+    return {
+      swiperOption: {
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.shop-pagination'
+        }
+      }
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  computed: {
+    imgList: function () {
+      console.log(this.componentContent)
+      return this.componentContent.imgTextData.filter(function (item) {
+        return item.img
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.shop{
+  position: relative;
+  &-item{
+    &-warp{
+      position: relative;
+      padding: 0 20px;
+      .img{
+        width: 100%;
+        height: 420px;
+      }
+      .a-link{
+        width: 220px;
+        height: 80px;
+        line-height: 80px;
+        background: linear-gradient(225deg, #585858 0%, #333333 100%);
+        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
+        display: block;
+        color: #fff;
+        font-size: 28px;
+        text-align: center;
+        position: absolute;
+        right: 0;
+        bottom: 30px;
+        .icon{
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+  .pagination{
+    display: flex;
+    justify-content: center;
+    padding:20px 0;
+    ::v-deep .swiper-pagination-bullet{
+      width: 12px;
+      height: 12px;
+      background: #333333;
+      border-radius: 50%;
+      opacity: 0.2;
+      margin: 0 10px;
+    }
+    ::v-deep .swiper-pagination-bullet-active{
+      width: 24px;
+      height: 12px;
+      background: #333333;
+      opacity: 1;
+      border-radius: 8px;
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/spike/app/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="spike">
+    <div class="spike-card" v-if="productData.products && productData.products.length>0">
+      <div class="spike-card-top">
+        <h2 class="spike-card-top-title">
+          <img src="../../../static/images/spike/img-title.png" alt="秒杀专区"/>
+        </h2>
+        <div class="spike-card-top-time" v-if="state===2">
+          活动已结束
+        </div>
+        <div class="spike-card-top-time" v-else>
+          距离{{count[0]}}还有 <span>{{count[1]}}</span><i>:</i><span>{{count[2]}}</span><i>:</i><span>{{count[3]}}</span>
+        </div>
+        <a class="btn-more" @click="jumpSeckills(productData)">更多<i class="iconfont icon-arrow-right"></i></a>
+      </div>
+      <ul class="spike-card-list">
+        <li class="spike-card-item"  v-for='item in productData.products.slice(0,4)' :key='item.productId' @click="jumpProductDetail(it)">
+          <div class="spike-card-item-img">
+            <img :src="item.image" alt="">
+          </div>
+          <div class="spike-card-item-info">
+            <h3 class="name">
+              {{item.productName}}
+            </h3>
+            <div class="stock">
+              还剩{{item.stockNumber}}件
+            </div>
+            <div class="price-warp">
+              <div class="price">
+                ¥ {{item.price}}
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.spike{
+  background: #F8F8F8;
+  padding: 20px;
+  &-card{
+    height: 498px;
+    background: #FFFFFF;
+    border-radius: 20px;
+    &-top{
+      position: relative;
+      padding: 32px 0 22px;
+      display: flex;
+      &-title{
+        padding: 10px 20px 0 30px;
+      }
+      &-time{
+        padding: 0 18px;
+        height: 50px;
+        background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
+        box-shadow: 0px 6px 12px rgba(233, 0, 0, 0.3);
+        opacity: 1;
+        border-radius: 26px;
+        font-size: 24px;
+        line-height: 50px;
+        color: #fff;
+        text-align: center;
+      }
+      .btn-more{
+        position: absolute;
+        right: 8px;
+        top: 40px;
+        line-height: 33px;
+        padding-right: 25px;
+        font-size: 24px;
+        color: #333;
+        .iconfont{
+          content: '';
+          font-size: 26px;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+      }
+    }
+    &-list{}
+    &-item{
+      width: 50%;
+      border-top: 1px solid  #F3F4F5;
+      border-left: 1px solid  #F3F4F5;
+      float: left;
+      align-items: center;
+      &:nth-child(2n+1){
+        border-left: 0px;
+      }
+      &-img{
+        width: 162px;
+        height: 196px;
+        margin-right: 10px;
+        float: left;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      &-info{
+        height: 100%;
+        margin-left: 172px;
+        width: 168px;
+        .name{
+          font-size: 24px;
+          line-height: 40px;
+          color: #333333;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          white-space: nowrap;
+        }
+        .stock{
+          padding: 0 8px;
+          height: 40px;
+          border: 2px solid #E4E5E6;
+          line-height: 40px;
+          margin: 10px 0;
+          display: inline-block;
+          font-size: 20px;
+          color: #C5AA7B;
+        }
+        .price{
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 44px;
+          color: #C83732;
+          padding-right: 10px;
+          display: inline-block;
+        }
+        .original-price{
+          font-size: 20px;
+          line-height: 28px;
+          color: #CCCCCC;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/spike/mixin.js

@@ -0,0 +1,152 @@
+import api from '../../config/api'
+import {funMixin} from '../../config/mixin'
+import { mapGetters } from 'vuex'
+
+export const commonMixin = {
+  name: 'spikeList',
+  mixins: [funMixin],
+  data () {
+    return {
+      productData: {
+        products: []
+      },
+      count: [],
+      state: 0,
+      timer: null
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'spikeNum'
+    ]),
+  },
+  watch: {
+    'spikeNum': {
+      handler(newVal, oldVal) {
+        this.getData()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+
+      const _ = this
+      if(_.componentContent.shopSeckillId){
+        if(this.typeId === 1){
+          this.beforeGetData()
+          const params = {
+            method: 'GET',
+            url: `${api.getPlatformSeckills}?ids=${_.componentContent.shopSeckillId}`,
+          }
+          this.sendReq(params, (res) => {
+            _.afterGetData()
+            if(res.data.length> 0){
+              _.productData = res.data[0]
+              _.productData.products.map(function(value){
+                value.sliderVal = (value.stockNumber/value.total*100).toFixed(2)
+                return value;
+              });
+              // 只有进行中和未开始活动, 用倒计时
+              this.timer = setInterval(()=>{
+                _.getTime(_.productData)
+              }, 1000)
+            }
+          },(err)=>{
+            _.afterGetData()
+          })
+        }
+        if(this.typeId === 3){
+          this.beforeGetData()
+          const params = {
+            method: 'GET',
+            url: `${api.getSeckills}?shopId=${_.shopId}&ids=${_.componentContent.shopSeckillId}`,
+          }
+          this.sendReq(params, (res) => {
+            this.afterGetData()
+            if(res.data.length> 0){
+              _.productData = res.data[0]
+              _.productData.products.map(function(value){
+                value.sliderVal = (value.stockNumber/value.total*100).toFixed(2)
+                return value;
+              });
+              // 只有进行中和未开始活动, 用倒计时
+              if(_.productData.state !==2) {
+                this.timer = setInterval(()=>{
+                  _.getTime(_.productData)
+                }, 1000)
+              }
+            } else {
+              _.productData = {
+                products:[]
+              }
+            }
+          },(err)=>{
+            _.afterGetData()
+          })
+        }
+      } else {
+        _.productData = {
+          products:[]
+        }
+      }
+    },
+    getTime(info) {
+      const date = new Date().getTime()
+      let startTime = ''
+      let endTime = ''
+      if(this.typeId === 1){
+        startTime = new Date(info.startTime.replace(/-/g,'/')).getTime()
+        endTime = new Date(info.endTime.replace(/-/g,'/')).getTime()
+      } else {
+        startTime = new Date(info.effectiveStart.replace(/-/g,'/')).getTime()
+        endTime = new Date(info.effectiveEnd.replace(/-/g,'/')).getTime()
+      }
+      if(date > endTime){
+        this.state = 2
+      } else if(startTime > date) {
+        this.state = 0
+        this.countDown(startTime-date) // 未开始
+      } else {
+        this.state = 1
+        this.countDown(endTime-date) // 进行中
+      }
+
+    },
+
+    countDown(time) {
+      const fn = (v) =>  v < 10 ? `0${v}` : v
+      const t = parseInt(time / 1000)
+      const text = this.state == 0 ? '开始' : '结束'
+      const hour = parseInt(t / 3600)
+      const min = parseInt((t % 3600) / 60)
+      const s = t % 60
+      // console.log(min, '分',t)
+      this.count = [text, fn(hour), fn(min), fn(s)]
+      // console.log(text, fn(hour), fn(min), fn(s))
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
+}

canvas-container/components/canvasShow/basics/spike/pc/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="spikeList" :class="'terminal'+terminal" v-if="componentContent.shopSeckillId && productData.products && productData.products.length > 0">
+    <div class="warp">
+      <div>
+        <div class="spikeCard">
+          <div class="listLeft">
+            <img src="../../../static/images/spike/bg-spike.png">
+            <div class="bgBox">
+              <div class="title"><img src="../../../static/images/spike/tit-spike.png" alt="秒杀专区"></div>
+              <div class="text">整点秒杀，数量有限</div>
+              <div class="sessions">{{productData.seckillName}} {{state===0?'倒计时':''}}</div>
+              <div class="time-text time-text-end" v-if="state===2">活动已结束</div>
+              <div v-else>
+                <div class="time-text">距离{{count[0]}}还有</div>
+                <div class="timeBox">
+                  <span>{{count[1]}}</span><i>:</i><span>{{count[2]}}</span><i>:</i><span>{{count[3]}}</span>
+                </div>
+              </div>
+              <button class="btn-more" @click="jumpSeckills(productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+            </div>
+          </div>
+          <div class="listRight">
+            <div class="listItem" v-for='it in productData.products.slice(0, 6)' :key='it.productId' @click="jumpProductDetail(it)">
+              <div class="imgBox">
+                <img :src="it.image" alt="">
+              </div>
+              <div class="itemInfo">
+                <h3>{{it.productName}}</h3>
+                <div class="begrenzt">
+                  <span class="people">还剩{{it.stockNumber}}件</span>
+                  <div class="progress" :style="{'width':it.sliderVal + '%'}"></div>
+                </div>
+                <div class="originalPrice">¥{{it.originalPrice}}</div>
+                <dl class="discountPrice">
+                  <dt>
+                    <img src="../../../static/images/spike/flag-spike.png" alt="秒杀价">
+                  </dt>
+                  <dd>
+                    <span>￥</span><b>{{it.price}}</b>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin]
+}
+</script>
+
+<style lang="scss" scoped>
+.spikeList{
+  min-height: 100px;
+  &.terminal4{
+    background-color: #F3F4F5;
+    .warp{
+      width: 1200px;
+    }
+    .spikeCard {
+      display: flex;
+      width: 100%;
+      .listLeft {
+        width: 487px;
+        height: 758px;
+        text-align: center;
+        position: relative;
+        .bgBox {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          .title{
+            padding-top: 140px;
+          }
+          .text{
+            color: #8E8D8C;
+            font-size: 30px;
+            line-height: 40px;
+            margin: 15px 0 100px 0;
+          }
+          .sessions{
+            color: #FFEBC4;
+            font-size: 30px;
+            line-height: 40px;
+          }
+          .time-text{
+            padding-top: 60px;
+            color: #FFEBC4;
+            font-size: 18px;
+            &-end{
+              margin-bottom: 20px;
+            }
+          }
+          .timeBox {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin:10px 0 50px;
+            span {
+              display: block;
+              width: 60px;
+              height: 60px;
+              background: rgba(51,51,51,0.8);
+              color: #FFFFFF;
+              font-size: 30px;
+              line-height: 60px;
+            }
+            i {
+              font-size: 30px;
+              color: #fff;
+              font-style: normal;
+              font-weight: bold;
+              padding: 0 13px;
+            }
+          }
+          .btn-more {
+            width: 130px;
+            height: 41px;
+            border: 2px solid #FFEBC4;
+            color: #FFEBC4;
+            font-size: 18px;
+            background-color: transparent;
+          }
+        }
+      }
+      .listRight {
+        padding: 40px 0 0 8px;
+        .listItem {
+          float:left;
+          width: 220px;
+          height: 335px;
+          margin:0 0 15px 15px;
+          background-color: #fff;
+          .imgBox {
+            width: 220px;
+            height: 220px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .itemInfo {
+            position: relative;
+            padding: 10px;
+            text-align: center;
+            h3{
+              font-size: 14px;
+              color: #333;
+              line-height: 18px;
+              overflow: hidden;
+              text-overflow:ellipsis;
+              white-space: nowrap;
+            }
+            .begrenzt{
+              position: absolute;
+              left: 5px;
+              top: -35px;
+              width: 210px;
+              height: 30px;
+              border: 1px solid #C83732;
+              background-color: #C83732;
+              text-align: center;
+              .people{
+                position: relative;
+                z-index: 2;
+                font-size: 12px;
+                color: #FFBAB8;
+                line-height: 30px;
+              }
+              .progress{
+                position: absolute;
+                right: 0;
+                top: 0;
+                background-color: #fff;
+                height: 28px;
+              }
+            }
+            .discountPrice {
+              display: inline-block;
+              width: 130px;
+              dt{
+                float: left;
+              }
+              dd{
+                border: 1px solid #F3F4F5;
+                color: #C83732;
+                line-height: 30px;
+                font-weight: bold;
+                span {
+                  font-size: 18px;
+                }
+                b {
+                  font-size: 18px;
+                }
+              }
+            }
+            .originalPrice {
+              font-size: 14px;
+              line-height: 19px;
+              padding: 10px 0 6px;
+              color: #ccc;
+              text-decoration: line-through;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/text.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="text warp" :class="['text-'+componentContent.textPos,{'show-more':componentContent.showMore},'terminal' + terminal]" :style="{backgroundColor:componentContent.bgColor}">
+    <div class="line-warp" :class="{'borderBot':componentContent.showLine}">
+      <h3 class="h3" :style="{fontSize:componentContent.fontSizeNum+'px',fontWeight:componentContent.textFontW,color:componentContent.titColor}">{{componentContent.title}}</h3>
+      <p class="p" :style="{fontSize:componentContent.describeSizeNum+'px',fontWeight:componentContent.describeFontW,color:componentContent.describeColor}">{{componentContent.describe}}</p>
+      <div class="btn-more" v-show="componentContent.showMore" :class="'style'+componentContent.styleValue" @click="jumpLink(item.linkObj)"><span>查看更多</span><i class="iconfont icon-arrow-right"></i></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'textComponent',
+    data () {
+      return {
+      }
+    },
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .text{
+    padding: 0px 20px;
+    position: relative;
+    .line-warp{
+      padding: 10px 0;
+    }
+    .borderBot{
+      border-bottom: 1px solid #cccc;
+    }
+    .h3{
+      line-height: 1.5;
+    }
+    .p{
+      line-height: 1.5;
+      margin-top: 5px;
+    }
+    .style1{
+
+    }
+    .style2{
+      .iconfont{
+        display: none;
+      }
+    }
+    .style3{
+      span{
+        display: none;
+      }
+    }
+    &.text-left{
+      text-align: left;
+      &.show-more{
+        position: relative;
+        padding-right: 20px;
+        .btn-more{
+          position: absolute;
+          right: 0;
+          top: 10px;
+        }
+      }
+    }
+    &.text-center{
+      text-align: center;
+    }
+    &.text-right{
+      text-align: right;
+    }
+  }
+</style>

canvas-container/components/canvasShow/basics/video.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="videoBox warp" :class="'terminal' + terminal">
+    <div class="videoLeftBox">
+      <h3>{{componentContent.title}}</h3>
+      <div v-html="componentContent.mainBody"></div>
+    </div>
+    <div class="videoRightBox">
+      <video class="myVideo" id="myVideo" :src="componentContent.videoUrl" enable-danmu danmu-btn controls></video>
+    </div>
+    <div class="clear"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'videoBox',
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ .videoBox {
+   padding: 20px 0;
+   display: flex;
+   justify-content: flex-start;
+   align-items: center;
+   .videoLeftBox {
+     width: 50%;
+     padding-right: 10%;
+     h3 {
+       font-size: 28px;
+       color: #333333;
+       margin-bottom: 30px;
+     }
+     p {
+       color: #333333;
+       font-size: 14px;
+       line-height: 30px;
+     }
+   }
+   .videoRightBox {
+     width: 50%;
+     video {
+       width: 100%;
+     }
+   }
+   .clear {
+     clear: both;
+   }
+ }
+ .terminal1,.terminal2,.terminal3{
+   &.videoBox{
+     display: block;
+     .videoLeftBox{
+       width: 100%;
+       text-align: center;
+       margin-bottom: 20px;
+     }
+     .videoRightBox {
+       width: 100%;
+     }
+   }
+ }
+</style>

canvas-container/components/canvasShow/basics/vip/app/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="vip">
+    <div class="vip-card">
+      <div class="vip-title">
+        <h2>
+          <img src="../../../static/images/vip/img-title.png" alt="会员专区"/>
+        </h2>
+        <a v-show="componentContent.showMore" class="btn-more a-link" @click="jumpVip">更多<i class="iconfont icon-arrow-right"></i></a>
+      </div>
+      <swiper class="vip-list" :options="swiperOption">
+        <swiper-slide class="vip-item-warp" v-for="(itemJ,indexJ) in listTemp" :key="indexJ" @click="jumpProductDetail(item)">
+          <div class="vip-item"  v-for="(item,index) in itemJ" :key="index">
+            <div class="vip-item-img">
+              <img v-show="item.image" class="img" :src="item.image">
+            </div>
+            <div class="vip-item-info">
+              <h3 class="name">
+                {{item.productName}}
+              </h3>
+              <div class="stock">
+                还剩{{item.stockNumber}}件
+              </div>
+              <div class="original-price">
+                ¥ {{item.originalPrice}}
+              </div>
+              <div class="price-warp">
+                <div class="flag">
+                  <img src="../../../static/images/vip/flag-vip2.png" alt="会员价"/>
+                </div>
+                <div class="price">
+                  ¥ {{item.price}}
+                </div>
+              </div>
+              <div class="btn-buy">
+                <span>去购买</span>
+                <div class="progress">
+                  <i></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="pagination vip-pagination"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      swiperOption: {
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.vip-pagination'
+        }
+      }
+    }
+  },
+  computed: {
+    listTemp: function () {
+      var list = this.productData;
+      var arrTemp = [];
+      var index = -1;
+      var count = 2; // 每组多少条
+      for (var i = 0; i < list.length; i++) {
+        if (i % count==0) {
+          arrTemp.push([]);
+          index ++
+        }
+        arrTemp[index].push(list[i]);
+      }
+      return arrTemp;
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.vip{
+  &-card{
+    background: #333333;
+    padding: 0 20px 20px;
+  }
+  &-title{
+    padding: 42px 0 28px 30px;
+    position: relative;
+    .btn-more{
+      position: absolute;
+      right: 8px;
+      top: 40px;
+      line-height: 33px;
+      padding-right: 25px;
+      font-size: 24px;
+      color: #FFEBC4;
+      .iconfont{
+        content: '';
+        font-size: 26px;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+  &-item{
+    display: flex;
+    background-color: #fff;
+    margin-top: 20px;
+    &:first-child{
+      margin-top: 0px;
+    }
+    &-img{
+      width: 260px;
+      height: 260px;
+      margin-right: 20px;
+      background-color: #ececec;
+      .img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-info{
+      flex: 1;
+      position: relative;
+      .name{
+        font-size: 28px;
+        line-height: 40px;
+        color: #333333;
+        padding: 30px 0 10px;
+      }
+      .stock{
+        color: #C5AA7B;
+        font-size: 20px;
+        border: 2px solid #E4E5E6;
+        line-height: 40px;
+        padding: 0 5px;
+        display: inline-block;
+        margin-bottom: 30px;
+      }
+      .original-price{
+        font-size: 24px;
+        line-height: 34px;
+        color: #CCCCCC;
+      }
+      .flag{
+        float: left;
+        padding: 12px 10px 0 0;
+      }
+      .price{
+        font-size: 40px;
+        font-weight: bold;
+        line-height: 56px;
+        color: #C83732;
+      }
+      .btn-buy{
+        position: absolute;
+        right: 20px;
+        bottom: 20px;
+        width: 160px;
+        height: 84px;
+        background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
+        box-shadow: 0px 6px 12px rgba(233, 0, 0, 0.3);
+        border-radius: 10px;
+        text-align: center;
+        padding: 16px 20px 0;
+        span{
+          font-size: 24px;
+          line-height: 34px;
+          color: #FFFFFF;
+          margin-bottom: 10px;
+        }
+        .progress{
+          height: 8px;
+          background: rgba(255,255,255,0.5);
+          border-radius: 4px;
+          position: relative;
+          i{
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            height: 8px;
+            background-color: #fff;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+  .pagination{
+    display: flex;
+    justify-content: center;
+    ::v-deep .swiper-pagination-bullet{
+      width: 24px;
+      height: 4px;
+      background: #fff;
+      opacity: 0.5;
+      border-radius: 2px;
+      margin: 0 5px;
+    }
+    ::v-deep .swiper-pagination-bullet-active{
+      opacity: 1;
+    }
+  }
+}
+</style>

canvas-container/components/canvasShow/basics/vip/mixin.js

@@ -0,0 +1,56 @@
+import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import api from '../../config/api'
+import {funMixin} from '../../config/mixin'
+
+export const commonMixin = {
+  name: 'productList',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  directives: {
+    swiper: directive
+  },
+  data () {
+    return {
+      productData: []
+    }
+  },
+  mounted() {
+      this.getData()
+  },
+  methods: {
+    getData() {
+      this.beforeGetData()
+      const _ = this
+      _.sendReq({
+        url: `${api.getMemberProducts}?page=1&pageSize=20`,
+        method: 'GET'
+      }, (proRes) => {
+        _.afterGetData()
+        _.productData = proRes.data.list
+      },(err)=>{
+        _.afterGetData()
+      })
+    }
+  }
+}

canvas-container/components/canvasShow/basics/vip/pc/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="product-list" :class="'terminal'+terminal">
+    <div class="picListWarp" v-if="componentContent.arrangeType == '横向滑动'">
+      <div class="picList" v-if="productData && productData.length>0">
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+        <swiper class="products-swiper" :options="swiperOption">
+          <swiper-slide class="products-swiper-slide item" v-for="(item,index) in productData" :key="index">
+            <div class="a-link" @click="jumpProductDetail(item)">
+              <div class="itemImgBox">
+                <div class="imgBox">
+                  <el-image
+                    :src="item.image"
+                    fit="contain"></el-image>
+                </div>
+              </div>
+              <div class="text">
+                <h4 class="h4">{{item.productName}}</h4>
+                <div class="priceBox">
+                  <dl>
+                    <dt><img src="../../../static/images/vip/flag-vip.png" alt="会员价"></dt>
+                    <dd>
+                      ¥{{item.price}}
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <div v-else class="picList" >
+      <ul class="clearfix" :class="'imgTextNum' +  componentContent.productNum">
+        <li class="item" v-for="(item,index) in productData.slice(0, componentContent.productRowNum * componentContent.productNum)" :key="index">
+          <div class="a-link" @click="jumpProductDetail(item)">
+            <div class="itemImgBox">
+              <div class="imgBox">
+                <el-image
+                  :src="item.image"
+                  fit="contain"></el-image>
+              </div>
+            </div>
+            <div class="text">
+              <h4 class="h4">{{item.productName}}</h4>
+              <div class="priceBox">
+                <dl>
+                  <dt><img src="../../../static/images/vip/flag-vip.png" alt="会员价"></dt>
+                  <dd>
+                    ¥{{item.price}}
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpVip">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+  export default {
+    mixins: [commonMixin],
+    data () {
+      return {
+        swiperOption: {
+          slidesPerView: 4, // 显示数量
+          spaceBetween: 13, // 间隔
+          autoplay: false, // 可选选项，自动滑动
+          loop: true,
+          pagination: {
+            el: '.vip-pagination'
+          },
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .product-list{
+    padding: 20px 0;
+    background-color: #fff;
+    .picListWarp{
+      width: 1380px;
+      max-width: 100%;
+      margin: 0 auto;
+      position: relative;
+    }
+    .picList{
+      width: 1200px;
+      max-width: 100%;
+      margin: 0 auto;
+      .swiper-button-prev,.swiper-button-next{
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        cursor:pointer;
+        top: 140px;
+        background-repeat: no-repeat;
+        &:after{
+          content: '';
+        }
+      }
+      .swiper-button-prev{
+        left: 0;
+        background: url('../../../static/images/btn-prev.png');
+      }
+      .swiper-button-next{
+        right: 0;
+        background: url('../../../static/images/btn-next.png');
+      }
+      .a-link{
+        cursor: pointer;
+        &:hover{
+          box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+        }
+        .itemImgBox {
+          height: auto;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .imgBox {
+            padding-bottom: 100%;
+            background-color: #cacaca;
+            position: relative;
+            .el-image {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+          }
+        }
+        .text{
+          padding:25px 20px 17px;
+          text-align: center;
+          //height: 180px;
+          .h4{
+            font-size: 18px;
+            line-height: 24px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            color: #333333;
+            margin-bottom: 15px;
+            //max-height: 48px;
+          }
+          .p{
+            color: #999;
+            font-size: 16px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            padding-top: 18px;
+            position: relative;
+            margin-top: 8px;
+            &:after{
+              position: absolute;
+              top: 0;
+              left: 50%;
+              margin-left: -80px;
+              width: 160px;
+              height: 2px;
+              background: #F0F0F0;
+              content: '';
+            }
+          }
+          .priceBox {
+            dl {
+              display: inline-block;
+              min-width: 130px;
+              dt{
+                float: left;
+                img{
+                  display: block;
+                }
+              }
+              dd{
+                border: 1px solid #F3F4F5;
+                font-size: 25px;
+                line-height: 34px;
+                color: #C83732;
+                margin-left: 57px;
+                padding: 0 10px;
+              }
+            }
+          }
+        }
+      }
+      ul{
+        margin: -15px 0 0 -15px;
+        display: flex;
+        flex-wrap: wrap;
+        li{
+          flex: 0 0 50%;
+          padding: 15px 0 0 15px;
+          width: 0;
+        }
+      }
+      .imgTextNum2 {
+        li {
+          flex: 0 0 50%;
+        }
+      }
+      .imgTextNum3 {
+        li {
+          flex: 0 0 33.33%;
+        }
+      }
+      .imgTextNum4 {
+        li {
+          flex: 0 0 25%;
+        }
+      }
+      .imgTextNum5 {
+        li {
+          flex: 0 0 20%;
+        }
+      }
+    }
+  }
+  .btn-more {
+    width: 130px;
+    height: 41px;
+    border: 2px solid #C5AA7B;
+    color: #C5AA7B;
+    font-size: 18px;
+    background-color: transparent;
+    margin: 20px auto 0;
+    display: block;
+  }
+</style>

canvas-container/components/canvasShow/canvasShowPage.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="layout hom-layout">
+      <div class="list-group-item" v-for="(item,index) in componentsData" :key="index">
+        <component :is="componentMap[terminal-1].get(item.type)" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId"></component>
+      </div>
+  </div>
+</template>
+
+<script>
+  import componentMap from './componentMap'
+  import api from './config/api'
+  import {sendReqMixin} from './config/mixin'
+  export default {
+    name: 'canvasPage',
+    mixins: [sendReqMixin],
+    data () {
+      return {
+        // terminal: 4, // 画布设备 1 小程序，2 H5，3 App 4 电脑
+        // typeId: 3, // 画布类型 1 平台画布，2 自定义页面，3 商家店铺装修
+        // shopId: 0, // 店铺id
+        componentsData: [],
+        activeComponent: -1,
+        componentMap: componentMap
+      }
+    },
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      typeId: {
+        type: Number,
+        default: 1
+      },
+      shopId: {
+        type: Number,
+        default: 0
+      }
+    },
+    mounted () {
+      // this.shopId = Cookies.get('cereShopId')
+      this.canvasGet()
+    },
+    methods: {
+      // 读取画布
+      canvasGet () {
+        var _this = this
+        var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + this.typeId
+        if (this.shopId) {
+          apiUrl += '&shopId=' + this.shopId
+        }
+        let params = {
+          url: apiUrl,
+          method: 'GET'
+        }
+        this.sendReq(params, (res) => {
+          if (JSON.stringify(res.data) !== '{}') {
+            _this.canvasId = res.data.canvasId
+            var componentsData = JSON.parse(res.data.json)
+            for (let i = 0; i < componentsData.length; i++) {
+              // 商品列表
+              if (componentsData[i].type === 'productList') {
+                if (componentsData[i].componentContent.productData.sourceType === '1') {
+                  _this.sendReq({
+                    url: `${api.getProducts}?page=1&pageSize=99&ids=${componentsData[i].componentContent.productData.productIdList}`,
+                    method: 'GET'
+                  }, (proRes) => {
+                    componentsData[i].componentContent.productData.imgTextData = proRes.data.list
+                  })
+                } else if(componentsData[i].componentContent.productData.sourceType === '2'){
+                  _this.sendReq({
+                    url: `${api.getProducts}?page=1&pageSize=99&classifyId=${componentsData[i].componentContent.productData.categoryId}`,
+                    method: 'GET'
+                  }, (proRes) => {
+                    componentsData[i].componentContent.productData.imgTextData = proRes.data.list
+                  })
+                }
+              }
+              if (componentsData[i].type === 'shopHeader' && this.terminal === 4) {
+                if (componentsData[i].componentContent.category && componentsData[i].componentContent.category.length !== 0) {
+                  var categoryArr = componentsData[i].componentContent.category
+                  _this.sendReq({
+                    url: `${api.getClassify}`,
+                    method: 'GET'
+                  }, (proRes) => {
+                    componentsData[i].componentContent.category = proRes.data.filter((item) => {
+                      for (let i = 0; i < categoryArr.length; i++) {
+                        if (categoryArr[i].id === item.id) {
+                          return true
+                        }
+                      }
+                    })
+                  })
+                }
+              }
+            }
+            _this.componentsData = componentsData
+          } else {
+            _this.canvasId = ''
+          }
+          // console.log(JSON.parse(res.data.json))
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .hom-layout{
+    background-color: #f5f5f5;
+  }
+</style>
+
+<style lang="scss">
+  .warp{
+    width: 710px;
+    margin: 0 auto;
+    max-width: 100%;
+    &.terminal4{
+      width: 1200px;
+      max-width: 100%;
+    }
+  }
+  .flex-box{
+    display: flex;
+  }
+</style>

canvas-container/components/canvasShow/componentMap.js

@@ -0,0 +1,106 @@
+export const componentMap = [
+  // 小程序
+  new Map([
+    // ['shopHeader', () => import('./cereshop/app/shopHeader')], // 首页头部
+    ['banner', () => import('./basics/banner')], // 轮播图
+    ['text', () => import('./basics/text')], // 文本
+    ['imageText', () => import('./basics/imageText')], // 图文
+    ['brandList', () => import('./basics/brandList')], // 品牌列表
+    ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
+    ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
+    ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
+    ['productList', () => import('./basics/product/app')], // 商品列表
+    ['videoBox', () => import('./basics/video')], // 视频
+    ['coupon', () => import('./basics/coupon/app')], // 优惠券
+    ['custom', () => import('./basics/custom')], // 自定义
+    ['notice', () => import('./basics/notice')], // 公告
+    ['vip', () => import('./basics/vip/app')], // 会员专区
+    // ['shopHead', () => import('./basics/shopHead')], // 店铺头部
+    ['groupList', () => import('./basics/group/app')], // 拼团专区
+    ['spikeList', () => import('./basics/spike/app')], // 秒杀专区
+    ['priceList', () => import('./basics/price/app')], // 定价捆绑
+    ['discountList', () => import('./basics/discount/app')], // 限时折扣
+    ['newProduct', () => import('./basics/newProduct/app')], // 每日上新
+    ['live', () => import('./basics/live/app')], // 直播
+    ['shop', () => import('./basics/shop')] // 每日好店
+  ]),
+  // H5
+  new Map([
+    // ['shopHeader', () => import('./cereshop/app/shopHeader')], // 首页头部
+    ['banner', () => import('./basics/banner')], // 轮播图
+    ['text', () => import('./basics/text')], // 文本
+    ['imageText', () => import('./basics/imageText')], // 图文
+    ['brandList', () => import('./basics/brandList')], // 品牌列表
+    ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
+    ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
+    ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
+    ['productList', () => import('./basics/product/app')], // 商品列表
+    ['videoBox', () => import('./basics/video')], // 视频
+    ['coupon', () => import('./basics/coupon/app')], // 优惠券
+    ['custom', () => import('./basics/custom')], // 自定义
+    ['notice', () => import('./basics/notice')], // 公告
+    ['vip', () => import('./basics/vip/app')], // 会员专区
+    // ['shopHead', () => import('./basics/shopHead')], // 店铺头部
+    ['groupList', () => import('./basics/group/app')], // 拼团专区
+    ['spikeList', () => import('./basics/spike/app')], // 秒杀专区
+    ['priceList', () => import('./basics/price/app')], // 定价捆绑
+    ['discountList', () => import('./basics/discount/app')], // 限时折扣
+    ['newProduct', () => import('./basics/newProduct/app')], // 每日上新
+    ['live', () => import('./basics/live/app')], // 直播
+    ['shop', () => import('./basics/shop')] // 每日好店
+  ]),
+  // APP
+  new Map([
+    // ['shopHeader', () => import('./cereshop/app/shopHeader')], // 首页头部
+    ['banner', () => import('./basics/banner')], // 轮播图
+    ['text', () => import('./basics/text')], // 文本
+    ['imageText', () => import('./basics/imageText')], // 图文
+    ['brandList', () => import('./basics/brandList')], // 品牌列表
+    ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
+    ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
+    ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
+    ['productList', () => import('./basics/product/app')], // 商品列表
+    ['videoBox', () => import('./basics/video')], // 视频
+    ['coupon', () => import('./basics/coupon/app')], // 优惠券
+    ['custom', () => import('./basics/custom')], // 自定义
+    ['notice', () => import('./basics/notice')], // 公告
+    ['vip', () => import('./basics/vip/app')], // 会员专区
+    // ['shopHead', () => import('./basics/shopHead')], // 店铺头部
+    ['groupList', () => import('./basics/group/app')], // 拼团专区
+    ['spikeList', () => import('./basics/spike/app')], // 秒杀专区
+    ['priceList', () => import('./basics/price/app')], // 定价捆绑
+    ['discountList', () => import('./basics/discount/app')], // 限时折扣
+    ['newProduct', () => import('./basics/newProduct/app')], // 每日上新
+    ['live', () => import('./basics/live/app')], // 直播
+    ['shop', () => import('./basics/shop')] // 每日好店
+  ]),
+  // PC
+  new Map([
+    // ['shopHeader', () => import('./cereshop/pc/shopHeader')], // 首页头部
+    ['banner', () => import('./basics/banner')], // 轮播图
+    ['text', () => import('./basics/text')], // 文本
+    ['imageText', () => import('./basics/imageText')], // 图文
+    ['brandList', () => import('./basics/brandList')], // 品牌列表
+    ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
+    ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
+    ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
+    ['productList', () => import('./basics/product/pc')], // 商品列表
+    ['videoBox', () => import('./basics/video')], // 视频
+    ['coupon', () => import('./basics/coupon/pc')], // 优惠券
+    ['custom', () => import('./basics/custom')], // 自定义
+    ['notice', () => import('./basics/notice')], // 公告
+    ['vip', () => import('./basics/vip/pc')], // 会员专区
+    // ['shopHead', () => import('./basics/shopHead')], // 店铺头部
+    ['groupList', () => import('./basics/group/pc')], // 拼团专区
+    ['spikeList', () => import('./basics/spike/pc')], // 秒杀专区
+    ['priceList', () => import('./basics/price/pc')], // 定价捆绑
+    ['discountList', () => import('./basics/discount/pc')], // 限时折扣
+    ['newProduct', () => import('./basics/newProduct/app')], // 每日上新
+    ['shop', () => import('./basics/shop')] // 每日好店
+  ])
+]
+export default componentMap

canvas-container/components/canvasShow/config/api.js

@@ -0,0 +1,29 @@
+// 导入api接口模块
+
+// 获取当前环境变量 true => 生产环境 false => 开发环境
+const BASEURL = process.env.VUE_APP_DOMAIN_PREFIX
+// const BASEURL = (process.env.NODE_ENV === 'production') ? '/api' : '/api'
+
+export const api = {
+  // 画布模块
+  fileUpload: BASEURL + '/file/upload', // 文件上传
+  getClassify: BASEURL + '/canvas/getClassify', // 查询分类层级
+  getProducts: BASEURL + '/canvas/getProducts', // 选择商品查询
+  saveCanvas: BASEURL + '/canvas/saveCanvas', // 保存画布
+  getCanvas: BASEURL + '/canvas/getCanvas', // 读取画布
+  getShops: BASEURL + '/canvas/getShops', // 选择店铺查询
+  getCoupons: BASEURL + '/canvas/getCoupons', // 优惠券查询
+  getShopCoupons: BASEURL + '/canvas/getShopCoupons', // 优惠券查询
+  takeCoupon: BASEURL + '/coupon/takeCoupon', // 领取优惠券
+  selectCanvasCustomList: BASEURL + '/canvas/selectCanvasCustomList', // 自定义页面查询
+  getPlatformSeckills: `${BASEURL}/canvas/getPlatformSeckills`, // 平台秒杀活动
+  getSeckills: `${BASEURL}/renovation/getSeckills`, // 商家秒杀活动
+  getMinDiscount: `${BASEURL}/canvas/getMinDiscount`, // 平台限时折扣
+  getDiscounts: `${BASEURL}/renovation/getDiscounts`, // 商家限时折扣
+  getAdminGroupWorks: `${BASEURL}/canvas/getGroupWorks`, // 平台拼团专区
+  getGroupWorks: `${BASEURL}/renovation/getGroupWorks`, // 商家拼团专区
+  getPrices: `${BASEURL}/canvas/getPrices`, // 商家定价捆绑
+  getMemberProducts: `${BASEURL}/canvas/getMemberProducts`, // 查询会员商品数据
+  getNotices: `${BASEURL}/canvas/getNotices`, // 平台获取公告数据
+}
+export default api

canvas-container/components/canvasShow/config/config.js

@@ -0,0 +1,12 @@
+// 画布配置
+import Cookies from 'js-cookie'
+
+const config = {
+  terminal: 4, // 画布设备 1 小程序，2 H5，3 App 4 电脑
+  typeId: 3, // 页面类型 0 C端 1 平台画布，2 自定义页面，3 商家店铺装修
+  getToken: function(){
+    return Cookies.get('cereShopBussesToken')
+  }
+}
+
+export default config

canvas-container/components/canvasShow/config/mixin/funMixin.js

@@ -0,0 +1,144 @@
+// import router from '@/router'
+import api from '../api'
+import {sendReq} from './sendReqMixin'
+import canvasConfig from '../config'
+
+/*
+ * 公共方法的 mixin
+ */
+export const tool = {
+  mixins: [sendReq],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    //  请求数据前 请求完再显示所有组件
+    beforeGetData(){
+      if(typeof(uni) !== 'undefined'){
+        uni.getStorage({
+          key: 'sendNum',
+          success: function (res) {
+            let sendNum = res.data;
+            console.log('sendNum',parseInt(sendNum) + 1);
+            uni.setStorage({key: 'sendNum',data: parseInt(sendNum) + 1});
+            this.$emit('cleckLoading')
+          }
+        })
+      } else {
+        let sendNum = localStorage.getItem('sendNum')
+        console.log('sendNum',parseInt(sendNum) + 1);
+        localStorage.setItem('sendNum',parseInt(sendNum) + 1)
+        this.$emit('cleckLoading')
+      }
+    },
+    //  请求数据后
+    afterGetData(){
+      if(typeof(uni) !== 'undefined'){
+        uni.getStorage({
+          key: 'sendNum',
+          success: function (res) {
+            let sendNum = res.data;
+            console.log('sendNum',parseInt(sendNum) - 1);
+            uni.setStorage({key: 'sendNum',data: parseInt(sendNum) - 1});
+            this.$emit('cleckLoading')
+          }
+        })
+      } else {
+        let sendNum = localStorage.getItem('sendNum')
+        console.log('sendNum',parseInt(sendNum) - 1);
+        localStorage.setItem('sendNum',parseInt(sendNum) - 1)
+        this.$emit('cleckLoading')
+      }
+
+    },
+    // 判断url
+    jumpLink (linkObj) {
+      var link = ''
+      if(linkObj && linkObj.typeText && linkObj.data){
+        switch (linkObj.typeText) {
+          case '类别':
+            router.push({name:'category',query:{classifyData:JSON.stringify(linkObj.data)}})
+            break
+          case '店辅':
+            router.push({
+              path: '/store',
+              query: {shopId: linkObj.data.shopId}
+            });
+            break
+          case '商品':
+            this.setCurrentPro(linkObj.data)
+            router.push("/productDetail");
+            break
+          case '自定义':
+            // router.push("/category");
+            break
+        }
+      } else if(linkObj.selsectValue==='/index'){
+        router.push("/index");
+      }
+      return link
+    },
+    // 跳转到类别主页
+    jumpCategory(item){
+    },
+    // 跳转到店铺主页
+    jumpStore(item){
+
+    },
+    // 跳转到商品详情
+    jumpProductDetail(item){
+    },
+    // 跳转到秒杀专区
+    jumpSeckills(item){
+    },
+    // 跳转到拼团专区
+    jumpGroupWorks(item){
+    },
+    // 跳转到折扣专区
+    jumpDiscount(item){
+    },
+    // 跳转到会员专区
+    jumpVip(){
+    },
+    // 跳转到公告详情
+    jumpNoticeDetail(item){
+    },
+    // 领取优惠券
+    receiveCoupon(item) {
+      var key = canvasConfig.getToken()
+      if (key) {
+        var paramsData = {}
+        if(this.typeId === 1){
+          paramsData.couponId = item.couponId
+        } else if(this.typeId === 3) {
+          paramsData.shopCouponId = item.shopCouponId
+          paramsData.shopId = this.shopId
+        }
+        let params = {
+          url: api.takeCoupon,
+          method: 'POST',
+          data: paramsData
+        }
+        this.sendReq(params, (res) => {
+          this.$message({
+            message: '领取成功！',
+            type: 'success'
+          })
+          this.getData()
+        })
+      } else {
+        this.$message({
+          message: '请先登录'
+        })
+        this.$router.push({path: '/login'})
+      }
+    },
+    // 加入购物车
+    addCart(id){
+      console.log(id)
+    }
+  }
+}

canvas-container/components/canvasShow/config/mixin/index.js

@@ -0,0 +1,9 @@
+/*
+ * 用于组件复用
+ * 参考链接 https://cn.vuejs.org/v2/guide/mixins.html#全局混合
+ * 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
+ */
+import { tool } from './funMixin.js'
+import { sendReq } from './sendReqMixin.js'
+export const funMixin = { ...tool }
+export const sendReqMixin = { ...sendReq }

canvas-container/components/canvasShow/config/mixin/sendReqMixin.js

@@ -0,0 +1,39 @@
+/*
+ * 发送请求 mixin
+ */
+import request from './server'
+
+/* eslint-disable */
+export const sendReq = {
+  data () {
+    return {
+      // 加载中
+      loading: false,
+    }
+  },
+  methods: {
+    /*
+     * 发送请求
+     */
+    sendReq (params, callback, errorCallback) {
+      let self = this
+      request({
+        method: params.method || 'POST',
+        url: params.url,
+        data: params.data || {},
+        withCredentials : true,
+        headers: {
+          'Content-type': params.contentType || 'application/json;charset=utf-8'
+        }
+      }).then((res) => {
+        if (res && res.data) {
+          callback && callback(res.data)
+        }
+      }).catch(err => {
+        if (err) {
+          errorCallback && errorCallback(err)
+        }
+      })
+    }
+  }
+}

canvas-container/components/canvasShow/config/mixin/server.js

@@ -0,0 +1,105 @@
+// 引入axios
+// import router from './../../router'
+import Vue from 'vue'
+// import promise from 'es6-promise'
+import axios from 'axios'
+import canvasConfig from '../config'
+// import Cookies from 'js-cookie'
+// import localStorage from '../storage/localStorage'
+// promise.polyfill()
+
+const service = axios.create({
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest'
+  },
+  withCredentials: true,
+  timeout: 20000 // 请求超时 20s
+})
+
+// 请求拦截器
+service.interceptors.request.use(config => {
+  // 是否为当前的请求加上请求头 token
+  const token = canvasConfig.getToken()
+  if (token) {
+    if(canvasConfig.typeId === 1){
+      config.headers['Authorization-admin'] = token
+    } else if(canvasConfig.typeId === 3){
+      config.headers['Authorization-business'] = token
+    } else {
+      config.headers['Authorization'] = token
+    }
+  }
+  return config
+}, error => {
+  return Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    if (response.data.code && response.data.code !=='200' && response.data.message) {
+      Vue.prototype.$message.error(response.data.message)
+    }
+    return response
+  },
+  err => {
+    // 失败响应
+    if (err && err.response) {
+      switch (err.response.status) {
+        case 400:
+          err.message = '请求无效，请检查参数是否正确!'
+          break
+
+        case 401:
+          err.message = '未经授权，访问被拒!'
+          break
+
+        case 403:
+          err.message = '拒绝访问!'
+          break
+
+        case 404:
+          err.message = `地址不存在!`
+          break
+
+        case 408:
+          err.message = '请求超时!'
+          break
+
+        case 500:
+          err.message = '系统错误!'
+          break
+
+        case 501:
+          err.message = '该方法未实现!'
+          break
+
+        case 502:
+          err.message = '网关出错!'
+          break
+
+        case 503:
+          err.message = '服务不可用!'
+          break
+
+        case 504:
+          err.message = '网关请求超时'
+          break
+
+        case 505:
+          err.message = 'HTTP版本不受支持'
+          break
+
+        default:
+      }
+      if (err.response.data.error) {
+        err.message = err.response.data.error
+      }
+      Vue.prototype.$message.closeAll()
+      Vue.prototype.$message.error(err.message)
+      // router.push({name: 'error', params: {message: err.message, status: err.response.status}})
+    }
+    return Promise.reject(err)
+  }
+)
+export default service