|
@@ -1,14 +1,119 @@
|
|
|
<template>
|
|
|
- <div class="dashboard-container">
|
|
|
- <div class="dashboard-text">name: {{ name }}</div>
|
|
|
+ <div class="home-container">
|
|
|
+ <grid-layout
|
|
|
+ :layout.sync="layout"
|
|
|
+ :col-num="14"
|
|
|
+ :row-height="30"
|
|
|
+ :is-draggable="true"
|
|
|
+ :is-resizable="true"
|
|
|
+ :is-mirrored="false"
|
|
|
+ :vertical-compact="true"
|
|
|
+ :margin="[5, 5]"
|
|
|
+ :use-css-transforms="true"
|
|
|
+ >
|
|
|
+ <grid-item :key="layout[0].i" :x="layout[0].x" :y="layout[0].y" :w="layout[0].w" :h="layout[0].h" :i="layout[0].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-row>
|
|
|
+ <el-input />
|
|
|
+ <el-button type="primary">search</el-button>
|
|
|
+ <el-button type="primary">search</el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>biz</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
|
|
|
+ </div>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="待办" name="first">待办</el-tab-pane>
|
|
|
+ <el-tab-pane label="已办" name="second">已办</el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>system</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>utils</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
|
|
|
+ </div>
|
|
|
+ <el-carousel height="150px">
|
|
|
+ <el-carousel-item v-for="item in 4" :key="item">
|
|
|
+ <h3 class="small">{{ item }}</h3>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>specification</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-for="o in 4" :key="o" class="item">
|
|
|
+ {{ '列表内容 ' + o }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>navigator</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-for="o in 4" :key="o" class="item">
|
|
|
+ {{ '列表内容 ' + o }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>message</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-for="o in 4" :key="o" class="item">
|
|
|
+ {{ '列表内容 ' + o }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </grid-item>
|
|
|
+ </grid-layout>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from 'vuex'
|
|
|
+import VueGridLayout from 'vue-grid-layout'
|
|
|
|
|
|
export default {
|
|
|
- name: 'Dashboard',
|
|
|
+ name: 'Home',
|
|
|
+ components: {
|
|
|
+ GridLayout: VueGridLayout.GridLayout,
|
|
|
+ GridItem: VueGridLayout.GridItem
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ layout: [
|
|
|
+ { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
|
|
|
+ { 'x': 0, 'y': 2, 'w': 6, 'h': 8, 'i': '1' },
|
|
|
+ { 'x': 0, 'y': 10, 'w': 6, 'h': 6, 'i': '2' },
|
|
|
+ { 'x': 6, 'y': 2, 'w': 8, 'h': 6, 'i': '3' },
|
|
|
+ { 'x': 6, 'y': 8, 'w': 8, 'h': 4, 'i': '4' },
|
|
|
+ { 'x': 6, 'y': 12, 'w': 8, 'h': 4, 'i': '5' },
|
|
|
+ { 'x': 0, 'y': 16, 'w': 14, 'h': 2, 'i': '6' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapGetters([
|
|
|
'name'
|
|
@@ -27,4 +132,62 @@ export default {
|
|
|
line-height: 46px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.vue-grid-layout {
|
|
|
+ background: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item:not(.vue-grid-placeholder) {
|
|
|
+ background: #ccc;
|
|
|
+ border: 1px solid black;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item .resizing {
|
|
|
+ opacity: 0.9;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item .static {
|
|
|
+ background: #cce;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item .text {
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item .no-drag {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item .minMax {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-grid-item .add {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-draggable-handle {
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
|
|
|
+ background-position: bottom right;
|
|
|
+ padding: 0 8px 8px 0;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-origin: content-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|