From 317f75a986ebf9b550b23bd992d21be7231dcad0 Mon Sep 17 00:00:00 2001
From: hinak0 <hinak0@qq.com>
Date: Thu, 13 Oct 2022 16:13:09 +0800
Subject: [PATCH] add the grid guides for demo page

---
 src/demo/app.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/demo/app.vue b/src/demo/app.vue
index e507c7e..8e2bb08 100644
--- a/src/demo/app.vue
+++ b/src/demo/app.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <div class="list" id="list">
+        <div class="list grid" id="list">
             <VueDragResize v-for="(rect, index) in rects"
                            :key="index"
                            :w="rect.width"
@@ -66,6 +66,12 @@
         background-color: white;
     }
 
+    /* grid of the main panel */
+    .list.grid{
+        background-image: linear-gradient(chocolate 1px,transparent 1px),linear-gradient(90deg,chocolate 1px,transparent 1px);
+        background-size: 50px 50px;
+    }
+
     .box-shaddow {
         box-shadow:  10px 10px 15px 0px rgba(125,125,125,1);
     }
@@ -73,8 +79,8 @@
 
 <script>
     import VueDragResize from '../components/vue-drag-resize.vue';
-    import toolbar from './components/toolbar/toolbar.vue';
-    import './icons';
+import toolbar from './components/toolbar/toolbar.vue';
+import './icons';
 
     export default {
         name: 'app',
@@ -133,4 +139,4 @@
             }
         }
     }
-</script>
\ No newline at end of file
+</script>