优化ktv模式

Readme.md

@@ -9,6 +9,8 @@
 
 ![demo](./demo2.jpg)
 
+![demo](./demo3.jpg)
+
 
 ## 开发计划
 
@@ -33,8 +35,8 @@
 - [ ] 酷狗账号直接登录(犹豫中)
 - [ ] 铃声制作(犹豫中)
 - [ ] 用户评论/点赞(取决于登陆功能是否开发)
-- [ ] 试听下载
+- [ ] ~~试听下载~~(不再提供下载)
-- [ ] 歌曲质量选择
+- [ ] ~~歌曲质量选择~~(默认选择免费级中最高品质的mp3)
 - [ ] 等你来建议
 
 

css/app.scss

@@ -211,14 +211,26 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
 
   .ktv-box {overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:nth($cd, 3);background-size:cover;background-repeat:no-repeat;color:#fff;
   
-    .inner-content  {display:flex;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
+    .inner-content  {display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
     
-      .info {flex:1.5;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;padding:0 10rem;line-height:2;text-align:center;
+      .info {flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2;
 
-        img {display:block;width:100%;height:auto}
+        img {width:30rem;height:30rem;border:.5rem solid rgba(255, 255, 255, .5);border-radius:50%;}
+        .summary {flex:1; padding:0 5rem}
         h3 {line-height:3;font-size:1.8rem;}
       }
-      .lrc-box {flex:3.5;}
+      .lrc-box {flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem;
+        
+        section {flex:1;display:flex;
+        
+          &.left {justify-content:flex-start;
+          
+            span {background: linear-gradient(to right, #ff0 25%, #fff 25%);;background-clip:text;color:transparent;}
+          }
+          &.right {justify-content:flex-end}
+        }
+      
+      }
     }
   
   }

index.html

@@ -114,14 +114,21 @@
     <div class="inner-content">
       <div class="info">
         <img :attr-src="curr.cover" />
-
+        <div class="summary">
-        <h3 :text="curr.title"></h3>
+          <h3 :text="curr.title"></h3>
-        <section>歌手: {{curr.artist}}</section>
+          <section>歌手: {{curr.artist}}</section>
-        <section>专辑: {{curr.album}}</section>
+          <section>专辑: {{curr.album}}</section>
+          <section>时长: {{curr.duration | time}}</section>
+        </div>
       </div>
 
       <div class="lrc-box">
-        
+        <section class="left">
+          <span>我有句话悄悄想对你说</span>
+        </section>
+        <section class="right">
+          <span>想着你成为我一种坏习惯</span>
+        </section>
       </div>
     </div>
   </div>

js/app.js

@@ -128,7 +128,6 @@ Anot({
         let ax = ev.pageX - rect.left
         let ay = ev.pageY - rect.top
 
-        log(aw, ax, ay)
         if (ax < 80) {
           this.ktvMode = this.ktvMode ^ 1
           return
@@ -142,7 +141,7 @@ Anot({
           }
         }
       },
-      true
+      false
     )
 
     // 设置循环模式
@@ -365,6 +364,7 @@ Anot({
               it.time = 0
               this.updateCurr(it)
               this.draw()
+              this.ktvMode = 1
             })
           }
           this.isPlaying = !this.isPlaying

js/modules/local.js

@@ -47,6 +47,8 @@ export default Anot({
 
     SONIST.clear()
     SONIST.push(LS.getAll())
+
+    this.__APP__.play()
   },
   watch: {
     'props.curr'(v) {