add main.css

3 years ago · 24768237e2
parent a664651865
commit 24768237e2
2 changed files with 34 additions and 1 deletions
--- a/share/index.html
+++ b/share/index.html
@ -4,14 +4,16 @@
 		<meta charset="utf-8">
 		<title>Share</title>
 		<script src="./vue.js"></script>
+		<link rel="stylesheet" href="./main.css" />
 	</head>
 	<body>
 		<div id="app">
 			<button @click="cl">{{ message }}</button>
 			<p>Count is: {{ count }}</p>
 		</div>
+		<div id="square"><div v-html="rawHtml">loading...</div></div>
 		<script>
-			const { createApp, ref } = Vue
+			const { createApp, ref, onMounted } = Vue
 			const app = createApp({
 			  setup(){
 				  const message = ref('Hello Vue!')
@ -26,7 +28,25 @@
 				  }
 			  }
 			  })
+			
+			const square = createApp({
+				setup(){
+					let rawHtml = ''
+					let start = 0
+					for(let i = 1; i < 101; i++){
+						for(let j = 1; j < 101; j++){
+							start ++
+							rawHtml += `<div style="background:rgba(${i},${j},${Math.random()*255},.5)">${start}</div>`
+						}
+					}
+					return {
+						rawHtml
+					}
+				}
+			})
+			
 			app.mount('#app')
+			square.mount('#square')
 		</script>
 	</body>
 </html>
--- a/share/main.css
+++ b/share/main.css
@ -0,0 +1,13 @@
+#square>div{
+	display: flex;
+	flex-wrap: wrap;
+	
+}
+#square>div>div{
+	width: 100px;
+	height: 100px;
+	/* margin-right: 10px; */
+	/* margin-bottom: 10px; */
+	border: 1px solid #f1f1f1;
+	transform: rotate(1deg);
+}