diff --git a/css/common.css b/css/common.css index 10e7776..b05c637 100644 --- a/css/common.css +++ b/css/common.css @@ -18,7 +18,7 @@ a{ .header{ width: 100%; height: 100px; - background-color: #FFFFFF; + background-color: #111534; } .header .header_content{ display: flex; @@ -26,12 +26,15 @@ a{ height: 100%; } .header .header_content .logo{ - width: 171px; - padding: 22px 0; + width: 233px; + height: 56px; + margin-top: 22px; + /* padding: 22px 0; */ } .header .header_content .logo img{ width: 100%; + height: 100%; } .header .header_content .header_tabs .acon2{ @@ -43,7 +46,7 @@ a{ .header .header_content .header_tabs .acon2 a,.header_tabs .acon2 .loginCss a{ display: inline-block; text-align: center; - color: #303133; + color: rgba(255, 255, 255, 0.65); font: 20px "Medium"; line-height: 69px; margin-left: 80px; @@ -54,7 +57,7 @@ a{ width: 0%; height: 3px; border-radius: 4px; - background: #1C8D36; + background: #FFFFFF; position: absolute; left: 50%; bottom: 0px; @@ -67,7 +70,7 @@ a{ opacity: 1; } .header .header_content .header_tabs .acon2 a.active,.header .header_content .header_tabs .acon2 a:hover{ - color: #1C8D36; + color: #FFFFFF; } .header .header_content .header_tabs .acon2 a:first-child{ margin-left: 0; @@ -79,7 +82,7 @@ a{ .header .header_content .header_tabs .acon1 .a{ display: inline-block; text-align: center; - color: #999999; + color: rgba(255, 255, 255, 0.25); font: 14px "Medium"; margin-left: 48px; position: relative; @@ -87,7 +90,7 @@ a{ .language{ width: 60px; line-height: 24px; -border: 1px solid #999999; +border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; text-align: center; position: relative; @@ -171,7 +174,7 @@ cursor: pointer; .language-list a{ display: block; text-align: center; - color: #999999; + color: rgba(255, 255, 255, 0.25); font: 14px "Medium"; } .header .header_content .header_tabs .acon1 .a:first-child{ @@ -182,7 +185,7 @@ cursor: pointer; content: ''; width: 1px; height: 12px; - background-color: #999999; + background-color: rgba(255, 255, 255, 0.25); position: absolute; left: -50%; top: 50%; @@ -329,7 +332,7 @@ margin-right: 140px; padding: 25px 0; } .foot_center .p1{ - color: #999999; + color: rgba(255, 255, 255, 0.25); font-size: 14px; } diff --git a/css/exchange.css b/css/exchange.css index 8df1902..6143a14 100644 --- a/css/exchange.css +++ b/css/exchange.css @@ -1,19 +1,22 @@ .trade { - color: #FFFFFF !important; - background-image: linear-gradient(to right, #FFA3DC, #1C8D36); + color: #ffffff !important; + background-image: linear-gradient(to right, #ffa3dc, #00cc5a); border-radius: 15px; } +.main { + background-color: #040610; +} -.container2{ - width: 1366px; - padding: 0 40px; - margin: 0 auto; +.container2 { + width: 1366px; + padding: 0 40px; + margin: 0 auto; } .container { margin: 10px auto 0; - width: 1420px; - margin: 0 auto; + width: 1420px; + margin: 0 auto; overflow: hidden; } @@ -21,21 +24,25 @@ padding-left: 30px; } -.main-sidebar-left, .main-sidebar-right { +.main-sidebar-left, +.main-sidebar-right { width: 300px; - border: 1px solid #D9D9D9; + /* border: 1px solid #D9D9D9; */ } -.main-sidebar-left { +.main-sidebar-right { float: right; } -.main-sidebar-right { +.main-sidebar-left { float: left; } -.main-sidebar-left .main-tabs-content, .main-sidebar-right .main-tabs-content { +.main-sidebar-left .main-tabs-content, +.main-sidebar-right .main-tabs-content { height: 888px; + background: #111534; + border: none; } .main-middlebar { @@ -44,7 +51,7 @@ .main-tabs-nav { height: 38px; - border-bottom: 1px solid #EDEFF2; + border-bottom: 1px solid #edeff2; } .main-tabs-content { @@ -74,7 +81,7 @@ .tradingview-head span { margin-right: 15px; font-size: 12px; - color: #303133; + color: #ffffff; line-height: 38px; } @@ -111,9 +118,9 @@ font-family: PingFang SC; font-weight: 600; line-height: 36px; - color: #1C8D36; + color: #006cff; opacity: 1; - border-bottom: 2px solid #1C8D36; + border-bottom: 2px solid #006cff; margin-left: 20px; } @@ -121,7 +128,7 @@ float: left; width: 50%; margin-top: 15px; - border-right: 1px solid #EDEFF2; + border-right: 1px solid #edeff2; box-sizing: border-box; padding: 0 20px 17px; } @@ -132,24 +139,24 @@ .exchange-head { display: flex; - color: #606266; + justify-content: space-between; + color: rgba(255, 255, 255, 0.65); line-height: 22px; margin-bottom: 22px; } .exchange-head a { - color: #606266; + color: rgba(255, 255, 255, 0.65); } .exchange-head span { padding-right: 8px; } - .exchange-head span:last-of-type { padding-right: 0; } -.exchange-head2{ +.exchange-head2 { justify-content: space-between; } .exchange-tags { @@ -168,7 +175,7 @@ height: 27px; line-height: 27px; font-size: 13px; - border: 1px solid #EDEFF2; + border: 1px solid #edeff2; border-radius: 4px; color: #909399; cursor: pointer; @@ -179,8 +186,8 @@ display: none; } -.exchange-tags-label input:checked+span { - border-color: #1C8D36; +.exchange-tags-label input:checked + span { + border-color: #006cff; } .exchange-input { @@ -190,37 +197,63 @@ } .exchange-input .layui-input { - background-color: #fff; + background-color: #23274d; border-radius: 6px; padding-left: 18px; - color: #303133; + color: rgba(255, 255, 255, 0.85); width: 236px; - height: 40px; + height: 40px; font-size: 14px; border: none; float: right; } +.tags { + width: 100%; + margin: 7px 0; + border-radius: 6px; + padding-left: 18px; + color: rgba(255, 255, 255, 0.85); + /* width: 246px; */ + font-size: 12px; + border: none; + display: flex; + justify-content: flex-end; +} +.tags .tag { + display: inline-block; + width: 51px; + height: 20px; + line-height: 20px; + background: #191E3E; + border: 1px solid rgba(255, 255, 255, 0.25098039215686274); + opacity: 1; + border-radius: 2px; + text-align: center; + margin-left: 10px; +} .exchange-input .layui-input:hover { - border-color: #1C8D36 !important; + border-color: #006cff !important; } .exchange-input .layui-input:focus { - border-color: #1C8D36 !important; + border-color: #006cff !important; } -.exchange-input .s1{ +.exchange-input .s1 { position: absolute; top: 13px; left: 16px; line-height: 1em; - color: #303133; + + color: rgba(255, 255, 255, 0.65); } -.exchange-input .s2{ +.exchange-input .s2 { position: absolute; right: 15px; font-size: 13px; - color: #1C8D36; + + color: #d9d9d9; top: 13px; } .exchange-total { @@ -231,7 +264,7 @@ color: #909399; } -.exchange-total>div:first-of-type { +.exchange-total > div:first-of-type { float: left; } @@ -240,7 +273,7 @@ position: relative; } -.exchange-total-input>* { +.exchange-total-input > * { float: right; } @@ -261,43 +294,43 @@ text-align: center; border-radius: 6px; cursor: pointer; - color: #1C8D36; + color: #006cff; font-size: 14px; } -.exchange-btn a{ - color: #1C8D36; +.exchange-btn a { + color: #006cff; font-size: 14px; height: 100%; } -.exchange-btn:hover a{ +.exchange-btn:hover a { color: #fff; } .exchange-btn.buy-btn { - border:1px solid #1C8D36; + border: 1px solid #006cff; } -.exchange-btn:hover.buy-btn{ - background-color: #1C8D36; +.exchange-btn:hover.buy-btn { + background-color: #006cff; color: #fff; } .exchange-btn.buy-login-btn { - background: #00505F; + background: #00505f; border: 1px solid#00505F; - color:#FFFFFF; + color: #ffffff; font-weight: bold; } .exchange-btn.sell-btn { - background-color: #E5544E; + background-color: #e5544e; } .exchange-btn:hover::after { position: absolute; - content: ''; + content: ""; top: 0; left: 0; right: 0; bottom: 0; - background-color: rgba(255, 255, 255, .1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 20px; } @@ -307,14 +340,15 @@ } .main-tabs-nav.layui-tab-title { - border-bottom: 1px solid #EDEFF2; + border-bottom: 1px solid #edeff2; padding: 0 15px; + background: #111534; } .main-tabs-nav.layui-tab-title li { height: 36px; line-height: 36px; - color: #303133; + color: #ffffff; padding: 0; text-align: center; float: left; @@ -322,13 +356,13 @@ } .main-tabs-nav.layui-tab-title li.layui-this { - color: #1C8D36; + color: #006cff; font-size: 14px; } .main-tabs-nav.layui-tab-title li.layui-this:after { height: 38px; - border-color: #1C8D36; + border-color: #006cff; } .main-sidebar-left .main-tabs-nav.layui-tab-title li { @@ -339,7 +373,8 @@ width: 50%; } -.main-delegate .main-tabs-nav.layui-tab-title li, .main-middlebar .main-tabs-nav.layui-tab-title li { +.main-delegate .main-tabs-nav.layui-tab-title li, +.main-middlebar .main-tabs-nav.layui-tab-title li { width: auto; padding: 0 16px; } @@ -350,7 +385,10 @@ line-height: 30px; } -.main-sidebar-left th:first-of-type .layui-table-cell, .main-sidebar-left td:first-of-type .layui-table-cell, .main-sidebar-right th:first-of-type .layui-table-cell, .main-sidebar-right td:first-of-type .layui-table-cell { +.main-sidebar-left th:first-of-type .layui-table-cell, +.main-sidebar-left td:first-of-type .layui-table-cell, +.main-sidebar-right th:first-of-type .layui-table-cell, +.main-sidebar-right td:first-of-type .layui-table-cell { padding: 0 0 0 10px; } @@ -358,64 +396,87 @@ padding: 0 10px; } -.layui-table, .layui-table-view { +.layui-table, +.layui-table-view { margin: 6px 0 0; background: none; } -.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) { +.layui-table tbody tr:hover, +.layui-table thead tr, +.layui-table-click, +.layui-table-header, +.layui-table-hover, +.layui-table-mend, +.layui-table-patch, +.layui-table-tool, +.layui-table-total, +.layui-table-total tr, +.layui-table[lay-even] tr:nth-child(even) { background: none; } .layui-table tbody tr:hover { - background: rgba(194, 226, 211, .19); + background: rgba(194, 226, 211, 0.19); } .layui-table tbody tr td:hover { cursor: pointer; } -.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] { +.layui-table td, +.layui-table th, +.layui-table-col-set, +.layui-table-fixed-r, +.layui-table-grid-down, +.layui-table-header, +.layui-table-page, +.layui-table-tips-main, +.layui-table-tool, +.layui-table-total, +.layui-table-view, +.layui-table[lay-skin="line"], +.layui-table[lay-skin="row"] { border-color: transparent; } .layui-table-header .layui-table-cell { - color: #959AA3; + color: #959aa3; text-align: center; } .layui-table-sort .layui-table-sort-desc { - border-top-color: #D8D8D8; + border-top-color: #d8d8d8; } .layui-table-sort .layui-table-sort-desc:hover { - border-top-color: #D8D8D8; + border-top-color: #d8d8d8; } -.layui-table-sort[lay-sort=desc] .layui-table-sort-desc { - border-top-color: #1C8D36; +.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc { + border-top-color: #00cc5a; } .layui-table-sort .layui-table-sort-asc { - border-bottom-color: #D8D8D8; + border-bottom-color: #d8d8d8; } .layui-table-sort .layui-table-sort-asc:hover { - border-bottom-color: #D8D8D8; + border-bottom-color: #d8d8d8; } -.layui-table-sort[lay-sort=asc] .layui-table-sort-asc { - border-bottom-color: #1C8D36; +.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc { + border-bottom-color: #00cc5a; } -.layui-table-body .laytable-cell-6-0-0{ - color: #E5544E !important; +.layui-table-body .laytable-cell-6-0-0 { + color: #e5544e !important; } .layui-table-view .layui-table td { padding: 0; } .layui-table-view .layui-table td .layui-table-cell { - color: #303133; + color: #ffffff; text-align: center; } @@ -424,34 +485,35 @@ } .layui-icon.layui-icon-rate-solid { - color: #F79A28; + color: #f79a28; } .layui-icon.layui-icon-rate { - color: #959AA3; + color: #959aa3; } .buy-color { - color: #1C8D36; + color: #00cc5a; } -.layui-table-body .laytable-cell-5-0-0{ - color: #1C8D36 !important; +.layui-table-body .laytable-cell-5-0-0 { + color: #00cc5a !important; } .sell-color { - color: #E5544E; + color: #e5544e; } .gray-color { - color:#303133; + color: #ffffff; } .coin-text { margin-left: 6px; } -input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { -webkit-appearance: none; } @@ -464,9 +526,9 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { line-height: 36px; text-align: center; padding: 12px auto; - background-color:rgba(189, 98, 255, 0.1); + background-color: rgba(189, 98, 255, 0.1); font-size: 12px; - color: #1C8D36; + color: #00cc5a; } .main-sidebar-right .orderbook-wrap { @@ -480,67 +542,67 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { } .highcharts-background { - fill: #121C31; + fill: #121c31; } -.main-sidebar-top{ +.main-sidebar-top { padding: 0 10px; - padding-top: 40px; - padding-bottom: 20px; + padding-top: 40px; + padding-bottom: 20px; } -.flex{ +.flex { display: flex; } -.main-sidebar-top .one{ -font-size: 14px; -color: #666666; +.main-sidebar-top .one { + font-size: 14px; + color: rgba(255, 255, 255, 0.65); } -.main-sidebar-top .one .s1{ +.main-sidebar-top .one .s1 { font-size: 28px; - color: #303133; + color: #ffffff; } -.main-sidebar-top .two{ +.main-sidebar-top .two { margin-left: 40px; } -.main-sidebar-top .two .p1{ +.main-sidebar-top .two .p1 { font-size: 12px; - color: #666666; - } -.main-sidebar-top .two .p2{ + color: rgba(255, 255, 255, 0.65); +} +.main-sidebar-top .two .p2 { font-size: 14px; - color: #1C8D36; - } - - - .Thtitle{ - margin-top: 40px; - line-height: 36px; - width: 100%; - background: rgba(28, 141,54, 0.05); - text-align: left; - font-size: 14px; - padding-left: 20px; - color: #303133; - } -.cent{ - color: #1C8D36; + color: #00cc5a; +} + +.Thtitle { + margin-top: 40px; + line-height: 36px; + width: 100%; + background: #23274d; + text-align: left; + font-size: 14px; + padding-left: 20px; + color: #ffffff; +} +.cent { + color: #00cc5a; + font-weight: bold; text-align: center; } -.layui-table-body .laytable-cell-7-0-0{ - color: #1C8D36 !important; +.layui-table-body .laytable-cell-7-0-0 { + color: #00cc5a !important; } -.gai{ - background-color: #F5F7FA !important; +.gai { + background-color: #111534 !important; } -.main-delegate{ - border: 1px solid #D9D9D9; +.main-delegate { + border: 1px solid #d9d9d9; } -.ma1{ +.ma1 { padding-bottom: 20px; } -.layui-table-page{ +.layui-table-page { overflow-x: scroll; overflow-y: hidden; padding-bottom: 50px; -} \ No newline at end of file +} diff --git a/css/forgetPassword.css b/css/forgetPassword.css index fe76bc2..a952355 100644 --- a/css/forgetPassword.css +++ b/css/forgetPassword.css @@ -1,21 +1,23 @@ .login-container{ width: 420px; height: 520px; - background: #FFFFFF; + background: #111534; border-radius: 15px; padding: 40px; } .input-item-code{ width: 240px !important; - color: #303133; - background-color: #F5F7FA; + color: rgba(255, 255, 255, 0.25); + background-color: #23274D; + border: 1px solid rgba(255, 255, 255, 0.050980392156862744); } .codeSendBtn{ height: 48px !important; width: 90px !important; - background: #BFC2CC; + background: rgba(255, 255, 255, 0.25); + border: none; border-radius: 6px; float: right; text-align: center; @@ -25,6 +27,13 @@ cursor: pointer; } +/* .submitBtn { + background: rgba(255, 255, 255, 0.25) !important; +} */ + +.activeSubmit { + background-color: #006CFF !important; +} .login-container .login-item .input-itemArray{ margin-top: 5px; } diff --git a/css/index.css b/css/index.css index 3622e80..7d30fd0 100644 --- a/css/index.css +++ b/css/index.css @@ -3,7 +3,7 @@ } .header{ - background-color: #FFFFFF; + background-color: #040610; } .container{ width: 1366px; diff --git a/css/login.css b/css/login.css index 388524a..0b15369 100644 --- a/css/login.css +++ b/css/login.css @@ -1,6 +1,6 @@ .signIn { color: #FFFFFF !important; - background-image: linear-gradient(to right, #FFA3DC, #1C8D36); + background-image: linear-gradient(to right, #FFA3DC, #006CFF); border-radius: 15px; } @@ -27,7 +27,7 @@ .login-container { width: 420px; height: 380px; - background: #FFFFFF; + background: #111534; border-radius: 6px; padding: 40px; } @@ -35,7 +35,7 @@ .login-container .login-item p { font-size: 14px; font-family: PingFangSC-Semibold, PingFang SC; - color: #606266; + color: rgba(255, 255, 255, 0.65) } .login-container .login-item input { @@ -47,13 +47,13 @@ } .login-container .login-item .input-item { - background-color: #F5F7FA !important; - color: #303133; + background-color: #23274D !important; + color: rgba(255, 255, 255, 0.25); } .login-container .login-item .input-item { background: #FFFFFF; - border: 1px solid #BFC2CC; + border: 1px solid rgba(255, 255, 255, 0.050980392156862744);; text-indent: 10px; margin-top: 5px; } @@ -84,8 +84,7 @@ border: none; border-radius: 6px; font-size: 16px; - font-weight: bold; - background: #BFC2CC; + background: rgba(255, 255, 255, 0.25); height: 56px; cursor: pointer; } @@ -100,30 +99,30 @@ cursor: pointer; } -.registerBtn .register-em { - color: #909399; +.registerBtn .register-em { + color: rgba(255, 255, 255, 0.45); font-size: 14px; } .registerBtn .register-a { - color: #1C8D36; - font-weight: bold; + color: #00A1E8; + font-weight: 500; } /* .completed{ - background-color: #1C8D36; + background-color: #006CFF; } */ .disabledSubmit { - background: #BFC2CC; + background: rgba(255, 255, 255, 0.25); } .activeSubmit { - background-color: #1C8D36 !important; + background-color: #006CFF !important; } .login-Forget-item a { - color: #606266; + color: rgba(255, 255, 255, 0.65); } .login-Forget-item a:hover { @@ -131,20 +130,20 @@ } input::-webkit-input-placeholder { - color: #BFC2CC; + color: rgba(255, 255, 255, 0.64);; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: #BFC2CC; + color: rgba(255, 255, 255, 0.64);; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: #BFC2CC; + color: rgba(255, 255, 255, 0.64);; } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #BFC2CC; + color: rgba(255, 255, 255, 0.64);; } \ No newline at end of file diff --git a/css/news.css b/css/news.css index 7eb9ee2..9ed81c3 100644 --- a/css/news.css +++ b/css/news.css @@ -1,19 +1,92 @@ -.newsHeader{ - border-bottom: solid 1px #EDEFF2; +.newsHeader { + border-bottom: solid 1px #edeff2; } -.newsContent .container{ - margin: 21px auto 0; +.newsContent { + background: #040610; } -.newsContent .container .tabs{ +.newsContent .container { + margin: 41px auto 72px; + padding: 40px; + display: flex; + justify-content: space-between; + background-color: #111534; + border-radius: 15px; +} + +.newsContent .container .tabs { font-size: 16px; font-weight: bold; color: #303133; margin-bottom: 20px; + border-radius: 8px; + width: 258px; + border: 1px solid #303552; + background: #23274d; +} + +.newsContent .container .tabs .tabsIsActiveOne { + height: 63px; + line-height: 63px; + color: rgba(255, 255, 255, 0.65); + padding-left: 49px; + border-bottom: 1px solid #303552; +} + +.newsContent .container .new_list { + width: 880px; } -.newsContent .container .tabs span{ +.newsContent .container .new_list .item { + margin-top: 24px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.newsContent .container .new_list .item .newImg { + width: 180px; + height: 135px; + border-radius: 6px; + margin-right: 24px; +} + +.newsContent .container .new_list .item .info .tit { + font-size: 20px; + font-family: SF Pro; + font-weight: 500; + line-height: 24px; + color: rgba(255, 255, 255, 0.85); +} +.newsContent .container .new_list .item .info .time { + margin: 6px 0 12px; + font-size: 14px; + font-family: SF Pro; + font-weight: 400; + line-height: 27px; + color: rgba(255, 255, 255, 0.25); + opacity: 1; +} +.newsContent .container .new_list .item .info .time img { + width: 20px; + height: 20px; + border-radius: 50%; +} +.newsContent .container .new_list .item .info .content { + font-size: 16px; + font-family: SF Pro; + font-weight: 400; + line-height: 24px; + color: rgba(255, 255, 255, 0.45); + text-overflow: -o-ellipsis-lastline; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +/* .newsContent .container .tabs span{ cursor: pointer; margin-right: 12px; padding: 8px 0; @@ -33,16 +106,16 @@ bottom: 0px; left: 50%; transform: translateX(-50%); -} +} */ -.newsContent .container .newList .new-item{ +.newsContent .container .newList .new-item { display: flex; align-items: center; margin-bottom: 20px; cursor: pointer; } -.newsContent .container .newList .new-item .new_img{ +.newsContent .container .newList .new-item .new_img { width: 180px; height: 135px; border-radius: 15px; @@ -50,32 +123,32 @@ position: relative; } -.newsContent .container .newList .new-item .new_img img{ +.newsContent .container .newList .new-item .new_img img { width: 180px; height: 135px; } -.newsContent .container .newList .new-item .new_img .new_block{ +.newsContent .container .newList .new-item .new_img .new_block { height: 29px; position: absolute; bottom: 10px; right: 10px; - background-image: linear-gradient(to left, #1C8D36, #FFA3DC); + background-image: linear-gradient(to left, #1c8d36, #ffa3dc); border-radius: 6px; - color: #FFFFFF; + color: #ffffff; padding: 7px 12px; } -.newsContent .container .newList .new-item .new_img .new_block img{ +.newsContent .container .newList .new-item .new_img .new_block img { width: 100%; height: 100%; } -.newsContent .container .newList .new-item .new_text .new_tit{ +.newsContent .container .newList .new-item .new_text .new_tit { font-size: 20px; color: #303133; font-weight: bold; } -.newsContent .container .newList .new-item .new_text .new_info{ +.newsContent .container .newList .new-item .new_text .new_info { display: flex; align-items: center; color: #909399; @@ -83,14 +156,14 @@ margin: 12px 0; } -.newsContent .container .newList .new-item .new_text .new_info img{ +.newsContent .container .newList .new-item .new_text .new_info img { width: 20px; height: 20px; border-radius: 50%; margin-right: 6px; } -.newsContent .container .newList .new-item .new_text .new_content{ +.newsContent .container .newList .new-item .new_text .new_content { font-size: 16px; color: #606266; text-overflow: -o-ellipsis-lastline; @@ -101,21 +174,26 @@ -webkit-box-orient: vertical; } -.newsContent .container .pagination{ +.newsContent .container .pagination { text-align: center; margin: 30px auto 60px; } -.layui-laypage-em{ - background-color: #1C8D36 !important; +.layui-laypage-em { + background-color: #111534 !important; +} +.layui-laypage a, .layui-laypage span { + background-color: transparent; + border: none; + color: rgba(255, 255, 255, 0.45); } .layui-laypage a:hover { - color: #1C8D36; + color: #006CFF; } -.newcon{ - background: #fff !important; - padding: 0; +.newcon { + /* background: #fff !important; */ + padding: 0; } -.flex{ +.flex { flex-wrap: wrap; -} \ No newline at end of file +} diff --git a/css/register.css b/css/register.css index c4cd019..009fe62 100644 --- a/css/register.css +++ b/css/register.css @@ -6,19 +6,19 @@ .login-container{ width: 420px; height: 556px; - background: #FFFFFF; + background: #111534; border-radius: 6px; padding: 40px; } .login-item .tips{ font: 12px "Arial"; - color: #909399; + color: rgba(255, 255, 255, 0.45); margin-top: 8px; display: inline-block; } .login-item .tips .color-blue{ font-size: 16px; - color: #1C8D36; + color: #00A1E8; } .mt10{ margin-top: 10px !important; diff --git a/html/exchange.html b/html/exchange.html index 0010429..00e5cea 100644 --- a/html/exchange.html +++ b/html/exchange.html @@ -1,301 +1,339 @@ - - - exchange - - - - + + + exchange + + + + - + - - -
-
- -
-
- - Log In - Sign-up - - - Support -
- ENG -
- - CHN -
+
+
+ +
+
+ + Log In + Sign-up + + + Support +
+ ENG +
+ + CHN
-
-
- Trade - News - Innovation - Wallet
- +
+ Trade + News + Innovation + Wallet +
+
+
-
-
-
-
- BTC - / USD -
-
-

Last Price

-

32,884.72

-
-
-

Last Price

-

32,884.72

+
+
+
+
+ BTC + / USD +
+
+

Last Price

+

32,884.72

+
+
+

Last Price

+

32,884.72

+
+
+

Last Price

+

32,884.72

+
+
+

Last Price

+

32,884.72

+
+
+

Last Price

+

32,884.72

+
+
+ + +
+
+
  • Optional
    • +
  • BTC
    • +
  • USD
    • +
  • USDC
    • +
    +
    +
    +
    +
    Trade History
    +
    -
    -

    Last Price

    -

    32,884.72

    +
    +
    -
    -

    Last Price

    -

    32,884.72

    +
    +
    -
    -

    Last Price

    -

    32,884.72

    +
    +
    + +
    - -
    - +
    + -
    -
    -
    -
    -
    32847.59
    -
    -
    -
    -
    -
    -
    -
    -
    Lastest 40025.41 USDT ≈ $40025.410000
    -
    -
    -
    +
    +
    +
    +
    +
    32847.59 ↑
    +
    -
    - -
    -
    -
  • BTC
    • -
  • USD
    • -
  • USDC
    • -
  • ETH
    • -
    -
    -
    -
    -
    Trade History
    -
    -
    -
    -
    +
    +
    +
    -
    -
    +
    Lastest 40025.41 USDT ≈ $40025.410000
    +
    +
    -
    -
    -
    - -
    -
    - -
    -
      -
    • Tradingview
      • -
    • Deptrh
      • -
    -
    -
    -
    - BTC/USDT12844.97 - Change+0.53% - Open12844.97 - High12844.97 - LowT12844.97 - 24H Vol936.369 BTC -
    -
    -
    +
    + +
    +
      +
    • Tradingview
      • +
    • Deptrh
      • +
    +
    +
    +
    + BTC/USDT12844.97 + Change+0.53% + Open12844.97 + High12844.97 + LowT12844.97 + 24H Vol936.369 BTC
    -
    - -
    +
    -
    -
    -

    Limit

    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    +

    Limit

    +
    +
    +
    +
    +
    Buy ALGO
    -
    -

    Available 0.12 USDT

    - Recharge +
    + -USD
    -
    - - Price: - USDT -
    -
    - - Amount: - BTC +
    + +
    + + Price: + USD +
    +
    + + Amount: + ALGO +
    + +
    + 25% + 50% + 75% + 100% +
    + + +
    + + Total: + USD -
    -
    -
    Total
    -
    - USDT - -
    -
    -
    Sign in or Sign up Now to trade
    - - -
    -
    -
    + +
    Log In or Register Now to trade
    + + + +
    +
    +
    +
    Buy ALGO
    -
    -

    Available 0.12 USDT

    - Recharge +
    + -USD
    -
    - - Price: - USDT -
    -
    - - Amount: - BTC +
    + +
    + + Price: + USD +
    +
    + + Amount: + ALGO +
    + +
    + 25% + 50% + 75% + 100% +
    + +
    + + Total: + USD -
    -
    -
    Total
    -
    - USDT - -
    -
    -
    Sign in or Sign up Now to trade
    - - -
    + +
    Log In or Register Now to trade
    + + +
    +
    - - -
    - - help -
    -     + + +
    + + help +
    +     -
    -
    - -
    -
      -
    • Delegate
      • -
    • History Delegate
      • -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    + +
    +
      +
    • Delegate
      • +
    • History Delegate
      • +
    +
    +
    +
    +
    +
    +
    +
    - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - + + + + - + + - + \ No newline at end of file diff --git a/html/news.html b/html/news.html index 42af358..dd7ec1e 100644 --- a/html/news.html +++ b/html/news.html @@ -18,56 +18,148 @@ -
    - Bitcoin News +
    + Bitcoin News +
    +
    + Ethereum News +
    +
    + Litecoin News +
    +
    + Ripple News +
    +
    + Action News +
    +
    + Blockchain News +
    + +
    +
    +
    + +
    +
    + More Americans have heard of Dogecoin than Ethereum: Survey +
    +
    + + Greg Thomson｜MAY 25, 2021 +
    +
    + Short-term profit opportunities are there, but so are concerns over a “panic” sell-off + still absent from BTC price charts.Short-term profit opportunities are there, but so are + concerns over a +
    +
    +
    +
    + +
    +
    + More Americans have heard of Dogecoin than Ethereum: Survey +
    +
    + + Greg Thomson｜MAY 25, 2021 +
    +
    + Short-term profit opportunities are there, but so are concerns over a “panic” sell-off + still absent from BTC price charts.Short-term profit opportunities are there, but so are + concerns over a +
    +
    +
    +
    + +
    +
    + More Americans have heard of Dogecoin than Ethereum: Survey +
    +
    + + Greg Thomson｜MAY 25, 2021 +
    +
    + Short-term profit opportunities are there, but so are concerns over a “panic” sell-off + still absent from BTC price charts.Short-term profit opportunities are there, but so are + concerns over a +
    +
    +
    +
    + +
    +
    + More Americans have heard of Dogecoin than Ethereum: Survey +
    +
    + + Greg Thomson｜MAY 25, 2021 +
    +
    + Short-term profit opportunities are there, but so are concerns over a “panic” sell-off + still absent from BTC price charts.Short-term profit opportunities are there, but so are + concerns over a +
    +
    +
    + +
    -
    + - -
    - - help -
    -     +
    --> + + + +
    + + help +
    +
    - +
    -
    -
    - -
    - copyright©2021 Bitslead -
    -
    - bitslead@gmail.com -
    -
    - Please pay attention to the market risk of cryptocurrency Trading -
    -
    - - -
    -
    -
    -
    - GUIDE - Futures Guide - Apply For Listing - Perpetual Contracts Guide -
    -
    - LEARN - Cryptocurrency - Smart Contract - Development of Blockchain +
    +
    + +
    + copyright©2021 Bitslead +
    +
    + bitslead@gmail.com +
    +
    + Please pay attention to the market risk of cryptocurrency Trading +
    +
    + + +
    -
    - SERVICE - Agrement - Security Guide +
    +
    + GUIDE + Futures Guide + Apply For Listing + Perpetual Contracts Guide +
    +
    + LEARN + Cryptocurrency + Smart Contract + Development of Blockchain +
    +
    + SERVICE + Agrement + Security Guide +
    -
    -
    +
    -
    -
    -
    - All rights reserved © 2021 Bitstamp. NMLS #1905429 -
    -
    - - - -
    -
    - - - -
    -
    -
    +
    +
    +
    + All rights reserved © 2021 Bitstamp. NMLS #1905429 +
    +
    + + + +
    +
    + + + +
    +
    +
    -
    -
    -
    - We use cookies and similar technologies to operate core site features, customize core services, analyze our traffic, and for security and marketing. Accept all cookies, customize your settings or read our full Cookie Policy. -
    -
    - Customize - Enable all -
    -
    -
    +
    +
    +
    + We use cookies and similar technologies to operate core site features, customize core + services, analyze our traffic, and for security and marketing. Accept all cookies, + customize your settings or read our full Cookie Policy. +
    +
    + Customize + Enable all +
    +
    +
    diff --git a/image/bg.png b/image/bg.png index c9ec529..d798b1c 100644 Binary files a/image/bg.png and b/image/bg.png differ diff --git a/image/logo@2x.png b/image/logo@2x.png index f6f20c9..affc480 100644 Binary files a/image/logo@2x.png and b/image/logo@2x.png differ diff --git a/js/exchange.js b/js/exchange.js index f53cd99..297c159 100644 --- a/js/exchange.js +++ b/js/exchange.js @@ -1,6 +1,6 @@ - layui.config({base: '../layui/plug/tablePlug/'}).use(['table', 'element', 'tablePlug'], function () { - +layui.config({ base: '../layui/plug/tablePlug/' }).use(['table', 'element', 'tablePlug'], function () { + // $(document).ready(function(){ // $('.main-sidebar-left').click(function(e){ // console.log(1) @@ -13,125 +13,125 @@ // }) // }); - - $('.main-sidebar-left').on('click',function(e){ + + $('.main-sidebar-left').on('click', function (e) { console.log(1) - -}) -$('.main-sidebar-left').on('click','.coinClass',function(e){ - console.log(2) - e.stopPropagation(); - e.preventDefault(); - }) + + }) + $('.main-sidebar-left').on('click', '.coinClass', function (e) { + console.log(2) + e.stopPropagation(); + e.preventDefault(); + }) const table = layui.table // fav const fav = table.render({ - elem: '#fav', - data: [ - {coin: 'BSV', flag: 1, latest: '$176.2997', change: 1.61}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - {coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11}, - ], - cols: [[ - { field: 'coin', title: 'Price', width: '30%', templet: renderCoin }, - { field: 'latest', title: 'Amount', width: '35%', templet: renderLatest, align: 'right', sort: true }, - { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } - ]], - skin: 'nob', - page: false - }) - // usdt - const usdt = table.render({ - elem: '#usdt', - data: [], - cols: [[ - { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, - { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, - { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } - ]], - skin: 'nob', - page: false, - }) + elem: '#fav', + data: [ + { coin: 'BSV', flag: 1, latest: '$176.2997', change: 1.61 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + { coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 }, + ], + cols: [[ + { field: 'coin', title: 'Price', width: '30%', templet: renderCoin }, + { field: 'latest', title: 'Amount', width: '35%', templet: renderLatest, align: 'right', sort: true }, + { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } + ]], + skin: 'nob', + page: false + }) + // + const usd = table.render({ + elem: '#usd', + data: [], + cols: [[ + { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, + { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, + { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } + ]], + skin: 'nob', + page: false, + }) // btc const btc = table.render({ - elem: '#btc', - data: [], - cols: [[ - { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, - { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, - { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } - ]], - skin: 'nob', - page: false, - }) - // eth - const eth = table.render({ - elem: '#eth', - data: [], - cols: [[ - { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, - { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, - { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } - ]], - skin: 'nob', - page: false, - }) + elem: '#btc', + data: [], + cols: [[ + { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, + { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, + { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } + ]], + skin: 'nob', + page: false, + }) + // usdc + const usdc = table.render({ + elem: '#usdc', + data: [], + cols: [[ + { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, + { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, + { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } + ]], + skin: 'nob', + page: false, + }) + - - - - const rec = table.render({ - elem: '#rec', - data: [ - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - {coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39'}, - - ], - cols: [[ - { field: 'coin2', title: 'Price', width: '30%' }, - { field: 'latest2', title: 'Amount', width: '35%' }, - { field: 'change2', title: 'Time', width: '35%' } - ]], - skin: 'nob', //表格风格 - }) - + const optional = table.render({ + elem: '#optional', + data: [ + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + { coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' }, + + ], + cols: [[ + { field: 'coin2', title: 'Price', width: '30%' }, + { field: 'latest2', title: 'Amount', width: '35%' }, + { field: 'change2', title: 'Time', width: '35%' } + ]], + skin: 'nob', //表格风格 + + }) + + @@ -141,265 +141,265 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){ // marketTrades const marketTrades = table.render({ - elem: '#marketTrades', - data: [ - {price: '32847.59', flag: 0, amount: '0.34980', time: '299.99133496'}, - ], - cols: [[ - { field: 'price', title: 'Price(USD)', width: '30%' }, - { field: 'amount', title: 'Amount (BTC)', width: '35%', align: 'right' }, - { field: 'time', title: 'Total(USD)', width: '35%', align: 'right' } - ]], - skin: 'nob', - page: false, - }) + elem: '#marketTrades', + data: [ + { price: '32847.59', flag: 0, amount: '0.34980', time: '299.99133496' }, + ], + cols: [[ + { field: 'price', title: 'Price(USD)', width: '30%' }, + { field: 'amount', title: 'Amount (BTC)', width: '35%', align: 'right' }, + { field: 'time', title: 'Total(USD)', width: '35%', align: 'right' } + ]], + skin: 'nob', + page: false, + }) -// recc - - const recc = table.render({ - elem: '#recc', - data: [ - {coin3: '32.89923', flag: 0, latest3: '0.003637', change3: '22:11:39'}, - ], - cols: [[ - { field: 'coin3', title: 'Price', width: '30%' }, - { field: 'latest3', title: 'Amount', width: '35%' }, - { field: 'change3', title: 'Time', width: '35%' } - ]], - skin: 'nob', - page: false, - }) + // recc + + const recc = table.render({ + elem: '#recc', + data: [ + { coin3: '32.89923', flag: 0, latest3: '0.003637', change3: '22:11:39' }, + ], + cols: [[ + { field: 'coin3', title: 'Price', width: '30%' }, + { field: 'latest3', title: 'Amount', width: '35%' }, + { field: 'change3', title: 'Time', width: '35%' } + ]], + skin: 'nob', + page: false, + }) - // orderbook + // orderbook const orderbook = table.render({ - elem: '#orderbook', - data: [], - cols: [[ - { field: 'price', title: 'Price', width: '30%' }, - { field: 'amount', title: 'Amount', width: '35%', align: 'right' }, - { field: 'total', title: 'Total', width: '35%', align: 'right' } - ]], - skin: 'nob', - page: false, - }) - // Delegate + elem: '#orderbook', + data: [], + cols: [[ + { field: 'price', title: 'Price', width: '30%' }, + { field: 'amount', title: 'Amount', width: '35%', align: 'right' }, + { field: 'total', title: 'Total', width: '35%', align: 'right' } + ]], + skin: 'nob', + page: false, + }) + // Delegate const Delegate = table.render({ - elem: '#Delegate', - data: [], - cols: [[ - { field: 'time', title: 'Time', width: '20%', align: 'center' }, - { field: 'direction', title: 'Direction', width: '20%', align: 'center' }, - { field: 'price', title: 'Price', width: '15%', align: 'center' }, - { field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' }, - { field: 'done', title: 'Symbol', width: '15%', align: 'center' }, - { field: 'action', title: 'Status', width: '15%', align: 'center' } - ]], - skin: 'nob', - page: false, - }) + elem: '#Delegate', + data: [], + cols: [[ + { field: 'time', title: 'Time', width: '20%', align: 'center' }, + { field: 'direction', title: 'Direction', width: '20%', align: 'center' }, + { field: 'price', title: 'Price', width: '15%', align: 'center' }, + { field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' }, + { field: 'done', title: 'Symbol', width: '15%', align: 'center' }, + { field: 'action', title: 'Status', width: '15%', align: 'center' } + ]], + skin: 'nob', + page: false, + }) // HistoryDelegate const HistoryDelegate = table.render({ - elem: '#HistoryDelegate', - data: [], - cols: [[ - { field: 'time', title: 'Time', width: '20%', align: 'center' }, - { field: 'direction', title: 'Direction', width: '20%', align: 'center' }, - { field: 'price', title: 'Price', width: '15%', align: 'center' }, - { field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' }, - { field: 'done', title: 'Symbol', width: '15%', align: 'center' }, - { field: 'status', title: 'Status', width: '15%', align: 'center' } - ]],/* */ - skin: 'nob', - page: false, + elem: '#HistoryDelegate', + data: [], + cols: [[ + { field: 'time', title: 'Time', width: '20%', align: 'center' }, + { field: 'direction', title: 'Direction', width: '20%', align: 'center' }, + { field: 'price', title: 'Price', width: '15%', align: 'center' }, + { field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' }, + { field: 'done', title: 'Symbol', width: '15%', align: 'center' }, + { field: 'status', title: 'Status', width: '15%', align: 'center' } + ]],/* */ + skin: 'nob', + page: false, + }) + //点击星星 + $('.main-sidebar-left').on('click', '.coinClass', function (event) { + event.stopPropagation() + event.preventDefault() + let flag = $(this).hasClass('layui-icon-rate-solid'); + if (flag) { + $(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate') + } else { + $(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid') + } + }).on('click', 'tr', function () { + let title = $('.main-sidebar-left .layui-tab-title .layui-this').text(); + let trSpan = $(this).find('td').find('.coin-text').text() + $('#detailPair').html(trSpan + '/' + title) + }).on('click', '.layui-tab-title li', function () { + }) + + var ws = new WebSocket("ws://localhost:9998/echo"); + + ws.onopen = function () { + // Web Socket 已连接上，使用 send() 方法发送数据 + // ws.send("发送数据"); + // alert("数据发送中..."); + }; + + ws.onmessage = function (evt) { + var received_msg = evt.data; + + // alert("数据已接收..."); + fav.reload({ + data: [] + }) + usd.reload({ + data: [] + }) + btc.reload({ + data: [] + }) + usdc.reload({ + data: [] + }) + marketTrades.reload({ + data: [] + }) + orderbook.reload({ + data: [] + }) + Delegate.reload({ + data: [] + }) + HistoryDelegate.reload({ + data: [] }) - //点击星星 - $('.main-sidebar-left').on('click','.coinClass',function(event){ - event.stopPropagation() - event.preventDefault() - let flag = $(this).hasClass('layui-icon-rate-solid'); - if(flag){ - $(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate') - } else { - $(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid') - } - }).on('click','tr',function(){ - let title = $('.main-sidebar-left .layui-tab-title .layui-this').text(); - let trSpan = $(this).find('td').find('.coin-text').text() - $('#detailPair').html(trSpan+'/'+title) - }) .on('click','.layui-tab-title li',function(){ - }) - - var ws = new WebSocket("ws://localhost:9998/echo"); - - ws.onopen = function() { - // Web Socket 已连接上，使用 send() 方法发送数据 - // ws.send("发送数据"); - // alert("数据发送中..."); - }; - - ws.onmessage = function (evt) { - var received_msg = evt.data; - - // alert("数据已接收..."); - fav.reload({ - data: [] - }) - usdt.reload({ - data: [] - }) - btc.reload({ - data: [] - }) - eth.reload({ - data: [] - }) - marketTrades.reload({ - data: [] - }) - orderbook.reload({ - data: [] - }) - Delegate.reload({ - data: [] - }) - HistoryDelegate.reload({ - data: [] - }) - } - ws.onclose = function () { - // 关闭 websocket - // alert("连接已关闭..."); - }; - - - // getKline() - - - $('.compute').on('input propertychange change', function(e) { - const that = $(this) - const type = that.data('type') - $(`[name="${type}Total"]`).val( - Array.from($(`input[data-type="${type}"]`)).reduce((acc, cur) => { - return acc.times(new BigNumber($(cur).val() || 0)) - }, new BigNumber(1)).toFixed(8) - ) - }) - $('[placeholder="Price"]').on('blur', function() { + } + ws.onclose = function () { + // 关闭 websocket + // alert("连接已关闭..."); + }; + + + // getKline() + + + $('.compute').on('input propertychange change', function (e) { + const that = $(this) + const type = that.data('type') + $(`[name="${type}Total"]`).val( + Array.from($(`input[data-type="${type}"]`)).reduce((acc, cur) => { + return acc.times(new BigNumber($(cur).val() || 0)) + }, new BigNumber(1)).toFixed(8) + ) + }) + $('[placeholder="Price"]').on('blur', function () { const value = $(this).val() - if(value) { + if (value) { $(this).val(new BigNumber(value).toFixed(2)).change() } }) - $('[placeholder="Amount"]').on('blur', function() { + $('[placeholder="Amount"]').on('blur', function () { const value = $(this).val() - if(value) { + if (value) { $(this).val(new BigNumber(value).toFixed(4)).change() } }) - - function renderCoin(data) { - return `${data.coin}` - } - function renderLatest (data) { - return data.latest - } - function renderChange (data) { - const isBuy = data.change > 0 - return `${isBuy ? '+' : ''}${data.change}%` - } + + function renderCoin(data) { + return `${data.coin}` + } + function renderLatest(data) { + return data.latest + } + function renderChange(data) { + const isBuy = data.change > 0 + return `${isBuy ? '+' : ''}${data.change}%` + } }) function getKline() { - let config = { - autosize: true, - fullscreen: true, - symbol: 'AAAA', - interval: "1", - timezone: "Asia/Shanghai", - toolbar_bg: "#18202a", - container_id: "kLineContainer", - datafeed: new WebsockFeed(), - library_path: "./charting_library/", - locale: "zh", - debug: false, - drawings_access: { - type: "black", - tools: [{ name: "Regression Trend" }] - }, - disabled_features: [ - "header_resolutions", - "timeframes_toolbar", - "header_symbol_search", - "header_chart_type", - "header_compare", - "header_undo_redo", - "header_screenshot", - "header_saveload", - "use_localstorage_for_settings", - "left_toolbar", - "volume_force_overlay" - ], - enabled_features: [ - "hide_last_na_study_output", - "move_logo_to_main_pane" - ], - custom_css_url: "bundles/common.css", - supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W", "1M"], - charts_storage_url: "http://saveload.tradingview.com", - charts_storage_api_version: "1.1", - client_id: "tradingview.com", - user_id: "public_user_id", - overrides: { - "paneProperties.background": "#1B1E2E", - "paneProperties.vertGridProperties.color": "rgba(0,0,0,.1)", - "paneProperties.horzGridProperties.color": "rgba(0,0,0,.1)", - //"scalesProperties.textColor" : "#AAA", - "scalesProperties.textColor": "#61688A", - "mainSeriesProperties.candleStyle.upColor": "#589065", - "mainSeriesProperties.candleStyle.downColor": "#AE4E54", - "mainSeriesProperties.candleStyle.drawBorder": false, - "mainSeriesProperties.candleStyle.wickUpColor": "#589065", - "mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54", - "paneProperties.legendProperties.showLegend": false, - - "mainSeriesProperties.areaStyle.color1": "rgba(71, 78, 112, 0.5)", - "mainSeriesProperties.areaStyle.color2": "rgba(71, 78, 112, 0.5)", - "mainSeriesProperties.areaStyle.linecolor": "#9194a4" - }, - time_frames: [ - { - text: "1min", - resolution: "1", - description: "realtime", - title: 'KLineC' - }, - { text: "1min", resolution: "1", description: "1min" }, - { text: "5min", resolution: "5", description: "5min" }, - { text: "15min", resolution: "15", description: "15min" }, - { text: "30min", resolution: "30", description: "30min" }, - { - text: "1hour", - resolution: "60", - description: "1hour", - title: "1hour" - }, - /*{ text: "4hour", resolution: "240", description: "4hour",title: "4hour" },*/ - { - text: "1day", - resolution: "1D", - description: "1day", - title: "1day" - }, - { - text: "1week", - resolution: "1W", - description: "1week", - title: "1week" - }, - { text: "1mon", resolution: "1M", description: "1mon" } - ] - }; + let config = { + autosize: true, + fullscreen: true, + symbol: 'AAAA', + interval: "1", + timezone: "Asia/Shanghai", + toolbar_bg: "#18202a", + container_id: "kLineContainer", + datafeed: new WebsockFeed(), + library_path: "./charting_library/", + locale: "zh", + debug: false, + drawings_access: { + type: "black", + tools: [{ name: "Regression Trend" }] + }, + disabled_features: [ + "header_resolutions", + "timeframes_toolbar", + "header_symbol_search", + "header_chart_type", + "header_compare", + "header_undo_redo", + "header_screenshot", + "header_saveload", + "use_localstorage_for_settings", + "left_toolbar", + "volume_force_overlay" + ], + enabled_features: [ + "hide_last_na_study_output", + "move_logo_to_main_pane" + ], + custom_css_url: "bundles/common.css", + supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W", "1M"], + charts_storage_url: "http://saveload.tradingview.com", + charts_storage_api_version: "1.1", + client_id: "tradingview.com", + user_id: "public_user_id", + overrides: { + "paneProperties.background": "#1B1E2E", + "paneProperties.vertGridProperties.color": "rgba(0,0,0,.1)", + "paneProperties.horzGridProperties.color": "rgba(0,0,0,.1)", + //"scalesProperties.textColor" : "#AAA", + "scalesProperties.textColor": "#61688A", + "mainSeriesProperties.candleStyle.upColor": "#589065", + "mainSeriesProperties.candleStyle.downColor": "#AE4E54", + "mainSeriesProperties.candleStyle.drawBorder": false, + "mainSeriesProperties.candleStyle.wickUpColor": "#589065", + "mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54", + "paneProperties.legendProperties.showLegend": false, + + "mainSeriesProperties.areaStyle.color1": "rgba(71, 78, 112, 0.5)", + "mainSeriesProperties.areaStyle.color2": "rgba(71, 78, 112, 0.5)", + "mainSeriesProperties.areaStyle.linecolor": "#9194a4" + }, + time_frames: [ + { + text: "1min", + resolution: "1", + description: "realtime", + title: 'KLineC' + }, + { text: "1min", resolution: "1", description: "1min" }, + { text: "5min", resolution: "5", description: "5min" }, + { text: "15min", resolution: "15", description: "15min" }, + { text: "30min", resolution: "30", description: "30min" }, + { + text: "1hour", + resolution: "60", + description: "1hour", + title: "1hour" + }, + /*{ text: "4hour", resolution: "240", description: "4hour",title: "4hour" },*/ + { + text: "1day", + resolution: "1D", + description: "1day", + title: "1day" + }, + { + text: "1week", + resolution: "1W", + description: "1week", + title: "1week" + }, + { text: "1mon", resolution: "1M", description: "1mon" } + ] + }; } // TradingView.onready(function() { // var widget = (window.tvWidget = new TradingView.widget(config)); @@ -565,7 +565,7 @@ function getKline() { // // } deptrh() // 深度图 -function deptrh(){ +function deptrh() { Highcharts.chart('deptrhContainer', { chart: { type: 'area' @@ -573,7 +573,7 @@ function deptrh(){ title: { text: '' }, - xAxis: { + xAxis: { gridLineWidth: 0, lineColor: "#6c7279", tickColor: "#c1c1c1", @@ -583,13 +583,13 @@ function deptrh(){ } }, title: { - text:'Price BTC', + text: 'Price BTC', style: { color: "#fff" } } }, - yAxis: { + yAxis: { opposite: !0, gridLineWidth: 0, lineColor: "#6c7279", @@ -613,7 +613,7 @@ function deptrh(){ align: "center", alignColumns: !0, layout: "horizontal", - labelFormatter: function() { + labelFormatter: function () { return this.name }, borderColor: "#999999", @@ -652,7 +652,7 @@ function deptrh(){ }, backgroundColor: 'rgba(0,0,0,0)' }, - loading: { + loading: { labelStyle: { fontWeight: "bold", position: "relative", @@ -667,18 +667,18 @@ function deptrh(){ }, plotOptions: { area: { - pointStart: 0, - marker: { - enabled: !1, - symbol: "circle", - radius: 2, - states: { - hover: { - enabled: !0 - } - } + pointStart: 0, + marker: { + enabled: !1, + symbol: "circle", + radius: 2, + states: { + hover: { + enabled: !0 } - }, + } + } + }, series: { fillOpacity: 1 } @@ -688,14 +688,14 @@ function deptrh(){ valueDecimals: 2 }, series: [{ - color: "#589065", - name: "Buying Commission", - data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [780, 12], [900, 12]] - }, { - color: "#AE4E54", - name: "Selling commission", - data: [[910, 8], [1e3, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]] - }] + color: "#589065", + name: "Buying Commission", + data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [780, 12], [900, 12]] + }, { + color: "#AE4E54", + name: "Selling commission", + data: [[910, 8], [1e3, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]] + }] }); }