add the grid guides for demo page

hinak0 · hinak0 · commit aba4afc3fc0f · 2022-10-13T16:16:46.000+08:00
diff --git 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);
     }
@@ -133,4 +139,4 @@
             }
         }
     }
-</script>
+</script>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div id="app">`
`3`		`- <div class="list" id="list">`
	`3`	`+ <div class="list grid" id="list">`
`4`	`4`	`<VueDragResize v-for="(rect, index) in rects"`
`5`	`5`	`:key="index"`
`6`	`6`	`:w="rect.width"`
`@@ -66,6 +66,12 @@`
`66`	`66`	`background-color: white;`
`67`	`67`	`}`
`68`	`68`
	`69`	`+ /* grid of the main panel */`
	`70`	`+ .list.grid{`
	`71`	`+ background-image: linear-gradient(chocolate 1px,transparent 1px),linear-gradient(90deg,chocolate 1px,transparent 1px);`
	`72`	`+ background-size: 50px 50px;`
	`73`	`+ }`
	`74`	`+`
`69`	`75`	`.box-shaddow {`
`70`	`76`	`box-shadow: 10px 10px 15px 0px rgba(125,125,125,1);`
`71`	`77`	`}`
`@@ -133,4 +139,4 @@`
`133`	`139`	`}`
`134`	`140`	`}`
`135`	`141`	`}`
`136`		`-</script>`
	`142`	`+</script>`