Skip to content

V
VueElementTemplate
Commit 6eca8e47 authored by Pan's avatar Pan
Browse files
Options

add

parent 7bedb861
Show whitespace changes
Inline Side-by-side
Showing with 323 additions and 339 deletions
package.json
View file @ 6eca8e47
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "6.7.2", "autoprefixer": "6.7.2",
"axios-mock-adapter": "^1.8.1",
"babel-core": "6.22.1", "babel-core": "6.22.1",
"babel-eslint": "7.1.1", "babel-eslint": "7.1.1",
"babel-loader": "6.2.10", "babel-loader": "6.2.10",
...@@ -47,11 +48,11 @@ ...@@ -47,11 +48,11 @@
"copy-webpack-plugin": "4.0.1", "copy-webpack-plugin": "4.0.1",
"css-loader": "0.26.1", "css-loader": "0.26.1",
"eslint": "3.14.1", "eslint": "3.14.1",
"eslint-config-airbnb-base": "11.0.1",
"eslint-friendly-formatter": "2.0.7", "eslint-friendly-formatter": "2.0.7",
"eslint-import-resolver-webpack": "0.8.1",
"eslint-loader": "1.6.1", "eslint-loader": "1.6.1",
"eslint-plugin-html": "2.0.0", "eslint-plugin-html": "2.0.0",
"eslint-config-airbnb-base": "11.0.1",
"eslint-import-resolver-webpack": "0.8.1",
"eslint-plugin-import": "2.2.0", "eslint-plugin-import": "2.2.0",
"eventsource-polyfill": "0.9.6", "eventsource-polyfill": "0.9.6",
"express": "4.14.1", "express": "4.14.1",
...@@ -61,26 +62,26 @@ ...@@ -61,26 +62,26 @@
"function-bind": "1.1.0", "function-bind": "1.1.0",
"html-webpack-plugin": "2.28.0", "html-webpack-plugin": "2.28.0",
"http-proxy-middleware": "0.17.3", "http-proxy-middleware": "0.17.3",
"webpack-bundle-analyzer": "2.2.1", "node-sass": "3.7.0",
"semver": "5.3.0",
"opn": "4.0.2", "opn": "4.0.2",
"optimize-css-assets-webpack-plugin": "1.3.0", "optimize-css-assets-webpack-plugin": "1.3.0",
"ora": "1.1.0", "ora": "1.1.0",
"pushstate-server": "2.1.0",
"rimraf": "2.6.0", "rimraf": "2.6.0",
"sass-loader": "4.0.2",
"script-loader": "0.7.0",
"semver": "5.3.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7", "url-loader": "0.5.7",
"vue-loader": "11.3.4", "vue-loader": "11.3.4",
"vue-style-loader": "2.0.0", "vue-style-loader": "2.0.0",
"vue-template-compiler": "2.2.6", "vue-template-compiler": "2.2.6",
"webpack": "2.2.1", "webpack": "2.2.1",
"webpack-bundle-analyzer": "2.2.1",
"webpack-dashboard": "0.2.1",
"webpack-dev-middleware": "1.10.0", "webpack-dev-middleware": "1.10.0",
"webpack-hot-middleware": "2.16.1", "webpack-hot-middleware": "2.16.1",
"webpack-merge": "2.6.1", "webpack-merge": "2.6.1"
"webpack-dashboard": "0.2.1",
"node-sass": "3.7.0",
"pushstate-server": "2.1.0",
"sass-loader": "4.0.2",
"script-loader": "0.7.0",
"style-loader": "0.13.1"
}, },
"engines": { "engines": {
"node": ">= 4.0.0", "node": ">= 4.0.0",
......
src/components/Dropzone/index.vue
View file @ 6eca8e47
...@@ -57,17 +57,20 @@ ...@@ -57,17 +57,20 @@
} }
}, },
accept: (file, done) => { accept: (file, done) => {
const token = this.$store.getters.token; /* 七牛*/
getToken(token).then(response => { // const token = this.$store.getters.token;
file.token = response.data.qiniu_token; // getToken(token).then(response => {
file.key = response.data.qiniu_key; // file.token = response.data.qiniu_token;
file.url = response.data.qiniu_url; // file.key = response.data.qiniu_key;
// file.url = response.data.qiniu_url;
// done();
// })
done(); done();
})
}, },
sending: (file, xhr, formData) => { sending: (file, xhr, formData) => {
formData.append('token', file.token); /* 七牛*/
formData.append('key', file.key); // formData.append('token', file.token);
// formData.append('key', file.key);
vm.initOnce = false; vm.initOnce = false;
} }
}); });
......
src/components/SplitPane/Pane.vue
View file @ 6eca8e47
...@@ -7,32 +7,12 @@ ...@@ -7,32 +7,12 @@
<script> <script>
export default { export default {
name: 'Pane', name: 'Pane',
props: {
// split: {
// validator: function (value) {
// return ['vertical', 'horizontal'].indexOf(value) >= 0
// },
// required: true
// }
},
// computed:{
// classes () {
// return this.$parent.split
// },
// },
data() { data() {
const classes = ['Pane', this.$parent.split, 'className']; const classes = ['Pane', this.$parent.split, 'className'];
return { return {
classes: classes.join(' '), classes: classes.join(' '),
percent: 50 percent: 50
} }
},
created() {
// console.log(this.$parent.split)
},
methods: {
} }
} }
</script> </script>
......
src/components/SplitPane/Resizer.vue
View file @ 6eca8e47
<template> <template>
<div :class="classes" @mousedown="onMouseDown"></div> <div :class="classes" @mousedown="onMouseDown"></div>
</template> </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> <style scoped>
.Resizer { .Resizer {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -37,8 +59,6 @@ ...@@ -37,8 +59,6 @@
.Resizer.vertical { .Resizer.vertical {
width: 11px; width: 11px;
height: 100%; height: 100%;
/*margin: 0 -5px;*/
border-left: 5px solid rgba(255, 255, 255, 0); border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0); border-right: 5px solid rgba(255, 255, 255, 0);
cursor: col-resize; cursor: col-resize;
...@@ -49,27 +69,3 @@ ...@@ -49,27 +69,3 @@
border-right: 5px solid rgba(0, 0, 0, 0.5); border-right: 5px solid rgba(0, 0, 0, 0.5);
} }
</style> </style>
<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(' ')
}
},
methods: {}
}
</script>
src/components/SplitPane/SplitPane-backup.vue deleted 100644 → 0
View file @ 7bedb861
<!--<template>-->
<!--<div :style="{ cursor, userSelect }" class="vue-splitter-container clearfix" @mouseup="onMouseUp"-->
<!--@mousemove="onMouseMove">-->
<!--<Pane split="vertical" :style="{ width: percent+'%' }" class="left-container splitter-pane">-->
<!--orange-->
<!--</Pane>-->
<!--<Resizer split="vertical" :onMouseDown="onMouseDown" @click="onClick"></Resizer>-->
<!--<div class="todel" :style="{ width: 100-percent+'%'}">-->
<!--<Pane split="horizontal" class="top-container">-->
<!--<div slot>apple banana</div>-->
<!--</Pane>-->
<!--<Resizer split="horizontal" :onMouseDown="onMouseDown" @click="onClick"></Resizer>-->
<!--<Pane split="horizontal" class="bottom-container">-->
<!--<div slot>apple banana</div>-->
<!--</Pane>-->
<!--</div>-->
<!--</div>-->
<!--</template>-->
<style scoped>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.vue-splitter-container {
height: inherit;
display: flex;
}
</style>
<script>
/* eslint-disable */
import Resizer from './Resizer';
import vue from 'vue'
export default {
name: 'splitPane',
components: {Resizer},
props: {
margin: {
type: Number,
default: 10
}
},
data () {
return {
active: false,
percent: 50,
hasMoved: false,
panes: []
}
},
props: {
split: {
validator: function (value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
}
},
computed: {
userSelect () {
return this.active ? 'none' : ''
},
cursor () {
return this.active ? 'col-resize' : ''
},
// $paneItems () {
// return this.$children.filter(child => {
// console.log(child)
// })
// }
},
render(h){
const temp = [];
this.$slots.default.map((item, i) => {
if (item.tag && item.tag.toUpperCase().indexOf('PANE') >= 0) {
temp.push(item)
}
});
const newSlots = [];
const length = temp.length;
temp.map((item, index)=> {
newSlots.push(item)
if (index != length - 1) {
newSlots.push(
h('Resizer', {
props: {
split: this.split,
onMouseDown: this.onMouseDown
}
})
)
}
})
return h('div', {
on: {
mousemove: this.onMouseMove
}
}, [
h('div', {
'class': {
'vue-splitter-container': true
},
}, newSlots)
])
},
// beforeMount(){
// this.$slots.default=this.$slots.default.map((item, i) => {
// if (item.tag&&item.tag.toUpperCase().indexOf('PANE') >= 0) {
// return item
// }else{
// return null
// }
// })
//
// },
created(){
},
mounted(){
},
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;
while (target) {
offset += target.offsetLeft;
target = target.offsetParent;
}
const percent = Math.floor(((e.pageX - offset) / e.currentTarget.offsetWidth) * 10000) / 100;
if (percent > this.margin && percent < 100 - this.margin) {
this.percent = percent;
}
console.log(percent)
this.$children.map((v, i)=> {
if (i == 0) {
v.percent = percent
} else {
v.percent = 100 - percent
}
})
this.$emit('resize');
this.hasMoved = true;
}
}
}
}
</script>
src/components/SplitPane/index.js deleted 100644 → 0
View file @ 7bedb861
import SplitPane from './a.vue';
import Pane from './Pane.vue';
export {
SplitPane,
Pane
}
src/components/SplitPane/SplitPane.vue → src/components/SplitPane/index.vue
View file @ 6eca8e47
...@@ -66,7 +66,6 @@ ...@@ -66,7 +66,6 @@
mounted() { mounted() {
const element = this.$el; const element = this.$el;
const elementOffset = element.getBoundingClientRect(); const elementOffset = element.getBoundingClientRect();
console.log(elementOffset.height)
// this.height = elementOffset.height+'px'; // this.height = elementOffset.height+'px';
}, },
methods: { methods: {
......
src/components/twoDndList/index.vue
View file @ 6eca8e47
...@@ -4,9 +4,8 @@ ...@@ -4,9 +4,8 @@
<h3>{{list1Title}}</h3> <h3>{{list1Title}}</h3>
<draggable :list="list1" class="dragArea" :options="{group:'article'}"> <draggable :list="list1" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in list1"> <div class="list-complete-item" v-for="element in list1">
<div class="list-complete-item-handle">[{{element.id}}] {{element.title}}</div> <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
<div style="position:absolute;right:0px;"> <div style="position:absolute;right:0px;">
<a style="float: left ;margin-top: -20px;margin-right:5px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)"> <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"></i> <i style="color:#ff4949" class="el-icon-delete"></i>
</span> </span>
...@@ -19,8 +18,7 @@ ...@@ -19,8 +18,7 @@
<h3>{{list2Title}}</h3> <h3>{{list2Title}}</h3>
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}"> <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in filterList2"> <div class="list-complete-item" v-for="element in filterList2">
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.id}}] {{element.title}}</div> <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
<a style="float: right ;margin-top: -20px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
</div> </div>
</draggable> </draggable>
</div> </div>
...@@ -124,6 +122,7 @@ ...@@ -124,6 +122,7 @@
.list-complete-item { .list-complete-item {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
font-size: 14px;
padding: 5px 12px; padding: 5px 12px;
margin-top: 4px; margin-top: 4px;
border: 1px solid #bfcbd9; border: 1px solid #bfcbd9;
......
src/mock/index.js
View file @ 6eca8e47
import axios from 'axios';
import Mock from 'mockjs'; import Mock from 'mockjs';
Mock.mock(/\/article\/list/, { import MockAdapter from 'axios-mock-adapter';
const mock = new MockAdapter(axios);
const articleList = {
'data|20': [{ 'data|20': [{
id: '@id', id: '@id',
title: '@ctitle(10, 20)', title: '@ctitle(10, 20)',
...@@ -7,6 +11,7 @@ Mock.mock(/\/article\/list/, { ...@@ -7,6 +11,7 @@ Mock.mock(/\/article\/list/, {
display_time: '@datetime', display_time: '@datetime',
pageviews: '@integer(300, 5000)' pageviews: '@integer(300, 5000)'
}] }]
}) }
const data = JSON.stringify(Mock.mock(articleList))
export default Mock; mock.onGet('/article/list').reply(200, data);
export default mock;
src/router/index.js
View file @ 6eca8e47
...@@ -20,7 +20,12 @@ import reset from '../views/login/reset'; ...@@ -20,7 +20,12 @@ import reset from '../views/login/reset';
const Tinymce = resolve => require(['../views/components/tinymce'], resolve); const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
const Markdown = resolve => require(['../views/components/markdown'], resolve); const Markdown = resolve => require(['../views/components/markdown'], resolve);
const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve); const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve);
const DndList = resolve => require(['../views/components/dndlist'], resolve);
const AvatarUpload = resolve => require(['../views/components/avatarupload'], resolve); const AvatarUpload = resolve => require(['../views/components/avatarupload'], resolve);
const Dropzone = resolve => require(['../views/components/dropzone'], resolve);
const Sticky = resolve => require(['../views/components/sticky'], resolve);
const SplitPane = resolve => require(['../views/components/splitpane'], resolve);
/* charts*/ /* charts*/
const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve); const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
...@@ -72,9 +77,12 @@ export default new Router({ ...@@ -72,9 +77,12 @@ export default new Router({
children: [ children: [
{ path: 'tinymce', component: Tinymce, name: '富文本编辑器' }, { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
{ path: 'markdown', component: Markdown, name: 'Markdown' }, { path: 'markdown', component: Markdown, name: 'Markdown' },
{ path: 'jsoneditor', component: JsonEditor, name: 'json编辑器' }, { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' },
{ path: 'avatarupload', component: AvatarUpload, name: '头像上传' } { path: 'dndlist', component: DndList, name: '列表拖拽' },
{ path: 'splitpane', component: SplitPane, name: 'SplitPane' },
{ path: 'avatarupload', component: AvatarUpload, name: '头像上传' },
{ path: 'dropzone', component: Dropzone, name: 'Dropzone' },
{ path: 'sticky', component: Sticky, name: 'Sticky' }
] ]
}, },
{ {
......
src/styles/index.scss
View file @ 6eca8e47
...@@ -84,6 +84,13 @@ code { ...@@ -84,6 +84,13 @@ code {
padding: 20px 10px; padding: 20px 10px;
margin-bottom: 20px; margin-bottom: 20px;
display: block; display: block;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
} }
.fade-enter-active, .fade-enter-active,
......
src/views/components/dndlist.vue
View file @ 6eca8e47
<template> <template>
<div class="components-container"> <div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code> <code>拖拽https://github.com/SortableJS/Vue.Draggable 项目：Vue.Draggable</code>
<div class="editor-container"> <div class="editor-container">
<TwoDndList :list1="list1" :list2="list2" :list1Title="头条列表" list2Title="文章池"></TwoDndList> <DndList :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池" />
</div> </div>
<!--<div class='editor-content'>
{{content}}
</div>-->
</div> </div>
</template> </template>
<script> <script>
import DndList from 'components/twoDndList' import DndList from 'components/twoDndList'
import { getList } from 'api/article';
export default { export default {
components: { DndList }, components: { DndList },
data() { data() {
...@@ -20,8 +17,18 @@ ...@@ -20,8 +17,18 @@
list2: [] list2: []
} }
}, },
created() {
this.fetchData();
},
methods: { methods: {
fetchData() {
this.listLoading = true;
getList(this.listQuery).then(response => {
this.list1 = response.data.splice(0, 5);
this.list2 = response.data;
console.log(this.list1, this.list2)
})
}
} }
}; };
</script> </script>
......
src/views/components/dropzone.vue 0 → 100644
View file @ 6eca8e47
<template>
<div class="components-container">
<code>https://github.com/rowanwins/vue-dropzone
由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
</code>
<div class="editor-container">
<Dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone"
url="https://httpbin.org/post"></Dropzone>
</div>
</div>
</template>
<script>
import Dropzone from 'components/Dropzone';
export default {
components: { Dropzone },
methods: {
dropzoneS(file) {
this.$message({ message: '上传成功', type: 'success' });
},
dropzoneR(file) {
this.$message({ message: '删除成功', type: 'success' });
}
}
};
</script>
src/views/components/splitpane.vue 0 → 100644
View file @ 6eca8e47
<template>
<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 v-on:resize="resize" split="vertical">
<template slot="paneL">
<div class="left-container"></div>
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
<div class="top-container"></div>
</template>
<template slot="paneR">
<div class="bottom-container">
</div>
</template>
</split-pane>
</template>
</splitPane>
</div>
</template>
<script>
import splitPane from 'components/SplitPane'
export default {
components: { splitPane },
methods: {
resize() {
console.log('resize')
}
}
};
</script>
<style scoped>
.components-container{
position: relative;
height: 100vh;
}
.left-container {
background-color: #F38181;
height:100%;
}
.right-container {
background-color: #FCE38A;
height: 200px;
}
.top-container {
background-color: #FCE38A;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
height: 100%;
}
</style>
src/views/components/sticky.vue 0 → 100644
View file @ 6eca8e47
<template>
<div>
<Sticky className="sub-navbar">
<el-dropdown trigger="click">
<el-button>
平台<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
<el-dropdown-menu class="no-border" slot="dropdown">
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
{{item.name}}
</el-checkbox>
</el-checkbox-group>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click">
<el-button>
外链<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
<el-input placeholder="请输入内容" v-model="url">
<template slot="prepend">填写url</template>
</el-input>
</el-dropdown-menu>
</el-dropdown>
<div class="time-container">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
</el-date-picker>
</div>
<el-button style="margin-left: 10px;" type="success">发布
</el-button>
</Sticky>
<div class="components-container">
<code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
</div>
</div>
</template>
<script>
import Sticky from 'components/Sticky';
export default {
components: { Sticky },
data() {
return {
time: '',
url: '',
platforms: ['a-platform'],
platformsOptions: [
{ key: 'a-platform', name: '平台A' },
{ key: 'b-platform', name: '平台B' },
{ key: 'c-platform', name: '平台C' }
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}
};
</script>
<style scoped>
.time-container {
display: inline-block;
}
</style>
src/views/error/404.vue
View file @ 6eca8e47
<template> <template>
<div class="errorpage-container"> 404 <div>404</div>
<splitPane v-on:resize="resize" split="vertical">
<template slot="paneL">
<div class="left-container"></div>
</template>
<template slot="paneR">
<splitPane split="horizontal">
<template slot="paneL">
<div class="top-container"></div>
</template>
<template slot="paneR">
<div class="bottom-container">
</div>
</template>
</splitPane>
</template>
</splitPane>
</div>
</template> </template>
<script>
import splitPane from 'components/SplitPane/SplitPane'
export default {
components: { splitPane },
methods: {
resize() {
console.log('resize')
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.errorpage-container{
position: relative;
height: 100vh;
}
.left-container {
background-color: #F38181;
height:100%;
}
.right-container {
background-color: #FCE38A;
height: 200px;
}
.top-container {
background-color: #FCE38A;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
height: 100%;
}
</style>
src/views/excel/index.vue
View file @ 6eca8e47
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
</template> </template>
<script> <script>
import { getList } from 'api/article' import { getList } from 'api/article';
export default { export default {
data() { data() {
return { return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment