specialty.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>专业版K线</title>
  6. <script src="__PUBLIC__/Home/js/jqplus.js"></script>
  7. <script src="__PUBLIC__/Home/js/highstock.js"></script>
  8. <style type="text/css">
  9. body {
  10. overflow: hidden; margin: 0px; font-size: 14px; font-family: Arial, sans; line-height: 18px;
  11. }
  12. a {
  13. color: #0D86FF; text-decoration: none; cursor: pointer;
  14. }
  15. html,body {
  16. height: 100%;
  17. }
  18. .green {
  19. color: green;
  20. }
  21. .red {
  22. color: red;
  23. }
  24. .ab {
  25. position: absolute; left: 0px; top: 0px;
  26. }
  27. ul.horiz {
  28. list-style: none; padding: 0px; margin: 0px; padding-left: 6px;
  29. }
  30. ul.horiz>li {
  31. display: inline-block; *display: inline; *zoom: 1; vertical-align: baseline; margin-right: 12px;
  32. }
  33. .price {
  34. margin-right: 60px;
  35. }
  36. ul.horiz>li.sep {
  37. height: 16px; vertical-align: middle;
  38. }
  39. ul.horiz li.subsep {
  40. height: 16px; vertical-align: middle; margin-right: 6px;
  41. }
  42. ul.horiz li.addthis {
  43. position: absolute; right: 0px; margin-top: 6px; vertical-align: top; width: 190px;
  44. }
  45. ul.horiz li.last {
  46. margin-right: 0px;
  47. }
  48. ul.horiz input,ul.horiz select,ul.horiz button {
  49. vertical-align: middle;
  50. }
  51. #nav {
  52. left: 0px; top: 0px; border-bottom: 1px solid #333; font-size: 12px;
  53. }
  54. #nav .logo {
  55. line-height: 32px; font-size: 14px; font-weight: bold; font-family: Arial, sans; margin-left: 0px;
  56. }
  57. #nav .logo a {
  58. margin: 0px;
  59. }
  60. #nav .horiz {
  61. height: 32 px;
  62. }
  63. #control {
  64. font-size: 12px; font-weight: bold; border-bottom: 1px solid #333;
  65. }
  66. #control select,#control input,#control button {
  67. font-size: 12px; font-family: serif; outline: none;
  68. }
  69. #sidebar_outer {
  70. float: right; font-family: Consolas, monospace; height: 100%; font-size: 14px; line-height: 13px;
  71. }
  72. #sidebar {
  73. height: 100%; width: 220px; border-left: 1px solid #333; padding-left: 6px;
  74. }
  75. #sidebar #market {
  76. font-size: 14px; font-weight: bold; text-align: center; height: 18px; line-height: 18px; font-family: Arial, sans; padding: 6px;
  77. }
  78. #sidebar #price {
  79. text-align: center; font-size: 16px; font-weight: bold; height: 28px; line-height: 28px;
  80. }
  81. #sidebar #trades {
  82. overflow-y: auto; text-align: left;
  83. }
  84. #sidebar #trades span {
  85. font-size: 1.6em; font-weight: bold;
  86. }
  87. #sidebar #trades .row {
  88. display: block;
  89. }
  90. #middlebar {
  91. width: 120px; height: 100%; padding: 6px; border-right: 1px solid #333; text-align: center; float: right;
  92. }
  93. #main {
  94. font-family: Consolas, monospace; font-size: 12px; line-height: 14px; overflow: hidden;
  95. }
  96. #main #wrapper {
  97. height: 100%; position: relative; overflow: hidden;
  98. }
  99. #main .hide_cursor canvas,#main .hide_cursor #chart_info {
  100. cursor: none;
  101. }
  102. #footer {
  103. border-top: 1px solid #333; line-height: 32px;
  104. }
  105. #assist {
  106. overflow-y: auto; position: absolute; right: 0px; bottom: 0px; width: 320px; height: 32px; padding: 0px 4px; border-left: 1px solid #333; border-top: 1px solid #333; font-size: 11px; line-height: 16px; color: #333; background-color: rgba(255, 255, 255, 0.8);
  107. }
  108. #info {
  109. position: absolute; font-size: 10px; font-family: Consolas, monospace; color: #999999;
  110. }
  111. #leftbar_outer {
  112. float: right; height: 100%;
  113. }
  114. #leftbar_outer #leftbar {
  115. border-left: 1px solid #333;
  116. }
  117. #leftbar_outer .gg160x600 {
  118. width: 160px; padding: 6px;
  119. }
  120. #close_ad {
  121. text-align: center; padding: 2em;
  122. }
  123. #leftbar {
  124. height: 100%; font-size: 12px; position: relative; font-family: Consolas, monospace; border-right: 1px solid #ccc;
  125. }
  126. #date {
  127. position: absolute; bottom: 0px; width: 100%; height: 16px; line-height: 16px; text-align: center; border-top: 1px solid #ccc;
  128. }
  129. #periods li.period {
  130. cursor: pointer; color: #0D86FF;
  131. }
  132. #periods li.selected {
  133. color: #F80;
  134. }
  135. .gg468x60 {
  136. position: absolute; right: 0px; top: 0px; z-index: 100; width: 468px; height: 60px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc;
  137. }
  138. .gg200x200 {
  139. height: 200px; overflow: hidden; margin-top: 6px; border-top: 1px solid #333; padding-top: 6px;
  140. }
  141. #asks,#bids {
  142. width: 300px;
  143. }
  144. #gasks,#gbids {
  145. width: 80px;
  146. }
  147. .new {
  148. background-color: #333;
  149. }
  150. #orderbook {
  151. line-height: 0px;
  152. }
  153. #orderbook .orderbook {
  154. overflow: hidden;
  155. }
  156. #orderbook #asks,#orderbook #gasks,#orderbook #bids,#orderbook #gbids {
  157. height: 195px; position: relative; display: inline-block; *display: inline; *zoom: 1; overflow: hidden;
  158. }
  159. #orderbook .table {
  160. position: absolute; border-collapse: collapse; padding: 0px; margin: 0px;
  161. }
  162. #orderbook .table .row {
  163. padding: 0px; margin: 0px; height: 16px; line-height: 16px;
  164. }
  165. #orderbook .remove {
  166. color: #333;
  167. }
  168. #orderbook .remove g {
  169. color: #333;
  170. }
  171. #orderbook #asks .table,#orderbook #gasks .table {
  172. bottom: 0px;
  173. }
  174. #orderbook #bids .table,#orderbook #gbids .table {
  175. top: 0px;
  176. }
  177. #before_trades {
  178. padding-bottom: 6px; border-bottom-width: 1px; margin-bottom: 6px;
  179. }
  180. g {
  181. color: #CCC;
  182. }
  183. h {
  184. color: white;
  185. }
  186. .donate {
  187. text-align: center; font-size: 12px;
  188. }
  189. .markets_outer {
  190. position: absolute; top: 0px; left: 0px; width: 100%; text-align: center;
  191. }
  192. #market_status {
  193. font-size: 11px;
  194. }
  195. #market_status label {
  196. font-weight: normal; margin: 0px 6px;
  197. }
  198. abbr {
  199. cursor: help; font-weight: normal; border-bottom: 1px dotted #333;
  200. }
  201. #qr {
  202. border: 1px solid black; left: 0px; top: 0px; padding: 8px; background-color: white; position: absolute; z-index: 105; display: none;
  203. }
  204. .donate {
  205. font-family: Consolas, monospace;
  206. }
  207. #settings {
  208. width: 60%; left: 20%; top: 20%; position: absolute; background-color: rgba(255, 255, 255, 0.6); border-radius: 5px; box-shadow: 0px 0px 3px #666; padding: 12px; display: none;
  209. }
  210. #settings input {
  211. width: 2em; vertical-align: top;
  212. }
  213. #settings h3 {
  214. border-bottom: 1px solid #333;
  215. }
  216. #settings dl dt,#settings dl dd {
  217. display: inline-block; *display: inline; *zoom: 1; margin: 0px; padding: 0px; margin-right: 6px;
  218. }
  219. #settings #close_settings {
  220. text-align: center; margin: 12px;
  221. }
  222. button,select {
  223. cursor: pointer;
  224. }
  225. #main,#footer {
  226. display: none;
  227. }
  228. #loading,.notify {
  229. position: absolute; top: 20%; width: 100%; font-size: 18px; text-align: center; z-index: 99;
  230. }
  231. #loading .inner,.notify .inner {
  232. margin-top: -32px; line-height: 32px; display: inline-block; *display: inline; *zoom: 1; padding: 12px 24px; border: 1px solid #333; border-radius: 5px; background-color: rgba(10, 10, 10, 0.8);
  233. }
  234. .dark {
  235. background-color: #0A0A0A; color: #CCC;
  236. }
  237. .dark #trades {
  238. scrollbar-basecolor: #333; scrollbar-highlight-color: #CCC; scrollbar-shadow-color: #666;
  239. }
  240. .dark :-webkit-scrollbar {
  241. background-color: #333;
  242. }
  243. .dark g {
  244. /*color: #666;*/
  245. }
  246. .dark h {
  247. visibility: hidden;
  248. }
  249. .dark a {
  250. color: #6BF;
  251. }
  252. .dark a:hover {
  253. text-decoration: underline;
  254. }
  255. .dark #close_ad span {
  256. cursor: pointer; color: #6BF;
  257. }
  258. .dark .green {
  259. color: #0C0;
  260. }
  261. .dark .red {
  262. color: #C00;
  263. }
  264. .dark a.active {
  265. color: #FC9;
  266. }
  267. .dark a.active.grey {
  268. color: #CCA37A;
  269. }
  270. .dark #periods li.period {
  271. color: #6BF;
  272. }
  273. .dark #periods li.selected a {
  274. color: #FB6;
  275. }
  276. .dark a.selected {
  277. color: #FB6;
  278. }
  279. .dark #sidebar .green {
  280. color: #6C6;
  281. }
  282. .dark #sidebar .red {
  283. color: #C66;
  284. }
  285. .dark #sidebar #price.green {
  286. color: #0F0;
  287. }
  288. .dark #sidebar #price.red {
  289. color: #F00;
  290. }
  291. .dark #assist {
  292. background-color: rgba(10, 10, 10, 0.8); font-weight: normal; color: #999;
  293. }
  294. .dark #nav,.dark #control,.dark #before_trades {
  295. border-bottom: 1px solid #333;
  296. }
  297. .dark #leftbar {
  298. border-right: 1px solid #333;
  299. }
  300. .dark #date {
  301. border-top: 1px solid #333;
  302. }
  303. .dark select,.dark button,.dark option {
  304. background-color: #333; color: #CCC; border: 1px solid #999;
  305. }
  306. .dark .gg468x60 {
  307. background-color: #0A0A0A; border-left: 1px solid #333; border-bottom: 1px solid #333;
  308. }
  309. .dark .markets_outer .markets {
  310. background-color: #222; border: 1px solid #666;
  311. }
  312. .dark li.sep,.dark li.subsep {
  313. border-right: 1px solid #333;
  314. }
  315. .dark #qr {
  316. border: 1px solid #333; background-color: rgba(10, 10, 10, 0.8);
  317. }
  318. .dark #settings {
  319. background-color: rgba(10, 10, 10, 0.6);
  320. }
  321. .dark abbr {
  322. border-bottom: 1px dotted #CCC;
  323. }
  324. .dark .external .green {
  325. color: #6C6;
  326. }
  327. .dark .external .red {
  328. color: #C66;
  329. }
  330. .dark ::-webkit-scrollbar {
  331. width: 16px; height: 13px;
  332. }
  333. .dark ::-webkit-scrollbar-button:start:decrement,.dark ::-webkit-scrollbar-button:end:increment {
  334. height: 0px; width: 0px;
  335. }
  336. .dark ::-webkit-scrollbar-track-piece {
  337. background-color: #222; border: 1px solid #555;
  338. }
  339. .dark ::-webkit-scrollbar-thumb:vertical {
  340. height: 50px; background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333)); border: 1px solid #0d0d0d; border-top: 1px solid #666666; border-left: 1px solid #666666;
  341. }
  342. .dark ::-webkit-scrollbar-thumb:horizontal {
  343. width: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333)); border: 1px solid #1f1f1f; border-top: 1px solid #666666; border-left: 1px solid #666666;
  344. }
  345. .dark .help {
  346. background-color: #0A0A0A; border: 1px solid #333;
  347. }
  348. .dark .grey {
  349. color: grey;
  350. }
  351. .dark .ticker_red {
  352. background-color: #F66; color: #0A0A0A;
  353. }
  354. .dark .ticker_green {
  355. background-color: #6C6; color: #0A0A0A;
  356. }
  357. .light {
  358. background-color: #FFF; color: #333;
  359. }
  360. .light g {
  361. color: #AAA;
  362. }
  363. .light h {
  364. visibility: hidden;
  365. }
  366. .light a {
  367. color: #0D86FF;
  368. }
  369. .light a:hover {
  370. text-decoration: underline;
  371. }
  372. .light #close_ad span {
  373. color: #0D86FF; cursor: pointer;
  374. }
  375. .light .green {
  376. color: green;
  377. }
  378. .light .red {
  379. color: red;
  380. }
  381. .light #periods li.period {
  382. color: #0D86FF;
  383. }
  384. .light #periods li.selected a {
  385. color: #F80;
  386. }
  387. .light a.selected {
  388. color: #F80;
  389. }
  390. .light .active {
  391. color: #F80;
  392. }
  393. .light a.active.grey {
  394. color: #CC6D00;
  395. }
  396. .light #assist {
  397. background-color: rgba(255, 255, 255, 0.8); font-weight: normal; color: #333;
  398. }
  399. .light #nav,.light #control,.light #before_trades {
  400. border-bottom: 1px solid #CCC;
  401. }
  402. .light #sidebar,.light #footer,.light #assist {
  403. border-color: #CCC;
  404. }
  405. .light #leftbar_outer #leftbar {
  406. border-left: 1px solid #CCC;
  407. }
  408. .light #date {
  409. border-top: 1px solid #CCC;
  410. }
  411. .light ul.horiz select,.light ul.horiz button,.light ul.horiz option {
  412. background-color: #FFF; color: #333; border: 1px solid #666;
  413. }
  414. .light .gg468x60 {
  415. background-color: #FFFFFF; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC;
  416. }
  417. .light .gg200x200 {
  418. border-color: #CCC;
  419. }
  420. .light li.sep,.light li.subsep {
  421. border-right: 1px solid #DDD;
  422. }
  423. .light #qr {
  424. border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.8);
  425. }
  426. .light #loading .inner {
  427. background-color: rgba(255, 255, 255, 0.8); border: 1px solid #CCC;
  428. }
  429. .light .dropdown .t {
  430. border: 1px solid #FFF;
  431. }
  432. .light .dropdown-data {
  433. background-color: rgba(255, 255, 255, 0.9); border: 1px solid #999;
  434. }
  435. .light .dropdown-hover .t {
  436. color: #666; border: 1px solid #999; border-bottom: none; background-color: rgba(255, 255, 255, 0.9);
  437. }
  438. .light #nav-charts td,.light table.simple td {
  439. border-bottom: 1px solid #CCC;
  440. }
  441. .light .navbar {
  442. border-bottom: 1px solid #CCC;
  443. }
  444. .light table.simple ul li {
  445. color: #0D86FF;
  446. }
  447. .light table.simple ul li.active {
  448. color: #F80;
  449. }
  450. .light #trades .v {
  451. color: #000;
  452. }
  453. .light #now {
  454. color: #333;
  455. }
  456. .light .difficulty table {
  457. background-color: white; border: 1px solid #CCC;
  458. }
  459. .light .new {
  460. background-color: #CCC;
  461. }
  462. .light #orderbook .remove {
  463. color: #CCC;
  464. }
  465. .light #orderbook .remove g {
  466. color: #CCC;
  467. }
  468. .light .help {
  469. background-color: #FFF; border: 1px solid #CCC;
  470. }
  471. .light .grey {
  472. color: grey;
  473. }
  474. .light .ticker_green {
  475. background-color: green; color: white;
  476. }
  477. .light .ticker_red {
  478. background-color: red; color: white;
  479. }
  480. .light .dialog {
  481. background-color: rgba(255, 255, 255, 1); color: #333; border: 1px solid #ccc;
  482. }
  483. .light .dialog .tablist {
  484. border-bottom: 1px solid #CCCCCC; background-color: #FFFFFF;
  485. }
  486. .light .dialog .tablist .selected {
  487. color: #F80;
  488. }
  489. .light .dialog .content .selected {
  490. background-color: #ccc;
  491. }
  492. .light input {
  493. color: #333333; background-color: #FFFFFF; border: 1px solid #CCCCCC;
  494. }
  495. .light input[type=button]:hover,.light input[type=submit]:hover {
  496. background-color: #E6E6E6;
  497. }
  498. .light input[type=button]:active,.light input[type=submit]:active {
  499. background-color: #F2F2F2;
  500. }
  501. .light #mode a {
  502. color: #666;
  503. }
  504. .light #mode a:hover,.light #mode a.selected {
  505. border: 1px solid #eee;
  506. }
  507. .light #mode a.selected {
  508. background-color: #eee; color: #000;
  509. }
  510. #donation {
  511. color: #333; font-size: 10px; font-family: Monaco, Consolas, Monospace; vertical-align: top;
  512. }
  513. .dark .COINWIDGETCOM_WINDOW input {
  514. color: #333; background-color: #FFF;
  515. }
  516. .light .COINWIDGETCOM_WINDOW input {
  517. color: #333; background-color: #FFF;
  518. }
  519. .COINWIDGETCOM_WINDOW input {
  520. font-size: 11px !important;
  521. }
  522. .COINWIDGETCOM_CONTAINER>span {
  523. color: #333 !important;
  524. }
  525. .COINWIDGETCOM_CONTAINER>a {
  526. height: 16px !important;
  527. }
  528. .COINWIDGETCOM_CONTAINER>span {
  529. line-height: 16px !important; padding: 0px 2px;
  530. }
  531. #mtgoxNav div {
  532. display: block;
  533. }
  534. .nowrap {
  535. white-space: nowrap;
  536. }
  537. .nav-markets {
  538. font-family: Consolas, monospace;
  539. }
  540. .nav-markets a {
  541. margin-right: 6px;
  542. }
  543. #markets {
  544. right: 0px; font-size: 11px; text-align: center; font-weight: normal;
  545. }
  546. #markets a {
  547. margin: 0px 3px;
  548. }
  549. #markets .currency {
  550. font-size: 12px;
  551. }
  552. #markets div {
  553. display: inline-block; *display: inline; *zoom: 1; font-family: Consolas, monospace; margin-right: 12px; margin-left: 0px; text-align: left;
  554. }
  555. .dropdown,.dropup {
  556. padding: 0px; margin: 0px; display: inline-block; *display: inline; *zoom: 1; list-style: none; position: relative; z-index: 10;
  557. }
  558. .dropdown .t,.dropup .t {
  559. border: 1px solid #0A0A0A; border-bottom: none; padding: 3px 6px; z-index: 101; position: relative; cursor: default;
  560. }
  561. .dropdown .caret,.dropup .caret {
  562. margin-left: 6px;
  563. }
  564. .dropdown .caret .icon-caret-down,.dropup .caret .icon-caret-down {
  565. display: inline;
  566. }
  567. .dropdown .caret .icon-caret-up,.dropup .caret .icon-caret-up {
  568. display: none;
  569. }
  570. .dropdown-hover,.dropup-hover {
  571. z-index: 100;
  572. }
  573. .dropdown-hover .dropdown-data,.dropup-hover .dropdown-data {
  574. display: block;
  575. }
  576. .dropdown-hover .t,.dropup-hover .t {
  577. color: #FFF; border: 1px solid #666; border-bottom: none; background-color: rgba(10, 10, 10, 0.9);
  578. }
  579. .dropdown-hover .caret .icon-caret-down,.dropup-hover .caret .icon-caret-down {
  580. display: none;
  581. }
  582. .dropdown-hover .caret .icon-caret-up,.dropup-hover .caret .icon-caret-up {
  583. display: inline;
  584. }
  585. .dropdown-data,.dropup-data {
  586. display: none; position: absolute; z-index: 100; background-color: rgba(10, 10, 10, 0.9); padding: 6px; margin: 0px; text-align: left; border: 1px solid #666; margin-top: -1px;
  587. }
  588. .dropdown-data li,.dropup-data li {
  589. display: block; white-space: nowrap;
  590. }
  591. .navbar {
  592. font-size: 11px; border-bottom: 1px solid #333;
  593. }
  594. .navbar .nav {
  595. padding: 0px; margin: 0px; list-style: none; padding-left: 3px;
  596. }
  597. .navbar .nav li {
  598. display: inline-block; *display: inline; *zoom: 1; margin-right: 18px;
  599. }
  600. .navbar .nav li.logo {
  601. margin-left: 3px; font-size: 14px; line-height: 32px;
  602. }
  603. .navbar .nav li.ticker span {
  604. margin-left: 6px; font-family: Consolas, monospace;
  605. }
  606. .navbar .nav li.ticker span.eprice {
  607. margin-left: 0px;
  608. }
  609. #nav-charts {
  610. font-weight: normal;
  611. }
  612. table.simple {
  613. font-weight: normal; border-collapse: collapse; font-size: 12px;
  614. }
  615. table.simple td {
  616. padding: 6px; border-bottom: 1px solid #333;
  617. }
  618. table.simple tr:last-child td {
  619. border-bottom: none;
  620. }
  621. table.simple ul {
  622. list-style: none; padding: 0px; margin: 0px;
  623. }
  624. table.simple ul li {
  625. display: inline-block; *display: inline; *zoom: 1; margin-right: 12px; color: #6BF; cursor: pointer;
  626. }
  627. table.simple ul li:hover {
  628. text-decoration: underline;
  629. }
  630. table.simple ul li.active {
  631. color: #FC9;
  632. }
  633. table.simple {
  634. border-collapse: collapse;
  635. }
  636. .ggtop {
  637. position: absolute; top: 0px; right: 0px;
  638. }
  639. .ggtop img {
  640. display: block;
  641. }
  642. #trades {
  643. color: #808080;
  644. }
  645. #trades .row {
  646. clear: both; height: 16px; line-height: 16px;
  647. }
  648. #trades .t,#trades .p,#trades .v {
  649. display: inline-block; *display: inline; *zoom: 1; margin-right: 10px; vertical-align: top;
  650. }
  651. #trades .v {
  652. color: #CCC;
  653. }
  654. #trades .p {
  655. overflow: hidden;
  656. }
  657. #trades .v {
  658. float: right; text-align: left;
  659. /*width: 5em;*/
  660. }
  661. #trades .s {
  662. text-align: right;
  663. }
  664. #now {
  665. position: absolute; right: 0px; color: #999; padding-right: 6px;
  666. }
  667. .watch_list {
  668. background-color: black;
  669. }
  670. .watch_list table td {
  671. border: 1px solid #333; padding: 6px;
  672. }
  673. .notify {
  674. display: none;
  675. }
  676. .difficulty {
  677. position: absolute; right: 0px; top: 5px; width: 220px; font-family: Arial, sans; font-size: 11px; text-align: right;
  678. }
  679. .difficulty table {
  680. margin: auto; border: 1px solid #333; border-collapse: collapse; text-align: left; background-color: #0A0A0A;
  681. }
  682. .difficulty table td {
  683. overflow: hidden; height: 16px; padding: 0px 4px; line-height: 16px;
  684. }
  685. .difficulty span {
  686. font-family: Consolas, monospace;
  687. }
  688. @media ( max-width : 1200px) {
  689. .difficulty {
  690. display: none;
  691. }
  692. }
  693. @media ( max-width : 1024px) {
  694. .eprice {
  695. display: none;
  696. }
  697. }
  698. .more {
  699. text-align: right;
  700. }
  701. .navbar .nav li.passport {
  702. font-size: 13px; float: right; line-height: 32px; height: 32px; margin: 0px; padding: 0px;
  703. }
  704. .navbar .nav li.passport>div {
  705. margin-right: 8px; display: inline-block; *display: inline; *zoom: 1;
  706. }
  707. .address {
  708. font-family: Consolas, monospace;
  709. }
  710. a.direct_address {
  711. color: #6C6;
  712. }
  713. #footer .conn {
  714. color: #090;
  715. }
  716. .good {
  717. color: #090;
  718. }
  719. .normal {
  720. color: #990;
  721. }
  722. .bad {
  723. color: #900;
  724. }
  725. .unselectable {
  726. -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
  727. }
  728. input {
  729. padding: 4px; border-radius: 4px; border: 1px solid #333333; background-color: #333333; color: #CCCCCC;
  730. }
  731. input[type=text],input[type=password] {
  732. width: 12em;
  733. }
  734. input[type=checkbox] {
  735. vertical-align: middle;
  736. }
  737. input[type=button],input[type=submit] {
  738. padding: 4px 8px; cursor: pointer;
  739. }
  740. input[type=button]:hover,input[type=submit]:hover {
  741. background-color: #474747;
  742. }
  743. input[type=button]:active,input[type=submit]:active {
  744. background-color: #333333;
  745. }
  746. .dialog {
  747. position: absolute; left: 50%; top: 40%; width: 640px; padding: 8px; border: 1px solid #333; font-family: Arial, sans; font-size: 13px; background-color: #1A1A1A; color: #CCCCCC; z-index: 101; display: none;
  748. }
  749. .dialog .tablist {
  750. border-bottom: 1px solid #333333; background-color: #0A0A0A; margin-bottom: 8px; cursor: move;
  751. }
  752. .dialog .tablist .tab {
  753. display: inline-block; *display: inline; *zoom: 1; padding: 8px; font-size: 12px; width: 64px; text-align: center; margin-right: 6px; cursor: pointer;
  754. }
  755. .dialog .tablist .selected {
  756. color: #FC6;
  757. }
  758. .dialog .tablist .tab:hover {
  759. text-decoration: underline;
  760. }
  761. .dialog .tablist .close {
  762. width: auto; padding: 8px; text-align: right; float: right;
  763. }
  764. .dialog .tablist i.icon-ok {
  765. color: #6C6;
  766. }
  767. .dialog .tablist table {
  768. border-collapse: collapse;
  769. }
  770. .dialog .tablist table td {
  771. padding: 2px 4px;
  772. }
  773. .dialog .tablist table td:first-child {
  774. text-align: right; width: 160px;
  775. }
  776. .dialog .tablist-one .tab {
  777. width: auto;
  778. }
  779. .dialog-auto-size {
  780. width: auto; height: auto;
  781. }
  782. .dialog-auto-size form table td:first-child {
  783. width: auto;
  784. }
  785. .dialog table.s1 {
  786. width: 100%; text-align: center; border-collapse: collapse; margin-bottom: 8px;
  787. }
  788. .dialog table.s1 i.icon-ok {
  789. color: #6C6;
  790. }
  791. .dialog table.s1 i.icon-remove {
  792. color: #F66;
  793. }
  794. .dialog table.s1 td,.dialog table.s1 th {
  795. border: 1px solid #4D4D4D; padding: 4px;
  796. }
  797. .dialog h3 {
  798. margin-top: 0px; margin-bottom: 8px; padding-top: 4px; font-size: 12px;
  799. }
  800. .dialog dl {
  801. margin-top: 0px;
  802. }
  803. .dialog ol {
  804. margin: 0px; padding: 0px;
  805. }
  806. .dialog ol li {
  807. margin-left: 40px;
  808. }
  809. .del {
  810. text-decoration: line-through;
  811. }
  812. .del i {
  813. text-decoration: none;
  814. }
  815. .ic {
  816. font-family: FontAwesome; font-style: normal;
  817. }
  818. .dialog .error {
  819. color: #F33; text-align: center; display: none;
  820. }
  821. .dialog .ok {
  822. color: #6C6; text-align: center;
  823. }
  824. .dialog .content_premium table#price_table {
  825. width: 300px; margin: auto; margin-bottom: 8px;
  826. }
  827. .dialog .content_premium .steps {
  828. text-align: center;
  829. }
  830. #dlg_ucp {
  831. width: 420px;
  832. }
  833. #dlg_ucp .content {
  834. height: 250px; overflow-y: auto;
  835. }
  836. #dlg_ucp .content_home {
  837. text-align: center; font-size: 13px; line-height: 20px;
  838. }
  839. #dlg_ucp .content_home dl {
  840. text-align: left; display: inline-block; *display: inline; *zoom: 1;
  841. }
  842. #dlg_ucp .content_home dl dd {
  843. margin-bottom: 6px;
  844. }
  845. #dlg_ucp .content_history {
  846. text-align: left; overflow-y: auto;
  847. }
  848. #dlg_ucp .content_history table {
  849. font-size: 11px;
  850. }
  851. .dialog .content .selected {
  852. background-color: #333; border-radius: 3px;
  853. }
  854. .dialog .unit {
  855. padding: 3px; cursor: pointer;
  856. }
  857. .dialog-toolbox {
  858. padding: 0px;
  859. }
  860. .dialog-toolbox .tablist {
  861. background-color: #333333; padding: 0px 8px;
  862. }
  863. .dialog-toolbox .tablist .tab {
  864. padding: 0px; font-size: 10px; margin: 0px; width: auto;
  865. }
  866. .dialog-toolbox .tablist .close {
  867. padding: 0px; font-size: 12px;
  868. }
  869. .dialog-toolbox .content {
  870. margin: 8px;
  871. }
  872. .content_warning {
  873. text-align: center;
  874. }
  875. .content_warning .icon {
  876. float: left; font-size: 36px;
  877. }
  878. .help {
  879. position: absolute; left: 0px; top: 0px; background-color: #0A0A0A; font-size: 11px; padding: 8px; border: 1px solid #333; display: none;
  880. }
  881. .help dl:first-child {
  882. margin-top: 0px;
  883. }
  884. .bw-circle {
  885. width: 10px; height: 10px; display: inline-block; *display: inline; *zoom: 1; background-color: #090; vertical-align: baseline; border-radius: 3px;
  886. }
  887. .good .bw-circle {
  888. background-color: #090;
  889. }
  890. .normal .bw-circle {
  891. background-color: #990;
  892. }
  893. .bad .bw-circle {
  894. background-color: #900;
  895. }
  896. #connection .conn {
  897. font-size: 0px;
  898. }
  899. .reason {
  900. text-align: left; font-weight: normal; font-size: 14px;
  901. }
  902. .reason dt {
  903. font-weight: bold;
  904. }
  905. #chart_info {
  906. position: absolute; top: 0px; left: 0px; font-family: Consolas, monospace; font-size: 12px; padding: 4px; width: 100%; text-align: left;
  907. }
  908. #chart_info .yellow {
  909. color: #EE0;
  910. }
  911. .light #chart_info .yellow {
  912. color: #03E;
  913. }
  914. #mode {
  915. font-family: Consolas, monospace; font-size: 12px; height: 25px; line-height: 25px;
  916. }
  917. #mode a {
  918. display: inline-block; *display: inline; *zoom: 1; width: 17px; height: 17px; line-height: 17px; text-align: center; text-decoration: none; color: #999; font-weight: normal; vertical-align: middle; border-radius: 3px; border: 1px solid transparent;
  919. }
  920. #mode a:hover,#mode a.selected {
  921. border: 1px solid #333; color: #ccc;
  922. }
  923. #mode a.selected {
  924. color: #ccc; border: 1px solid #333;
  925. }
  926. #mode img {
  927. vertical-align: middle;
  928. }
  929. .hint {
  930. font-size: 11px; font-family: Arial, sans;
  931. }
  932. code {
  933. font-family: Consolas, monospace;
  934. }
  935. .warning {
  936. color: #FF0; font-size: 14px; font-family: Arial, sans; padding: 4px 8px; font-weight: bold;
  937. }
  938. .light .warning {
  939. color: #F00;
  940. }
  941. .hide {
  942. display: none;
  943. }
  944. </style>
  945. </head>
  946. <body>
  947. <div id="header_outer">
  948. <div id="header">
  949. <div class="navbar navbar-static-top">
  950. <div class="navbar-inner">
  951. <div class="container">
  952. <div id="warning"></div>
  953. </div>
  954. </div>
  955. </div>
  956. <div id="qr">
  957. <img />
  958. </div>
  959. <div id="control">
  960. <div class="inner">
  961. <ul id="periods" class="horiz">
  962. <li style='line-height: 26px'>K线时间段:</li>
  963. <li class="period"><a>1周</a></li>
  964. <li class="subsep"></li>
  965. <li class="period"><a>1天</a></li>
  966. <li class="subsep"></li>
  967. <li class="period"><a>12小时</a></li>
  968. <li class="period"><a>6小时</a></li>
  969. <li class="period"><a>4小时</a></li>
  970. <li class="period"><a>2小时</a></li>
  971. <li class="period"><a>1小时</a></li>
  972. <li class="subsep"></li>
  973. <li class="period"><a>30分</a></li>
  974. <li class="period selected"><a>15分</a></li>
  975. <li class="period"><a>5分</a></li>
  976. <li class="period"><a>3分</a></li>
  977. <li class="period"><a>1分</a></li>
  978. <li class="subsep"></li>
  979. <li>
  980. <div class="dropdown">
  981. <div class="t">页面设置</div>
  982. <div class="dropdown-data">
  983. <table class="nowrap simple settings">
  984. <tbody>
  985. <tr class="main_lines">
  986. <td>均线设置</td>
  987. <td><ul id="setting_main_lines">
  988. <li value="mas" class="active">MA</li>
  989. <li value="emas">EMA</li>
  990. <li value="none">关闭均线</li>
  991. </ul></td>
  992. </tr>
  993. <tr class="stick_style">
  994. <td>图线样式</td>
  995. <td><ul id="setting_stick_style">
  996. <li value="candle_stick" class="active">K线-OHLC</li>
  997. <li value="candle_stick_hlc">K线-HLC</li>
  998. <li value="ohlc">OHLC</li>
  999. <li value="line">单线</li>
  1000. <li value="line_o">单线-o</li>
  1001. <li value="none">关闭线图</li>
  1002. </ul></td>
  1003. </tr>
  1004. <tr class="line_style" style="display: none;">
  1005. <td>Line Style</td>
  1006. <td><ul id="setting_ls">
  1007. <li value="c" class="active">Close</li>
  1008. <li value="m">Median Price</li>
  1009. </ul></td>
  1010. </tr>
  1011. <tr class="indicator">
  1012. <td>技术指标</td>
  1013. <td><ul id="setting_indicator">
  1014. <li value="macd">MACD</li>
  1015. <li value="kdj">KDJ</li>
  1016. <li value="stoch_rsi" class="active">StochRSI</li>
  1017. <li value="rsi">RSI</li>
  1018. <li value="emv">EMV</li>
  1019. <li value="roc">ROC</li>
  1020. <li value="psy">PSY</li>
  1021. <li value="none">关闭指标</li>
  1022. </ul></td>
  1023. </tr>
  1024. <tr class="scale">
  1025. <td>线图比例</td>
  1026. <td><ul id="setting_scale">
  1027. <li value="normal">普通K线</li>
  1028. <li value="logarithmic" class="active">对数K线</li>
  1029. </ul></td>
  1030. </tr>
  1031. <tr>
  1032. <td></td>
  1033. <td colspan="2"><a id="btn_settings">指标参数设置</a></td>
  1034. </tr>
  1035. </tbody>
  1036. </table>
  1037. </div>
  1038. </div>
  1039. <div class="dropdown">
  1040. <div class="t">工具</div>
  1041. <div class="dropdown-data">
  1042. <table class="nowrap simple">
  1043. <tbody>
  1044. <tr>
  1045. <td><a class="mode" mode="draw_line">画线</a><br> <a class="mode" mode="draw_fhline">绘制斐波那契回调线</a> <br> <a class="mode" mode="draw_ffan">绘制斐波那契面</a><br> <a class="mode selected" mode="draw_fhlineex">绘制斐波那契扩展</a>
  1046. <div class="hint">
  1047. 点击左键画点/线 <br>点击右键清除
  1048. </div></td>
  1049. </tr>
  1050. </tbody>
  1051. </table>
  1052. </div>
  1053. </div>
  1054. </li>
  1055. <li class="sep"></li>
  1056. <li id="mode">
  1057. <a id="mode_cross" class="mode" title="Cross Cursor" mode="cross">
  1058. <img src="__PUBLIC__/Home/images/shape-cross.png">
  1059. </a>
  1060. <a id="mode_draw_line" class="mode" title="Draw lines" mode="draw_line">
  1061. <img src="__PUBLIC__/Home/images/shape-line.png">
  1062. </a>
  1063. <a id="mode_draw_fhline" class="mode" title="Draw Fibonacci Retracements" mode="draw_fhline">
  1064. <img src="__PUBLIC__/Home/images/shape-fr.png">
  1065. </a>
  1066. <a id="mode_draw_ffan" class="mode" title="Draw Fibonacci Fans" mode="draw_ffan">
  1067. <img src="__PUBLIC__/Home/images/shape-ffan.png">
  1068. </a>
  1069. </li>
  1070. <li class="sep"></li>
  1071. <li>
  1072. 已更新
  1073. <span id="change">2</span>
  1074. <span id="realtime_error" style="display: none">
  1075. in <abbr title="Realtime(WebSocket) connection failed. Orderbook update every 1 minute, Trades update every 10 seconds.">Slow Mode</abbr>
  1076. </span>
  1077. </li>
  1078. </ul>
  1079. </div>
  1080. </div>
  1081. </div>
  1082. </div>
  1083. <div id="loading">
  1084. <div class="inner">
  1085. <div class="text">Loading...</div>
  1086. </div>
  1087. </div>
  1088. <div id="notify" class="notify">
  1089. <div class="inner"></div>
  1090. </div>
  1091. <div id="main">
  1092. <div id="sidebar_outer" style="display: none">
  1093. <div id="sidebar" style="display: none">
  1094. <div id="trades"></div>
  1095. </div>
  1096. </div>
  1097. <div id="wrapper" class="hide_cursor">
  1098. <canvas id="canvas_main"></canvas>
  1099. <canvas id="canvas_shapes" class="ab"></canvas>
  1100. <canvas id="canvas_cross" class="ab"></canvas>
  1101. <div id="chart_info"></div>
  1102. </div>
  1103. </div>
  1104. <div id="footer_outer">
  1105. <div id="footer">
  1106. <!-- <ul class="horiz donate"><li>
  1107. </li><li id="now"></li></ul> -->
  1108. </div>
  1109. </div>
  1110. <div id="assist" style='display: none'></div>
  1111. <div id="settings">
  1112. <h2>技术指标参数设定</h2>
  1113. <table>
  1114. <tr id="indicator_price_mas">
  1115. <th>EMA / MA <abbr title="Up to 4 different indicators
  1116. Set field blank to remove one of the indicators.">?</abbr>
  1117. </th>
  1118. <td><input name=price_mas /> <input name=price_mas /> <input name=price_mas /> <input name=price_mas /></td>
  1119. <td><button>默认值</button></td>
  1120. </tr>
  1121. <tr id="indicator_macd">
  1122. <th>MACD <abbr title="Short, Long, Move">?</abbr>
  1123. </th>
  1124. <td><input name=macd /> <input name=macd /> <input name=macd /></td>
  1125. <td><button>默认值</button></td>
  1126. </tr>
  1127. <tr id="indicator_kdj">
  1128. <th>KDJ <abbr title="rsv, k, d">?</abbr>
  1129. </th>
  1130. <td><input name=kdj /> <input name=kdj /> <input name=kdj /></td>
  1131. <td><button>默认值</button></td>
  1132. </tr>
  1133. <tr id="indicator_stoch_rsi">
  1134. <th>Stoch RSI <abbr title="Params: Stochastic Length, RSI Length, K, D">?</abbr>
  1135. </th>
  1136. <td><input name=stoch_rsi /> <input name=stoch_rsi /> <input name=stoch_rsi /> <input name=stoch_rsi /></td>
  1137. <td><button>默认值</button></td>
  1138. </tr>
  1139. <!-- 后期添加的指标========开始========================================= -->
  1140. <!-- RSI -->
  1141. <tr id="indicator_rsi">
  1142. <th>RSI <abbr title="">?</abbr>
  1143. </th>
  1144. <td><input name=rsi /> <input name=rsi /> <input name=rsi /></td>
  1145. <td><button>默认值</button></td>
  1146. </tr>
  1147. <!-- EMV -->
  1148. <!-- <tr id="indicator_emv">
  1149. <th>EMV <abbr title="">?</abbr>
  1150. </th>
  1151. <td><input name=emv /> <input name=emv /> <input name=emv /></td>
  1152. <td><button>默认值</button></td>
  1153. </tr> -->
  1154. <!-- ROC -->
  1155. <!-- <tr id="indicator_roc">
  1156. <th>ROC <abbr title="">?</abbr>
  1157. </th>
  1158. <td><input name=roc /> <input name=roc /> <input name=roc /></td>
  1159. <td><button>默认值</button></td>
  1160. </tr> -->
  1161. <!-- PSY -->
  1162. <!-- <tr id="indicator_psy">
  1163. <th>PSY <abbr title="">?</abbr>
  1164. </th>
  1165. <td><input name=psy /> <input name=psy /> <input name=psy /></td>
  1166. <td><button>默认值</button></td>
  1167. </tr> -->
  1168. <!-- 后期添加的指标========结束========================================= -->
  1169. </table>
  1170. <div id="close_settings">
  1171. <a>[ 关闭 ]</a>
  1172. </div>
  1173. </div>
  1174. <script type="text/javascript">
  1175. (function(){
  1176. window.$market='{$market}';
  1177. window.$sid="0";
  1178. window.$time_fix=60*1000;
  1179. window.$host='';
  1180. window.$test=false;
  1181. window.$symbol="1";
  1182. window.$hsymbol="RUIZCON XNB\/CNY";
  1183. window.$theme_name="dark";
  1184. window.$debug=false;
  1185. window.$settings={"main_lines":{"id":"main_lines","name":"Main Indicator","default":"mas","options":{"MA":"mas","EMA":"emas","None":"none"}},"stick_style":{"id":"stick_style","name":"Chart Style","options":{"CandleStick":"candle_stick","CandleStickHLC":"candle_stick_hlc","OHLC":"ohlc","Line":"line","Line-o":"line_o","None":"none"}},"line_style":{"id":"ls","name":"Line Style","options":{"Close":"c","Median Price":"m"}},"indicator":{"id":"indicator","name":"Indicator","default":"none","options":{"MACD":"macd","KDJ":"kdj","StochRSI":"stoch_rsi","None":"none"}},"scale":{"id":"scale","name":"Scale","options":{"Normal":"normal","Logarithmic":"logarithmic"}},"theme":{"id":"theme","name":"Theme","options":{"Dark":"dark","Light":"light"},"refresh":true}};
  1186. window.$p=true;
  1187. window.$c_usdcny=6.0463;
  1188. setTimeout(function(){
  1189. if(!window.$script_loaded){
  1190. return document.getElementById('loading').innerHTML="<div class=inner>正在加载脚本,请稍后...</div>";
  1191. }
  1192. },1000);
  1193. // var goaa=null;
  1194. // var waita=seconda=7;
  1195. // goaa=setInterval(function(){
  1196. // waita--;
  1197. // if(waita<0){
  1198. // clearInterval(goaa);
  1199. // $.get("/Chart/setTradeJson?market="+$market+"&t="+(new Date().getTime()),function(data){
  1200. // });
  1201. // waita=seconda;
  1202. // }
  1203. // },1000);
  1204. }).call(this);
  1205. </script>
  1206. <script type="text/javascript" src="__PUBLIC__/Home/js/kline.js"></script>
  1207. </body>
  1208. </html>