jack
/
jysBlack2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1230

master
Dread 4 years ago
parent
657bfc664a 7a27bc75ce
commit
bd9ba33fe2
11 changed files with 1202 additions and 903 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      css/common.css
  2. 302
      css/exchange.css
  3. 17
      css/forgetPassword.css
  4. 4
      css/index.css
  5. 34
      css/login.css
  6. 129
      css/news.css
  7. 8
      css/register.css
  8. 524
      html/exchange.html
  9. 289
      html/news.html
  10. BIN
      image/bg.png
  11. 748
      js/exchange.js

50
css/common.css
View File

@ -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: #006CFF;
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: #006CFF;
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;
@ -115,7 +118,7 @@ cursor: pointer;
padding: 0px 20px;
line-height: 42px;
background-color: #fff;
color: #006CFF;
color: #1C8D36;
text-align: left;
font-size: 14px;
position: relative;
@ -144,7 +147,7 @@ cursor: pointer;
display: block;
}
.LogList a.active,.LogList a:hover{
background-color: #006CFF;
background-color: #1C8D36;
color: #fff;
}
.language-list{
@ -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%;
@ -261,7 +264,7 @@ cursor: pointer;
}
.header .header_content .header_tabs .newList p:hover a{
color: #006CFF;
color: #1C8D36;
}
@ -272,7 +275,7 @@ cursor: pointer;
.foot_top{
width: 100%;
background: url(../image/bg1@2x.png)no-repeat;
background: url(../image/footbg.png)no-repeat;
background-size: cover;
padding-top: 98px;
padding-bottom: 80px;
@ -322,7 +325,6 @@ margin-right: 140px;
font-size: 14px;
}
.foot_center{
background-color: #000000;
}
.foot_center .rq{
@ -330,7 +332,7 @@ margin-right: 140px;
padding: 25px 0;
}
.foot_center .p1{
color: #999999;
color: rgba(255, 255, 255, 0.25);
font-size: 14px;
}
@ -360,14 +362,14 @@ margin-right: 140px;
display: inline-block;
width: 200px;
line-height: 56px;
border: 1px solid #006CFF;
border: 1px solid #1C8D36;
border-radius: 200px;
text-align: center;
color: #006CFF;
color: #1C8D36;
font-size: 18px;
}
.foot_bottom .rq .div2 a.active{
background-color: #006CFF;
background-color: #1C8D36;
color: #fff;
margin-left: 20px;
}
@ -387,7 +389,7 @@ input {
}
input:focus, input:hover {
border-color: #006CFF;
border-color: #1C8D36;
outline: none
}
@ -396,7 +398,7 @@ input:focus, input:hover {
}
.activeSubmit {
background-color: #006CFF !important;
background-color: #1C8D36 !important;
}
/***校验样式***/
@ -427,10 +429,10 @@ label.error{
/* layui.css 覆盖样式 */
.layui-tab-brief>.layui-tab-title .layui-this {
color: #006CFF;
color: #1C8D36;
}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
border-color: #006CFF;
border-color: #1C8D36;
}
.layui-tab {
margin: 0;
@ -449,7 +451,7 @@ label.error{
border-color: #E9EAEC;
}
.layui-btn {
background-color: #006CFF;
background-color: #1C8D36;
}
.layui-form-select dl dd.layui-this {
background-color: #303133;

302
css/exchange.css
View File

@ -1,19 +1,22 @@
.trade {
color: #FFFFFF !important;
background-image: linear-gradient(to right, #FFA3DC, #006CFF);
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: #006CFF;
color: #006cff;
opacity: 1;
border-bottom: 2px solid #006CFF;
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: #006CFF;
.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: #006CFF !important;
border-color: #006cff !important;
}
.exchange-input .layui-input:focus {
border-color: #006CFF !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: #006CFF;
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: #006CFF;
color: #006cff;
font-size: 14px;
}
.exchange-btn a{
color: #006CFF;
.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 #006CFF;
border: 1px solid #006cff;
}
.exchange-btn:hover.buy-btn{
background-color: #006CFF;
.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: #006CFF;
color: #006cff;
font-size: 14px;
}
.main-tabs-nav.layui-tab-title li.layui-this:after {
height: 38px;
border-color: #006CFF;
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: #006CFF;
.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: #006CFF;
.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: #006CFF;
color: #00cc5a;
}
.layui-table-body .laytable-cell-5-0-0{
color: #006CFF !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: #006CFF;
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: #006CFF;
}
.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: #006CFF;
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: #006CFF !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;
}
}

17
css/forgetPassword.css
View File

@ -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;
}

4
css/index.css
View File

@ -3,7 +3,11 @@
}
.header{
<<<<<<< HEAD
background-color: #111534;
=======
background-color: #040610;
>>>>>>> 7a27bc75ce9d20b60c7393b5fe4ea035b18d0052
}
.container{
width: 1366px;

34
css/login.css
View File

@ -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,14 +99,19 @@
cursor: pointer;
}
.registerBtn .register-em {
color: #909399;
.registerBtn .register-em {
color: rgba(255, 255, 255, 0.45);
font-size: 14px;
}
.registerBtn .register-a {
<<<<<<< HEAD
color: #006CFF;
font-weight: bold;
=======
color: #00A1E8;
font-weight: 500;
>>>>>>> 7a27bc75ce9d20b60c7393b5fe4ea035b18d0052
}
/* .completed{
@ -115,7 +119,7 @@
} */
.disabledSubmit {
background: #BFC2CC;
background: rgba(255, 255, 255, 0.25);
}
.activeSubmit {
@ -123,7 +127,7 @@
}
.login-Forget-item a {
color: #606266;
color: rgba(255, 255, 255, 0.65);
}
.login-Forget-item a:hover {
@ -131,20 +135,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);;
}

129
css/news.css
View File

@ -1,18 +1,92 @@
.newsHeader{
.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;
@ -32,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;
@ -49,32 +123,33 @@
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, #006CFF, #FFA3DC);
/* background-image: linear-gradient(to left, #006CFF, #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;
@ -82,14 +157,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;
@ -100,7 +175,7 @@
-webkit-box-orient: vertical;
}
.newsContent .container .pagination{
.newsContent .container .pagination {
text-align: center;
margin: 30px auto 60px;
}
@ -108,13 +183,21 @@
.layui-laypage-em{
background-color: #006CFF !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: #006CFF;
}
.newcon{
background: #fff !important;
padding: 0;
.newcon {
/* background: #fff !important; */
padding: 0;
}
.flex{
.flex {
flex-wrap: wrap;
}
}

8
css/register.css
View File

@ -6,19 +6,23 @@
.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;
<<<<<<< HEAD
color: #006CFF;
=======
color: #00A1E8;
>>>>>>> 7a27bc75ce9d20b60c7393b5fe4ea035b18d0052
}
.mt10{
margin-top: 10px !important;

524
html/exchange.html
View File

@ -1,301 +1,339 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>exchange</title>
<link type="text/css" rel="styleSheet" href="../layui/css/layui.css" />
<link type="text/css" rel="styleSheet" href="../css/common.css" />
<link type="text/css" rel="styleSheet" href="../css/exchange.css" />
<link type="text/css" rel="styleSheet" href="../css/help.css" />
<head>
<meta charset="utf-8" />
<title>exchange</title>
<link type="text/css" rel="styleSheet" href="../layui/css/layui.css" />
<link type="text/css" rel="styleSheet" href="../css/common.css" />
<link type="text/css" rel="styleSheet" href="../css/exchange.css" />
<link type="text/css" rel="styleSheet" href="../css/help.css" />
</head>
</head>
<body>
<!-- <div class="container headerBack">
<body>
<!-- <div class="container headerBack">
</div> -->
<div class="header bo-show">
<div class="header_content container">
<a href="../index.html" class="logo"><img src="../image/[email protected]" alt=""></a>
<div class="header_tabs">
<div class="acon1">
<span class="NotLog" v-show="isLogin2">
<a href="../html/login.html" class="a">Log In</a>
<a href="../html/register.html" class="a">Sign-up</a>
</span>
<span class="LogIn" v-show="isLogin">
<a href="" class="a">[email protected] <img src="../image/h1.png" alt="" class="h1"></a>
<div class="LogList">
<a href="securityCenter.html" class="active sc">Security center <img
src="../image/meun_icon_my_nor.png" alt=""></a>
<a href="javascript::" class="so" @click="logOut">Sign out
<img src="../image/pop_icon_signout.png" alt="" class="img1">
<img src="../image/pop_icon_signoutb.png" alt="" class="img2">
</a>
</div>
</span>
<a href="" class="a">Support</a>
<div class="language a">
<span class="language-text">ENG <img src="../image/h1.png" alt="" class="h1"></span>
<div class="language-list">
<!-- <a href="">ENG</a> -->
<a href="">CHN</a>
</div>
<div class="header bo-show">
<div class="header_content container">
<a href="../index.html" class="logo"><img src="../image/[email protected]" alt=""></a>
<div class="header_tabs">
<div class="acon1">
<span class="NotLog" v-show="isLogin2">
<a href="../html/login.html" class="a">Log In</a>
<a href="../html/register.html" class="a">Sign-up</a>
</span>
<span class="LogIn" v-show="isLogin">
<a href="" class="a">[email protected] <img src="../image/h1.png" alt="" class="h1"></a>
<div class="LogList">
<a href="securityCenter.html" class="active sc">Security center <img
src="../image/meun_icon_my_nor.png" alt=""></a>
<a href="javascript::" class="so" @click="logOut">Sign out
<img src="../image/pop_icon_signout.png" alt="" class="img1">
<img src="../image/pop_icon_signoutb.png" alt="" class="img2">
</a>
</div>
</span>
<a href="" class="a">Support</a>
<div class="language a">
<span class="language-text">ENG <img src="../image/h1.png" alt="" class="h1"></span>
<div class="language-list">
<!-- <a href="">ENG</a> -->
<a href="">CHN</a>
</div>
</div>
<div class="acon2">
<a href="exchange.html" class="active">Trade</a>
<a href="news.html">News</a>
<a href="innovate.html">Innovation</a>
<a href="wallet.html">Wallet</a>
</div>
</div>
<div class="acon2">
<a href="exchange.html" class="active">Trade</a>
<a href="news.html">News</a>
<a href="innovate.html">Innovation</a>
<a href="wallet.html">Wallet</a>
</div>
</div>
</div>
</div>
<div class="main" id="app">
<div class="container ma1">
<div class="main-sidebar-top flex">
<div class="one">
<span class="s1">BTC</span>
<span>/ USD</span>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
<div class="main" id="app">
<div class="container ma1">
<div class="main-sidebar-top flex">
<div class="one">
<span class="s1">BTC</span>
<span>/ USD</span>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
</div>
</div>
<!-- 左边栏 -->
<div class="main-sidebar-left layui-tab layui-tab-brief">
<div class="main-tabs-nav layui-tab-title">
<li class="layui-this">Optional</li>
<li>BTC</li>
<li>USD</li>
<li>USDC</li>
</div>
<div class="main-tabs-content layui-tab-content">
<div class="layui-tab-item layui-show">
<table lay-filter="fav" id="fav"></table>
<div class="Thtitle"><span>Trade History</span> </div>
<table lay-filter="optional" id="optional"></table>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
<div class="layui-tab-item">
<table lay-filter="usd" id="usd"></table>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
<div class="layui-tab-item">
<table lay-filter="btc" id="btc"></table>
</div>
<div class="two">
<p class="p1">Last Price</p>
<p class="p2">32,884.72</p>
<div class="layui-tab-item">
<table lay-filter="usdc" id="usdc"></table>
</div>
</div>
<!-- 右边栏 -->
<div class="main-sidebar-right layui-tab layui-tab-brief">
<!-- <div class="main-tabs-nav layui-tab-title">
</div>
<!-- 右边栏 -->
<div class="main-sidebar-right layui-tab layui-tab-brief">
<!-- <div class="main-tabs-nav layui-tab-title">
<li class="layui-this">MARKET TRADES</li>
<li>ORDER BOOK</li>
</div> -->
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="main-tabs-content">
<table lay-filter="marketTrades" id="marketTrades"></table>
<div class="Thtitle cent"><span>32847.59</span> </div>
<table lay-filter="recc" id="recc"></table>
</div>
</div>
<div class="layui-tab-item">
<div class="main-tabs-content orderbook-wrap">
<table lay-filter="orderbook" id="orderbook"></table>
</div>
<div class="main-tabs-orderbook-hd">Lastest 40025.41 USDT ≈ $40025.410000</div>
<div class="main-tabs-content orderbook-wrap1">
<table lay-filter="orderbook1" id="orderbook1"></table>
</div>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="main-tabs-content">
<table lay-filter="marketTrades" id="marketTrades"></table>
<div class="Thtitle cent"><span>32847.59 ↑</span> </div>
<table lay-filter="recc" id="recc"></table>
</div>
</div>
</div>
<!-- 左边栏 -->
<div class="main-sidebar-left layui-tab layui-tab-brief">
<div class="main-tabs-nav layui-tab-title">
<li class="layui-this">BTC</li>
<li>USD</li>
<li>USDC</li>
<li>ETH</li>
</div>
<div class="main-tabs-content layui-tab-content">
<div class="layui-tab-item layui-show">
<table lay-filter="fav" id="fav"></table>
<div class="Thtitle"><span>Trade History</span> </div>
<table lay-filter="rec" id="rec"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="usdt" id="usdt"></table>
<div class="layui-tab-item">
<div class="main-tabs-content orderbook-wrap">
<table lay-filter="orderbook" id="orderbook"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="btc" id="btc"></table>
<div class="main-tabs-orderbook-hd">Lastest 40025.41 USDT ≈ $40025.410000</div>
<div class="main-tabs-content orderbook-wrap1">
<table lay-filter="orderbook1" id="orderbook1"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="eth" id="eth"></table>
</div>
</div>
</div>
<!-- 中间 -->
<div class="main-middlebar layui-tab layui-tab-brief">
<ul class="main-tabs-nav layui-tab-title">
<li class="layui-this">Tradingview</li>
<li>Deptrh</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="main-tabs-content tradingview-head">
<span><em id="detailPair">BTC/USDT</em><em class="gray-color">12844.97</em></span>
<span><em>Change</em><em class="buy-color">+0.53%</em></span>
<span><em>Open</em><em class="buy-color">12844.97</em></span>
<span><em>High</em><em class="gray-color">12844.97</em></span>
<span><em>LowT</em><em class="gray-color">12844.97</em></span>
<span><em>24H Vol</em><em class="gray-color">936.369 BTC</em></span>
</div>
<div class="main-tabs-content tradingview-container" id="tradingviewContainer">
</div>
</div>
<!-- 中间 -->
<div class="main-middlebar layui-tab layui-tab-brief">
<ul class="main-tabs-nav layui-tab-title">
<li class="layui-this">Tradingview</li>
<li>Deptrh</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="main-tabs-content tradingview-head">
<span><em id="detailPair">BTC/USDT</em><em class="gray-color">12844.97</em></span>
<span><em>Change</em><em class="buy-color">+0.53%</em></span>
<span><em>Open</em><em class="buy-color">12844.97</em></span>
<span><em>High</em><em class="gray-color">12844.97</em></span>
<span><em>LowT</em><em class="gray-color">12844.97</em></span>
<span><em>24H Vol</em><em class="gray-color">936.369 BTC</em></span>
</div>
<div class="layui-tab-item">
<!--深度图 -->
<div class="main-tabs-content deptrh-container" id="deptrhContainer"></div>
<div class="main-tabs-content tradingview-container" id="tradingviewContainer">
</div>
</div>
<div class="gai">
<div class="main-tabs-nav">
<p class="title">Limit</p>
</div>
<div class="main-tabs-content exchange-container">
<div class="exchange-item">
<div class="exchange-head">
<div class="layui-tab-item">
<!--深度图 -->
<div class="main-tabs-content deptrh-container" id="deptrhContainer"></div>
</div>
</div>
<div class="gai">
<div class="main-tabs-nav">
<p class="title">Limit</p>
</div>
<div class="main-tabs-content exchange-container">
<div class="exchange-item">
<div class="exchange-head">
<div class="left">
<span>Buy</span>
<span>ALGO </span>
</div>
<div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span>
<div class="right">
<span> -USD</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyPrice" data-type="buy"
placeholder="Price" step="0.01">
<span class="s1">Price:</span>
<span class="s2">USDT</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span>
<span class="s2">BTC</span>
</div>
<!-- <div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span>
</div> -->
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyPrice" data-type="buy"
placeholder="Price" step="0.01">
<span class="s1">Price:</span>
<span class="s2">USD</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span>
<span class="s2">ALGO</span>
</div>
<div class="tags">
<span class="tag">25%</span>
<span class="tag">50%</span>
<span class="tag">75%</span>
<span class="tag">100%</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Total:</span>
<span class="s2">USD</span>
</div>
<div class="exchange-total">
<div>Total</div>
<div class="exchange-total-input">
<span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000"
step="0.00000001">
</div>
</div>
<div class="exchange-btn buy-btn"><a href="login.html">Sign in</a> or <a
href="login.html">Sign up</a> Now to trade</div>
<a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a>
</div>
<div class="exchange-item">
<div class="exchange-head">
<!-- <div class="exchange-total">
<div>Total</div>
<div class="exchange-total-input">
<span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000" step="0.00000001">
</div>
</div> -->
<div class="exchange-btn buy-btn"><a href="login.html">Log In</a> or <a
href="login.html">Register</a> Now to trade</div>
<a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a>
</div>
<div class="exchange-item">
<div class="exchange-head">
<div class="left">
<span>Buy</span>
<span>ALGO </span>
</div>
<div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span>
<div class="right">
<span> -USD</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyPrice" data-type="buy"
placeholder="Price" step="0.01">
<span class="s1">Price:</span>
<span class="s2">USDT</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span>
<span class="s2">BTC</span>
</div>
<!-- <div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span>
</div> -->
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyPrice" data-type="buy"
placeholder="Price" step="0.01">
<span class="s1">Price:</span>
<span class="s2">USD</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span>
<span class="s2">ALGO</span>
</div>
<div class="tags">
<span class="tag">25%</span>
<span class="tag">50%</span>
<span class="tag">75%</span>
<span class="tag">100%</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Total:</span>
<span class="s2">USD</span>
</div>
<div class="exchange-total">
<div>Total</div>
<div class="exchange-total-input">
<span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000"
step="0.00000001">
</div>
</div>
<div class="exchange-btn buy-btn"><a href="login.html">Sign in</a> or <a
href="login.html">Sign up</a> Now to trade</div>
<a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a>
</div>
<!-- <div class="exchange-total">
<div>Total</div>
<div class="exchange-total-input">
<span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000" step="0.00000001">
</div>
</div> -->
<div class="exchange-btn buy-btn"><a href="login.html">Log In</a> or <a
href="login.html">Register</a> Now to trade</div>
<a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a>
</div>
</div>
</div>
</div>
<!-- help -->
<a href="../html/help.html" class="help_con">
<div class="a_con">
<img src="../image/erji.png" alt="" class="img">
help
</div>
</a>
<!-- help -->
<a href="../html/help.html" class="help_con">
<div class="a_con">
<img src="../image/erji.png" alt="" class="img">
help
</div>
</a>
</div>
<div class="container">
<!-- 历史委托 -->
<div class="main-delegate layui-tab layui-tab-brief">
<ul class="main-tabs-nav layui-tab-title">
<li class="layui-this">Delegate</li>
<li>History Delegate</li>
</ul>
<div class="main-tabs-content layui-tab-content table-delegate">
<div class="layui-tab-item layui-show">
<table lay-filter="Delegate" id="Delegate"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="HistoryDelegate" id="HistoryDelegate"></table>
</div>
</div>
<div class="container">
<!-- 历史委托 -->
<div class="main-delegate layui-tab layui-tab-brief">
<ul class="main-tabs-nav layui-tab-title">
<li class="layui-this">Delegate</li>
<li>History Delegate</li>
</ul>
<div class="main-tabs-content layui-tab-content table-delegate">
<div class="layui-tab-item layui-show">
<table lay-filter="Delegate" id="Delegate"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="HistoryDelegate" id="HistoryDelegate"></table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/bignumber.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../highcharts/highcharts.js"></script>
<script type="text/javascript" src="../highcharts/oldie.js"></script>
<script src="../highcharts/dark-unica.js"></script>
<script src="../charting_library/charting_library.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/dataUpdater.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/datafees.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/socket.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/TVjsApi.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/exchange.js"></script>
<script>
var _TVjsApi = new TVjsApi('btcusdt');
_TVjsApi.init();
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/bignumber.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../highcharts/highcharts.js"></script>
<script type="text/javascript" src="../highcharts/oldie.js"></script>
<script src="../highcharts/dark-unica.js"></script>
<script src="../charting_library/charting_library.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/dataUpdater.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/datafees.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/socket.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/TVjsApi.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/exchange.js"></script>
<script>
var _TVjsApi = new TVjsApi('btcusdt');
_TVjsApi.init();
//_TVjsApi.resetTheme('black') //切换皮肤
</script>
<script src="../js/vue.js"></script>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/header.js"></script>
<script>
</script>
<script src="../js/vue.js"></script>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/header.js"></script>
<script>
</script>
</body>
</script>
</body>
</html>
</html>

289
html/news.html
View File

@ -18,56 +18,148 @@
<div class="">
<div class="header bo-show">
<div class="header_content container">
<a href="../index.html" class="logo"><img src="../image/[email protected]"
alt=""></a>
<a href="../index.html" class="logo"><img src="../image/[email protected]" alt=""></a>
<div class="header_tabs">
<div class="acon1">
<span class="NotLog" v-show="isLogin2">
<div class="acon1">
<span class="NotLog" v-show="isLogin2">
<a href="../html/login.html" class="a">Log In</a>
<a href="../html/register.html" class="a">Sign-up</a>
<a href="../html/register.html" class="a">Sign-up</a>
</span>
<span class="LogIn" v-show="isLogin">
<a href="" class="a">[email protected] <img src="../image/h1.png" alt="" class="h1"></a>
<span class="LogIn" v-show="isLogin">
<a href="" class="a">[email protected] <img src="../image/h1.png" alt=""
class="h1"></a>
<div class="LogList">
<a href="securityCenter.html" class="active sc">Security center <img src="../image/meun_icon_my_nor.png" alt=""></a>
<a href="javascript::" class="so" @click="logOut">Sign out
<a href="securityCenter.html" class="active sc">Security center <img
src="../image/meun_icon_my_nor.png" alt=""></a>
<a href="javascript::" class="so" @click="logOut">Sign out
<img src="../image/pop_icon_signout.png" alt="" class="img1">
<img src="../image/pop_icon_signoutb.png" alt="" class="img2">
</a>
</div>
</span>
<a href="" class="a">Support</a>
<div class="language a">
<a href="" class="a">Support</a>
<div class="language a">
<span class="language-text">ENG <img src="../image/h1.png" alt="" class="h1"></span>
<div class="language-list">
<!-- <a href="">ENG</a> -->
<a href="">CHN</a>
</div>
</div>
</div>
</div>
<div class="acon2">
<a href="exchange.html" >Trade</a>
<a href="news.html" class="active">News</a>
<a href="innovate.html">Innovation</a>
<a href="wallet.html">Wallet</a>
</div>
<a href="exchange.html">Trade</a>
<a href="news.html" class="active">News</a>
<a href="innovate.html">Innovation</a>
<a href="wallet.html">Wallet</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="newsContent" id="news" v-cloak>
<div class="container">
<div class="tabs">
<span :class="tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('recent')">Bitcoin News</span>
<div class="tabsIsActiveOne" @click="handlerTabs('recent')">
Bitcoin News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Ethereum News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Litecoin News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Ripple News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Action News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Blockchain News
</div>
<!-- <span :class="tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('recent')">Bitcoin News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Litecoin News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Ripple News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Ethereum News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Action News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Blockchain News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Blockchain News</span> -->
</div>
<div class="new_list">
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
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
</div>
</div>
</div>
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
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
</div>
</div>
</div>
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
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
</div>
</div>
</div>
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
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
</div>
</div>
</div>
<div id="pagination" class="pagination">
</div>
</div>
<div class="four_content newcon">
<!-- <div class="four_content newcon">
<div class="">
<div class="rq flex">
<div class="bot">
@ -163,91 +255,92 @@
</div>
</div>
</div>
<div id="pagination" class="pagination">
</div>
<!-- help -->
<a href="../html/help.html" class="help_con">
<div class="a_con">
<img src="../image/erji.png" alt="" class="img">
help
</div>
</a>
</div> -->
<!-- -->
<!-- help -->
<a href="../html/help.html" class="help_con">
<div class="a_con">
<img src="../image/erji.png" alt="" class="img">
help
</div>
</a>
</div>
<div class="footer_content">
<div class="foot_top">
<div class="container flex">
<div class="lef">
<div class="logo">
<img src="../image/logo.png" alt="">
</div>
<div class="div1">
copyright©2021 Bitslead
</div>
<div class="div1">
[email protected]
</div>
<div class="div1">
Please pay attention to the market risk of cryptocurrency Trading
</div>
<div class="div2">
<img src="../image/bottom_icon_email.png" alt="">
<img src="../image/bottom_icon_world.png" class="mgl" alt="">
</div>
</div>
<div class="rig">
<div class="div">
<a href="" class="head">GUIDE</a>
<a href="" class="a">Futures Guide</a>
<a href="" class="a">Apply For Listing</a>
<a href="" class="a">Perpetual Contracts Guide</a>
</div>
<div class="div">
<a href="" class="head">LEARN</a>
<a href="" class="a">Cryptocurrency</a>
<a href="" class="a">Smart Contract</a>
<a href="" class="a">Development of Blockchain</a>
<div class="container flex">
<div class="lef">
<div class="logo">
<img src="../image/logo.png" alt="">
</div>
<div class="div1">
copyright©2021 Bitslead
</div>
<div class="div1">
[email protected]
</div>
<div class="div1">
Please pay attention to the market risk of cryptocurrency Trading
</div>
<div class="div2">
<img src="../image/bottom_icon_email.png" alt="">
<img src="../image/bottom_icon_world.png" class="mgl" alt="">
</div>
</div>
<div class="div">
<a href="" class="head">SERVICE</a>
<a href="" class="a">Agrement</a>
<a href="" class="a">Security Guide</a>
<div class="rig">
<div class="div">
<a href="" class="head">GUIDE</a>
<a href="" class="a">Futures Guide</a>
<a href="" class="a">Apply For Listing</a>
<a href="" class="a">Perpetual Contracts Guide</a>
</div>
<div class="div">
<a href="" class="head">LEARN</a>
<a href="" class="a">Cryptocurrency</a>
<a href="" class="a">Smart Contract</a>
<a href="" class="a">Development of Blockchain</a>
</div>
<div class="div">
<a href="" class="head">SERVICE</a>
<a href="" class="a">Agrement</a>
<a href="" class="a">Security Guide</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="foot_center">
<div class="container">
<div class="rq flex">
<div class="p1">
All rights reserved © 2021 Bitstamp. NMLS #1905429
</div>
<div class="imgcon">
<img src="../image/visa.png" alt="" srcset="">
<img src="../image/mastercard.png" alt="" srcset="">
<img src="../image/maestro.png" alt="" srcset="">
</div>
<div class="imgcon imgcon2">
<a href=""><img src="../image/twitter.png" alt="" srcset=""></a>
<a href=""> <img src="../image/linkedin.png" alt="" srcset=""></a>
<a href=""> <img src="../image/facebook.png" alt="" srcset=""></a>
</div>
</div>
</div>
<div class="container">
<div class="rq flex">
<div class="p1">
All rights reserved © 2021 Bitstamp. NMLS #1905429
</div>
<div class="imgcon">
<img src="../image/visa.png" alt="" srcset="">
<img src="../image/mastercard.png" alt="" srcset="">
<img src="../image/maestro.png" alt="" srcset="">
</div>
<div class="imgcon imgcon2">
<a href=""><img src="../image/twitter.png" alt="" srcset=""></a>
<a href=""> <img src="../image/linkedin.png" alt="" srcset=""></a>
<a href=""> <img src="../image/facebook.png" alt="" srcset=""></a>
</div>
</div>
</div>
</div>
<div class="foot_bottom">
<div class="container">
<div class="rq flex">
<div class="div1">
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.
</div>
<div class="div2">
<a href="">Customize</a>
<a href="" class="active">Enable all</a>
</div>
</div>
</div>
<div class="container">
<div class="rq flex">
<div class="div1">
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.
</div>
<div class="div2">
<a href="">Customize</a>
<a href="" class="active">Enable all</a>
</div>
</div>
</div>
</div>
</div>
</div>

BIN
image/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 774 KiB

After

Width:  |  Height:  |  Size: 3.6 MiB

748
js/exchange.js
View File

@ -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 `<i class="layui-icon coinClass ${data.flag ? 'layui-icon-rate-solid' : 'layui-icon-rate'}"></i><span class="coin-text">${data.coin}</span>`
}
function renderLatest (data) {
return data.latest
}
function renderChange (data) {
const isBuy = data.change > 0
return `<span class="${isBuy ? 'buy' : 'sell'}-color">${isBuy ? '+' : ''}${data.change}%</span>`
}
function renderCoin(data) {
return `<i class="layui-icon coinClass ${data.flag ? 'layui-icon-rate-solid' : 'layui-icon-rate'}"></i><span class="coin-text">${data.coin}</span>`
}
function renderLatest(data) {
return data.latest
}
function renderChange(data) {
const isBuy = data.change > 0
return `<span class="${isBuy ? 'buy' : 'sell'}-color">${isBuy ? '+' : ''}${data.change}%</span>`
}
})
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]]
}]
});
}

Write Preview
Loading…
Cancel
Save