Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
schtonn
/
public
1
1
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Koks: abc92c4f7c
Atzari Tagi
public
/
piano
/
index.html

index.html 61 KB
Vēsture Neapstrādāts

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851 
  1. <!DOCTYPE html>
    2. 

  2. <!-- saved from url=(0028)https://www.xiwnn.com/piano/ -->
    3. 

  3. <html lang="zh-cn">
    4. 

  4. 

  5. <head>
    6. 

  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 

  7.     <meta name="renderer" content="webkit">
    8. 

  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    9. 

  9.     <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1">
    10. 

  10.     <meta name="author" content="xiwnn">
    11. 

  11.     <meta name="copyright" content="xiwnn.com">
    12. 

  12.     <style
    13. 

  13.         data-vue-ssr-id="7f856741:0 9aa6c2b2:0 0423f76e:0 312f42d8:0 6f3e8538:0 0e25b610:0 aeb9be64:0 f5e2c8bc:0 db984184:0 9a97df18:0 3153952e:0 08feb84e:0 8fa30810:0">
    14. 

  14.         body {
    15. 

  15.             margin: 0;
    16. 

  16.             font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    17. 

  17.             font-size: 15px;
    18. 

  18.             line-height: 1.5;
    19. 

  19.             color: rgba(0, 0, 0, .65);
    20. 

  20.             background-color: #fff
    21. 

  21.         }
    22. 

  22. 

  23.         ::-moz-selection {
    24. 

  24.             color: #fff;
    25. 

  25.             background-color: rgba(39, 168, 255, .75)
    26. 

  26.         }
    27. 

  27. 

  28.         ::selection {
    29. 

  29.             color: #fff;
    30. 

  30.             background-color: rgba(39, 168, 255, .75)
    31. 

  31.         }
    32. 

  32. 

  33.         .h1,
    34. 

  34.         .h2,
    35. 

  35.         .h3,
    36. 

  36.         .h4,
    37. 

  37.         .h5,
    38. 

  38.         .h6,
    39. 

  39.         h1,
    40. 

  40.         h2,
    41. 

  41.         h3,
    42. 

  42.         h4,
    43. 

  43.         h5,
    44. 

  44.         h6 {
    45. 

  45.             font-family: inherit;
    46. 

  46.             font-weight: 500;
    47. 

  47.             line-height: 1.1;
    48. 

  48.             color: inherit
    49. 

  49.         }
    50. 

  50. 

  51.         button,
    52. 

  52.         input,
    53. 

  53.         textarea {
    54. 

  54.             font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    55. 

  55.             color: inherit
    56. 

  56.         }
    57. 

  57. 

  58.         .page-container {
    59. 

  59.             min-height: 600px;
    60. 

  60.             margin: 0 20px
    61. 

  61.         }
    62. 

  62. 

  63.         .content-container {
    64. 

  64.             max-width: 1000px
    65. 

  65.         }
    66. 

  66. 

  67.         @font-face {
    68. 

  68.             font-family: iconfont;
    69. 

  69.             src: url(/assets/img/iconfont.a296391.eot);
    70. 

  70.             src: url(/assets/img/iconfont.a296391.eot#iefix) format("embedded-opentype"), url("data:application/x-font-woff2;charset=utf-8;base64,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") format("woff2"), url(/assets/img/iconfont.5e2b705.woff) format("woff"), url(/assets/img/iconfont.fda72c6.ttf) format("truetype"), url(/assets/img/iconfont.a99b445.svg#iconfont) format("svg")
    71. 

  71.         }
    72. 

  72. 

  73.         .iconfont {
    74. 

  74.             font-family: iconfont !important;
    75. 

  75.             font-size: 16px;
    76. 

  76.             font-style: normal;
    77. 

  77.             -webkit-font-smoothing: antialiased;
    78. 

  78.             -moz-osx-font-smoothing: grayscale
    79. 

  79.         }
    80. 

  80. 

  81.         .icon-send:before {
    82. 

  82.             content: "\e663"
    83. 

  83.         }
    84. 

  84. 

  85.         .icon-search:before {
    86. 

  86.             content: "\e66f"
    87. 

  87.         }
    88. 

  88. 

  89.         .icon-reload:before {
    90. 

  90.             content: "\e648"
    91. 

  91.         }
    92. 

  92. 

  93.         .icon-pintu:before {
    94. 

  94.             content: "\e61e"
    95. 

  95.         }
    96. 

  96. 

  97.         .icon-ok:before {
    98. 

  98.             content: "\e63d"
    99. 

  99.         }
    100. 

  100. 

  101.         .icon-danger:before {
    102. 

  102.             content: "\e765"
    103. 

  103.         }
    104. 

  104. 

  105.         .icon-info:before {
    106. 

  106.             content: "\f3c2"
    107. 

  107.         }
    108. 

  108. 

  109.         .icon-record:before {
    110. 

  110.             content: "\e615"
    111. 

  111.         }
    112. 

  112. 

  113.         .icon-play:before {
    114. 

  114.             content: "\ef26"
    115. 

  115.         }
    116. 

  116. 

  117.         .icon-zan:before {
    118. 

  118.             content: "\e64e"
    119. 

  119.         }
    120. 

  120. 

  121.         .icon-shouye:before {
    122. 

  122.             content: "\e77e"
    123. 

  123.         }
    124. 

  124. 

  125.         .icon-celebration_piano:before {
    126. 

  126.             content: "\ef25"
    127. 

  127.         }
    128. 

  128. 

  129.         .icon-jianpan:before {
    130. 

  130.             content: "\e604"
    131. 

  131.         }
    132. 

  132. 

  133.         .icon-luyin:before {
    134. 

  134.             content: "\e621"
    135. 

  135.         }
    136. 

  136. 

  137.         .icon-pinglun:before {
    138. 

  138.             content: "\e605"
    139. 

  139.         }
    140. 

  140. 

  141.         .icon-shezhi:before {
    142. 

  142.             content: "\e607"
    143. 

  143.         }
    144. 

  144. 

  145.         .icon-down:before {
    146. 

  146.             content: "\e600"
    147. 

  147.         }
    148. 

  148. 

  149.         .icon-left:before {
    150. 

  150.             content: "\e601"
    151. 

  151.         }
    152. 

  152. 

  153.         .icon-right:before {
    154. 

  154.             content: "\e602"
    155. 

  155.         }
    156. 

  156. 

  157.         .icon-up:before {
    158. 

  158.             content: "\e603"
    159. 

  159.         }
    160. 

  160. 

  161.         .icon-pause:before {
    162. 

  162.             content: "\e718"
    163. 

  163.         }
    164. 

  164. 

  165.         .icon-close:before {
    166. 

  166.             content: "\e650"
    167. 

  167.         }
    168. 

  168. 

  169.         .icon-delete:before {
    170. 

  170.             content: "\e606"
    171. 

  171.         }
    172. 

  172. 

  173.         .icon-edit:before {
    174. 

  174.             content: "\e61d"
    175. 

  175.         }
    176. 

  176. 

  177.         .icon-stop:before {
    178. 

  178.             content: "\e71e"
    179. 

  179.         }
    180. 

  180. 

  181.         .iconfont {
    182. 

  182.             font-size: 1em
    183. 

  183.         }
    184. 

  184. 

  185.         #app,
    186. 

  186.         body,
    187. 

  187.         html {
    188. 

  188.             position: relative;
    189. 

  189.             width: 100%;
    190. 

  190.             height: 100%
    191. 

  191.         }
    192. 

  192. 

  193.         .xw-footer {
    194. 

  194.             display: none
    195. 

  195.         }
    196. 

  196. 

  197.         .xw-header {
    198. 

  198.             height: 50px;
    199. 

  199.             line-height: 50px
    200. 

  200.         }
    201. 

  201. 

  202.         .xw-header>.container {
    203. 

  203.             position: fixed;
    204. 

  204.             height: 50px;
    205. 

  205.             width: 100%;
    206. 

  206.             background-color: hsla(0, 0%, 100%, .867);
    207. 

  207.             box-shadow: 0 0 6px rgba(0, 0, 0, .165);
    208. 

  208.             z-index: 30;
    209. 

  209.             white-space: nowrap
    210. 

  210.         }
    211. 

  211. 

  212.         .xw-header>.container .absolute-user {
    213. 

  213.             position: absolute;
    214. 

  214.             right: 0;
    215. 

  215.             top: 0
    216. 

  216.         }
    217. 

  217. 

  218.         .xw-header>.container .show-list {
    219. 

  219.             position: fixed;
    220. 

  220.             top: 50px;
    221. 

  221.             left: 0;
    222. 

  222.             right: 0;
    223. 

  223.             bottom: 0;
    224. 

  224.             background: hsla(0, 0%, 97.3%, .933);
    225. 

  225.             overflow: auto
    226. 

  226.         }
    227. 

  227. 

  228.         .xw-header>.container .show-list .navbar-nav,
    229. 

  229.         .xw-header>.container .show-list .navbar-nav>li,
    230. 

  230.         .xw-header>.container .show-list .navbar-nav>li>a {
    231. 

  231.             display: block
    232. 

  232.         }
    233. 

  233. 

  234.         .xw-header>.container .more-btn {
    235. 

  235.             position: absolute;
    236. 

  236.             top: 10px;
    237. 

  237.             right: 10px;
    238. 

  238.             width: 32px;
    239. 

  239.             height: 27px;
    240. 

  240.             border: 1px solid #fff;
    241. 

  241.             border-radius: 4px;
    242. 

  242.             cursor: pointer;
    243. 

  243.             background: rgba(0, 102, 0, .333);
    244. 

  244.             transition: background .3s
    245. 

  245.         }
    246. 

  246. 

  247.         .xw-header>.container .more-btn>i {
    248. 

  248.             position: absolute;
    249. 

  249.             left: 6px;
    250. 

  250.             width: 20px;
    251. 

  251.             height: 1px;
    252. 

  252.             display: block;
    253. 

  253.             background: #fff;
    254. 

  254.             transition: all .3s
    255. 

  255.         }
    256. 

  256. 

  257.         .xw-header>.container .more-btn>i.i1 {
    258. 

  258.             top: 6px
    259. 

  259.         }
    260. 

  260. 

  261.         .xw-header>.container .more-btn>i.i2 {
    262. 

  262.             top: 13px
    263. 

  263.         }
    264. 

  264. 

  265.         .xw-header>.container .more-btn>i.i3 {
    266. 

  266.             top: 20px
    267. 

  267.         }
    268. 

  268. 

  269.         .xw-header>.container .more-btn.inshow {
    270. 

  270.             background: rgba(255, 0, 0, .533)
    271. 

  271.         }
    272. 

  272. 

  273.         .xw-header>.container .more-btn.inshow>i.i1 {
    274. 

  274.             top: 12px
    275. 

  275.         }
    276. 

  276. 

  277.         .xw-header>.container .more-btn.inshow>i.i2 {
    278. 

  278.             top: 13px
    279. 

  279.         }
    280. 

  280. 

  281.         .xw-header>.container .more-btn.inshow>i.i3 {
    282. 

  282.             top: 14px
    283. 

  283.         }
    284. 

  284. 

  285.         .header-logo {
    286. 

  286.             margin: 0 20px 0 18px;
    287. 

  287.             display: inline-block;
    288. 

  288.             line-height: 50px;
    289. 

  289.             height: 50px
    290. 

  290.         }
    291. 

  291. 

  292.         .header-logo>a {
    293. 

  293.             position: relative;
    294. 

  294.             top: -2px;
    295. 

  295.             display: inline-block;
    296. 

  296.             color: rgba(0, 0, 0, .933);
    297. 

  297.             font-size: 20px;
    298. 

  298.             padding: 0;
    299. 

  299.             text-shadow: 0 0 1px rgba(0, 0, 0, .533);
    300. 

  300.             letter-spacing: 2px
    301. 

  301.         }
    302. 

  302. 

  303.         .header-logo>a,
    304. 

  304.         .header-logo>a:hover {
    305. 

  305.             text-decoration: none
    306. 

  306.         }
    307. 

  307. 

  308.         ul.header-nav {
    309. 

  309.             display: inline-block;
    310. 

  310.             white-space: nowrap;
    311. 

  311.             vertical-align: top;
    312. 

  312.             margin: 0;
    313. 

  313.             padding: 0
    314. 

  314.         }
    315. 

  315. 

  316.         ul.header-nav>li {
    317. 

  317.             display: inline-block;
    318. 

  318.             margin: 0 1px
    319. 

  319.         }
    320. 

  320. 

  321.         ul.header-nav>li>a {
    322. 

  322.             font-size: 14px;
    323. 

  323.             vertical-align: top;
    324. 

  324.             display: inline-block;
    325. 

  325.             padding: 0 15px;
    326. 

  326.             font-weight: 700;
    327. 

  327.             text-decoration: none;
    328. 

  328.             letter-spacing: 1px;
    329. 

  329.             color: rgba(0, 0, 0, .533);
    330. 

  330.             transition: all .3s
    331. 

  331.         }
    332. 

  332. 

  333.         ul.header-nav>li.active>a,
    334. 

  334.         ul.header-nav>li>a:hover {
    335. 

  335.             background-color: rgba(0, 0, 0, .051)
    336. 

  336.         }
    337. 

  337. 

  338.         .show-list>ul.header-nav,
    339. 

  339.         .show-list>ul.header-nav>li,
    340. 

  340.         .show-list>ul.header-nav>li>a {
    341. 

  341.             display: block
    342. 

  342.         }
    343. 

  343. 

  344.         .header-user {
    345. 

  345.             position: relative;
    346. 

  346.             display: block;
    347. 

  347.             padding: 0 10px;
    348. 

  348.             font-size: 13px
    349. 

  349.         }
    350. 

  350. 

  351.         .header-user>a {
    352. 

  352.             display: block;
    353. 

  353.             color: rgba(0, 0, 0, .533);
    354. 

  354.             text-decoration: none;
    355. 

  355.             padding: 0 5px
    356. 

  356.         }
    357. 

  357. 

  358.         .header-user>.hidden-links {
    359. 

  359.             display: none;
    360. 

  360.             background: #fff;
    361. 

  361.             border: 1px solid rgba(0, 0, 0, .133);
    362. 

  362.             border-radius: 0 0 4px 4px;
    363. 

  363.             box-shadow: 0 0 8px rgba(0, 0, 0, .133)
    364. 

  364.         }
    365. 

  365. 

  366.         .header-user>.hidden-links>a {
    367. 

  367.             display: block;
    368. 

  368.             color: rgba(0, 0, 0, .667);
    369. 

  369.             text-decoration: none;
    370. 

  370.             padding: 0 20px;
    371. 

  371.             border-bottom: 1px solid rgba(0, 0, 0, .067);
    372. 

  372.             line-height: 36px
    373. 

  373.         }
    374. 

  374. 

  375.         .header-user>.hidden-links>a:last-child {
    376. 

  376.             border-bottom: none
    377. 

  377.         }
    378. 

  378. 

  379.         .header-user>.hidden-links>a:hover {
    380. 

  380.             background-color: rgba(0, 0, 0, .051)
    381. 

  381.         }
    382. 

  382. 

  383.         .header-user:hover>.hidden-links {
    384. 

  384.             display: block
    385. 

  385.         }
    386. 

  386. 

  387.         .show-list .hidden-links {
    388. 

  388.             display: block;
    389. 

  389.             box-shadow: none;
    390. 

  390.             border: none
    391. 

  391.         }
    392. 

  392. 

  393.         .show-list .hidden-links>a {
    394. 

  394.             border: none;
    395. 

  395.             line-height: 40px;
    396. 

  396.             padding-left: 40px
    397. 

  397.         }
    398. 

  398. 

  399.         .user-link:hover {
    400. 

  400.             background-color: rgba(0, 0, 0, .051)
    401. 

  401.         }
    402. 

  402. 

  403.         .user-link>span {
    404. 

  404.             display: inline-block;
    405. 

  405.             height: 100%;
    406. 

  406.             vertical-align: top
    407. 

  407.         }
    408. 

  408. 

  409.         .user-link>span.avatar-span {
    410. 

  410.             padding: 13px 8px 0 0
    411. 

  411.         }
    412. 

  412. 

  413.         .user-link .avatar {
    414. 

  414.             display: block;
    415. 

  415.             width: 25px;
    416. 

  416.             height: 25px;
    417. 

  417.             border-radius: 50%
    418. 

  418.         }
    419. 

  419. 

  420.         .user-link>.user-name-span {
    421. 

  421.             max-width: 140px;
    422. 

  422.             white-space: nowrap;
    423. 

  423.             overflow: hidden;
    424. 

  424.             text-overflow: ellipsis
    425. 

  425.         }
    426. 

  426. 

  427.         .piano {
    428. 

  428.             top: 50px;
    429. 

  429.             left: 0;
    430. 

  430.             right: 0;
    431. 

  431.             background-image: url(/assets/img/pianobg.0b535a2.jpg)
    432. 

  432.         }
    433. 

  433. 

  434.         .piano,
    435. 

  435.         .piano>.loading {
    436. 

  436.             position: absolute;
    437. 

  437.             overflow: hidden
    438. 

  438.         }
    439. 

  439. 

  440.         .piano>.loading {
    441. 

  441.             z-index: 20;
    442. 

  442.             top: 50%;
    443. 

  443.             left: 50%;
    444. 

  444.             width: 200px;
    445. 

  445.             background: #fff;
    446. 

  446.             padding: 0 0 10px;
    447. 

  447.             box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    448. 

  448.             border-radius: 5px;
    449. 

  449.             -webkit-transform: translate(-50%, -50%);
    450. 

  450.             transform: translate(-50%, -50%)
    451. 

  451.         }
    452. 

  452. 

  453.         .piano>.loading>.loading-status {
    454. 

  454.             position: relative;
    455. 

  455.             height: 7em;
    456. 

  456.             font-size: 13px
    457. 

  457.         }
    458. 

  458. 

  459.         .piano>.loading>.loading-status .loading-icon {
    460. 

  460.             padding: 3em 0 0
    461. 

  461.         }
    462. 

  462. 

  463.         .piano>.loading>.text {
    464. 

  464.             padding: 20px 0;
    465. 

  465.             font-size: 15px;
    466. 

  466.             text-align: center
    467. 

  467.         }
    468. 

  468. 

  469.         .piano>.loading>.loading-bar {
    470. 

  470.             display: block;
    471. 

  471.             height: 2px;
    472. 

  472.             max-width: 100%;
    473. 

  473.             background: rgba(1, 102, 189, .851)
    474. 

  474.         }
    475. 

  475. 

  476.         .setting-panel {
    477. 

  477.             position: relative
    478. 

  478.         }
    479. 

  479. 

  480.         .setting-panel>.slide-menu {
    481. 

  481.             position: relative;
    482. 

  482.             top: 4px;
    483. 

  483.             z-index: 10;
    484. 

  484.             margin: 0;
    485. 

  485.             padding: 0 15px;
    486. 

  486.             line-height: 32px;
    487. 

  487.             overflow-y: hidden;
    488. 

  488.             font-size: 13px;
    489. 

  489.             white-space: nowrap;
    490. 

  490.             background: #fff;
    491. 

  491.             box-shadow: 0 0 5px rgba(0, 0, 0, .2)
    492. 

  492.         }
    493. 

  493. 

  494.         .setting-panel>.slide-menu>a {
    495. 

  495.             display: inline-block;
    496. 

  496.             padding: 0 12px;
    497. 

  497.             cursor: pointer;
    498. 

  498.             margin: 0 1px;
    499. 

  499.             background-color: hsla(0, 0%, 100%, .333);
    500. 

  500.             transition: background-color .3s;
    501. 

  501.             text-decoration: none;
    502. 

  502.             color: rgba(0, 0, 0, .667);
    503. 

  503.             font-size: 14px
    504. 

  504.         }
    505. 

  505. 

  506.         .setting-panel>.slide-menu>a.active {
    507. 

  507.             position: relative;
    508. 

  508.             background-color: rgba(1, 102, 189, .133);
    509. 

  509.             color: #0166bd;
    510. 

  510.             font-weight: 700;
    511. 

  511.             border: 1px solid rgba(1, 102, 189, .2);
    512. 

  512.             border-width: 0 1px
    513. 

  513.         }
    514. 

  514. 

  515.         .setting-panel>.slide-menu>a:focus,
    516. 

  516.         .setting-panel>.slide-menu>a:hover {
    517. 

  517.             outline: none;
    518. 

  518.             background-color: rgba(1, 102, 189, .133)
    519. 

  519.         }
    520. 

  520. 

  521.         .setting-panel>.slide-menu>a>.iconfont {
    522. 

  522.             padding: 0 3px 0 0
    523. 

  523.         }
    524. 

  524. 

  525.         .setting-panel>.st-cont {
    526. 

  526.             position: absolute;
    527. 

  527.             top: 36px;
    528. 

  528.             left: 0;
    529. 

  529.             bottom: 0;
    530. 

  530.             width: 100%;
    531. 

  531.             overflow-y: auto
    532. 

  532.         }
    533. 

  533. 

  534.         .old-entry {
    535. 

  535.             min-height: 20px
    536. 

  536.         }
    537. 

  537. 

  538.         .old-entry>div {
    539. 

  539.             padding: .6em 0 0;
    540. 

  540.             margin: 0 20px;
    541. 

  541.             text-align: right;
    542. 

  542.             font-size: 13px
    543. 

  543.         }
    544. 

  544. 

  545.         .visit-ct>.logo-ct {
    546. 

  546.             position: relative;
    547. 

  547.             margin: 0
    548. 

  548.         }
    549. 

  549. 

  550.         .visit-ct>.logo-ct>.pn-logo {
    551. 

  551.             position: absolute;
    552. 

  552.             top: 0;
    553. 

  553.             left: 18px;
    554. 

  554.             width: 40px;
    555. 

  555.             max-width: 30%;
    556. 

  556.             overflow: hidden;
    557. 

  557.             border-radius: 110px;
    558. 

  558.             border: 2px solid #fff;
    559. 

  559.             box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    560. 

  560.             margin: 0 auto
    561. 

  561.         }
    562. 

  562. 

  563.         .visit-ct>.logo-ct>.pn-logo:before {
    564. 

  564.             padding-top: 100%;
    565. 

  565.             content: "";
    566. 

  566.             display: block
    567. 

  567.         }
    568. 

  568. 

  569.         .visit-ct>.logo-ct>.pn-logo>img {
    570. 

  570.             position: absolute;
    571. 

  571.             top: 0;
    572. 

  572.             max-height: 100%
    573. 

  573.         }
    574. 

  574. 

  575.         .visit-ct>.logo-ct>.pn-info {
    576. 

  576.             margin: 0 0 0 78px
    577. 

  577.         }
    578. 

  578. 

  579.         .visit-ct>.logo-ct>.pn-info>h1 {
    580. 

  580.             padding: 4px 0 0;
    581. 

  581.             margin: 0;
    582. 

  582.             font-size: 16px;
    583. 

  583.             font-weight: 700
    584. 

  584.         }
    585. 

  585. 

  586.         .visit-ct>.logo-ct>.pn-info>p {
    587. 

  587.             margin: 0;
    588. 

  588.             word-break: break-all
    589. 

  589.         }
    590. 

  590. 

  591.         .visit-ct>.tips-wrapper {
    592. 

  592.             padding: 50px 0 30px;
    593. 

  593.             margin: 0 20px;
    594. 

  594.             font-size: 17px;
    595. 

  595.             min-height: 2em
    596. 

  596.         }
    597. 

  597. 

  598.         .visit-ct>.tips-wrapper>div {
    599. 

  599.             text-align: center;
    600. 

  600.             transition: opacity .3s
    601. 

  601.         }
    602. 

  602. 

  603.         .visit-ct>.tips-wrapper>div.hidden {
    604. 

  604.             opacity: 0
    605. 

  605.         }
    606. 

  606. 

  607.         .visit-ct>.tips-wrapper>div b {
    608. 

  608.             margin: 0 6px;
    609. 

  609.             font-size: 17px;
    610. 

  610.             color: #444
    611. 

  611.         }
    612. 

  612. 

  613.         .visit-ct>.doc-div {
    614. 

  614.             margin: 0 15px;
    615. 

  615.             padding: 10px 0 0
    616. 

  616.         }
    617. 

  617. 

  618.         .visit-ct>.doc-div p {
    619. 

  619.             margin: 8px 0
    620. 

  620.         }
    621. 

  621. 

  622.         .note-bar {
    623. 

  623.             position: absolute;
    624. 

  624.             z-index: 10;
    625. 

  625.             top: 0;
    626. 

  626.             touch-action: none;
    627. 

  627.             cursor: default;
    628. 

  628.             -webkit-user-select: none;
    629. 

  629.             -moz-user-select: none;
    630. 

  630.             -ms-user-select: none;
    631. 

  631.             user-select: none;
    632. 

  632.             pointer-events: none
    633. 

  633.         }
    634. 

  634. 

  635.         .note-bar,
    636. 

  636.         .note-bar>canvas {
    637. 

  637.             width: 100%;
    638. 

  638.             height: 100%
    639. 

  639.         }
    640. 

  640. 

  641.         .keyboard-c {
    642. 

  642.             position: absolute;
    643. 

  643.             bottom: 0;
    644. 

  644.             left: 0;
    645. 

  645.             width: 100%;
    646. 

  646.             padding: 0 0 15px
    647. 

  647.         }
    648. 

  648. 

  649.         .keyboard {
    650. 

  650.             position: absolute;
    651. 

  651.             bottom: 15px;
    652. 

  652.             height: 200px;
    653. 

  653.             touch-action: none;
    654. 

  654.             cursor: default;
    655. 

  655.             overflow: visible;
    656. 

  656.             transition: -webkit-transform .2s;
    657. 

  657.             transition: transform .2s;
    658. 

  658.             transition: transform .2s, -webkit-transform .2s;
    659. 

  659.             -webkit-user-select: none;
    660. 

  660.             -webkit-user-drag: none;
    661. 

  661.             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    662. 

  662.             -webkit-transform-origin: 0 100%;
    663. 

  663.             transform-origin: 0 100%;
    664. 

  664.             font-size: 12px;
    665. 

  665.             box-shadow: 0 0 10px rgba(0, 0, 0, .267)
    666. 

  666.         }
    667. 

  667. 

  668.         .keyboard>.black {
    669. 

  669.             position: absolute;
    670. 

  670.             height: 125px;
    671. 

  671.             margin: 0 0 0 26px;
    672. 

  672.             width: 0;
    673. 

  673.             bottom: 75px;
    674. 

  674.             z-index: 4;
    675. 

  675.             pointer-events: none
    676. 

  676.         }
    677. 

  677. 

  678.         .keyboard>.black>div {
    679. 

  679.             position: absolute;
    680. 

  680.             left: 0;
    681. 

  681.             top: 0;
    682. 

  682.             width: 27px;
    683. 

  683.             height: 100%;
    684. 

  684.             background-color: #444;
    685. 

  685.             border: 1px solid rgba(0, 0, 0, .533);
    686. 

  686.             border-radius: 3px;
    687. 

  687.             color: #fff;
    688. 

  688.             text-align: center
    689. 

  689.         }
    690. 

  690. 

  691.         .keyboard>.black>div.act {
    692. 

  692.             background-color: #c783b2;
    693. 

  693.             border-color: rgba(0, 0, 0, .533)
    694. 

  694.         }
    695. 

  695. 

  696.         .keyboard>.white {
    697. 

  697.             height: 200px;
    698. 

  698.             white-space: nowrap;
    699. 

  699.             bottom: 0;
    700. 

  700.             margin: 0 0 0 1px;
    701. 

  701.             z-index: 2;
    702. 

  702.             pointer-events: none
    703. 

  703.         }
    704. 

  704. 

  705.         .keyboard>.white>div {
    706. 

  706.             position: relative;
    707. 

  707.             display: inline-block;
    708. 

  708.             width: 41px;
    709. 

  709.             height: 100%;
    710. 

  710.             background-color: #fff;
    711. 

  711.             border: 1px solid rgba(0, 0, 0, .267);
    712. 

  712.             margin: 0 0 0 -1px;
    713. 

  713.             box-sizing: border-box;
    714. 

  714.             border-radius: 4px;
    715. 

  715.             text-align: center;
    716. 

  716.             color: #000
    717. 

  717.         }
    718. 

  718. 

  719.         .keyboard>.white>div.act {
    720. 

  720.             background-color: rgba(173, 60, 138, .6)
    721. 

  721.         }
    722. 

  722. 

  723.         .keyboard>.white>div>div.pn {
    724. 

  724.             position: absolute;
    725. 

  725.             width: 100%;
    726. 

  726.             bottom: 10px;
    727. 

  727.             font-size: 12px
    728. 

  728.         }
    729. 

  729. 

  730.         .keyboard>.white>div>div.pn>div.sub,
    731. 

  731.         .keyboard>.white>div>div.pn>div.sup {
    732. 

  732.             display: inline-block;
    733. 

  733.             margin: 0 2px
    734. 

  734.         }
    735. 

  735. 

  736.         .keyboard>.white>div>div.pn>div.sub {
    737. 

  737.             -webkit-transform: scale(.9) translateY(5px);
    738. 

  738.             transform: scale(.9) translateY(5px)
    739. 

  739.         }
    740. 

  740. 

  741.         .keyboard>.white>div>div.pn>div.sup {
    742. 

  742.             -webkit-transform: scale(.9) translateY(-5px);
    743. 

  743.             transform: scale(.9) translateY(-5px)
    744. 

  744.         }
    745. 

  745. 

  746.         .keyboard.hidenum>div>div>span,
    747. 

  747.         .keyboard.hidepname>div.white>div>div {
    748. 

  748.             display: none
    749. 

  749.         }
    750. 

  750. 

  751.         .keyboard>.center-c {
    752. 

  752.             position: absolute;
    753. 

  753.             bottom: 35px;
    754. 

  754.             left: 925px;
    755. 

  755.             font-size: 12px;
    756. 

  756.             color: #a43983;
    757. 

  757.             z-index: 5;
    758. 

  758.             pointer-events: none
    759. 

  759.         }
    760. 

  760. 

  761.         .xw-footer {
    762. 

  762.             background: rgba(0, 0, 0, .012);
    763. 

  763.             border-top: 1px dashed rgba(0, 0, 0, .122)
    764. 

  764.         }
    765. 

  765. 

  766.         .xw-footer>.container {
    767. 

  767.             margin: 0 10px;
    768. 

  768.             padding: 0 0 12px
    769. 

  769.         }
    770. 

  770. 

  771.         .xw-footer>.container>p {
    772. 

  772.             font-size: 14px;
    773. 

  773.             margin: 0;
    774. 

  774.             padding: 15px 0
    775. 

  775.         }
    776. 

  776. 

  777.         .xw-footer>.container>p>span {
    778. 

  778.             margin: 0 10px
    779. 

  779.         }
    780. 

  780.     </style>
    781. 

  781.     <script src="./hm.js"></script>
    782. 

  782.     <script type="text/javascript" async="" defer="" src="./matomo.js"></script>
    783. 

  783.     <script charset="utf-8" src="./vendors.js"></script>
    784. 

  784.     <script charset="utf-8" src="./comps.js"></script>
    785. 

  785.     <script charset="utf-8" src="./piano_new.js"></script>
    786. 

  786.     <style type="text/css">
    787. 

  787.         .xw-msg-fixed {
    788. 

  788.             position: fixed;
    789. 

  789.             left: 0;
    790. 

  790.             width: 100%;
    791. 

  791.             overflow: visible;
    792. 

  792.             top: .5em;
    793. 

  793.             z-index: 200;
    794. 

  794.             font-size: 15px
    795. 

  795.         }
    796. 

  796. 

  797.         .xw-msg-fixed>.msg-list {
    798. 

  798.             position: absolute;
    799. 

  799.             top: 0;
    800. 

  800.             left: -100%;
    801. 

  801.             width: 100%;
    802. 

  802.             height: 0;
    803. 

  803.             text-align: center
    804. 

  804.         }
    805. 

  805. 

  806.         .xw-msg-fixed>.msg-list>.msg-list-item {
    807. 

  807.             position: relative;
    808. 

  808.             display: block;
    809. 

  809.             width: 100%;
    810. 

  810.             transition: all .6s;
    811. 

  811.             -webkit-transform-origin: 150% top;
    812. 

  812.             transform-origin: 150% top
    813. 

  813.         }
    814. 

  814. 

  815.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper {
    816. 

  816.             position: relative;
    817. 

  817.             left: 40px;
    818. 

  818.             margin: 0 20px
    819. 

  819.         }
    820. 

  820. 

  821.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content {
    822. 

  822.             position: relative;
    823. 

  823.             left: 100%;
    824. 

  824.             display: inline-block;
    825. 

  825.             max-width: 100%;
    826. 

  826.             margin: .5em 0;
    827. 

  827.             background: #fff;
    828. 

  828.             line-height: 1.6em;
    829. 

  829.             padding: .4em 2.6em .4em .8em;
    830. 

  830.             border-radius: .2em;
    831. 

  831.             box-shadow: 0 0 5px rgba(0, 0, 0, .2)
    832. 

  832.         }
    833. 

  833. 

  834.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>p {
    835. 

  835.             word-break: break-all;
    836. 

  836.             margin: 0
    837. 

  837.         }
    838. 

  838. 

  839.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>p>span.icon {
    840. 

  840.             display: inline-block;
    841. 

  841.             color: #fff;
    842. 

  842.             background: rgba(0, 0, 0, .333);
    843. 

  843.             font-size: .8em;
    844. 

  844.             margin: 0 .1em 0 0;
    845. 

  845.             width: 1.5em;
    846. 

  846.             height: 1.5em;
    847. 

  847.             line-height: 1.5;
    848. 

  848.             border-radius: 50%
    849. 

  849.         }
    850. 

  850. 

  851.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>p>span.icon.success {
    852. 

  852.             background-color: #31e08f
    853. 

  853.         }
    854. 

  854. 

  855.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>p>span.icon.info {
    856. 

  856.             background-color: #267cc6
    857. 

  857.         }
    858. 

  858. 

  859.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>p>span.icon.error {
    860. 

  860.             background-color: #fd5353
    861. 

  861.         }
    862. 

  862. 

  863.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>p>span.icon.warn {
    864. 

  864.             background-color: #f1bd48
    865. 

  865.         }
    866. 

  866. 

  867.         .xw-msg-fixed>.msg-list>.msg-list-item>.msg-content-wrapper>.msg-content>.msg-close {
    868. 

  868.             position: absolute;
    869. 

  869.             top: 50%;
    870. 

  870.             right: 0;
    871. 

  871.             margin: -1em 0 0;
    872. 

  872.             cursor: pointer;
    873. 

  873.             padding: .2em .8em .2em .2em
    874. 

  874.         }
    875. 

  875. 

  876.         .xw-msg-fixed>.msg-list .msg-list-enter {
    877. 

  877.             opacity: 0;
    878. 

  878.             -webkit-transform: translateY(100px) scale(.2);
    879. 

  879.             transform: translateY(100px) scale(.2)
    880. 

  880.         }
    881. 

  881. 

  882.         .xw-msg-fixed>.msg-list .msg-list-leave-to {
    883. 

  883.             opacity: 0;
    884. 

  884.             -webkit-transform: translateY(-100px) scale(.2);
    885. 

  885.             transform: translateY(-100px) scale(.2)
    886. 

  886.         }
    887. 

  887. 

  888.         .xw-msg-fixed>.msg-list .msg-list-leave-active {
    889. 

  889.             position: absolute
    890. 

  890.         }
    891. 

  891.     </style>
    892. 

  892.     <style type="text/css">
    893. 

  893.         .xw-button {
    894. 

  894.             position: relative;
    895. 

  895.             display: inline-block;
    896. 

  896.             background-color: #fff;
    897. 

  897.             border: 1px solid #d9d9d9;
    898. 

  898.             border-radius: .3em;
    899. 

  899.             color: rgba(0, 0, 0, .651);
    900. 

  900.             padding: 0 .8em;
    901. 

  901.             font-weight: 400;
    902. 

  902.             text-align: center;
    903. 

  903.             line-height: 2;
    904. 

  904.             font-size: inherit;
    905. 

  905.             cursor: pointer;
    906. 

  906.             touch-action: manipulation;
    907. 

  907.             -webkit-user-select: none;
    908. 

  908.             -moz-user-select: none;
    909. 

  909.             -ms-user-select: none;
    910. 

  910.             user-select: none;
    911. 

  911.             transition: all .3s
    912. 

  912.         }
    913. 

  913. 

  914.         .xw-button.select,
    915. 

  915.         .xw-button:focus,
    916. 

  916.         .xw-button:hover {
    917. 

  917.             color: #267cc6;
    918. 

  918.             border-color: #267cc6;
    919. 

  919.             box-shadow: 0 0 .3em rgba(0, 0, 0, .2);
    920. 

  920.             z-index: 5
    921. 

  921.         }
    922. 

  922. 

  923.         .xw-button:focus {
    924. 

  924.             outline: 1px dashed -webkit-focus-ring-color
    925. 

  925.         }
    926. 

  926. 

  927.         .xw-button:active {
    928. 

  928.             color: #1e639e;
    929. 

  929.             border-color: #1e639e
    930. 

  930.         }
    931. 

  931. 

  932.         .xw-button.primary {
    933. 

  933.             color: #fff;
    934. 

  934.             background-color: #267cc6
    935. 

  935.         }
    936. 

  936. 

  937.         .xw-button.primary.select,
    938. 

  938.         .xw-button.primary:hover {
    939. 

  939.             background-color: #2e95ee;
    940. 

  940.             border-color: #267cc6
    941. 

  941.         }
    942. 

  942. 

  943.         .xw-button.primary:focus {
    944. 

  944.             background-color: #2e95ee
    945. 

  945.         }
    946. 

  946. 

  947.         .xw-button.primary:active {
    948. 

  948.             background-color: #1e639e
    949. 

  949.         }
    950. 

  950. 

  951.         .xw-button.success {
    952. 

  952.             color: #fff;
    953. 

  953.             background-color: #31e08f
    954. 

  954.         }
    955. 

  955. 

  956.         .xw-button.success.select,
    957. 

  957.         .xw-button.success:focus,
    958. 

  958.         .xw-button.success:hover {
    959. 

  959.             background-color: #3bffac;
    960. 

  960.             border-color: #31e08f
    961. 

  961.         }
    962. 

  962. 

  963.         .xw-button.success:active {
    964. 

  964.             background-color: #27b372;
    965. 

  965.             border-color: #31e08f
    966. 

  966.         }
    967. 

  967. 

  968.         .xw-button.danger,
    969. 

  969.         .xw-button.error {
    970. 

  970.             color: #fff;
    971. 

  971.             background-color: #fd5353
    972. 

  972.         }
    973. 

  973. 

  974.         .xw-button.danger.select,
    975. 

  975.         .xw-button.danger:hover,
    976. 

  976.         .xw-button.error.select,
    977. 

  977.         .xw-button.error:hover {
    978. 

  978.             background-color: #ff6464;
    979. 

  979.             border-color: #fd5353
    980. 

  980.         }
    981. 

  981. 

  982.         .xw-button.danger:focus,
    983. 

  983.         .xw-button.error:focus {
    984. 

  984.             background-color: #ff6464;
    985. 

  985.             border-color: #ff6464
    986. 

  986.         }
    987. 

  987. 

  988.         .xw-button.danger:active,
    989. 

  989.         .xw-button.error:active {
    990. 

  990.             background-color: #d74747;
    991. 

  991.             border-color: #d74747
    992. 

  992.         }
    993. 

  993. 

  994.         .xw-button.disable {
    995. 

  995.             background-color: #f3f4f5;
    996. 

  996.             color: rgba(0, 0, 0, .333);
    997. 

  997.             cursor: not-allowed
    998. 

  998.         }
    999. 

  999. 

  1000.         .xw-button.disable.select,
    1001. 

  1001.         .xw-button.disable:focus,
    1002. 

  1002.         .xw-button.disable:hover {
    1003. 

  1003.             color: rgba(0, 0, 0, .333);
    1004. 

  1004.             border-color: #d9d9d9;
    1005. 

  1005.             box-shadow: none
    1006. 

  1006.         }
    1007. 

  1007. 

  1008.         .xw-button.dashed {
    1009. 

  1009.             color: rgba(0, 0, 0, .651);
    1010. 

  1010.             border-style: dashed
    1011. 

  1011.         }
    1012. 

  1012. 

  1013.         .xw-button.dashed.select,
    1014. 

  1014.         .xw-button.dashed:hover {
    1015. 

  1015.             border-color: #2e95ee;
    1016. 

  1016.             color: #267cc6
    1017. 

  1017.         }
    1018. 

  1018. 

  1019.         .xw-button.dashed:focus {
    1020. 

  1020.             border-color: #2e95ee;
    1021. 

  1021.             color: #2e95ee
    1022. 

  1022.         }
    1023. 

  1023. 

  1024.         .xw-button.dashed:active {
    1025. 

  1025.             border-color: #1e639e;
    1026. 

  1026.             color: #1e639e
    1027. 

  1027.         }
    1028. 

  1028. 

  1029.         .xw-button.link {
    1030. 

  1030.             background-color: transparent;
    1031. 

  1031.             border-color: transparent;
    1032. 

  1032.             color: #267cc6
    1033. 

  1033.         }
    1034. 

  1034.     </style>
    1035. 

  1035.     <style type="text/css">
    1036. 

  1036.         .xw-input {
    1037. 

  1037.             margin: 0 2px;
    1038. 

  1038.             border: 1px solid rgba(0, 0, 0, .333);
    1039. 

  1039.             border-radius: 3px;
    1040. 

  1040.             padding: 4px 8px
    1041. 

  1041.         }
    1042. 

  1042. 

  1043.         .pc-keyboard-save {
    1044. 

  1044.             padding: 0
    1045. 

  1045.         }
    1046. 

  1046. 

  1047.         .pc-keyboard-save>.t-save-tips {
    1048. 

  1048.             margin: 1em 0
    1049. 

  1049.         }
    1050. 

  1050. 

  1051.         .pc-keyboard-save>.title {
    1052. 

  1052.             margin: 0 0 1em
    1053. 

  1053.         }
    1054. 

  1054. 

  1055.         .pc-keyboard-save .save-list {
    1056. 

  1056.             position: relative;
    1057. 

  1057.             padding: 0 0 1em
    1058. 

  1058.         }
    1059. 

  1059. 

  1060.         .pc-keyboard-save .save-list .save-list-item {
    1061. 

  1061.             display: inline-block;
    1062. 

  1062.             margin: 3px;
    1063. 

  1063.             transition: all .6s
    1064. 

  1064.         }
    1065. 

  1065. 

  1066.         .pc-keyboard-save .save-list .save-list-item>div.cont {
    1067. 

  1067.             position: relative;
    1068. 

  1068.             padding: 10px 12px;
    1069. 

  1069.             width: 280px;
    1070. 

  1070.             border-radius: 3px;
    1071. 

  1071.             box-shadow: 0 0 6px rgba(0, 0, 0, .267);
    1072. 

  1072.             background-color: #fff
    1073. 

  1073.         }
    1074. 

  1074. 

  1075.         .pc-keyboard-save .save-list .save-list-item>div.cont>.name {
    1076. 

  1076.             font-weight: 700;
    1077. 

  1077.             white-space: nowrap;
    1078. 

  1078.             overflow: hidden;
    1079. 

  1079.             text-overflow: ellipsis;
    1080. 

  1080.             margin: 0 50px 5px 0
    1081. 

  1081.         }
    1082. 

  1082. 

  1083.         .pc-keyboard-save .save-list .save-list-item>div.cont>.time {
    1084. 

  1084.             font-size: 12px
    1085. 

  1085.         }
    1086. 

  1086. 

  1087.         .pc-keyboard-save .save-list .save-list-item>div.cont>.btns {
    1088. 

  1088.             position: absolute;
    1089. 

  1089.             bottom: 5px;
    1090. 

  1090.             right: 3px;
    1091. 

  1091.             text-align: center
    1092. 

  1092.         }
    1093. 

  1093. 

  1094.         .pc-keyboard-save .save-list .save-list-item>div.cont>.btns>.xw-button {
    1095. 

  1095.             font-size: 12px
    1096. 

  1096.         }
    1097. 

  1097. 

  1098.         .pc-keyboard-save .save-list-enter {
    1099. 

  1099.             opacity: 0;
    1100. 

  1100.             -webkit-transform: translateY(-100px) scale(.5);
    1101. 

  1101.             transform: translateY(-100px) scale(.5)
    1102. 

  1102.         }
    1103. 

  1103. 

  1104.         .pc-keyboard-save .save-list-leave-to {
    1105. 

  1105.             opacity: 0;
    1106. 

  1106.             -webkit-transform: scale(.2) translateY(-100px) rotate(30deg);
    1107. 

  1107.             transform: scale(.2) translateY(-100px) rotate(30deg)
    1108. 

  1108.         }
    1109. 

  1109. 

  1110.         .pc-keyboard-save .save-list-leave-active {
    1111. 

  1111.             position: absolute
    1112. 

  1112.         }
    1113. 

  1113.     </style>
    1114. 

  1114.     <style type="text/css"></style>
    1115. 

  1115.     <style type="text/css">
    1116. 

  1116.         .faq-item {
    1117. 

  1117.             background: #fff;
    1118. 

  1118.             padding: 16px 0 8px;
    1119. 

  1119.             border-radius: 5px;
    1120. 

  1120.             box-shadow: 0 0 5px rgba(0, 0, 0, .267);
    1121. 

  1121.             margin: 0 0 1em
    1122. 

  1122.         }
    1123. 

  1123. 

  1124.         .faq-item>header {
    1125. 

  1125.             position: relative;
    1126. 

  1126.             font-size: 16px;
    1127. 

  1127.             padding: 0 10px 0 20px;
    1128. 

  1128.             color: #000
    1129. 

  1129.         }
    1130. 

  1130. 

  1131.         .faq-item>header:before {
    1132. 

  1132.             position: absolute;
    1133. 

  1133.             top: 8px;
    1134. 

  1134.             left: 0;
    1135. 

  1135.             content: "";
    1136. 

  1136.             display: inline-block;
    1137. 

  1137.             width: 14px;
    1138. 

  1138.             height: 9px;
    1139. 

  1139.             background: #2479c1
    1140. 

  1140.         }
    1141. 

  1141. 

  1142.         .faq-item>p {
    1143. 

  1143.             margin: 5px 10px 5px 20px
    1144. 

  1144.         }
    1145. 

  1145.     </style>
    1146. 

  1146.     <style type="text/css">
    1147. 

  1147.         .pc-kbd-ct {
    1148. 

  1148.             padding: 30px 5px 15px;
    1149. 

  1149.             -webkit-user-select: none;
    1150. 

  1150.             -moz-user-select: none;
    1151. 

  1151.             -ms-user-select: none;
    1152. 

  1152.             user-select: none;
    1153. 

  1153.             width: 1272px;
    1154. 

  1154.             margin: 0 auto
    1155. 

  1155.         }
    1156. 

  1156. 

  1157.         .pc-kbd-ct>.pc-kbd-row {
    1158. 

  1158.             display: block;
    1159. 

  1159.             white-space: nowrap;
    1160. 

  1160.             height: 52px;
    1161. 

  1161.             margin: 0 0 5px
    1162. 

  1162.         }
    1163. 

  1163. 

  1164.         .pc-kbd-ct>.pc-kbd-row>div {
    1165. 

  1165.             display: inline-block;
    1166. 

  1166.             width: 50px;
    1167. 

  1167.             height: 50px;
    1168. 

  1168.             margin: 0 5px 0 0;
    1169. 

  1169.             background: #fff;
    1170. 

  1170.             border: 1px solid rgba(0, 0, 0, .302);
    1171. 

  1171.             border-radius: 4px;
    1172. 

  1172.             line-height: 1;
    1173. 

  1173.             vertical-align: top
    1174. 

  1174.         }
    1175. 

  1175. 

  1176.         .pc-kbd-ct>.pc-kbd-row>div.disable {
    1177. 

  1177.             background: #7d97ad;
    1178. 

  1178.             border: 1px solid rgba(0, 0, 0, .2)
    1179. 

  1179.         }
    1180. 

  1180. 

  1181.         .pc-kbd-ct>.pc-kbd-row>div.d {
    1182. 

  1182.             background-color: rgba(199, 39, 76, .502)
    1183. 

  1183.         }
    1184. 

  1184. 

  1185.         .pc-kbd-ct>.pc-kbd-row>div.selec {
    1186. 

  1186.             -webkit-animation: shanshan 1s infinite;
    1187. 

  1187.             animation: shanshan 1s infinite
    1188. 

  1188.         }
    1189. 

  1189. 

  1190.         .pc-kbd-ct>.pc-kbd-row>div>.key-name {
    1191. 

  1191.             padding: 5px 8px 0;
    1192. 

  1192.             pointer-events: none
    1193. 

  1193.         }
    1194. 

  1194. 

  1195.         .pc-kbd-ct>.pc-kbd-row>div>.key-rep {
    1196. 

  1196.             font-size: 12px;
    1197. 

  1197.             padding: 6px 0 0;
    1198. 

  1198.             color: rgba(16, 10, 255, .8);
    1199. 

  1199.             font-weight: 700;
    1200. 

  1200.             text-align: center;
    1201. 

  1201.             pointer-events: none
    1202. 

  1202.         }
    1203. 

  1203. 

  1204.         .pc-kbd-set {
    1205. 

  1205.             width: 1272px;
    1206. 

  1206.             margin: 0 auto;
    1207. 

  1207.             padding: 0 0 50px
    1208. 

  1208.         }
    1209. 

  1209. 

  1210.         .pc-kbd-set>.row-title {
    1211. 

  1211.             margin: 0 10px .5em;
    1212. 

  1212.             font-size: 16px;
    1213. 

  1213.             font-weight: 700
    1214. 

  1214.         }
    1215. 

  1215. 

  1216.         .pc-kbd-set>.row {
    1217. 

  1217.             margin: 0 10px
    1218. 

  1218.         }
    1219. 

  1219. 

  1220.         .pc-kbd-set>.row.faq-item {
    1221. 

  1221.             margin: 0 10px 1em
    1222. 

  1222.         }
    1223. 

  1223. 

  1224.         .pc-kbd-set .xw-button {
    1225. 

  1225.             font-size: 14px;
    1226. 

  1226.             margin: 0 .25em
    1227. 

  1227.         }
    1228. 

  1228. 

  1229.         .pc-kbd-set .select-key {
    1230. 

  1230.             display: inline-block;
    1231. 

  1231.             width: 50px;
    1232. 

  1232.             height: 50px;
    1233. 

  1233.             margin: 0 5px 0 0;
    1234. 

  1234.             background: rgba(0, 0, 0, .733);
    1235. 

  1235.             border: 1px solid rgba(0, 0, 0, .302);
    1236. 

  1236.             border-radius: 4px;
    1237. 

  1237.             line-height: 1;
    1238. 

  1238.             vertical-align: top
    1239. 

  1239.         }
    1240. 

  1240. 

  1241.         .pc-kbd-set .select-key>.key-name {
    1242. 

  1242.             padding: 5px 8px 0;
    1243. 

  1243.             pointer-events: none;
    1244. 

  1244.             font-weight: 700;
    1245. 

  1245.             color: #fff
    1246. 

  1246.         }
    1247. 

  1247. 

  1248.         .pc-kbd-set .edit-container {
    1249. 

  1249.             margin: 5px 0 0;
    1250. 

  1250.             border: 1px solid rgba(0, 0, 0, .2);
    1251. 

  1251.             padding: 3px 16px 20px;
    1252. 

  1252.             background: #fff
    1253. 

  1253.         }
    1254. 

  1254. 

  1255.         .pc-kbd-set .edit-container>.btn-group {
    1256. 

  1256.             margin: 10px 0 0
    1257. 

  1257.         }
    1258. 

  1258. 

  1259.         @-webkit-keyframes shanshan {
    1260. 

  1260.             0% {
    1261. 

  1261.                 border: 1px solid rgba(16, 10, 255, .8);
    1262. 

  1262.                 color: rgba(16, 10, 255, .8);
    1263. 

  1263.                 background-color: rgba(16, 10, 255, .2)
    1264. 

  1264.             }
    1265. 

  1265. 

  1266.             49% {
    1267. 

  1267.                 border: 1px solid rgba(16, 10, 255, .8);
    1268. 

  1268.                 color: rgba(16, 10, 255, .8);
    1269. 

  1269.                 background-color: rgba(16, 10, 255, .2)
    1270. 

  1270.             }
    1271. 

  1271. 

  1272.             50% {
    1273. 

  1273.                 border: 1px solid rgba(0, 0, 0, .302);
    1274. 

  1274.                 color: #000
    1275. 

  1275.             }
    1276. 

  1276. 

  1277.             to {
    1278. 

  1278.                 border: 1px solid rgba(0, 0, 0, .302);
    1279. 

  1279.                 color: #000
    1280. 

  1280.             }
    1281. 

  1281.         }
    1282. 

  1282. 

  1283.         @keyframes shanshan {
    1284. 

  1284.             0% {
    1285. 

  1285.                 border: 1px solid rgba(16, 10, 255, .8);
    1286. 

  1286.                 color: rgba(16, 10, 255, .8);
    1287. 

  1287.                 background-color: rgba(16, 10, 255, .2)
    1288. 

  1288.             }
    1289. 

  1289. 

  1290.             49% {
    1291. 

  1291.                 border: 1px solid rgba(16, 10, 255, .8);
    1292. 

  1292.                 color: rgba(16, 10, 255, .8);
    1293. 

  1293.                 background-color: rgba(16, 10, 255, .2)
    1294. 

  1294.             }
    1295. 

  1295. 

  1296.             50% {
    1297. 

  1297.                 border: 1px solid rgba(0, 0, 0, .302);
    1298. 

  1298.                 color: #000
    1299. 

  1299.             }
    1300. 

  1300. 

  1301.             to {
    1302. 

  1302.                 border: 1px solid rgba(0, 0, 0, .302);
    1303. 

  1303.                 color: #000
    1304. 

  1304.             }
    1305. 

  1305.         }
    1306. 

  1306.     </style>
    1307. 

  1307.     <style type="text/css">
    1308. 

  1308.         .loading-fade-enter-active,
    1309. 

  1309.         .loading-fade-leave-active {
    1310. 

  1310.             transition: opacity .3s
    1311. 

  1311.         }
    1312. 

  1312. 

  1313.         .loading-fade-enter,
    1314. 

  1314.         .loading-fade-leave-to {
    1315. 

  1315.             opacity: 0
    1316. 

  1316.         }
    1317. 

  1317. 

  1318.         .xw-loading {
    1319. 

  1319.             position: absolute;
    1320. 

  1320.             top: 0;
    1321. 

  1321.             left: 0;
    1322. 

  1322.             right: 0;
    1323. 

  1323.             bottom: 0;
    1324. 

  1324.             z-index: 100;
    1325. 

  1325.             background: hsla(0, 0%, 100%, .733);
    1326. 

  1326.             transition: all .3s;
    1327. 

  1327.             text-align: center
    1328. 

  1328.         }
    1329. 

  1329. 

  1330.         .xw-loading>.loading-icon {
    1331. 

  1331.             padding: 4em 0 0;
    1332. 

  1332.             pointer-events: none
    1333. 

  1333.         }
    1334. 

  1334. 

  1335.         .xw-loading>.loading-icon>i {
    1336. 

  1336.             display: inline-block;
    1337. 

  1337.             width: 1.1em;
    1338. 

  1338.             height: 1.1em;
    1339. 

  1339.             background-color: #267cc6;
    1340. 

  1340.             margin: 0 .2em;
    1341. 

  1341.             border-radius: 50%;
    1342. 

  1342.             -webkit-transform-origin: 50%;
    1343. 

  1343.             transform-origin: 50%;
    1344. 

  1344.             -webkit-transform: scale(.1);
    1345. 

  1345.             transform: scale(.1);
    1346. 

  1346.             -webkit-animation: loading_icon 2s infinite;
    1347. 

  1347.             animation: loading_icon 2s infinite
    1348. 

  1348.         }
    1349. 

  1349. 

  1350.         .xw-loading>.custom-text {
    1351. 

  1351.             padding: .5em 0;
    1352. 

  1352.             font-size: .9em
    1353. 

  1353.         }
    1354. 

  1354. 

  1355.         .xw-loading>.loading-icon>i:first-child {
    1356. 

  1356.             -webkit-animation-delay: 0s;
    1357. 

  1357.             animation-delay: 0s
    1358. 

  1358.         }
    1359. 

  1359. 

  1360.         .xw-loading>.loading-icon>i:nth-child(2) {
    1361. 

  1361.             -webkit-animation-delay: .25s;
    1362. 

  1362.             animation-delay: .25s
    1363. 

  1363.         }
    1364. 

  1364. 

  1365.         .xw-loading>.loading-icon>i:nth-child(3) {
    1366. 

  1366.             -webkit-animation-delay: .5s;
    1367. 

  1367.             animation-delay: .5s
    1368. 

  1368.         }
    1369. 

  1369. 

  1370.         .xw-loading>.loading-icon>i:nth-child(4) {
    1371. 

  1371.             -webkit-animation-delay: .75s;
    1372. 

  1372.             animation-delay: .75s
    1373. 

  1373.         }
    1374. 

  1374. 

  1375.         .xw-loading>.loading-icon>i:nth-child(5) {
    1376. 

  1376.             -webkit-animation-delay: 1s;
    1377. 

  1377.             animation-delay: 1s
    1378. 

  1378.         }
    1379. 

  1379. 

  1380.         .xw-loading>.loading-icon>i:nth-child(6) {
    1381. 

  1381.             -webkit-animation-delay: 1.25s;
    1382. 

  1382.             animation-delay: 1.25s
    1383. 

  1383.         }
    1384. 

  1384. 

  1385.         .xw-loading>.loading-icon>i:nth-child(7) {
    1386. 

  1386.             -webkit-animation-delay: 1.5s;
    1387. 

  1387.             animation-delay: 1.5s
    1388. 

  1388.         }
    1389. 

  1389. 

  1390.         .xw-loading>.loading-icon>i:nth-child(8) {
    1391. 

  1391.             -webkit-animation-delay: 1.75s;
    1392. 

  1392.             animation-delay: 1.75s
    1393. 

  1393.         }
    1394. 

  1394. 

  1395.         .xw-loading>.loading-icon>i:nth-child(9) {
    1396. 

  1396.             -webkit-animation-delay: 2s;
    1397. 

  1397.             animation-delay: 2s
    1398. 

  1398.         }
    1399. 

  1399. 

  1400.         .xw-loading>.loading-icon>i:nth-child(10) {
    1401. 

  1401.             -webkit-animation-delay: 2.25s;
    1402. 

  1402.             animation-delay: 2.25s
    1403. 

  1403.         }
    1404. 

  1404. 

  1405.         @-webkit-keyframes loading_icon {
    1406. 

  1406.             0% {
    1407. 

  1407.                 -webkit-transform: scale(.1) translate(0);
    1408. 

  1408.                 transform: scale(.1) translate(0)
    1409. 

  1409.             }
    1410. 

  1410. 

  1411.             50% {
    1412. 

  1412.                 -webkit-transform: scale(1) translateY(-1em);
    1413. 

  1413.                 transform: scale(1) translateY(-1em)
    1414. 

  1414.             }
    1415. 

  1415. 

  1416.             to {
    1417. 

  1417.                 -webkit-transform: scale(.1) translate(0);
    1418. 

  1418.                 transform: scale(.1) translate(0)
    1419. 

  1419.             }
    1420. 

  1420.         }
    1421. 

  1421. 

  1422.         @keyframes loading_icon {
    1423. 

  1423.             0% {
    1424. 

  1424.                 -webkit-transform: scale(.1) translate(0);
    1425. 

  1425.                 transform: scale(.1) translate(0)
    1426. 

  1426.             }
    1427. 

  1427. 

  1428.             50% {
    1429. 

  1429.                 -webkit-transform: scale(1) translateY(-1em);
    1430. 

  1430.                 transform: scale(1) translateY(-1em)
    1431. 

  1431.             }
    1432. 

  1432. 

  1433.             to {
    1434. 

  1434.                 -webkit-transform: scale(.1) translate(0);
    1435. 

  1435.                 transform: scale(.1) translate(0)
    1436. 

  1436.             }
    1437. 

  1437.         }
    1438. 

  1438.     </style>
    1439. 

  1439.     <script charset="utf-8" src="./midi-file.js"></script>
    1440. 

  1440.     <style type="text/css">
    1441. 

  1441.         .xw-button-group .xw-button {
    1442. 

  1442.             border-radius: 0;
    1443. 

  1443.             margin-left: -1px
    1444. 

  1444.         }
    1445. 

  1445. 

  1446.         .xw-button-group :first-child.xw-button {
    1447. 

  1447.             border-radius: .3em 0 0 .3em;
    1448. 

  1448.             margin-left: 0
    1449. 

  1449.         }
    1450. 

  1450. 

  1451.         .xw-button-group :last-child.xw-button {
    1452. 

  1452.             border-radius: 0 .3em .3em 0
    1453. 

  1453.         }
    1454. 

  1454.     </style>
    1455. 

  1455.     <style type="text/css">
    1456. 

  1456.         .panel-midifile {
    1457. 

  1457.             margin: 0 1em;
    1458. 

  1458.             font-size: 14px
    1459. 

  1459.         }
    1460. 

  1460. 

  1461.         .panel-midifile>.player-wp {
    1462. 

  1462.             max-width: 500px;
    1463. 

  1463.             padding: 2em 0;
    1464. 

  1464.             margin: 0 auto
    1465. 

  1465.         }
    1466. 

  1466. 

  1467.         .panel-midifile>.player-wp>.file-upload {
    1468. 

  1468.             position: relative;
    1469. 

  1469.             min-height: 120px;
    1470. 

  1470.             border: 1px dashed rgba(0, 0, 0, .267);
    1471. 

  1471.             border-radius: 5px;
    1472. 

  1472.             background: rgba(245, 246, 247, .667);
    1473. 

  1473.             cursor: pointer;
    1474. 

  1474.             -webkit-user-select: none;
    1475. 

  1475.             -moz-user-select: none;
    1476. 

  1476.             -ms-user-select: none;
    1477. 

  1477.             user-select: none
    1478. 

  1478.         }
    1479. 

  1479. 

  1480.         .panel-midifile>.player-wp>.file-upload:hover {
    1481. 

  1481.             background-color: rgba(242, 243, 244, .667)
    1482. 

  1482.         }
    1483. 

  1483. 

  1484.         .panel-midifile>.player-wp>.file-upload:active {
    1485. 

  1485.             background-color: rgba(239, 240, 241, .667)
    1486. 

  1486.         }
    1487. 

  1487. 

  1488.         .panel-midifile>.player-wp>.file-upload>.tips-text {
    1489. 

  1489.             position: absolute;
    1490. 

  1490.             z-index: 1;
    1491. 

  1491.             font-size: 14px;
    1492. 

  1492.             top: 50%;
    1493. 

  1493.             left: 0;
    1494. 

  1494.             width: 100%;
    1495. 

  1495.             text-align: center;
    1496. 

  1496.             color: rgba(0, 0, 0, .533);
    1497. 

  1497.             font-weight: 700;
    1498. 

  1498.             text-shadow: 0 0 2px hsla(0, 0%, 100%, .533);
    1499. 

  1499.             -webkit-transform: translateY(-50%);
    1500. 

  1500.             transform: translateY(-50%)
    1501. 

  1501.         }
    1502. 

  1502. 

  1503.         .panel-midifile>.player-wp>.player-control {
    1504. 

  1504.             padding: 1em 0
    1505. 

  1505.         }
    1506. 

  1506. 

  1507.         .panel-midifile>.player-wp>.player-control>.play-btns {
    1508. 

  1508.             text-align: center
    1509. 

  1509.         }
    1510. 

  1510. 

  1511.         .panel-midifile>.player-wp>.player-control>.play-info {
    1512. 

  1512.             text-align: center;
    1513. 

  1513.             padding: .8em 0
    1514. 

  1514.         }
    1515. 

  1515. 

  1516.         .panel-midifile>.player-wp>.player-control>.meta-info>div {
    1517. 

  1517.             margin: 0 0 0 50px;
    1518. 

  1518.             word-break: break-all
    1519. 

  1519.         }
    1520. 

  1520. 

  1521.         .panel-midifile>.player-wp>.player-control>.meta-info>div>.name {
    1522. 

  1522.             font-size: 12px;
    1523. 

  1523.             color: rgba(0, 0, 0, .467);
    1524. 

  1524.             margin: 0 0 0 -50px
    1525. 

  1525.         }
    1526. 

  1526. 

  1527.         .panel-midifile>.player-wp>.player-control>.meta-info>div>.value {
    1528. 

  1528.             margin: 0 0 0 1em;
    1529. 

  1529.             font-size: 14px;
    1530. 

  1530.             color: rgba(0, 0, 0, .733)
    1531. 

  1531.         }
    1532. 

  1532.     </style>
    1533. 

  1533. </head>
    1534. 

  1534. 

  1535. <body data-gr-c-s-loaded="true" class="vsc-initialized" style="">
    1536. 

  1536.     <div id="app">
    1537. 

  1537.         <div class="piano" style="top: 50px; bottom: 0px;">
    1538. 

  1538.             <div class="setting-panel" style="height: 449.717px;">
    1539. 

  1539.                 <div class="rit-btn"></div>
    1540. 

  1540.                 <menu class="slide-menu"><a tabindex="0" href="javascript:void(0)" class="">
    1541. 

  1541.                         <!----><span>感谢访问</span></a><a tabindex="0" href="javascript:void(0)" class=""><i
    1542. 

  1542.                             class="iconfont icon-shezhi"></i><span>设置</span></a><a tabindex="0"
    1543. 

  1543.                         href="javascript:void(0)" class=""><i
    1544. 

  1544.                             class="iconfont icon-jianpan"></i><span>电脑键盘映射</span></a><a tabindex="0"
    1545. 

  1545.                         href="javascript:void(0)" class="active">
    1546. 

  1546.                         <!----><span>MIDI播放</span></a><a tabindex="0" href="javascript:void(0)" class=""><i
    1547. 

  1547.                             class="iconfont icon-pinglun"></i><span>吐槽专区</span></a></menu>
    1548. 

  1548.                 <section class="st-cont">
    1549. 

  1549.                     <!---->
    1550. 

  1550.                     <!---->
    1551. 

  1551.                     <!---->
    1552. 

  1552.                     <div class="panel-midifile">
    1553. 

  1553.                         <div class="player-wp">
    1554. 

  1554.                             <div class="file-upload">
    1555. 

  1555.                                 <div class="tips-text">
    1556. 

  1556.                                 </div>
    1557. 

  1557.                             </div>
    1558. 

  1558.                             <div>
    1559. 

  1559.                             </div>
    1560. 

  1560.                             <div class="player-control">
    1561. 

  1561.                                 <div class="xw-button-group play-btns"><button type="button" class="xw-button"><i
    1562. 

  1562.                                             class="iconfont icon-play"></i>
    1563. 

  1563.                                     </button><button type="button" class="xw-button"><i class="iconfont icon-pause"></i>
    1564. 

  1564.                                     </button><button type="button" class="xw-button"><i class="iconfont icon-stop"></i>
    1565. 

  1565.                                     </button></div>
    1566. 

  1566.                                 <div class="play-info"><span class="time">
    1567. 

  1567.                                         <!---->
    1568. 

  1568.                                         0 / 794692
    1569. 

  1569.                                     </span></div>
    1570. 

  1570.                                 <div class="meta-info">
    1571. 

  1571.                                     <div><span class="name">
    1572. 

  1572.                                         </span><span class="value">
    1573. 

  1573.                                         </span></div>
    1574. 

  1574.                                     <div><span class="name">
    1575. 

  1575.                                         </span><span class="value">
    1576. 

  1576.                                         </span></div>
    1577. 

  1577.                                     <div><span class="name">
    1578. 

  1578.                                         </span><span class="value">
    1579. 

  1579.                                         </span></div>
    1580. 

  1580.                                     <div><span class="name">
    1581. 

  1581.                                         </span><span class="value">
    1582. 

  1582.                                         </span></div>
    1583. 

  1583.                                     <div><span class="name">
    1584. 

  1584.                                         </span><span class="value">
    1585. 

  1585.                                         </span></div>
    1586. 

  1586.                                 </div>
    1587. 

  1587.                             </div>
    1588. 

  1588.                         </div>
    1589. 

  1589.                     </div>
    1590. 

  1590.                     <!---->
    1591. 

  1591.                 </section>
    1592. 

  1592.             </div>
    1593. 

  1593.             <div class="note-bar" style="height: 449.717px;"><canvas width="1366" height="449"></canvas></div>
    1594. 

  1594.             <div class="keyboard-c">
    1595. 

  1595.                 <div class="keyboard hidenum" style="transform: scale(0.656415) translateX(0px);">
    1596. 

  1596.                     <div class="black">
    1597. 

  1597.                         <div data-key="2" style="left:2px;" class=""><span>2</span></div>
    1598. 

  1598.                         <div data-key="5" style="left:78px;" class=""><span>5</span></div>
    1599. 

  1599.                         <div data-key="7" style="left:122px;" class=""><span>7</span></div>
    1600. 

  1600.                         <div data-key="10" style="left:198px;"><span>10</span></div>
    1601. 

  1601.                         <div data-key="12" style="left:240px;" class=""><span>12</span></div>
    1602. 

  1602.                         <div data-key="14" style="left:282px;" class=""><span>14</span></div>
    1603. 

  1603.                         <div data-key="17" style="left:358px;" class=""><span>17</span></div>
    1604. 

  1604.                         <div data-key="19" style="left:402px;" class=""><span>19</span></div>
    1605. 

  1605.                         <div data-key="22" style="left:478px;" class=""><span>22</span></div>
    1606. 

  1606.                         <div data-key="24" style="left:520px;" class=""><span>24</span></div>
    1607. 

  1607.                         <div data-key="26" style="left:562px;" class=""><span>26</span></div>
    1608. 

  1608.                         <div data-key="29" style="left:638px;" class=""><span>29</span></div>
    1609. 

  1609.                         <div data-key="31" style="left:682px;" class=""><span>31</span></div>
    1610. 

  1610.                         <div data-key="34" style="left:758px;" class=""><span>34</span></div>
    1611. 

  1611.                         <div data-key="36" style="left:800px;" class=""><span>36</span></div>
    1612. 

  1612.                         <div data-key="38" style="left:842px;" class=""><span>38</span></div>
    1613. 

  1613.                         <div data-key="41" style="left:918px;" class=""><span>41</span></div>
    1614. 

  1614.                         <div data-key="43" style="left:962px;" class=""><span>43</span></div>
    1615. 

  1615.                         <div data-key="46" style="left:1038px;" class=""><span>46</span></div>
    1616. 

  1616.                         <div data-key="48" style="left:1080px;" class=""><span>48</span></div>
    1617. 

  1617.                         <div data-key="50" style="left:1122px;" class=""><span>50</span></div>
    1618. 

  1618.                         <div data-key="53" style="left:1198px;" class=""><span>53</span></div>
    1619. 

  1619.                         <div data-key="55" style="left:1242px;" class=""><span>55</span></div>
    1620. 

  1620.                         <div data-key="58" style="left:1318px;" class=""><span>58</span></div>
    1621. 

  1621.                         <div data-key="60" style="left:1360px;" class=""><span>60</span></div>
    1622. 

  1622.                         <div data-key="62" style="left:1402px;" class=""><span>62</span></div>
    1623. 

  1623.                         <div data-key="65" style="left:1478px;" class=""><span>65</span></div>
    1624. 

  1624.                         <div data-key="67" style="left:1522px;" class=""><span>67</span></div>
    1625. 

  1625.                         <div data-key="70" style="left:1598px;"><span>70</span></div>
    1626. 

  1626.                         <div data-key="72" style="left:1640px;" class=""><span>72</span></div>
    1627. 

  1627.                         <div data-key="74" style="left:1682px;" class=""><span>74</span></div>
    1628. 

  1628.                         <div data-key="77" style="left:1758px;"><span>77</span></div>
    1629. 

  1629.                         <div data-key="79" style="left:1802px;"><span>79</span></div>
    1630. 

  1630.                         <div data-key="82" style="left:1878px;"><span>82</span></div>
    1631. 

  1631.                         <div data-key="84" style="left:1920px;"><span>84</span></div>
    1632. 

  1632.                         <div data-key="86" style="left:1962px;"><span>86</span></div>
    1633. 

  1633.                     </div>
    1634. 

  1634.                     <div class="white">
    1635. 

  1635.                         <div data-key="1"><span>1</span>
    1636. 

  1636.                             <div class="pn">A<div class="sub">2</div>
    1637. 

  1637.                             </div>
    1638. 

  1638.                         </div>
    1639. 

  1639.                         <div data-key="3"><span>3</span>
    1640. 

  1640.                             <div class="pn">B<div class="sub">2</div>
    1641. 

  1641.                             </div>
    1642. 

  1642.                         </div>
    1643. 

  1643.                         <div data-key="4" class=""><span>4</span>
    1644. 

  1644.                             <div class="pn">C<div class="sub">1</div>
    1645. 

  1645.                             </div>
    1646. 

  1646.                         </div>
    1647. 

  1647.                         <div data-key="6" class=""><span>6</span>
    1648. 

  1648.                             <div class="pn">D<div class="sub">1</div>
    1649. 

  1649.                             </div>
    1650. 

  1650.                         </div>
    1651. 

  1651.                         <div data-key="8"><span>8</span>
    1652. 

  1652.                             <div class="pn">E<div class="sub">1</div>
    1653. 

  1653.                             </div>
    1654. 

  1654.                         </div>
    1655. 

  1655.                         <div data-key="9" class=""><span>9</span>
    1656. 

  1656.                             <div class="pn">F<div class="sub">1</div>
    1657. 

  1657.                             </div>
    1658. 

  1658.                         </div>
    1659. 

  1659.                         <div data-key="11" class=""><span>11</span>
    1660. 

  1660.                             <div class="pn">G<div class="sub">1</div>
    1661. 

  1661.                             </div>
    1662. 

  1662.                         </div>
    1663. 

  1663.                         <div data-key="13" class=""><span>13</span>
    1664. 

  1664.                             <div class="pn">A<div class="sub">1</div>
    1665. 

  1665.                             </div>
    1666. 

  1666.                         </div>
    1667. 

  1667.                         <div data-key="15" class=""><span>15</span>
    1668. 

  1668.                             <div class="pn">B<div class="sub">1</div>
    1669. 

  1669.                             </div>
    1670. 

  1670.                         </div>
    1671. 

  1671.                         <div data-key="16" class=""><span>16</span>
    1672. 

  1672.                             <div class="pn">C</div>
    1673. 

  1673.                         </div>
    1674. 

  1674.                         <div data-key="18" class=""><span>18</span>
    1675. 

  1675.                             <div class="pn">D</div>
    1676. 

  1676.                         </div>
    1677. 

  1677.                         <div data-key="20" class=""><span>20</span>
    1678. 

  1678.                             <div class="pn">E</div>
    1679. 

  1679.                         </div>
    1680. 

  1680.                         <div data-key="21" class=""><span>21</span>
    1681. 

  1681.                             <div class="pn">F</div>
    1682. 

  1682.                         </div>
    1683. 

  1683.                         <div data-key="23" class=""><span>23</span>
    1684. 

  1684.                             <div class="pn">G</div>
    1685. 

  1685.                         </div>
    1686. 

  1686.                         <div data-key="25" class=""><span>25</span>
    1687. 

  1687.                             <div class="pn">A</div>
    1688. 

  1688.                         </div>
    1689. 

  1689.                         <div data-key="27" class=""><span>27</span>
    1690. 

  1690.                             <div class="pn">B</div>
    1691. 

  1691.                         </div>
    1692. 

  1692.                         <div data-key="28" class=""><span>28</span>
    1693. 

  1693.                             <div class="pn">c</div>
    1694. 

  1694.                         </div>
    1695. 

  1695.                         <div data-key="30" class=""><span>30</span>
    1696. 

  1696.                             <div class="pn">d</div>
    1697. 

  1697.                         </div>
    1698. 

  1698.                         <div data-key="32"><span>32</span>
    1699. 

  1699.                             <div class="pn">e</div>
    1700. 

  1700.                         </div>
    1701. 

  1701.                         <div data-key="33" class=""><span>33</span>
    1702. 

  1702.                             <div class="pn">f</div>
    1703. 

  1703.                         </div>
    1704. 

  1704.                         <div data-key="35" class=""><span>35</span>
    1705. 

  1705.                             <div class="pn">g</div>
    1706. 

  1706.                         </div>
    1707. 

  1707.                         <div data-key="37" class=""><span>37</span>
    1708. 

  1708.                             <div class="pn">a</div>
    1709. 

  1709.                         </div>
    1710. 

  1710.                         <div data-key="39" class=""><span>39</span>
    1711. 

  1711.                             <div class="pn">b</div>
    1712. 

  1712.                         </div>
    1713. 

  1713.                         <div data-key="40" class=""><span>40</span>
    1714. 

  1714.                             <div class="pn">c<div class="sup">1</div>
    1715. 

  1715.                             </div>
    1716. 

  1716.                         </div>
    1717. 

  1717.                         <div data-key="42" class=""><span>42</span>
    1718. 

  1718.                             <div class="pn">d<div class="sup">1</div>
    1719. 

  1719.                             </div>
    1720. 

  1720.                         </div>
    1721. 

  1721.                         <div data-key="44" class=""><span>44</span>
    1722. 

  1722.                             <div class="pn">e<div class="sup">1</div>
    1723. 

  1723.                             </div>
    1724. 

  1724.                         </div>
    1725. 

  1725.                         <div data-key="45" class=""><span>45</span>
    1726. 

  1726.                             <div class="pn">f<div class="sup">1</div>
    1727. 

  1727.                             </div>
    1728. 

  1728.                         </div>
    1729. 

  1729.                         <div data-key="47" class=""><span>47</span>
    1730. 

  1730.                             <div class="pn">g<div class="sup">1</div>
    1731. 

  1731.                             </div>
    1732. 

  1732.                         </div>
    1733. 

  1733.                         <div data-key="49" class=""><span>49</span>
    1734. 

  1734.                             <div class="pn">a<div class="sup">1</div>
    1735. 

  1735.                             </div>
    1736. 

  1736.                         </div>
    1737. 

  1737.                         <div data-key="51" class=""><span>51</span>
    1738. 

  1738.                             <div class="pn">b<div class="sup">1</div>
    1739. 

  1739.                             </div>
    1740. 

  1740.                         </div>
    1741. 

  1741.                         <div data-key="52" class=""><span>52</span>
    1742. 

  1742.                             <div class="pn">c<div class="sup">2</div>
    1743. 

  1743.                             </div>
    1744. 

  1744.                         </div>
    1745. 

  1745.                         <div data-key="54" class=""><span>54</span>
    1746. 

  1746.                             <div class="pn">d<div class="sup">2</div>
    1747. 

  1747.                             </div>
    1748. 

  1748.                         </div>
    1749. 

  1749.                         <div data-key="56" class=""><span>56</span>
    1750. 

  1750.                             <div class="pn">e<div class="sup">2</div>
    1751. 

  1751.                             </div>
    1752. 

  1752.                         </div>
    1753. 

  1753.                         <div data-key="57" class=""><span>57</span>
    1754. 

  1754.                             <div class="pn">f<div class="sup">2</div>
    1755. 

  1755.                             </div>
    1756. 

  1756.                         </div>
    1757. 

  1757.                         <div data-key="59" class=""><span>59</span>
    1758. 

  1758.                             <div class="pn">g<div class="sup">2</div>
    1759. 

  1759.                             </div>
    1760. 

  1760.                         </div>
    1761. 

  1761.                         <div data-key="61" class=""><span>61</span>
    1762. 

  1762.                             <div class="pn">a<div class="sup">2</div>
    1763. 

  1763.                             </div>
    1764. 

  1764.                         </div>
    1765. 

  1765.                         <div data-key="63" class=""><span>63</span>
    1766. 

  1766.                             <div class="pn">b<div class="sup">2</div>
    1767. 

  1767.                             </div>
    1768. 

  1768.                         </div>
    1769. 

  1769.                         <div data-key="64" class=""><span>64</span>
    1770. 

  1770.                             <div class="pn">c<div class="sup">3</div>
    1771. 

  1771.                             </div>
    1772. 

  1772.                         </div>
    1773. 

  1773.                         <div data-key="66" class=""><span>66</span>
    1774. 

  1774.                             <div class="pn">d<div class="sup">3</div>
    1775. 

  1775.                             </div>
    1776. 

  1776.                         </div>
    1777. 

  1777.                         <div data-key="68" class=""><span>68</span>
    1778. 

  1778.                             <div class="pn">e<div class="sup">3</div>
    1779. 

  1779.                             </div>
    1780. 

  1780.                         </div>
    1781. 

  1781.                         <div data-key="69" class=""><span>69</span>
    1782. 

  1782.                             <div class="pn">f<div class="sup">3</div>
    1783. 

  1783.                             </div>
    1784. 

  1784.                         </div>
    1785. 

  1785.                         <div data-key="71" class=""><span>71</span>
    1786. 

  1786.                             <div class="pn">g<div class="sup">3</div>
    1787. 

  1787.                             </div>
    1788. 

  1788.                         </div>
    1789. 

  1789.                         <div data-key="73" class=""><span>73</span>
    1790. 

  1790.                             <div class="pn">a<div class="sup">3</div>
    1791. 

  1791.                             </div>
    1792. 

  1792.                         </div>
    1793. 

  1793.                         <div data-key="75"><span>75</span>
    1794. 

  1794.                             <div class="pn">b<div class="sup">3</div>
    1795. 

  1795.                             </div>
    1796. 

  1796.                         </div>
    1797. 

  1797.                         <div data-key="76" class=""><span>76</span>
    1798. 

  1798.                             <div class="pn">c<div class="sup">4</div>
    1799. 

  1799.                             </div>
    1800. 

  1800.                         </div>
    1801. 

  1801.                         <div data-key="78"><span>78</span>
    1802. 

  1802.                             <div class="pn">d<div class="sup">4</div>
    1803. 

  1803.                             </div>
    1804. 

  1804.                         </div>
    1805. 

  1805.                         <div data-key="80"><span>80</span>
    1806. 

  1806.                             <div class="pn">e<div class="sup">4</div>
    1807. 

  1807.                             </div>
    1808. 

  1808.                         </div>
    1809. 

  1809.                         <div data-key="81"><span>81</span>
    1810. 

  1810.                             <div class="pn">f<div class="sup">4</div>
    1811. 

  1811.                             </div>
    1812. 

  1812.                         </div>
    1813. 

  1813.                         <div data-key="83"><span>83</span>
    1814. 

  1814.                             <div class="pn">g<div class="sup">4</div>
    1815. 

  1815.                             </div>
    1816. 

  1816.                         </div>
    1817. 

  1817.                         <div data-key="85"><span>85</span>
    1818. 

  1818.                             <div class="pn">a<div class="sup">4</div>
    1819. 

  1819.                             </div>
    1820. 

  1820.                         </div>
    1821. 

  1821.                         <div data-key="87"><span>87</span>
    1822. 

  1822.                             <div class="pn">b<div class="sup">4</div>
    1823. 

  1823.                             </div>
    1824. 

  1824.                         </div>
    1825. 

  1825.                         <div data-key="88"><span>88</span>
    1826. 

  1826.                             <div class="pn">c<div class="sup">5</div>
    1827. 

  1827.                             </div>
    1828. 

  1828.                         </div>
    1829. 

  1829.                     </div>
    1830. 

  1830.                     <div class="center-c" style="display:;">中央C</div>
    1831. 

  1831.                 </div>
    1832. 

  1832.             </div>
    1833. 

  1833.             <!---->
    1834. 

  1834.             <!---->
    1835. 

  1835.         </div>
    1836. 

  1836.         <footer class="xw-footer">
    1837. 

  1837.             <div class="container text-center">
    1838. 

  1838.                 <p><span>© WWW.XIWNN.COM</span><span><span>粤ICP备</span><a href="http://www.beian.miit.gov.cn/"
    1839. 

  1839.                             target="_blank">16015361</a><span>号</span></span></p>
    1840. 

  1840.             </div>
    1841. 

  1841.         </footer>
    1842. 

  1842.     </div>
    1843. 

  1843.     <script>var _SSR_PAGE_ = "piano/new" || "piano/new";</script>
    1844. 

  1844.     <script>var __USER__ = null;</script>
    1845. 

  1845.     <script type="text/javascript" src="./main.js"></script>
    1846. 

  1846.     <div class="xw-msg-fixed">
    1847. 

  1847.         <div class="msg-list"></div>
    1848. 

  1848.     </div>
    1849. 

  1849. </body>
    1850. 

  1850. 

  1851. </html>
    1852.