├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── LICENSE
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── style.scss
    ├── components
    │   ├── animate
    │   │   └── newsMarquee.vue
    │   ├── clickToUrl.vue
    │   ├── common
    │   │   ├── floorTitle.vue
    │   │   ├── form.vue
    │   │   ├── image.vue
    │   │   ├── pageFaq.vue
    │   │   ├── pageIntro.vue
    │   │   ├── pageParagraph.vue
    │   │   ├── pageTitle.vue
    │   │   ├── text.vue
    │   │   └── timeout.vue
    │   ├── formItem.vue
    │   ├── index.ts
    │   ├── itemOption
    │   │   ├── bannerItem.vue
    │   │   ├── bottomMenuItem.vue
    │   │   ├── couponItem.vue
    │   │   ├── floorMenuItem.vue
    │   │   ├── goodsItem.vue
    │   │   ├── gridMenuItem.vue
    │   │   ├── horizontalItem.vue
    │   │   ├── imageClick.vue
    │   │   ├── inputItem.vue
    │   │   ├── layoutLeftItem.vue
    │   │   ├── layoutRepeatItem.vue
    │   │   ├── layoutRightItem.vue
    │   │   ├── marqueeItem.vue
    │   │   ├── pageFaqItem.vue
    │   │   ├── pageParagraphItem.vue
    │   │   ├── scrollItem.vue
    │   │   ├── timeoutItem.vue
    │   │   └── verticalItem.vue
    │   ├── lay
    │   │   ├── layoutLeft.vue
    │   │   ├── layoutRepeat.vue
    │   │   └── layoutRight.vue
    │   ├── list
    │   │   ├── horizontalList.vue
    │   │   └── verticalList.vue
    │   ├── navLink
    │   │   ├── bottomMenu.vue
    │   │   ├── floorMenu.vue
    │   │   └── gridMenu.vue
    │   ├── option.vue
    │   ├── pageOption.vue
    │   ├── preview.vue
    │   ├── shopping
    │   │   ├── coupon.vue
    │   │   ├── goods.vue
    │   │   └── goodsSearch.vue
    │   ├── slidebar.vue
    │   ├── svgIcon.vue
    │   ├── swiper
    │   │   ├── scrollLeft.vue
    │   │   └── swiperBanner.vue
    │   ├── toolbar.vue
    │   └── upload.vue
    ├── config
    │   ├── appPageConfig.ts
    │   ├── componentConfig.ts
    │   └── slideMenuConfig.ts
    ├── icons
    │   ├── index.ts
    │   ├── svg
    │   │   ├── blod.svg
    │   │   ├── carousel.svg
    │   │   ├── clipboard.svg
    │   │   ├── countDown.svg
    │   │   ├── coupon.svg
    │   │   ├── directionList.svg
    │   │   ├── document.svg
    │   │   ├── floorNav.svg
    │   │   ├── floorTitle.svg
    │   │   ├── form.svg
    │   │   ├── grid.svg
    │   │   ├── image.svg
    │   │   ├── introduction.svg
    │   │   ├── italic.svg
    │   │   ├── layoutLeft.svg
    │   │   ├── layoutRepeat.svg
    │   │   ├── layoutRight.svg
    │   │   ├── paragraph.svg
    │   │   ├── picTxtList.svg
    │   │   ├── roll.svg
    │   │   ├── rowScroll.svg
    │   │   ├── search.svg
    │   │   ├── shopping.svg
    │   │   ├── tabbar.svg
    │   │   ├── textCenter.svg
    │   │   ├── textLeft.svg
    │   │   ├── textRight.svg
    │   │   ├── title.svg
    │   │   ├── transverseList.svg
    │   │   └── underline.svg
    │   └── svgo.yml
    ├── main.ts
    ├── shims-tsx.d.ts
    ├── shims-vue.d.ts
    └── utils
    │   ├── dragarea.ts
    │   ├── newsMarquee.ts
    │   └── tools.ts
├── tests
    └── unit
    │   └── example.spec.ts
├── tsconfig.json
└── vue.config.js


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
10 |     "prettier/prettier": "off"
11 |   },
12 |   parserOptions: {
13 |     parser: "@typescript-eslint/parser"
14 |   }
15 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | yarn.lock
10 | 
11 | package-lock.json
12 | 
13 | # Log files
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | 
18 | # Editor directories and files
19 | .idea
20 | .vscode
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   singleQuote: true,
3 |   semi: false
4 | }


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "8"
 4 | 
 5 | install:
 6 |   - npm install
 7 | 
 8 | script:
 9 |   - npm run build
10 | 
11 | after_success:
12 |   - cd ./dist
13 |   - git init
14 |   - git config --global user.name "${U_NAME}"
15 |   - git config --global user.email "${U_EMAIL}"
16 |   - git add .
17 |   - git commit -m "Automatically update from travis-ci"
18 |   - git push --quiet --force  "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
19 | 
20 | branches:
21 |   only:
22 |     - master
23 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # visual editing
 2 | 
 3 | :factory: Mobile page visual editor, using Vue and typescript to build.
 4 | 
 5 | ## Demo
 6 | 
 7 | [在线预览/Online preview](https://typeofnan.github.io/visual-editing)
 8 | 
 9 | ## Project setup
10 | 
11 | ### Install
12 | 
13 | ``` bash
14 | yarn
15 | ```
16 | 
17 | ### Compiles and hot-reloads for development
18 | 
19 | ``` bash
20 | yarn serve
21 | ```
22 | 
23 | ### Compiles and minifies for production
24 | 
25 | ``` bash
26 | yarn build
27 | ```
28 | 
29 | ### Run your unit tests
30 | 
31 | ``` bash
32 | yarn test:unit
33 | ```
34 | 
35 | ### Analyze
36 | 
37 | ``` bash
38 | yarn preview
39 | ```
40 | 
41 | ### Lints and fixes files
42 | 
43 | ``` bash
44 | yarn lint
45 | ```
46 | 
47 | ## Continuous integration
48 | 
49 | 通过 Travis 持续集成，自动部署。Automatic deployment through **Travis** continuous integration.
50 | 
51 | ## Customize configuration
52 | See [Configuration Reference](https://cli.vuejs.org/config/).
53 | 
54 | ## License
55 | 
56 | [MIT](https://opensource.org/licenses/MIT)
57 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "visual-editing",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "https://typeofNaN.github.io/visual-editing",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "preview": "vue-cli-service build --report",
10 |     "test:unit": "vue-cli-service test:unit",
11 |     "lint": "vue-cli-service lint"
12 |   },
13 |   "dependencies": {
14 |     "core-js": "^3.6.4",
15 |     "element-ui": "^2.13.2",
16 |     "vue": "^2.6.11",
17 |     "vue-class-component": "^7.2.3",
18 |     "vue-property-decorator": "^8.4.1"
19 |   },
20 |   "devDependencies": {
21 |     "@types/jest": "^24.0.19",
22 |     "@typescript-eslint/eslint-plugin": "^2.26.0",
23 |     "@typescript-eslint/parser": "^2.26.0",
24 |     "@vue/cli-plugin-babel": "~4.3.0",
25 |     "@vue/cli-plugin-eslint": "~4.3.0",
26 |     "@vue/cli-plugin-typescript": "~4.3.0",
27 |     "@vue/cli-plugin-unit-jest": "~4.3.0",
28 |     "@vue/cli-service": "~4.3.0",
29 |     "@vue/eslint-config-prettier": "^6.0.0",
30 |     "@vue/eslint-config-typescript": "^5.0.2",
31 |     "@vue/test-utils": "1.0.0-beta.31",
32 |     "eslint": "^6.7.2",
33 |     "eslint-plugin-prettier": "^3.1.1",
34 |     "eslint-plugin-vue": "^6.2.2",
35 |     "iscroll": "^5.2.0",
36 |     "node-sass": "^4.12.0",
37 |     "prettier": "^1.19.1",
38 |     "sass-loader": "^8.0.2",
39 |     "svg-sprite-loader": "^5.0.0",
40 |     "typescript": "~3.8.3",
41 |     "vue-template-compiler": "^2.6.11"
42 |   },
43 |   "eslintConfig": {
44 |     "root": true,
45 |     "env": {
46 |       "node": true
47 |     },
48 |     "extends": [
49 |       "plugin:vue/essential",
50 |       "eslint:recommended",
51 |       "@vue/typescript/recommended",
52 |       "@vue/prettier",
53 |       "@vue/prettier/@typescript-eslint"
54 |     ],
55 |     "parserOptions": {
56 |       "ecmaVersion": 2020
57 |     },
58 |     "rules": {},
59 |     "overrides": [
60 |       {
61 |         "files": [
62 |           "**/__tests__/*.{j,t}s?(x)",
63 |           "**/tests/unit/**/*.spec.{j,t}s?(x)"
64 |         ],
65 |         "env": {
66 |           "jest": true
67 |         }
68 |       }
69 |     ]
70 |   },
71 |   "browserslist": [
72 |     "> 1%",
73 |     "last 2 versions",
74 |     "not dead"
75 |   ],
76 |   "jest": {
77 |     "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/typeofNaN/visual-editing/d60e1b620a98655e2fd9cc4ec3e305e19d8b80c8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/assets/style.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | ::-webkit-scrollbar {
 8 |   width: 0.25rem;
 9 |   height: 0.25rem;
10 |   background-color: #ccc;
11 | }
12 | 
13 | ::-webkit-scrollbar-track {
14 |   border-radius: 0;
15 | }
16 | 
17 | ::-webkit-scrollbar-thumb {
18 |   border-radius: 0;
19 |   background-color: #666;
20 |   transition: all .2s;
21 |   border-radius: 0.25rem;
22 | }
23 | 
24 | ::-webkit-scrollbar-thumb:hover {
25 |   background-color: rgba(95, 95, 95, 0.7);
26 | }


--------------------------------------------------------------------------------
/src/components/animate/newsMarquee.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <ul
  7 |       id="line-marquee"
  8 |       class="marquee-box"
  9 |     >
 10 |       <li
 11 |         v-for="(mq, index) in marquees"
 12 |         :key="index"
 13 |         :style="{ lineHeight: component.style[2].val + 'px' }"
 14 |         class="marquee-item"
 15 |       >{{ mq.text }}</li>
 16 |     </ul>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script lang="ts">
 21 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 22 | 
 23 | const Marquee = require('@/utils/newsMarquee')
 24 | 
 25 | interface option {
 26 |   successive: Boolean,
 27 |   speed: number,
 28 |   pause: number
 29 | }
 30 | 
 31 | @Component({
 32 |   name: 'NewsMarquee'
 33 | })
 34 | export default class NewsMarquee extends Vue {
 35 |   @Prop({ default: null })
 36 |   private component: any
 37 | 
 38 |   private marquee: any = null
 39 |   private marqueeOption: option = {
 40 |     successive: this.component.style[0].val, // 是否连续
 41 |     speed: 1000 / 60, // 滚动速度
 42 |     pause: 3500 // 停顿时间
 43 |   }
 44 |   private marquees: any = this.component.action.config
 45 | 
 46 |   private get getStyle (): string {
 47 |     const ret: Array<string> = []
 48 |     this.component.style.forEach((item: any) => {
 49 |       if (item.val) {
 50 |         if (Array.isArray(item.attr)) {
 51 |           item.attr.forEach((atr: string, i: number) => {
 52 |             ret.push(atr + ':' + item.val[i])
 53 |           })
 54 |         } else if (item.attr === 'background-image') {
 55 |           ret.push(item.attr + ':url(' + item.val + ')')
 56 |         } else {
 57 |           const unit = item.unit || ''
 58 |           ret.push(item.attr + ':' + item.val + unit)
 59 |         }
 60 |       }
 61 |     })
 62 |     return ret.join(';')
 63 |   }
 64 | 
 65 |   @Watch('component', { deep: true })
 66 |   private watchComponent (): void {
 67 |     this.marquees = this.component.action.config
 68 |     this.marqueeOption.successive = this.component.style[0].val
 69 |     // 需要重新初始化marquee对象
 70 |     if (this.marquee) {
 71 |       this.marquee.destroy()
 72 |       this.marquee = null
 73 |     }
 74 |     this.marquee = new Marquee('#line-marquee', this.marqueeOption)
 75 |   }
 76 | 
 77 |   private mounted (): void {
 78 |     this.marquee = new Marquee('#line-marquee', this.marqueeOption)
 79 |   }
 80 | }
 81 | </script>
 82 | 
 83 | <style lang="scss" scoped>
 84 | .marquee-box {
 85 |   position: relative;
 86 |   margin: 0;
 87 |   padding: 0;
 88 |   width: 100%;
 89 |   height: 100%;
 90 |   list-style: none;
 91 |   overflow: hidden;
 92 | 
 93 |   .marquee-item {
 94 |     display: block;
 95 |     width: 100%;
 96 |     overflow: hidden;
 97 |     white-space: nowrap;
 98 |     text-overflow: ellipsis;
 99 |   }
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/clickToUrl.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |     id="click"
  4 |     title="点击配置"
  5 |     :close-on-click-modal="false"
  6 |     :append-to-body="false"
  7 |     :visible.sync="dialogShow"
  8 |     @close="$emit('update:show', false)"
  9 |     width="680px"
 10 |   >
 11 |     <el-tabs
 12 |       v-model="currentTab"
 13 |       type="card"
 14 |       @tab-click="clickTab"
 15 |     >
 16 |       <el-tab-pane
 17 |         v-if="showTabs.indexOf('outside') > -1"
 18 |         label="链接地址"
 19 |         name="outside"
 20 |       >
 21 |         <el-form
 22 |           label-width="100px"
 23 |           style="margin-top:20px;"
 24 |         >
 25 |           <el-form-item label="链接地址：">
 26 |             <el-input
 27 |               v-model="outsideVal"
 28 |               placeholder="请输入链接地址，例：https://www.example.com/"
 29 |           ></el-input>
 30 |           </el-form-item>
 31 |         </el-form>
 32 |       </el-tab-pane>
 33 |       <el-tab-pane
 34 |         v-if="showTabs.indexOf('code') > -1"
 35 |         label="自定义脚本"
 36 |         name="jsCode"
 37 |       >
 38 |         <el-form
 39 |           label-width="100px"
 40 |           style="margin-top:20px;"
 41 |         >
 42 |           <el-form-item label="自定义脚本：">
 43 |             <el-input
 44 |               v-model="codeVal"
 45 |               type="textarea"
 46 |               placeholder="javascript代码，例：location.href='https://www.baidu.com'"
 47 |             ></el-input>
 48 |           </el-form-item>
 49 |         </el-form>
 50 |       </el-tab-pane>
 51 |       <el-tab-pane
 52 |         v-if="showTabs.indexOf('page') > -1"
 53 |         label="页内位置"
 54 |         name="page"
 55 |       >
 56 |         <el-tabs tab-position="left">
 57 |           <el-tab-pane label="全部">
 58 |             <div class="choose-panel">
 59 |               <template v-for="(comp, index) in comps">
 60 |                 <el-button
 61 |                   v-if="comp.type !== 'placeholder'"
 62 |                   size="mini"
 63 |                   round
 64 |                   :class="[currentTab === 'page' && pageVal === comp.domId ? 'el-button--primary' : '']"
 65 |                   @click="setPageAction(comp.domId)"
 66 |                   :key="index"
 67 |                 >{{ comp.domName || comp.domId }}</el-button>
 68 |               </template>
 69 |             </div>
 70 |           </el-tab-pane>
 71 |           <el-tab-pane label="图片">
 72 |             <div class="choose-panel">
 73 |               <template v-for="(comp, index) in comps">
 74 |                 <el-button
 75 |                   v-if="comp.type == 'img'"
 76 |                   size="mini"
 77 |                   round
 78 |                   :class="[currentTab == 'page' && pageVal === comp.domId ? 'el-button--primary' : '']"
 79 |                   @click="setPageAction(comp.domId)"
 80 |                   :key="index"
 81 |                 >{{ comp.domName || comp.domId }}</el-button>
 82 |               </template>
 83 |             </div>
 84 |           </el-tab-pane>
 85 |           <el-tab-pane label="文本">
 86 |             <div class="choose-panel">
 87 |               <template v-for="(comp, index) in comps">
 88 |                 <el-button
 89 |                   v-if="comp.type == 'text'"
 90 |                   size="mini"
 91 |                   round
 92 |                   :class="[currentTab == 'page' && pageVal === comp.domId ? 'el-button--primary' : '']"
 93 |                   @click="setPageAction(comp.domId)"
 94 |                   :key="index"
 95 |                 >{{ comp.domName || comp.domId }}</el-button>
 96 |               </template>
 97 |             </div>
 98 |           </el-tab-pane>
 99 |           <el-tab-pane label="表单">
100 |             <div class="choose-panel">
101 |               <template v-for="(comp, index) in comps">
102 |                 <el-button
103 |                   v-if="comp.type == 'form'"
104 |                   size="mini"
105 |                   round
106 |                   :class="[currentTab == 'page' && pageVal == comp.domId ? 'el-button--primary' : '']"
107 |                   @click="setPageAction(comp.domId)"
108 |                   :key="index"
109 |                 >{{ comp.domName || comp.domId }}</el-button>
110 |               </template>
111 |             </div>
112 |           </el-tab-pane>
113 |         </el-tabs>
114 |       </el-tab-pane>
115 |       <el-tab-pane
116 |         v-if="showTabs.indexOf('tel') > -1"
117 |         label="拨打电话"
118 |         name="tel"
119 |       >
120 |         <el-form label-width="100px">
121 |           <el-form-item label="电话号码：">
122 |             <el-input
123 |               placeholder="请输入电话号码"
124 |               v-model="telVal"
125 |               :maxlength="11"
126 |             ></el-input>
127 |           </el-form-item>
128 |         </el-form>
129 |       </el-tab-pane>
130 |     </el-tabs>
131 |     <div
132 |       slot="footer"
133 |       class="dialog-footer"
134 |     >
135 |       <el-button @click="dialogShow = false">取 消</el-button>
136 |       <el-button
137 |         type="primary"
138 |         @click="sure"
139 |       >确 定</el-button>
140 |     </div>
141 |   </el-dialog>
142 | </template>
143 | 
144 | <script lang="ts">
145 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
146 | 
147 | @Component({
148 |   name: 'ClickToUrl'
149 | })
150 | export default class ClickToUrl extends Vue {
151 |   @Prop({ default: false })
152 |   private show?: Boolean
153 | 
154 |   @Prop({ default: null })
155 |   private option: any
156 | 
157 |   @Prop({ default: null })
158 |   private tabs?: Array<any>
159 | 
160 |   @Prop({ default: null })
161 |   private index!: number
162 | 
163 |   @Prop({ default: null })
164 |   private coms?: Array<any>
165 | 
166 |   $evt: any
167 |   private dialogShow: Boolean = this.show || false
168 |   private config: any = this.option
169 |   private showTabs: Array<any> = this.tabs || []
170 |   private currentTab: string = this.getCurrentTab()
171 |   private returnVal: any = this.getOldVal()
172 |   private outsideVal: string = this.getVal('outside')
173 |   private pageVal: string = this.getVal('page')
174 |   private telVal: string = this.getVal('tel')
175 |   private codeVal: string = ''
176 | 
177 |   @Watch('option')
178 |   private watchOption (): void {
179 |     this.config = this.option
180 |   }
181 | 
182 |   @Watch('tabs')
183 |   private watchTabs (): void {
184 |     this.showTabs = this.tabs || []
185 |   }
186 | 
187 |   @Watch('show')
188 |   private watchShow (): void {
189 |     this.dialogShow = this.show || false
190 |     if (this.dialogShow) {
191 |       this.currentTab = this.getCurrentTab()
192 |       this.outsideVal = this.getVal('outside')
193 |       this.pageVal = this.getVal('page')
194 |       this.telVal = this.getVal('tel')
195 |       this.returnVal = null
196 |     }
197 |   }
198 | 
199 |   private getVal (type: any): string {
200 |     if (this.config && this.config.action && this.config.action.config.length && this.config.action.config[this.index].click) {
201 |       if (this.config.action.config[this.index].click.type === type) {
202 |         return this.config.action.config[this.index].click.href
203 |       }
204 |     }
205 |     return ''
206 |   }
207 | 
208 |   private getOldVal (): any {
209 |     return this.config && this.config.action.config && this.config.action.config.length ? this.config.action.config[this.index].click : null
210 |   }
211 | 
212 |   private getCurrentTab (): string {
213 |     if (this.showTabs && this.showTabs.length === 1) {
214 |       return this.showTabs[0]
215 |     }
216 |     return this.config && this.config.action.config && this.config.action.config.length && this.config.action.config[this.index].click ? this.config.action.config[this.index].click.type : 'outside'
217 |   }
218 | 
219 |   private setPageAction (id: any): void {
220 |     this.pageVal = id
221 |     this.returnVal = {
222 |       type: 'page',
223 |       href: id
224 |     }
225 |   }
226 | 
227 |   private clickTab (tab: any) {
228 |     this.currentTab = tab.name
229 |   }
230 | 
231 |   private sure (): void {
232 |     this.dialogShow = false
233 |     if (this.currentTab === 'outside' && this.outsideVal) {
234 |       this.returnVal = {
235 |         type: 'outside',
236 |         href: this.outsideVal
237 |       }
238 |     }
239 |     if (this.currentTab === 'tel' && this.telVal) {
240 |       this.returnVal = {
241 |         type: 'tel',
242 |         href: this.telVal
243 |       }
244 |     }
245 |     this.$evt.$emit('click:submit', this.index, this.returnVal)
246 |   }
247 | }
248 | </script>
249 | 
250 | <style lang="scss">
251 | #click {
252 |   .el-dialog__body {
253 |     padding-top: 10px;
254 | 
255 |     .choose-panel {
256 |       line-height: 2.8;
257 |     }
258 |   }
259 | }
260 | </style>
261 | 


--------------------------------------------------------------------------------
/src/components/common/floorTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div
 7 |       class="line"
 8 |       :style="{ backgroundColor: getColor }"
 9 |     ></div>
10 |     <div
11 |       class="text-box"
12 |       v-html="getText"
13 |     ></div>
14 |     <div
15 |       class="line"
16 |       :style="{ backgroundColor: getColor }"
17 |     ></div>
18 |   </div>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import { Component, Prop, Vue } from 'vue-property-decorator'
23 | 
24 | @Component({
25 |   name: 'FloorTitle'
26 | })
27 | export default class FloorTitle extends Vue {
28 |   @Prop({ default: null })
29 |   private component: any
30 | 
31 |   private get getStyle (): string {
32 |     const ret: Array<string> = []
33 |     this.component.style.forEach((item: any) => {
34 |       const unit = item.unit || ''
35 |       if (item.val) {
36 |         if (Array.isArray(item.attr)) {
37 |           item.attr.forEach((atr: string, i: number) => {
38 |             ret.push(atr + ':' + item.val[i])
39 |           })
40 |         } else if (item.attr === 'background-image') {
41 |           ret.push(item.attr + ':url(' + item.val + ')')
42 |         } else {
43 |           ret.push(item.attr + ':' + item.val + unit)
44 |         }
45 |       }
46 |     })
47 |     return ret.join(';')
48 |   }
49 | 
50 |   private get getColor (): string {
51 |     let color: string = '#606266'
52 |     this.component.style.forEach((item: any) => {
53 |       if (item.val) {
54 |         if (item.attr === 'color') {
55 |           color = item.val
56 |         }
57 |       }
58 |     })
59 | 
60 |     return color
61 |   }
62 | 
63 |   private get getText (): string {
64 |     const arr = this.component.base[0].val.split('\n')
65 |     if (arr.length) {
66 |       return arr.join('<br/>')
67 |     }
68 |     return this.component.base[0].val
69 |   }
70 | }
71 | </script>
72 | 
73 | <style lang="scss" scoped>
74 | .comp-content {
75 |   display: flex;
76 |   justify-content: center;
77 |   align-items: center;
78 |   background-repeat: no-repeat;
79 | 
80 |   .line {
81 |     width: 40px;
82 |     height: 2px;
83 |   }
84 | 
85 |   .text-box {
86 |     padding: 0 10px;
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/common/form.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="style"
  5 |   >
  6 |     <div class="form-box">
  7 |       <div v-if="inputs.length">
  8 |         <div
  9 |           v-for="(input, index) in inputs"
 10 |           :key="index"
 11 |           class="form-box-item"
 12 |           :style="{ marginTop: component.others.config[4].val + 'px' }"
 13 |         >
 14 |           <label :style="labelStyle">{{input.desc}}</label>
 15 |           <input
 16 |             v-if="input.type !== 'select'"
 17 |             class="item-input"
 18 |             :style="inputStyle"
 19 |             :type="input.type"
 20 |             :placeholder="input.placeholder ? input.placeholder : input.isNecessary ? '必填' : '非必填'"
 21 |           >
 22 |           <select
 23 |             v-else
 24 |             class="item-input"
 25 |           >
 26 |             <option></option>
 27 |           </select>
 28 |         </div>
 29 |       </div>
 30 |       <div
 31 |         v-else
 32 |         class="image-placeholder"
 33 |       >
 34 |         <i class="el-icon-tickets"></i>
 35 |       </div>
 36 |       <div
 37 |         class="form-btn"
 38 |         :style="buttonStyle"
 39 |       >提 交</div>
 40 |     </div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script lang="ts">
 45 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 46 | 
 47 | @Component({
 48 |   name: 'BaseForm'
 49 | })
 50 | export default class BaseForm extends Vue {
 51 |   @Prop({ default: null })
 52 |   private component: any
 53 | 
 54 |   private style = this.getStyle()
 55 |   private labelStyle = this.getLabelStyle()
 56 |   private inputStyle = this.getInputStyle()
 57 |   private buttonStyle = this.getButtonStyle()
 58 |   private inputs = this.component.action.config
 59 | 
 60 |   @Watch('component', { deep: true })
 61 |   private watchComponent (): void {
 62 |     this.style = this.getStyle()
 63 |     this.labelStyle = this.getLabelStyle()
 64 |     this.inputStyle = this.getInputStyle()
 65 |     this.buttonStyle = this.getButtonStyle()
 66 |     this.inputs = this.component.action.config
 67 |   }
 68 | 
 69 |   private getStyle (): string {
 70 |     const ret: Array<string> = []
 71 |     this.component.style.forEach((item: any) => {
 72 |       if (item.val) {
 73 |         if (item.attr === 'background-image') {
 74 |           ret.push(item.attr + ':url(' + item.val + ')')
 75 |         } else {
 76 |           const unit = item.unit || ''
 77 |           ret.push(item.attr + ':' + item.val + unit)
 78 |         }
 79 |       }
 80 |     })
 81 |     return ret.join(';')
 82 |   }
 83 | 
 84 |   private getLabelStyle (): string {
 85 |     const ret: Array<string> = [
 86 |       'width:' + this.component.others.config[0].val + 'px',
 87 |       'height:' + this.component.others.config[1].val + 'px',
 88 |       'line-height:' + this.component.others.config[1].val + 'px'
 89 |     ]
 90 |     return ret.join(';')
 91 |   }
 92 | 
 93 |   private getInputStyle (): string {
 94 |     const ret: Array<string> = []
 95 |     this.component.others.config.forEach((item: any) => {
 96 |       const isInput: number = item.attr.indexOf('form-input_')
 97 |       const idx: number = item.attr.indexOf('_')
 98 |       if (isInput === 0) {
 99 |         const unit: string = item.unit || ''
100 |         item.val && ret.push(item.attr.substring(idx + 1, item.attr.length) + ':' + item.val + unit)
101 |       }
102 |     })
103 |     return ret.join(';')
104 |   }
105 | 
106 |   private getButtonStyle (): string {
107 |     const ret: Array<string> = []
108 |     this.component.others.config.forEach((item: any) => {
109 |       const isInput: number = item.attr.indexOf('form-btn_')
110 |       const idx: number = item.attr.indexOf('_')
111 |       if (isInput === 0) {
112 |         const unit: string = item.unit || ''
113 |         const attr: string = item.attr.substring(idx + 1, item.attr.length)
114 |         item.val && ret.push(attr + ':' + item.val + unit)
115 |         attr === 'height' && ret.push('line-height:' + (parseInt(item.val) - 2 + unit))
116 |       }
117 |     })
118 |     return ret.join(';')
119 |   }
120 | }
121 | </script>
122 | 
123 | <style lang="scss" scoped>
124 | .form-box {
125 |   position: relative;
126 |   overflow: hidden;
127 | 
128 |   .image-placeholder {
129 |     width: 100%;
130 |     height: 100px;
131 |     line-height: 100px;
132 |     text-align: center;
133 | 
134 |     > i {
135 |       color: #83c0ff;
136 |       font-size: 40px;
137 |     }
138 |   }
139 | 
140 |   .form-box-item {
141 |     display: flex;
142 | 
143 |     > label {
144 |       display: block;
145 |     }
146 | 
147 |     .item-input {
148 |       flex: 1;
149 |       padding: 5px 10px;
150 |       box-sizing: border-box;
151 |       border: 1px solid;
152 |       outline: 0;
153 |     }
154 |   }
155 | 
156 |   .form-btn {
157 |     box-sizing: border-box;
158 |     border: 1px solid;
159 |     text-align: center;
160 |   }
161 | }
162 | </style>
163 | 


--------------------------------------------------------------------------------
/src/components/common/image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div class="image-box">
 7 |       <img
 8 |         v-if="imgUrl"
 9 |         :src="imgUrl"
10 |       >
11 |       <div
12 |         v-else
13 |         class="image-placeholder"
14 |       >
15 |         <i class="el-icon-picture-outline"></i>
16 |       </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script lang="ts">
22 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
23 | 
24 | @Component({
25 |   name: 'BaseImage'
26 | })
27 | export default class BaseImage extends Vue {
28 |   @Prop({ default: null })
29 |   private component: any
30 | 
31 |   private imgUrl: string = this.component.style[1].val
32 | 
33 |   private get getStyle (): string {
34 |     const ret: Array<string> = []
35 |     this.component.style.forEach((item: any) => {
36 |       const unit: string = item.unit || ''
37 |       item.val && ret.push(item.attr + ':' + item.val + unit)
38 |     })
39 |     return ret.join(';')
40 |   }
41 | 
42 |   @Watch('component', { deep: true })
43 |   private watchComponent (): void {
44 |     this.imgUrl = this.component.style[1].val
45 |   }
46 | }
47 | </script>
48 | 
49 | <style lang="scss" scoped>
50 | .image-box {
51 |   overflow: hidden;
52 | 
53 |   .image-placeholder {
54 |     display: flex;
55 |     justify-content: center;
56 |     align-items: center;
57 |     width: 100%;
58 |     height: 100px;
59 |     text-align: center;
60 | 
61 |     > i {
62 |       font-size: 40px;
63 |     }
64 |   }
65 | 
66 |   img {
67 |     display: block;
68 |     margin: 0;
69 |     width: 100%;
70 |     height: auto;
71 |     border: 0;
72 |     -webkit-user-drag: none;
73 |   }
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/common/pageFaq.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div class="page-faq">
 7 |       <div
 8 |         v-for="(item, index) in component.action.config"
 9 |         :key="index"
10 |         class="faq-item"
11 |       >
12 |         {{ item.text }}
13 |       </div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script lang="ts">
19 | import { Component, Prop, Vue } from 'vue-property-decorator'
20 | 
21 | @Component({
22 |   name: 'PageFaq'
23 | })
24 | export default class PageFaq extends Vue {
25 |   @Prop({ default: null })
26 |   private component: any
27 | 
28 |   private get getStyle (): string {
29 |     const ret: Array<string> = []
30 |     this.component.style.forEach((item: any) => {
31 |       const unit: string = item.unit || ''
32 |       if (item.val) {
33 |         if (Array.isArray(item.attr)) {
34 |           item.attr.forEach((atr: string, i: number) => {
35 |             ret.push(atr + ':' + item.val[i])
36 |           })
37 |         } else {
38 |           ret.push(item.attr + ':' + item.val + unit)
39 |         }
40 |       }
41 |     })
42 |     return ret.join(';')
43 |   }
44 | }
45 | </script>
46 | 
47 | <style lang="scss" scoped>
48 | .page-faq {
49 |   display: flex;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/common/pageIntro.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div class="page-intro">
 7 |       <div class="intro-logo">
 8 |         <svg-icon icon-class="introduction"></svg-icon>
 9 |       </div>
10 |       <div
11 |         v-html="getText"
12 |         class="intro-text"
13 |       ></div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script lang="ts">
19 | import { Component, Prop, Vue } from 'vue-property-decorator'
20 | 
21 | @Component({
22 |   name: 'PageIntro'
23 | })
24 | export default class PageIntro extends Vue {
25 |   @Prop({ default: null })
26 |   private component: any
27 | 
28 |   private get getStyle (): string {
29 |     const ret: Array<string> = []
30 |     this.component.style.forEach((item: any) => {
31 |       const unit: string = item.unit || ''
32 |       if (item.val) {
33 |         if (Array.isArray(item.attr)) {
34 |           item.attr.forEach((atr: string, i: number) => {
35 |             ret.push(atr + ':' + item.val[i])
36 |           })
37 |         } else {
38 |           ret.push(item.attr + ':' + item.val + unit)
39 |         }
40 |       }
41 |     })
42 |     return ret.join(';')
43 |   }
44 | 
45 |   private get getText (): string {
46 |     const arr: any = this.component.base[0].val.split('\n')
47 |     if (arr.length) {
48 |       return arr.join('<br/>')
49 |     }
50 |     return this.component.base[0].val
51 |   }
52 | }
53 | </script>
54 | 
55 | <style lang="scss" scoped>
56 | .comp-content {
57 |   background-repeat: no-repeat;
58 | }
59 | .page-intro {
60 |   display: flex;
61 | 
62 |   .intro-logo {
63 |     width: 36px;
64 | 
65 |     > svg {
66 |       width: 22px;
67 |       height: 18px;
68 |     }
69 |   }
70 | 
71 |   .intro-text {
72 |     flex: 1;
73 |   }
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/common/pageParagraph.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="page-paragraph__title">
  7 |       <span class="title-icon">
  8 |         <i :class="component.base[0].val"></i>
  9 |       </span>
 10 |       <span class="title-h1">{{ component.base[1].val }}</span>
 11 |     </div>
 12 |     <div
 13 |       v-for="(item, index) in component.action.config"
 14 |       :key="index"
 15 |       class="page-paragraph"
 16 |     >
 17 |       <label class="page-paragraph__label">
 18 |         {{ item.label }}
 19 |       </label>
 20 |       <div
 21 |         v-html="item.content"
 22 |         class="page-paragraph__content"
 23 |       ></div>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script lang="ts">
 29 | import { Component, Prop, Vue } from 'vue-property-decorator'
 30 | 
 31 | @Component({
 32 |   name: 'PageParagraph'
 33 | })
 34 | export default class pageParagraph extends Vue {
 35 |   @Prop({ default: null })
 36 |   private component: any
 37 | 
 38 |   private get getStyle (): string {
 39 |     const ret: Array<string> = []
 40 |     this.component.style.forEach((item: any) => {
 41 |       const unit: string = item.unit || ''
 42 |       if (item.val) {
 43 |         if (item.attr === 'background-image') {
 44 |           ret.push(item.attr + ':url(' + item.val + ')')
 45 |         } else {
 46 |           ret.push(item.attr + ':' + item.val + unit)
 47 |         }
 48 |       }
 49 |     })
 50 |     return ret.join(';')
 51 |   }
 52 | }
 53 | </script>
 54 | 
 55 | <style lang="scss" scoped>
 56 | .page-paragraph__title {
 57 |   display: flex;
 58 |   align-items: center;
 59 |   margin-bottom: 10px;
 60 | 
 61 |   .title-icon {
 62 |     display: flex;
 63 |     align-items: center;
 64 |     margin-right: 10px;
 65 | 
 66 |     > i.theme-1 {
 67 |       display: block;
 68 |       width: 4px;
 69 |       height: 14px;
 70 |       background-color: #007aff;
 71 |     }
 72 |     > i.theme-2 {
 73 |       display: block;
 74 |       width: 8px;
 75 |       height: 8px;
 76 |       border: 2px solid #007aff;
 77 |       border-radius: 50%;
 78 |       box-sizing: border-box;
 79 |     }
 80 |   }
 81 |   .title-h1 {
 82 |     display: block;
 83 |     font-size: 16px;
 84 |     font-weight: 600;
 85 |   }
 86 | }
 87 | 
 88 | .page-paragraph {
 89 |   display: flex;
 90 | 
 91 |   .page-paragraph__label {
 92 |     display: block;
 93 |     text-align: left;
 94 |     width: 20px;
 95 |     line-height: 1.5;
 96 |   }
 97 | 
 98 |   .page-paragraph__content {
 99 |     flex: 1;
100 |     line-height: 1.5;
101 |     font-size: 14px;
102 |   }
103 | }
104 | </style>
105 | 


--------------------------------------------------------------------------------
/src/components/common/pageTitle.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="page-title">
  7 |       <h3 :style="getH3Style">{{ component.base[0].val }}</h3>
  8 |       <p
  9 |         v-if="component.base[1].val"
 10 |         :style="getPStyle"
 11 |       >{{ component.base[1].val }}</p>
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script lang="ts">
 17 | import { Component, Prop, Vue } from 'vue-property-decorator'
 18 | 
 19 | @Component({
 20 |   name: 'PageTitle'
 21 | })
 22 | export default class PageTitle extends Vue {
 23 |   @Prop({ default: null })
 24 |   private component: any
 25 | 
 26 |   private get getStyle (): string {
 27 |     const ret: Array<string> = []
 28 |     this.component.style.forEach((item: any) => {
 29 |       const unit: string = item.unit || ''
 30 |       if (item.val) {
 31 |         if (item.attr === 'background-image') {
 32 |           ret.push(item.attr + ':url(' + item.val + ')')
 33 |         } else {
 34 |           ret.push(item.attr + ':' + item.val + unit)
 35 |         }
 36 |       }
 37 |     })
 38 |     return ret.join(';')
 39 |   }
 40 | 
 41 |   private get getH3Style (): string {
 42 |     const ret: Array<string> = []
 43 |     this.component.others.config.forEach((item: any, idx: number) => {
 44 |       const unit: string = item.unit || ''
 45 |       if (item.val && idx < 4) {
 46 |         if (Array.isArray(item.attr)) {
 47 |           item.attr.forEach((atr: string, i: number) => {
 48 |             ret.push(atr + ':' + item.val[i])
 49 |           })
 50 |         } else {
 51 |           ret.push(item.attr + ':' + item.val + unit)
 52 |         }
 53 |       }
 54 |     })
 55 |     return ret.join(';')
 56 |   }
 57 | 
 58 |   private get getPStyle (): string {
 59 |     const ret: Array<string> = []
 60 |     this.component.others.config.forEach((item: any, idx: number) => {
 61 |       const unit: string = item.unit || ''
 62 |       if (item.val && idx > 3) {
 63 |         if (Array.isArray(item.attr)) {
 64 |           item.attr.forEach((atr: string, i: number) => {
 65 |             ret.push(atr + ':' + item.val[i])
 66 |           })
 67 |         } else {
 68 |           ret.push(item.attr + ':' + item.val + unit)
 69 |         }
 70 |       }
 71 |     })
 72 |     return ret.join(';')
 73 |   }
 74 | }
 75 | </script>
 76 | 
 77 | <style lang="scss" scoped>
 78 | .comp-content {
 79 |   background-repeat: no-repeat;
 80 | }
 81 | .page-title {
 82 |   position: relative;
 83 |   box-sizing: border-box;
 84 | 
 85 |   * {
 86 |     margin: 0;
 87 |     padding: 0;
 88 |     line-height: 1;
 89 |   }
 90 | 
 91 |   > h3 {
 92 |     display: block;
 93 |     width: 100%;
 94 |     overflow: hidden;
 95 |     white-space: nowrap;
 96 |     text-overflow: ellipsis;
 97 |   }
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/common/text.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div
 7 |       class="text-box"
 8 |       v-html="getText"
 9 |     ></div>
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import { Component, Prop, Vue } from 'vue-property-decorator'
15 | 
16 | @Component({
17 |   name: 'BaseText'
18 | })
19 | export default class BaseText extends Vue {
20 |   @Prop({ default: null })
21 |   private component: any
22 | 
23 |   private get getStyle (): string {
24 |     const ret: Array<string> = []
25 |     this.component.style.forEach((item: any) => {
26 |       const unit: string = item.unit || ''
27 |       if (item.val) {
28 |         if (Array.isArray(item.attr)) {
29 |           item.attr.forEach((atr: string, i: number) => {
30 |             ret.push(atr + ':' + item.val[i])
31 |           })
32 |         } else if (item.attr === 'background-image') {
33 |           ret.push(item.attr + ':url(' + item.val + ')')
34 |         } else {
35 |           ret.push(item.attr + ':' + item.val + unit)
36 |         }
37 |       }
38 |     })
39 |     return ret.join(';')
40 |   }
41 | 
42 |   private get getText (): string {
43 |     const arr: any = this.component.base[0].val.split('\n')
44 |     if (arr.length) {
45 |       return arr.join('<br/>')
46 |     }
47 |     return this.component.base[0].val
48 |   }
49 | }
50 | </script>
51 | 
52 | <style lang="scss" scoped>
53 | .comp-content {
54 |   background-repeat: no-repeat;
55 | }
56 | .text-box {
57 |   display: block;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/components/common/timeout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="timeout-box">
  7 |       <div
  8 |         v-if="!imgUrl"
  9 |         class="image-placeholder"
 10 |       >
 11 |         <i class="el-icon-time"></i>
 12 |       </div>
 13 |       <div
 14 |         class="timeout-item day"
 15 |         :style="dayStyle"
 16 |       >{{ countTime('day', component.action.config[0]) }}</div>
 17 |       <div
 18 |         class="timeout-item hour"
 19 |         :style="hourStyle"
 20 |       >{{ countTime('hour', component.action.config[1]) }}</div>
 21 |       <div
 22 |         class="timeout-item minute"
 23 |         :style="minuteStyle"
 24 |       >{{ countTime('minute', component.action.config[2]) }}</div>
 25 |       <div
 26 |         class="timeout-item second"
 27 |         :style="secondStyle"
 28 |       >{{ countTime('second', component.action.config[3]) }}</div>
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script lang="ts">
 34 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 35 | 
 36 | @Component({
 37 |   name: 'Timeout'
 38 | })
 39 | export default class Timeout extends Vue {
 40 |   @Prop({ default: null })
 41 |   private component: any
 42 | 
 43 | 
 44 |   private dayStyle: string = this.getTimeStyle(0)
 45 |   private hourStyle: string = this.getTimeStyle(1)
 46 |   private minuteStyle: string = this.getTimeStyle(2)
 47 |   private secondStyle: string = this.getTimeStyle(3)
 48 |   private imgUrl: string = this.component.style[1].val
 49 | 
 50 |   private get getStyle (): string {
 51 |     const ret: Array<string> = []
 52 |     this.component.style.forEach((item: any) => {
 53 |       if (item.attr === 'background-image' && item.val) {
 54 |         ret.push(item.attr + ':url(' + item.val + ')')
 55 |         ret.push('height:' + item.height / 2 + 'px')
 56 |         ret.push('background-size:contain')
 57 |       } else {
 58 |         const unit: string = item.unit || ''
 59 |         item.val && ret.push(item.attr + ':' + item.val + unit)
 60 |       }
 61 |     })
 62 |     return ret.join(';')
 63 |   }
 64 | 
 65 |   @Watch('component', { deep: true })
 66 |   private watchComponent (): void {
 67 |     this.dayStyle = this.getTimeStyle(0)
 68 |     this.hourStyle = this.getTimeStyle(1)
 69 |     this.minuteStyle = this.getTimeStyle(2)
 70 |     this.secondStyle = this.getTimeStyle(3)
 71 |     this.imgUrl = this.component.style[1].val
 72 |   }
 73 | 
 74 |   private getTimeStyle (idx: number): string {
 75 |     const ret: Array<string> = []
 76 |     if (this.component.action.config[idx].show) {
 77 |       ret.push('left:' + this.component.action.config[idx].x + 'px')
 78 |       ret.push('top:' + this.component.action.config[idx].y + 'px')
 79 |       ret.push('width:' + this.component.action.config[idx].w + 'px')
 80 |       ret.push('height:' + this.component.action.config[idx].h + 'px')
 81 |       ret.push('line-height:' + this.component.action.config[idx].h + 'px')
 82 |       ret.push('font-size:' + this.component.action.config[idx].font + 'px')
 83 |       ret.push('font-weight:' + this.component.action.config[idx].weight)
 84 |       ret.push('color:' + this.component.action.config[idx].color)
 85 |       return ret.join(';')
 86 |     } else {
 87 |       return 'display:none;'
 88 |     }
 89 |   }
 90 | 
 91 |   private countTime (key: string, config: any): string | number {
 92 |     const end: string = this.component.style[0].val
 93 |     if (end) {
 94 |       const time = new Date().getTime()
 95 |       const sTime = new Date(end.replace(/-/g, '/')).getTime()
 96 |       const ms: number = sTime - time
 97 |       if (ms < 0) {
 98 |         return '00'
 99 |       } else {
100 |         let day, hour, allHour, minute, allMinute, second, allSecond
101 |         day = Math.floor(ms / 1000 / 60 / 60 / 24)
102 |         day = day < 10 ? '0' + day : day
103 | 
104 |         hour = Math.floor(ms / 1000 / 60 / 60 % 24)
105 |         hour = hour < 10 ? '0' + hour : hour
106 |         allHour = Math.floor(ms / 1000 / 60 / 60)
107 |         allHour = allHour < 10 ? '0' + allHour : allHour
108 | 
109 |         minute = Math.floor(ms / 1000 / 60 % 60)
110 |         minute = minute < 10 ? '0' + minute : minute
111 |         allMinute = Math.floor(ms / 1000 / 60)
112 |         allMinute = allMinute < 10 ? '0' + allMinute : allMinute
113 | 
114 |         second = Math.floor(ms / 1000 % 60)
115 |         second = second < 10 ? '0' + second : second
116 |         allSecond = Math.floor(ms / 1000)
117 |         allSecond = allSecond < 10 ? '0' + allSecond : allSecond
118 | 
119 |         switch (key) {
120 |           case 'day':
121 |             return day
122 |           case 'hour':
123 |             return config.show ? hour : allHour
124 |           case 'minute':
125 |             return config.show ? minute : allMinute
126 |           case 'second':
127 |             return config.show ? second : allSecond
128 |         }
129 |       }
130 |     }
131 |     return '00'
132 |   }
133 | }
134 | </script>
135 | 
136 | <style lang="scss" scoped>
137 | .timeout-box {
138 |   position: relative;
139 | 
140 |   .timeout-item {
141 |     position: absolute;
142 |     text-align: center;
143 |   }
144 | 
145 |   .image-placeholder {
146 |     width: 100%;
147 |     height: 100px;
148 |     line-height: 100px;
149 |     text-align: center;
150 |   }
151 | 
152 |   img {
153 |     display: block;
154 |     margin: 0;
155 |     width: 100%;
156 |     height: auto;
157 |     border: 0;
158 |     -webkit-user-drag: none;
159 |   }
160 | }
161 | </style>
162 | 


--------------------------------------------------------------------------------
/src/components/formItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="ft">
  3 |     <el-form-item
  4 |       class="small"
  5 |       v-if="item.type === 'text'"
  6 |       :label="item.label + '：'"
  7 |     >
  8 |       <el-input
  9 |         v-model="item.val"
 10 |         :maxlength="item.maxLength || 128"
 11 |         :placeholder="item.placeholder ? item.placeholder : item.isNecessary ? '必填' : '非必填'"
 12 |         @blur="item.rules ? inputBlur(item.rules, item) : null"
 13 |       >
 14 |       </el-input>
 15 |     </el-form-item>
 16 |     <el-form-item
 17 |       class="small"
 18 |       v-if="item.type === 'color-picker'"
 19 |       :label="item.label + '：'"
 20 |     >
 21 |       <el-color-picker v-model="item.val"></el-color-picker>
 22 |     </el-form-item>
 23 | 
 24 |     <el-form-item
 25 |       v-if="item.type === 'font'"
 26 |       class="small"
 27 |       :label="item.label + '：'"
 28 |     >
 29 |       <div
 30 |         :class="['font-set', item.val[0] === '600' ? 'checked' : '']"
 31 |         @click="setFont(item, item.attr[0])"
 32 |       >
 33 |         <svg-icon icon-class="blod" />
 34 |       </div>
 35 |       <div
 36 |         :class="['font-set', item.val[1] === 'underline' ? 'checked' : '']"
 37 |         @click="setFont(item, item.attr[1])"
 38 |       >
 39 |         <svg-icon icon-class="underline" />
 40 |       </div>
 41 |       <div
 42 |         :class="['font-set', item.val[2] === 'italic' ? 'checked' : '']"
 43 |         @click="setFont(item, item.attr[2])"
 44 |       >
 45 |         <svg-icon icon-class="italic" />
 46 |       </div>
 47 |       <div
 48 |         :class="['font-set', item.val[3] === 'left' ? 'checked' : '']"
 49 |         @click="setAlign(item, 'left')"
 50 |       >
 51 |         <svg-icon icon-class="textLeft" />
 52 |       </div>
 53 |       <div
 54 |         :class="['font-set', item.val[3] === 'center' ? 'checked' : '']"
 55 |         @click="setAlign(item, 'center')"
 56 |       >
 57 |         <svg-icon icon-class="textCenter" />
 58 |       </div>
 59 |       <div
 60 |         :class="['font-set', item.val[3] === 'right' ? 'checked' : '']"
 61 |         @click="setAlign(item, 'right')"
 62 |       >
 63 |         <svg-icon icon-class="textRight" />
 64 |       </div>
 65 |     </el-form-item>
 66 |     <el-form-item
 67 |       class="small"
 68 |       v-if="item.type === 'textarea'"
 69 |       :label="item.label + '：'"
 70 |     >
 71 |       <el-input
 72 |         type="textarea"
 73 |         v-model="item.val"
 74 |         :rows="4"
 75 |         :placeholder="item.placeholder"
 76 |       ></el-input>
 77 |     </el-form-item>
 78 |     <el-form-item
 79 |       v-if="item.type === 'input-number'"
 80 |       class="small"
 81 |       :label="item.label + '：'"
 82 |     >
 83 |       <el-input-number
 84 |         v-model="item.val"
 85 |         :min="item.min"
 86 |         :max="item.max"
 87 |         :step="item.step"
 88 |       ></el-input-number>
 89 |     </el-form-item>
 90 |     <el-form-item
 91 |       v-if="item.type === 'slider'"
 92 |       class="small small_slider"
 93 |       :label="item.label + '：'"
 94 |     >
 95 |       <el-slider
 96 |         v-model="item.val"
 97 |         :min="item.min"
 98 |         :max="item.max"
 99 |         :step="item.step"
100 |         :marks="{ min: item.min, max: item.max }"
101 |       ></el-slider>
102 |     </el-form-item>
103 |     <el-form-item
104 |       class="small"
105 |       v-if="item.type === 'select'"
106 |       :label="item.label + '：'"
107 |     >
108 |       <el-select
109 |         v-model="item.val"
110 |         placeholder="默认选项"
111 |       >
112 |         <el-option
113 |           v-for="opt in item.options"
114 |           :key="opt.val"
115 |           :label="opt.name"
116 |           :value="opt.val"
117 |         ></el-option>
118 |       </el-select>
119 |     </el-form-item>
120 |     <el-form-item
121 |       v-if="item.type === 'radio'"
122 |       class="small"
123 |       :label="item.label + '：'"
124 |     >
125 |       <template v-for="(opt, idx) in item.options">
126 |         <el-radio
127 |           v-model="item.val"
128 |           :label="opt.val"
129 |           :key="idx"
130 |         >{{ opt.name }}</el-radio>
131 |       </template>
132 |     </el-form-item>
133 |     <el-form-item
134 |       v-if="item.type === 'datetime'"
135 |       class="small"
136 |       :label="item.label + '：'"
137 |     >
138 |       <el-date-picker
139 |         type="datetime"
140 |         v-model="item.val"
141 |         value-format="yyyy-MM-dd HH:mm:ss"
142 |         placeholder="选择日期"
143 |       ></el-date-picker>
144 |     </el-form-item>
145 |     <upload
146 |       v-if="item.type === 'upload'"
147 |       :id="index"
148 |       :label="item.label"
149 |       :item="item"
150 |       v-on:uploadSuccess="uploadSuccess"
151 |     ></upload>
152 |     <el-form-item
153 |       v-if="item.type == 'desc'"
154 |       class="small"
155 |       :label="item.label + '：'"
156 |     >
157 |       <span
158 |         class="form-item-desc"
159 |         v-html="item.val"
160 |       ></span>
161 |     </el-form-item>
162 |   </div>
163 | </template>
164 | 
165 | <script lang="ts">
166 | import { Component, Prop, Vue } from 'vue-property-decorator'
167 | 
168 | import upload from '@/components/upload.vue'
169 | 
170 | @Component({
171 |   name: 'FormItem',
172 |   components: {
173 |     upload
174 |   }
175 | })
176 | export default class FormItem extends Vue {
177 |   @Prop({ default: null })
178 |   private item: any
179 | 
180 |   @Prop({ default: null })
181 |   private index!: number
182 | 
183 |   private setFont (item: any, attr: string): void {
184 |     if (attr === 'font-weight') {
185 |       this.$set(item.val, 0, item.val[0] === '600' ? '400' : '600')
186 |     }
187 |     if (attr === 'text-decoration') {
188 |       this.$set(item.val, 1, item.val[1] === 'underline' ? 'none' : 'underline')
189 |     }
190 |     if (attr === 'font-style') {
191 |       this.$set(item.val, 2, item.val[2] === 'italic' ? 'inherit' : 'italic')
192 |     }
193 |   }
194 | 
195 |   private setAlign (item: any, align: any): void {
196 |     this.$set(item.val, 3, align)
197 |   }
198 | 
199 |   private inputBlur (rule: any, item: any): any {
200 |     const reg = new RegExp(rule.regex)
201 |     if (!item.val.match(reg)) {
202 |       this.$alert(rule.tips, '提示')
203 |       item.val = ''
204 |       return false
205 |     }
206 |   }
207 | 
208 |   private uploadSuccess (): void {
209 |     this.$message.success('upload Success')
210 |   }
211 | }
212 | </script>
213 | 
214 | <style lang="scss" scoped>
215 | span.form-item-desc {
216 |   font-size: 12px;
217 |   color: #666;
218 |   line-height: 1.2;
219 | }
220 | </style>
221 | 
222 | <style lang="scss">
223 | #ft {
224 |   .small_slider {
225 |     .el-form-item__label {
226 |       line-height: 38px !important;
227 |     }
228 | 
229 |     .el-form-item__content {
230 |       padding: 0 10px;
231 |     }
232 |   }
233 | }
234 | </style>
235 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
 1 | import BaseText from '@/components/common/text.vue'
 2 | import BaseImage from '@/components/common/image.vue'
 3 | import BaseForm from '@/components/common/form.vue'
 4 | import PageTitle from '@/components/common/pageTitle.vue'
 5 | import PageParagraph from '@/components/common/pageParagraph.vue'
 6 | import PageIntro from '@/components/common/pageIntro.vue'
 7 | import Timeout from '@/components/common/timeout.vue'
 8 | import FloorTitle from '@/components/common/floorTitle.vue'
 9 | import PageFaq from '@/components/common/pageFaq.vue'
10 | 
11 | import BottomMenu from '@/components/navLink/bottomMenu.vue'
12 | import GridMenu from '@/components/navLink/gridMenu.vue'
13 | import FloorMenu from '@/components/navLink/floorMenu.vue'
14 | 
15 | import LayoutRepeat from '@/components/lay/layoutRepeat.vue'
16 | import LayoutLeft from '@/components/lay/layoutLeft.vue'
17 | import LayoutRight from '@/components/lay/layoutRight.vue'
18 | 
19 | import GoodsSearch from '@/components/shopping/goodsSearch.vue'
20 | import Coupon from '@/components/shopping/coupon.vue'
21 | import Goods from '@/components/shopping/goods.vue'
22 | 
23 | import SwiperBanner from '@/components/swiper/swiperBanner.vue'
24 | import ScrollLeft from '@/components/swiper/scrollLeft.vue'
25 | 
26 | import HorizontalList from '@/components/list/horizontalList.vue'
27 | import VerticalList from '@/components/list/verticalList.vue'
28 | 
29 | import NewsMarquee from '@/components/animate/newsMarquee.vue'
30 | 
31 | export default {
32 |   install (Vue: any) {
33 |     Vue.component('BaseText', BaseText)
34 |     Vue.component('BaseImage', BaseImage)
35 |     Vue.component('BaseForm', BaseForm)
36 |     Vue.component('PageTitle', PageTitle)
37 |     Vue.component('PageParagraph', PageParagraph)
38 |     Vue.component('PageIntro', PageIntro)
39 |     Vue.component('Timeout', Timeout)
40 |     Vue.component('FloorTitle', FloorTitle)
41 |     Vue.component('PageFaq', PageFaq)
42 | 
43 |     Vue.component('BottomMenu', BottomMenu)
44 |     Vue.component('GridMenu', GridMenu)
45 |     Vue.component('FloorMenu', FloorMenu)
46 | 
47 |     Vue.component('LayoutRepeat', LayoutRepeat)
48 |     Vue.component('LayoutLeft', LayoutLeft)
49 |     Vue.component('LayoutRight', LayoutRight)
50 | 
51 |     Vue.component('GoodsSearch', GoodsSearch)
52 |     Vue.component('Coupon', Coupon)
53 |     Vue.component('Goods', Goods)
54 | 
55 |     Vue.component('SwiperBanner', SwiperBanner)
56 |     Vue.component('ScrollLeft', ScrollLeft)
57 | 
58 |     Vue.component('HorizontalList', HorizontalList)
59 |     Vue.component('VerticalList', VerticalList)
60 | 
61 |     Vue.component('NewsMarquee', NewsMarquee)
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/itemOption/bannerItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="slides && slides.length">
  4 |       <div
  5 |         v-for="(slide, index) in slides"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="slide"
 13 |           @uploadSuccess="uploadSuccess"
 14 |         >
 15 |         </upload>
 16 |         <template v-if="slide.click">
 17 |           <el-form-item
 18 |             class="small"
 19 |             label="跳转到："
 20 |           >
 21 |             <span style="word-break: break-all;">{{ slide.click.href }}</span>
 22 |           </el-form-item>
 23 |         </template>
 24 |         <el-form-item class="small" label="点击配置：">
 25 |           <el-button
 26 |             icon="el-icon-edit"
 27 |             round
 28 |             @click="showClick(slide, index)"
 29 |           >配置跳转</el-button>
 30 |         </el-form-item>
 31 |         <div class="list-item-opt">
 32 |           <a
 33 |             v-if="index !== 0"
 34 |             href="javascript:;"
 35 |             @click="upBanner(index)"
 36 |           >
 37 |             <i class="el-icon-arrow-up"></i>
 38 |           </a>
 39 |           <a
 40 |             v-if="index !== slides.length - 1"
 41 |             href="javascript:;"
 42 |             @click="downBanner(index)"
 43 |           >
 44 |             <i class="el-icon-arrow-down"></i>
 45 |           </a>
 46 |           <a
 47 |             v-if="index > 0"
 48 |             href="javascript:;"
 49 |             @click="delBanner(index)"
 50 |           >
 51 |             <i class="el-icon-delete"></i>
 52 |           </a>
 53 |         </div>
 54 |       </div>
 55 |     </template>
 56 |     <el-button
 57 |       icon="el-icon-plus"
 58 |       style="margin-top:15px;"
 59 |       round
 60 |       @click="addBanner"
 61 |     >添加图片项</el-button>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script lang="ts">
 66 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 67 | 
 68 | import util from '@/utils/tools'
 69 | import compConfig from '@/config/componentConfig'
 70 | import upload from '@/components/upload.vue'
 71 | 
 72 | @Component({
 73 |   name: 'BannerItem',
 74 |   components: {
 75 |     upload
 76 |   }
 77 | })
 78 | export default class BannerItem extends Vue {
 79 |   @Prop({ default: null })
 80 |   private banners?: Array<any>
 81 | 
 82 |   $evt: any
 83 |   private defaultConf: any = util.copyObj(compConfig['swiper-banner'])
 84 |   private slides: Array<any> = this.banners || []
 85 | 
 86 |   @Watch('banners', { deep: true })
 87 |   private watchBanners (val: Array<any>): void {
 88 |     this.slides = val
 89 |   }
 90 | 
 91 |   private showClick (banner: any, idx: number): void {
 92 |     this.$evt.$emit('click:show', idx, ['outside', 'code'])
 93 |   }
 94 | 
 95 |   private upBanner (idx: number): void {
 96 |     const tmp: any = util.copyObj(this.slides[idx])
 97 |     this.slides.splice(idx, 1)
 98 |     this.slides.splice(idx - 1, 0, tmp)
 99 |   }
100 | 
101 |   private downBanner (idx: number): void {
102 |     const tmp: any = util.copyObj(this.slides[idx])
103 |     this.slides.splice(idx, 1)
104 |     this.slides.splice(idx + 1, 0, tmp)
105 |   }
106 | 
107 |   private delBanner (idx: number): void {
108 |     this.slides.splice(idx, 1)
109 |   }
110 | 
111 |   private addBanner (): void {
112 |     if (this.slides.length < 10) {
113 |       this.slides.push(util.copyObj(this.defaultConf.action.config[0]))
114 |     } else {
115 |       this.$alert('最多添加10个图片项！')
116 |     }
117 |   }
118 | 
119 |   private uploadSuccess (): void {
120 |     this.$message.success('upload Success')
121 |   }
122 | }
123 | </script>
124 | 


--------------------------------------------------------------------------------
/src/components/itemOption/bottomMenuItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="menus && menus.length">
  4 |       <div
  5 |         v-for="(menu, index) in menus"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="menu"
 13 |           v-on:uploadSuccess="uploadSuccess"
 14 |         ></upload>
 15 |         <template v-if="menu.click">
 16 |           <el-form-item
 17 |             class="small"
 18 |             label="跳转到："
 19 |           >
 20 |             <span style="word-break: break-all;">{{ menu.click.href }}</span>
 21 |           </el-form-item>
 22 |         </template>
 23 |         <el-form-item
 24 |           class="small"
 25 |           label="链接文字："
 26 |         >
 27 |           <el-input
 28 |             v-model="menu.titleName"
 29 |             size="mini"
 30 |           ></el-input>
 31 |         </el-form-item>
 32 |         <el-form-item
 33 |           class="small"
 34 |           label="点击配置："
 35 |         >
 36 |           <el-button
 37 |             icon="el-icon-edit"
 38 |             round
 39 |             @click="showClick(menu, index)"
 40 |           >配置跳转</el-button>
 41 |         </el-form-item>
 42 |         <div class="list-item-opt">
 43 |           <a
 44 |             v-if="index !== 0"
 45 |             href="javascript:;"
 46 |             @click="upItem(index)"
 47 |           >
 48 |             <i class="el-icon-arrow-up"></i>
 49 |           </a>
 50 |           <a
 51 |             v-if="index !== menus.length - 1"
 52 |             href="javascript:;"
 53 |             @click="downItem(index)"
 54 |           >
 55 |             <i class="el-icon-arrow-down"></i>
 56 |           </a>
 57 |           <a
 58 |             v-if="index > 0"
 59 |             href="javascript:;"
 60 |             @click="delItem(index)"
 61 |           >
 62 |             <i class="el-icon-delete"></i>
 63 |           </a>
 64 |         </div>
 65 |       </div>
 66 |     </template>
 67 |     <el-button
 68 |       icon="el-icon-plus"
 69 |       style="margin-top:15px;"
 70 |       round
 71 |       @click="addItem"
 72 |     >添加导航项</el-button>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script lang="ts">
 77 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 78 | 
 79 | import util from '@/utils/tools'
 80 | import compConfig from '@/config/componentConfig.ts'
 81 | import upload from '@/components/upload.vue'
 82 | 
 83 | @Component({
 84 |   name: 'BottomMenuItem',
 85 |   components: {
 86 |     upload
 87 |   }
 88 | })
 89 | export default class BottomMenuItem extends Vue {
 90 |   @Prop({ default: null })
 91 |   private items?: Array<any>
 92 | 
 93 |   $evt: any
 94 |   private defaultConf: any = util.copyObj(compConfig['bottom-menu'])
 95 |   private menus: Array<any> = this.items || []
 96 | 
 97 |   @Watch('items', { deep: true })
 98 |   private watchItems (val: Array<any>): void {
 99 |     this.menus = val
100 |   }
101 | 
102 |   private showClick (item: any, idx: number): void {
103 |     this.$evt.$emit('click:show', idx, ['outside'])
104 |   }
105 | 
106 |   private upItem (idx: number): void {
107 |     const tmp: any = util.copyObj(this.menus[idx])
108 |     this.menus.splice(idx, 1)
109 |     this.menus.splice(idx - 1, 0, tmp)
110 |   }
111 | 
112 |   private downItem (idx: number): void {
113 |     const tmp: any = util.copyObj(this.menus[idx])
114 |     this.menus.splice(idx, 1)
115 |     this.menus.splice(idx + 1, 0, tmp)
116 |   }
117 | 
118 |   private delItem (idx: number): void {
119 |     this.menus.splice(idx, 1)
120 |   }
121 | 
122 |   private addItem (): void {
123 |     if (this.menus.length < 10) {
124 |       this.menus.push(util.copyObj(this.defaultConf.action.config[0]))
125 |     } else {
126 |       this.$alert('最多添加5个导航项！')
127 |     }
128 |   }
129 | 
130 |   private uploadSuccess (): void {
131 |     this.$message.success('upload Success')
132 |   }
133 | }
134 | </script>
135 | 


--------------------------------------------------------------------------------
/src/components/itemOption/couponItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <template v-if="item.click">
 15 |           <el-form-item
 16 |             class="small"
 17 |             label="跳转到："
 18 |           >
 19 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
 20 |           </el-form-item>
 21 |         </template>
 22 |         <el-form-item
 23 |           class="small"
 24 |           label="点击配置："
 25 |         >
 26 |           <el-button
 27 |             icon="el-icon-edit"
 28 |             round
 29 |             @click="showClick(item, index)"
 30 |           >配置跳转</el-button>
 31 |         </el-form-item>
 32 |         <div class="list-item-opt">
 33 |           <a
 34 |             v-if="index !== 0"
 35 |             href="javascript:;"
 36 |             @click="upItem(index)"
 37 |           >
 38 |             <i class="el-icon-arrow-up"></i>
 39 |           </a>
 40 |           <a
 41 |             v-if="index !== items.length - 1"
 42 |             href="javascript:;"
 43 |             @click="downItem(index)"
 44 |           >
 45 |             <i class="el-icon-arrow-down"></i>
 46 |           </a>
 47 |           <a
 48 |             v-if="index > 0"
 49 |             href="javascript:;"
 50 |             @click="delItem(index)"
 51 |           >
 52 |             <i class="el-icon-delete"></i>
 53 |           </a>
 54 |         </div>
 55 |       </div>
 56 |     </template>
 57 |     <el-button
 58 |       icon="el-icon-plus"
 59 |       style="margin-top:15px;"
 60 |       round
 61 |       @click="addItem"
 62 |     >添加点击项</el-button>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script lang="ts">
 67 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 68 | 
 69 | import util from '@/utils/tools'
 70 | import compConfig from '@/config/componentConfig'
 71 | import upload from '@/components/upload.vue'
 72 | 
 73 | @Component({
 74 |   name: 'CouponItem',
 75 |   components: {
 76 |     upload
 77 |   }
 78 | })
 79 | export default class CouponItem extends Vue {
 80 |   @Prop({ default: null })
 81 |   private coupons?: Array<any>
 82 | 
 83 |   $evt: any
 84 |   private defaultConf: any = util.copyObj(compConfig['coupon'])
 85 |   private items: Array<any> = this.coupons || []
 86 | 
 87 |   @Watch('coupons', { deep: true })
 88 |   private watchCoupons (val: Array<any>): void {
 89 |     this.items = val
 90 |   }
 91 | 
 92 |   private showClick (coupon: any, idx: number): void {
 93 |     this.$evt.$emit('click:show', idx, ['outside'])
 94 |   }
 95 | 
 96 |   private upItem (idx: number): void {
 97 |     const tmp: any = util.copyObj(this.items[idx])
 98 |     this.items.splice(idx, 1)
 99 |     this.items.splice(idx - 1, 0, tmp)
100 |   }
101 | 
102 |   private downItem (idx: number): void {
103 |     const tmp: any = util.copyObj(this.items[idx])
104 |     this.items.splice(idx, 1)
105 |     this.items.splice(idx + 1, 0, tmp)
106 |   }
107 | 
108 |   private delItem (idx: number): void {
109 |     this.items.splice(idx, 1)
110 |   }
111 | 
112 |   private addItem (): void {
113 |     if (this.items.length < 10) {
114 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
115 |     } else {
116 |       this.$alert('最多添加10个点击项！')
117 |     }
118 |   }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/components/itemOption/floorMenuItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <el-form-item
 10 |           class="small"
 11 |           label="导航文案："
 12 |         >
 13 |           <el-input
 14 |             v-model="item.text"
 15 |             :maxlength="500"
 16 |             placeholder="跳转项文案"
 17 |           ></el-input>
 18 |         </el-form-item>
 19 |         <template v-if="item.click">
 20 |           <el-form-item
 21 |             class="small"
 22 |             label="跳转到："
 23 |           >
 24 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
 25 |           </el-form-item>
 26 |         </template>
 27 |         <el-form-item
 28 |           class="small"
 29 |           label="点击配置："
 30 |         >
 31 |           <el-button
 32 |             icon="el-icon-edit"
 33 |             round
 34 |             @click="showClick(item, index)"
 35 |           >配置跳转</el-button>
 36 |         </el-form-item>
 37 |         <div class="list-item-opt">
 38 |           <a
 39 |             v-if="index !== 0"
 40 |             href="javascript:;"
 41 |             @click="upItem(index)"
 42 |           >
 43 |             <i class="el-icon-arrow-up"></i>
 44 |           </a>
 45 |           <a
 46 |             v-if="index !== items.length - 1"
 47 |             href="javascript:;"
 48 |             @click="downItem(index)"
 49 |           >
 50 |             <i class="el-icon-arrow-down"></i>
 51 |           </a>
 52 |           <a
 53 |             v-if="index > 0"
 54 |             href="javascript:;"
 55 |             @click="delItem(index)"
 56 |           >
 57 |             <i class="el-icon-delete"></i>
 58 |           </a>
 59 |         </div>
 60 |       </div>
 61 |     </template>
 62 |     <el-button
 63 |       icon="el-icon-plus"
 64 |       style="margin-top:15px;"
 65 |       round
 66 |       @click="addItem"
 67 |     >添加跳转项</el-button>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script lang="ts">
 72 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 73 | 
 74 | import util from '@/utils/tools'
 75 | import compConfig from '@/config/componentConfig'
 76 | 
 77 | @Component({
 78 |   name: 'FloorMenuItem'
 79 | })
 80 | export default class FloorMenuItem extends Vue {
 81 |   @Prop({ default: null })
 82 |   private menus?: Array<any>
 83 | 
 84 |   $evt: any
 85 |   private defaultConf: any = util.copyObj(compConfig['floor-menu'])
 86 |   private items: Array<any> = this.menus || []
 87 | 
 88 |   @Watch('menus', { deep: true })
 89 |   private watchMenus (val: Array<any>): void {
 90 |     this.items = val
 91 |   }
 92 | 
 93 |   private showClick (menu: any, idx: number): void {
 94 |     this.$evt.$emit('click:show', idx, ['page'])
 95 |   }
 96 | 
 97 |   private upItem (idx: number): void {
 98 |     const tmp: any = util.copyObj(this.items[idx])
 99 |     this.items.splice(idx, 1)
100 |     this.items.splice(idx - 1, 0, tmp)
101 |   }
102 | 
103 |   private downItem (idx: number): void {
104 |     const tmp: any = util.copyObj(this.items[idx])
105 |     this.items.splice(idx, 1)
106 |     this.items.splice(idx + 1, 0, tmp)
107 |   }
108 | 
109 |   private delItem (idx: number): void {
110 |     this.items.splice(idx, 1)
111 |   }
112 | 
113 |   private addItem (): void {
114 |     if (this.items.length < 18) {
115 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
116 |     } else {
117 |       this.$alert('最多添加18个导航项！')
118 |     }
119 |   }
120 | }
121 | </script>
122 | 


--------------------------------------------------------------------------------
/src/components/itemOption/goodsItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="list && list.length">
  4 |       <div
  5 |         v-for="(item, index) in list"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <el-form-item
 15 |           class="small"
 16 |           label="商品名："
 17 |         >
 18 |           <el-input
 19 |             v-model="item.name"
 20 |             :maxlength="128"
 21 |             placeholder="必填"
 22 |           ></el-input>
 23 |         </el-form-item>
 24 |         <el-form-item
 25 |           class="small"
 26 |           label="商品价格："
 27 |         >
 28 |           <el-input
 29 |             v-model="item.price"
 30 |             :maxlength="128"
 31 |             placeholder="必填"
 32 |           ></el-input>
 33 |         </el-form-item>
 34 |         <div class="list-item-opt">
 35 |           <a
 36 |             v-if="index !== 0"
 37 |             href="javascript:;"
 38 |             @click="upItem(index)"
 39 |           >
 40 |             <i class="el-icon-arrow-up"></i>
 41 |           </a>
 42 |           <a
 43 |             v-if="index !== list.length - 1"
 44 |             href="javascript:;"
 45 |             @click="downItem(index)"
 46 |           >
 47 |             <i class="el-icon-arrow-down"></i>
 48 |           </a>
 49 |           <a
 50 |             v-if="index > 0"
 51 |             href="javascript:;"
 52 |             @click="delItem(index)"
 53 |           >
 54 |             <i class="el-icon-delete"></i>
 55 |           </a>
 56 |         </div>
 57 |       </div>
 58 |     </template>
 59 |     <el-button
 60 |       icon="el-icon-plus"
 61 |       style="margin-top:15px;"
 62 |       round
 63 |       @click="addItem"
 64 |     >添加列表项</el-button>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script lang="ts">
 69 | import { Component, Prop, Vue } from 'vue-property-decorator'
 70 | 
 71 | import util from '@/utils/tools'
 72 | import compConfig from '@/config/componentConfig'
 73 | import upload from '@/components/upload.vue'
 74 | 
 75 | @Component({
 76 |   name: 'GoodsItem',
 77 |   components: {
 78 |     upload
 79 |   }
 80 | })
 81 | export default class GoodsItem extends Vue {
 82 |   @Prop({ default: null })
 83 |   private items?: Array<any>
 84 | 
 85 |   private defaultConf:any = util.copyObj(compConfig['goods'])
 86 |   private list: Array<any> = this.items || []
 87 | 
 88 |   private upItem (idx: number): void {
 89 |     const tmp: any = util.copyObj(this.list[idx])
 90 |     this.list.splice(idx, 1)
 91 |     this.list.splice(idx - 1, 0, tmp)
 92 |   }
 93 | 
 94 |   private downItem (idx: number): void {
 95 |     const tmp: any = util.copyObj(this.list[idx])
 96 |     this.list.splice(idx, 1)
 97 |     this.list.splice(idx + 1, 0, tmp)
 98 |   }
 99 | 
100 |   private delItem (idx: number): void {
101 |     this.list.splice(idx, 1)
102 |   }
103 | 
104 |   private addItem (): void {
105 |     if (this.list.length < 20) {
106 |       this.list.push(util.copyObj(this.defaultConf.action.config[0]))
107 |     } else {
108 |       this.$alert('最多添加20个列表项！')
109 |     }
110 |   }
111 | }
112 | </script>
113 | 


--------------------------------------------------------------------------------
/src/components/itemOption/gridMenuItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <el-form-item
 15 |           class="small"
 16 |           label="文案："
 17 |         >
 18 |           <el-input
 19 |             v-model="item.text"
 20 |             :maxlength="12"
 21 |             placeholder="导航文案"
 22 |           ></el-input>
 23 |         </el-form-item>
 24 |         <template v-if="item.click">
 25 |           <el-form-item
 26 |             class="small"
 27 |             label="跳转到："
 28 |           >
 29 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
 30 |           </el-form-item>
 31 |         </template>
 32 |         <el-form-item
 33 |           class="small"
 34 |           label="点击配置："
 35 |         >
 36 |           <el-button
 37 |             icon="el-icon-edit"
 38 |             round
 39 |             @click="showClick(item, index)"
 40 |           >配置跳转</el-button>
 41 |         </el-form-item>
 42 |         <div class="list-item-opt">
 43 |           <a
 44 |             v-if="index !== 0"
 45 |             href="javascript:;"
 46 |             @click="upItem(index)"
 47 |           >
 48 |             <i class="el-icon-arrow-up"></i>
 49 |           </a>
 50 |           <a
 51 |             v-if="index !== items.length - 1"
 52 |             href="javascript:;"
 53 |             @click="downItem(index)"
 54 |           >
 55 |             <i class="el-icon-arrow-down"></i>
 56 |           </a>
 57 |           <a
 58 |             v-if="index > 0"
 59 |             href="javascript:;"
 60 |             @click="delItem(index)"
 61 |           >
 62 |             <i class="el-icon-delete"></i>
 63 |           </a>
 64 |         </div>
 65 |       </div>
 66 |     </template>
 67 |     <el-button
 68 |       icon="el-icon-plus"
 69 |       style="margin-top:15px;"
 70 |       round
 71 |       @click="addItem"
 72 |     >添加点击项</el-button>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script lang="ts">
 77 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 78 | 
 79 | import util from '@/utils/tools'
 80 | import compConfig from '@/config/componentConfig'
 81 | import upload from '@/components/upload.vue'
 82 | 
 83 | @Component({
 84 |   name: 'GridMenuItem',
 85 |   components: {
 86 |     upload
 87 |   }
 88 | })
 89 | export default class GridMenuItem extends Vue {
 90 |   @Prop({ default: null })
 91 |   private grids?: Array<any>
 92 | 
 93 |   $evt: any
 94 |   private defaultConf: any = util.copyObj(compConfig['grid-menu'])
 95 |   private items: Array<any> = this.grids || []
 96 | 
 97 |   @Watch('grids', { deep: true })
 98 |   private watchGrids (val: Array<any>): void {
 99 |     this.items = val
100 |   }
101 | 
102 |   private showClick (menu: any, idx: number): void {
103 |     this.$evt.$emit('click:show', idx, ['outside'])
104 |   }
105 | 
106 |   private upItem (idx: number): void {
107 |     const tmp: any = util.copyObj(this.items[idx])
108 |     this.items.splice(idx, 1)
109 |     this.items.splice(idx - 1, 0, tmp)
110 |   }
111 | 
112 |   private downItem (idx: number): void {
113 |     const tmp: any = util.copyObj(this.items[idx])
114 |     this.items.splice(idx, 1)
115 |     this.items.splice(idx + 1, 0, tmp)
116 |   }
117 | 
118 |   private delItem (idx: number): void {
119 |     this.items.splice(idx, 1)
120 |   }
121 | 
122 |   private addItem (): void {
123 |     if (this.items.length < 10) {
124 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
125 |     } else {
126 |       this.$alert('最多添加10个点击项！')
127 |     }
128 |   }
129 | }
130 | </script>
131 | 


--------------------------------------------------------------------------------
/src/components/itemOption/horizontalItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="list && list.length">
  4 |       <div
  5 |         v-for="(item, index) in list"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <el-form-item
 15 |           class="small"
 16 |           label="标题："
 17 |         >
 18 |           <el-input
 19 |             v-model="item.title"
 20 |             :maxlength="128"
 21 |             placeholder="必填"
 22 |           ></el-input>
 23 |         </el-form-item>
 24 |         <el-form-item
 25 |           class="small"
 26 |           label="描述："
 27 |         >
 28 |           <el-input
 29 |             v-model="item.desc"
 30 |             :maxlength="128"
 31 |             placeholder="必填"
 32 |           ></el-input>
 33 |         </el-form-item>
 34 |         <div class="list-item-opt">
 35 |           <a
 36 |             v-if="index !== 0"
 37 |             href="javascript:;"
 38 |             @click="upItem(index)"
 39 |           >
 40 |             <i class="el-icon-arrow-up"></i>
 41 |           </a>
 42 |           <a
 43 |             v-if="index !== list.length - 1"
 44 |             href="javascript:;"
 45 |             @click="downItem(index)"
 46 |           >
 47 |             <i class="el-icon-arrow-down"></i>
 48 |           </a>
 49 |           <a
 50 |             v-if="index > 0"
 51 |             href="javascript:;"
 52 |             @click="delItem(index)"
 53 |           >
 54 |             <i class="el-icon-delete"></i>
 55 |           </a>
 56 |         </div>
 57 |       </div>
 58 |     </template>
 59 |     <el-button
 60 |       icon="el-icon-plus"
 61 |       style="margin-top:15px;"
 62 |       round @click="addItem"
 63 |     >添加列表项</el-button>
 64 |   </div>
 65 | </template>
 66 | 
 67 | <script lang="ts">
 68 | import { Component, Prop, Vue } from 'vue-property-decorator'
 69 | 
 70 | import util from '@/utils/tools'
 71 | import upload from '@/components/upload.vue'
 72 | import compConfig from '@/config/componentConfig'
 73 | 
 74 | @Component({
 75 |   name: 'HorizontalItem',
 76 |   components: {
 77 |     upload
 78 |   }
 79 | })
 80 | export default class HorizontalItem extends Vue {
 81 |   @Prop({ default: null })
 82 |   private items?: Array<any>
 83 | 
 84 |   private defaultConf: any = util.copyObj(compConfig['horizontal-list'])
 85 |   private list: Array<any> = this.items || []
 86 | 
 87 |   private upItem (idx: number): void {
 88 |     const tmp: any = util.copyObj(this.list[idx])
 89 |     this.list.splice(idx, 1)
 90 |     this.list.splice(idx - 1, 0, tmp)
 91 |   }
 92 | 
 93 |   private downItem (idx: number): void {
 94 |     const tmp: any = util.copyObj(this.list[idx])
 95 |     this.list.splice(idx, 1)
 96 |     this.list.splice(idx + 1, 0, tmp)
 97 |   }
 98 | 
 99 |   private delItem (idx: number): void {
100 |     this.list.splice(idx, 1)
101 |   }
102 | 
103 |   private addItem (): void {
104 |     if (this.list.length < 20) {
105 |       this.list.push(util.copyObj(this.defaultConf.action.config[0]))
106 |     } else {
107 |       this.$alert('最多添加20个列表项！')
108 |     }
109 |   }
110 | }
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/components/itemOption/inputItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="inputs && inputs.length">
  4 |       <div
  5 |         v-for="(input, index) in inputs"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <el-form-item
 10 |           class="small"
 11 |           label="字段描述："
 12 |         >
 13 |           <el-input
 14 |             v-model="input.desc"
 15 |             :maxlength="8"
 16 |             placeholder="label名称"
 17 |           ></el-input>
 18 |         </el-form-item>
 19 |         <el-form-item
 20 |           class="small"
 21 |           label="字段名称："
 22 |         >
 23 |           <el-input
 24 |             v-model="input.name"
 25 |             :maxlength="128"
 26 |             placeholder="接口对应的参数名"
 27 |           ></el-input>
 28 |         </el-form-item>
 29 |         <el-form-item
 30 |           class="small"
 31 |           label="表单类型："
 32 |         >
 33 |           <el-select
 34 |             v-model="input.type"
 35 |             placeholder="默认选项"
 36 |           >
 37 |             <el-option
 38 |               v-for="opt in inputTypes"
 39 |               :key="opt.val"
 40 |               :label="opt.name"
 41 |               :value="opt.val"
 42 |             ></el-option>
 43 |           </el-select>
 44 |         </el-form-item>
 45 |         <el-form-item
 46 |           class="small"
 47 |           label="是否必填："
 48 |         >
 49 |           <el-radio
 50 |             v-model="input.isNecessary"
 51 |             :label="1"
 52 |           >是</el-radio>
 53 |           <el-radio
 54 |             v-model="input.isNecessary"
 55 |             :label="0"
 56 |           >否</el-radio>
 57 |         </el-form-item>
 58 |         <el-form-item
 59 |           class="small"
 60 |           label="为空提示："
 61 |         >
 62 |           <el-input
 63 |             v-model="input.placeholder"
 64 |             :maxlength="128"
 65 |             placeholder="为空提示文案"
 66 |           ></el-input>
 67 |         </el-form-item>
 68 |         <div class="list-item-opt">
 69 |           <a
 70 |             v-if="index !== 0"
 71 |             href="javascript:;"
 72 |             @click="upInput(index)"
 73 |           >
 74 |             <i class="el-icon-arrow-up"></i>
 75 |           </a>
 76 |           <a
 77 |             v-if="index !== inputs.length - 1"
 78 |             href="javascript:;"
 79 |             @click="downInput(index)"
 80 |           >
 81 |             <i class="el-icon-arrow-down"></i>
 82 |           </a>
 83 |           <a
 84 |             v-if="index > 0"
 85 |             href="javascript:;"
 86 |             @click="delInput(index)"
 87 |           >
 88 |             <i class="el-icon-delete"></i>
 89 |           </a>
 90 |         </div>
 91 |       </div>
 92 |     </template>
 93 |     <el-button
 94 |       icon="el-icon-plus"
 95 |       style="margin-top:15px;"
 96 |       round
 97 |       @click="addInput"
 98 |     >添加表单项</el-button>
 99 |   </div>
100 | </template>
101 | 
102 | <script lang="ts">
103 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
104 | 
105 | import util from '@/utils/tools'
106 | import compConfig from '@/config/componentConfig'
107 | 
108 | interface IInputType {
109 |   name: string,
110 |   val: string
111 | }
112 | 
113 | @Component({
114 |   name: 'InputItem'
115 | })
116 | export default class InputItem extends Vue {
117 |   @Prop({ default: null })
118 |   private forms?: Array<any>
119 | 
120 |   private inputs: Array<any> = this.forms || []
121 |   private defaultConf: any = util.copyObj(compConfig['form'])
122 |   private inputTypes: Array<IInputType> = [
123 |     {
124 |       name: '文本',
125 |       val: 'text'
126 |     }, {
127 |       name: '数字',
128 |       val: 'number'
129 |     }, {
130 |       name: '日期选择',
131 |       val: 'date'
132 |     }, {
133 |       name: '下拉选择',
134 |       val: 'select'
135 |     }, {
136 |       name: 'radio单选',
137 |       val: 'radio'
138 |     }, {
139 |       name: 'checkbox多选',
140 |       val: 'checkbox'
141 |     }
142 |   ]
143 | 
144 |   private upInput (idx: number): void {
145 |     const tmp: any = util.copyObj(this.inputs[idx])
146 |     this.inputs.splice(idx, 1)
147 |     this.inputs.splice(idx - 1, 0, tmp)
148 |   }
149 | 
150 |   private downInput (idx: number): void {
151 |     const tmp: any = util.copyObj(this.inputs[idx])
152 |     this.inputs.splice(idx, 1)
153 |     this.inputs.splice(idx + 1, 0, tmp)
154 |   }
155 | 
156 |   private delInput (idx: number): void {
157 |     this.inputs.splice(idx, 1)
158 |   }
159 | 
160 |   private addInput (): void {
161 |     if (this.inputs.length < 10) {
162 |       this.inputs.push(util.copyObj(this.defaultConf.action.config[0]))
163 |     } else {
164 |       this.$alert('最多添加10个表单项！')
165 |     }
166 |   }
167 | }
168 | </script>
169 | 


--------------------------------------------------------------------------------
/src/components/itemOption/layoutLeftItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <template v-if="items && items.length">
 4 |       <div
 5 |         v-for="(item, index) in items"
 6 |         :key="index"
 7 |         class="form-list-panel"
 8 |       >
 9 |         <upload
10 |           :label="'图片' + (index + 1)"
11 |           :index="index"
12 |           :item="item"
13 |         ></upload>
14 |         <el-form-item
15 |           class="small"
16 |           label="图片位置："
17 |         >
18 |           {{ item.text }}
19 |         </el-form-item>
20 |         <template v-if="item.click">
21 |           <el-form-item
22 |             class="small"
23 |             label="跳转到："
24 |           >
25 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
26 |           </el-form-item>
27 |         </template>
28 |         <el-form-item
29 |           class="small"
30 |           label="点击配置："
31 |         >
32 |           <el-button
33 |             icon="el-icon-edit"
34 |             round
35 |             @click="showClick(item, index)"
36 |           >配置跳转</el-button>
37 |         </el-form-item>
38 |       </div>
39 |     </template>
40 |   </div>
41 | </template>
42 | 
43 | <script lang="ts">
44 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
45 | 
46 | import util from '@/utils/tools'
47 | import compConfig from '@/config/componentConfig'
48 | import upload from '@/components/upload.vue'
49 | 
50 | @Component({
51 |   name: 'LayoutLeftItem',
52 |   components: {
53 |     upload
54 |   }
55 | })
56 | export default class LayoutLeftItem extends Vue {
57 |   @Prop({ default: null })
58 |   private grids?: Array<any>
59 | 
60 |   $evt: any
61 |   private defaultConf: any = util.copyObj(compConfig['grid-menu'])
62 |   private items: Array<any> = this.grids || []
63 | 
64 |   @Watch('grids', { deep: true })
65 |   private watchGrids (val: Array<any>) {
66 |     this.items = val
67 |   }
68 | 
69 |   private showClick (banner: any, idx: number): void {
70 |     this.$evt.$emit('click:show', idx, ['outside'])
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/components/itemOption/layoutRepeatItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <template v-if="item.click">
 15 |           <el-form-item
 16 |             class="small"
 17 |             label="跳转到："
 18 |           >
 19 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
 20 |           </el-form-item>
 21 |         </template>
 22 |         <el-form-item
 23 |           class="small"
 24 |           label="点击配置："
 25 |         >
 26 |           <el-button
 27 |             icon="el-icon-edit"
 28 |             round
 29 |             @click="showClick(item, index)"
 30 |           >配置跳转</el-button>
 31 |         </el-form-item>
 32 |         <div class="list-item-opt">
 33 |           <a
 34 |             v-if="index !== 0"
 35 |             href="javascript:;"
 36 |             @click="upItem(index)"
 37 |           >
 38 |             <i class="el-icon-arrow-up"></i>
 39 |           </a>
 40 |           <a
 41 |             v-if="index !== items.length - 1"
 42 |             href="javascript:;"
 43 |             @click="downItem(index)"
 44 |           >
 45 |             <i class="el-icon-arrow-down"></i>
 46 |           </a>
 47 |           <a
 48 |             v-if="index > 0"
 49 |             href="javascript:;"
 50 |             @click="delItem(index)"
 51 |           >
 52 |             <i class="el-icon-delete"></i>
 53 |           </a>
 54 |         </div>
 55 |       </div>
 56 |     </template>
 57 |     <el-button
 58 |       icon="el-icon-plus"
 59 |       style="margin-top:15px;"
 60 |       round
 61 |       @click="addItem"
 62 |     >添加点击项</el-button>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script lang="ts">
 67 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 68 | 
 69 | import util from '@/utils/tools'
 70 | import compConfig from '@/config/componentConfig'
 71 | import upload from '@/components/upload.vue'
 72 | 
 73 | @Component({
 74 |   name: 'LayoutRepeatItem',
 75 |   components: {
 76 |     upload
 77 |   }
 78 | })
 79 | export default class LayoutRepeatItem extends Vue {
 80 |   @Prop({ default: null })
 81 |   private grids?: Array<any>
 82 | 
 83 |   $evt: any
 84 |   private defaultConf: any = util.copyObj(compConfig['grid-menu'])
 85 |   private items: Array<any> = this.grids || []
 86 | 
 87 |   @Watch('grids', { deep: true })
 88 |   private watchGrids (val: Array<any>) {
 89 |     this.items = val
 90 |   }
 91 | 
 92 |   private showClick (banner: any, idx: number): void {
 93 |     this.$evt.$emit('click:show', idx, ['outside'])
 94 |   }
 95 | 
 96 |   private upItem (idx: number): void {
 97 |     const tmp: any = util.copyObj(this.items[idx])
 98 |     this.items.splice(idx, 1)
 99 |     this.items.splice(idx - 1, 0, tmp)
100 |   }
101 | 
102 |   private downItem (idx: number): void {
103 |     const tmp: any = util.copyObj(this.items[idx])
104 |     this.items.splice(idx, 1)
105 |     this.items.splice(idx + 1, 0, tmp)
106 |   }
107 | 
108 |   private delItem (idx: number): void {
109 |     this.items.splice(idx, 1)
110 |   }
111 | 
112 |   private addItem (): void {
113 |     this.items.push(util.copyObj(this.defaultConf.action.config[0]))
114 |   }
115 | }
116 | </script>
117 | 


--------------------------------------------------------------------------------
/src/components/itemOption/layoutRightItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <template v-if="items && items.length">
 4 |       <div
 5 |         v-for="(item, index) in items"
 6 |         :key="index"
 7 |         class="form-list-panel"
 8 |       >
 9 |         <upload
10 |           :label="'图片' + (index + 1)"
11 |           :index="index"
12 |           :item="item"
13 |         ></upload>
14 |         <el-form-item
15 |           class="small"
16 |           label="图片位置："
17 |         >
18 |           {{ item.text }}
19 |         </el-form-item>
20 |         <template v-if="item.click">
21 |           <el-form-item
22 |             class="small"
23 |             label="跳转到："
24 |           >
25 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
26 |           </el-form-item>
27 |         </template>
28 |         <el-form-item
29 |           class="small"
30 |           label="点击配置："
31 |         >
32 |           <el-button
33 |             icon="el-icon-edit"
34 |             round
35 |             @click="showClick(item, index)"
36 |           >配置跳转</el-button>
37 |         </el-form-item>
38 |       </div>
39 |     </template>
40 |   </div>
41 | </template>
42 | 
43 | <script lang="ts">
44 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
45 | 
46 | import util from '@/utils/tools'
47 | import compConfig from '@/config/componentConfig'
48 | import upload from '@/components/upload.vue'
49 | 
50 | @Component({
51 |   name: 'LayoutRightItem',
52 |   components: {
53 |     upload
54 |   }
55 | })
56 | export default class LayoutRightItem extends Vue {
57 |   @Prop({ default: null })
58 |   private grids?: Array<any>
59 | 
60 |   $evt: any
61 |   private defaultConf: any = util.copyObj(compConfig['grid-menu'])
62 |   private items: Array<any> = this.grids || []
63 | 
64 |   @Watch('grids', { deep: true })
65 |   private watchGrids (val: Array<any>) {
66 |     this.items = val
67 |   }
68 | 
69 |   private showClick (banner: any, idx: number): void {
70 |     this.$evt.$emit('click:show', idx, ['outside'])
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/components/itemOption/marqueeItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <el-form-item
 10 |           class="small"
 11 |           label="滚动文案："
 12 |         >
 13 |           <el-input
 14 |             v-model="item.text"
 15 |             :maxlength="500"
 16 |             placeholder="滚动项文案"
 17 |           ></el-input>
 18 |         </el-form-item>
 19 |         <template v-if="item.click">
 20 |           <el-form-item
 21 |             class="small"
 22 |             label="跳转到："
 23 |           >
 24 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
 25 |           </el-form-item>
 26 |         </template>
 27 |         <el-form-item
 28 |           class="small"
 29 |           label="点击配置："
 30 |         >
 31 |           <el-button
 32 |             icon="el-icon-edit"
 33 |             round
 34 |             @click="showClick(item, index)"
 35 |           >配置跳转</el-button>
 36 |         </el-form-item>
 37 |         <div class="list-item-opt">
 38 |           <a
 39 |             v-if="index !== 0"
 40 |             href="javascript:;"
 41 |             @click="upItem(index)"
 42 |           >
 43 |             <i class="el-icon-arrow-up"></i>
 44 |           </a>
 45 |           <a
 46 |             v-if="index !== items.length - 1"
 47 |             href="javascript:;"
 48 |             @click="downItem(index)"
 49 |           >
 50 |             <i class="el-icon-arrow-down"></i>
 51 |           </a>
 52 |           <a
 53 |             v-if="index > 0"
 54 |             href="javascript:;"
 55 |             @click="delItem(index)"
 56 |           >
 57 |             <i class="el-icon-delete"></i>
 58 |           </a>
 59 |         </div>
 60 |       </div>
 61 |     </template>
 62 |     <el-button
 63 |       icon="el-icon-plus"
 64 |       style="margin-top:15px;"
 65 |       round
 66 |       @click="addItem"
 67 |     >添加滚动项</el-button>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script lang="ts">
 72 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 73 | 
 74 | import util from '@/utils/tools'
 75 | import compConfig from '@/config/componentConfig'
 76 | 
 77 | @Component({
 78 |   name: 'MarqueeItem'
 79 | })
 80 | export default class MarqueeItem extends Vue {
 81 |   @Prop({ default: null })
 82 |   private marquees?: Array<any>
 83 | 
 84 |   $evt: any
 85 |   private defaultConf: any = util.copyObj(compConfig['news-marquee'])
 86 |   private items: Array<any> = this.marquees || []
 87 | 
 88 |   @Watch('marquees', { deep: true })
 89 |   private watchMarquees (val: Array<any>) {
 90 |     this.items = val
 91 |   }
 92 | 
 93 |   private showClick (banner: any, idx: number): void {
 94 |     this.$evt.$emit('click:show', idx)
 95 |   }
 96 | 
 97 |   private upItem (idx: number): void {
 98 |     const tmp: any = util.copyObj(this.items[idx])
 99 |     this.items.splice(idx, 1)
100 |     this.items.splice(idx - 1, 0, tmp)
101 |   }
102 | 
103 |   private downItem (idx: number): void {
104 |     const tmp: any = util.copyObj(this.items[idx])
105 |     this.items.splice(idx, 1)
106 |     this.items.splice(idx + 1, 0, tmp)
107 |   }
108 | 
109 |   private delItem (idx: number): void {
110 |     this.items.splice(idx, 1)
111 |   }
112 | 
113 |   private addItem (): void {
114 |     if (this.items.length < 10) {
115 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
116 |     } else {
117 |       this.$alert('最多添加10个滚动项！')
118 |     }
119 |   }
120 | }
121 | </script>
122 | 


--------------------------------------------------------------------------------
/src/components/itemOption/pageFaqItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'头像' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <el-form-item
 15 |           class="small"
 16 |           label="昵称："
 17 |         >
 18 |           <el-input
 19 |             v-model="item.nickName"
 20 |             :maxlength="32"
 21 |             placeholder="用户昵称"
 22 |           ></el-input>
 23 |         </el-form-item>
 24 |         <el-form-item
 25 |           class="small"
 26 |           label="聊天内容："
 27 |         >
 28 |           <el-input
 29 |             type="textarea"
 30 |             v-model="item.text"
 31 |             :rows="4"
 32 |             placeholder="段落文案"
 33 |           ></el-input>
 34 |         </el-form-item>
 35 |         <el-form-item
 36 |           class="small"
 37 |           label="本人身份："
 38 |         >
 39 |             <el-radio
 40 |               v-model="item.isAuthor"
 41 |               :label="1"
 42 |             >是</el-radio>
 43 |             <el-radio
 44 |               v-model="item.isAuthor"
 45 |               :label="0"
 46 |             >否</el-radio>
 47 |         </el-form-item>
 48 |         <div class="list-item-opt">
 49 |           <a
 50 |             v-if="index !== 0"
 51 |             href="javascript:;"
 52 |             @click="upInput(index)"
 53 |           >
 54 |             <i class="el-icon-arrow-up"></i>
 55 |           </a>
 56 |           <a
 57 |             v-if="index !== items.length - 1"
 58 |             href="javascript:;"
 59 |             @click="downInput(index)"
 60 |           >
 61 |             <i class="el-icon-arrow-down"></i>
 62 |           </a>
 63 |           <a
 64 |             v-if="index > 0"
 65 |             href="javascript:;"
 66 |             @click="delInput(index)"
 67 |           >
 68 |             <i class="el-icon-delete"></i>
 69 |           </a>
 70 |         </div>
 71 |       </div>
 72 |     </template>
 73 |     <el-button
 74 |       icon="el-icon-plus"
 75 |       style="margin-top:15px;"
 76 |       round
 77 |       @click="addInput"
 78 |     >添加段落项</el-button>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script lang="ts">
 83 | import { Component, Prop, Vue } from 'vue-property-decorator'
 84 | 
 85 | import util from '@/utils/tools'
 86 | import compConfig from '@/config/componentConfig'
 87 | import upload from '@/components/upload.vue'
 88 | 
 89 | @Component({
 90 |   name: 'PageFaqItem',
 91 |   components: {
 92 |     upload
 93 |   }
 94 | })
 95 | export default class PageFaqItem extends Vue {
 96 |   @Prop({ default: null })
 97 |   private paragraphs?: Array<any>
 98 | 
 99 |   private defaultConf: any = util.copyObj(compConfig['page-paragraph'])
100 |   private items: Array<any> = this.paragraphs || []
101 | 
102 |   private upInput (idx: number): void {
103 |     const tmp: any = util.copyObj(this.items[idx])
104 |     this.items.splice(idx, 1)
105 |     this.items.splice(idx - 1, 0, tmp)
106 |   }
107 | 
108 |   private downInput (idx: number): void {
109 |     const tmp: any = util.copyObj(this.items[idx])
110 |     this.items.splice(idx, 1)
111 |     this.items.splice(idx + 1, 0, tmp)
112 |   }
113 | 
114 |   private delInput (idx: number): void {
115 |     this.items.splice(idx, 1)
116 |   }
117 | 
118 |   private addInput (): void {
119 |     if (this.items.length <= 20) {
120 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
121 |     } else {
122 |       this.$alert('最多添加20个段落项！')
123 |     }
124 |   }
125 | }
126 | </script>
127 | 


--------------------------------------------------------------------------------
/src/components/itemOption/pageParagraphItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         class="form-list-panel"
  6 |         v-for="(item, index) in items"
  7 |         :key="index"
  8 |       >
  9 |         <el-form-item
 10 |           class="small"
 11 |           label="数字标识："
 12 |         >
 13 |           <el-input
 14 |             v-model="item.label"
 15 |             :maxlength="8"
 16 |             placeholder="数字标识"
 17 |           ></el-input>
 18 |         </el-form-item>
 19 |         <el-form-item
 20 |           class="small"
 21 |           label="文本内容："
 22 |         >
 23 |           <el-input
 24 |             type="textarea"
 25 |             v-model="item.content"
 26 |             :rows="4"
 27 |             placeholder="段落文案"
 28 |           ></el-input>
 29 |         </el-form-item>
 30 |         <div class="list-item-opt">
 31 |           <a
 32 |             v-if="index !== 0"
 33 |             href="javascript:;"
 34 |             @click="upInput(index)"
 35 |           >
 36 |             <i class="el-icon-arrow-up"></i>
 37 |           </a>
 38 |           <a
 39 |             v-if="index !== items.length - 1"
 40 |             href="javascript:;"
 41 |             @click="downInput(index)"
 42 |           >
 43 |             <i class="el-icon-arrow-down"></i>
 44 |           </a>
 45 |           <a
 46 |             v-if="index > 0"
 47 |             href="javascript:;"
 48 |             @click="delInput(index)"
 49 |           >
 50 |             <i class="el-icon-delete"></i>
 51 |           </a>
 52 |         </div>
 53 |       </div>
 54 |     </template>
 55 |     <el-button
 56 |       icon="el-icon-plus"
 57 |       style="margin-top:15px;"
 58 |       round
 59 |       @click="addInput"
 60 |     >添加段落项</el-button>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script lang="ts">
 65 | import { Component, Prop, Vue } from 'vue-property-decorator'
 66 | 
 67 | import util from '@/utils/tools'
 68 | import compConfig from '@/config/componentConfig'
 69 | 
 70 | @Component({
 71 |   name: 'PageParagraphItem'
 72 | })
 73 | export default class PageParagraphItem extends Vue {
 74 |   @Prop({ default: null })
 75 |   private paragraphs?: Array<any>
 76 | 
 77 |   private defaultConf: any = util.copyObj(compConfig['page-paragraph'])
 78 |   private items: Array<any> = this.paragraphs || []
 79 | 
 80 |   private upInput (idx: number): void {
 81 |     const tmp: any = util.copyObj(this.items[idx])
 82 |     this.items.splice(idx, 1)
 83 |     this.items.splice(idx - 1, 0, tmp)
 84 |   }
 85 | 
 86 |   private downInput (idx: number): void {
 87 |     const tmp: any = util.copyObj(this.items[idx])
 88 |     this.items.splice(idx, 1)
 89 |     this.items.splice(idx + 1, 0, tmp)
 90 |   }
 91 | 
 92 |   private delInput (idx: number): void {
 93 |     this.items.splice(idx, 1)
 94 |   }
 95 | 
 96 |   private addInput (): void {
 97 |     if (this.items.length <= 20) {
 98 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
 99 |     } else {
100 |       this.$alert('最多添加20个段落项！')
101 |     }
102 |   }
103 | }
104 | </script>
105 | 


--------------------------------------------------------------------------------
/src/components/itemOption/scrollItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="items && items.length">
  4 |       <div
  5 |         v-for="(item, index) in items"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <template v-if="item.click">
 15 |           <el-form-item
 16 |             class="small"
 17 |             label="跳转到："
 18 |           >
 19 |             <span style="word-break: break-all;">{{ item.click.href }}</span>
 20 |           </el-form-item>
 21 |         </template>
 22 |         <el-form-item
 23 |           class="small"
 24 |           label="点击配置："
 25 |         >
 26 |           <el-button
 27 |             icon="el-icon-edit"
 28 |             round
 29 |             @click="showClick(item, index)"
 30 |           >配置跳转</el-button>
 31 |         </el-form-item>
 32 |         <div class="list-item-opt">
 33 |           <a
 34 |             v-if="index !== 0"
 35 |             href="javascript:;"
 36 |             @click="upItem(index)"
 37 |           >
 38 |             <i class="el-icon-arrow-up"></i>
 39 |           </a>
 40 |           <a
 41 |             v-if="index !== items.length - 1"
 42 |             href="javascript:;"
 43 |             @click="downItem(index)"
 44 |           >
 45 |             <i class="el-icon-arrow-down"></i>
 46 |           </a>
 47 |           <a
 48 |             v-if="index > 0"
 49 |             href="javascript:;"
 50 |             @click="delItem(index)"
 51 |           >
 52 |             <i class="el-icon-delete"></i>
 53 |           </a>
 54 |         </div>
 55 |       </div>
 56 |     </template>
 57 |     <el-button
 58 |       icon="el-icon-plus"
 59 |       style="margin-top:15px;"
 60 |       round
 61 |       @click="addItem"
 62 |     >添加滚动项</el-button>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script lang="ts">
 67 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 68 | 
 69 | import util from '@/utils/tools'
 70 | import compConfig from '@/config/componentConfig'
 71 | import upload from '@/components/upload.vue'
 72 | 
 73 | @Component({
 74 |   name: 'ScrollItem',
 75 |   components: {
 76 |     upload
 77 |   }
 78 | })
 79 | export default class ScrollItem extends Vue {
 80 |   @Prop({ default: null })
 81 |   private scrolls?: Array<any>
 82 | 
 83 |   $evt: any
 84 |   private defaultConf: any = util.copyObj(compConfig['scroll-left'])
 85 |   private items: Array<any> = this.scrolls || []
 86 | 
 87 |   @Watch('scrolls', { deep: true })
 88 |   private watchScrolls (val: Array<any>): void {
 89 |     this.items = val
 90 |   }
 91 | 
 92 |   private showClick (banner: any, idx: number): void {
 93 |     this.$evt.$emit('click:show', idx, ['outside'])
 94 |   }
 95 | 
 96 |   private upItem (idx: number): void {
 97 |     const tmp: any = util.copyObj(this.items[idx])
 98 |     this.items.splice(idx, 1)
 99 |     this.items.splice(idx - 1, 0, tmp)
100 |   }
101 | 
102 |   private downItem (idx: number): void {
103 |     const tmp: any = util.copyObj(this.items[idx])
104 |     this.items.splice(idx, 1)
105 |     this.items.splice(idx + 1, 0, tmp)
106 |   }
107 | 
108 |   private delItem (idx: number): void {
109 |     this.items.splice(idx, 1)
110 |   }
111 | 
112 |   private addItem (): void {
113 |     if (this.items.length < 10) {
114 |       this.items.push(util.copyObj(this.defaultConf.action.config[0]))
115 |     } else {
116 |       this.$alert('最多添加10个图片项！')
117 |     }
118 |   }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/components/itemOption/verticalItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="list && list.length">
  4 |       <div
  5 |         v-for="(item, index) in list"
  6 |         :key="index"
  7 |         class="form-list-panel"
  8 |       >
  9 |         <upload
 10 |           :label="'图片' + (index + 1)"
 11 |           :index="index"
 12 |           :item="item"
 13 |         ></upload>
 14 |         <el-form-item
 15 |           class="small"
 16 |           label="标题："
 17 |         >
 18 |           <el-input
 19 |             v-model="item.title"
 20 |             :maxlength="128"
 21 |             placeholder="必填"
 22 |           ></el-input>
 23 |         </el-form-item>
 24 |         <el-form-item
 25 |           class="small"
 26 |           label="描述："
 27 |         >
 28 |           <el-input
 29 |             v-model="item.desc"
 30 |             :maxlength="128"
 31 |             placeholder="必填"
 32 |           ></el-input>
 33 |         </el-form-item>
 34 |         <div class="list-item-opt">
 35 |           <a
 36 |             v-if="index !== 0"
 37 |             href="javascript:;"
 38 |             @click="upItem(index)"
 39 |           >
 40 |             <i class="el-icon-arrow-up"></i>
 41 |           </a>
 42 |           <a
 43 |             v-if="index !== list.length - 1"
 44 |             href="javascript:;"
 45 |             @click="downItem(index)"
 46 |           >
 47 |             <i class="el-icon-arrow-down"></i>
 48 |           </a>
 49 |           <a
 50 |             v-if="index > 0"
 51 |             href="javascript:;"
 52 |             @click="delItem(index)"
 53 |           >
 54 |             <i class="el-icon-delete"></i>
 55 |           </a>
 56 |         </div>
 57 |       </div>
 58 |     </template>
 59 |     <el-button
 60 |       icon="el-icon-plus"
 61 |       style="margin-top:15px;"
 62 |       round
 63 |       @click="addItem"
 64 |     >添加列表项</el-button>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script lang="ts">
 69 | import { Component, Prop, Vue } from 'vue-property-decorator'
 70 | 
 71 | import util from '@/utils/tools'
 72 | import upload from '@/components/upload.vue'
 73 | import compConfig from '@/config/componentConfig'
 74 | 
 75 | @Component({
 76 |   name: 'VerticalItem',
 77 |   components: {
 78 |     upload
 79 |   }
 80 | })
 81 | export default class VerticalItem extends Vue {
 82 |   @Prop({ default: null })
 83 |   private items?: Array<any>
 84 | 
 85 |   private defaultConf: any = util.copyObj(compConfig['vertical-list'])
 86 |   private list: Array<any> = this.items || []
 87 | 
 88 |   private upItem (idx: number): void {
 89 |     const tmp: any = util.copyObj(this.list[idx])
 90 |     this.list.splice(idx, 1)
 91 |     this.list.splice(idx - 1, 0, tmp)
 92 |   }
 93 | 
 94 |   private downItem (idx: number): void {
 95 |     const tmp: any = util.copyObj(this.list[idx])
 96 |     this.list.splice(idx, 1)
 97 |     this.list.splice(idx + 1, 0, tmp)
 98 |   }
 99 | 
100 |   private delItem (idx: number): void {
101 |     this.list.splice(idx, 1)
102 |   }
103 | 
104 |   private addItem (): void {
105 |     if (this.list.length < 20) {
106 |       this.list.push(util.copyObj(this.defaultConf.action.config[0]))
107 |     } else {
108 |       this.$alert('最多添加20个列表项！')
109 |     }
110 |   }
111 | }
112 | </script>
113 | 


--------------------------------------------------------------------------------
/src/components/lay/layoutLeft.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="layout_box">
  7 |       <div class="layout_box_left">
  8 |         <img
  9 |           v-if="items[0].val"
 10 |           :src="items[0].val"
 11 |         >
 12 |         <div
 13 |           v-else
 14 |           class="image-placeholder"
 15 |         >
 16 |           <i class="el-icon-picture-outline"></i>
 17 |         </div>
 18 |       </div>
 19 |       <div class="layout_box_right">
 20 |         <div class="top">
 21 |           <img
 22 |             v-if="items[1].val"
 23 |             :src="items[1].val"
 24 |           >
 25 |           <div
 26 |             v-else
 27 |             class="image-placeholder"
 28 |           >
 29 |             <i class="el-icon-picture-outline"></i>
 30 |           </div>
 31 |         </div>
 32 |         <div class="bot">
 33 |           <img
 34 |             v-if="items[2].val"
 35 |             :src="items[2].val"
 36 |           >
 37 |           <div
 38 |             v-else
 39 |             class="image-placeholder"
 40 |           >
 41 |             <i class="el-icon-picture-outline"></i>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script lang="ts">
 50 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 51 | 
 52 | @Component({
 53 |   name: 'LayoutLeft'
 54 | })
 55 | export default class LayoutLeft extends Vue {
 56 |   @Prop({ default: null })
 57 |   private component: any
 58 | 
 59 |   private items: Array<any> = this.component.action.config
 60 | 
 61 | 
 62 |   private get getStyle (): string {
 63 |     const ret: Array<string> = []
 64 |     this.component.style.forEach((item: any) => {
 65 |       const unit = item.unit || ''
 66 |       item.val && ret.push(item.attr + ':' + item.val + unit)
 67 |     })
 68 |     return ret.join(';')
 69 |   }
 70 | 
 71 |   @Watch('component', { deep: true })
 72 |   private watchComponent (): void {
 73 |     this.items = this.component.action.config
 74 |   }
 75 | }
 76 | </script>
 77 | 
 78 | <style lang="scss" scoped>
 79 | .layout_box {
 80 |   display: flex;
 81 |   min-height: 100px;
 82 |   height: 100%;
 83 | 
 84 |   > div {
 85 |     flex: 1;
 86 |     margin: 2px;
 87 |     background-repeat: no-repeat;
 88 |   }
 89 | 
 90 |   .layout_box_left {
 91 |     display: flex;
 92 |     justify-content: center;
 93 |     align-items: center;
 94 |     border-radius: 4px;
 95 |     overflow: hidden;
 96 | 
 97 |     img {
 98 |       width: 100%;
 99 |     }
100 |   }
101 | 
102 |   .layout_box_right {
103 |     > div {
104 |       display: flex;
105 |       justify-content: center;
106 |       align-items: center;
107 |       height: 50%;
108 |       border-radius: 4px;
109 |       overflow: hidden;
110 | 
111 |       img {
112 |         width: 100%;
113 |       }
114 |     }
115 |   }
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/lay/layoutRepeat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <ul class="grid-menu">
 7 |       <li
 8 |         v-for="(item, index) in items"
 9 |         :key="index"
10 |         class="grid-menu-item"
11 |         :style="getItemStyle"
12 |       >
13 |         <img
14 |           v-if="item.val"
15 |           :src="item.val"
16 |         >
17 |         <div
18 |           v-else
19 |           class="image-placeholder"
20 |         >
21 |           <i class="el-icon-picture-outline"></i>
22 |         </div>
23 |       </li>
24 |     </ul>
25 |   </div>
26 | </template>
27 | 
28 | <script lang="ts">
29 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
30 | 
31 | @Component({
32 |   name: 'LayoutRepeat'
33 | })
34 | export default class LayoutRepeat extends Vue {
35 |   @Prop({ default: null })
36 |   private component: any
37 | 
38 |   private items: Array<any> = this.component.action.config
39 | 
40 |   private get getStyle (): string {
41 |     const ret: Array<string> = []
42 |     this.component.style.forEach((item: any) => {
43 |       const unit = item.unit || ''
44 |       item.val && ret.push(item.attr + ':' + item.val + unit)
45 |     })
46 |     return ret.join(';')
47 |   }
48 |   private get getItemStyle (): string {
49 |     const column: number = parseInt(this.component.base[0].val)
50 |     const num: number = this.items.length > column ? 100 / column : 100 / this.items.length
51 |     return 'width:' + num + '%;'
52 |   }
53 | 
54 |   @Watch('component', { deep: true })
55 |   private watchComponent (): void {
56 |     this.items = this.component.action.config
57 |   }
58 | }
59 | </script>
60 | 
61 | <style lang="scss" scoped>
62 | .grid-menu {
63 |   position: relative;
64 |   margin: 0;
65 |   list-style: none;
66 |   margin-block-start: 0;
67 |   margin-block-end: 0;
68 |   padding-inline-start: 0;
69 | 
70 |   .grid-menu-item {
71 |     display: inline-block;
72 |     vertical-align: middle;
73 |     text-align: center;
74 |     font-size: 0;
75 |     list-style-type: none;
76 | 
77 |     > .image-placeholder {
78 |       margin: 0 auto;
79 |       width: 40px;
80 |       height: 40px;
81 |       line-height: 40px;
82 |       border: 1px solid #e8e8e8;
83 |       text-align: center;
84 | 
85 |       > i {
86 |         font-size: 20px;
87 |         vertical-align: middle;
88 |       }
89 |     }
90 | 
91 |     > img {
92 |       margin: 0 auto;
93 |       width: 100%;
94 |       height: auto;
95 |     }
96 |   }
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/components/lay/layoutRight.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="layout_box">
  7 |       <div class="layout_box_left">
  8 |         <div class="top">
  9 |           <img
 10 |             v-if="items[0].val"
 11 |             :src="items[0].val"
 12 |           >
 13 |           <div
 14 |             v-else
 15 |             class="image-placeholder"
 16 |           >
 17 |             <i class="el-icon-picture-outline"></i>
 18 |           </div>
 19 |         </div>
 20 |         <div class="bot">
 21 |           <img
 22 |             v-if="items[1].val"
 23 |             :src="items[1].val"
 24 |           >
 25 |           <div
 26 |             v-else
 27 |             class="image-placeholder"
 28 |           >
 29 |             <i class="el-icon-picture-outline"></i>
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 |       <div class="layout_box_right">
 34 |         <img
 35 |           v-if="items[2].val"
 36 |           :src="items[2].val"
 37 |         >
 38 |         <div
 39 |           v-else
 40 |           class="image-placeholder"
 41 |         >
 42 |           <i class="el-icon-picture-outline"></i>
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script lang="ts">
 50 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 51 | 
 52 | @Component({
 53 |   name: 'LayoutRight'
 54 | })
 55 | export default class LayoutRight extends Vue {
 56 |   @Prop({ default: null })
 57 |   private component: any
 58 | 
 59 |   private items: Array<any> = this.component.action.config
 60 | 
 61 | 
 62 |   private get getStyle (): string {
 63 |     const ret: Array<string> = []
 64 |     this.component.style.forEach((item: any) => {
 65 |       const unit = item.unit || ''
 66 |       item.val && ret.push(item.attr + ':' + item.val + unit)
 67 |     })
 68 |     return ret.join(';')
 69 |   }
 70 | 
 71 |   @Watch('component', { deep: true })
 72 |   private watchComponent (): void {
 73 |     this.items = this.component.action.config
 74 |   }
 75 | }
 76 | </script>
 77 | 
 78 | <style lang="scss" scoped>
 79 | .layout_box {
 80 |   display: flex;
 81 |   min-height: 100px;
 82 |   height: 100%;
 83 | 
 84 |   > div {
 85 |     flex: 1;
 86 |     margin: 2px;
 87 |     background-repeat: no-repeat;
 88 |   }
 89 | 
 90 |   .layout_box_left {
 91 |     > div {
 92 |       display: flex;
 93 |       justify-content: center;
 94 |       align-items: center;
 95 |       height: 50%;
 96 |       border-radius: 4px;
 97 |       overflow: hidden;
 98 | 
 99 |       img {
100 |         width: 100%;
101 |       }
102 |     }
103 |   }
104 | 
105 |   .layout_box_right {
106 |     display: flex;
107 |     justify-content: center;
108 |     align-items: center;
109 |     border-radius: 4px;
110 |     overflow: hidden;
111 | 
112 |     img {
113 |       width: 100%;
114 |     }
115 |   }
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/list/horizontalList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="page-list">
  7 |       <div
  8 |         v-for="(item, index) in list"
  9 |         :key="index"
 10 |         class="page-list-item"
 11 |         :style="getItemStyle('horizontal-list-item')"
 12 |       >
 13 |         <div
 14 |           class="page-list-item__hd"
 15 |           :style="getItemStyle('horizontal-list-logo_')"
 16 |         >
 17 |           <div
 18 |             class="page-list-item__img"
 19 |             :style="{ backgroundImage: 'url(' + item.val + ')' }"
 20 |           ></div>
 21 |         </div>
 22 |         <div class="page-list-item__bd">
 23 |           <div
 24 |             class="page-list-item__title"
 25 |             :style="getItemStyle('horizontal-list-title_')"
 26 |           >{{ item.title }}</div>
 27 |           <p
 28 |             class="page-list-item__desc"
 29 |             :style="getItemStyle('horizontal-list-desc_')"
 30 |           >{{ item.desc }}</p>
 31 |         </div>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script lang="ts">
 38 | import { Component, Prop, Vue } from 'vue-property-decorator'
 39 | 
 40 | @Component({
 41 |   name: 'HorizontalList'
 42 | })
 43 | export default class HorizontalList extends Vue {
 44 |   @Prop({ default: null })
 45 |   private component: any
 46 | 
 47 | 
 48 |   private list: any = this.component.action.config
 49 | 
 50 |   private get getStyle (): string {
 51 |     const ret: Array<string> = []
 52 |     this.component.style.forEach((item: any) => {
 53 |       const unit: string = item.unit || ''
 54 |       if (item.val) {
 55 |         if (item.attr === 'background-image') {
 56 |           ret.push(item.attr + ':url(' + item.val + ')')
 57 |         } else {
 58 |           ret.push(item.attr + ':' + item.val + unit)
 59 |         }
 60 |       }
 61 |     })
 62 |     return ret.join(';')
 63 |   }
 64 | 
 65 | 
 66 |   private getItemStyle (key: string): string {
 67 |     const ret: Array<string> = []
 68 |     this.component.others.config.forEach((item: any) => {
 69 |       const isItem: number = item.attr.indexOf(key)
 70 |       const idx: number = item.attr.indexOf('_')
 71 |       if (isItem === 0) {
 72 |         const unit: string = item.unit || ''
 73 |         item.val && ret.push(item.attr.substring(idx + 1, item.attr.length) + ':' + item.val + unit)
 74 |       }
 75 |     })
 76 |     return ret.join(';')
 77 |   }
 78 | }
 79 | </script>
 80 | 
 81 | <style lang="scss" scoped>
 82 | .comp-content {
 83 |   background-repeat: no-repeat;
 84 | }
 85 | .page-list {
 86 |   background-color: #fff;
 87 | 
 88 |   .page-list-item {
 89 |     display: flex;
 90 |     align-items: center;
 91 |     position: relative;
 92 | 
 93 |     &:after {
 94 |       position: absolute;
 95 |       left: 0;
 96 |       bottom: 0;
 97 |       right: 0;
 98 |       content: " ";
 99 |       height: 1px;
100 |       background-color: #E5E5E5;
101 |       -webkit-transform-origin: 0 0;
102 |       transform-origin: 0 0;
103 |       -webkit-transform: scaleY(0.5);
104 |       transform: scaleY(0.5);
105 |     }
106 | 
107 |     &:last-child {
108 |       &:after {
109 |         display: none;
110 |       }
111 |     }
112 | 
113 |     .page-list-item__hd {
114 |       margin-right: .8em;
115 |       text-align: center;
116 | 
117 |       .page-list-item__img {
118 |         margin: 0 auto;
119 |         height: 100%;
120 |         background-color: #e9e9eb;
121 |         background-size: cover;
122 |         background-position: center;
123 |         background-repeat: no-repeat;
124 |       }
125 |     }
126 | 
127 |     .page-list-item__bd {
128 |       flex: 1;
129 |       min-width: 60px;
130 | 
131 |       .page-list-item__title {
132 |         margin-bottom: .3em;
133 |         width: auto;
134 |         overflow: hidden;
135 |         text-overflow: ellipsis;
136 |         white-space: nowrap;
137 |         word-wrap: normal;
138 |         word-wrap: break-word;
139 |         word-break: break-all;
140 |       }
141 | 
142 |       .page-list-item__desc {
143 |         margin: 0;
144 |         line-height: 1.5;
145 |         overflow: hidden;
146 |         text-overflow: ellipsis;
147 |         display: -webkit-box;
148 |         -webkit-box-orient: vertical;
149 |         -webkit-line-clamp: 2;
150 |       }
151 |     }
152 |   }
153 | }
154 | </style>
155 | 


--------------------------------------------------------------------------------
/src/components/list/verticalList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="page-list">
  7 |       <div
  8 |         v-for="(item, index) in list"
  9 |         :key="index"
 10 |         class="page-list-item"
 11 |         :style="getItemStyle('vertical-list-item')"
 12 |       >
 13 |         <div
 14 |           class="page-list-item__hd"
 15 |           :style="getItemStyle('vertical-list-logo_')"
 16 |         >
 17 |           <div
 18 |             class="page-list-item__img"
 19 |             :style="{ backgroundImage: 'url(' + item.val + ')' }"
 20 |           ></div>
 21 |         </div>
 22 |         <div class="page-list-item__bd">
 23 |           <div
 24 |             class="page-list-item__title"
 25 |             :style="getItemStyle('vertical-list-title_')"
 26 |           >{{ item.title }}</div>
 27 |           <p
 28 |             class="page-list-item__desc"
 29 |             :style="getItemStyle('vertical-list-desc_')"
 30 |           >{{ item.desc }}</p>
 31 |         </div>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script lang="ts">
 38 | import { Component, Prop, Vue } from 'vue-property-decorator'
 39 | 
 40 | @Component({
 41 |   name: 'VerticalList'
 42 | })
 43 | export default class VerticalList extends Vue {
 44 |   @Prop({ default: null })
 45 |   private component: any
 46 | 
 47 | 
 48 |   private list: any = this.component.action.config
 49 | 
 50 |   private get getStyle (): string {
 51 |     const ret: Array<string> = []
 52 |     this.component.style.forEach((item: any) => {
 53 |       const unit: string = item.unit || ''
 54 |       if (item.val) {
 55 |         if (item.attr === 'background-image') {
 56 |           ret.push(item.attr + ':url(' + item.val + ')')
 57 |         } else {
 58 |           ret.push(item.attr + ':' + item.val + unit)
 59 |         }
 60 |       }
 61 |     })
 62 |     return ret.join(';')
 63 |   }
 64 | 
 65 |   private getItemStyle (key: string): string {
 66 |     const ret: Array<string> = []
 67 |     this.component.others.config.forEach((item: any) => {
 68 |       const isItem: number = item.attr.indexOf(key)
 69 |       const idx: number = item.attr.indexOf('_')
 70 |       if (isItem === 0) {
 71 |         const unit: string = item.unit || ''
 72 |         item.val && ret.push(item.attr.substring(idx + 1, item.attr.length) + ':' + item.val + unit)
 73 |       }
 74 |     })
 75 |     return ret.join(';')
 76 |   }
 77 | }
 78 | </script>
 79 | 
 80 | <style lang="scss" scoped>
 81 | .comp-content {
 82 |   background-repeat: no-repeat;
 83 | }
 84 | 
 85 | .page-list {
 86 |   background-color: #fff;
 87 | 
 88 |   .page-list-item {
 89 |     position: relative;
 90 |     display: inline-block;
 91 |     text-align: center;
 92 |     width: 50%;
 93 |     box-sizing: border-box;
 94 | 
 95 |     &:after {
 96 |       position: absolute;
 97 |       top: 0;
 98 |       bottom: 0;
 99 |       right: 0;
100 |       content: " ";
101 |       width: 1px;
102 |       background-color: #E5E5E5;
103 |       color: #E5E5E5;
104 |       -webkit-transform-origin: 0 0;
105 |       transform-origin: 0 0;
106 |       -webkit-transform: scaleX(0.5);
107 |       transform: scaleX(0.5);
108 |     }
109 | 
110 |     &:nth-child(2n) {
111 |       &:after {
112 |         display: none;
113 |       }
114 |     }
115 | 
116 |     .page-list-item__hd {
117 |       margin-bottom: .8em;
118 |       text-align: center;
119 | 
120 |       .page-list-item__img {
121 |         margin: 0 auto;
122 |         width: 100%;
123 |         height: 100%;
124 |         background-color: #e9e9eb;
125 |         background-size: cover;
126 |         background-position: center;
127 |         background-repeat: no-repeat;
128 |       }
129 |     }
130 | 
131 |     .page-list-item__bd {
132 |       min-width: 60px;
133 | 
134 |       .page-list-item__title {
135 |         margin-bottom: .3em;
136 |         width: auto;
137 |         overflow: hidden;
138 |         text-overflow: ellipsis;
139 |         white-space: nowrap;
140 |         word-wrap: normal;
141 |         word-wrap: break-word;
142 |         word-break: break-all;
143 |       }
144 | 
145 |       .page-list-item__desc {
146 |         margin: 0;
147 |         line-height: 1.5;
148 |         overflow: hidden;
149 |         text-overflow: ellipsis;
150 |         display: -webkit-box;
151 |         -webkit-box-orient: vertical;
152 |         -webkit-line-clamp: 2;
153 |       }
154 |     }
155 |   }
156 | }
157 | </style>
158 | 


--------------------------------------------------------------------------------
/src/components/navLink/bottomMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="bottom-menu"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div
 7 |       v-for="(item, index) in menus"
 8 |       :key="index"
 9 |       class="menu-item"
10 |       :style="{ width: 100 / menus.length + '%' }"
11 |     >
12 |       <img v-if="item.val" :src="item.val">
13 |       <p v-if="item.val">{{ item.titleName }}</p>
14 |       <div
15 |         v-else
16 |         class="image-placeholder"
17 |       >
18 |         <i class="el-icon-help"></i>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script lang="ts">
25 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
26 | 
27 | @Component({
28 |   name: 'BottomMenu'
29 | })
30 | export default class BottomMenu extends Vue {
31 |   @Prop({ default: null })
32 |   private component: any
33 | 
34 |   private menus: any = this.component.action.config
35 | 
36 |   @Watch('component', { deep: true })
37 |   private watchComponent(): void {
38 |     this.menus = this.component.action.config
39 |   }
40 | 
41 |   private get getStyle (): string {
42 |     const ret: Array<string> = []
43 |     this.component.style.forEach((item: any) => {
44 |       if (item.val) {
45 |         const unit: string = item.unit || ''
46 |         ret.push(item.attr + ':' + item.val + unit)
47 |       }
48 |     })
49 |     return ret.join(';')
50 |   }
51 | }
52 | </script>
53 | 
54 | <style lang="scss" scoped>
55 | .bottom-menu {
56 |   display: flex;
57 |   justify-content: space-between;
58 |   align-content: center;
59 |   -webkit-box-pack: justify;
60 |   -webkit-box-align: center;
61 | 
62 |   .menu-item {
63 |     display: block;
64 |     flex: 1;
65 |     text-align: center;
66 |     box-sizing: border-box;
67 | 
68 |     > img {
69 |       height: 60%;
70 |       width: auto;
71 |     }
72 | 
73 |     > p {
74 |       font-size: 12px;
75 |     }
76 | 
77 |     > .image-placeholder {
78 |       width: 100%;
79 |       height: 100%;
80 |       text-align: center;
81 |       border-left: 1px solid #e8e8e8;
82 |       display: flex;
83 |       flex-direction: column;
84 |       justify-content: center;
85 | 
86 |       &:first-child {
87 |         border-left: 0;
88 |       }
89 | 
90 |       > i {
91 |         color: #83c0ff;
92 |         font-size: 40px;
93 |         vertical-align: middle;
94 |       }
95 |     }
96 |   }
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/components/navLink/floorMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="['comp-content', component.active ? 'active' : '']">
  3 |     <div
  4 |       class="floor-menu"
  5 |       :style="{ backgroundColor: backgroundColor }"
  6 |     >
  7 |       <div
  8 |         id="floor_nav_menu"
  9 |         class="floor-menu-list"
 10 |       >
 11 |         <div class="floor-menu-inner">
 12 |           <a
 13 |             v-for="(item, index) in items"
 14 |             :key="index"
 15 |             class="floor-item"
 16 |             href="javascript:;"
 17 |             :style="getItemStyle(index)"
 18 |           >{{ item.text }}</a>
 19 |         </div>
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script lang="ts">
 26 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 27 | import IScroll from 'iscroll'
 28 | 
 29 | @Component({
 30 |   name: 'FloorMenu'
 31 | })
 32 | export default class FloorMenu extends Vue {
 33 |   @Prop({ default: null })
 34 |   private component: any
 35 | 
 36 | 
 37 |   private items: any = this.component.action.config
 38 |   private backgroundColor: string = this.component.style[0].val
 39 |   private fillColor: string = this.component.style[2].val
 40 |   private noScroll: any = null
 41 | 
 42 |   @Watch('component', { deep: true })
 43 |   private watchComponent (): void {
 44 |     this.items = this.component.action.config
 45 |     this.backgroundColor = this.component.style[0].val
 46 |     this.fillColor = this.component.style[2].val
 47 |   }
 48 | 
 49 |   mounted (): void {
 50 |     this.initScroll()
 51 |   }
 52 | 
 53 |   private getItemStyle (idx: number): string {
 54 |     const ret: Array<string> = []
 55 |     if (idx === 0) {
 56 |       ret.push('background-color:' + this.component.style[1].val)
 57 |       ret.push('color:' + this.component.style[3].val)
 58 |     } else {
 59 |       ret.push('background-color:' + this.component.style[0].val)
 60 |       ret.push('color:' + this.component.style[2].val)
 61 |     }
 62 |     return ret.join(';')
 63 |   }
 64 | 
 65 |   private initScroll (): void {
 66 |     this.noScroll = null
 67 |     setTimeout(() => {
 68 |       this.noScroll = new IScroll('#floor_nav_menu', {
 69 |         scrollX: true,
 70 |         scrollY: false,
 71 |         eventPassthrough: true,
 72 |         preventDefault: false
 73 |       })
 74 |     }, 0)
 75 |   }
 76 | }
 77 | </script>
 78 | 
 79 | <style lang="scss" scoped>
 80 | .comp-content {
 81 |   overflow-x: hidden;
 82 | }
 83 | 
 84 | .floor-menu {
 85 |   display: flex;
 86 |   position: relative;
 87 |   width: 100%;
 88 |   height: 40px;
 89 |   line-height: 40px;
 90 | 
 91 |   .floor-menu-list {
 92 |     width: 100%;
 93 |     height: 40px;
 94 |     // overflow-y: hidden;
 95 |     // overflow-x: auto;
 96 |     -webkit-overflow-scrolling: touch;
 97 | 
 98 |     .floor-menu-inner {
 99 |       display: flex;
100 |       position: relative;
101 |       padding: 0 8px;
102 |       height: 40px;
103 |       white-space: nowrap;
104 |       transform: translateZ(0);
105 | 
106 |       .floor-item {
107 |         display: block;
108 |         padding: 0 16px;
109 |         line-height: 40px;
110 |         font-size: 14px;
111 |         text-decoration: none;
112 |       }
113 |     }
114 |   }
115 | }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/src/components/navLink/gridMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <ul class="grid-menu">
  7 |       <li
  8 |         v-for="(item, index) in items"
  9 |         :key="index"
 10 |         class="grid-menu-item"
 11 |         :style="getItemStyle"
 12 |       >
 13 |         <img
 14 |           v-if="item.val"
 15 |           :src="item.val"
 16 |         >
 17 |         <div
 18 |           v-else
 19 |           class="image-placeholder"
 20 |         >
 21 |           <i class="el-icon-picture-outline"></i>
 22 |         </div>
 23 |         <span v-if="item.text">{{ item.text }}</span>
 24 |       </li>
 25 |     </ul>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script lang="ts">
 30 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 31 | 
 32 | @Component({
 33 |   name: 'GridMenu'
 34 | })
 35 | export default class GridMenu extends Vue {
 36 |   @Prop({ default: null })
 37 |   private component: any
 38 | 
 39 |   private items: any = this.component.action.config
 40 | 
 41 |   private get getStyle (): string {
 42 |     const ret: Array<string> = []
 43 |     this.component.style.forEach((item: any) => {
 44 |       const unit: string = item.unit || ''
 45 |       item.val && ret.push(item.attr + ':' + item.val + unit)
 46 |     })
 47 |     return ret.join(';')
 48 |   }
 49 | 
 50 |   private get getItemStyle ():string {
 51 |     const column: number = parseInt(this.component.base[0].val)
 52 |     const num: number = this.items.length > column ? 100 / column : 100 / this.items.length
 53 |     return 'width:' + num + '%;'
 54 |   }
 55 | 
 56 |   @Watch('component', { deep: true })
 57 |   private watchComponent (): void {
 58 |     this.items = this.component.action.config
 59 |   }
 60 | }
 61 | </script>
 62 | 
 63 | <style lang="scss" scoped>
 64 | .grid-menu {
 65 |   position: relative;
 66 |   margin: 0;
 67 |   list-style: none;
 68 |   margin-block-start: 0;
 69 |   margin-block-end: 0;
 70 |   padding-inline-start: 0;
 71 | 
 72 |   .grid-menu-item {
 73 |     display: inline-block;
 74 |     margin-top: 15px;
 75 |     vertical-align: top;
 76 |     text-align: center;
 77 |     font-size: 0;
 78 |     text-decoration: none;
 79 |     list-style-type: none;
 80 | 
 81 |     > .image-placeholder {
 82 |       margin: 0 auto;
 83 |       width: 40px;
 84 |       height: 40px;
 85 |       line-height: 40px;
 86 |       border: 1px solid #e8e8e8;
 87 |       text-align: center;
 88 | 
 89 |       > i {
 90 |         font-size: 20px;
 91 |         vertical-align: middle;
 92 |       }
 93 |     }
 94 | 
 95 |     > img {
 96 |       display: block;
 97 |       margin: 0 auto;
 98 |       width: 40px;
 99 |       height: 40px;
100 |     }
101 |     > span {
102 |       display: block;
103 |       margin: 5px auto 0 auto;
104 |       font-size: 12px;
105 |     }
106 |   }
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/components/option.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-option">
  3 |     <el-form
  4 |       ref="options-form"
  5 |       label-width="80px"
  6 |       size="mini"
  7 |     >
  8 |       <h2>【{{ option.title }}】</h2>
  9 |       <el-form-item
 10 |         class="small"
 11 |         label="组件编号："
 12 |       >
 13 |         <span>{{ option.domId }}</span>
 14 |       </el-form-item>
 15 |       <el-form-item
 16 |         class="small"
 17 |         label="组件名称："
 18 |       >
 19 |         <el-input
 20 |           v-model="option.domName"
 21 |           maxlength="30"
 22 |           placeholder="非必填，页内跳转配置使用"
 23 |         ></el-input>
 24 |       </el-form-item>
 25 |       <div v-if="option.base && option.base.length">
 26 |         <form-item
 27 |           v-for="(item, index) in option.base"
 28 |           :key="index"
 29 |           :item="item"
 30 |           :index="index"
 31 |         ></form-item>
 32 |       </div>
 33 |       <div v-if="option.style && option.style.length">
 34 |         <h3><i class="el-icon-setting"></i> 样式配置</h3>
 35 |         <form-item
 36 |           v-for="(item, index) in option.style"
 37 |           :key="index"
 38 |           :item="item"
 39 |           :index="index"
 40 |         ></form-item>
 41 |       </div>
 42 |       <div v-if="option.others && option.others.config.length">
 43 |         <h3><i class="el-icon-setting"></i> {{ option.others.title }}</h3>
 44 |         <form-item
 45 |           v-for="(item, index) in option.others.config"
 46 |           :key="index"
 47 |           :item="item"
 48 |           :index="index"
 49 |         ></form-item>
 50 |       </div>
 51 |       <template v-if="option.action">
 52 |         <h3><i class="el-icon-setting"></i> {{ option.action.title }}</h3>
 53 |         <template v-if="option.action.type === 'image-click'">
 54 |           <image-click
 55 |             :show.sync="imageClickShow"
 56 |             :img="option.style[1].val"
 57 |             :clicks="option.action.config"
 58 |           ></image-click>
 59 |           <el-button
 60 |             icon="el-icon-plus"
 61 |             :disabled="!option.style[1].val"
 62 |             round
 63 |             @click="imageClickShow = true"
 64 |           >点击区域配置</el-button>
 65 |         </template>
 66 |         <template v-if="option.action.type === 'form-submit'">
 67 |           <input-item :forms="option.action.config"></input-item>
 68 |         </template>
 69 |         <template v-if="option.action.type === 'page-paragraph-list'">
 70 |           <page-paragraph-item :paragraphs="option.action.config"></page-paragraph-item>
 71 |         </template>
 72 |         <template v-if="option.action.type === 'timeout-click'">
 73 |           <timeout-item
 74 |             :show.sync="timeoutClickShow"
 75 |             :end="option.style[0].val"
 76 |             :img="option.style[1].val"
 77 |             :times="option.action.config"
 78 |           ></timeout-item>
 79 |           <el-button
 80 |             icon="el-icon-plus"
 81 |             :disabled="!option.style[1].val"
 82 |             round
 83 |             @click="timeoutClickShow = true"
 84 |           >时间项配置</el-button>
 85 |         </template>
 86 |         <template v-if="option.action.type === 'page-faq-list'">
 87 |           <page-faq-item :paragraphs="option.action.config"></page-faq-item>
 88 |         </template>
 89 | 
 90 |         <template v-if="option.action.type === 'bottom-menu-click'">
 91 |           <bottom-menu-item :items="option.action.config"></bottom-menu-item>
 92 |         </template>
 93 |         <template v-if="option.action.type === 'grid-menu-click'">
 94 |           <grid-menu-item :grids="option.action.config"></grid-menu-item>
 95 |         </template>
 96 |         <template v-if="option.action.type === 'floor-menu-click'">
 97 |           <floor-menu-item :menus="option.action.config"></floor-menu-item>
 98 |         </template>
 99 | 
100 |         <template v-if="option.action.type === 'layout-repeat-click'">
101 |           <layout-repeat-item :grids="option.action.config"></layout-repeat-item>
102 |         </template>
103 |         <template v-if="option.action.type === 'layout-left-click'">
104 |           <layout-left-item :grids="option.action.config"></layout-left-item>
105 |         </template>
106 |         <template v-if="option.action.type === 'layout-right-click'">
107 |           <layout-right-item :grids="option.action.config"></layout-right-item>
108 |         </template>
109 | 
110 |         <template v-if="option.action.type === 'coupon-click'">
111 |           <coupon-item :coupons="option.action.config"></coupon-item>
112 |         </template>
113 |         <template v-if="option.action.type === 'goods-item-click'">
114 |           <goods-item :items="option.action.config"></goods-item>
115 |         </template>
116 | 
117 |         <template v-if="option.action.type === 'swiper-click'">
118 |           <banner-item :banners="option.action.config"></banner-item>
119 |         </template>
120 |         <template v-if="option.action.type === 'left-scroll-click'">
121 |           <scroll-item :scrolls="option.action.config"></scroll-item>
122 |         </template>
123 | 
124 |         <template v-if="option.action.type === 'horizontal-item-click'">
125 |           <horizontal-item :items="option.action.config"></horizontal-item>
126 |         </template>
127 |         <template v-if="option.action.type === 'vertical-item-click'">
128 |           <vertical-item :items="option.action.config"></vertical-item>
129 |         </template>
130 | 
131 |         <template v-if="option.action.type === 'marquee-click'">
132 |           <marquee-item :marquees="option.action.config"></marquee-item>
133 |         </template>
134 |       </template>
135 |     </el-form>
136 |   </div>
137 | </template>
138 | 
139 | <script lang="ts">
140 | import { Component, Prop, Vue } from 'vue-property-decorator'
141 | 
142 | import formItem from '@/components/formItem.vue'
143 | 
144 | import imageClick from '@/components/itemOption/imageClick.vue'
145 | import inputItem from '@/components/itemOption/inputItem.vue'
146 | import pageParagraphItem from '@/components/itemOption/pageParagraphItem.vue'
147 | import timeoutItem from '@/components/itemOption/timeoutItem.vue'
148 | import pageFaqItem from '@/components/itemOption/pageFaqItem.vue'
149 | 
150 | import bottomMenuItem from '@/components/itemOption/bottomMenuItem.vue'
151 | import gridMenuItem from '@/components/itemOption/gridMenuItem.vue'
152 | import floorMenuItem from '@/components/itemOption/floorMenuItem.vue'
153 | 
154 | import layoutRepeatItem from '@/components/itemOption/layoutRepeatItem.vue'
155 | import layoutLeftItem from '@/components/itemOption/layoutLeftItem.vue'
156 | import layoutRightItem from '@/components/itemOption/layoutRightItem.vue'
157 | 
158 | import couponItem from '@/components/itemOption/couponItem.vue'
159 | import goodsItem from '@/components/itemOption/goodsItem.vue'
160 | 
161 | import bannerItem from '@/components/itemOption/bannerItem.vue'
162 | import scrollItem from '@/components/itemOption/scrollItem.vue'
163 | 
164 | import horizontalItem from '@/components/itemOption/horizontalItem.vue'
165 | import verticalItem from '@/components/itemOption/verticalItem.vue'
166 | 
167 | import marqueeItem from '@/components/itemOption/marqueeItem.vue'
168 | 
169 | @Component({
170 |   name: 'AppOption',
171 |   components: {
172 |     formItem,
173 |     imageClick,
174 |     inputItem,
175 |     pageParagraphItem,
176 |     timeoutItem,
177 |     pageFaqItem,
178 |     bottomMenuItem,
179 |     gridMenuItem,
180 |     floorMenuItem,
181 |     layoutRepeatItem,
182 |     layoutLeftItem,
183 |     layoutRightItem,
184 |     couponItem,
185 |     goodsItem,
186 |     bannerItem,
187 |     scrollItem,
188 |     horizontalItem,
189 |     verticalItem,
190 |     marqueeItem
191 |   }
192 | })
193 | export default class AppOption extends Vue {
194 |   @Prop({ default: null })
195 |   private option: any
196 | 
197 |   private imageClickShow: Boolean = false
198 |   private timeoutClickShow: Boolean = false
199 | 
200 | }
201 | </script>
202 | 
203 | <style lang="scss">
204 | .app-option {
205 |   width: 360px;
206 |   padding: 0 10px 0 5px;
207 |   overflow: auto;
208 | 
209 |   h2 {
210 |     margin: 13px 0;
211 |     font-size: 14px;
212 |   }
213 | 
214 |   .el-form {
215 |     padding-bottom: 30px;
216 | 
217 |     > h3 {
218 |       margin-bottom: 10px;
219 |       background-color: #f2f3f4;
220 |       padding: 5px 10px;
221 |       font-size: 14px;
222 |     }
223 | 
224 |     .el-form-item.small {
225 |       margin-bottom: 5px;
226 | 
227 |       .font-set {
228 |         display: inline-block;
229 |         width: 28px;
230 |         height: 28px;
231 |         text-align: center;
232 |         cursor: pointer;
233 |         &.checked {
234 |           color: #fff;
235 |           background-color: #333;
236 |         }
237 |       }
238 | 
239 |       .el-date-editor.el-input {
240 |         width: 186px;
241 |         .el-input__inner {
242 |           padding-left: 30px !important;
243 |         }
244 |       }
245 | 
246 |       .el-input__inner {
247 |         padding: 0 10px;
248 |       }
249 | 
250 |       .el-textarea__inner {
251 |         padding: 5px 10px;
252 |       }
253 | 
254 |       .el-form-item__label {
255 |         padding-right: 0;
256 |         font-size: 13px;
257 |       }
258 |     }
259 | 
260 |     .form-list-panel {
261 |       margin-top: 15px;
262 |       border: 1px solid #e8e8e8;
263 |       padding: 10px 10px 5px 5px;
264 | 
265 |       &:first-child {
266 |         margin-top: 0;
267 |       }
268 | 
269 |       .list-item-opt {
270 |         text-align: right;
271 | 
272 |         > a {
273 |           margin-left: 10px;
274 |           color: #2aa7ff;
275 |           font-size: 12px;
276 |         }
277 |       }
278 |     }
279 |   }
280 | }
281 | </style>
282 | 


--------------------------------------------------------------------------------
/src/components/pageOption.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-option">
  3 |     <el-form
  4 |       ref="options-form"
  5 |       label-width="80px"
  6 |       size="mini"
  7 |     >
  8 |       <div>
  9 |         <h2>【页面配置】</h2>
 10 |         <form-item
 11 |           v-for="(item, index) in option.base"
 12 |           :item="item"
 13 |           :index="index"
 14 |           :key="index"
 15 |         ></form-item>
 16 |       </div>
 17 |       <div>
 18 |         <h3><i class="el-icon-setting"></i> 样式配置</h3>
 19 |         <form-item
 20 |           v-for="(item, index) in option.style"
 21 |           :item="item"
 22 |           :index="index"
 23 |           :key="index"
 24 |         ></form-item>
 25 |       </div>
 26 |       <!-- <template>
 27 |         <h3><i class="el-icon-setting"></i> 分享配置</h3>
 28 |         <form-item
 29 |           v-for="(item, index) in option.weixin"
 30 |           :item="item"
 31 |           :index="index"
 32 |           :key="index"
 33 |         ></form-item>
 34 |       </template> -->
 35 |     </el-form>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script lang="ts">
 40 | import { Component, Prop, Vue } from 'vue-property-decorator'
 41 | 
 42 | import formItem from '@/components/formItem.vue'
 43 | 
 44 | @Component({
 45 |   name: 'AppPageOption',
 46 |   components: {
 47 |     formItem
 48 |   }
 49 | })
 50 | export default class AppPageOption extends Vue {
 51 |   @Prop({ default: null })
 52 |   private option: any
 53 | }
 54 | </script>
 55 | 
 56 | <style lang="scss">
 57 | .app-option {
 58 |   width: 360px;
 59 |   padding: 0 10px 0 5px;
 60 |   overflow: auto;
 61 | 
 62 |   h2 {
 63 |     margin: 13px 0;
 64 |     font-size: 14px;
 65 |   }
 66 | 
 67 |   .el-form {
 68 |     padding-bottom: 30px;
 69 | 
 70 |     h3 {
 71 |       margin-bottom: 10px;
 72 |       background-color: #f2f3f4;
 73 |       padding: 5px 10px;
 74 |       font-size: 14px;
 75 |     }
 76 | 
 77 |     .el-form-item.small {
 78 |       margin-bottom: 5px;
 79 | 
 80 |       .font-set {
 81 |         display: inline-block;
 82 |         width: 28px;
 83 |         height: 28px;
 84 |         text-align: center;
 85 |         cursor: pointer;
 86 |         &.checked {
 87 |           color: #fff;
 88 |           background-color: #333;
 89 |         }
 90 |       }
 91 | 
 92 |       .el-date-editor.el-input {
 93 |         width: 186px;
 94 |         .el-input__inner {
 95 |           padding-left: 30px !important;
 96 |         }
 97 |       }
 98 | 
 99 |       .el-input__inner {
100 |         padding: 0 10px;
101 |       }
102 | 
103 |       .el-textarea__inner {
104 |         padding: 5px 10px;
105 |       }
106 | 
107 |       .el-form-item__label {
108 |         padding-right: 0;
109 |       }
110 |     }
111 |   }
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/preview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |     id="preview"
  4 |     title="页面预览"
  5 |     :close-on-click-modal="false"
  6 |     :append-to-body="false"
  7 |     :visible.sync="visible"
  8 |     @close="$emit('update:show', false)"
  9 |     width="395px"
 10 |   >
 11 |     <el-row>
 12 |       <el-col
 13 |         :span="12"
 14 |         class="app_box"
 15 |         :style="'text-align: center; width:375px;' + getStyle()"
 16 |       >
 17 |         <div class="pre-desc">
 18 |           <h3 style="color:red;">预览说明：</h3>
 19 |           <p>1、部分组件尚未实现预览；</p>
 20 |           <p>2、组件尚未点击效果；</p>
 21 |           <p>3、预览仅供参考，不代表真机效果；</p>
 22 |         </div>
 23 |         <div
 24 |           v-for="(comp, index) in compList"
 25 |           :key="index"
 26 |         >
 27 |           <div
 28 |             v-if="comp.type !== 'placeholder'"
 29 |             :key="index"
 30 |             :data-index="index"
 31 |           >
 32 |             <!-- 文本控件 -->
 33 |             <base-text
 34 |               v-if="comp.type === 'text'"
 35 |               :component="comp"
 36 |             ></base-text>
 37 |             <!-- 图片控件 -->
 38 |             <base-image
 39 |               v-if="comp.type === 'img'"
 40 |               :component="comp"
 41 |             ></base-image>
 42 |             <!-- 表单控件 -->
 43 |             <base-form
 44 |               v-if="comp.type === 'form'"
 45 |               :component="comp"
 46 |             ></base-form>
 47 |             <!-- 页面标题 -->
 48 |             <page-title
 49 |               v-if="comp.type === 'page-title'"
 50 |               :component="comp"
 51 |             ></page-title>
 52 |             <!-- 页面段落 -->
 53 |             <page-paragraph
 54 |               v-if="comp.type === 'page-paragraph'"
 55 |               :component="comp"
 56 |             ></page-paragraph>
 57 |             <!-- 页面引言 -->
 58 |             <page-intro
 59 |               v-if="comp.type === 'page-intro'"
 60 |               :component="comp"
 61 |             ></page-intro>
 62 |             <!-- 倒计时控件 -->
 63 |             <timeout
 64 |               v-if="comp.type === 'timeout'"
 65 |               :component="comp"
 66 |             ></timeout>
 67 |             <!-- 楼层标题 -->
 68 |             <floor-title
 69 |               v-if="comp.type === 'floor-title'"
 70 |               :component="comp"
 71 |             ></floor-title>
 72 |             <!-- 页面FAQ -->
 73 |             <page-faq
 74 |               v-if="comp.type === 'page-faq'"
 75 |               :component="comp"
 76 |             ></page-faq>
 77 | 
 78 |             <!-- 网格菜单控件 -->
 79 |             <grid-menu
 80 |               v-if="comp.type === 'grid-menu'"
 81 |               :component="comp"
 82 |             ></grid-menu>
 83 |               <!-- 楼层导航控件 -->
 84 |             <floor-menu
 85 |               v-if="comp.type === 'floor-menu'"
 86 |               :component="comp"
 87 |             ></floor-menu>
 88 | 
 89 |             <!-- 平铺布局 -->
 90 |             <layout-repeat
 91 |               v-if="comp.type === 'layout-repeat'"
 92 |               :component="comp"
 93 |             ></layout-repeat>
 94 |             <!-- 两栏布局左 -->
 95 |             <layout-left
 96 |               v-if="comp.type === 'layout-left'"
 97 |               :component="comp"
 98 |             ></layout-left>
 99 |             <!-- 两栏布局右 -->
100 |             <layout-right
101 |               v-if="comp.type === 'layout-right'"
102 |               :component="comp"
103 |             ></layout-right>
104 | 
105 |             <!-- 商品搜索 -->
106 |             <goods-search
107 |               v-if="comp.type === 'goods-search'"
108 |               :component="comp"
109 |             ></goods-search>
110 |             <!-- 优惠券 -->
111 |             <coupon
112 |               v-if="comp.type === 'coupon'"
113 |               :component="comp"
114 |             ></coupon>
115 |             <!-- 自定义商品 -->
116 |             <goods
117 |               v-if="comp.type === 'goods'"
118 |               :component="comp"
119 |             ></goods>
120 | 
121 |             <!-- 轮播图控件 -->
122 |             <swiper-banner
123 |               v-if="comp.type === 'swiper-banner'"
124 |               :component="comp"
125 |             ></swiper-banner>
126 |             <!-- 横向滚动控件 -->
127 |             <scroll-left
128 |               v-if="comp.type === 'scroll-left'"
129 |               :component="comp"
130 |             ></scroll-left>
131 | 
132 |             <!-- 横向列表 -->
133 |             <horizontal-list
134 |               v-if="comp.type === 'horizontal-list'"
135 |               :component="comp"
136 |             ></horizontal-list>
137 |             <!-- 纵向列表 -->
138 |             <vertical-list
139 |               v-if="comp.type === 'vertical-list'"
140 |               :component="comp"
141 |             ></vertical-list>
142 | 
143 |             <!-- 滚动新闻控件 -->
144 |             <news-marquee
145 |               v-if="comp.type === 'news-marquee'"
146 |               :component="comp"
147 |             ></news-marquee>
148 |           </div>
149 |         </div>
150 |         <!-- 底部导航控件 -->
151 |         <div v-if="bottomMenu">
152 |           <bottom-menu :component="bottomMenu"></bottom-menu>
153 |         </div>
154 |       </el-col>
155 |     </el-row>
156 |   </el-dialog>
157 | </template>
158 | 
159 | <script lang="ts">
160 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
161 | 
162 | @Component({
163 |   name: 'Preview'
164 | })
165 | export default class Preview extends Vue {
166 |   @Prop({ default: false })
167 |   private show!: Boolean
168 | 
169 | 
170 |   private visible: Boolean = this.show
171 |   private compList: Array<any> = []
172 |   private pageStyle: Array<any> = []
173 |   private bottomMenu: any = null
174 | 
175 |   @Watch('show', { immediate: true })
176 |   private watchShow (): void {
177 |     this.visible = this.show
178 |     if (localStorage.getItem('pageConfig')) {
179 |       this.pageStyle = JSON.parse(localStorage.getItem('pageConfig') as string).style || []
180 |     }
181 | 
182 |     if (localStorage.getItem('pageDateSet')) {
183 |       this.compList = JSON.parse(localStorage.getItem('pageDateSet') as string).config || []
184 |       this.bottomMenu = JSON.parse(localStorage.getItem('pageDateSet') as string).menu || null
185 |     }
186 |   }
187 | 
188 |   private cancel (): void {
189 |     this.visible = false
190 |   }
191 | 
192 |   private getStyle (): string {
193 |     const ret: Array<string> = []
194 |     this.pageStyle.forEach((item: any) => {
195 |       const unit: string = item.unit || ''
196 |       if (item.val) {
197 |         if (item.attr === 'background-image') {
198 |           ret.push(item.attr + ':url(' + item.val + ')')
199 |         } else {
200 |           ret.push(item.attr + ':' + item.val + unit)
201 |         }
202 |       }
203 |     })
204 |     return ret.join(';')
205 |   }
206 | }
207 | </script>
208 | 
209 | <style lang="scss" scoped>
210 | .app_box {
211 |   min-height: 600px;
212 | }
213 | </style>
214 | 
215 | <style lang="scss">
216 | #preview {
217 |   .el-dialog {
218 |     border-radius: 10px !important;
219 |   }
220 | 
221 |   .el-dialog__body {
222 |     padding: 0px 10px 50px 10px !important;
223 | 
224 |     .pre-desc {
225 |       position: absolute;
226 |       left: 110%;
227 |       top: 200px;
228 |       width: 180px;
229 |       height: 250px;
230 |       padding: 10px;
231 |       background-color: #fff;
232 |       border-radius: 4px;
233 | 
234 |       > h3 {
235 |         margin-bottom: 10px;
236 |       }
237 | 
238 |       > p {
239 |         margin: 0;
240 |         text-align: left;
241 |         line-height: 1.5;
242 |       }
243 |     }
244 |   }
245 | }
246 | </style>
247 | 


--------------------------------------------------------------------------------
/src/components/shopping/coupon.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <ul class="coupon-menu">
  7 |       <li
  8 |         v-for="(item, index) in items"
  9 |         :key="index"
 10 |         class="coupon-menu-item"
 11 |         :style="getItemStyle"
 12 |       >
 13 |         <img
 14 |           v-if="item.val"
 15 |           :src="item.val"
 16 |         >
 17 |         <div
 18 |           v-else
 19 |           class="image-placeholder"
 20 |         >
 21 |           <i class="el-icon-picture-outline"></i>
 22 |         </div>
 23 |         <span v-if="item.text">{{ item.text }}</span>
 24 |       </li>
 25 |     </ul>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script lang="ts">
 30 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 31 | 
 32 | @Component({
 33 |   name: 'Coupon'
 34 | })
 35 | export default class Coupon extends Vue {
 36 |   @Prop({ default: null })
 37 |   private component: any
 38 | 
 39 |   private items: any = this.component.action.config
 40 | 
 41 | 
 42 |   private get getStyle (): string {
 43 |     const ret: Array<string> = []
 44 |     this.component.style.forEach((item: any) => {
 45 |       const unit = item.unit || ''
 46 |       item.val && ret.push(item.attr + ':' + item.val + unit)
 47 |     })
 48 |     return ret.join(';')
 49 |   }
 50 | 
 51 |   private get getItemStyle (): string {
 52 |     const column: number = parseInt(this.component.base[0].val)
 53 |     const num: number = this.items.length > column ? 100 / column : 100 / this.items.length
 54 |     return 'width:' + num + '%;'
 55 |   }
 56 | 
 57 |   @Watch('component', { deep: true })
 58 |   private watchComponent (): void {
 59 |     this.items = this.component.action.config
 60 |   }
 61 | }
 62 | </script>
 63 | 
 64 | <style lang="scss" scoped>
 65 | .coupon-menu {
 66 |   position: relative;
 67 |   margin: 0;
 68 |   margin-block-start: 0;
 69 |   margin-block-end: 0;
 70 |   padding-inline-start: 0;
 71 |   list-style: none;
 72 | 
 73 |   .coupon-menu-item {
 74 |     padding: 2px;
 75 |     display: inline-block;
 76 |     vertical-align: middle;
 77 |     list-style-type: none;
 78 | 
 79 |     > .image-placeholder {
 80 |       margin: 0 auto;
 81 |       width: 40px;
 82 |       height: 40px;
 83 |       line-height: 40px;
 84 |       border: 1px solid #e8e8e8;
 85 |       text-align: center;
 86 | 
 87 |       > i {
 88 |         font-size: 20px;
 89 |         vertical-align: middle;
 90 |       }
 91 |     }
 92 | 
 93 |     > img {
 94 |       display: block;
 95 |       margin: 0 auto;
 96 |       width: 100%;
 97 |       height: auto;
 98 |       -webkit-user-drag: none;
 99 |     }
100 |   }
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/components/shopping/goods.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <div class="page-list">
  7 |       <div
  8 |         v-for="(item, index) in list"
  9 |         :key="index"
 10 |         class="page-list-item"
 11 |         :style="getItemStyle('goods-list-item')"
 12 |       >
 13 |         <div class="goods_box">
 14 |           <div
 15 |             class="page-list-item__hd"
 16 |             :style="getItemStyle('goods-list-logo_')"
 17 |           >
 18 |             <div class="page-list-item__img">
 19 |               <img :src="item.val" alt="">
 20 |             </div>
 21 |           </div>
 22 |           <div class="page-list-item__bd">
 23 |             <div
 24 |               class="page-list-item__title"
 25 |               :style="getItemStyle('goods-list-title_')"
 26 |             >{{ item.name }}</div>
 27 |             <p
 28 |               class="page-list-item__desc"
 29 |               :style="getItemStyle('goods-list-price_')"
 30 |             >KS {{ item.price }}</p>
 31 |           </div>
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script lang="ts">
 39 | import { Component, Prop, Vue } from 'vue-property-decorator'
 40 | 
 41 | @Component({
 42 |   name: 'Goods'
 43 | })
 44 | export default class Goods extends Vue {
 45 |   @Prop({ default: null })
 46 |   private component: any
 47 | 
 48 |   private items: any = this.component.action.config
 49 | 
 50 |   private get getStyle (): string {
 51 |     const ret: Array<string> = []
 52 |     this.component.style.forEach((item: any) => {
 53 |       const unit: string = item.unit || ''
 54 |       if (item.val) {
 55 |         if (item.attr === 'background-image') {
 56 |           ret.push(item.attr + ':url(' + item.val + ')')
 57 |         } else {
 58 |           ret.push(item.attr + ':' + item.val + unit)
 59 |         }
 60 |       }
 61 |     })
 62 |     return ret.join(';')
 63 |   }
 64 | 
 65 |   private getItemStyle (key: string): string {
 66 |     const ret: Array<string> = []
 67 |     this.component.others.config.forEach((item: any) => {
 68 |       const isItem: number = item.attr.indexOf(key)
 69 |       const idx: number = item.attr.indexOf('_')
 70 |       if (isItem === 0) {
 71 |         const unit: string = item.unit || ''
 72 |         item.val && ret.push(item.attr.substring(idx + 1, item.attr.length) + ':' + item.val + unit)
 73 |       }
 74 |     })
 75 |     return ret.join(';')
 76 |   }
 77 | }
 78 | </script>
 79 | 
 80 | <style lang="scss" scoped>
 81 | .comp-content {
 82 |   background-repeat: no-repeat;
 83 | }
 84 | 
 85 | .page-list {
 86 |   // background-color: #fff;
 87 | 
 88 |   .page-list-item {
 89 |     position: relative;
 90 |     display: inline-block;
 91 |     text-align: left;
 92 |     width: 50%;
 93 |     box-sizing: border-box;
 94 | 
 95 |     .goods_box {
 96 |       border-radius: 10px;
 97 |       overflow: hidden;
 98 |       background-color: #fff;
 99 |       box-shadow: 0 0 2px 1px rgba(0, 0, 0, .15);
100 |     }
101 | 
102 |     .page-list-item__hd {
103 |       margin-bottom: .8em;
104 |       text-align: center;
105 | 
106 |       .page-list-item__img {
107 |         margin: 0 auto;
108 |         width: 100%;
109 |         height: 100%;
110 |         background-color: #e9e9eb;
111 |         background-size: cover;
112 |         background-position: center;
113 |         background-repeat: no-repeat;
114 | 
115 |         img {
116 |           width: 100%;
117 |         }
118 |       }
119 |     }
120 | 
121 |     .page-list-item__bd {
122 |       min-width: 60px;
123 | 
124 |       .page-list-item__title {
125 |         margin-bottom: .3em;
126 |         padding: 0 10px;
127 |         width: auto;
128 |         overflow: hidden;
129 |         text-overflow: ellipsis;
130 |         // white-space: nowrap;
131 |         // word-wrap: normal;
132 |         // word-wrap: break-word;
133 |         // word-break: break-all;
134 |         display: -webkit-box;
135 |         -webkit-box-orient: vertical;
136 |         -webkit-line-clamp: 2;
137 |         color: #333;
138 |         font-size: 12px;
139 |         height: 42px;
140 |       }
141 | 
142 |       .page-list-item__desc {
143 |         margin: 0;
144 |         padding: 0 10px;
145 |         line-height: 1.5;
146 |         overflow: hidden;
147 |         font-weight: 700;
148 |         color: #39362b;
149 |         font-size: 18px;
150 |       }
151 |     }
152 |   }
153 | }
154 | </style>
155 | 


--------------------------------------------------------------------------------
/src/components/shopping/goodsSearch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     :class="['comp-content', component.active ? 'active' : '']"
 4 |     :style="getStyle"
 5 |   >
 6 |     <div
 7 |       class="search-box"
 8 |       :style="{
 9 |         flexDirection: iconPosition ? 'row' : 'row-reverse',
10 |         borderRadius: (getSearchBoxHeight / 2) + 'px'
11 |       }"
12 |     >
13 |       <input
14 |         class="search_input"
15 |         readonly
16 |         type="text"
17 |         :style="{
18 |           height: getSearchBoxHeight + 'px',
19 |           borderRadius: (getSearchBoxHeight / 2) + 'px'
20 |         }"
21 |         placeholder="please enter..."
22 |       >
23 |       <i class="el-icon-search"></i>
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <script lang="ts">
29 | import { Component, Prop, Vue } from 'vue-property-decorator'
30 | 
31 | @Component({
32 |   name: 'GoodsSearch'
33 | })
34 | export default class GoodsSearch extends Vue {
35 |   @Prop({ default: null })
36 |   private component: any
37 | 
38 |   private get getStyle (): string {
39 |     const ret: Array<string> = []
40 |     this.component.style.forEach((item: any) => {
41 |       const unit: string = item.unit || ''
42 |       if (item.val) {
43 |         if (Array.isArray(item.attr)) {
44 |           item.attr.forEach((atr: string, i: number) => {
45 |             ret.push(atr + ':' + item.val[i])
46 |           })
47 |         } else {
48 |           ret.push(item.attr + ':' + item.val + unit)
49 |         }
50 |       }
51 |     })
52 |     return ret.join(';')
53 |   }
54 | 
55 |   private get getSearchBoxHeight (): number {
56 |     let arr = this.component.others.config.find((i: any) => i.attr === 'height')
57 |     return arr.val
58 |   }
59 | 
60 |   private get iconPosition (): Boolean {
61 |     let bool: Boolean = true
62 |     let arr = this.component.others.config.find((i: any) => i.attr === 'position')
63 | 
64 |     if (arr.val === 'left') {
65 |       bool = false
66 |     }
67 | 
68 |     return bool
69 |   }
70 | }
71 | </script>
72 | 
73 | <style lang="scss" scoped>
74 | .comp-content {
75 |   background-repeat: no-repeat;
76 | }
77 | .search-box {
78 |   display: flex;
79 |   justify-content: center;
80 |   align-items: center;
81 |   border: 1px solid #909299;
82 |   background-color: #fff;
83 | 
84 |   .search_input {
85 |     border: none;
86 |     outline: none;
87 |     width: 100%;
88 |     text-indent: 10px;
89 |     cursor: pointer;
90 |   }
91 | 
92 |   i {
93 |     margin: 0 10px;
94 |   }
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/components/slidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-sidebar">
  3 |     <div
  4 |       class="sidebar-menu-group"
  5 |       v-for="(menu, index) in menuData"
  6 |       :key="index"
  7 |     >
  8 |       <div
  9 |         class="menu-group-title"
 10 |         @click="menu.collapse = !menu.collapse"
 11 |       >
 12 |         {{menu.title}}
 13 |         <i :class="[!menu.collapse ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline']"></i>
 14 |       </div>
 15 |       <el-collapse-transition>
 16 |         <div
 17 |           v-show="!menu.collapse"
 18 |           class="menu-group-list"
 19 |         >
 20 |           <div
 21 |             v-for="(item, idx) in menu.items"
 22 |             :key="idx"
 23 |             class="menu-item"
 24 |             :data-key="item.key"
 25 |             draggable="true"
 26 |             @dragstart="menuDrag($event, item.key)"
 27 |           >
 28 |             <div class="item-icon-box">
 29 |               <!-- <i
 30 |                 :class="item.icon"
 31 |                 aria-hidden="true"
 32 |               ></i> -->
 33 |               <svg-icon :icon-class="item.icon" />
 34 |             </div>
 35 |             <p class="item-text-box">{{item.text}}</p>
 36 |           </div>
 37 |         </div>
 38 |       </el-collapse-transition>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script lang="ts">
 44 | import { Component, Vue } from 'vue-property-decorator'
 45 | 
 46 | import menuConfig from '@/config/slideMenuConfig'
 47 | 
 48 | interface IMenuConfig {
 49 |   title: string,
 50 |   collapse: Boolean,
 51 |   items: Array<IMenuItem>
 52 | }
 53 | 
 54 | interface IMenuItem {
 55 |   key: string,
 56 |   text: string,
 57 |   icon: string
 58 | }
 59 | 
 60 | @Component({
 61 |   name: 'AppSide'
 62 | })
 63 | export default class AppSide extends Vue {
 64 |   private menuData: Array<IMenuConfig> = menuConfig
 65 | 
 66 |   private menuDrag (e: any, key: string) {
 67 |     e.dataTransfer.setData('cmp-type', key)
 68 |   }
 69 | }
 70 | </script>
 71 | 
 72 | <style lang="scss" scoped>
 73 | .app-sidebar {
 74 |   padding-left: 14px;
 75 |   padding-bottom: 20px;
 76 |   box-sizing: border-box;
 77 |   overflow-y: auto;
 78 | 
 79 |   .sidebar-menu-group {
 80 |     position: relative;
 81 | 
 82 |     .menu-group-title {
 83 |       position: relative;
 84 |       height: 40px;
 85 |       line-height: 40px;
 86 |       cursor: pointer;
 87 |       font-size: 14px;
 88 | 
 89 |       > i {
 90 |         position: absolute;
 91 |         right: 12px;
 92 |         top: 14px;
 93 |         color: #999;
 94 |       }
 95 |     }
 96 |     .menu-group-list {
 97 |       overflow: hidden;
 98 | 
 99 |       .menu-item {
100 |         position: relative;
101 |         box-sizing: content-box;
102 |         float: left;
103 |         width: 85px;
104 |         height: 85px;
105 |         background: #f4f5f6;
106 |         color: #303133;
107 |         border-right: 1px solid #fff;
108 |         border-bottom: 1px solid #fff;
109 |         cursor: move;
110 |         z-index: 0;
111 | 
112 |         &:hover {
113 |           opacity: .6;
114 |         }
115 | 
116 |         .item-icon-box {
117 |           text-align: center;
118 |           margin-top: 18px;
119 |           height: 32px;
120 | 
121 |           > svg {
122 |             width: 24px;
123 |             height: 24px;
124 |           }
125 |         }
126 | 
127 |         .item-text-box {
128 |           text-align: center;
129 |           height: 20px;
130 |           line-height: 20px;
131 |           margin: 0;
132 |           font-size: 12px;
133 |         }
134 |       }
135 |     }
136 |   }
137 | }
138 | </style>
139 | 


--------------------------------------------------------------------------------
/src/components/svgIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     :class="svgClass"
 4 |     aria-hidden="true"
 5 |     v-on="$listeners"
 6 |   >
 7 |     <use :xlink:href="iconName" />
 8 |   </svg>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
13 | 
14 | @Component({
15 |   name: 'SvgIcon'
16 | })
17 | export default class SvgIcon extends Vue {
18 |   @Prop({ default: '', required: true })
19 |   private iconClass!: string
20 | 
21 |   @Prop({ default: '' })
22 |   private className!: string
23 | 
24 |   private get iconName (): string {
25 |     return `#icon-${this.iconClass}`
26 |   }
27 | 
28 |   private get svgClass (): string {
29 |     if (this.className) {
30 |       return 'svg-icon ' + this.className
31 |     } else {
32 |       return 'svg-icon'
33 |     }
34 |   }
35 | }
36 | </script>
37 | 
38 | <style lang="scss" scoped>
39 | .svg-icon {
40 |   width: 1em;
41 |   height: 1em;
42 |   vertical-align: -0.15em;
43 |   fill: currentColor;
44 |   overflow: hidden;
45 | }
46 | 
47 | .svg-external-icon {
48 |   background-color: currentColor;
49 |   mask-size: cover!important;
50 |   display: inline-block;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/components/swiper/scrollLeft.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <section
  7 |       class="no-scroll"
  8 |       id="scroll"
  9 |     >
 10 |       <div class="scroll-content">
 11 |         <div
 12 |           v-for="(item, index) in scrolls"
 13 |           :key="index"
 14 |           class="scroll-item"
 15 |         >
 16 |           <img
 17 |             v-if="item.val"
 18 |             :src="item.val"
 19 |           >
 20 |           <div
 21 |             v-else
 22 |             class="image-placeholder"
 23 |           >
 24 |             <i class="el-icon-picture-outline"></i>
 25 |           </div>
 26 |         </div>
 27 |       </div>
 28 |     </section>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script lang="ts">
 33 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 34 | import IScroll from 'iscroll'
 35 | 
 36 | @Component({
 37 |   name: 'ScrollLeft'
 38 | })
 39 | export default class ScrollLeft extends Vue {
 40 |   @Prop({ default: null })
 41 |   private component: any
 42 | 
 43 |   private noScroll: any = null
 44 |   private scrolls: Array<any> = this.component.action.config
 45 | 
 46 | 
 47 |   private get getStyle (): string {
 48 |     const ret: Array<string> = []
 49 |     this.component.style.forEach((item: any) => {
 50 |       const unit: string = item.unit || ''
 51 |       item.val && ret.push(item.attr + ':' + item.val + unit)
 52 |     })
 53 |     return ret.join(';')
 54 |   }
 55 | 
 56 |   @Watch('component', { deep: true })
 57 |   private watchComponent (): void {
 58 |     this.scrolls = this.component.action.config
 59 |     // 每改变项都需要重新初始化iscroll对象
 60 |     this.initScroll()
 61 |   }
 62 | 
 63 |   private mounted (): void {
 64 |     this.initScroll()
 65 |   }
 66 | 
 67 |   private initScroll (): void {
 68 |     this.noScroll = null
 69 |     setTimeout(() => {
 70 |       this.noScroll = new IScroll('#scroll', {
 71 |         scrollX: true,
 72 |         scrollY: false,
 73 |         eventPassthrough: true,
 74 |         preventDefault: false
 75 |       })
 76 |     }, 0)
 77 |   }
 78 | }
 79 | </script>
 80 | 
 81 | <style lang="scss" scoped>
 82 | .comp-content {
 83 |   overflow-x: hidden;
 84 | }
 85 | 
 86 | .no-scroll {
 87 |   position: relative;
 88 |   width: 96%;
 89 |   padding: 10px 2%;
 90 |   height: 100px;
 91 |   box-sizing: content-box;
 92 |   white-space: nowrap;
 93 |   -webkit-overflow-scrolling: touch;
 94 |   text-align: center;
 95 | 
 96 |   .scroll-content {
 97 |     position: absolute;
 98 |     white-space: nowrap;
 99 |     padding-right: 20px;
100 |     box-sizing: content-box;
101 |     transform: translateZ(0);
102 |     text-size-adjust: none;
103 |     font-size: 0;
104 |     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
105 |     z-index: 1;
106 | 
107 |     .scroll-item {
108 |       display: inline-block;
109 |       width: 100px;
110 |       height: 100px;
111 |       flex-shrink: 0;
112 |       margin-right: 8px;
113 |       vertical-align: top;
114 |       background: #FFF;
115 |       box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .15);
116 |       font-size: 0;
117 | 
118 |       > img {
119 |         display: block;
120 |         width: 100%;
121 |         height: 100%;
122 |         margin: 0 auto;
123 |         -webkit-user-drag: none;
124 |       }
125 | 
126 |       > .image-placeholder {
127 |         display: flex;
128 |         justify-content: center;
129 |         align-items: center;
130 |         width: 100%;
131 |         height: 100px;
132 |         border: 1px solid #e8e8e8;
133 |         box-sizing: border-box;
134 | 
135 |         > i {
136 |           font-size: 32px;
137 |         }
138 |       }
139 |     }
140 |   }
141 | }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/src/components/swiper/swiperBanner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :class="['comp-content', component.active ? 'active' : '']"
  4 |     :style="getStyle"
  5 |   >
  6 |     <el-carousel
  7 |       trigger="click"
  8 |       :height="height"
  9 |       :id="component.domId"
 10 |       :indicator-position="pagination ? '' : 'none'"
 11 |       :autoplay="autoplay"
 12 |       :interval="interval"
 13 |       class="swiper-container"
 14 |     >
 15 |       <el-carousel-item
 16 |         v-for="(banner, index) in banners"
 17 |         :key="index"
 18 |         class="swiper-slide"
 19 |       >
 20 |         <img
 21 |           :src="banner.val"
 22 |           alt=""
 23 |           class="swiper_img"
 24 |         >
 25 |       </el-carousel-item>
 26 |     </el-carousel>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script lang="ts">
 31 | import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
 32 | 
 33 | @Component({
 34 |   name: 'SwiperBanner'
 35 | })
 36 | export default class SwiperBanner extends Vue {
 37 |   @Prop({ default: null })
 38 |   private component: any
 39 | 
 40 |   private banners: Array<any> = this.component.action.config
 41 |   private autoplay: Boolean = this.component.base[0].val
 42 |   private pagination: Boolean = this.component.base[1].val
 43 |   private interval: number = this.component.base[2].val
 44 |   private height: string = this.getMaxHeight()
 45 |   private width: string = this.getWidth()
 46 | 
 47 |   private get getStyle (): string {
 48 |     const ret: Array<string> = []
 49 |     this.component.style.forEach((item: any) => {
 50 |       const unit: string = item.unit || ''
 51 |       item.val && ret.push(item.attr + ':' + item.val + unit)
 52 |     })
 53 |     return ret.join(';')
 54 |   }
 55 | 
 56 |   @Watch('component', { deep: true })
 57 |   private watchComponent (): void {
 58 |     this.banners = this.component.action.config
 59 |     this.autoplay = this.component.base[0].val
 60 |     this.pagination = this.component.base[1].val
 61 |     this.interval = this.component.base[2].val
 62 |     this.height = this.getMaxHeight()
 63 |     this.width = this.getWidth()
 64 |   }
 65 | 
 66 |   private getMaxHeight (): string {
 67 |     let h:number = 0
 68 |     if (this.component.action.config && this.component.action.config.length) {
 69 |       this.component.action.config.forEach((item: any) => {
 70 |         if (item.height && item.height > h) {
 71 |           h = item.height
 72 |         }
 73 |       })
 74 |     }
 75 |     return h > 0 ? h / 2 + 'px' : '112px'
 76 |   }
 77 | 
 78 |   private getWidth (): string {
 79 |     return (750 - this.component.style[2].val - this.component.style[4].val) / 2 + 'px'
 80 |   }
 81 | }
 82 | </script>
 83 | 
 84 | <style lang="scss" scoped>
 85 | .swiper-container {
 86 |   width: 100%;
 87 | 
 88 |   .swiper-slide {
 89 |     text-align: center;
 90 |     display: flex;
 91 |     justify-content: center;
 92 |     align-items: center;
 93 | 
 94 |     .swiper_img {
 95 |       width: 100%;
 96 |       height: auto;
 97 |       -webkit-user-drag: none;
 98 |     }
 99 |   }
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/toolbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-row class="app-toolbar">
 3 |     <el-col :span="8">
 4 |       <span>
 5 |         <i class="el-icon-mobile-phone"></i>
 6 |       </span>
 7 |     </el-col>
 8 |     <el-col :span="16">
 9 |       <div
10 |         class="bar-btn"
11 |         @click="saveAll"
12 |       >
13 |         <i class="el-icon-success"></i>
14 |         <span>保存</span>
15 |       </div>
16 |       <div
17 |         class="bar-btn"
18 |         @click="showPreview"
19 |       >
20 |         <i class="el-icon-view"></i>
21 |         <span>预览</span>
22 |       </div>
23 |       <div
24 |         class="bar-btn"
25 |         @click="reset"
26 |       >
27 |         <i class="el-icon-refresh"></i>
28 |         <span>重置</span>
29 |       </div>
30 |       <div
31 |         class="bar-btn"
32 |         @click="showPageSet"
33 |       >
34 |         <i class="el-icon-setting"></i>
35 |         <span>页面设置</span>
36 |       </div>
37 |     </el-col>
38 |   </el-row>
39 | </template>
40 | 
41 | <script lang="ts">
42 | import { Component, Vue } from 'vue-property-decorator'
43 | 
44 | @Component({
45 |   name: 'AppToolbar'
46 | })
47 | export default class AppToolbar extends Vue {
48 |   private showPageSet (): void {
49 |     this.$emit('showPageSet')
50 |   }
51 | 
52 |   private showPreview (): void {
53 |     this.$emit('showPreview')
54 |   }
55 | 
56 |   private saveAll (): void {
57 |     this.$emit('savePageSet')
58 |   }
59 | 
60 |   private reset (): void {
61 |     this.$emit('reset')
62 |   }
63 | }
64 | </script>
65 | 
66 | <style lang="scss" scoped>
67 | .app-toolbar {
68 |   position: relative;
69 |   height: 40px;
70 |   line-height: 38px;
71 |   background-color: #fff;
72 |   border-bottom: 1px solid #e8e8e8;
73 |   padding-left: 15px;
74 | 
75 |   > :last-child {
76 |     text-align: right;
77 |   }
78 | 
79 |   .bar-btn {
80 |     display: inline-block;
81 |     white-space: nowrap;
82 |     padding: 0 16px;
83 |     font-size: 14px;
84 |     text-align: center;
85 |     vertical-align: middle;
86 |     user-select: none;
87 |     cursor: pointer;
88 | 
89 |     &:hover {
90 |       background-color: #e8e8e8;
91 |     }
92 |   }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/config/appPageConfig.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   title: '页面配置',
 3 |   base: [
 4 |     {
 5 |       type: 'text',
 6 |       label: '页面名称',
 7 |       attr: 'page-name',
 8 |       placeholder: '页面名称',
 9 |       val: '',
10 |       isNecessary: true
11 |     }
12 |   ],
13 |   style: [
14 |     {
15 |       type: 'color-picker',
16 |       label: '背景颜色',
17 |       attr: 'background-color',
18 |       val: '#ffffff'
19 |     }, {
20 |       type: 'upload',
21 |       label: '背景图片',
22 |       attr: 'background-image',
23 |       val: ''
24 |     }, {
25 |       type: 'select',
26 |       label: '背景效果',
27 |       attr: 'background-repeat',
28 |       val: '',
29 |       options: [
30 |         {
31 |           name: '无',
32 |           val: 'no-repeat'
33 |         }, {
34 |           name: '水平重复',
35 |           val: 'repeat-x'
36 |         }, {
37 |           name: '垂直重复',
38 |           val: 'repeat-y'
39 |         }, {
40 |           name: '水平+垂直重复',
41 |           val: 'repeat'
42 |         }
43 |       ]
44 |     }
45 |   ],
46 |   weixin: [
47 |     {
48 |       type: 'text',
49 |       label: 'jssdk api',
50 |       attr: 'page-share-api',
51 |       placeholder: '微信分享接口地址',
52 |       val: '',
53 |       isNecessary: true
54 |     }, {
55 |       type: 'text',
56 |       label: '跳转地址',
57 |       attr: 'page-share-url',
58 |       placeholder: '跳转地址，不填则代表当前页',
59 |       val: '',
60 |       isNecessary: false
61 |     }, {
62 |       type: 'text',
63 |       label: '分享标题',
64 |       attr: 'page-share-title',
65 |       placeholder: '微信分享的标题',
66 |       val: '',
67 |       isNecessary: true
68 |     }, {
69 |       type: 'textarea',
70 |       label: '分享描述',
71 |       attr: 'page-share-desc',
72 |       placeholder: '微信分享的描述文字',
73 |       val: '',
74 |       isNecessary: true
75 |     }, {
76 |       type: 'upload',
77 |       label: '分享图标',
78 |       attr: 'page-share-icon',
79 |       val: '',
80 |       isNecessary: true
81 |     }, {
82 |       type: 'desc',
83 |       label: '使用说明',
84 |       val: `获取微信签名的接口请使用get(application/json)方式，跨域需接口支持，返回格式如下：<br/>
85 |            {
86 |               data: {
87 |                 appId: 'appId',
88 |                 timestamp: 15888888,
89 |                 nonceStr: 'nonceStr',
90 |                 signature: 'signature',
91 |               },
92 |               msg: '不为空则提示该消息'
93 |            }`
94 |     }
95 |   ]
96 | }
97 | 


--------------------------------------------------------------------------------
/src/config/slideMenuConfig.ts:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   {
  3 |     title: '通用组件',
  4 |     collapse: false,
  5 |     items: [
  6 |       {
  7 |         key: 'text',
  8 |         text: '文本',
  9 |         icon: 'document'
 10 |       }, {
 11 |         key: 'img',
 12 |         text: '图片',
 13 |         icon: 'image'
 14 |       }, {
 15 |         key: 'form',
 16 |         text: '表单',
 17 |         icon: 'form'
 18 |       }, {
 19 |         key: 'page-title',
 20 |         text: '标题',
 21 |         icon: 'title'
 22 |       }, {
 23 |         key: 'page-paragraph',
 24 |         text: '段落',
 25 |         icon: 'paragraph'
 26 |       }, {
 27 |         key: 'page-intro',
 28 |         text: '引言',
 29 |         icon: 'introduction'
 30 |       }, {
 31 |         key: 'timeout',
 32 |         text: '倒计时',
 33 |         icon: 'countDown'
 34 |       }, {
 35 |         key: 'floor-title',
 36 |         text: '楼层标题',
 37 |         icon: 'floorTitle'
 38 |       }
 39 |     ]
 40 |   }, {
 41 |     title: '导航组件',
 42 |     collapse: false,
 43 |     items: [
 44 |       {
 45 |         key: 'bottom-menu',
 46 |         text: '底部导航',
 47 |         icon: 'tabbar'
 48 |       }, {
 49 |         key: 'grid-menu',
 50 |         text: '网格导航',
 51 |         icon: 'grid'
 52 |       }, {
 53 |         key: 'floor-menu',
 54 |         text: '楼层导航',
 55 |         icon: 'floorNav'
 56 |       }
 57 |     ]
 58 |   }, {
 59 |     title: '布局组件',
 60 |     collapse: false,
 61 |     items: [
 62 |       {
 63 |         key: 'layout-repeat',
 64 |         text: '平铺布局',
 65 |         icon: 'layoutRepeat'
 66 |       }, {
 67 |         key: 'layout-left',
 68 |         text: '两栏布局左',
 69 |         icon: 'layoutLeft'
 70 |       }, {
 71 |         key: 'layout-right',
 72 |         text: '两栏布局右',
 73 |         icon: 'layoutRight'
 74 |       }
 75 |     ]
 76 |   // }, {
 77 |   //   title: '公共组件',
 78 |   //   collapse: false,
 79 |   //   items: [
 80 |   //     {
 81 |   //       key: 'page-faq',
 82 |   //       text: 'FAQ',
 83 |   //       icon: 'faq'
 84 |   //     }, {
 85 |   //       key: 'page-guide',
 86 |   //       text: '步骤',
 87 |   //       icon: 'step'
 88 |   //     }, {
 89 |   //       key: 'page-footer',
 90 |   //       text: '页脚',
 91 |   //       icon: 'copyright'
 92 |   //     }
 93 |   //   ]
 94 |   }, {
 95 |     title: '商城组件',
 96 |     collapse: false,
 97 |     items: [
 98 |       {
 99 |         key: 'goods-search',
100 |         text: '商品搜索',
101 |         icon: 'search'
102 |       }, {
103 |         key: 'coupon',
104 |         text: '优惠券',
105 |         icon: 'coupon'
106 |       }, {
107 |         key: 'goods',
108 |         text: '自定义商品',
109 |         icon: 'shopping'
110 |       }
111 |     ]
112 |   }, {
113 |     title: '轮播组件',
114 |     collapse: false,
115 |     items: [
116 |       {
117 |         key: 'swiper-banner',
118 |         text: '轮播图',
119 |         icon: 'carousel'
120 |       }, {
121 |         key: 'scroll-left',
122 |         text: '横向滚动',
123 |         icon: 'rowScroll'
124 |       }
125 |     ]
126 |   }, {
127 |     title: '图文列表',
128 |     collapse: false,
129 |     items: [
130 |       {
131 |         key: 'horizontal-list',
132 |         text: '横向列表',
133 |         icon: 'directionList'
134 |       }, {
135 |         key: 'vertical-list',
136 |         text: '纵向列表',
137 |         icon: 'transverseList'
138 |       }
139 |     ]
140 |   }, {
141 |     title: '动画组件',
142 |     collapse: false,
143 |     items: [
144 |       {
145 |         key: 'news-marquee',
146 |         text: '滚动新闻',
147 |         icon: 'roll'
148 |       }
149 |     ]
150 |   }
151 | ]
152 | 


--------------------------------------------------------------------------------
/src/icons/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import SvgIcon from '@/components/svgIcon.vue'
3 | 
4 | Vue.component('svg-icon', SvgIcon)
5 | 
6 | const req = require.context('./svg', false, /\.svg$/)
7 | const requireAll = (requireContext: any) => requireContext.keys().map(requireContext)
8 | requireAll(req)
9 | 


--------------------------------------------------------------------------------
/src/icons/svg/blod.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M603.3 486.2v-5.1c157.1-6.8 242.3-72.9 255.7-198.4C849 140.3 740.4 67.3 533.1 63.9H117v45.8c86.9-3.3 127 23.7 120.3 81.4v636c6.7 64.4-33.4 93.3-120.3 86.5v45.8h491.3c167.1-6.8 264-88.2 290.8-244.2-6.7-142.5-105.3-218.8-295.8-229zM483 109.7c153.7-3.3 228.9 57.7 225.6 183.2 3.3 118.8-68.5 176.4-215.6 173H367.7V170.8c-10-40.7 28.4-61.1 115.3-61.1z m15 803.9c-97 6.8-140.4-22.1-130.4-86.5V511.6h205.5c117 3.4 177.2 71.2 180.5 203.5C757 850.8 671.8 916.9 498 913.6z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/carousel.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1144 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M331.294118 903.529412a60.235294 60.235294 0 1 1 0 120.470588 60.235294 60.235294 0 0 1 0-120.470588z m240.941176 0a60.235294 60.235294 0 1 1 0 120.470588 60.235294 60.235294 0 0 1 0-120.470588z m240.941177 0a60.235294 60.235294 0 1 1 0 120.470588 60.235294 60.235294 0 0 1 0-120.470588z m150.588235-903.529412a180.705882 180.705882 0 0 1 180.705882 180.705882v481.882353a180.705882 180.705882 0 0 1-180.705882 180.705883H180.705882a180.705882 180.705882 0 0 1-180.705882-180.705883V180.705882a180.705882 180.705882 0 0 1 180.705882-180.705882h783.058824z m0 90.352941H180.705882a90.352941 90.352941 0 0 0-90.202353 85.052235L90.352941 180.705882v481.882353a90.352941 90.352941 0 0 0 85.052235 90.202353L180.705882 752.941176h783.058824a90.352941 90.352941 0 0 0 90.202353-85.052235L1054.117647 662.588235V180.705882a90.352941 90.352941 0 0 0-85.052235-90.202353L963.764706 90.352941zM573.259294 521.938824l5.210353 6.234352 7.137882 8.884706a145.167059 145.167059 0 0 0 215.762824 19.817412l5.903059-5.812706 34.032941-35.599059A30.117647 30.117647 0 0 1 887.265882 554.164706l-2.409411 2.891294-34.032942 35.599059a205.402353 205.402353 0 0 1-26.413176 23.280941c-89.148235 65.897412-213.985882 48.971294-281.810824-36.020706l-4.638117-6.023529-6.354824-7.890824a174.501647 174.501647 0 0 0-242.176-28.732235 30.117647 30.117647 0 1 1-36.743529-47.736471 234.736941 234.736941 0 0 1 320.572235 32.406589zM813.176471 150.588235a120.470588 120.470588 0 1 1 0 240.941177 120.470588 120.470588 0 0 1 0-240.941177z m0 60.235294a60.235294 60.235294 0 1 0 0 120.470589 60.235294 60.235294 0 0 0 0-120.470589z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/clipboard.svg:
--------------------------------------------------------------------------------
1 | <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/countDown.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M104.253793 834.436414C75.881931 834.436414 52.965517 858.482759 52.965517 888.28469v81.867034C52.965517 999.847724 75.987862 1024 104.253793 1024h66.983724v-74.328276H104.253793c10.681379 0 19.332414 9.057103 19.332414 20.48v-81.867034c0 11.29931-8.756966 20.48-19.332414 20.48h66.983724v-74.328276H104.253793zM919.746207 1024C948.118069 1024 971.034483 999.953655 971.034483 970.151724v-81.867034c0-29.696-23.022345-53.848276-51.288276-53.848276h-66.983724l34.833655 31.020138C854.157241 655.660138 716.25269 499.923862 512 499.923862c-204.270345 0-342.157241 155.718621-375.596138 365.53269l69.649655 12.305655c27.753931-174.150621 136.315586-303.492414 305.946483-303.492414s278.192552 129.341793 305.946483 303.492414l4.943448 31.020138h96.856276c-10.681379 0-19.332414-9.074759-19.332414-20.497655v81.867034c0-11.29931 8.756966-20.48 19.332414-20.48h-66.983724V1024h66.983724zM104.253793 0C75.881931 0 52.965517 24.046345 52.965517 53.848276v81.867034c0 29.696 23.022345 53.848276 51.288276 53.848276h66.983724L136.403862 158.543448C169.842759 368.339862 307.74731 524.076138 512 524.076138c204.270345 0 342.157241-155.718621 375.596138-365.53269L852.744828 189.563586h66.983724c28.371862 0 51.288276-24.046345 51.288276-53.848276V53.848276C971.034483 24.152276 948.012138 0 919.746207 0h-66.983724v74.328276h66.983724C909.064828 74.328276 900.413793 65.288828 900.413793 53.848276v81.867034c0-11.29931 8.756966-20.48 19.332414-20.48H822.907586l-4.943448 31.002483c-27.753931 174.150621-136.315586 303.492414-305.946483 303.492414s-278.192552-129.341793-305.946483-303.492414l-4.943448-31.020138H104.253793C114.935172 115.217655 123.586207 124.292414 123.586207 135.71531V53.848276c0 11.29931-8.756966 20.48-19.332414 20.48h66.983724V0H104.253793zM852.744828 74.328276V0H171.255172v74.328276H852.744828zM171.255172 115.23531v74.328276H852.744828v-74.328276H171.255172zM852.744828 908.782345v-74.328276H171.255172v74.328276H852.744828zM171.255172 949.654069V1024H852.744828v-74.328276H171.255172z"></path></svg>


--------------------------------------------------------------------------------
/src/icons/svg/coupon.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1260 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M1196.662154 424.881231l7.640615-1.732923a75.382154 75.382154 0 0 0 54.980923-70.892308v-265.452308c0-47.261538-38.439385-85.700923-85.700923-85.700923H85.937231C38.675692 1.102769 0.315077 39.542154 0.315077 86.803692v264.349539c0 36.233846 25.836308 67.111385 61.44 73.491692l2.678154 0.472615c28.356923 5.12 48.915692 29.696 48.915692 58.604308 0 28.435692-20.48 53.169231-51.593846 59.155692a75.224615 75.224615 0 0 0-61.44 72.467693v265.294769c0 47.261538 38.439385 85.700923 85.622154 85.700923H1173.661538c47.261538 0 85.700923-38.439385 85.700924-85.700923V616.290462c0-36.233846-25.915077-67.111385-64.196924-73.964308a59.392 59.392 0 0 1-48.915692-58.604308 59.864615 59.864615 0 0 1 50.412308-58.840615z m-15.36 194.166154v261.592615a7.876923 7.876923 0 0 1-7.719385 7.719385H483.249231c0.236308-2.048 1.181538-3.859692 1.181538-5.986462V713.334154a45.134769 45.134769 0 0 0-45.056-45.056 45.134769 45.134769 0 0 0-44.977231 45.056v169.038769c0 2.126769 0.945231 3.938462 1.181539 5.986462h-309.563077a7.876923 7.876923 0 0 1-7.798154-7.719385V619.126154l2.914462-0.551385A138.397538 138.397538 0 0 0 191.330462 483.643077c0-66.244923-47.025231-122.88-113.112616-135.325539V86.803692a7.876923 7.876923 0 0 1 7.719385-7.719384h309.641846c-0.236308 2.048-1.181538 3.859692-1.181539 5.986461v169.038769c0 24.733538 20.243692 44.977231 44.977231 44.977231a45.134769 45.134769 0 0 0 45.056-44.977231V85.070769c0-2.126769-0.945231-3.938462-1.181538-5.986461h690.333538a7.876923 7.876923 0 0 1 7.798154 7.719384v260.726154l-3.072 1.496616a138.397538 138.397538 0 0 0-110.040615 134.695384c0 65.772308 46.237538 122.092308 113.112615 135.325539z"></path><path d="M439.374769 373.681231a45.134769 45.134769 0 0 0-44.977231 44.977231v130.048c0 24.812308 20.243692 45.056 44.977231 45.056a45.134769 45.134769 0 0 0 45.056-45.056v-129.969231a45.134769 45.134769 0 0 0-45.056-45.056z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/directionList.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M170.666667 227.555556v227.555555h682.666666V227.555556H170.666667z m625.777777 56.888888v113.777778H227.555556V284.444444h568.888888zM170.666667 568.888889v227.555555h682.666666v-227.555555H170.666667z m625.777777 56.888889v113.777778H227.555556v-113.777778h568.888888zM56.888889 56.888889h910.222222v56.888889H56.888889zM56.888889 910.222222h910.222222v56.888889H56.888889z" ></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/document.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M650.666667 42.666667a32.277333 32.277333 0 0 1 14.592 3.52l1.408 0.768a36.224 36.224 0 0 1 4.202666 2.88l0.533334 0.448 1.472 1.344 214.186666 214.186666 0.661334 0.704 0.170666 0.192-1.28-1.344 1.770667 1.92 0.704 0.853334a33.642667 33.642667 0 0 1 1.877333 2.602666l0.746667 1.258667 0.768 1.386667c2.261333 4.394667 3.52 9.344 3.52 14.613333V938.666667a42.666667 42.666667 0 0 1-42.666667 42.666666H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666666V85.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h480zM576 106.666667H192v810.666666h640V362.666667H618.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V106.666667z m-32 554.666666a32 32 0 0 1 0 64h-170.666667a32 32 0 0 1 0-64h170.666667z m110.229333-192c15.701333 0 28.437333 14.336 28.437334 32s-12.736 32-28.437334 32H369.770667C354.069333 533.333333 341.333333 518.997333 341.333333 501.333333s12.736-32 28.437334-32h284.458666zM640 109.248V298.666667h189.418667L640 109.248z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/floorNav.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M184 184v208h208V184H184z m-40-72h288c17.673 0 32 14.327 32 32v288c0 17.673-14.327 32-32 32H144c-17.673 0-32-14.327-32-32V144c0-17.673 14.327-32 32-32z m506.44 175.293l86.267 86.267 84.853-84.853-86.267-86.267-84.853 84.853z m107.48-152.735L889.442 266.08c12.497 12.496 12.497 32.758 0 45.255L759.335 441.442c-12.497 12.497-32.759 12.497-45.255 0L582.558 309.92c-12.497-12.496-12.497-32.758 0-45.255l130.107-130.107c12.497-12.497 32.759-12.497 45.255 0zM184 632v208h208V632H184z m-40-72h288c17.673 0 32 14.327 32 32v288c0 17.673-14.327 32-32 32H144c-17.673 0-32-14.327-32-32V592c0-17.673 14.327-32 32-32z m488 72v208h208V632H632z m-40-72h288c17.673 0 32 14.327 32 32v288c0 17.673-14.327 32-32 32H592c-17.673 0-32-14.327-32-32V592c0-17.673 14.327-32 32-32z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/floorTitle.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M116.181404 133.722146 116.181404 441.133425 201.417293 441.133425 201.417293 133.722146 317.598697 133.722146 317.598697 64 0 64 0 133.722146 116.181404 133.722146ZM412.356282 125.799174 412.356282 64 335.263948 64 335.263948 125.799174 412.356282 125.799174ZM335.263948 168.055021 335.263948 441.133425 412.356282 441.133425 412.356282 168.055021 335.263948 168.055021ZM550.003263 168.055021 550.003263 86.184319 472.91093 86.184319 472.91093 168.055021 426.221206 168.055021 426.221206 218.233837 472.91093 218.233837 472.91093 379.33425C472.91093 393.067469 475.263489 404.159517 479.968678 412.610729 484.673868 421.06194 491.098164 427.576318 499.241762 432.154058 507.385359 436.731797 516.795596 439.812922 527.472757 441.397524 538.149917 442.982126 549.4603 443.774415 561.404242 443.774415 569.004932 443.774415 576.786475 443.598351 584.749103 443.246218 592.711731 442.894084 599.950376 442.189827 606.465253 441.133425L606.465253 383.031637C602.845877 383.735905 599.045588 384.264097 595.064275 384.616231 591.082961 384.968365 586.92074 385.144429 582.577488 385.144429 569.547733 385.144429 560.86136 383.031658 556.518108 378.806052 552.174856 374.580447 550.003263 366.129362 550.003263 353.452545L550.003263 218.233837 606.465253 218.233837 606.465253 168.055021 550.003263 168.055021ZM624.673409 64 624.673409 441.133425 701.765741 441.133425 701.765741 64 624.673409 64ZM930.620557 275.279229 805.209786 275.279229C805.571725 269.997222 806.748006 264.011037 808.738662 257.320495 810.729318 250.629953 814.167674 244.291639 819.05383 238.305364 823.939994 232.31909 830.454771 227.301258 838.598368 223.25172 846.741965 219.20218 856.966547 217.177441 869.272429 217.177441 888.09319 217.177441 902.118061 222.107241 911.347469 231.966988 920.576883 241.826734 927.001178 256.264004 930.620557 275.279229L930.620557 275.279229ZM805.209786 322.817057 1007.71289 322.817057C1009.16064 301.689028 1007.350976 281.441637 1002.283853 262.074278 997.216723 242.706918 988.982765 225.45262 977.581728 210.310867 966.180691 195.169113 951.612922 183.10871 933.877978 174.129299 916.143034 165.149886 895.33193 160.660248 871.444045 160.660248 850.089722 160.660248 830.635866 164.357597 813.081888 171.752407 795.527917 179.147217 780.417248 189.270913 767.749427 202.123796 755.081613 214.97668 745.30944 230.206239 738.432627 247.81293 731.555808 265.41962 728.117453 284.434561 728.117453 304.858322 728.117453 325.986351 731.465325 345.35342 738.161171 362.96011 744.857018 380.566801 754.357741 395.708327 766.663622 408.385144 778.969498 421.061962 793.98969 430.833528 811.724634 437.700138 829.459578 444.566747 849.36585 448 871.444045 448 903.29456 448 930.439475 440.957429 952.87961 426.872077 975.319744 412.786724 991.968627 389.370177 1002.826752 356.621733L934.963782 356.621733C932.430221 365.072945 925.55351 373.083869 914.33344 380.654746 903.113376 388.225622 889.721882 392.011004 874.158566 392.011004 852.442304 392.011004 835.793421 386.553012 824.211418 375.636864 812.629414 364.720716 806.295597 347.114289 805.209786 322.817057ZM0 576 1024 576 1024 640 0 640 0 576ZM0 768 1024 768 1024 832 0 832 0 768ZM0 960 768 960 768 1024 0 1024 0 960Z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/form.svg:
--------------------------------------------------------------------------------
1 | <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/grid.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M256 0 51.2 0C23.04 0 0 23.04 0 51.2L0 256c0 28.16 23.04 51.2 51.2 51.2L256 307.2c28.16 0 51.2-23.04 51.2-51.2L307.2 51.2C307.2 23.04 284.16 0 256 0zM256 230.4C256 244.544 244.544 256 230.4 256L76.8 256C62.656 256 51.2 244.544 51.2 230.4L51.2 76.8c0-14.144 11.456-25.6 25.6-25.6l153.6 0C244.544 51.2 256 62.656 256 76.8L256 230.4z"></path><path d="M256 716.8 51.2 716.8C23.04 716.8 0 739.84 0 768l0 204.8C0 1000.96 23.04 1024 51.2 1024L256 1024c28.16 0 51.2-23.04 51.2-51.2L307.2 768C307.2 739.84 284.16 716.8 256 716.8zM256 947.2c0 14.144-11.456 25.6-25.6 25.6L76.8 972.8c-14.144 0-25.6-11.456-25.6-25.6l0-153.6c0-14.144 11.456-25.6 25.6-25.6l153.6 0C244.544 768 256 779.456 256 793.6L256 947.2z"></path><path d="M972.8 716.8 768 716.8c-28.16 0-51.2 23.04-51.2 51.2l0 204.8c0 28.16 23.04 51.2 51.2 51.2l204.8 0c28.16 0 51.2-23.04 51.2-51.2L1024 768C1024 739.84 1000.96 716.8 972.8 716.8zM972.8 947.2c0 14.144-11.456 25.6-25.6 25.6l-153.6 0c-14.144 0-25.6-11.456-25.6-25.6l0-153.6c0-14.144 11.456-25.6 25.6-25.6l153.6 0c14.144 0 25.6 11.456 25.6 25.6L972.8 947.2z"></path><path d="M614.4 716.8 409.6 716.8c-28.16 0-51.2 23.04-51.2 51.2l0 204.8c0 28.16 23.04 51.2 51.2 51.2l204.8 0c28.16 0 51.2-23.04 51.2-51.2L665.6 768C665.6 739.84 642.56 716.8 614.4 716.8zM614.4 947.2c0 14.144-11.456 25.6-25.6 25.6L435.2 972.8c-14.144 0-25.6-11.456-25.6-25.6l0-153.6c0-14.144 11.456-25.6 25.6-25.6l153.6 0c14.144 0 25.6 11.456 25.6 25.6L614.4 947.2z"></path><path d="M972.8 0 768 0c-28.16 0-51.2 23.04-51.2 51.2L716.8 256c0 28.16 23.04 51.2 51.2 51.2l204.8 0C1000.96 307.2 1024 284.16 1024 256L1024 51.2C1024 23.04 1000.96 0 972.8 0zM972.8 230.4c0 14.144-11.456 25.6-25.6 25.6l-153.6 0C779.456 256 768 244.544 768 230.4L768 76.8c0-14.144 11.456-25.6 25.6-25.6l153.6 0c14.144 0 25.6 11.456 25.6 25.6L972.8 230.4z"></path><path d="M614.4 0 409.6 0C381.44 0 358.4 23.04 358.4 51.2L358.4 256c0 28.16 23.04 51.2 51.2 51.2l204.8 0c28.16 0 51.2-23.04 51.2-51.2L665.6 51.2C665.6 23.04 642.56 0 614.4 0zM614.4 230.4C614.4 244.544 602.944 256 588.8 256L435.2 256C421.056 256 409.6 244.544 409.6 230.4L409.6 76.8c0-14.144 11.456-25.6 25.6-25.6l153.6 0c14.144 0 25.6 11.456 25.6 25.6L614.4 230.4z"></path><path d="M256 358.4 51.2 358.4C23.04 358.4 0 381.44 0 409.6l0 204.8c0 28.16 23.04 51.2 51.2 51.2L256 665.6c28.16 0 51.2-23.04 51.2-51.2L307.2 409.6C307.2 381.44 284.16 358.4 256 358.4zM256 588.8c0 14.144-11.456 25.6-25.6 25.6L76.8 614.4c-14.144 0-25.6-11.456-25.6-25.6L51.2 435.2c0-14.144 11.456-25.6 25.6-25.6l153.6 0C244.544 409.6 256 421.056 256 435.2L256 588.8z"></path><path d="M972.8 358.4 768 358.4c-28.16 0-51.2 23.04-51.2 51.2l0 204.8c0 28.16 23.04 51.2 51.2 51.2l204.8 0c28.16 0 51.2-23.04 51.2-51.2L1024 409.6C1024 381.44 1000.96 358.4 972.8 358.4zM972.8 588.8c0 14.144-11.456 25.6-25.6 25.6l-153.6 0c-14.144 0-25.6-11.456-25.6-25.6L768 435.2c0-14.144 11.456-25.6 25.6-25.6l153.6 0c14.144 0 25.6 11.456 25.6 25.6L972.8 588.8z"></path><path d="M614.4 358.4 409.6 358.4c-28.16 0-51.2 23.04-51.2 51.2l0 204.8c0 28.16 23.04 51.2 51.2 51.2l204.8 0c28.16 0 51.2-23.04 51.2-51.2L665.6 409.6C665.6 381.44 642.56 358.4 614.4 358.4zM614.4 588.8c0 14.144-11.456 25.6-25.6 25.6L435.2 614.4c-14.144 0-25.6-11.456-25.6-25.6L409.6 435.2c0-14.144 11.456-25.6 25.6-25.6l153.6 0c14.144 0 25.6 11.456 25.6 25.6L614.4 588.8z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/image.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M847.8 64.8H176.2c-61.8 0-111.9 50.1-111.9 111.8v670.8c0 61.8 50.1 111.8 111.9 111.8h671.5c61.8 0 111.9-50.1 111.9-111.8V176.6c0.1-61.7-50.1-111.8-111.8-111.8z m-658.6 71.1h645.4c29.7 0 53.8 24 53.8 53.7V640L751.2 454.8c-6.8-9.3-17.8-14.9-29.6-15.2-11.8-0.3-23.1 4.7-30.4 13.6L491.3 694.4l-128.9-117c-13.2-12-33.6-13.2-48.2-2.8L135.5 701.4V189.6c0-29.6 24-53.7 53.7-53.7zM834.7 888H189.2c-29.7 0-53.8-24-53.8-53.7v-44.1c2.2-1 4.4-2.2 6.4-3.7l191.8-136 135.7 123.2c7.7 7 18 10.5 28.5 9.8s20.2-5.6 26.8-13.5L719 535.5l154.7 209c3.9 5.3 9.1 9.2 14.8 11.8v78c0 29.6-24.1 53.7-53.8 53.7z"></path><path d="M341 424c57.3 0 104-46.7 104-104s-46.7-104-104-104-104 46.7-104 104 46.7 104 104 104z m0-136c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.2-32 32-32z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/introduction.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M576.967111 554.894222C576.967111 227.84 849.550222 34.844444 1024 0v192.995556c-95.402667 29.496889-209.891556 179.598222-215.324444 343.125333H1024V739.555556c0 157.098667-127.345778 284.444444-284.444444 284.444444h-162.588445V554.894222zM0 554.894222C0 227.84 272.583111 34.844444 447.032889 0v192.995556c-95.402667 29.496889-209.891556 179.598222-215.324445 343.125333h212.593778V739.555556c0 157.098667-127.345778 284.444444-284.444444 284.444444H0V554.894222z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/italic.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M897.948071 61.745273l0 64.321958L769.298885 126.06723 447.675918 897.933793l128.649186 0 0 64.320934-450.273176 0 0-64.320934 128.65021 0 321.622966-771.865539L447.675918 126.068254 447.675918 61.745273 897.948071 61.745273z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/layoutLeft.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M832 1024H192a192 192 0 0 1-192-192V192a192 192 0 0 1 192-192h640c105.984 0 192 85.952 192 192v640c0 106.048-86.016 192-192 192z m64-832a64 64 0 0 0-64-64H192C156.672 128 128 156.672 128 192v640a64 64 0 0 0 64 64h640c35.392 0 64-28.608 64-64V192zM576 576h192v192h-192v-192z m0-320h192v192h-192v-192z m-320 0h192v512h-192V256z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/layoutRepeat.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M469.333333 213.333333H213.333333v597.333334h256V213.333333z m85.333334 0v597.333334h256V213.333333h-256zM170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/layoutRight.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M192 1024h640c105.984 0 192-85.952 192-192V192c0-106.048-86.016-192-192-192H192a192 192 0 0 0-192 192v640a192 192 0 0 0 192 192zM128 192c0-35.328 28.672-64 64-64h640a64 64 0 0 1 64 64v640c0 35.392-28.608 64-64 64H192a64 64 0 0 1-64-64V192z m320 384h-192v192h192v-192z m0-320h-192v192h192v-192z m320 0h-192v512h192V256z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/paragraph.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512.621 702.604c-116.589-0.019-233.178 0.193-349.766-0.159-32.394-0.098-53.927-15.853-62.362-43.253-8.248-26.797-0.212-55.566 23.746-69.788 12.917-7.669 29.787-12.112 44.896-12.161 228.764-0.746 457.527-0.712 686.29-0.337 37.524 0.062 59.414 15.016 68.528 42.992 8.917 27.359 2.082 55.065-22.342 70.053-13.308 8.161-31.264 12.002-47.171 12.14-113.925 0.991-227.874 0.529-341.819 0.513zM512.217 65.037c115.729 0.006 231.469-0.342 347.192 0.169 49.744 0.22 80.292 41.991 63.932 85.535-9.741 25.904-32.379 40.637-64.803 40.755-78.626 0.291-157.252 0.112-235.877 0.112-151.951-0.003-303.902 0.215-455.858-0.147-49.108-0.117-79.781-38.671-66.362-81.782 9.005-28.932 31.781-44.5 67.237-44.567 114.843-0.214 229.691-0.079 344.539-0.075zM480.223 447.039c-106.086 0-212.167 0.286-318.249-0.176-30.797-0.134-51.693-15.587-60.884-41.986-8.845-25.406-2.617-53.828 19.807-68.704 13.181-8.741 30.85-14.961 46.533-15.037 208.629-0.968 417.264-0.865 625.902-0.463 42.071 0.083 69.863 26.523 69.948 63.625 0.082 36.997-27.752 62.585-70.104 62.738-104.319 0.378-208.64 0.125-312.954 0.125l0.001-0.122zM480 833.518c106.071 0.026 212.151-0.248 318.234 0.198 30.74 0.129 52.497 15.864 61.284 41.479 8.715 25.436 2.456 54.011-19.493 68.994-12.346 8.43-29.067 14.621-43.854 14.689-210.385 0.927-420.781 0.813-631.166 0.48-39.735-0.062-67.45-26.744-67.714-62.755-0.264-36.206 27.011-62.75 67.118-62.946 105.195-0.512 210.391-0.17 315.591-0.139z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/picTxtList.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M0 102.4h307.2v307.2H0zM0 614.4h307.2v307.2H0zM409.6 102.4h614.4v102.4H409.6zM409.6 307.2h614.4v102.4H409.6zM409.6 614.4h614.4v102.4H409.6zM409.6 819.2h614.4v102.4H409.6z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/roll.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 993.415168l275.093504-412.64128H236.906496zM512 30.584832L236.906496 443.226112h550.187008z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/rowScroll.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M53.894737 53.894737v916.210526h538.947368V53.894737H53.894737z m485.052631 862.315789H107.789474V107.789474h431.157894v808.421052zM970.105263 279.713684L852.075789 161.684211l-38.265263 38.265263 80.303158 80.303158H646.736842v53.894736h247.376842L813.810526 414.450526l38.265263 38.265263L970.105263 334.686316l-0.538947-0.538948H970.105263v-53.894736h-0.538947zM970.105263 689.313684l-118.029474-118.029473-38.265263 38.265263 80.303158 80.303158H646.736842v53.894736h247.376842l-80.303158 80.303158 38.265263 38.265263L970.105263 744.286316l-0.538947-0.538948H970.105263v-53.894736h-0.538947z" ></path><path d="M215.578947 53.894737h53.894737v916.210526H215.578947zM377.263158 53.894737h53.894737v916.210526H377.263158z" ></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/search.svg:
--------------------------------------------------------------------------------
1 | <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/shopping.svg:
--------------------------------------------------------------------------------
1 | <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M42.913 101.36c1.642 0 3.198.332 4.667.996a12.28 12.28 0 0 1 3.89 2.772c1.123 1.184 1.987 2.582 2.592 4.193.605 1.612.908 3.318.908 5.118 0 1.8-.303 3.507-.908 5.118-.605 1.611-1.469 3.01-2.593 4.194a13.3 13.3 0 0 1-3.889 2.843 10.582 10.582 0 0 1-4.667 1.066c-1.729 0-3.306-.355-4.732-1.066a13.604 13.604 0 0 1-3.825-2.843c-1.123-1.185-1.988-2.583-2.593-4.194a14.437 14.437 0 0 1-.907-5.118c0-1.8.302-3.506.907-5.118.605-1.61 1.47-3.009 2.593-4.193a12.515 12.515 0 0 1 3.825-2.772c1.426-.664 3.003-.996 4.732-.996zm53.932.285c1.643 0 3.22.331 4.733.995a11.386 11.386 0 0 1 3.889 2.772c1.08 1.185 1.945 2.583 2.593 4.194.648 1.61.972 3.317.972 5.118 0 1.8-.324 3.506-.972 5.117-.648 1.611-1.513 3.01-2.593 4.194a12.253 12.253 0 0 1-3.89 2.843 11 11 0 0 1-4.732 1.066 10.58 10.58 0 0 1-4.667-1.066 12.478 12.478 0 0 1-3.824-2.843c-1.08-1.185-1.945-2.583-2.593-4.194a13.581 13.581 0 0 1-.973-5.117c0-1.801.325-3.507.973-5.118.648-1.611 1.512-3.01 2.593-4.194a11.559 11.559 0 0 1 3.824-2.772 11.212 11.212 0 0 1 4.667-.995zm21.781-80.747c2.42 0 4.3.355 5.64 1.066 1.34.71 2.29 1.587 2.852 2.63a6.427 6.427 0 0 1 .778 3.34c-.044 1.185-.195 2.204-.454 3.057-.26.853-.8 2.606-1.62 5.26a589.268 589.268 0 0 1-2.788 8.743 1236.373 1236.373 0 0 0-3.047 9.453c-.994 3.128-1.75 5.592-2.269 7.393-1.123 3.79-2.55 6.42-4.278 7.89-1.728 1.469-3.846 2.203-6.352 2.203H39.023l1.945 12.795h65.342c4.148 0 6.223 1.943 6.223 5.828 0 1.896-.41 3.53-1.232 4.905-.821 1.374-2.442 2.061-4.862 2.061H38.505c-1.729 0-3.176-.426-4.343-1.28-1.167-.852-2.14-1.966-2.917-3.34a21.277 21.277 0 0 1-1.88-4.478 44.128 44.128 0 0 1-1.102-4.55c-.087-.568-.324-1.942-.713-4.122-.39-2.18-.865-4.904-1.426-8.174l-1.88-10.947c-.692-4.027-1.383-8.079-2.075-12.154-1.642-9.572-3.5-20.234-5.574-31.986H6.87c-1.296 0-2.377-.356-3.24-1.067a9.024 9.024 0 0 1-2.14-2.558 10.416 10.416 0 0 1-1.167-3.2C.108 8.53 0 7.488 0 6.54c0-1.896.583-3.46 1.75-4.69C2.917.615 4.494 0 6.482 0h13.095c1.728 0 3.111.284 4.148.853 1.037.569 1.858 1.28 2.463 2.132a8.548 8.548 0 0 1 1.297 2.701c.26.948.475 1.754.648 2.417.173.758.346 1.825.519 3.199.173 1.374.345 2.772.518 4.193.26 1.706.519 3.507.778 5.403h88.678z"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/tabbar.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M384 0H78C34.9 0 0 34.9 0 78v306c0 43.1 34.9 78 78 78h306c43.1 0 78-34.9 78-78V78c0-43.1-34.9-78-78-78zM946 0H640c-43.1 0-78 34.9-78 78v306c0 43.1 34.9 78 78 78h306c43.1 0 78-34.9 78-78V78c0-43.1-34.9-78-78-78zM384 562H78c-43.1 0-78 34.9-78 78v306c0 43.1 34.9 78 78 78h306c43.1 0 78-34.9 78-78V640c0-43.1-34.9-78-78-78zM946 562H640c-43.1 0-78 34.9-78 78v306c0 43.1 34.9 78 78 78h306c43.1 0 78-34.9 78-78V640c0-43.1-34.9-78-78-78z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/textCenter.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M96 128h832v96H96zM96 576h832v96H96zM224 352h576v96H224zM224 800h576v96H224z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/textLeft.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M96 128h832v96H96zM96 576h832v96H96zM96 352h576v96H96zM96 800h576v96H96z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/textRight.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M96 128h832v96H96zM96 576h832v96H96zM352 352h576v96H352zM352 800h576v96H352z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/title.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M192 320h256V160a32 32 0 0 1 64 0v384a32 32 0 0 1-64 0v-160H192v160a32 32 0 0 1-64 0V160a32 32 0 1 1 64 0v160z m448 108.288l-17.248 17.248a32 32 0 0 1-45.248-45.28l67.872-67.84c1.696-1.696 3.52-3.136 5.408-4.384A32 32 0 0 1 704 352v192a32 32 0 0 1-64 0v-115.712zM96 672h832a32 32 0 0 1 0 64H96a32 32 0 0 1 0-64z m0 160h704a32 32 0 0 1 0 64H96a32 32 0 0 1 0-64z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/transverseList.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M796.444444 170.666667h-227.555555v682.666666h227.555555V170.666667z m-56.888888 625.777777h-113.777778V227.555556h113.777778v568.888888zM455.111111 170.666667H227.555556v682.666666h227.555555V170.666667zM398.222222 796.444444H284.444444V227.555556h113.777778v568.888888zM910.222222 56.888889h56.888889v910.222222h-56.888889zM56.888889 56.888889h56.888889v910.222222H56.888889z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svg/underline.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M748.307692 433.230769V0h157.538462v433.230769a393.846154 393.846154 0 0 1-787.692308 0V0h157.538462v433.230769a236.307692 236.307692 0 0 0 472.615384 0z m-708.923077 472.615385h945.23077V1024H39.384615v-118.153846z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/svgo.yml:
--------------------------------------------------------------------------------
 1 | # replace default config
 2 | 
 3 | # multipass: true
 4 | # full: true
 5 | 
 6 | plugins:
 7 | 
 8 |   # - name
 9 |   #
10 |   # or:
11 |   # - name: false
12 |   # - name: true
13 |   #
14 |   # or:
15 |   # - name:
16 |   #     param1: 1
17 |   #     param2: 2
18 | 
19 | - removeAttrs:
20 |     attrs:
21 |       - 'fill'
22 |       - 'fill-rule'
23 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui'
 4 | import 'element-ui/lib/theme-chalk/index.css'
 5 | 
 6 | import H5Components from './components/index'
 7 | import './icons/index'
 8 | 
 9 | import './assets/style.scss'
10 | 
11 | Vue.use(H5Components)
12 | Vue.use(ElementUI)
13 | 
14 | Vue.config.productionTip = false
15 | Vue.prototype.$evt = new Vue()
16 | 
17 | new Vue({
18 |   el: '#app',
19 |   components: { App },
20 |   template: '<App/>'
21 | })


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from "vue";
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import Vue from "vue";
3 |   export default Vue;
4 | }
5 | 
6 | declare module '*.js'
7 | 
8 | declare module 'iscroll'
9 | 


--------------------------------------------------------------------------------
/src/utils/newsMarquee.ts:
--------------------------------------------------------------------------------
 1 | (function (root: any, factory: Function) {
 2 |   if (typeof module !== 'undefined' && module.exports) {
 3 |     module.exports = factory()
 4 |   } else {
 5 |     root['newsMarquee'] = factory()
 6 |   }
 7 | }(this, function () {
 8 |   'use strict'
 9 | 
10 |   function Marquee (this: any, el: string | HTMLElement, opt: any) {
11 |     var _self = this
12 |     this.oMarquee = typeof el === 'string' ? document.querySelector(el) : el
13 |     if (!this.oMarquee) return
14 | 
15 |     this.copyNode = _self.oMarquee.children[0].cloneNode(true)
16 |     this.iLineHeight = this.oMarquee.children[0].offsetHeight
17 |     this.iLineCount = this.oMarquee.children.length
18 |     this.timer1 = null
19 |     this.timer2 = null
20 | 
21 |     this.options = {
22 |       successive: false,
23 |       speed: 1000 / 60,
24 |       pause: 3500
25 |     }
26 | 
27 |     for (var i in opt) {
28 |       this.options[i] = opt[i]
29 |     }
30 | 
31 |     appendChild()
32 | 
33 |     function run () {
34 |       _self.oMarquee.scrollTop += 1
35 |       if (_self.oMarquee.scrollTop >= _self.iLineCount * _self.iLineHeight) {
36 |         _self.oMarquee.scrollTop = 0
37 |       }
38 |       if (_self.options.successive) {
39 |         _self.timer1 && clearTimeout(_self.timer1)
40 |         _self.timer1 = setTimeout(run, _self.options.speed)
41 |       } else {
42 |         if (_self.oMarquee.scrollTop % _self.iLineHeight === 0) {
43 |           _self.timer2 && clearTimeout(_self.timer2)
44 |           _self.timer2 = setTimeout(run, _self.options.pause)
45 |         } else {
46 |           _self.timer1 && clearTimeout(_self.timer1)
47 |           _self.timer1 = setTimeout(run, _self.options.speed)
48 |         }
49 |       }
50 |     }
51 | 
52 |     function appendChild () {
53 |       _self.oMarquee.appendChild(_self.copyNode)
54 |     }
55 | 
56 |     run()
57 | 
58 |     this.destroy = function () {
59 |       _self.timer1 && clearTimeout(_self.timer1)
60 |       _self.timer2 && clearTimeout(_self.timer2)
61 |       _self.copyNode.parentNode.removeChild(_self.copyNode)
62 |     }
63 |   }
64 | 
65 |   return Marquee
66 | }))
67 | 


--------------------------------------------------------------------------------
/src/utils/tools.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   createDomID (len?: number) {
 3 |     return Number(Math.random().toString().substr(3, len)).toString(36)
 4 |   },
 5 |   copyObj (obj: any) {
 6 |     return JSON.parse(JSON.stringify(obj))
 7 |   },
 8 |   parseTime (time: any, cFormat?: string) {
 9 |     if (arguments.length === 0) {
10 |       return null
11 |     }
12 |     const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
13 |     let date
14 |     if (typeof time === 'object') {
15 |       date = time
16 |     } else {
17 |       if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
18 |         time = parseInt(time)
19 |       }
20 |       if ((typeof time === 'number') && (time.toString().length === 10)) {
21 |         time = time * 1000
22 |       }
23 |       date = new Date(time)
24 |     }
25 |     const formatObj: any = {
26 |       y: date.getFullYear(),
27 |       m: date.getMonth() + 1,
28 |       d: date.getDate(),
29 |       h: date.getHours(),
30 |       i: date.getMinutes(),
31 |       s: date.getSeconds(),
32 |       a: date.getDay()
33 |     }
34 |     const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key: string) => {
35 |       let value = formatObj[key]
36 |       // Note: getDay() returns 0 on Sunday
37 |       if (key === 'a') {
38 |         return ['日', '一', '二', '三', '四', '五', '六'][value]
39 |       }
40 |       if (result.length > 0 && value < 10) {
41 |         value = '0' + value
42 |       }
43 |       return value || 0
44 |     })
45 |     return timeStr
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from "@vue/test-utils";
 2 | import HelloWorld from "@/components/HelloWorld.vue";
 3 | 
 4 | describe("HelloWorld.vue", () => {
 5 |   it("renders props.msg when passed", () => {
 6 |     const msg = "new message";
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg }
 9 |     });
10 |     expect(wrapper.text()).toMatch(msg);
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env",
16 |       "jest"
17 |     ],
18 |     "paths": {
19 |       "@/*": [
20 |         "src/*"
21 |       ]
22 |     },
23 |     "lib": [
24 |       "esnext",
25 |       "dom",
26 |       "dom.iterable",
27 |       "scripthost"
28 |     ]
29 |   },
30 |   "include": [
31 |     "src/**/*.ts",
32 |     "src/**/*.tsx",
33 |     "src/**/*.vue",
34 |     "tests/**/*.ts",
35 |     "tests/**/*.tsx",
36 |     "src/**/*.js"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | 
 4 | function resolve(dir) {
 5 |   return path.join(__dirname, dir)
 6 | }
 7 | 
 8 | module.exports = {
 9 |   //开发服务配置
10 |   devServer: {
11 |     port: 3000, // 端口号
12 |     host: 'localhost',  // 主机
13 |     https: false,  // 是否启用https
14 |     open: false // 配置是否自动启动浏览器
15 |   },
16 |   configureWebpack: {
17 |     resolve: {
18 |       extensions: ['.js', '.vue', '.json', '.ts'],
19 |       alias: {
20 |         '@': resolve('src'),
21 |       }
22 |     },
23 |     plugins: [],
24 |     // webpack-load配置
25 |     module: {
26 |       rules: []
27 |     }
28 |   },
29 |   publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
30 |   runtimeCompiler: true,
31 |   chainWebpack: config => {
32 |     config.module
33 |       .rule('svg')
34 |       .exclude.add(resolve('src/icons'))
35 |       .end()
36 |    
37 |     config.module
38 |       .rule('icons')
39 |       .test(/\.svg$/)
40 |       .include.add(resolve('src/icons'))
41 |       .end()
42 |       .use('svg-sprite-loader')
43 |       .loader('svg-sprite-loader')
44 |       .options({
45 |         symbolId: 'icon-[name]'
46 |       })
47 |   }
48 | }


--------------------------------------------------------------------------------