caiaa1 2 years ago
parent
commit
ae4d8e0413
1 changed files with 166 additions and 3 deletions
  1. 166 3
      src/views/home/index.vue

+ 166 - 3
src/views/home/index.vue

@@ -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>