F谱，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

            
            <div class="box">
  <span class="translateF">F</span>
  <div class="jian"><div class="dot"><span>f1</span></div></div>
  <div class="jian"><div class="dot"><span>d1</span></div></div>
  <div class="jian"><div class="dot"><span>b</span></div></div>
  <div class="jian"><div class="dot"><span>g</span></div></div>
  <div class="jian"><div class="dot"><span>e</span></div></div>
  <div class="jian"><div class="dot"><span>c</span></div></div>
  <div class="jian"><div class="dot"><span>A</span></div></div>
  <div class="jian"><div class="dot"><span>F</span></div></div>
  <div class="jian"><div class="dot"><span>D</span></div></div>
  <div class="jian"><div class="dot"><span>B1</span></div></div>
  <div class="F-box">
    <div free class="up-line"><div class="dot"><span>g1</span></div></div>
    <div free class="up-line"><div class="dot"><span>e1</span></div></div>
    <div free class="up-line"><div class="dot"><span>c1</span></div></div>
    <div class="line-item"><div class="dot"><span>a</span></div></div>
    <div class="line-item"><div class="dot"></div></div>
    <div class="line-item"><div class="dot"><span>d</span></div></div>
    <div class="line-item"><div class="dot"><span>B</span></div></div>
    <div class="line-item"><div class="dot"><span>G</span></div></div>
    <div free class="down-line"><div class="dot"><span>E</span></div></div>
    <div free class="down-line"><div class="dot"><span>C</span></div></div>
    <div free class="down-line"><div class="dot"><span>A1</span></div></div>
  </div>
</div>
<button class="show-all">显示全部</button>
<button class="random-button">随机</button>