refactor:foramt views/component-demo

This commit is contained in:
Pan 2017-11-17 17:51:41 +08:00
parent 46b4f74969
commit d20585a3f9
35 changed files with 289 additions and 446 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github"> <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 84px; border: 0; right: 0;" <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
aria-hidden="true"> aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"

View file

@ -1,6 +1,6 @@
<template> <template>
<div class='json-editor'> <div class="json-editor">
<textarea ref='textarea'></textarea> <textarea ref="textarea"></textarea>
</div> </div>
</template> </template>
@ -57,7 +57,6 @@ export default {
.CodeMirror { .CodeMirror {
height: 100%; height: 100%;
} }
.json-editor .cm-s-rubyblue span.cm-string { .json-editor .cm-s-rubyblue span.cm-string {
color: #F08047; color: #F08047;
} }

View file

@ -1,6 +1,6 @@
<template> <template>
<div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}"> <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
<textarea :id='id'> <textarea :id="id">
</textarea> </textarea>
</div> </div>
</template> </template>
@ -15,8 +15,7 @@ export default {
props: { props: {
value: String, value: String,
id: { id: {
type: String, type: String
default: 'markdown-editor'
}, },
autofocus: { autofocus: {
type: Boolean, type: Boolean,
@ -52,7 +51,7 @@ export default {
}, },
mounted() { mounted() {
this.simplemde = new SimpleMDE({ this.simplemde = new SimpleMDE({
element: document.getElementById(this.id), element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
autofocus: this.autofocus, autofocus: this.autofocus,
toolbar: this.toolbar, toolbar: this.toolbar,

View file

@ -1,6 +1,16 @@
<template> <template>
<div> <div>
<svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z" p-id="2070"></path><path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z" p-id="2071"></path><path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z" p-id="2072"></path><path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z" p-id="2073"></path></svg> <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
<path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id="2070"></path>
<path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id="2071"></path>
<path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id="2072"></path>
<path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id="2073"></path>
</svg>
</div> </div>
</template> </template>

View file

@ -1,44 +0,0 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Pane',
data() {
const classes = ['Pane', this.$parent.split, 'className']
return {
classes: classes.join(' '),
percent: 50
}
}
}
</script>
<style scoped>
.splitter-pane.vertical.splitter-paneL {
position: absolute;
left: 0px;
height: 100%;
}
.splitter-pane.vertical.splitter-paneR {
position: absolute;
right: 0px;
height: 100%;
}
.splitter-pane.horizontal.splitter-paneL {
position: absolute;
top: 0px;
width: 100%;
}
.splitter-pane.horizontal.splitter-paneR {
position: absolute;
bottom: 0px;
width: 100%;
}
</style>

View file

@ -1,72 +0,0 @@
<template>
<div :class="classes" @mousedown="onMouseDown"></div>
</template>
<script>
export default {
props: {
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
},
onMouseDown: {
type: Function,
required: true
}
},
data() {
const classes = ['Resizer', this.split, 'className']
return {
classes: classes.join(' ')
}
}
}
</script>
<style scoped>
.Resizer {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #000;
position: absolute;
opacity: .2;
z-index: 1;
/*-moz-background-clip: padding;*/
/*-webkit-background-clip: padding;*/
/*background-clip: padding-box;*/
}
/*.Resizer:hover {*/
/*-webkit-transition: all 2s ease;*/
/*transition: all 2s ease;*/
/*}*/
.Resizer.horizontal {
height: 11px;
margin: -5px 0;
border-top: 5px solid rgba(255, 255, 255, 0);
border-bottom: 5px solid rgba(255, 255, 255, 0);
cursor: row-resize;
width: 100%;
}
.Resizer.horizontal:hover {
border-top: 5px solid rgba(0, 0, 0, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.vertical {
width: 11px;
height: 100%;
border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0);
cursor: col-resize;
}
.Resizer.vertical:hover {
border-left: 5px solid rgba(0, 0, 0, 0.5);
border-right: 5px solid rgba(0, 0, 0, 0.5);
}
</style>

View file

@ -1,111 +0,0 @@
<template>
<div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp" @mousemove="onMouseMove">
<pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
<slot name="paneL"></slot>
</pane>
<resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown" @click="onClick"></resizer>
<pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
<slot name="paneR"></slot>
</pane>
</div>
</template>
<script>
import Resizer from './Resizer'
import Pane from './Pane'
export default {
name: 'splitPane',
components: { Resizer, Pane },
props: {
margin: {
type: Number,
default: 10
},
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
}
},
data() {
return {
active: false,
hasMoved: false,
height: null,
percent: 50,
type: this.split === 'vertical' ? 'width' : 'height',
resizeType: this.split === 'vertical' ? 'left' : 'top'
}
},
computed: {
userSelect() {
return this.active ? 'none' : ''
},
cursor() {
return this.active ? 'col-resize' : ''
}
},
methods: {
onClick() {
if (!this.hasMoved) {
this.percent = 50
this.$emit('resize')
}
},
onMouseDown() {
this.active = true
this.hasMoved = false
},
onMouseUp() {
this.active = false
},
onMouseMove(e) {
if (e.buttons === 0 || e.which === 0) {
this.active = false
}
if (this.active) {
let offset = 0
let target = e.currentTarget
if (this.split === 'vertical') {
while (target) {
offset += target.offsetLeft
target = target.offsetParent
}
} else {
while (target) {
offset += target.offsetTop
target = target.offsetParent
}
}
const currentPage = this.split === 'vertical' ? e.pageX : e.pageY
const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
if (percent > this.margin && percent < 100 - this.margin) {
this.percent = percent
}
this.$emit('resize')
this.hasMoved = true
}
}
}
}
</script>
<style scoped>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.vue-splitter-container {
height: 100%;
/*display: flex;*/
position: relative;
}
</style>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class='tinymce-container editor-container'> <div class="tinymce-container editor-container">
<textarea class='tinymce-textarea' :id="tinymceId"></textarea> <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
<div class="editor-custom-btn-container"> <div class="editor-custom-btn-container">
<editorImage color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage> <editorImage color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
</div> </div>

View file

@ -1,12 +1,12 @@
import Vue from 'vue' import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件 import SvgIcon from '@/components/SvgIcon'// svg组件
import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it
// register globally
// register globally
Vue.component('svg-icon', SvgIcon) Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext) const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/) const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req) const iconMap = requireAll(req)
generateIconsView.generate(iconMap) // just for views/icons , you can delete it generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

View file

@ -14,13 +14,6 @@ const userMap = {
introduction: '我是编辑', introduction: '我是编辑',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: 'Normal Editor' name: 'Normal Editor'
},
developer: {
role: ['develop'],
token: 'develop',
introduction: '我是开发',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: '工程师小王'
} }
} }

View file

@ -11,8 +11,8 @@ function hasPermission(roles, permissionRoles) {
return roles.some(role => permissionRoles.indexOf(role) >= 0) return roles.some(role => permissionRoles.indexOf(role) >= 0)
} }
// register global progress.
const whiteList = ['/login', '/authredirect']// 不重定向白名单 const whiteList = ['/login', '/authredirect']// 不重定向白名单
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() // 开启Progress NProgress.start() // 开启Progress
if (getToken()) { // 判断是否有token if (getToken()) { // 判断是否有token

View file

@ -87,22 +87,23 @@ export const asyncRouterMap = [
{ {
path: '/components', path: '/components',
component: Layout, component: Layout,
name: 'component-demo',
meta: { meta: {
title: 'components', title: 'components',
icon: 'component' icon: 'component'
}, },
children: [ children: [
{ path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }}, { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
{ path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown', meta: { title: 'markdown' }}, { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
{ path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }}, { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
{ path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList', meta: { title: 'dndList' }}, { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
{ path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }}, { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
{ path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }}, { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
{ path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }}, { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
{ path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky', meta: { title: 'sticky' }}, { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
{ path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo', meta: { title: 'countTo' }}, { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }}, { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }} { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}
] ]
}, },

View file

@ -50,7 +50,7 @@ const app = {
} }
}, },
actions: { actions: {
ToggleSideBar({ commit }) { toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR') commit('TOGGLE_SIDEBAR')
}, },
setLanguage({ commit }, language) { setLanguage({ commit }, language) {

View file

@ -50,8 +50,8 @@ const user = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loginByUsername(username, userInfo.password).then(response => { loginByUsername(username, userInfo.password).then(response => {
const data = response.data const data = response.data
setToken(response.data.token)
commit('SET_TOKEN', data.token) commit('SET_TOKEN', data.token)
setToken(response.data.token)
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)

View file

@ -110,6 +110,19 @@ code {
} }
} }
.warn-content{
background: rgba(66,185,131,.1);
border-radius: 2px;
padding: 16px;
padding: 1rem;
line-height: 1.6rem;
word-spacing: .05rem;
a{
color: #42b983;
font-weight: 600;
}
}
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 20px;

View file

@ -1,5 +1,5 @@
import Clipboard from 'clipboard'
import Vue from 'vue' import Vue from 'vue'
import Clipboard from 'clipboard'
function clipboardSuccess() { function clipboardSuccess() {
Vue.prototype.$message({ Vue.prototype.$message({

View file

@ -1,15 +1,17 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'> vue-image-crop-upload</a> <code>这里核心代码用的是
由于我在使用时它只有vue@1版本而且有些业务的需求耦合到七牛等等原因吧自己改造了一下如果大家要使用的话优先还是使用官方component <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
由于我在使用时它只有vue@1版本而且有些业务的需求耦合到七牛等等原因吧自己改造了一下如果大家要使用的话优先还是使用官方component
</code> </code>
<pan-thumb :image='image'></pan-thumb> <pan-thumb :image="image"></pan-thumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像 <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
</el-button> </el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow"></image-cropper> <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div> </div>
</template> </template>
@ -18,6 +20,7 @@ import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb' import PanThumb from '@/components/PanThumb'
export default { export default {
name: 'avatarUpload-demo',
components: { ImageCropper, PanThumb }, components: { ImageCropper, PanThumb },
data() { data() {
return { return {

View file

@ -138,6 +138,7 @@
import BackToTop from '@/components/BackToTop' import BackToTop from '@/components/BackToTop'
export default { export default {
name: 'backToTop-demo',
components: { BackToTop }, components: { BackToTop },
data() { data() {
return { return {

View file

@ -1,23 +1,39 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code> <p class="warn-content">
<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
<count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals' </p>
:separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false'></count-to> <count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
<div style='margin-left: 25%;margin-top: 40px;'> :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
<label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label> <div style="margin-left: 25%;margin-top: 40px;">
<label class="label" for="endValInput">endVal: <input type="number" v-model.number='setEndVal' name='endVaInput' /></label> <label class="label" for="startValInput">startVal:
<label class="label" for="durationInput">duration: <input type="number" v-model.number='setDuration' name='durationInput' /></label> <input type="number" v-model.number="setStartVal" name="startValInput" />
<div class="startBtn example-btn" @click='start'>开始</div> </label>
<div class="pause-resume-btn example-btn" @click='pauseResume'>暂停/恢复</div> <label class="label" for="endValInput">endVal:
<input type="number" v-model.number="setEndVal" name="endVaInput" />
</label>
<label class="label" for="durationInput">duration:
<input type="number" v-model.number="setDuration" name="durationInput" />
</label>
<div class="startBtn example-btn" @click="start">开始</div>
<div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
<br/> <br/>
<label class="label" for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label> <label class="label" for="decimalsInput">decimals:
<label class="label" for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label> <input type="number" v-model.number="setDecimals" name="decimalsInput" />
<label class="label" for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label> </label>
<label class="label" for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label> <label class="label" for="separatorInput">separator:
<input v-model="setSeparator" name="separatorInput" />
</label>
<label class="label" for="prefixInput">prefix:
<input v-model="setPrefix" name="prefixInput" />
</label>
<label class="label" for="suffixInput">suffix:
<input v-model="setSuffix" name="suffixInput" />
</label>
</div> </div>
<code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27; :decimals=&#x27;{{_decimals}}&#x27; <code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27;
:separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code> :decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27;
:autoplay=false&gt;</code>
</div> </div>
</template> </template>
@ -25,6 +41,7 @@
import countTo from 'vue-count-to' import countTo from 'vue-count-to'
export default { export default {
name: 'countTo-demo',
components: { countTo }, components: { countTo },
data() { data() {
return { return {

View file

@ -12,6 +12,7 @@ import DndList from '@/components/DndList'
import { fetchList } from '@/api/article' import { fetchList } from '@/api/article'
export default { export default {
name: 'dnd-list-demo',
components: { DndList }, components: { DndList },
data() { data() {
return { return {

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code> <code>
基于<a class='link-type' href='https://github.com/rowanwins/vue-dropzone'> dropzone </a>封装 , 基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 ,
由于我司业务有特殊需求而且要传七牛 所以没用第三方 选择了自己封装 由于我司业务有特殊需求而且要传七牛 所以没用第三方 选择了自己封装
</code> </code>
<div class="editor-container"> <div class="editor-container">
@ -14,6 +14,7 @@
import Dropzone from '@/components/Dropzone' import Dropzone from '@/components/Dropzone'
export default { export default {
name: 'dropzone-demo',
components: { Dropzone }, components: { Dropzone },
methods: { methods: {
dropzoneS(file) { dropzoneS(file) {

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style="height:100vh">
<code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code> <code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
<div class="editor-container"> <div class="editor-container">
<json-editor ref="jsonEditor" v-model="value"></json-editor> <json-editor ref="jsonEditor" v-model="value"></json-editor>
@ -13,6 +13,7 @@ import JsonEditor from '@/components/JsonEditor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]' const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default { export default {
name: 'jsonEditor-demo',
components: { JsonEditor }, components: { JsonEditor },
data() { data() {
return { return {

View file

@ -1,10 +1,14 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> 简单的用vue封装了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> 相关文章 </a></code> <code>Markdown 我们这里选用了
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> 简单的用vue封装了一下
<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
相关文章 </a>
</code>
<div class="editor-container"> <div class="editor-container">
<markdown-editor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></markdown-editor> <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div> </div>
<el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button> <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
<div v-html="html"></div> <div v-html="html"></div>
</div> </div>
</template> </template>
@ -13,6 +17,7 @@
import MarkdownEditor from '@/components/MarkdownEditor' import MarkdownEditor from '@/components/MarkdownEditor'
export default { export default {
name: 'markdown-demo',
components: { MarkdownEditor }, components: { MarkdownEditor },
data() { data() {
return { return {

View file

@ -1,22 +1,22 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<el-row> <el-row>
<el-col :span="4" class='text-center'> <el-col :span="4" class="text-center">
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link> <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
</el-col> </el-col>
<el-col :span="4" class='text-center'> <el-col :span="4" class="text-center">
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link> <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
</el-col> </el-col>
<el-col :span="4" class='text-center'> <el-col :span="4" class="text-center">
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link> <router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
</el-col> </el-col>
<el-col :span="4" class='text-center'> <el-col :span="4" class="text-center">
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link> <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
</el-col> </el-col>
<el-col :span="4" class='text-center'> <el-col :span="4" class="text-center">
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link> <router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
</el-col> </el-col>
<el-col :span="4" class='text-center'> <el-col :span="4" class="text-center">
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link> <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col> </el-col>
</el-row> </el-row>
@ -43,7 +43,7 @@
<span>图片hover效果</span> <span>图片hover效果</span>
</div> </div>
<div class="component-item"> <div class="component-item">
<pan-thumb width='100px' height='100px' image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'> <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
vue-element-admin vue-element-admin
</pan-thumb> </pan-thumb>
</div> </div>
@ -67,7 +67,7 @@
<span>hover text</span> <span>hover text</span>
</div> </div>
<div class="component-item"> <div class="component-item">
<mallki className='mallki-text' text='vue-element-admin'></mallki> <mallki className="mallki-text" text="vue-element-admin"></mallki>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@ -83,6 +83,7 @@ import waves from '@/directive/waves/index.js' // 水波纹指令
import Mallki from '@/components/TextHoverEffect/Mallki' import Mallki from '@/components/TextHoverEffect/Mallki'
export default { export default {
name: 'componentMixin-demo',
components: { components: {
PanThumb, PanThumb,
MdInput, MdInput,

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'> codepen</a>,<a href='https://jsfiddle.net/' target='_blank'> jsfiddle </a>就不会陌生了 <code>splitPane 如果你用过<a href="http://codepen.io/" target="_blank"> codepen</a>,<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了
<a href='https://github.com/PanJiaChen/vue-split-pane' target='_blank'>项目地址</a> <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
</code> </code>
<split-pane v-on:resize="resize" split="vertical"> <split-pane v-on:resize="resize" split="vertical">
<template slot="paneL"> <template slot="paneL">
@ -26,6 +26,7 @@
import splitPane from 'vue-splitpane' import splitPane from 'vue-splitpane'
export default { export default {
name: 'splitpane-demo',
components: { splitPane }, components: { splitPane },
methods: { methods: {
resize() { resize() {
@ -37,29 +38,29 @@ export default {
<style scoped> <style scoped>
.components-container { .components-container {
position: relative; position: relative;
height: 100vh; height: 100vh;
} }
.left-container { .left-container {
background-color: #F38181; background-color: #F38181;
height: 100%; height: 100%;
} }
.right-container { .right-container {
background-color: #FCE38A; background-color: #FCE38A;
height: 200px; height: 200px;
} }
.top-container { .top-container {
background-color: #FCE38A; background-color: #FCE38A;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.bottom-container { .bottom-container {
width: 100%; width: 100%;
background-color: #95E1D3; background-color: #95E1D3;
height: 100%; height: 100%;
} }
</style> </style>

View file

@ -97,6 +97,7 @@
import Sticky from '@/components/Sticky' import Sticky from '@/components/Sticky'
export default { export default {
name: 'sticky-demo',
components: { Sticky }, components: { Sticky },
data() { data() {
return { return {

View file

@ -1,10 +1,12 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>公司做的后台主要是一个cms系统公司也是以自媒体为核心的所以富文本是后台很核心的功能在选择富文本的过程中也走了不少的弯路市面上常见的富文本都基本用过了最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code> <code>公司做的后台主要是一个cms系统公司也是以自媒体为核心的所以富文本是后台很核心的功能在选择富文本的过程中也走了不少的弯路市面上常见的富文本都基本用过了最终选择了Tinymce
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
</code>
<div> <div>
<tinymce :height='200' v-model="content"></tinymce> <tinymce :height="200" v-model="content"></tinymce>
</div> </div>
<div class='editor-content' v-html='content'></div> <div class="editor-content" v-html="content"></div>
</div> </div>
</template> </template>
@ -12,6 +14,7 @@
import Tinymce from '@/components/Tinymce' import Tinymce from '@/components/Tinymce'
export default { export default {
name: 'tinymce-demo',
components: { Tinymce }, components: { Tinymce },
data() { data() {
return { return {

View file

@ -8,6 +8,7 @@ require('echarts/theme/macarons') // echarts 主题
import { debounce } from '@/utils' import { debounce } from '@/utils'
const animationDuration = 6000 const animationDuration = 6000
export default { export default {
props: { props: {
className: { className: {

View file

@ -0,0 +1,131 @@
<template>
<el-row class="panel-group" :gutter="40">
<el-col :span="6">
<div class='card-panel' @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">New Visits</div>
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="3600"></count-to>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">Messages</div>
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="4000"></count-to>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">Purchases</div>
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="4000"></count-to>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shoppingCard">
<svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">Shoppings</div>
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="4600"></count-to>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.panel-group {
margin-top: 20px;
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shoppingCard {
background: #34bfa3
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shoppingCard {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
</style>

View file

@ -2,55 +2,10 @@
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<github-corner></github-corner> <github-corner></github-corner>
<el-row class="panel-group" :gutter="40"> <panel-group></panel-group>
<el-col :span="6">
<div class='card-panel' @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class='card-panel-description'>
<div class='card-panel-text'>New Visits</div>
<count-to class="card-panel-num" :startVal='0' :endVal='102400' :duration='3600'></count-to>
</div>
</div>
</el-col>
<el-col :span="6">
<div class='card-panel' @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class='card-panel-description'>
<div class='card-panel-text'>Messages</div>
<count-to class="card-panel-num" :startVal='0' :endVal='81212' :duration='4000'></count-to>
</div>
</div>
</el-col>
<el-col :span="6">
<div class='card-panel' @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class='card-panel-description'>
<div class='card-panel-text'>Purchases</div>
<count-to class="card-panel-num" :startVal='0' :endVal='9280' :duration='4000'></count-to>
</div>
</div>
</el-col>
<el-col :span="6">
<div class='card-panel' @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shoppingCard">
<svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
</div>
<div class='card-panel-description'>
<div class='card-panel-text'>Shoppings</div>
<count-to class="card-panel-num" :startVal='0' :endVal='13600' :duration='4600'></count-to>
</div>
</div>
</el-col>
</el-row>
<el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;"> <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
<line-chart :chart-data='lineChartData'></line-chart> <line-chart :chart-data="lineChartData"></line-chart>
</el-row> </el-row>
<el-row style="margin-top:30px;" :gutter="30"> <el-row style="margin-top:30px;" :gutter="30">
@ -87,8 +42,8 @@
</template> </template>
<script> <script>
import CountTo from 'vue-count-to'
import GithubCorner from '@/components/GithubCorner' import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart' import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart' import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart' import PieChart from './components/PieChart'
@ -119,8 +74,8 @@ const lineChartData = {
export default { export default {
name: 'dashboard-admin', name: 'dashboard-admin',
components: { components: {
CountTo,
GithubCorner, GithubCorner,
PanelGroup,
LineChart, LineChart,
RaddarChart, RaddarChart,
PieChart, PieChart,
@ -146,75 +101,6 @@ export default {
.dashboard-editor-container { .dashboard-editor-container {
padding: 30px; padding: 30px;
background-color: rgb(240, 242, 245); background-color: rgb(240, 242, 245);
.panel-group {
margin-top: 20px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #36a3f7;
}
.icon-message {
background: #f4516c;
}
.icon-money {
background: #716aca;
}
.icon-shoppingCard {
background: #34bfa3
}
}
.icon-people {
color: #36a3f7;
}
.icon-message {
color: #f4516c;
}
.icon-money {
color: #716aca;
}
.icon-shoppingCard {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
.chart-wrapper { .chart-wrapper {
background: #fff; background: #fff;
padding: 15px 15px 0; padding: 15px 15px 0;

View file

@ -7,11 +7,11 @@
<github-corner></github-corner> <github-corner></github-corner>
<div class="info-container"> <div class="info-container">
<span class="display_name">{{name}}</span> <span class="display_name">{{name}}</span>
<span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span> <span style="font-size:20px;padding-top:20px;display:inline-block;">普通编辑dashboard</span>
</div> </div>
</div> </div>
<div> <div>
<img class='emptyGif' :src="emptyGif"> <img class="emptyGif" :src="emptyGif">
</div> </div>
</div> </div>
</template> </template>

View file

@ -83,7 +83,7 @@ export default {
}, },
methods: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('ToggleSideBar') this.$store.dispatch('toggleSideBar')
}, },
handleSetLanguage(lang) { handleSetLanguage(lang) {
this.$i18n.locale = lang this.$i18n.locale = lang

View file

@ -9,7 +9,7 @@
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name" :key='item.name'> <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key='item.name'>
<template slot="title"> <template slot="title">
<svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon> <svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
<span v-if='item.meta&&item.meta.title'>{{generateTitle(item.meta.title)}}</span> <span v-if='item.meta&&item.meta.title'>{{generateTitle(item.meta.title)}}</span>

View file

@ -16,15 +16,15 @@
</span> </span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码" /> placeholder="密码" />
<span class='show-pwd' @click='showPwd'><svg-icon icon-class="eye" /></span> <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item> </el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button> <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
<div class='tips'>账号:admin 密码随便填</div> <div class="tips">账号:admin 密码随便填</div>
<div class='tips'>账号:editor 密码随便填</div> <div class="tips">账号:editor 密码随便填</div>
<el-button class='thirdparty-button' type="primary" @click='showDialog=true'>打开第三方登录</el-button> <el-button class="thirdparty-button" type="primary" @click="showDialog=true">打开第三方登录</el-button>
</el-form> </el-form>
<el-dialog title="第三方验证" :visible.sync="showDialog"> <el-dialog title="第三方验证" :visible.sync="showDialog">

View file

@ -1,12 +1,15 @@
<template> <template>
<div class="icons-container"> <div class="icons-container">
<p class="warn-content">
<a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">添加和使用方式</a>
</p>
<div class="icons-wrapper"> <div class="icons-wrapper">
<div v-for='item of iconsMap' :key='item' @click='handleClipboard(generateIconCode(item),$event)'> <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
<el-tooltip placement="top"> <el-tooltip placement="top">
<div slot="content"> <div slot="content">
{{generateIconCode(item)}} {{generateIconCode(item)}}
</div> </div>
<div class='icon-item'> <div class="icon-item">
<svg-icon :icon-class="item" /> <svg-icon :icon-class="item" />
<span>{{item}}</span> <span>{{item}}</span>
</div> </div>
@ -16,10 +19,9 @@
</div> </div>
</template> </template>
<script> <script>
import icons from './generateIconsView' import icons from './generateIconsView'
import clipboard from '@/utils/clipboard' // use clipboard directly import clipboard from '@/utils/clipboard'
export default { export default {
name: 'icons', name: 'icons',
@ -47,7 +49,7 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.icons-container { .icons-container {
margin: 40px 20px 0; margin: 10px 20px 0;
overflow: hidden; overflow: hidden;
.icons-wrapper { .icons-wrapper {
margin: 0 auto; margin: 0 auto;