├── src ├── store │ ├── getters.js │ ├── mutation-types.js │ ├── mutations.js │ ├── index.js │ └── actions.js ├── components │ ├── upload-img.vue │ ├── platform.vue │ ├── header.vue │ ├── drag.vue │ ├── iphone.vue │ ├── drag │ │ └── index.js │ ├── layout.vue │ ├── rule.vue │ └── layout-config.vue ├── vue.config.js ├── assets │ ├── logo.png │ ├── imgs │ │ ├── empty.png │ │ ├── empty-banner.png │ │ ├── image-one-left.png │ │ ├── image-four-column.png │ │ ├── image-one-column.png │ │ └── image-three-column.png │ ├── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.woff2 │ │ ├── demo.css │ │ ├── iconfont.css │ │ └── demo_index.html │ ├── compstyle.css │ ├── lib │ │ └── x0popup │ │ │ ├── x0popup.min.css │ │ │ └── x0popup.min.js │ └── style.css ├── views │ ├── About.vue │ └── Home.vue ├── config │ └── common.js ├── App.vue ├── router.js ├── main.js └── utils │ └── js-load.js ├── .browserslistrc ├── preview.png ├── babel.config.js ├── public ├── favicon.ico └── index.html ├── postcss.config.js ├── .editorconfig ├── .gitignore ├── .eslintrc.js ├── package.json └── README.md /src/store/getters.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/upload-img.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /src/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 选项... 3 | } 4 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/preview.png -------------------------------------------------------------------------------- /src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const SELECT_WIDGET = 'SELECT_WIDGET' 2 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/imgs/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/imgs/empty.png -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/imgs/empty-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/imgs/empty-banner.png -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/imgs/image-one-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/imgs/image-one-left.png -------------------------------------------------------------------------------- /src/assets/imgs/image-four-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/imgs/image-four-column.png -------------------------------------------------------------------------------- /src/assets/imgs/image-one-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/imgs/image-one-column.png -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/assets/imgs/image-three-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/border1px/iLayout/HEAD/src/assets/imgs/image-three-column.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/config/common.js: -------------------------------------------------------------------------------- 1 | 2 | var defaultBanner = require('../assets/imgs/empty-banner.png') 3 | var defaultImg = require('../assets/imgs/empty.png') 4 | 5 | export { 6 | defaultBanner, 7 | defaultImg 8 | } 9 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import * as types from './mutation-types' 3 | 4 | export default { 5 | [types.SELECT_WIDGET] (state, widget) { 6 | Vue.set(state, 'selectWg', widget) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import * as getters from './getters' 4 | import * as actions from './actions' 5 | import mutations from './mutations' 6 | 7 | Vue.use(Vuex) 8 | 9 | const state = { 10 | selectWg: {} 11 | } 12 | 13 | export default new Vuex.Store({ 14 | state, 15 | getters, 16 | actions, 17 | mutations 18 | }) 19 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types' 2 | 3 | // 用了，但意义不大 4 | export function getUserInfo ({ commit }, memberid) { 5 | return new Promise((resolve, reject) => { 6 | axios.get('/Member/GetMember', { 7 | memberId: memberid 8 | }).then(res => { 9 | if (!res.data.isError) { 10 | const user = res.data.data 11 | // var udata = {real_name:user.real_name,email:user.email.email} 12 | 13 | commit(types.INIT_USER_INFO, { user }) 14 | resolve(res.data) 15 | } else { 16 | reject(res.data) 17 | } 18 | }) 19 | }) 20 | } 21 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | iLayout 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/platform.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | 26 | 34 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: Home 13 | }, 14 | { 15 | path: '/about', 16 | name: 'about', 17 | // route level code-splitting 18 | // this generates a separate chunk (about.[hash].js) for this route 19 | // which is lazy-loaded when the route is visited. 20 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 21 | } 22 | ] 23 | }) 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import vuedraggable from 'vuedraggable' 5 | import Vuex from 'vuex' 6 | import store from './store' 7 | import './assets/style.css' 8 | import './assets/compstyle.css' 9 | import './assets/iconfont/iconfont.css' 10 | 11 | // 引入弹框 12 | import './assets/lib/x0popup/x0popup.min.css' 13 | import x0popup from './assets/lib/x0popup/x0popup.min.js' 14 | 15 | // 使用Element 16 | import ElementUI from 'element-ui' 17 | import 'element-ui/lib/theme-chalk/index.css' 18 | Vue.use(ElementUI) 19 | 20 | Vue.use(Vuex) 21 | Vue.prototype.$alert = x0popup 22 | Vue.config.productionTip = false 23 | Vue.component(vuedraggable.name, vuedraggable) 24 | 25 | new Vue({ 26 | router, 27 | store, 28 | render: h => h(App) 29 | }).$mount('#app') 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iLayout", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "element-ui": "^2.11.1", 13 | "vue": "^2.6.10", 14 | "vue-router": "^3.0.3", 15 | "vuedraggable": "^2.23.0", 16 | "vuex": "^3.1.1" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.10.0", 20 | "@vue/cli-plugin-eslint": "^3.10.0", 21 | "@vue/cli-service": "^3.10.0", 22 | "@vue/eslint-config-standard": "^4.0.0", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "stylus": "^0.54.5", 27 | "stylus-loader": "^3.0.2", 28 | "vue-template-compiler": "^2.6.10" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 46 | -------------------------------------------------------------------------------- /src/utils/js-load.js: -------------------------------------------------------------------------------- 1 | export default class JsLoad { 2 | /** 3 | * 创建script 4 | * @param url 5 | * @returns {Promise} 6 | */ 7 | createScript (url, removeScript = true) { 8 | const scriptElement = document.createElement('script') 9 | scriptElement.src = url 10 | this.prependChild(document.body, scriptElement) 11 | 12 | return new Promise((resolve, reject) => { 13 | scriptElement.addEventListener( 14 | 'load', 15 | e => { 16 | if (removeScript) { 17 | this.removeScript(scriptElement) 18 | } 19 | resolve(e) 20 | }, 21 | false 22 | ) 23 | 24 | scriptElement.addEventListener( 25 | 'error', 26 | e => { 27 | if (removeScript) { 28 | this.removeScript(scriptElement) 29 | } 30 | reject(e) 31 | }, 32 | false 33 | ) 34 | }) 35 | } 36 | prependChild (parent, newChild) { 37 | if (parent.firstChild) { 38 | parent.insertBefore(newChild, parent.firstChild) 39 | } else { 40 | parent.appendChild(newChild) 41 | } 42 | return parent 43 | } 44 | /** 45 | * 移除script标签 46 | * @param scriptElement script dom 47 | */ 48 | removeScript (scriptElement) { 49 | document.body.removeChild(scriptElement) 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

iLayout

3 | 4 |

Mobile Application Designer

5 | 6 | 7 |

8 |
9 | Pictures are loading... 10 |

11 | 12 | 13 | ## About 14 | This is a mobile application designer, currently in the prototype development stage, designed to help developers quickly build page layout. 15 | 16 | The next plan is 17 | 1. Generate H5 dynamically according to JSON file generated by layout 18 | 2. Integrating borderUI to drag and visualize component configuration 19 | 20 | ## Getting Started 21 | * [**DEMO**](http://i1.fuimg.com/643174/c0ce59de474a9661.gif) 22 | ## Development 23 | 24 | base on `vue-cli@3` to build a development and production versions. 25 | 26 | Install all dependencies, in repo's root: 27 | 28 | ``` 29 | $ npm install 30 | ``` 31 | 32 | ## Development Builds 33 | 34 | The following npm scripts are available to create development builds: 35 | 36 | * `serve` - build development versions（Start by default on http://localhost:8080） 37 | 38 | ## Production builds 39 | 40 | To build production versions the following npm scripts are available: 41 | 42 | * `build` - build production versions 43 | 44 | Compiled results will be available in `dist/` folder. 45 | -------------------------------------------------------------------------------- /src/components/header.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | > 23 | 24 | 47 | -------------------------------------------------------------------------------- /src/components/drag.vue: -------------------------------------------------------------------------------- 1 | 91 | 92 | 110 | 111 | 165 | -------------------------------------------------------------------------------- /src/components/iphone.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | > 60 | 61 | 215 | -------------------------------------------------------------------------------- /src/assets/compstyle.css: -------------------------------------------------------------------------------- 1 | .layout-main{ 2 | background-color: #FFF 3 | } 4 | 5 | 6 | 7 | /* 搜索框 */ 8 | .layout-list .layout-main .lay-search { 9 | width: 100%; 10 | height: 50px; 11 | padding: 7px 13px; 12 | } 13 | .layout-list .layout-main .lay-search-c { 14 | width: 100%; 15 | height: 100%; 16 | position: relative; 17 | } 18 | .layout-list .layout-main .lay-search-input { 19 | width: 100%; 20 | height: 100%; 21 | border-radius: 50px; 22 | background-color: #e9e9e9; 23 | border: none; 24 | padding: 0 15px; 25 | color: #999; 26 | cursor: move; 27 | } 28 | .layout-list .layout-main .lay-search-input.square { 29 | border-radius: 0; 30 | } 31 | .layout-list .layout-main .lay-search-input.radius { 32 | border-radius: 5px; 33 | } 34 | .layout-list .layout-main .lay-search-input.round { 35 | border-radius: 18px; 36 | } 37 | .layout-list .layout-main .lay-search .iconfont { 38 | position: absolute; 39 | top: 50%; 40 | -webkit-transform: translateY(-50%); 41 | -ms-transform: translateY(-50%); 42 | transform: translateY(-50%); 43 | right: 15px; 44 | color: #999; 45 | font-size: 18px !important; 46 | } 47 | 48 | 49 | /* 公告 */ 50 | .layout-list .layout-main .lay-notice { 51 | line-height: 32px; 52 | padding: 2px 10px; 53 | background: #fff; 54 | overflow: hidden; 55 | } 56 | .layout-list .layout-main .lay-notice .notice-right { 57 | height: 32px; 58 | overflow: hidden; 59 | } 60 | .layout-list .layout-main .lay-notice .notice-right .notice-text { 61 | text-overflow: ellipsis; 62 | overflow: hidden; 63 | white-space: nowrap; 64 | } 65 | .layout-list .layout-main .lay-notice .iconfont { 66 | color: #ff7159; 67 | margin-right: 2px; 68 | } 69 | 70 | /* 购买记录 */ 71 | .lay-record{ 72 | width: 100%; 73 | background: rgba(0,0,0,0.25); 74 | position: absolute!important; 75 | top:30%; 76 | z-index: 9999; 77 | cursor: pointer; 78 | } 79 | .lay-record.left{ 80 | left:0; 81 | } 82 | .lay-record.right{ 83 | right:0; 84 | } 85 | .lay-record:before{ 86 | cursor: pointer!important 87 | } 88 | .lay-record-item{ 89 | height: 30px; 90 | line-height: 30px; 91 | padding-left:10px; 92 | } 93 | .lay-record-item .text{ 94 | color:#ff7159; 95 | } 96 | 97 | /* 商品组 */ 98 | .lay-goods { 99 | background: rgb(246, 246, 246); 100 | } 101 | .lay-goods .goods-head { 102 | height: 40px; 103 | display: flex; 104 | justify-content: space-between; 105 | align-items: center; 106 | background: #FFF; 107 | padding: 0 10px; 108 | } 109 | .lay-goods.list { 110 | height: auto; 111 | } 112 | .lay-goods.list .goods-item { 113 | float: left; 114 | } 115 | .lay-goods.slide { 116 | overflow-x: hidden; 117 | white-space: nowrap; 118 | width: auto; 119 | } 120 | .lay-goods.slide .goods-item { 121 | float: none; 122 | display: inline-block; 123 | } 124 | .lay-goods .goods-item.column2 { 125 | width: 50%; 126 | padding: 3px; 127 | } 128 | .lay-goods .goods-item.column1 { 129 | width: 100%; 130 | padding: 8px; 131 | height: 100px; 132 | display: flex; 133 | background: #FFF; 134 | border-bottom: 1px dashed #E9E9E9 135 | } 136 | .lay-goods .goods-item.column1:last-child{ 137 | border-bottom: none; 138 | } 139 | .goods-text{ 140 | display: flex; 141 | justify-content: space-between; 142 | align-items: center; 143 | padding:0 5px; 144 | } 145 | /* .lay-goods .goods-item.column1 .goods-price { 146 | margin-top: 50px; 147 | } */ 148 | .goods-extra { 149 | 150 | } 151 | .lay-goods .goods-item.column3 { 152 | width: 33%; 153 | padding: 3px; 154 | } 155 | .lay-goods .goods-item.column1 .goods-image { 156 | width: 80px; 157 | height: 80px; 158 | padding: 0; 159 | } 160 | .lay-goods .goods-item.column1 .goods-detail { 161 | flex: 1; 162 | height: 80px;; 163 | display: flex; 164 | flex-direction: column; 165 | justify-content: space-between 166 | } 167 | .lay-goods .goods-item.column1 .goods-image img { 168 | width: 80px; 169 | height: 80px; 170 | padding: 0; 171 | } 172 | .lay-goods .goods-item.column1 .good-text{ 173 | 174 | } 175 | .lay-goods .goods-item .goods-image { 176 | position: relative; 177 | width: 100%; 178 | height: 0; 179 | padding-bottom: 100%; 180 | overflow: hidden; 181 | background: #fff; 182 | } 183 | .lay-goods .goods-item .goods-image:after { 184 | content: ''; 185 | display: block; 186 | margin-top: 100%; 187 | } 188 | .lay-goods .goods-item .goods-image img { 189 | position: absolute; 190 | width: 100%; 191 | height: 100%; 192 | top: 0; 193 | left: 0; 194 | -o-object-fit: cover; 195 | object-fit: cover; 196 | } 197 | .lay-goods .goods-item .goods-detail { 198 | padding: 4px; 199 | background: #fff; 200 | font-size: 13px; 201 | } 202 | .lay-goods .goods-item .goods-detail .goods-name { 203 | /* height: 40px; */ 204 | text-align: left; 205 | height: 26px; 206 | line-height: 26px; 207 | overflow: hidden; 208 | } 209 | .lay-goods .goods-item .goods-detail .goods-price { 210 | font-size: 15px; 211 | color: red; 212 | } 213 | .lay-goods.group { 214 | background: #FFF; 215 | padding: 10px; 216 | } 217 | .lay-goods .group-item { 218 | width: 300px; 219 | padding: 10px; 220 | position: relative; 221 | background: rgb(246, 246, 246); 222 | height: 120px; 223 | display: inline-block; 224 | margin-right: 15px; 225 | } 226 | .lay-goods .group-item .group-image { 227 | width: 98px; 228 | height: 98px; 229 | position: absolute; 230 | left: 10px; 231 | top: 10px; 232 | } 233 | .lay-goods .group-item .group-image img { 234 | width: 100%; 235 | height: 100%; 236 | object-fit: cover; 237 | } 238 | .lay-goods .group-item .group-detail { 239 | position: absolute; 240 | top: 10px; 241 | left: 120px; 242 | bottom: 10px; 243 | right: 0; 244 | } 245 | .lay-goods .group-item .group-detail .group-price { 246 | position: absolute; 247 | top: 50px; 248 | left: 0px; 249 | font-size: 18px; 250 | color: #ff7159; 251 | } 252 | .lay-goods .group-item .group-detail .group-time { 253 | position: absolute; 254 | bottom: 0px; 255 | left: 0px; 256 | font-size: 12px; 257 | } 258 | .lay-goods .group-item .group-detail .group-time span { 259 | color: #ff7159; 260 | padding: 3px; 261 | text-align: center; 262 | } 263 | .lay-goods .group-item .group-detail .group-time span.time { 264 | background: #FFF; 265 | } 266 | .lay-goods .group-item .group-detail .buy-icon { 267 | position: absolute; 268 | bottom: 0; 269 | right: 10px; 270 | display: block; 271 | width: 20px; 272 | height: 20px; 273 | } 274 | .lay-goods .group-item .group-detail .buy-icon img { 275 | width: 100%; 276 | } 277 | -------------------------------------------------------------------------------- /src/components/drag/index.js: -------------------------------------------------------------------------------- 1 | import { defaultBanner, defaultImg } from '../../config/common.js' 2 | 3 | var allWidget = { 4 | 'mediaComponents': [{ 5 | 'type': 'imgSlide', 6 | 'name': '图片轮播', 7 | 'value': { 8 | 'duration': 2500, 9 | 'list': [{ 10 | 'image': defaultBanner, 11 | 'linkType': '', 12 | 'linkValue': '' 13 | }, 14 | { 15 | 'image': defaultBanner, 16 | 'linkType': '', 17 | 'linkValue': '' 18 | } 19 | ] 20 | }, 21 | 'icon': 'icon-putonglunbotu' 22 | }, 23 | { 24 | 'type': 'imgSingle', 25 | 'name': '图片', 26 | 'value': { 27 | 'list': [{ 28 | 'image': defaultBanner, 29 | 'linkType': '', 30 | 'linkValue': '', 31 | 'buttonShow': false, 32 | 'buttonText': '', 33 | 'buttonColor': '#FFFFFF', 34 | 'textColor': '#000000' 35 | }] 36 | }, 37 | 'icon': 'icon-picture' 38 | }, 39 | { 40 | 'type': 'imgWindow', 41 | 'name': '图片分组', 42 | 'value': { 43 | 'style': 2, // 0 橱窗 2 两列 3三列 4四列 44 | 'margin': 0, 45 | 'list': [ 46 | { 47 | 'image': defaultBanner, 48 | 'linkType': '', 49 | 'linkValue': '' 50 | }, 51 | { 52 | 'image': defaultBanner, 53 | 'linkType': '', 54 | 'linkValue': '' 55 | }, { 56 | 'image': defaultBanner, 57 | 'linkType': '', 58 | 'linkValue': '' 59 | }, 60 | { 61 | 'image': defaultBanner, 62 | 'linkType': '', 63 | 'linkValue': '' 64 | } 65 | ] 66 | }, 67 | 'icon': 'icon-images' 68 | }, 69 | { 70 | 'type': 'video', 71 | 'name': '视频组', 72 | 'value': { 73 | 'autoplay': 'false', 74 | 'list': [{ 75 | 'image': defaultBanner, 76 | 'url': 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400', 77 | 'linkType': '', 78 | 'linkValue': '' 79 | }] 80 | }, 81 | 'icon': 'icon-shipin1' 82 | }, 83 | { 84 | 'type': 'article', 85 | 'name': '文章组', 86 | 'value': { 87 | 'list': [ 88 | { 89 | 'title': '' 90 | } 91 | ] 92 | }, 93 | 'icon': 'icon-wenzhang' 94 | }, 95 | { 96 | 'type': 'articleClassify', 97 | 'name': '文章分类', 98 | 'value': { 99 | 'limit': 3, 100 | 'articleClassifyId': '' 101 | }, 102 | 'icon': 'icon-wenzhangliebiaoxinbiaoqian' 103 | } 104 | ], 105 | 'storeComponents': [{ 106 | 'type': 'search', 107 | 'name': '搜索框', 108 | 'value': { 109 | 'keywords': '请输入关键字搜索', 110 | 'style': 'round' // round:圆弧 radius:圆角 square:方形 111 | }, 112 | 'icon': 'icon-sousuo1' 113 | }, 114 | { 115 | 'type': 'notice', 116 | 'name': '公告组', 117 | 'value': { 118 | 'type': 'auto', // choose手动选择， auto 自动获取 119 | 'list': [ 120 | { 121 | 'title': '这里是第一条公告的标题', 122 | 'content': '', 123 | 'id': '' 124 | } 125 | ] 126 | }, 127 | 'icon': 'icon-gonggao1' 128 | }, 129 | { 130 | 'type': 'navBar', 131 | 'name': '导航组', 132 | 'value': { 133 | 'limit': 4, 134 | 'list': [ 135 | { 136 | 'image': defaultImg, 137 | 'text': '按钮1', 138 | 'linkType': '', 139 | 'linkValue': '' 140 | }, 141 | { 142 | 'image': defaultImg, 143 | 'text': '按钮2', 144 | 'linkType': '', 145 | 'linkValue': '' 146 | }, 147 | { 148 | 'image': defaultImg, 149 | 'text': '按钮3', 150 | 'linkType': '', 151 | 'linkValue': '' 152 | }, 153 | { 154 | 'image': defaultImg, 155 | 'text': '按钮4', 156 | 'linkType': '', 157 | 'linkValue': '' 158 | } 159 | ] 160 | }, 161 | 'icon': 'icon-daohanghaiwaigou' 162 | }, 163 | { 164 | 'type': 'goods', 165 | 'name': '商品组', 166 | 'icon': 'icon-huazhuangpin', 167 | 'value': { 168 | 'title': '商品组名称', 169 | 'lookMore': 'true', 170 | 'type': 'auto', // auto自动获取 choose 手动选择 171 | 'classifyId': '', // 所选分类id 172 | 'brandId': '', // 所选品牌id 173 | 'limit': 10, 174 | 'display': 'list', // list , slide 175 | 'column': 2, // 分裂数量 176 | 'list': [ 177 | { 178 | 'image': defaultBanner, 179 | 'name': '', 180 | 'price': '' 181 | }, 182 | { 183 | 'image': defaultBanner, 184 | 'name': '', 185 | 'price': '' 186 | }, 187 | { 188 | 'image': defaultBanner, 189 | 'name': '', 190 | 'price': '' 191 | }, 192 | { 193 | 'image': defaultBanner, 194 | 'name': '', 195 | 'price': '' 196 | } 197 | ] 198 | } 199 | }, 200 | { 201 | 'type': 'pintuan', 202 | 'name': '拼团', 203 | 'value': { 204 | 'title': '活动名称', 205 | 'limit': '10', 206 | 'list': [ 207 | { 208 | 'image': defaultBanner, 209 | 'name': '', 210 | 'price': '' 211 | }, 212 | { 213 | 'image': defaultBanner, 214 | 'name': '', 215 | 'price': '' 216 | } 217 | ] 218 | }, 219 | 'icon': 'icon-pin1' 220 | }, 221 | { 222 | 'type': 'groupPurchase', 223 | 'name': '团购秒杀', 224 | 'value': { 225 | 'title': '活动名称', 226 | 'limit': '10', 227 | 'list': [ 228 | { 229 | 'image': defaultBanner, 230 | 'name': '', 231 | 'price': '' 232 | }, 233 | { 234 | 'image': defaultBanner, 235 | 'name': '', 236 | 'price': '' 237 | } 238 | ] 239 | }, 240 | 'icon': 'icon-tuan' 241 | }, 242 | { 243 | 'type': 'coupon', 244 | 'name': '优惠券组', 245 | 'value': { 246 | 'limit': '2' 247 | }, 248 | 'icon': 'icon-youhuiquan3' 249 | }, 250 | { 251 | 'type': 'record', 252 | 'name': '购买记录', 253 | 'value': { 254 | 'style': { 255 | 'top': 20, 256 | 'left': 0 257 | } 258 | }, 259 | 'icon': 'icon-jilu' 260 | } 261 | ], 262 | 'utilsComponents': [ 263 | { 264 | 'type': 'blank', 265 | 'name': '辅助空白', 266 | 'icon': 'icon-kongbai', 267 | 'value': { 268 | 'height': 10, 269 | 'backgroundColor': '#F2F2F2' 270 | } 271 | }, 272 | { 273 | 'type': 'textarea', 274 | 'name': '文本域', 275 | 'value': '', 276 | 'icon': 'icon-xian-kuanju-wenbenyu' 277 | }] 278 | } 279 | 280 | export default allWidget 281 | -------------------------------------------------------------------------------- /src/assets/lib/x0popup/x0popup.min.css: -------------------------------------------------------------------------------- 1 | /* x0popup - v0.3.3 | http://gao-sun.github.io/x0popup */ 2 | .x0l,.x0l .ball{position:absolute}.xi-error span::before,.xi-info span::before,.xi-ok span::before,.xi-warning span::before{content:'';box-sizing:border-box}.x0l{width:120px;height:10px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.x0l .ball{width:0;height:0;border:5px solid #000;border-radius:30%;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.x0l .ball-1{border-color:#555;-webkit-animation-name:BallFly-1;animation-name:BallFly-1}.x0l .ball-2{border-color:#777;-webkit-animation-name:BallFly-2;animation-name:BallFly-2}.x0l .ball-3{border-color:#999;-webkit-animation-name:BallFly-3;animation-name:BallFly-3}.x0l .ball-4{border-color:#bbb;-webkit-animation-name:BallFly-4;animation-name:BallFly-4}@-webkit-keyframes BallFly-1{88%,from,to{margin-left:0}38%,50%{margin-left:110px}}@keyframes BallFly-1{88%,from,to{margin-left:0}38%,50%{margin-left:110px}}@-webkit-keyframes BallFly-2{4%,92%,from,to{margin-left:0}42%,54%{margin-left:110px}}@keyframes BallFly-2{4%,92%,from,to{margin-left:0}42%,54%{margin-left:110px}}@-webkit-keyframes BallFly-3{8%,96%,from,to{margin-left:0}46%,58%{margin-left:110px}}@keyframes BallFly-3{8%,96%,from,to{margin-left:0}46%,58%{margin-left:110px}}@-webkit-keyframes BallFly-4{12%,from,to{margin-left:0}50%,62%{margin-left:110px}}@keyframes BallFly-4{12%,from,to{margin-left:0}50%,62%{margin-left:110px}}.x0p-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(180,180,180,.8);z-index:99998;-webkit-animation:x0pfadeIn .5s ease;animation:x0pfadeIn .5s ease}.x0p,.xi{left:50%}.x0p{position:fixed;top:50%;font-size:16px;background-color:#fff;-webkit-transform:translate(-50%,-60%);transform:translate(-50%,-60%);font-family:STHeiti,Helvetica;-webkit-animation:x0ppop .45s ease;animation:x0ppop .45s ease;z-index:99999}.x0p-overlay.no-animation,.x0p.no-animation,.x0p.no-animation .xi>span::before{-webkit-animation:none;animation:none}@-webkit-keyframes x0pfadeIn{from{opacity:0}to{opacity:1}}@keyframes x0pfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes x0ppop{from{-webkit-transform:scale(.9) translate(-55%,-60%);transform:scale(.9) translate(-55%,-60%);opacity:.3}50%{-webkit-transform:scale(1.1) translate(-45%,-60%);transform:scale(1.1) translate(-45%,-60%);opacity:.7}to{-webkit-transform:scale(1) translate(-50%,-60%);transform:scale(1) translate(-50%,-60%);opacity:1}}@keyframes x0ppop{from{-webkit-transform:scale(.9) translate(-55%,-60%);transform:scale(.9) translate(-55%,-60%);opacity:.3}50%{-webkit-transform:scale(1.1) translate(-45%,-60%);transform:scale(1.1) translate(-45%,-60%);opacity:.7}to{-webkit-transform:scale(1) translate(-50%,-60%);transform:scale(1) translate(-50%,-60%);opacity:1}}@-webkit-keyframes x0pslideUp{from{-webkit-transform:translate(-50%,200%);transform:translate(-50%,200%);opacity:0}to{-webkit-transform:translate(-50%,-60%);transform:translate(-50%,-60%);opacity:1}}@keyframes x0pslideUp{from{-webkit-transform:translate(-50%,200%);transform:translate(-50%,200%);opacity:0}to{-webkit-transform:translate(-50%,-60%);transform:translate(-50%,-60%);opacity:1}}@-webkit-keyframes x0pslideDown{from{-webkit-transform:translate(-50%,-260%);transform:translate(-50%,-260%);opacity:0}to{-webkit-transform:translate(-50%,-60%);transform:translate(-50%,-60%);opacity:1}}@keyframes x0pslideDown{from{-webkit-transform:translate(-50%,-260%);transform:translate(-50%,-260%);opacity:0}to{-webkit-transform:translate(-50%,-60%);transform:translate(-50%,-60%);opacity:1}}.xi{position:absolute;width:80px;height:80px;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.xi-ok span::before{position:absolute;height:8%;border-radius:10px;background-color:#60BF80}.xi-ok-left::before{width:40%;left:15%;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:showOKLeft .6s ease;animation:showOKLeft .6s ease}.xi-ok-right::before{width:60%;left:35%;top:42%;-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-webkit-animation:showOKRight .75s ease;animation:showOKRight .75s ease}@-webkit-keyframes showOKLeft{75%,from{-webkit-transform:rotate(45deg);transform:rotate(45deg);width:0;left:21%;top:37%}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);width:40%;left:15%;top:50%}}@keyframes showOKLeft{75%,from{-webkit-transform:rotate(45deg);transform:rotate(45deg);width:0;left:21%;top:37%}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);width:40%;left:15%;top:50%}}@-webkit-keyframes showOKRight{80%,from{-webkit-transform:rotate(-50deg);transform:rotate(-50deg);width:0;left:46%;top:65%}to{-webkit-transform:rotate(-50deg);transform:rotate(-50deg);width:60%;left:35%;top:42%}}@keyframes showOKRight{80%,from{-webkit-transform:rotate(-50deg);transform:rotate(-50deg);width:0;left:46%;top:65%}to{-webkit-transform:rotate(-50deg);transform:rotate(-50deg);width:60%;left:35%;top:42%}}.xi-info span::before{position:absolute;background-color:#5080DF}.xi-info-circle::before{width:11%;height:11%;border-radius:50%;left:50%;top:15%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.xi-info-line::before{width:8%;height:45%;border-radius:10px;left:50%;top:35%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.xi-warning span::before{position:absolute;background-color:#F29F3F}.xi-warning-circle::before{width:11%;height:11%;border-radius:50%;left:50%;top:71%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.xi-warning-line::before{width:8%;height:45%;border-radius:10px;left:50%;top:15%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.xi-error span::before{position:absolute;background-color:#EF6080;width:8%;border-radius:10px}.xi-error-right::before{height:80%;top:10%;left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);-webkit-animation:errorDrawRight .6s ease;animation:errorDrawRight .6s ease}.xi-error-left::before{height:80%;top:10%;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translateX(-50%) rotate(-45deg);-webkit-animation:errorDrawLeft .75s ease;animation:errorDrawLeft .75s ease}@-webkit-keyframes errorDrawLeft{75%,from{height:0;top:22%;left:23%}to{height:80%;top:10%;left:50%}}@keyframes errorDrawLeft{75%,from{height:0;top:22%;left:23%}to{height:80%;top:10%;left:50%}}@-webkit-keyframes errorDrawRight{80%,from{height:0;top:22%;left:76%}to{height:80%;top:10%;left:50%}}@keyframes errorDrawRight{80%,from{height:0;top:22%;left:76%}to{height:80%;top:10%;left:50%}}.noscroll{overflow:hidden} 3 | .x0p.default .button,.x0p.default .icon-wrapper,.x0p.default .text-pure-wrapper,.x0p.default .text-wrapper{display:inline-block;vertical-align:top}.x0p.default .icon-wrapper{position:relative;width:35%;height:100%}.x0p.default .text-wrapper{position:relative;width:65%;height:100%;margin:0 auto}.x0p.default .text-pure-wrapper{position:relative;width:100%;height:100%}.x0p.default .text-anchor{position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.x0p.default .content{width:100%;height:80%;height:calc(100% - 40px)}.x0p.default.no-button .content{height:100%}.x0p.default .buttons{width:100%;height:40px;position:absolute;bottom:0;background-color:#eee}.x0p.default .text-wrapper .input,.x0p.default .text-wrapper .text,.x0p.default .text-wrapper .title{padding-left:0}.x0p.default .title{padding:0 25px;box-sizing:border-box;font-size:28px;font-weight:700;color:#333}.x0p.default .text{margin-top:5%;padding:0 25px;font-size:18px;color:#777}.x0p.default .error{margin-top:1px;padding:5px 10px;font-size:13px;background-color:#fe9999;color:#fcfcfc}.x0p.default .input{padding:0 30px}.x0p.default input[type=text],.x0p.default input[type=password]{margin-top:7%;padding:8px 10px;outline:0;background-color:#f9f9f9;border-width:0 0 1px;border-style:solid;border-color:#aaa;font-size:18px;box-sizing:border-box;width:100%;color:#aaa;-webkit-transition:all ease .3s;transition:all ease .3s}.x0p.default input[type=text]:focus,.x0p.default input[type=password]:focus{border-color:#5080DF;color:#5080DF}.x0p.default .button{text-align:center;padding:12px 0;font-size:16px;margin-bottom:0;box-sizing:border-box;border:0;outline-width:0;outline-style:solid;outline-offset:-1px}.x0p.default .button-outline:focus{outline-width:1px;-webkit-animation:x0pButtonOutline .3s ease;animation:x0pButtonOutline .3s ease}.x0p.default .button:hover{cursor:pointer}@-webkit-keyframes x0pButtonOutline{from{outline-offset:7px}to{outline-offset:-1px}}@keyframes x0pButtonOutline{from{outline-offset:7px}to{outline-offset:-1px}}.x0p.default .button-ok{background-color:#60BF80;outline-color:#207F40;color:#fefefe}.x0p.default .button-ok:hover{background-color:#50AF70}.x0p.default .button-cancel{background-color:#eee;outline-color:#aaa;color:#666}.x0p.default .button-cancel:hover{background-color:#e3e3e3}.x0p.default .button-warning{background-color:#F29F3F;outline-color:#B25F00;color:#fefefe}.x0p.default .button-warning:hover{background-color:#E28F2F}.x0p.default .button-info{background-color:#6090EF;outline-color:#2050AF;color:#fefefe}.x0p.default .button-info:hover{background-color:#5080DF}.x0p.default .button-error{background-color:#EF6080;outline-color:#AF2040;color:#fefefe}.x0p.default .button-error:hover{background-color:#DF5070} -------------------------------------------------------------------------------- /src/assets/iconfont/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1565861826693'); /* IE9 */ 3 | src: url('iconfont.eot?t=1565861826693#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('iconfont.woff?t=1565861826693') format('woff'), 6 | url('iconfont.ttf?t=1565861826693') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1565861826693#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-sousuo1:before { 19 | content: "\e624"; 20 | } 21 | 22 | .icon-youhuiquan2:before { 23 | content: "\e67b"; 24 | } 25 | 26 | .icon-tuan:before { 27 | content: "\e776"; 28 | } 29 | 30 | .icon-weibiaoti1:before { 31 | content: "\e648"; 32 | } 33 | 34 | .icon-youhuiquan3:before { 35 | content: "\e62d"; 36 | } 37 | 38 | .icon-images:before { 39 | content: "\e681"; 40 | } 41 | 42 | .icon-jianpan:before { 43 | content: "\e693"; 44 | } 45 | 46 | .icon-putonglunbotu:before { 47 | content: "\e609"; 48 | } 49 | 50 | .icon-shuaxin:before { 51 | content: "\e603"; 52 | } 53 | 54 | .icon-guanyu:before { 55 | content: "\e637"; 56 | } 57 | 58 | .icon-gonggao1:before { 59 | content: "\e60f"; 60 | } 61 | 62 | .icon-pin1:before { 63 | content: "\e677"; 64 | } 65 | 66 | .icon-zujiantubiao-wenbenyu:before { 67 | content: "\e66d"; 68 | } 69 | 70 | .icon-jilu:before { 71 | content: "\e607"; 72 | } 73 | 74 | .icon-picture:before { 75 | content: "\e602"; 76 | } 77 | 78 | .icon-erweima:before { 79 | content: "\e605"; 80 | } 81 | 82 | .icon-tuangou1:before { 83 | content: "\e619"; 84 | } 85 | 86 | .icon-lianjie:before { 87 | content: "\e604"; 88 | } 89 | 90 | .icon-yun:before { 91 | content: "\e60c"; 92 | } 93 | 94 | .icon-save1:before { 95 | content: "\e60d"; 96 | } 97 | 98 | .icon-huazhuangpin:before { 99 | content: "\e620"; 100 | } 101 | 102 | .icon-lunbotuguanli:before { 103 | content: "\e611"; 104 | } 105 | 106 | .icon-tupian1:before { 107 | content: "\e61a"; 108 | } 109 | 110 | .icon-shuaxin1:before { 111 | content: "\e618"; 112 | } 113 | 114 | .icon-baobiaoyuanmax:before { 115 | content: "\e63c"; 116 | } 117 | 118 | .icon-liulanjilu:before { 119 | content: "\e60b"; 120 | } 121 | 122 | .icon-lunbotuguanli1:before { 123 | content: "\e672"; 124 | } 125 | 126 | .icon-daohanghaiwaigou:before { 127 | content: "\e601"; 128 | } 129 | 130 | .icon-wenzhang:before { 131 | content: "\e600"; 132 | } 133 | 134 | .icon-quanping:before { 135 | content: "\e608"; 136 | } 137 | 138 | .icon-shipin1:before { 139 | content: "\e633"; 140 | } 141 | 142 | .icon-wenzhangliebiaoxinbiaoqian:before { 143 | content: "\e652"; 144 | } 145 | 146 | .icon-xian-kuanju-wenbenyu:before { 147 | content: "\e73a"; 148 | } 149 | 150 | .icon-kongbai:before { 151 | content: "\e63a"; 152 | } 153 | 154 | -------------------------------------------------------------------------------- /src/assets/lib/x0popup/x0popup.min.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | var x0popup, x0p 4 | var x0pDefaultConfig = { 5 | title: 'Message', 6 | text: null, 7 | theme: 'default', 8 | overlay: true, 9 | width: '90%', 10 | height: '50%', 11 | maxWidth: '450px', 12 | maxHeight: '200px', 13 | type: 'text', 14 | icon: null, 15 | iconURL: null, 16 | inputType: null, 17 | inputValue: null, 18 | inputPlaceholder: null, 19 | inputColor: null, 20 | inputValidator: null, 21 | inputPromise: null, 22 | showCancelButton: null, 23 | buttons: null, 24 | autoClose: null, 25 | html: false, 26 | animation: true, 27 | animationType: 'pop', 28 | overlayAnimation: true, 29 | keyResponse: true, 30 | showButtonOutline: false, 31 | buttonTextOk: 'OK', 32 | buttonTextConfirm: 'Confirm', 33 | buttonTextCancel: 'Cancel', 34 | buttonTextDefault: 'Button' 35 | } 36 | 37 | x0popup = x0p = function () { 38 | var personlization = arguments[0] 39 | var callback = null 40 | var config = JSON.parse(JSON.stringify(x0pDefaultConfig)) 41 | var buttons; var timeoutFunc = null 42 | var body = document.body 43 | 44 | // Overwrite default config 45 | if (typeof (personlization) === 'string') { // easy calling 46 | config.title = arguments[0]; 47 | (arguments[1] != undefined) && (config.text = arguments[1]); 48 | (arguments[2] != undefined) && (config.type = arguments[2]) 49 | if (arguments[3] != undefined) { 50 | (typeof (arguments[3]) === 'boolean') ? (config.overlayAnimation = arguments[3]) : (callback = arguments[3]) 51 | } 52 | } else { // specific 53 | for (var key in personlization) { 54 | config[key] = personlization[key] 55 | } 56 | (arguments[1] != undefined) && (callback = arguments[1]) 57 | } 58 | 59 | // Start construction 60 | /** 61 | * Configuration Logic 62 | * Icon Priority: icon > type 63 | * Input Type Priority: inputType > type 64 | * Buttons: buttons > showCancelButton > type 65 | **/ 66 | var str = '' 67 | var textOnly = (config.icon == null && (config.type == 'text' || config.type == 'input')) 68 | var inputType = (config.inputType != null ? config.inputType : (config.type == 'input' ? 'text' : null)) 69 | var inputValue = (config.inputValue == null ? '' : config.inputValue) 70 | var inputPlaceholder = (config.inputPlaceholder == null ? '' : config.inputPlaceholder) 71 | var buttonStr = generateButtons() 72 | var promiseResolve, promiseReject 73 | 74 | var pop = new Promise(function (resolve, reject) { 75 | promiseResolve = resolve 76 | promiseReject = reject; 77 | 78 | (config.overlay) && (str += '
') 79 | str += '
' 80 | str += '
' 81 | str += textOnly ? '
' : generateIcon() + '
' 82 | str += '
' 83 | str += '
' + config.title + '
'; 84 | (config.text != null) && (str += '
' + (config.html ? config.text : htmlEncode(config.text)) + '
'); 85 | (inputType != null) && (str += '
' + generateInputColor() + '
') 86 | str += '
' 87 | str += '
' 88 | str += '
' 89 | str += buttonStr 90 | str += '
' 91 | 92 | // Close Previous Popup 93 | close() 94 | // Append to Body 95 | body.insertAdjacentHTML('beforeend', str) 96 | 97 | // No Scroll 98 | body.classList.add('noscroll') 99 | 100 | // Add Handlers 101 | addButtonHandlers(); 102 | // Use keydown because some special keys do not trigger keypress in Chrome 103 | (config.keyResponse == true) && (document.addEventListener('keydown', x0pKeyHandler)) 104 | 105 | // Auto Focus Input DOM 106 | var inputDOM = document.getElementById('x0p-input'); 107 | (inputType != null) && (inputDOM.focus()); 108 | 109 | // Auto Close Timer 110 | (config.autoClose != null) && (timeoutFunc = setTimeout(function () { 111 | closeAndTriggerCallback('timeout') 112 | }, config.autoClose)) 113 | }) 114 | 115 | return pop 116 | 117 | // Construction Helpers 118 | function generateStyle () { 119 | var str = '' 120 | str += 'width: ' + config.width + ';' 121 | str += 'height: ' + config.height + ';'; 122 | (config.maxWidth != null) && (str += 'max-width: ' + config.maxWidth + ';'); 123 | (config.maxHeight != null) && (str += 'max-height: ' + config.maxHeight + ';'); 124 | (config.animation) && (str += '-webkit-animation-name: x0p' + config.animationType + '; animation-name: x0p' + config.animationType + ';'); 125 | (!config.overlay) && (str += 'outline: 1px solid #ddd') 126 | return str 127 | } 128 | 129 | function generateIcon () { 130 | var str = '' 131 | var iconType = (config.icon == null ? config.type : config.icon) 132 | str += '
' 133 | switch (iconType) { 134 | case 'ok': 135 | str += '' 136 | break 137 | case 'error': 138 | str += '' 139 | break 140 | case 'info': 141 | str += '' 142 | break 143 | case 'warning': 144 | str += '' 145 | break 146 | case 'custom': 147 | str += '' 148 | break 149 | } 150 | str += '
' 151 | return str 152 | } 153 | 154 | function generateButtons () { 155 | var str = '' 156 | buttons = config.buttons 157 | if (buttons == null) { 158 | buttons = [] 159 | if ( 160 | config.showCancelButton == true || 161 | (config.showCancelButton != false && (config.type == 'warning' || config.type == 'input')) 162 | ) { 163 | buttons.push({ 164 | type: 'cancel', 165 | key: 27 166 | }) 167 | } 168 | if (config.type == 'text' || config.type == 'input') { 169 | buttons.push({ 170 | type: 'info', 171 | key: 13 172 | }) 173 | } else { 174 | buttons.push({ 175 | type: config.type, 176 | key: 13 177 | }) 178 | } 179 | } 180 | 181 | if (buttons.length == 0) { return '' } 182 | 183 | var buttonType = (config.keyResponse == true) ? 'button' : 'div' 184 | var buttonCount = buttons.length 185 | var buttonWidth = 'width: ' + (100.0 / buttonCount).toFixed(2) + '%; width: calc(100% / ' + buttonCount + ');' 186 | var buttonOutline = (config.showButtonOutline == true) ? ' button-outline' : '' 187 | 188 | str += '
' 189 | for (var i = 0; i < buttons.length; ++i) { 190 | var button = buttons[i] 191 | str += '<' + buttonType + ' id="x0p-button-' + i + '" class="button button-' + button.type + buttonOutline + '" style="' + buttonWidth + '">' + generateButtonText(button) + '' 192 | } 193 | str += '
' 194 | return str 195 | } 196 | 197 | function removeElementById (id) { 198 | var el = document.getElementById(id); 199 | (el != null) && (el.parentNode.removeChild(el)) 200 | } 201 | 202 | function close () { 203 | body.classList.remove('noscroll') 204 | document.removeEventListener('keydown', x0pKeyHandler) 205 | removeElementById('x0popup') 206 | removeElementById('x0p-overlay') 207 | } 208 | 209 | function showX0l () { 210 | var buttons = document.getElementById('x0p-buttons') 211 | buttons.innerHTML = '
' 212 | } 213 | 214 | function addButtonHandlers () { 215 | var defaultIndex = buttons.length - 1 216 | 217 | for (var i = 0; i < buttons.length; ++i) { 218 | var buttonEl = document.getElementById('x0p-button-' + i); 219 | (function (buttonType, showLoading) { 220 | buttonEl.addEventListener('click', function () { 221 | closeAndTriggerCallback(buttonType, showLoading) 222 | }) 223 | })(buttons[i].type, buttons[i].showLoading) 224 | // Prevent focus 225 | buttonEl.addEventListener('mousedown', function (event) { 226 | event.preventDefault ? event.preventDefault() : (event.returnValue = false) 227 | }); 228 | // Update default index 229 | (buttons[i].default == true) && (defaultIndex = i) 230 | } 231 | 232 | if (config.keyResponse && buttons.length > 0) { 233 | var lastButton = document.getElementById('x0p-button-' + (buttons.length - 1)) 234 | 235 | // Loop on tabbing 236 | lastButton.addEventListener('keydown', function (event) { 237 | if (event.keyCode == 9) { 238 | document.getElementById('x0p-button-0').focus() 239 | event.preventDefault ? event.preventDefault() : (event.returnValue = false) 240 | } 241 | }) 242 | 243 | // Auto focus default button 244 | document.getElementById('x0p-button-' + defaultIndex).focus() 245 | } else { 246 | document.activeElement.blur() 247 | } 248 | } 249 | 250 | function x0pKeyHandler (event) { 251 | var keyCode = event.keyCode 252 | for (var i = 0; i < buttons.length; ++i) { 253 | if (keyCode == buttons[i].key) { 254 | var buttonEl = document.getElementById('x0p-button-' + i) 255 | 256 | event.preventDefault ? event.preventDefault() : (event.returnValue = false) 257 | buttonEl && buttonEl.click() 258 | } 259 | } 260 | } 261 | 262 | function closeAndTriggerCallback (buttonType, showLoading) { 263 | var popup = document.getElementById('x0popup') 264 | if (popup == null) { 265 | return 266 | } 267 | 268 | var inputDOM = document.getElementById('x0p-input') 269 | if (buttonType != 'cancel' && inputType != null && inputDOM != null) { 270 | if (config.inputPromise != null) { 271 | config.inputPromise(buttonType, inputDOM.value).then(function (msg) { 272 | if (msg != null) { 273 | showInputError(msg) 274 | } else { 275 | triggerCallback(buttonType, showLoading) 276 | } 277 | }) 278 | 279 | return 280 | } else if (config.inputValidator != null) { 281 | var msg = config.inputValidator(buttonType, inputDOM.value) 282 | if (msg != null) { 283 | showInputError(msg) 284 | return 285 | } 286 | } 287 | } 288 | 289 | triggerCallback(buttonType, showLoading) 290 | } 291 | 292 | function triggerCallback (buttonType, showLoading) { 293 | var inputDOM = document.getElementById('x0p-input') 294 | 295 | clearTimeout(timeoutFunc) 296 | if (showLoading == true) { 297 | showX0l() 298 | } else { 299 | close() 300 | } 301 | 302 | var inputText = (inputDOM == null ? null : inputDOM.value); 303 | 304 | (callback != null) && (callback(buttonType, inputText, close)) 305 | 306 | promiseResolve({ 307 | button: buttonType, 308 | text: inputText, 309 | close: close 310 | }) 311 | } 312 | 313 | function showInputError (msg) { 314 | removeElementById('x0p-input-error') 315 | var anchor = document.getElementById('x0p-input-anchor') 316 | anchor.insertAdjacentHTML('beforeend', '
' + msg + '
') 317 | } 318 | 319 | function generateButtonText (button) { 320 | if (button.hasOwnProperty('text')) { return button.text } 321 | switch (button.type) { 322 | case 'ok': 323 | case 'error': 324 | case 'info': 325 | return x0pDefaultConfig.buttonTextOk 326 | case 'warning': 327 | return x0pDefaultConfig.buttonTextConfirm 328 | case 'cancel': 329 | return x0pDefaultConfig.buttonTextCancel 330 | default: 331 | return x0pDefaultConfig.buttonTextDefault 332 | } 333 | } 334 | 335 | function generateInputColor () { 336 | var inputColor = config.inputColor 337 | return inputColor == null ? '' : '' 338 | } 339 | 340 | /** 341 | * HtmlEncode() from http://stackoverflow.com/questions/784586/convert-special-characters-to-html-in-javascript 342 | **/ 343 | function htmlEncode (s) { 344 | var el = document.createElement('div') 345 | el.innerText = el.textContent = s 346 | s = el.innerHTML 347 | return s 348 | } 349 | } 350 | 351 | // User Functions 352 | x0popup.setDefault = x0p.setDefault = function () { 353 | var config = arguments[0] 354 | for (var key in config) { 355 | x0pDefaultConfig[key] = config[key] 356 | } 357 | } 358 | 359 | // if (typeof module === 'object') { 360 | // module.exports = x0popup 361 | // } 362 | 363 | export default x0popup 364 | -------------------------------------------------------------------------------- /src/components/layout.vue: -------------------------------------------------------------------------------- 1 | 266 | 267 | 392 | 393 | 469 | -------------------------------------------------------------------------------- /src/assets/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 3 | 4 | /* Document 5 | ========================================================================== */ 6 | 7 | /** 8 | * 1. Correct the line height in all browsers. 9 | * 2. Prevent adjustments of font size after orientation changes in 10 | * IE on Windows Phone and in iOS. 11 | */ 12 | 13 | html { 14 | line-height: 1.15; 15 | /* 1 */ 16 | -ms-text-size-adjust: 100%; 17 | /* 2 */ 18 | -webkit-text-size-adjust: 100%; 19 | /* 2 */ 20 | } 21 | 22 | /* Sections 23 | ========================================================================== */ 24 | 25 | /** 26 | * Remove the margin in all browsers (opinionated). 27 | */ 28 | 29 | body { 30 | margin: 0; 31 | } 32 | 33 | /** 34 | * Add the correct display in IE 9-. 35 | */ 36 | 37 | article, aside, footer, header, nav, section { 38 | display: block; 39 | } 40 | 41 | /** 42 | * Correct the font size and margin on `h1` elements within `section` and 43 | * `article` contexts in Chrome, Firefox, and Safari. 44 | */ 45 | 46 | h1 { 47 | font-size: 2em; 48 | margin: 0.67em 0; 49 | } 50 | 51 | /* Grouping content 52 | ========================================================================== */ 53 | 54 | /** 55 | * Add the correct display in IE 9-. 56 | * 1. Add the correct display in IE. 57 | */ 58 | 59 | figcaption, figure, main { 60 | /* 1 */ 61 | display: block; 62 | } 63 | 64 | /** 65 | * Add the correct margin in IE 8. 66 | */ 67 | 68 | figure { 69 | margin: 1em 40px; 70 | } 71 | 72 | /** 73 | * 1. Add the correct box sizing in Firefox. 74 | * 2. Show the overflow in Edge and IE. 75 | */ 76 | 77 | hr { 78 | box-sizing: content-box; 79 | /* 1 */ 80 | height: 0; 81 | /* 1 */ 82 | overflow: visible; 83 | /* 2 */ 84 | } 85 | 86 | /** 87 | * 1. Correct the inheritance and scaling of font size in all browsers. 88 | * 2. Correct the odd `em` font sizing in all browsers. 89 | */ 90 | 91 | pre { 92 | font-family: monospace, monospace; 93 | /* 1 */ 94 | font-size: 1em; 95 | /* 2 */ 96 | } 97 | 98 | /* Text-level semantics 99 | ========================================================================== */ 100 | 101 | /** 102 | * 1. Remove the gray background on active links in IE 10. 103 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 104 | */ 105 | 106 | a { 107 | background-color: transparent; 108 | /* 1 */ 109 | -webkit-text-decoration-skip: objects; 110 | /* 2 */ 111 | } 112 | 113 | /** 114 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 115 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 116 | */ 117 | 118 | abbr[title] { 119 | border-bottom: none; 120 | /* 1 */ 121 | text-decoration: underline; 122 | /* 2 */ 123 | text-decoration: underline dotted; 124 | /* 2 */ 125 | } 126 | 127 | /** 128 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 129 | */ 130 | 131 | b, strong { 132 | font-weight: inherit; 133 | } 134 | 135 | /** 136 | * Add the correct font weight in Chrome, Edge, and Safari. 137 | */ 138 | 139 | b, strong { 140 | font-weight: bolder; 141 | } 142 | 143 | /** 144 | * 1. Correct the inheritance and scaling of font size in all browsers. 145 | * 2. Correct the odd `em` font sizing in all browsers. 146 | */ 147 | 148 | code, kbd, samp { 149 | font-family: monospace, monospace; 150 | /* 1 */ 151 | font-size: 1em; 152 | /* 2 */ 153 | } 154 | 155 | /** 156 | * Add the correct font style in Android 4.3-. 157 | */ 158 | 159 | dfn { 160 | font-style: italic; 161 | } 162 | 163 | /** 164 | * Add the correct background and color in IE 9-. 165 | */ 166 | 167 | mark { 168 | background-color: #ff0; 169 | color: #000; 170 | } 171 | 172 | /** 173 | * Add the correct font size in all browsers. 174 | */ 175 | 176 | small { 177 | font-size: 80%; 178 | } 179 | 180 | /** 181 | * Prevent `sub` and `sup` elements from affecting the line height in 182 | * all browsers. 183 | */ 184 | 185 | sub, sup { 186 | font-size: 75%; 187 | line-height: 0; 188 | position: relative; 189 | vertical-align: baseline; 190 | } 191 | 192 | sub { 193 | bottom: -0.25em; 194 | } 195 | 196 | sup { 197 | top: -0.5em; 198 | } 199 | 200 | /* Embedded content 201 | ========================================================================== */ 202 | 203 | /** 204 | * Add the correct display in IE 9-. 205 | */ 206 | 207 | audio, video { 208 | display: inline-block; 209 | } 210 | 211 | /** 212 | * Add the correct display in iOS 4-7. 213 | */ 214 | 215 | audio:not([controls]) { 216 | display: none; 217 | height: 0; 218 | } 219 | 220 | /** 221 | * Remove the border on images inside links in IE 10-. 222 | */ 223 | 224 | img { 225 | border-style: none; 226 | } 227 | 228 | /** 229 | * Hide the overflow in IE. 230 | */ 231 | 232 | svg:not(:root) { 233 | overflow: hidden; 234 | } 235 | 236 | /* Forms 237 | ========================================================================== */ 238 | 239 | /** 240 | * 1. Change the font styles in all browsers (opinionated). 241 | * 2. Remove the margin in Firefox and Safari. 242 | */ 243 | 244 | button, input, optgroup, select, textarea { 245 | font-family: sans-serif; 246 | /* 1 */ 247 | font-size: 100%; 248 | /* 1 */ 249 | line-height: 1.15; 250 | /* 1 */ 251 | margin: 0; 252 | /* 2 */ 253 | } 254 | 255 | /** 256 | * Show the overflow in IE. 257 | * 1. Show the overflow in Edge. 258 | */ 259 | 260 | button, input { 261 | /* 1 */ 262 | overflow: visible; 263 | } 264 | 265 | /** 266 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 267 | * 1. Remove the inheritance of text transform in Firefox. 268 | */ 269 | 270 | button, select { 271 | /* 1 */ 272 | text-transform: none; 273 | } 274 | 275 | /** 276 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 277 | * controls in Android 4. 278 | * 2. Correct the inability to style clickable types in iOS and Safari. 279 | */ 280 | 281 | button, html [type="button"], [type="reset"], [type="submit"] { 282 | -webkit-appearance: button; 283 | /* 2 */ 284 | } 285 | 286 | /** 287 | * Remove the inner border and padding in Firefox. 288 | */ 289 | 290 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 291 | border-style: none; 292 | padding: 0; 293 | } 294 | 295 | /** 296 | * Restore the focus styles unset by the previous rule. 297 | */ 298 | 299 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { 300 | outline: 1px dotted ButtonText; 301 | } 302 | 303 | /** 304 | * Correct the padding in Firefox. 305 | */ 306 | 307 | fieldset { 308 | padding: 0.35em 0.75em 0.625em; 309 | } 310 | 311 | /** 312 | * 1. Correct the text wrapping in Edge and IE. 313 | * 2. Correct the color inheritance from `fieldset` elements in IE. 314 | * 3. Remove the padding so developers are not caught out when they zero out 315 | * `fieldset` elements in all browsers. 316 | */ 317 | 318 | legend { 319 | box-sizing: border-box; 320 | /* 1 */ 321 | color: inherit; 322 | /* 2 */ 323 | display: table; 324 | /* 1 */ 325 | max-width: 100%; 326 | /* 1 */ 327 | padding: 0; 328 | /* 3 */ 329 | white-space: normal; 330 | /* 1 */ 331 | } 332 | 333 | /** 334 | * 1. Add the correct display in IE 9-. 335 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 336 | */ 337 | 338 | progress { 339 | display: inline-block; 340 | /* 1 */ 341 | vertical-align: baseline; 342 | /* 2 */ 343 | } 344 | 345 | /** 346 | * Remove the default vertical scrollbar in IE. 347 | */ 348 | 349 | textarea { 350 | overflow: auto; 351 | } 352 | 353 | /** 354 | * 1. Add the correct box sizing in IE 10-. 355 | * 2. Remove the padding in IE 10-. 356 | */ 357 | 358 | [type="checkbox"], [type="radio"] { 359 | box-sizing: border-box; 360 | /* 1 */ 361 | padding: 0; 362 | /* 2 */ 363 | } 364 | 365 | /** 366 | * Correct the cursor style of increment and decrement buttons in Chrome. 367 | */ 368 | 369 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 370 | height: auto; 371 | } 372 | 373 | /** 374 | * 1. Correct the odd appearance in Chrome and Safari. 375 | * 2. Correct the outline style in Safari. 376 | */ 377 | 378 | [type="search"] { 379 | -webkit-appearance: textfield; 380 | /* 1 */ 381 | outline-offset: -2px; 382 | /* 2 */ 383 | } 384 | 385 | /** 386 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 387 | */ 388 | 389 | [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { 390 | -webkit-appearance: none; 391 | } 392 | 393 | /** 394 | * 1. Correct the inability to style clickable types in iOS and Safari. 395 | * 2. Change font properties to `inherit` in Safari. 396 | */ 397 | 398 | ::-webkit-file-upload-button { 399 | -webkit-appearance: button; 400 | /* 1 */ 401 | font: inherit; 402 | /* 2 */ 403 | } 404 | 405 | /* Interactive 406 | ========================================================================== */ 407 | 408 | /* 409 | * Add the correct display in IE 9-. 410 | * 1. Add the correct display in Edge, IE, and Firefox. 411 | */ 412 | 413 | details, menu { 414 | display: block; 415 | } 416 | 417 | /* 418 | * Add the correct display in all browsers. 419 | */ 420 | 421 | summary { 422 | display: list-item; 423 | } 424 | 425 | /* Scripting 426 | ========================================================================== */ 427 | 428 | /** 429 | * Add the correct display in IE 9-. 430 | */ 431 | 432 | canvas { 433 | display: inline-block; 434 | } 435 | 436 | /** 437 | * Add the correct display in IE. 438 | */ 439 | 440 | template { 441 | display: none; 442 | } 443 | 444 | /* Hidden 445 | ========================================================================== */ 446 | 447 | /** 448 | * Add the correct display in IE 10-. 449 | */ 450 | 451 | [hidden] { 452 | display: none; 453 | } 454 | 455 | .clearfix:after { 456 | content: "."; 457 | display: block; 458 | clear: both; 459 | visibility: hidden; 460 | height: 0; 461 | font-size: 0; 462 | } 463 | 464 | ::-moz-selection { 465 | background: #009688; 466 | color: #FFF; 467 | } 468 | 469 | ::selection { 470 | background: #159b76; 471 | color: #FFF; 472 | } 473 | 474 | ::-webkit-scrollbar { 475 | width: 6px; 476 | height: 6px; 477 | } 478 | 479 | ::-webkit-scrollbar-thumb { 480 | border-radius: 10px; 481 | background-color: #bdbdbd; 482 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 483 | } 484 | 485 | html,body { 486 | box-sizing: border-box; 487 | height: 100%; 488 | } 489 | 490 | *, *:before, *:after { 491 | box-sizing: border-box; 492 | } 493 | 494 | * { 495 | padding:0; 496 | margin:0; 497 | } 498 | 499 | ul,li{ 500 | list-style: none; 501 | } 502 | 503 | /* .twolist-hidden { 504 | display: -webkit-box; 505 | word-break: break-all; 506 | text-overflow: ellipsis; 507 | overflow: hidden; 508 | -webkit-box-orient: vertical; 509 | -webkit-line-clamp: 2; 510 | } 511 | 512 | .form-edit-wrapper { 513 | display: -webkit-box; 514 | display: -ms-flexbox; 515 | display: flex; 516 | width: 100%; 517 | min-width: 1200px; 518 | background: #FFF; 519 | -webkit-box-pack: justify; 520 | -ms-flex-pack: justify; 521 | justify-content: space-between; 522 | padding: 30px 40px; 523 | -webkit-box-align: start; 524 | -ms-flex-align: start; 525 | align-items: flex-start; 526 | } 527 | 528 | .edit-body { 529 | width: 400px; 530 | height: auto; 531 | } 532 | 533 | .center-container { 534 | width: 375px; 535 | height: 688px; 536 | border: 1px solid #e9e9e9; 537 | box-shadow: 0 3px 10px #dcdcdc; 538 | position: relative; 539 | } 540 | 541 | .center-container .model-title { 542 | height: 88px; 543 | width: 100%; 544 | position: relative; 545 | } 546 | 547 | .center-container .model-title img { 548 | width: 100%; 549 | height: 100%; 550 | } */ 551 | 552 | 553 | 554 | 555 | 556 | .lay-article { 557 | background: #f7f7f7; 558 | } 559 | 560 | .lay-article .article-wrap { 561 | width: 100%; 562 | height: 100px; 563 | padding: 15px; 564 | background: #FFF; 565 | } 566 | 567 | .lay-article .article-wrap:not(last-child) { 568 | margin-bottom: 10px; 569 | } 570 | 571 | .lay-article .article-wrap .article-left { 572 | float: left; 573 | height: 100%; 574 | width: 200px; 575 | } 576 | 577 | .savePageBtn { 578 | padding: 10px 13px; 579 | text-align: right; 580 | border-top: 1px dotted #ddd; 581 | } 582 | 583 | .lay-article .article-wrap .article-img { 584 | float: right; 585 | width: 120px; 586 | height: 70px; 587 | } 588 | 589 | .lay-article .article-wrap .article-img img { 590 | display: block; 591 | width: 120px; 592 | height: 100%; 593 | object-fit: cover; 594 | } 595 | 596 | .lay-special { 597 | height: 30px; 598 | align-items: center; 599 | } 600 | 601 | .lay-special .special-left { 602 | width: 70px; 603 | padding: 5px 10px; 604 | } 605 | 606 | .lay-special .special-left img { 607 | width: 100%; 608 | } 609 | 610 | 611 | 612 | .layout-list .layout-main .lay-imgSingle .img-wrap { 613 | display: block; 614 | margin: 0; 615 | height: auto; 616 | flex: 1; 617 | position: relative; 618 | } 619 | 620 | .layout-list .layout-main .lay-imgSingle .img-wrap img { 621 | display: block; 622 | width: 100%; 623 | } 624 | .layout-list .layout-main .lay-imgSingle .img-wrap .img-btn{ 625 | display: block; 626 | position: absolute; 627 | bottom:25px; 628 | left:40px; 629 | width: 80px; 630 | height: 30px; 631 | line-height: 30px; 632 | text-align: center; 633 | } 634 | 635 | .lay-service { 636 | width: 50px; 637 | height: 50px; 638 | padding: 4px; 639 | position: absolute; 640 | bottom: 30px; 641 | right: 10px; 642 | } 643 | 644 | 645 | .lay-coupon { 646 | padding: 4px 12px; 647 | } 648 | 649 | .lay-coupon .coupon-item { 650 | width: 100%; 651 | box-sizing: border-box; 652 | background: linear-gradient(to right, #ff6565, #ff8a8a); 653 | margin: .1rem 0; 654 | border-radius: 5px; 655 | overflow: hidden; 656 | position: relative; 657 | } 658 | 659 | .lay-coupon .coupon-item .coupon-left { 660 | width: 28%; 661 | height: 50px; 662 | color: rgb(255, 247, 247); 663 | font-size: 12px; 664 | padding: 0 14px; 665 | float: left; 666 | margin: 12px 0; 667 | text-align: center; 668 | box-sizing: border-box; 669 | border-right: 1px dotted #fff; 670 | display: inline-block; 671 | } 672 | 673 | .lay-coupon .coupon-item .coupon-left p { 674 | position: relative; 675 | top: 50%; 676 | transform: translateY(-50%); 677 | } 678 | 679 | .lay-coupon .coupon-item .coupon-right { 680 | width: 50%; 681 | height: 100%; 682 | float: left; 683 | text-align: left; 684 | color: #fff; 685 | box-sizing: border-box; 686 | padding: 10px; 687 | display: inline-block; 688 | font-size: 12px; 689 | } 690 | 691 | .lay-coupon .coupon-item .coupon-right .conpon-f { 692 | font-size: 14px; 693 | } 694 | 695 | .lay-coupon .coupon-item .coupon-btn { 696 | padding: 0 8px; 697 | background-color: #ffe7e7; 698 | color: #ff5454; 699 | font-size: 12px; 700 | position: absolute; 701 | top: 50%; 702 | transform: translateY(-50%); 703 | right: 10px; 704 | border-radius: 2px; 705 | } 706 | 707 | .lay-imgWindow{ 708 | min-height: 100px; 709 | } 710 | .lay-imgWindow.row0 .display { 711 | height: 0; 712 | width: 100%; 713 | margin: 0; 714 | padding-bottom: 50%; 715 | position: relative; 716 | } 717 | 718 | .display img { 719 | width: 100%; 720 | height: 100%; 721 | } 722 | 723 | .display .display-left { 724 | width: 50%; 725 | height: 100%; 726 | position: absolute; 727 | top: 0; 728 | left: 0; 729 | } 730 | 731 | .display .display-right { 732 | width: 50%; 733 | height: 100%; 734 | position: absolute; 735 | top: 0; 736 | left: 50%; 737 | } 738 | 739 | .display .display-right .display-right1 { 740 | width: 100%; 741 | height: 50%; 742 | position: absolute; 743 | top: 0; 744 | left: 0; 745 | } 746 | 747 | .display .display-right .display-right2 { 748 | width: 100%; 749 | height: 50%; 750 | position: absolute; 751 | top: 50%; 752 | left: 0; 753 | } 754 | 755 | .display .display-right .display-right2 .left { 756 | width: 50%; 757 | height: 100%; 758 | position: absolute; 759 | top: 0; 760 | left: 0; 761 | } 762 | 763 | .display .display-right .display-right2 .right { 764 | width: 50%; 765 | height: 100%; 766 | position: absolute; 767 | top: 0; 768 | left: 50%; 769 | } 770 | 771 | .lay-imgWindow.row2 .img-wrap { 772 | width: 50%; 773 | height: 150px; 774 | } 775 | 776 | .lay-imgWindow.row3 .img-wrap { 777 | width: 33%; 778 | height: 150px; 779 | } 780 | 781 | .lay-imgWindow.row4 .img-wrap { 782 | width: 25%; 783 | height: 150px; 784 | } 785 | 786 | .lay-imgWindow .img-wrap { 787 | float: left; 788 | box-sizing: border-box; 789 | } 790 | 791 | .lay-imgWindow .img-wrap img { 792 | width: 100%; 793 | height: 100%; 794 | object-fit: cover; 795 | } 796 | 797 | .lay-video .video-wrap { 798 | width: 100%; 799 | z-index: 1200; 800 | } 801 | 802 | .lay-video .video-wrap video { 803 | display: block; 804 | width: 100%; 805 | } 806 | 807 | .layout-list .layout-main .lay-imgSlide .el-carousel { 808 | overflow: hidden !important; 809 | width: 100%; 810 | height: 175px!important; 811 | } 812 | 813 | .layout-list .layout-main .el-carousel__container { 814 | height: 175px!important; 815 | } 816 | 817 | .layout-list .layout-main .el-carousel__item { 818 | height: 175px!important; 819 | } 820 | 821 | 822 | .pl25{ 823 | padding-left:25px; 824 | } 825 | .custom-tip{ 826 | margin-top:40px; 827 | } 828 | .custom-tip p{ 829 | margin-bottom: 5px; 830 | } 831 | 832 | 833 | 834 | .layout-list .layout-main .btn-clone { 835 | position: absolute; 836 | height: 18px; 837 | line-height: 18px; 838 | right: 50px; 839 | bottom: 2px; 840 | z-index: 90; 841 | width: 36px; 842 | text-align: center; 843 | font-size: 10px; 844 | color: #fff; 845 | background: #409eff; 846 | cursor: pointer; 847 | z-index: 1300; 848 | } 849 | 850 | .layout-list .layout-main .btn-delete { 851 | position: absolute; 852 | height: 18px; 853 | line-height: 18px; 854 | right: 2px; 855 | bottom: 2px; 856 | z-index: 90; 857 | width: 36px; 858 | text-align: center; 859 | font-size: 10px; 860 | color: #fff; 861 | background: rgba(0, 0, 0, 0.4); 862 | cursor: pointer; 863 | z-index: 1300; 864 | } 865 | 866 | .layout-list .ghost { 867 | background: #fff; 868 | border: 1px dashed #409eff; 869 | } 870 | 871 | .layout-list .ghost::after { 872 | background: #fff; 873 | } 874 | 875 | .layout-list li.ghost { 876 | position: relative; 877 | line-height: 30px; 878 | list-style: none; 879 | font-size: 0; 880 | } 881 | 882 | #selectGoods li { 883 | float: left; 884 | margin: 10px; 885 | height: 70px; 886 | width: 70px; 887 | background: #f7fafc; 888 | position: relative; 889 | border-radius: 3px; 890 | cursor: move; 891 | } 892 | 893 | #selectGoods li img { 894 | width: 100%; 895 | height: 100%; 896 | object-fit: cover; 897 | } 898 | 899 | #selectGoods li .icon-delete { 900 | position: absolute; 901 | top: -6px; 902 | right: -6px; 903 | border-radius: 50%; 904 | text-align: center; 905 | cursor: pointer; 906 | font-size: 18px; 907 | transition: background-color .3s ease-out, border-color .3s ease-out; 908 | -webkit-transition: background-color .3s ease-out, border-color .3s ease-out; 909 | } 910 | 911 | #selectGoods li .icon-delete:hover { 912 | color: #000; 913 | } 914 | 915 | .layout-list li.ghost::after { 916 | content: '放到这里'; 917 | display: block; 918 | background: #fff; 919 | position: absolute; 920 | left: 50%; 921 | margin-left: -32px; 922 | top: 0; 923 | font-size: 16px; 924 | color: #999; 925 | z-index: 10; 926 | } 927 | 928 | .divider { 929 | height: 0; 930 | margin: 20px auto; 931 | overflow: hidden; 932 | clear: both; 933 | border-top: 1px dashed #ccc; 934 | } 935 | 936 | .el-color-picker { 937 | height: 24px!important; 938 | vertical-align: middle; 939 | } 940 | 941 | .el-color-picker__trigger { 942 | height: 24px !important; 943 | } 944 | 945 | .reset-color { 946 | display: inline-block; 947 | padding: 0 10px; 948 | border: 1px solid #bdbdbd; 949 | text-align: center; 950 | height: 20px; 951 | line-height: 20px; 952 | vertical-align: middle; 953 | margin-left: 5px; 954 | } 955 | 956 | .main-body { 957 | padding: 10px; 958 | border: 1px solid #e9e9e9; 959 | } 960 | 961 | .main-body .el-form-item { 962 | padding: 0px; 963 | margin-bottom: 0!important; 964 | font-size: 12px!important; 965 | } 966 | .main-body .el-form-item__label{ 967 | font-size: 12px!important; 968 | line-height: 40px!important; 969 | } 970 | .main-body .el-slider__runway{ 971 | margin:12px 0!important; 972 | } 973 | 974 | .custom-item-t { 975 | padding: 5px; 976 | border-bottom: 1px solid #f0f0f0; 977 | margin-bottom: 15px; 978 | } 979 | 980 | .custom-item-t-c { 981 | padding: 0 10px; 982 | border-left: 4px solid #ff7159; 983 | text-align: left; 984 | } 985 | 986 | .custom-item .layui-form-label { 987 | box-sizing: content-box; 988 | } 989 | 990 | .custom-item .content { 991 | padding: 10px; 992 | } 993 | .custom-item .drag-block{ 994 | height: 30px; 995 | background:#F2F2F2; 996 | cursor: move; 997 | position: relative; 998 | } 999 | .custom-item .drag-block .handle-icon { 1000 | position: absolute; 1001 | right: 0px; 1002 | top: 0; 1003 | width: 30px; 1004 | height: 30px; 1005 | line-height: 30px; 1006 | text-align: center; 1007 | cursor: pointer; 1008 | } 1009 | 1010 | .custom-item .drag-block .handle-icon .iconfont { 1011 | font-size: 16px!important; 1012 | color: #999; 1013 | margin:0 auto; 1014 | } 1015 | 1016 | .custom-item .drag-block .handle-icon .iconfont:hover { 1017 | color: #ff7159; 1018 | } 1019 | 1020 | .custom-item .content-item { 1021 | position: relative; 1022 | display: -webkit-box; 1023 | display: -ms-flexbox; 1024 | display: flex; 1025 | margin-bottom: 5px; 1026 | } 1027 | 1028 | .content-item .el-form-item { 1029 | flex: 1; 1030 | } 1031 | .custom-item li{ 1032 | border:1px dashed #e9e9e9; 1033 | } 1034 | .custom-item li.ghost{ 1035 | border-color:#ff7159; 1036 | } 1037 | .content-item .el-radio-group .el-radio { 1038 | margin-bottom: 10px; 1039 | } 1040 | .el-select-dropdown__item.second span{ 1041 | padding-left:15px!important; 1042 | } 1043 | .number-input { 1044 | width: 100%; 1045 | padding: 5px; 1046 | margin-bottom: 4px; 1047 | border: 0; 1048 | border-bottom: 1px solid #c2cad8; 1049 | transition: all ease-in-out 0.15s 1050 | } 1051 | .tpl-block{ 1052 | flex:1; 1053 | padding-left:20px; 1054 | } 1055 | .tpl-item{ 1056 | width: 75px; 1057 | height: 75px; 1058 | display: inline-block; 1059 | border: 1px solid #e5e5e5; 1060 | margin: 0 10px 15px 0; 1061 | padding-top: 5px; 1062 | background-color: #fff; 1063 | text-align: center; 1064 | cursor: pointer; 1065 | } 1066 | .tpl-item.active{ 1067 | border:1px solid #ff7159; 1068 | } 1069 | .tpl-item .tpl-item-image{ 1070 | height: 40px; 1071 | } 1072 | .tpl-item .tpl-item-image img{ 1073 | height: auto; 1074 | width: 60px; 1075 | margin:0 auto; 1076 | vertical-align: middle; 1077 | } 1078 | .tpl-item .tpl-item-text{ 1079 | margin-top:10px; 1080 | font-size: 12px; 1081 | } 1082 | .selectLinkVal { 1083 | width: 100%; 1084 | padding: 0px 10px; 1085 | color: #555; 1086 | height: 30px; 1087 | line-height: 30px; 1088 | margin-top: 5px; 1089 | border: 1px solid #bdbdbd; 1090 | text-overflow: ellipsis; 1091 | overflow: hidden; 1092 | white-space: nowrap; 1093 | font-size: 12px; 1094 | } 1095 | 1096 | .layout-select { 1097 | width: 100%; 1098 | padding: 5px 6px; 1099 | color: #555; 1100 | line-height: 1.5; 1101 | margin-bottom: 4px; 1102 | } 1103 | .el-select{ 1104 | width: 100%!important; 1105 | } 1106 | .el-input__inner,.el-textarea__inner{ 1107 | border-radius: 0!important; 1108 | border: 1px solid #bdbdbd!important; 1109 | height: 30px!important; 1110 | line-height: 30px!important; 1111 | padding: 0 10px!important; 1112 | font-size: 12px!important; 1113 | } 1114 | 1115 | .number-input:focus { 1116 | border-color: #ff7159; 1117 | } 1118 | 1119 | .ml20 { 1120 | margin-left: 20px; 1121 | } 1122 | 1123 | .layout-tip { 1124 | color: #838fa1; 1125 | font-size: 12px; 1126 | } 1127 | 1128 | .custom-item .content-item .item-label { 1129 | width: 90px; 1130 | } 1131 | 1132 | .custom-item .content-item .el-input { 1133 | -webkit-box-flex: 1; 1134 | -ms-flex: 1; 1135 | flex: 1; 1136 | } 1137 | 1138 | 1139 | 1140 | .custom-item .addImg { 1141 | width: 100%; 1142 | height: 32px; 1143 | line-height: 32px; 1144 | text-align: left; 1145 | border: 1px dashed #e9e9e9; 1146 | margin-top: 15px; 1147 | cursor: pointer; 1148 | padding-left:5px; 1149 | } 1150 | .custom-item .addImg .iconfont{ 1151 | font-size: 12px!important; 1152 | margin-right: 5px!important; 1153 | } 1154 | 1155 | .custom-item .addImg:hover { 1156 | color: #ff7159; 1157 | } 1158 | 1159 | 1160 | -------------------------------------------------------------------------------- /src/components/rule.vue: -------------------------------------------------------------------------------- 1 | 338 | 339 | 465 | 466 | 507 | -------------------------------------------------------------------------------- /src/assets/iconfont/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 |
    21 |
  • Unicode
    • 22 |
  • Font class
    • 23 |
  • Symbol
    • 24 |
25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    搜索
    36 |
    &#xe624;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    优惠券
    42 |
    &#xe67b;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    团
    48 |
    &#xe776;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    优惠券
    54 |
    &#xe648;
    55 |
    • 56 | 57 |
  • 58 | 59 |
    优惠券
    60 |
    &#xe62d;
    61 |
    • 62 | 63 |
  • 64 | 65 |
    多图片
    66 |
    &#xe681;
    67 |
    • 68 | 69 |
  • 70 | 71 |
    键盘
    72 |
    &#xe693;
    73 |
    • 74 | 75 |
  • 76 | 77 |
    普通轮播图
    78 |
    &#xe609;
    79 |
    • 80 | 81 |
  • 82 | 83 |
    刷新
    84 |
    &#xe603;
    85 |
    • 86 | 87 |
  • 88 | 89 |
    关于
    90 |
    &#xe637;
    91 |
    • 92 | 93 |
  • 94 | 95 |
    公告
    96 |
    &#xe60f;
    97 |
    • 98 | 99 |
  • 100 | 101 |
    拼
    102 |
    &#xe677;
    103 |
    • 104 | 105 |
  • 106 | 107 |
    组件图标-文本域
    108 |
    &#xe66d;
    109 |
    • 110 | 111 |
  • 112 | 113 |
    记录
    114 |
    &#xe607;
    115 |
    • 116 | 117 |
  • 118 | 119 |
    图片
    120 |
    &#xe602;
    121 |
    • 122 | 123 |
  • 124 | 125 |
    二维码
    126 |
    &#xe605;
    127 |
    • 128 | 129 |
  • 130 | 131 |
    团购
    132 |
    &#xe619;
    133 |
    • 134 | 135 |
  • 136 | 137 |
    链接
    138 |
    &#xe604;
    139 |
    • 140 | 141 |
  • 142 | 143 |
    云
    144 |
    &#xe60c;
    145 |
    • 146 | 147 |
  • 148 | 149 |
    保存
    150 |
    &#xe60d;
    151 |
    • 152 | 153 |
  • 154 | 155 |
    化妆品
    156 |
    &#xe620;
    157 |
    • 158 | 159 |
  • 160 | 161 |
    轮播图管理
    162 |
    &#xe611;
    163 |
    • 164 | 165 |
  • 166 | 167 |
    图片
    168 |
    &#xe61a;
    169 |
    • 170 | 171 |
  • 172 | 173 |
    刷新
    174 |
    &#xe618;
    175 |
    • 176 | 177 |
  • 178 | 179 |
    24 报表源码@1x
    180 |
    &#xe63c;
    181 |
    • 182 | 183 |
  • 184 | 185 |
    预览
    186 |
    &#xe60b;
    187 |
    • 188 | 189 |
  • 190 | 191 |
    轮播图管理
    192 |
    &#xe672;
    193 |
    • 194 | 195 |
  • 196 | 197 |
    导航 海外购
    198 |
    &#xe601;
    199 |
    • 200 | 201 |
  • 202 | 203 |
    文章
    204 |
    &#xe600;
    205 |
    • 206 | 207 |
  • 208 | 209 |
    全屏
    210 |
    &#xe608;
    211 |
    • 212 | 213 |
  • 214 | 215 |
    视频
    216 |
    &#xe633;
    217 |
    • 218 | 219 |
  • 220 | 221 |
    文章列表
    222 |
    &#xe652;
    223 |
    • 224 | 225 |
  • 226 | 227 |
    线-宽矩-文本域
    228 |
    &#xe73a;
    229 |
    • 230 | 231 |
  • 232 | 233 |
    空白
    234 |
    &#xe63a;
    235 |
    • 236 | 237 |
238 |
239 |

Unicode 引用

240 |
241 | 242 |

Unicode 是字体在网页端最原始的应用方式，特点是：

243 |
    244 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 245 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 246 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 247 |
248 |
249 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

250 |
251 |

Unicode 使用步骤如下：

252 |

第一步：拷贝项目下面生成的 @font-face

253 | 
@font-face {
255 |   font-family: 'iconfont';
256 |   src: url('iconfont.eot');
257 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
258 |       url('iconfont.woff2') format('woff2'),
259 |       url('iconfont.woff') format('woff'),
260 |       url('iconfont.ttf') format('truetype'),
261 |       url('iconfont.svg#iconfont') format('svg');
262 | }
263 |
264 |

第二步：定义使用 iconfont 的样式

265 | 
.iconfont {
267 |   font-family: "iconfont" !important;
268 |   font-size: 16px;
269 |   font-style: normal;
270 |   -webkit-font-smoothing: antialiased;
271 |   -moz-osx-font-smoothing: grayscale;
272 | }
273 |
274 |

第三步：挑选相应图标并获取字体编码，应用于页面

275 | 
276 | <span class="iconfont">&#x33;</span>
278 |
279 |
280 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

281 |
282 |
283 |
284 |
285 |
    286 | 287 |
  • 288 | 289 |
    290 | 搜索 291 |
    292 |
    .icon-sousuo1 293 |
    294 |
    • 295 | 296 |
  • 297 | 298 |
    299 | 优惠券 300 |
    301 |
    .icon-youhuiquan2 302 |
    303 |
    • 304 | 305 |
  • 306 | 307 |
    308 | 团 309 |
    310 |
    .icon-tuan 311 |
    312 |
    • 313 | 314 |
  • 315 | 316 |
    317 | 优惠券 318 |
    319 |
    .icon-weibiaoti1 320 |
    321 |
    • 322 | 323 |
  • 324 | 325 |
    326 | 优惠券 327 |
    328 |
    .icon-youhuiquan3 329 |
    330 |
    • 331 | 332 |
  • 333 | 334 |
    335 | 多图片 336 |
    337 |
    .icon-images 338 |
    339 |
    • 340 | 341 |
  • 342 | 343 |
    344 | 键盘 345 |
    346 |
    .icon-jianpan 347 |
    348 |
    • 349 | 350 |
  • 351 | 352 |
    353 | 普通轮播图 354 |
    355 |
    .icon-putonglunbotu 356 |
    357 |
    • 358 | 359 |
  • 360 | 361 |
    362 | 刷新 363 |
    364 |
    .icon-shuaxin 365 |
    366 |
    • 367 | 368 |
  • 369 | 370 |
    371 | 关于 372 |
    373 |
    .icon-guanyu 374 |
    375 |
    • 376 | 377 |
  • 378 | 379 |
    380 | 公告 381 |
    382 |
    .icon-gonggao1 383 |
    384 |
    • 385 | 386 |
  • 387 | 388 |
    389 | 拼 390 |
    391 |
    .icon-pin1 392 |
    393 |
    • 394 | 395 |
  • 396 | 397 |
    398 | 组件图标-文本域 399 |
    400 |
    .icon-zujiantubiao-wenbenyu 401 |
    402 |
    • 403 | 404 |
  • 405 | 406 |
    407 | 记录 408 |
    409 |
    .icon-jilu 410 |
    411 |
    • 412 | 413 |
  • 414 | 415 |
    416 | 图片 417 |
    418 |
    .icon-picture 419 |
    420 |
    • 421 | 422 |
  • 423 | 424 |
    425 | 二维码 426 |
    427 |
    .icon-erweima 428 |
    429 |
    • 430 | 431 |
  • 432 | 433 |
    434 | 团购 435 |
    436 |
    .icon-tuangou1 437 |
    438 |
    • 439 | 440 |
  • 441 | 442 |
    443 | 链接 444 |
    445 |
    .icon-lianjie 446 |
    447 |
    • 448 | 449 |
  • 450 | 451 |
    452 | 云 453 |
    454 |
    .icon-yun 455 |
    456 |
    • 457 | 458 |
  • 459 | 460 |
    461 | 保存 462 |
    463 |
    .icon-save1 464 |
    465 |
    • 466 | 467 |
  • 468 | 469 |
    470 | 化妆品 471 |
    472 |
    .icon-huazhuangpin 473 |
    474 |
    • 475 | 476 |
  • 477 | 478 |
    479 | 轮播图管理 480 |
    481 |
    .icon-lunbotuguanli 482 |
    483 |
    • 484 | 485 |
  • 486 | 487 |
    488 | 图片 489 |
    490 |
    .icon-tupian1 491 |
    492 |
    • 493 | 494 |
  • 495 | 496 |
    497 | 刷新 498 |
    499 |
    .icon-shuaxin1 500 |
    501 |
    • 502 | 503 |
  • 504 | 505 |
    506 | 24 报表源码@1x 507 |
    508 |
    .icon-baobiaoyuanmax 509 |
    510 |
    • 511 | 512 |
  • 513 | 514 |
    515 | 预览 516 |
    517 |
    .icon-liulanjilu 518 |
    519 |
    • 520 | 521 |
  • 522 | 523 |
    524 | 轮播图管理 525 |
    526 |
    .icon-lunbotuguanli1 527 |
    528 |
    • 529 | 530 |
  • 531 | 532 |
    533 | 导航 海外购 534 |
    535 |
    .icon-daohanghaiwaigou 536 |
    537 |
    • 538 | 539 |
  • 540 | 541 |
    542 | 文章 543 |
    544 |
    .icon-wenzhang 545 |
    546 |
    • 547 | 548 |
  • 549 | 550 |
    551 | 全屏 552 |
    553 |
    .icon-quanping 554 |
    555 |
    • 556 | 557 |
  • 558 | 559 |
    560 | 视频 561 |
    562 |
    .icon-shipin1 563 |
    564 |
    • 565 | 566 |
  • 567 | 568 |
    569 | 文章列表 570 |
    571 |
    .icon-wenzhangliebiaoxinbiaoqian 572 |
    573 |
    • 574 | 575 |
  • 576 | 577 |
    578 | 线-宽矩-文本域 579 |
    580 |
    .icon-xian-kuanju-wenbenyu 581 |
    582 |
    • 583 | 584 |
  • 585 | 586 |
    587 | 空白 588 |
    589 |
    .icon-kongbai 590 |
    591 |
    • 592 | 593 |
594 |
595 |

font-class 引用

596 |
597 | 598 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

599 |

与 Unicode 使用方式相比，具有如下特点：

600 |
    601 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 602 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 603 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 604 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 605 |
606 |

使用步骤如下：

607 |

第一步：引入项目下面生成的 fontclass 代码：

608 | 
<link rel="stylesheet" href="./iconfont.css">
609 |
610 |

第二步：挑选相应图标并获取类名，应用于页面：

611 | 
<span class="iconfont icon-xxx"></span>
612 |
613 |
614 |

" 615 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

616 |
617 |
618 |
619 |
620 |
    621 | 622 |
  • 623 | 626 |
    搜索
    627 |
    #icon-sousuo1
    628 |
    • 629 | 630 |
  • 631 | 634 |
    优惠券
    635 |
    #icon-youhuiquan2
    636 |
    • 637 | 638 |
  • 639 | 642 |
    团
    643 |
    #icon-tuan
    644 |
    • 645 | 646 |
  • 647 | 650 |
    优惠券
    651 |
    #icon-weibiaoti1
    652 |
    • 653 | 654 |
  • 655 | 658 |
    优惠券
    659 |
    #icon-youhuiquan3
    660 |
    • 661 | 662 |
  • 663 | 666 |
    多图片
    667 |
    #icon-images
    668 |
    • 669 | 670 |
  • 671 | 674 |
    键盘
    675 |
    #icon-jianpan
    676 |
    • 677 | 678 |
  • 679 | 682 |
    普通轮播图
    683 |
    #icon-putonglunbotu
    684 |
    • 685 | 686 |
  • 687 | 690 |
    刷新
    691 |
    #icon-shuaxin
    692 |
    • 693 | 694 |
  • 695 | 698 |
    关于
    699 |
    #icon-guanyu
    700 |
    • 701 | 702 |
  • 703 | 706 |
    公告
    707 |
    #icon-gonggao1
    708 |
    • 709 | 710 |
  • 711 | 714 |
    拼
    715 |
    #icon-pin1
    716 |
    • 717 | 718 |
  • 719 | 722 |
    组件图标-文本域
    723 |
    #icon-zujiantubiao-wenbenyu
    724 |
    • 725 | 726 |
  • 727 | 730 |
    记录
    731 |
    #icon-jilu
    732 |
    • 733 | 734 |
  • 735 | 738 |
    图片
    739 |
    #icon-picture
    740 |
    • 741 | 742 |
  • 743 | 746 |
    二维码
    747 |
    #icon-erweima
    748 |
    • 749 | 750 |
  • 751 | 754 |
    团购
    755 |
    #icon-tuangou1
    756 |
    • 757 | 758 |
  • 759 | 762 |
    链接
    763 |
    #icon-lianjie
    764 |
    • 765 | 766 |
  • 767 | 770 |
    云
    771 |
    #icon-yun
    772 |
    • 773 | 774 |
  • 775 | 778 |
    保存
    779 |
    #icon-save1
    780 |
    • 781 | 782 |
  • 783 | 786 |
    化妆品
    787 |
    #icon-huazhuangpin
    788 |
    • 789 | 790 |
  • 791 | 794 |
    轮播图管理
    795 |
    #icon-lunbotuguanli
    796 |
    • 797 | 798 |
  • 799 | 802 |
    图片
    803 |
    #icon-tupian1
    804 |
    • 805 | 806 |
  • 807 | 810 |
    刷新
    811 |
    #icon-shuaxin1
    812 |
    • 813 | 814 |
  • 815 | 818 |
    24 报表源码@1x
    819 |
    #icon-baobiaoyuanmax
    820 |
    • 821 | 822 |
  • 823 | 826 |
    预览
    827 |
    #icon-liulanjilu
    828 |
    • 829 | 830 |
  • 831 | 834 |
    轮播图管理
    835 |
    #icon-lunbotuguanli1
    836 |
    • 837 | 838 |
  • 839 | 842 |
    导航 海外购
    843 |
    #icon-daohanghaiwaigou
    844 |
    • 845 | 846 |
  • 847 | 850 |
    文章
    851 |
    #icon-wenzhang
    852 |
    • 853 | 854 |
  • 855 | 858 |
    全屏
    859 |
    #icon-quanping
    860 |
    • 861 | 862 |
  • 863 | 866 |
    视频
    867 |
    #icon-shipin1
    868 |
    • 869 | 870 |
  • 871 | 874 |
    文章列表
    875 |
    #icon-wenzhangliebiaoxinbiaoqian
    876 |
    • 877 | 878 |
  • 879 | 882 |
    线-宽矩-文本域
    883 |
    #icon-xian-kuanju-wenbenyu
    884 |
    • 885 | 886 |
  • 887 | 890 |
    空白
    891 |
    #icon-kongbai
    892 |
    • 893 | 894 |
895 |
896 |

Symbol 引用

897 |
898 | 899 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 900 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

901 |
    902 |
  • 支持多色图标了，不再受单色限制。
    • 903 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 904 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 905 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 906 |
907 |

使用步骤如下：

908 |

第一步：引入项目下面生成的 symbol 代码：

909 | 
<script src="./iconfont.js"></script>
910 |
911 |

第二步：加入通用 CSS 代码（引入一次就行）：

912 | 
<style>
913 | .icon {
914 |   width: 1em;
915 |   height: 1em;
916 |   vertical-align: -0.15em;
917 |   fill: currentColor;
918 |   overflow: hidden;
919 | }
920 | </style>
921 |
922 |

第三步：挑选相应图标并获取类名，应用于页面：

923 | 
<svg class="icon" aria-hidden="true">
924 |   <use xlink:href="#icon-xxx"></use>
925 | </svg>
926 |
927 |
928 |
929 | 930 |
931 |
932 | 951 | 952 | 953 | -------------------------------------------------------------------------------- /src/components/layout-config.vue: -------------------------------------------------------------------------------- 1 | 484 | 485 | 942 | 943 | 945 | --------------------------------------------------------------------------------