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

登录注册等

master^2
zhaoweifeng 4 years ago
parent
6747a6d8d6
commit
7a27bc75ce
12 changed files with 1183 additions and 901 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      css/common.css
  2. 302
      css/exchange.css
  3. 17
      css/forgetPassword.css
  4. 2
      css/index.css
  5. 39
      css/login.css
  6. 132
      css/news.css
  7. 6
      css/register.css
  8. 524
      html/exchange.html
  9. 289
      html/news.html
  10. BIN
      image/bg.png
  11. BIN
      image/[email protected]
  12. 748
      js/exchange.js

25
css/common.css
View File

@ -18,7 +18,7 @@ a{
.header{ .header{
width: 100%; width: 100%;
height: 100px; height: 100px;
background-color: #FFFFFF; background-color: #111534;
} }
.header .header_content{ .header .header_content{
display: flex; display: flex;
@ -26,12 +26,15 @@ a{
height: 100%; height: 100%;
} }
.header .header_content .logo{ .header .header_content .logo{
width: 171px; width: 233px;
padding: 22px 0; height: 56px;
margin-top: 22px;
/* padding: 22px 0; */
} }
.header .header_content .logo img{ .header .header_content .logo img{
width: 100%; width: 100%;
height: 100%;
} }
.header .header_content .header_tabs .acon2{ .header .header_content .header_tabs .acon2{
@ -43,7 +46,7 @@ a{
.header .header_content .header_tabs .acon2 a,.header_tabs .acon2 .loginCss a{ .header .header_content .header_tabs .acon2 a,.header_tabs .acon2 .loginCss a{
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: #303133; color: rgba(255, 255, 255, 0.65);
font: 20px "Medium"; font: 20px "Medium";
line-height: 69px; line-height: 69px;
margin-left: 80px; margin-left: 80px;
@ -54,7 +57,7 @@ a{
width: 0%; width: 0%;
height: 3px; height: 3px;
border-radius: 4px; border-radius: 4px;
background: #1C8D36; background: #FFFFFF;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0px; bottom: 0px;
@ -67,7 +70,7 @@ a{
opacity: 1; opacity: 1;
} }
.header .header_content .header_tabs .acon2 a.active,.header .header_content .header_tabs .acon2 a:hover{ .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{ .header .header_content .header_tabs .acon2 a:first-child{
margin-left: 0; margin-left: 0;
@ -79,7 +82,7 @@ a{
.header .header_content .header_tabs .acon1 .a{ .header .header_content .header_tabs .acon1 .a{
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: #999999; color: rgba(255, 255, 255, 0.25);
font: 14px "Medium"; font: 14px "Medium";
margin-left: 48px; margin-left: 48px;
position: relative; position: relative;
@ -87,7 +90,7 @@ a{
.language{ .language{
width: 60px; width: 60px;
line-height: 24px; line-height: 24px;
border: 1px solid #999999; border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
position: relative; position: relative;
@ -171,7 +174,7 @@ cursor: pointer;
.language-list a{ .language-list a{
display: block; display: block;
text-align: center; text-align: center;
color: #999999; color: rgba(255, 255, 255, 0.25);
font: 14px "Medium"; font: 14px "Medium";
} }
.header .header_content .header_tabs .acon1 .a:first-child{ .header .header_content .header_tabs .acon1 .a:first-child{
@ -182,7 +185,7 @@ cursor: pointer;
content: ''; content: '';
width: 1px; width: 1px;
height: 12px; height: 12px;
background-color: #999999; background-color: rgba(255, 255, 255, 0.25);
position: absolute; position: absolute;
left: -50%; left: -50%;
top: 50%; top: 50%;
@ -329,7 +332,7 @@ margin-right: 140px;
padding: 25px 0; padding: 25px 0;
} }
.foot_center .p1{ .foot_center .p1{
color: #999999; color: rgba(255, 255, 255, 0.25);
font-size: 14px; font-size: 14px;
} }

302
css/exchange.css
View File

@ -1,19 +1,22 @@
.trade { .trade {
color: #FFFFFF !important; color: #ffffff !important;
background-image: linear-gradient(to right, #FFA3DC, #1C8D36); background-image: linear-gradient(to right, #ffa3dc, #00cc5a);
border-radius: 15px; border-radius: 15px;
} }
.main {
background-color: #040610;
}
.container2{ .container2 {
width: 1366px; width: 1366px;
padding: 0 40px; padding: 0 40px;
margin: 0 auto; margin: 0 auto;
} }
.container { .container {
margin: 10px auto 0; margin: 10px auto 0;
width: 1420px; width: 1420px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
@ -21,21 +24,25 @@
padding-left: 30px; padding-left: 30px;
} }
.main-sidebar-left, .main-sidebar-right { .main-sidebar-left,
.main-sidebar-right {
width: 300px; width: 300px;
border: 1px solid #D9D9D9; /* border: 1px solid #D9D9D9; */
} }
.main-sidebar-left { .main-sidebar-right {
float: right; float: right;
} }
.main-sidebar-right { .main-sidebar-left {
float: 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; height: 888px;
background: #111534;
border: none;
} }
.main-middlebar { .main-middlebar {
@ -44,7 +51,7 @@
.main-tabs-nav { .main-tabs-nav {
height: 38px; height: 38px;
border-bottom: 1px solid #EDEFF2; border-bottom: 1px solid #edeff2;
} }
.main-tabs-content { .main-tabs-content {
@ -74,7 +81,7 @@
.tradingview-head span { .tradingview-head span {
margin-right: 15px; margin-right: 15px;
font-size: 12px; font-size: 12px;
color: #303133; color: #ffffff;
line-height: 38px; line-height: 38px;
} }
@ -111,9 +118,9 @@
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 36px;
color: #1C8D36; color: #006cff;
opacity: 1; opacity: 1;
border-bottom: 2px solid #1C8D36; border-bottom: 2px solid #006cff;
margin-left: 20px; margin-left: 20px;
} }
@ -121,7 +128,7 @@
float: left; float: left;
width: 50%; width: 50%;
margin-top: 15px; margin-top: 15px;
border-right: 1px solid #EDEFF2; border-right: 1px solid #edeff2;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px 17px; padding: 0 20px 17px;
} }
@ -132,24 +139,24 @@
.exchange-head { .exchange-head {
display: flex; display: flex;
color: #606266; justify-content: space-between;
color: rgba(255, 255, 255, 0.65);
line-height: 22px; line-height: 22px;
margin-bottom: 22px; margin-bottom: 22px;
} }
.exchange-head a { .exchange-head a {
color: #606266; color: rgba(255, 255, 255, 0.65);
} }
.exchange-head span { .exchange-head span {
padding-right: 8px; padding-right: 8px;
} }
.exchange-head span:last-of-type { .exchange-head span:last-of-type {
padding-right: 0; padding-right: 0;
} }
.exchange-head2{ .exchange-head2 {
justify-content: space-between; justify-content: space-between;
} }
.exchange-tags { .exchange-tags {
@ -168,7 +175,7 @@
height: 27px; height: 27px;
line-height: 27px; line-height: 27px;
font-size: 13px; font-size: 13px;
border: 1px solid #EDEFF2; border: 1px solid #edeff2;
border-radius: 4px; border-radius: 4px;
color: #909399; color: #909399;
cursor: pointer; cursor: pointer;
@ -179,8 +186,8 @@
display: none; display: none;
} }
.exchange-tags-label input:checked+span { .exchange-tags-label input:checked + span {
border-color: #1C8D36; border-color: #006cff;
} }
.exchange-input { .exchange-input {
@ -190,37 +197,63 @@
} }
.exchange-input .layui-input { .exchange-input .layui-input {
background-color: #fff; background-color: #23274d;
border-radius: 6px; border-radius: 6px;
padding-left: 18px; padding-left: 18px;
color: #303133; color: rgba(255, 255, 255, 0.85);
width: 236px; width: 236px;
height: 40px; height: 40px;
font-size: 14px; font-size: 14px;
border: none; border: none;
float: right; 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 { .exchange-input .layui-input:hover {
border-color: #1C8D36 !important; border-color: #006cff !important;
} }
.exchange-input .layui-input:focus { .exchange-input .layui-input:focus {
border-color: #1C8D36 !important; border-color: #006cff !important;
} }
.exchange-input .s1{ .exchange-input .s1 {
position: absolute; position: absolute;
top: 13px; top: 13px;
left: 16px; left: 16px;
line-height: 1em; line-height: 1em;
color: #303133;
color: rgba(255, 255, 255, 0.65);
} }
.exchange-input .s2{ .exchange-input .s2 {
position: absolute; position: absolute;
right: 15px; right: 15px;
font-size: 13px; font-size: 13px;
color: #1C8D36;
color: #d9d9d9;
top: 13px; top: 13px;
} }
.exchange-total { .exchange-total {
@ -231,7 +264,7 @@
color: #909399; color: #909399;
} }
.exchange-total>div:first-of-type { .exchange-total > div:first-of-type {
float: left; float: left;
} }
@ -240,7 +273,7 @@
position: relative; position: relative;
} }
.exchange-total-input>* { .exchange-total-input > * {
float: right; float: right;
} }
@ -261,43 +294,43 @@
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
color: #1C8D36; color: #006cff;
font-size: 14px; font-size: 14px;
} }
.exchange-btn a{ .exchange-btn a {
color: #1C8D36; color: #006cff;
font-size: 14px; font-size: 14px;
height: 100%; height: 100%;
} }
.exchange-btn:hover a{ .exchange-btn:hover a {
color: #fff; color: #fff;
} }
.exchange-btn.buy-btn { .exchange-btn.buy-btn {
border:1px solid #1C8D36; border: 1px solid #006cff;
} }
.exchange-btn:hover.buy-btn{ .exchange-btn:hover.buy-btn {
background-color: #1C8D36; background-color: #006cff;
color: #fff; color: #fff;
} }
.exchange-btn.buy-login-btn { .exchange-btn.buy-login-btn {
background: #00505F; background: #00505f;
border: 1px solid#00505F; border: 1px solid#00505F;
color:#FFFFFF; color: #ffffff;
font-weight: bold; font-weight: bold;
} }
.exchange-btn.sell-btn { .exchange-btn.sell-btn {
background-color: #E5544E; background-color: #e5544e;
} }
.exchange-btn:hover::after { .exchange-btn:hover::after {
position: absolute; position: absolute;
content: ''; content: "";
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px; border-radius: 20px;
} }
@ -307,14 +340,15 @@
} }
.main-tabs-nav.layui-tab-title { .main-tabs-nav.layui-tab-title {
border-bottom: 1px solid #EDEFF2; border-bottom: 1px solid #edeff2;
padding: 0 15px; padding: 0 15px;
background: #111534;
} }
.main-tabs-nav.layui-tab-title li { .main-tabs-nav.layui-tab-title li {
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
color: #303133; color: #ffffff;
padding: 0; padding: 0;
text-align: center; text-align: center;
float: left; float: left;
@ -322,13 +356,13 @@
} }
.main-tabs-nav.layui-tab-title li.layui-this { .main-tabs-nav.layui-tab-title li.layui-this {
color: #1C8D36; color: #006cff;
font-size: 14px; font-size: 14px;
} }
.main-tabs-nav.layui-tab-title li.layui-this:after { .main-tabs-nav.layui-tab-title li.layui-this:after {
height: 38px; height: 38px;
border-color: #1C8D36; border-color: #006cff;
} }
.main-sidebar-left .main-tabs-nav.layui-tab-title li { .main-sidebar-left .main-tabs-nav.layui-tab-title li {
@ -339,7 +373,8 @@
width: 50%; 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; width: auto;
padding: 0 16px; padding: 0 16px;
} }
@ -350,7 +385,10 @@
line-height: 30px; 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; padding: 0 0 0 10px;
} }
@ -358,64 +396,87 @@
padding: 0 10px; padding: 0 10px;
} }
.layui-table, .layui-table-view { .layui-table,
.layui-table-view {
margin: 6px 0 0; margin: 6px 0 0;
background: none; 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; background: none;
} }
.layui-table tbody tr:hover { .layui-table tbody tr:hover {
background: rgba(194, 226, 211, .19); background: rgba(194, 226, 211, 0.19);
} }
.layui-table tbody tr td:hover { .layui-table tbody tr td:hover {
cursor: pointer; 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; border-color: transparent;
} }
.layui-table-header .layui-table-cell { .layui-table-header .layui-table-cell {
color: #959AA3; color: #959aa3;
text-align: center; text-align: center;
} }
.layui-table-sort .layui-table-sort-desc { .layui-table-sort .layui-table-sort-desc {
border-top-color: #D8D8D8; border-top-color: #d8d8d8;
} }
.layui-table-sort .layui-table-sort-desc:hover { .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 { .layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
border-top-color: #1C8D36; border-top-color: #00cc5a;
} }
.layui-table-sort .layui-table-sort-asc { .layui-table-sort .layui-table-sort-asc {
border-bottom-color: #D8D8D8; border-bottom-color: #d8d8d8;
} }
.layui-table-sort .layui-table-sort-asc:hover { .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 { .layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
border-bottom-color: #1C8D36; border-bottom-color: #00cc5a;
} }
.layui-table-body .laytable-cell-6-0-0{ .layui-table-body .laytable-cell-6-0-0 {
color: #E5544E !important; color: #e5544e !important;
} }
.layui-table-view .layui-table td { .layui-table-view .layui-table td {
padding: 0; padding: 0;
} }
.layui-table-view .layui-table td .layui-table-cell { .layui-table-view .layui-table td .layui-table-cell {
color: #303133; color: #ffffff;
text-align: center; text-align: center;
} }
@ -424,34 +485,35 @@
} }
.layui-icon.layui-icon-rate-solid { .layui-icon.layui-icon-rate-solid {
color: #F79A28; color: #f79a28;
} }
.layui-icon.layui-icon-rate { .layui-icon.layui-icon-rate {
color: #959AA3; color: #959aa3;
} }
.buy-color { .buy-color {
color: #1C8D36; color: #00cc5a;
} }
.layui-table-body .laytable-cell-5-0-0{ .layui-table-body .laytable-cell-5-0-0 {
color: #1C8D36 !important; color: #00cc5a !important;
} }
.sell-color { .sell-color {
color: #E5544E; color: #e5544e;
} }
.gray-color { .gray-color {
color:#303133; color: #ffffff;
} }
.coin-text { .coin-text {
margin-left: 6px; 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; -webkit-appearance: none;
} }
@ -464,9 +526,9 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
line-height: 36px; line-height: 36px;
text-align: center; text-align: center;
padding: 12px auto; padding: 12px auto;
background-color:rgba(189, 98, 255, 0.1); background-color: rgba(189, 98, 255, 0.1);
font-size: 12px; font-size: 12px;
color: #1C8D36; color: #00cc5a;
} }
.main-sidebar-right .orderbook-wrap { .main-sidebar-right .orderbook-wrap {
@ -480,67 +542,67 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
} }
.highcharts-background { .highcharts-background {
fill: #121C31; fill: #121c31;
} }
.main-sidebar-top{ .main-sidebar-top {
padding: 0 10px; padding: 0 10px;
padding-top: 40px; padding-top: 40px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.flex{ .flex {
display: flex; display: flex;
} }
.main-sidebar-top .one{ .main-sidebar-top .one {
font-size: 14px; font-size: 14px;
color: #666666; color: rgba(255, 255, 255, 0.65);
} }
.main-sidebar-top .one .s1{ .main-sidebar-top .one .s1 {
font-size: 28px; font-size: 28px;
color: #303133; color: #ffffff;
} }
.main-sidebar-top .two{ .main-sidebar-top .two {
margin-left: 40px; margin-left: 40px;
} }
.main-sidebar-top .two .p1{ .main-sidebar-top .two .p1 {
font-size: 12px; font-size: 12px;
color: #666666; color: rgba(255, 255, 255, 0.65);
} }
.main-sidebar-top .two .p2{ .main-sidebar-top .two .p2 {
font-size: 14px; font-size: 14px;
color: #1C8D36; color: #00cc5a;
} }
.Thtitle {
.Thtitle{ margin-top: 40px;
margin-top: 40px; line-height: 36px;
line-height: 36px; width: 100%;
width: 100%; background: #23274d;
background: rgba(28, 141,54, 0.05); text-align: left;
text-align: left; font-size: 14px;
font-size: 14px; padding-left: 20px;
padding-left: 20px; color: #ffffff;
color: #303133; }
} .cent {
.cent{ color: #00cc5a;
color: #1C8D36; font-weight: bold;
text-align: center; text-align: center;
} }
.layui-table-body .laytable-cell-7-0-0{ .layui-table-body .laytable-cell-7-0-0 {
color: #1C8D36 !important; color: #00cc5a !important;
} }
.gai{ .gai {
background-color: #F5F7FA !important; background-color: #111534 !important;
} }
.main-delegate{ .main-delegate {
border: 1px solid #D9D9D9; border: 1px solid #d9d9d9;
} }
.ma1{ .ma1 {
padding-bottom: 20px; padding-bottom: 20px;
} }
.layui-table-page{ .layui-table-page {
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
padding-bottom: 50px; padding-bottom: 50px;
} }

17
css/forgetPassword.css
View File

@ -1,21 +1,23 @@
.login-container{ .login-container{
width: 420px; width: 420px;
height: 520px; height: 520px;
background: #FFFFFF; background: #111534;
border-radius: 15px; border-radius: 15px;
padding: 40px; padding: 40px;
} }
.input-item-code{ .input-item-code{
width: 240px !important; width: 240px !important;
color: #303133; color: rgba(255, 255, 255, 0.25);
background-color: #F5F7FA; background-color: #23274D;
border: 1px solid rgba(255, 255, 255, 0.050980392156862744);
} }
.codeSendBtn{ .codeSendBtn{
height: 48px !important; height: 48px !important;
width: 90px !important; width: 90px !important;
background: #BFC2CC; background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 6px; border-radius: 6px;
float: right; float: right;
text-align: center; text-align: center;
@ -25,6 +27,13 @@
cursor: pointer; cursor: pointer;
} }
/* .submitBtn {
background: rgba(255, 255, 255, 0.25) !important;
} */
.activeSubmit {
background-color: #006CFF !important;
}
.login-container .login-item .input-itemArray{ .login-container .login-item .input-itemArray{
margin-top: 5px; margin-top: 5px;
} }

2
css/index.css
View File

@ -3,7 +3,7 @@
} }
.header{ .header{
background-color: #FFFFFF; background-color: #040610;
} }
.container{ .container{
width: 1366px; width: 1366px;

39
css/login.css
View File

@ -1,6 +1,6 @@
.signIn { .signIn {
color: #FFFFFF !important; color: #FFFFFF !important;
background-image: linear-gradient(to right, #FFA3DC, #1C8D36); background-image: linear-gradient(to right, #FFA3DC, #006CFF);
border-radius: 15px; border-radius: 15px;
} }
@ -27,7 +27,7 @@
.login-container { .login-container {
width: 420px; width: 420px;
height: 380px; height: 380px;
background: #FFFFFF; background: #111534;
border-radius: 6px; border-radius: 6px;
padding: 40px; padding: 40px;
} }
@ -35,7 +35,7 @@
.login-container .login-item p { .login-container .login-item p {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
color: #606266; color: rgba(255, 255, 255, 0.65)
} }
.login-container .login-item input { .login-container .login-item input {
@ -47,13 +47,13 @@
} }
.login-container .login-item .input-item { .login-container .login-item .input-item {
background-color: #F5F7FA !important; background-color: #23274D !important;
color: #303133; color: rgba(255, 255, 255, 0.25);
} }
.login-container .login-item .input-item { .login-container .login-item .input-item {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #BFC2CC; border: 1px solid rgba(255, 255, 255, 0.050980392156862744);;
text-indent: 10px; text-indent: 10px;
margin-top: 5px; margin-top: 5px;
} }
@ -84,8 +84,7 @@
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 16px; font-size: 16px;
font-weight: bold; background: rgba(255, 255, 255, 0.25);
background: #BFC2CC;
height: 56px; height: 56px;
cursor: pointer; cursor: pointer;
} }
@ -100,30 +99,30 @@
cursor: pointer; cursor: pointer;
} }
.registerBtn .register-em { .registerBtn .register-em {
color: #909399; color: rgba(255, 255, 255, 0.45);
font-size: 14px; font-size: 14px;
} }
.registerBtn .register-a { .registerBtn .register-a {
color: #1C8D36; color: #00A1E8;
font-weight: bold; font-weight: 500;
} }
/* .completed{ /* .completed{
background-color: #1C8D36; background-color: #006CFF;
} */ } */
.disabledSubmit { .disabledSubmit {
background: #BFC2CC; background: rgba(255, 255, 255, 0.25);
} }
.activeSubmit { .activeSubmit {
background-color: #1C8D36 !important; background-color: #006CFF !important;
} }
.login-Forget-item a { .login-Forget-item a {
color: #606266; color: rgba(255, 255, 255, 0.65);
} }
.login-Forget-item a:hover { .login-Forget-item a:hover {
@ -131,20 +130,20 @@
} }
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: #BFC2CC; color: rgba(255, 255, 255, 0.64);;
} }
input::-moz-placeholder { input::-moz-placeholder {
/* Mozilla Firefox 19+ */ /* Mozilla Firefox 19+ */
color: #BFC2CC; color: rgba(255, 255, 255, 0.64);;
} }
input:-moz-placeholder { input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */ /* Mozilla Firefox 4 to 18 */
color: #BFC2CC; color: rgba(255, 255, 255, 0.64);;
} }
input:-ms-input-placeholder { input:-ms-input-placeholder {
/* Internet Explorer 10-11 */ /* Internet Explorer 10-11 */
color: #BFC2CC; color: rgba(255, 255, 255, 0.64);;
} }

132
css/news.css
View File

@ -1,19 +1,92 @@
.newsHeader{ .newsHeader {
border-bottom: solid 1px #EDEFF2; border-bottom: solid 1px #edeff2;
} }
.newsContent .container{ .newsContent {
margin: 21px auto 0; 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-size: 16px;
font-weight: bold; font-weight: bold;
color: #303133; color: #303133;
margin-bottom: 20px; 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; cursor: pointer;
margin-right: 12px; margin-right: 12px;
padding: 8px 0; padding: 8px 0;
@ -33,16 +106,16 @@
bottom: 0px; bottom: 0px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} } */
.newsContent .container .newList .new-item{ .newsContent .container .newList .new-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer; cursor: pointer;
} }
.newsContent .container .newList .new-item .new_img{ .newsContent .container .newList .new-item .new_img {
width: 180px; width: 180px;
height: 135px; height: 135px;
border-radius: 15px; border-radius: 15px;
@ -50,32 +123,32 @@
position: relative; position: relative;
} }
.newsContent .container .newList .new-item .new_img img{ .newsContent .container .newList .new-item .new_img img {
width: 180px; width: 180px;
height: 135px; height: 135px;
} }
.newsContent .container .newList .new-item .new_img .new_block{ .newsContent .container .newList .new-item .new_img .new_block {
height: 29px; height: 29px;
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
background-image: linear-gradient(to left, #1C8D36, #FFA3DC); background-image: linear-gradient(to left, #1c8d36, #ffa3dc);
border-radius: 6px; border-radius: 6px;
color: #FFFFFF; color: #ffffff;
padding: 7px 12px; 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%; width: 100%;
height: 100%; height: 100%;
} }
.newsContent .container .newList .new-item .new_text .new_tit{ .newsContent .container .newList .new-item .new_text .new_tit {
font-size: 20px; font-size: 20px;
color: #303133; color: #303133;
font-weight: bold; font-weight: bold;
} }
.newsContent .container .newList .new-item .new_text .new_info{ .newsContent .container .newList .new-item .new_text .new_info {
display: flex; display: flex;
align-items: center; align-items: center;
color: #909399; color: #909399;
@ -83,14 +156,14 @@
margin: 12px 0; 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; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
margin-right: 6px; margin-right: 6px;
} }
.newsContent .container .newList .new-item .new_text .new_content{ .newsContent .container .newList .new-item .new_text .new_content {
font-size: 16px; font-size: 16px;
color: #606266; color: #606266;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
@ -101,21 +174,26 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.newsContent .container .pagination{ .newsContent .container .pagination {
text-align: center; text-align: center;
margin: 30px auto 60px; margin: 30px auto 60px;
} }
.layui-laypage-em{ .layui-laypage-em {
background-color: #1C8D36 !important; 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 { .layui-laypage a:hover {
color: #1C8D36; color: #006CFF;
} }
.newcon{ .newcon {
background: #fff !important; /* background: #fff !important; */
padding: 0; padding: 0;
} }
.flex{ .flex {
flex-wrap: wrap; flex-wrap: wrap;
} }

6
css/register.css
View File

@ -6,19 +6,19 @@
.login-container{ .login-container{
width: 420px; width: 420px;
height: 556px; height: 556px;
background: #FFFFFF; background: #111534;
border-radius: 6px; border-radius: 6px;
padding: 40px; padding: 40px;
} }
.login-item .tips{ .login-item .tips{
font: 12px "Arial"; font: 12px "Arial";
color: #909399; color: rgba(255, 255, 255, 0.45);
margin-top: 8px; margin-top: 8px;
display: inline-block; display: inline-block;
} }
.login-item .tips .color-blue{ .login-item .tips .color-blue{
font-size: 16px; font-size: 16px;
color: #1C8D36; color: #00A1E8;
} }
.mt10{ .mt10{
margin-top: 10px !important; margin-top: 10px !important;

524
html/exchange.html
View File

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

289
html/news.html
View File

@ -18,56 +18,148 @@
<div class=""> <div class="">
<div class="header bo-show"> <div class="header bo-show">
<div class="header_content container"> <div class="header_content container">
<a href="../index.html" class="logo"><img src="../image/[email protected]" <a href="../index.html" class="logo"><img src="../image/[email protected]" alt=""></a>
alt=""></a>
<div class="header_tabs"> <div class="header_tabs">
<div class="acon1"> <div class="acon1">
<span class="NotLog" v-show="isLogin2"> <span class="NotLog" v-show="isLogin2">
<a href="../html/login.html" class="a">Log In</a> <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>
<span class="LogIn" v-show="isLogin"> <span class="LogIn" v-show="isLogin">
<a href="" class="a">[email protected] <img src="../image/h1.png" alt="" class="h1"></a> <a href="" class="a">[email protected] <img src="../image/h1.png" alt=""
class="h1"></a>
<div class="LogList"> <div class="LogList">
<a href="securityCenter.html" class="active sc">Security center <img src="../image/meun_icon_my_nor.png" alt=""></a> <a href="securityCenter.html" class="active sc">Security center <img
<a href="javascript::" class="so" @click="logOut">Sign out 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_signout.png" alt="" class="img1">
<img src="../image/pop_icon_signoutb.png" alt="" class="img2"> <img src="../image/pop_icon_signoutb.png" alt="" class="img2">
</a> </a>
</div> </div>
</span> </span>
<a href="" class="a">Support</a> <a href="" class="a">Support</a>
<div class="language a"> <div class="language a">
<span class="language-text">ENG <img src="../image/h1.png" alt="" class="h1"></span> <span class="language-text">ENG <img src="../image/h1.png" alt="" class="h1"></span>
<div class="language-list"> <div class="language-list">
<!-- <a href="">ENG</a> --> <!-- <a href="">ENG</a> -->
<a href="">CHN</a> <a href="">CHN</a>
</div> </div>
</div> </div>
</div> </div>
<div class="acon2"> <div class="acon2">
<a href="exchange.html" >Trade</a> <a href="exchange.html">Trade</a>
<a href="news.html" class="active">News</a> <a href="news.html" class="active">News</a>
<a href="innovate.html">Innovation</a> <a href="innovate.html">Innovation</a>
<a href="wallet.html">Wallet</a> <a href="wallet.html">Wallet</a>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="newsContent" id="news" v-cloak> <div class="newsContent" id="news" v-cloak>
<div class="container"> <div class="container">
<div class="tabs"> <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')">Litecoin News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Ripple 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')">Ethereum News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Action 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>
<div class="four_content newcon"> <!-- <div class="four_content newcon">
<div class=""> <div class="">
<div class="rq flex"> <div class="rq flex">
<div class="bot"> <div class="bot">
@ -163,91 +255,92 @@
</div> </div>
</div> </div>
</div> </div> -->
<div id="pagination" class="pagination"> <!-- -->
</div> <!-- help -->
<!-- help --> <a href="../html/help.html" class="help_con">
<a href="../html/help.html" class="help_con"> <div class="a_con">
<div class="a_con"> <img src="../image/erji.png" alt="" class="img">
<img src="../image/erji.png" alt="" class="img"> help
help </div>
</div> </a>
</a>
</div> </div>
<div class="footer_content"> <div class="footer_content">
<div class="foot_top"> <div class="foot_top">
<div class="container flex"> <div class="container flex">
<div class="lef"> <div class="lef">
<div class="logo"> <div class="logo">
<img src="../image/logo.png" alt=""> <img src="../image/logo.png" alt="">
</div> </div>
<div class="div1"> <div class="div1">
copyright©2021 Bitslead copyright©2021 Bitslead
</div> </div>
<div class="div1"> <div class="div1">
[email protected] [email protected]
</div> </div>
<div class="div1"> <div class="div1">
Please pay attention to the market risk of cryptocurrency Trading Please pay attention to the market risk of cryptocurrency Trading
</div> </div>
<div class="div2"> <div class="div2">
<img src="../image/bottom_icon_email.png" alt=""> <img src="../image/bottom_icon_email.png" alt="">
<img src="../image/bottom_icon_world.png" class="mgl" alt=""> <img src="../image/bottom_icon_world.png" class="mgl" alt="">
</div> </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> </div>
<div class="div"> <div class="rig">
<a href="" class="head">SERVICE</a> <div class="div">
<a href="" class="a">Agrement</a> <a href="" class="head">GUIDE</a>
<a href="" class="a">Security 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> </div>
<div class="foot_center"> <div class="foot_center">
<div class="container"> <div class="container">
<div class="rq flex"> <div class="rq flex">
<div class="p1"> <div class="p1">
All rights reserved © 2021 Bitstamp. NMLS #1905429 All rights reserved © 2021 Bitstamp. NMLS #1905429
</div> </div>
<div class="imgcon"> <div class="imgcon">
<img src="../image/visa.png" alt="" srcset=""> <img src="../image/visa.png" alt="" srcset="">
<img src="../image/mastercard.png" alt="" srcset=""> <img src="../image/mastercard.png" alt="" srcset="">
<img src="../image/maestro.png" alt="" srcset=""> <img src="../image/maestro.png" alt="" srcset="">
</div> </div>
<div class="imgcon imgcon2"> <div class="imgcon imgcon2">
<a href=""><img src="../image/twitter.png" alt="" srcset=""></a> <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/linkedin.png" alt="" srcset=""></a>
<a href=""> <img src="../image/facebook.png" alt="" srcset=""></a> <a href=""> <img src="../image/facebook.png" alt="" srcset=""></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="foot_bottom"> <div class="foot_bottom">
<div class="container"> <div class="container">
<div class="rq flex"> <div class="rq flex">
<div class="div1"> <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. We use cookies and similar technologies to operate core site features, customize core
</div> services, analyze our traffic, and for security and marketing. Accept all cookies,
<div class="div2"> customize your settings or read our full Cookie Policy.
<a href="">Customize</a> </div>
<a href="" class="active">Enable all</a> <div class="div2">
</div> <a href="">Customize</a>
</div> <a href="" class="active">Enable all</a>
</div> </div>
</div>
</div>
</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

BIN
image/[email protected]
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 31 KiB

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(){ // $(document).ready(function(){
// $('.main-sidebar-left').click(function(e){ // $('.main-sidebar-left').click(function(e){
// console.log(1) // console.log(1)
@ -13,125 +13,125 @@
// }) // })
// }); // });
$('.main-sidebar-left').on('click',function(e){ $('.main-sidebar-left').on('click', function (e) {
console.log(1) console.log(1)
}) })
$('.main-sidebar-left').on('click','.coinClass',function(e){ $('.main-sidebar-left').on('click', '.coinClass', function (e) {
console.log(2) console.log(2)
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}) })
const table = layui.table const table = layui.table
// fav // fav
const fav = table.render({ const fav = table.render({
elem: '#fav', elem: '#fav',
data: [ data: [
{coin: 'BSV', flag: 1, latest: '$176.2997', change: 1.61}, { 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}, { 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: [[ cols: [[
{ field: 'coin', title: 'Price', width: '30%', templet: renderCoin }, { field: 'coin', title: 'Price', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Amount', width: '35%', templet: renderLatest, align: 'right', sort: true }, { field: 'latest', title: 'Amount', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]], ]],
skin: 'nob', skin: 'nob',
page: false page: false
}) })
// usdt //
const usdt = table.render({ const usd = table.render({
elem: '#usdt', elem: '#usd',
data: [], data: [],
cols: [[ cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]], ]],
skin: 'nob', skin: 'nob',
page: false, page: false,
}) })
// btc // btc
const btc = table.render({ const btc = table.render({
elem: '#btc', elem: '#btc',
data: [], data: [],
cols: [[ cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]], ]],
skin: 'nob', skin: 'nob',
page: false, page: false,
}) })
// eth // usdc
const eth = table.render({ const usdc = table.render({
elem: '#eth', elem: '#usdc',
data: [], data: [],
cols: [[ cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin }, { field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true }, { field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true } { field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]], ]],
skin: 'nob', skin: 'nob',
page: false, 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 // marketTrades
const marketTrades = table.render({ const marketTrades = table.render({
elem: '#marketTrades', elem: '#marketTrades',
data: [ data: [
{price: '32847.59', flag: 0, amount: '0.34980', time: '299.99133496'}, { price: '32847.59', flag: 0, amount: '0.34980', time: '299.99133496' },
], ],
cols: [[ cols: [[
{ field: 'price', title: 'Price(USD)', width: '30%' }, { field: 'price', title: 'Price(USD)', width: '30%' },
{ field: 'amount', title: 'Amount (BTC)', width: '35%', align: 'right' }, { field: 'amount', title: 'Amount (BTC)', width: '35%', align: 'right' },
{ field: 'time', title: 'Total(USD)', width: '35%', align: 'right' } { field: 'time', title: 'Total(USD)', width: '35%', align: 'right' }
]], ]],
skin: 'nob', skin: 'nob',
page: false, page: false,
}) })
// recc // recc
const recc = table.render({ const recc = table.render({
elem: '#recc', elem: '#recc',
data: [ data: [
{coin3: '32.89923', flag: 0, latest3: '0.003637', change3: '22:11:39'}, { coin3: '32.89923', flag: 0, latest3: '0.003637', change3: '22:11:39' },
], ],
cols: [[ cols: [[
{ field: 'coin3', title: 'Price', width: '30%' }, { field: 'coin3', title: 'Price', width: '30%' },
{ field: 'latest3', title: 'Amount', width: '35%' }, { field: 'latest3', title: 'Amount', width: '35%' },
{ field: 'change3', title: 'Time', width: '35%' } { field: 'change3', title: 'Time', width: '35%' }
]], ]],
skin: 'nob', skin: 'nob',
page: false, page: false,
}) })
// orderbook // orderbook
const orderbook = table.render({ const orderbook = table.render({
elem: '#orderbook', elem: '#orderbook',
data: [], data: [],
cols: [[ cols: [[
{ field: 'price', title: 'Price', width: '30%' }, { field: 'price', title: 'Price', width: '30%' },
{ field: 'amount', title: 'Amount', width: '35%', align: 'right' }, { field: 'amount', title: 'Amount', width: '35%', align: 'right' },
{ field: 'total', title: 'Total', width: '35%', align: 'right' } { field: 'total', title: 'Total', width: '35%', align: 'right' }
]], ]],
skin: 'nob', skin: 'nob',
page: false, page: false,
}) })
// Delegate // Delegate
const Delegate = table.render({ const Delegate = table.render({
elem: '#Delegate', elem: '#Delegate',
data: [], data: [],
cols: [[ cols: [[
{ field: 'time', title: 'Time', width: '20%', align: 'center' }, { field: 'time', title: 'Time', width: '20%', align: 'center' },
{ field: 'direction', title: 'Direction', width: '20%', align: 'center' }, { field: 'direction', title: 'Direction', width: '20%', align: 'center' },
{ field: 'price', title: 'Price', width: '15%', align: 'center' }, { field: 'price', title: 'Price', width: '15%', align: 'center' },
{ field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' }, { field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' },
{ field: 'done', title: 'Symbol', width: '15%', align: 'center' }, { field: 'done', title: 'Symbol', width: '15%', align: 'center' },
{ field: 'action', title: 'Status', width: '15%', align: 'center' } { field: 'action', title: 'Status', width: '15%', align: 'center' }
]], ]],
skin: 'nob', skin: 'nob',
page: false, page: false,
}) })
// HistoryDelegate // HistoryDelegate
const HistoryDelegate = table.render({ const HistoryDelegate = table.render({
elem: '#HistoryDelegate', elem: '#HistoryDelegate',
data: [], data: [],
cols: [[ cols: [[
{ field: 'time', title: 'Time', width: '20%', align: 'center' }, { field: 'time', title: 'Time', width: '20%', align: 'center' },
{ field: 'direction', title: 'Direction', width: '20%', align: 'center' }, { field: 'direction', title: 'Direction', width: '20%', align: 'center' },
{ field: 'price', title: 'Price', width: '15%', align: 'center' }, { field: 'price', title: 'Price', width: '15%', align: 'center' },
{ field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' }, { field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' },
{ field: 'done', title: 'Symbol', width: '15%', align: 'center' }, { field: 'done', title: 'Symbol', width: '15%', align: 'center' },
{ field: 'status', title: 'Status', width: '15%', align: 'center' } { field: 'status', title: 'Status', width: '15%', align: 'center' }
]],/* */ ]],/* */
skin: 'nob', skin: 'nob',
page: false, 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){ ws.onclose = function () {
event.stopPropagation() // 关闭 websocket
event.preventDefault() // alert("连接已关闭...");
let flag = $(this).hasClass('layui-icon-rate-solid'); };
if(flag){
$(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate')
} else { // getKline()
$(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid')
}
}).on('click','tr',function(){ $('.compute').on('input propertychange change', function (e) {
let title = $('.main-sidebar-left .layui-tab-title .layui-this').text(); const that = $(this)
let trSpan = $(this).find('td').find('.coin-text').text() const type = that.data('type')
$('#detailPair').html(trSpan+'/'+title) $(`[name="${type}Total"]`).val(
}) .on('click','.layui-tab-title li',function(){ Array.from($(`input[data-type="${type}"]`)).reduce((acc, cur) => {
}) return acc.times(new BigNumber($(cur).val() || 0))
}, new BigNumber(1)).toFixed(8)
var ws = new WebSocket("ws://localhost:9998/echo"); )
})
ws.onopen = function() { $('[placeholder="Price"]').on('blur', 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() {
const value = $(this).val() const value = $(this).val()
if(value) { if (value) {
$(this).val(new BigNumber(value).toFixed(2)).change() $(this).val(new BigNumber(value).toFixed(2)).change()
} }
}) })
$('[placeholder="Amount"]').on('blur', function() { $('[placeholder="Amount"]').on('blur', function () {
const value = $(this).val() const value = $(this).val()
if(value) { if (value) {
$(this).val(new BigNumber(value).toFixed(4)).change() $(this).val(new BigNumber(value).toFixed(4)).change()
} }
}) })
function renderCoin(data) { 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>` 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) { function renderLatest(data) {
return data.latest return data.latest
} }
function renderChange (data) { function renderChange(data) {
const isBuy = data.change > 0 const isBuy = data.change > 0
return `<span class="${isBuy ? 'buy' : 'sell'}-color">${isBuy ? '+' : ''}${data.change}%</span>` return `<span class="${isBuy ? 'buy' : 'sell'}-color">${isBuy ? '+' : ''}${data.change}%</span>`
} }
}) })
function getKline() { function getKline() {
let config = { let config = {
autosize: true, autosize: true,
fullscreen: true, fullscreen: true,
symbol: 'AAAA', symbol: 'AAAA',
interval: "1", interval: "1",
timezone: "Asia/Shanghai", timezone: "Asia/Shanghai",
toolbar_bg: "#18202a", toolbar_bg: "#18202a",
container_id: "kLineContainer", container_id: "kLineContainer",
datafeed: new WebsockFeed(), datafeed: new WebsockFeed(),
library_path: "./charting_library/", library_path: "./charting_library/",
locale: "zh", locale: "zh",
debug: false, debug: false,
drawings_access: { drawings_access: {
type: "black", type: "black",
tools: [{ name: "Regression Trend" }] tools: [{ name: "Regression Trend" }]
}, },
disabled_features: [ disabled_features: [
"header_resolutions", "header_resolutions",
"timeframes_toolbar", "timeframes_toolbar",
"header_symbol_search", "header_symbol_search",
"header_chart_type", "header_chart_type",
"header_compare", "header_compare",
"header_undo_redo", "header_undo_redo",
"header_screenshot", "header_screenshot",
"header_saveload", "header_saveload",
"use_localstorage_for_settings", "use_localstorage_for_settings",
"left_toolbar", "left_toolbar",
"volume_force_overlay" "volume_force_overlay"
], ],
enabled_features: [ enabled_features: [
"hide_last_na_study_output", "hide_last_na_study_output",
"move_logo_to_main_pane" "move_logo_to_main_pane"
], ],
custom_css_url: "bundles/common.css", custom_css_url: "bundles/common.css",
supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W", "1M"], supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W", "1M"],
charts_storage_url: "http://saveload.tradingview.com", charts_storage_url: "http://saveload.tradingview.com",
charts_storage_api_version: "1.1", charts_storage_api_version: "1.1",
client_id: "tradingview.com", client_id: "tradingview.com",
user_id: "public_user_id", user_id: "public_user_id",
overrides: { overrides: {
"paneProperties.background": "#1B1E2E", "paneProperties.background": "#1B1E2E",
"paneProperties.vertGridProperties.color": "rgba(0,0,0,.1)", "paneProperties.vertGridProperties.color": "rgba(0,0,0,.1)",
"paneProperties.horzGridProperties.color": "rgba(0,0,0,.1)", "paneProperties.horzGridProperties.color": "rgba(0,0,0,.1)",
//"scalesProperties.textColor" : "#AAA", //"scalesProperties.textColor" : "#AAA",
"scalesProperties.textColor": "#61688A", "scalesProperties.textColor": "#61688A",
"mainSeriesProperties.candleStyle.upColor": "#589065", "mainSeriesProperties.candleStyle.upColor": "#589065",
"mainSeriesProperties.candleStyle.downColor": "#AE4E54", "mainSeriesProperties.candleStyle.downColor": "#AE4E54",
"mainSeriesProperties.candleStyle.drawBorder": false, "mainSeriesProperties.candleStyle.drawBorder": false,
"mainSeriesProperties.candleStyle.wickUpColor": "#589065", "mainSeriesProperties.candleStyle.wickUpColor": "#589065",
"mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54", "mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54",
"paneProperties.legendProperties.showLegend": false, "paneProperties.legendProperties.showLegend": false,
"mainSeriesProperties.areaStyle.color1": "rgba(71, 78, 112, 0.5)", "mainSeriesProperties.areaStyle.color1": "rgba(71, 78, 112, 0.5)",
"mainSeriesProperties.areaStyle.color2": "rgba(71, 78, 112, 0.5)", "mainSeriesProperties.areaStyle.color2": "rgba(71, 78, 112, 0.5)",
"mainSeriesProperties.areaStyle.linecolor": "#9194a4" "mainSeriesProperties.areaStyle.linecolor": "#9194a4"
}, },
time_frames: [ time_frames: [
{ {
text: "1min", text: "1min",
resolution: "1", resolution: "1",
description: "realtime", description: "realtime",
title: 'KLineC' title: 'KLineC'
}, },
{ text: "1min", resolution: "1", description: "1min" }, { text: "1min", resolution: "1", description: "1min" },
{ text: "5min", resolution: "5", description: "5min" }, { text: "5min", resolution: "5", description: "5min" },
{ text: "15min", resolution: "15", description: "15min" }, { text: "15min", resolution: "15", description: "15min" },
{ text: "30min", resolution: "30", description: "30min" }, { text: "30min", resolution: "30", description: "30min" },
{ {
text: "1hour", text: "1hour",
resolution: "60", resolution: "60",
description: "1hour", description: "1hour",
title: "1hour" title: "1hour"
}, },
/*{ text: "4hour", resolution: "240", description: "4hour",title: "4hour" },*/ /*{ text: "4hour", resolution: "240", description: "4hour",title: "4hour" },*/
{ {
text: "1day", text: "1day",
resolution: "1D", resolution: "1D",
description: "1day", description: "1day",
title: "1day" title: "1day"
}, },
{ {
text: "1week", text: "1week",
resolution: "1W", resolution: "1W",
description: "1week", description: "1week",
title: "1week" title: "1week"
}, },
{ text: "1mon", resolution: "1M", description: "1mon" } { text: "1mon", resolution: "1M", description: "1mon" }
] ]
}; };
} }
// TradingView.onready(function() { // TradingView.onready(function() {
// var widget = (window.tvWidget = new TradingView.widget(config)); // var widget = (window.tvWidget = new TradingView.widget(config));
@ -565,7 +565,7 @@ function getKline() {
// // } // // }
deptrh() deptrh()
// 深度图 // 深度图
function deptrh(){ function deptrh() {
Highcharts.chart('deptrhContainer', { Highcharts.chart('deptrhContainer', {
chart: { chart: {
type: 'area' type: 'area'
@ -573,7 +573,7 @@ function deptrh(){
title: { title: {
text: '' text: ''
}, },
xAxis: { xAxis: {
gridLineWidth: 0, gridLineWidth: 0,
lineColor: "#6c7279", lineColor: "#6c7279",
tickColor: "#c1c1c1", tickColor: "#c1c1c1",
@ -583,13 +583,13 @@ function deptrh(){
} }
}, },
title: { title: {
text:'Price BTC', text: 'Price BTC',
style: { style: {
color: "#fff" color: "#fff"
} }
} }
}, },
yAxis: { yAxis: {
opposite: !0, opposite: !0,
gridLineWidth: 0, gridLineWidth: 0,
lineColor: "#6c7279", lineColor: "#6c7279",
@ -613,7 +613,7 @@ function deptrh(){
align: "center", align: "center",
alignColumns: !0, alignColumns: !0,
layout: "horizontal", layout: "horizontal",
labelFormatter: function() { labelFormatter: function () {
return this.name return this.name
}, },
borderColor: "#999999", borderColor: "#999999",
@ -652,7 +652,7 @@ function deptrh(){
}, },
backgroundColor: 'rgba(0,0,0,0)' backgroundColor: 'rgba(0,0,0,0)'
}, },
loading: { loading: {
labelStyle: { labelStyle: {
fontWeight: "bold", fontWeight: "bold",
position: "relative", position: "relative",
@ -667,18 +667,18 @@ function deptrh(){
}, },
plotOptions: { plotOptions: {
area: { area: {
pointStart: 0, pointStart: 0,
marker: { marker: {
enabled: !1, enabled: !1,
symbol: "circle", symbol: "circle",
radius: 2, radius: 2,
states: { states: {
hover: { hover: {
enabled: !0 enabled: !0
}
}
} }
}, }
}
},
series: { series: {
fillOpacity: 1 fillOpacity: 1
} }
@ -688,14 +688,14 @@ function deptrh(){
valueDecimals: 2 valueDecimals: 2
}, },
series: [{ series: [{
color: "#589065", color: "#589065",
name: "Buying Commission", name: "Buying Commission",
data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [780, 12], [900, 12]] data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [780, 12], [900, 12]]
}, { }, {
color: "#AE4E54", color: "#AE4E54",
name: "Selling commission", name: "Selling commission",
data: [[910, 8], [1e3, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]] data: [[910, 8], [1e3, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]]
}] }]
}); });
} }

Write Preview
Loading…
Cancel
Save