改改大体布局

html/document.js

@@ -211,12 +211,12 @@ const app = new Vue({
 				}
 			});
 		},
-		setImageAndDraw(e){
+		async setImageAndDraw(e){
 			let img = e.target;
 
 			console.log(img);
 			this.img = img;
-			this.louvre();
+			await this.louvre();
 		},
 		output(){
 			const a = document.createElement('a');

html/document.less

@@ -3,12 +3,27 @@
 }
 html{
     background:var(--background-color);
+    text-align: center;
+}
+body{
+    margin: 0;
+    padding-bottom:100px;
+}
+button{
+    cursor: pointer;
 }
 canvas{
 	background:#FFF;
 }
+.app{
+    max-width:800px;
+    margin:0 auto;
+}
+.config-box{
+    padding:20px 0;
+}
 img,canvas{
-	max-width:800px;
+	max-width:100%;
 }
 /* .app[data-cover="true"] canvas{
 	width:480px;

html/index.html

@@ -13,11 +13,14 @@
 		<h1>
 			One Last Image
 		</h1>
-		<img src="../one-last-image-logo-color.png">
+		<!-- <img src="../one-last-image-logo-color.png"> -->
 	</header>
 	<div class="ctrl-box">
 		<img src="images/asuka-8.jpg" @load="setImageAndDraw">
-
+		
+		<div class="ctrl-box">
+			<button @click="chooseFile()">上传图片</button>
+		</div>
 		<div class="config-box">
 			<!-- <div class="label-box" style="padding:4px 0;">
 				<b>light</b>
@@ -65,10 +68,10 @@
 					<input type="checkbox" v-model="style.kuma">Kiss
 				</label>
 				<label>
-					<input type="checkbox" v-model="style.watermark">watermark
+					<input type="checkbox" v-model="style.watermark">水印
 				</label>
 				
-				<label>
+				<label v-if="style.watermark">
 					<input type="checkbox" v-model="style.hajimei">初回限定
 				</label>
 			</div>