From 24768237e2053f9e4cea989fc5375859e5c63f4a Mon Sep 17 00:00:00 2001
From: laoyang <wavelife@163.com>
Date: Wed, 20 Jul 2022 17:30:13 +0800
Subject: [PATCH] add main.css

---
 share/index.html | 22 +++++++++++++++++++++-
 share/main.css   | 13 +++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 share/main.css
diff --git a/share/index.html b/share/index.html
index 714da22..0df38dc 100644
--- 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>
\ No newline at end of file
diff --git a/share/main.css b/share/main.css
new file mode 100644
index 0000000..a550230
--- /dev/null
+++ 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);
+}
\ No newline at end of file
