sonist/views/ktv.htm

<div class="inner-content">
  <div class="info">
    <img :attr-src="curr.cover" :click="toggleLrcView" />
    <div class="summary" :visible="!allLrcView">
      <h3 :text="curr.title"></h3>
      <section>歌手: {{curr.artist}}</section>
      <section>专辑: {{curr.album}}</section>
      <section>时长: {{curr.duration | time}}</section>
    </div>
    <div class="summary" :visible="allLrcView">
      <pre class="summary" :text="allLrc"></pre>
    </div>
    
  </div>

  <div class="lrc-box">
    <section class="left">
      <span :text="lrc.l.txt" :css="{background: lrc.l.bg}"></span>
    </section>
    <section class="right">
      <span :text="lrc.r.txt" :css="{background: lrc.r.bg}"></span>
    </section>
  </div>

  <div class="tool-box">
    <section class="item" :click="forwardLrc(-0.5)">
      <i class="do-icon-trigon-up"></i>歌词 -0.5s
    </section>
    <section class="item" :click="showLrcSearch">
      <i class="do-icon-search"></i>歌词有误
    </section>
    <section class="item" :click="layer.alert('歌词编辑功能暂时未开放')">
      <i class="do-icon-edit"></i>歌词编辑
    </section>
    <section class="item" :click="forwardLrc(0.5)">
      <i class="do-icon-trigon-down"></i>歌词 +0.5s
    </section>
  </div>


  <div class="search-box" :if="lrcSearchBoxShow">
    <div class="content">
      <div class="title">歌词搜索 <i class="do-icon-close" :click="closeLrcSearch"></i></div>
      <section class="section">
        <input 
          class="do-ui-input" 
          placeholder="请输入歌名搜索"
          :keyup="searchLrc"
          :duplex="lrcForm.input" >
      </section>
      <ul class="result">
        <li class="item">
          <span>歌名</span>
          <span>歌手</span>
          <span>专辑</span>
          <span>时长</span>
          <span>操作</span>
        </li>
        <li class="item" :for="it in lrcForm.result">
          <span :text="it.title"></span>
          <span :text="it.artist"></span>
          <span :text="it.album"></span>
          <span :text="it.duration | time"></span>
          <span><a class="do-ui-button blue medium" :click="useThisLrc(it)">使用</a></span>
        </li>
        <li class="item" :if="lrcForm.result.size() < 1"><span>没有搜到任何结果...</span></li>
      </ul>
    </div>
  </div>

</div>