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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      css/common.css
  2. 270
      css/exchange.css
  3. 17
      css/forgetPassword.css
  4. 4
      css/index.css
  5. 32
      css/login.css
  6. 125
      css/news.css
  7. 8
      css/register.css
  8. 152
      html/exchange.html
  9. 123
      html/news.html
  10. BIN
      image/bg.png
  11. 140
      js/exchange.js

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

270
css/exchange.css
View File

@ -1,11 +1,14 @@
.trade { .trade {
color: #FFFFFF !important; color: #ffffff !important;
background-image: linear-gradient(to right, #FFA3DC, #006CFF); 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;
@ -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: #006CFF; color: #006cff;
opacity: 1; opacity: 1;
border-bottom: 2px solid #006CFF; 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: #006CFF; 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: #006CFF !important; border-color: #006cff !important;
} }
.exchange-input .layui-input:focus { .exchange-input .layui-input:focus {
border-color: #006CFF !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: #006CFF;
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: #006CFF; color: #006cff;
font-size: 14px; font-size: 14px;
} }
.exchange-btn a{ .exchange-btn a {
color: #006CFF; 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 #006CFF; border: 1px solid #006cff;
} }
.exchange-btn:hover.buy-btn{ .exchange-btn:hover.buy-btn {
background-color: #006CFF; 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: #006CFF; 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: #006CFF; 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: #006CFF; 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: #006CFF; 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: #006CFF; color: #00cc5a;
} }
.layui-table-body .laytable-cell-5-0-0{ .layui-table-body .laytable-cell-5-0-0 {
color: #006CFF !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: #006CFF; color: #00cc5a;
} }
.main-sidebar-right .orderbook-wrap { .main-sidebar-right .orderbook-wrap {
@ -480,66 +542,66 @@ 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: #006CFF; color: #00cc5a;
} }
.Thtitle{ .Thtitle {
margin-top: 40px; margin-top: 40px;
line-height: 36px; line-height: 36px;
width: 100%; width: 100%;
background: rgba(28, 141,54, 0.05); background: #23274d;
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
padding-left: 20px; padding-left: 20px;
color: #303133; color: #ffffff;
} }
.cent{ .cent {
color: #006CFF; color: #00cc5a;
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: #006CFF !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;
} }

4
css/index.css
View File

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

32
css/login.css
View File

@ -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;
} }
@ -101,13 +100,18 @@
} }
.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 {
<<<<<<< HEAD
color: #006CFF; color: #006CFF;
font-weight: bold; font-weight: bold;
=======
color: #00A1E8;
font-weight: 500;
>>>>>>> 7a27bc75ce9d20b60c7393b5fe4ea035b18d0052
} }
/* .completed{ /* .completed{
@ -115,7 +119,7 @@
} */ } */
.disabledSubmit { .disabledSubmit {
background: #BFC2CC; background: rgba(255, 255, 255, 0.25);
} }
.activeSubmit { .activeSubmit {
@ -123,7 +127,7 @@
} }
.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 +135,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);;
} }

125
css/news.css
View File

@ -1,18 +1,92 @@
.newsHeader{ .newsHeader {
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 .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 .tabs span{ .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;
@ -32,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;
@ -49,32 +123,33 @@
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, #006CFF, #FFA3DC); /* background-image: linear-gradient(to left, #006CFF, #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;
@ -82,14 +157,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;
@ -100,7 +175,7 @@
-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;
} }
@ -108,13 +183,21 @@
.layui-laypage-em{ .layui-laypage-em{
background-color: #006CFF !important; 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 { .layui-laypage a:hover {
color: #006CFF; color: #006CFF;
} }
.newcon{ .newcon {
background: #fff !important; /* background: #fff !important; */
padding: 0; padding: 0;
} }
.flex{ .flex {
flex-wrap: wrap; flex-wrap: wrap;
} }

8
css/register.css
View File

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

152
html/exchange.html
View File

@ -1,7 +1,7 @@
<!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" />
@ -9,9 +9,9 @@
<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> -->
@ -83,6 +83,35 @@
<p class="p2">32,884.72</p> <p class="p2">32,884.72</p>
</div> </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">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="layui-tab-item">
<table lay-filter="usd" id="usd"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="btc" id="btc"></table>
</div>
<div class="layui-tab-item">
<table lay-filter="usdc" id="usdc"></table>
</div>
</div>
</div>
<!-- 右边栏 --> <!-- 右边栏 -->
<div class="main-sidebar-right layui-tab layui-tab-brief"> <div class="main-sidebar-right layui-tab layui-tab-brief">
<!-- <div class="main-tabs-nav layui-tab-title"> <!-- <div class="main-tabs-nav layui-tab-title">
@ -93,7 +122,7 @@
<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> </div>
@ -108,34 +137,6 @@
</div> </div>
</div> </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>
<div class="layui-tab-item">
<table lay-filter="btc" id="btc"></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"> <div class="main-middlebar layui-tab layui-tab-brief">
<ul class="main-tabs-nav layui-tab-title"> <ul class="main-tabs-nav layui-tab-title">
@ -167,72 +168,109 @@
<div class="main-tabs-content exchange-container"> <div class="main-tabs-content exchange-container">
<div class="exchange-item"> <div class="exchange-item">
<div class="exchange-head"> <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">
<span> -USD</span>
</div>
</div>
<!-- <div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p> <p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span> <span><a href="wallet.html">Recharge</a></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="buyPrice" data-type="buy"
placeholder="Price" step="0.01"> placeholder="Price" step="0.01">
<span class="s1">Price:</span> <span class="s1">Price:</span>
<span class="s2">USDT</span> <span class="s2">USD</span>
</div> </div>
<div class="exchange-input"> <div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy" <input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001"> placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span> <span class="s1">Amount:</span>
<span class="s2">BTC</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>
<div class="exchange-total"> <!-- <div class="exchange-total">
<div>Total</div> <div>Total</div>
<div class="exchange-total-input"> <div class="exchange-total-input">
<span>USDT</span> <span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000" <input type="number" name="buyTotal" readonly value="0.00000000" step="0.00000001">
step="0.00000001">
</div>
</div> </div>
<div class="exchange-btn buy-btn"><a href="login.html">Sign in</a> or <a </div> -->
href="login.html">Sign up</a> Now to trade</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"> <a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div> <div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a> </a>
</div> </div>
<div class="exchange-item"> <div class="exchange-item">
<div class="exchange-head"> <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">
<span> -USD</span>
</div>
</div>
<!-- <div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p> <p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span> <span><a href="wallet.html">Recharge</a></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="buyPrice" data-type="buy"
placeholder="Price" step="0.01"> placeholder="Price" step="0.01">
<span class="s1">Price:</span> <span class="s1">Price:</span>
<span class="s2">USDT</span> <span class="s2">USD</span>
</div> </div>
<div class="exchange-input"> <div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy" <input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001"> placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span> <span class="s1">Amount:</span>
<span class="s2">BTC</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>
<div class="exchange-total">
<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>Total</div>
<div class="exchange-total-input"> <div class="exchange-total-input">
<span>USDT</span> <span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000" <input type="number" name="buyTotal" readonly value="0.00000000" step="0.00000001">
step="0.00000001">
</div> </div>
</div> </div> -->
<div class="exchange-btn buy-btn"><a href="login.html">Sign in</a> or <a <div class="exchange-btn buy-btn"><a href="login.html">Log In</a> or <a
href="login.html">Sign up</a> Now to trade</div> href="login.html">Register</a> Now to trade</div>
<a href="login.html"> <a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div> <div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a> </a>
@ -241,13 +279,13 @@
</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>
@ -296,6 +334,6 @@
</script> </script>
</body> </body>
</html> </html>

123
html/news.html
View File

@ -18,8 +18,7 @@
<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">
@ -27,9 +26,11 @@
<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
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">
@ -46,7 +47,7 @@
</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>
@ -60,14 +61,105 @@
<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>
<div class="four_content newcon"> <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=""> <div class="">
<div class="rq flex"> <div class="rq flex">
<div class="bot"> <div class="bot">
@ -163,16 +255,15 @@
</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">
@ -240,7 +331,9 @@
<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
services, analyze our traffic, and for security and marketing. Accept all cookies,
customize your settings or read our full Cookie Policy.
</div> </div>
<div class="div2"> <div class="div2">
<a href="">Customize</a> <a href="">Customize</a>

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

140
js/exchange.js
View File

@ -1,5 +1,5 @@
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){
@ -14,11 +14,11 @@
// }); // });
$('.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();
@ -30,16 +30,16 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
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 },
@ -49,9 +49,9 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
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 },
@ -73,9 +73,9 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
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 },
@ -90,36 +90,36 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
const rec = table.render({ const optional = table.render({
elem: '#rec', elem: '#optional',
data: [ 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'}, { 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: [[ cols: [[
@ -143,7 +143,7 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
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%' },
@ -154,12 +154,12 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
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%' },
@ -214,25 +214,25 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
page: false, page: false,
}) })
//点击星星 //点击星星
$('.main-sidebar-left').on('click','.coinClass',function(event){ $('.main-sidebar-left').on('click', '.coinClass', function (event) {
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
let flag = $(this).hasClass('layui-icon-rate-solid'); let flag = $(this).hasClass('layui-icon-rate-solid');
if(flag){ if (flag) {
$(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate') $(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate')
} else { } else {
$(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid') $(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid')
} }
}).on('click','tr',function(){ }).on('click', 'tr', function () {
let title = $('.main-sidebar-left .layui-tab-title .layui-this').text(); let title = $('.main-sidebar-left .layui-tab-title .layui-this').text();
let trSpan = $(this).find('td').find('.coin-text').text() let trSpan = $(this).find('td').find('.coin-text').text()
$('#detailPair').html(trSpan+'/'+title) $('#detailPair').html(trSpan + '/' + title)
}) .on('click','.layui-tab-title li',function(){ }).on('click', '.layui-tab-title li', function () {
}) })
var ws = new WebSocket("ws://localhost:9998/echo"); var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() { ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据 // Web Socket 已连接上，使用 send() 方法发送数据
// ws.send("发送数据"); // ws.send("发送数据");
// alert("数据发送中..."); // alert("数据发送中...");
@ -245,13 +245,13 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
fav.reload({ fav.reload({
data: [] data: []
}) })
usdt.reload({ usd.reload({
data: [] data: []
}) })
btc.reload({ btc.reload({
data: [] data: []
}) })
eth.reload({ usdc.reload({
data: [] data: []
}) })
marketTrades.reload({ marketTrades.reload({
@ -276,7 +276,7 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
// getKline() // getKline()
$('.compute').on('input propertychange change', function(e) { $('.compute').on('input propertychange change', function (e) {
const that = $(this) const that = $(this)
const type = that.data('type') const type = that.data('type')
$(`[name="${type}Total"]`).val( $(`[name="${type}Total"]`).val(
@ -285,15 +285,15 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
}, new BigNumber(1)).toFixed(8) }, new BigNumber(1)).toFixed(8)
) )
}) })
$('[placeholder="Price"]').on('blur', function() { $('[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()
} }
}) })
@ -301,10 +301,10 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
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>`
} }
@ -565,7 +565,7 @@ function getKline() {
// // } // // }
deptrh() deptrh()
// 深度图 // 深度图
function deptrh(){ function deptrh() {
Highcharts.chart('deptrhContainer', { Highcharts.chart('deptrhContainer', {
chart: { chart: {
type: 'area' type: 'area'
@ -583,7 +583,7 @@ function deptrh(){
} }
}, },
title: { title: {
text:'Price BTC', text: 'Price BTC',
style: { style: {
color: "#fff" color: "#fff"
} }
@ -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",

Write Preview
Loading…
Cancel
Save