diff --git a/html/document.js b/html/document.js index 5e88816..c507429 100644 --- a/html/document.js +++ b/html/document.js @@ -168,7 +168,7 @@ const defaultImageURL = 'images/asuka-8.jpg'; const maxPreviewWidth = Math.min(800,document.body.offsetWidth); let previewWidth = maxPreviewWidth; -let previewHeight = Math.round(previewWidth * 0.59); +let previewHeight = Math.round(previewWidth * 0.593); const data = { src: defaultImageURL, @@ -182,6 +182,7 @@ const data = { previewWidth, previewHeight, lyrics: null, + loading: true, lyricIndex: 0 }; @@ -200,10 +201,21 @@ chooseFile.input.type = 'file'; chooseFile.form.appendChild(chooseFile.input); +const init= _=>{ + app.loading = false; + louvreInit( _=>{ + const { img } = app.$refs; + img.onload = app.setImageAndDraw; + if(img.complete) img.onload(); + }); +} + + app = new Vue({ el:'.app', data, methods: { + init, _louvre(ms=300){ app.runing = true; clearTimeout(app.T) @@ -269,12 +281,6 @@ app = new Vue({ } } }); -louvreInit( _=>{ - const { img } = app.$refs; - img.onload = app.setImageAndDraw; - if(img.complete) img.onload(); -}); - diff --git a/html/document.less b/html/document.less index 64ded87..38e2338 100644 --- a/html/document.less +++ b/html/document.less @@ -19,12 +19,63 @@ a{ color: #666; text-decoration: none; } +hr{ + border:0; + border-top:1px solid rgba(0,0,0,.08); + margin:10px auto; + max-width: 100px; + display: block; +} header{ padding: 40px 0 30px; p{ opacity: 0.5; } } +.loading-box{ + position: fixed; + inset: 0; + z-index:1; + background:#FFF; + h2{ + line-height: 100px; + width: 100%; + } + animation: loadingBoxopacityIn 4s ease; + svg{ + width: 320px; + height: 40px; + margin:auto; + position: absolute; + inset: 0; + opacity: 0; + animation: opacityIn 3s ease 1s; + } +} +// .app[data-loading="true"]{ +// .loading-box{ +// display: block; +// } +// } +@keyframes loadingBoxopacityIn { + 0%, + 90%{ + opacity: 1; + } + 100%{ + opacity: 0; + } +} +@keyframes opacityIn { + 0%, + 80%, + 100% { + opacity: 0; + } + 40%,60%{ + opacity: 1; + } +} h1{ margin:0 auto; diff --git a/html/index.html b/html/index.html index 1b42da2..4678c07 100644 --- a/html/index.html +++ b/html/index.html @@ -9,7 +9,7 @@ -
+

One Last Image @@ -33,20 +33,7 @@ :src="src" :style="sizeStyle"> -

+
+ + +

生成好啦

@@ -207,6 +202,8 @@