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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      css/common.css
  2. 208
      css/exchange.css
  3. 17
      css/forgetPassword.css
  4. 2
      css/index.css
  5. 37
      css/login.css
  6. 96
      css/news.css
  7. 6
      css/register.css
  8. 136
      html/exchange.html
  9. 115
      html/news.html
  10. BIN
      image/bg.png
  11. BIN
      image/[email protected]
  12. 20
      js/exchange.js

25
css/common.css
View File

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

208
css/exchange.css
View File

@ -1,9 +1,12 @@
.trade {
color: #FFFFFF !important;
background-image: linear-gradient(to right, #FFA3DC, #1C8D36);
color: #ffffff !important;
background-image: linear-gradient(to right, #ffa3dc, #00cc5a);
border-radius: 15px;
}
.main {
background-color: #040610;
}
.container2 {
width: 1366px;
@ -21,21 +24,25 @@
padding-left: 30px;
}
.main-sidebar-left, .main-sidebar-right {
.main-sidebar-left,
.main-sidebar-right {
width: 300px;
border: 1px solid #D9D9D9;
/* border: 1px solid #D9D9D9; */
}
.main-sidebar-left {
.main-sidebar-right {
float: right;
}
.main-sidebar-right {
.main-sidebar-left {
float: left;
}
.main-sidebar-left .main-tabs-content, .main-sidebar-right .main-tabs-content {
.main-sidebar-left .main-tabs-content,
.main-sidebar-right .main-tabs-content {
height: 888px;
background: #111534;
border: none;
}
.main-middlebar {
@ -44,7 +51,7 @@
.main-tabs-nav {
height: 38px;
border-bottom: 1px solid #EDEFF2;
border-bottom: 1px solid #edeff2;
}
.main-tabs-content {
@ -74,7 +81,7 @@
.tradingview-head span {
margin-right: 15px;
font-size: 12px;
color: #303133;
color: #ffffff;
line-height: 38px;
}
@ -111,9 +118,9 @@
font-family: PingFang SC;
font-weight: 600;
line-height: 36px;
color: #1C8D36;
color: #006cff;
opacity: 1;
border-bottom: 2px solid #1C8D36;
border-bottom: 2px solid #006cff;
margin-left: 20px;
}
@ -121,7 +128,7 @@
float: left;
width: 50%;
margin-top: 15px;
border-right: 1px solid #EDEFF2;
border-right: 1px solid #edeff2;
box-sizing: border-box;
padding: 0 20px 17px;
}
@ -132,20 +139,20 @@
.exchange-head {
display: flex;
color: #606266;
justify-content: space-between;
color: rgba(255, 255, 255, 0.65);
line-height: 22px;
margin-bottom: 22px;
}
.exchange-head a {
color: #606266;
color: rgba(255, 255, 255, 0.65);
}
.exchange-head span {
padding-right: 8px;
}
.exchange-head span:last-of-type {
padding-right: 0;
}
@ -168,7 +175,7 @@
height: 27px;
line-height: 27px;
font-size: 13px;
border: 1px solid #EDEFF2;
border: 1px solid #edeff2;
border-radius: 4px;
color: #909399;
cursor: pointer;
@ -180,7 +187,7 @@
}
.exchange-tags-label input:checked + span {
border-color: #1C8D36;
border-color: #006cff;
}
.exchange-input {
@ -190,23 +197,47 @@
}
.exchange-input .layui-input {
background-color: #fff;
background-color: #23274d;
border-radius: 6px;
padding-left: 18px;
color: #303133;
color: rgba(255, 255, 255, 0.85);
width: 236px;
height: 40px;
font-size: 14px;
border: none;
float: right;
}
.tags {
width: 100%;
margin: 7px 0;
border-radius: 6px;
padding-left: 18px;
color: rgba(255, 255, 255, 0.85);
/* width: 246px; */
font-size: 12px;
border: none;
display: flex;
justify-content: flex-end;
}
.tags .tag {
display: inline-block;
width: 51px;
height: 20px;
line-height: 20px;
background: #191E3E;
border: 1px solid rgba(255, 255, 255, 0.25098039215686274);
opacity: 1;
border-radius: 2px;
text-align: center;
margin-left: 10px;
}
.exchange-input .layui-input:hover {
border-color: #1C8D36 !important;
border-color: #006cff !important;
}
.exchange-input .layui-input:focus {
border-color: #1C8D36 !important;
border-color: #006cff !important;
}
.exchange-input .s1 {
@ -214,13 +245,15 @@
top: 13px;
left: 16px;
line-height: 1em;
color: #303133;
color: rgba(255, 255, 255, 0.65);
}
.exchange-input .s2 {
position: absolute;
right: 15px;
font-size: 13px;
color: #1C8D36;
color: #d9d9d9;
top: 13px;
}
.exchange-total {
@ -261,11 +294,11 @@
text-align: center;
border-radius: 6px;
cursor: pointer;
color: #1C8D36;
color: #006cff;
font-size: 14px;
}
.exchange-btn a {
color: #1C8D36;
color: #006cff;
font-size: 14px;
height: 100%;
}
@ -273,31 +306,31 @@
color: #fff;
}
.exchange-btn.buy-btn {
border:1px solid #1C8D36;
border: 1px solid #006cff;
}
.exchange-btn:hover.buy-btn {
background-color: #1C8D36;
background-color: #006cff;
color: #fff;
}
.exchange-btn.buy-login-btn {
background: #00505F;
background: #00505f;
border: 1px solid#00505F;
color:#FFFFFF;
color: #ffffff;
font-weight: bold;
}
.exchange-btn.sell-btn {
background-color: #E5544E;
background-color: #e5544e;
}
.exchange-btn:hover::after {
position: absolute;
content: '';
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .1);
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
@ -307,14 +340,15 @@
}
.main-tabs-nav.layui-tab-title {
border-bottom: 1px solid #EDEFF2;
border-bottom: 1px solid #edeff2;
padding: 0 15px;
background: #111534;
}
.main-tabs-nav.layui-tab-title li {
height: 36px;
line-height: 36px;
color: #303133;
color: #ffffff;
padding: 0;
text-align: center;
float: left;
@ -322,13 +356,13 @@
}
.main-tabs-nav.layui-tab-title li.layui-this {
color: #1C8D36;
color: #006cff;
font-size: 14px;
}
.main-tabs-nav.layui-tab-title li.layui-this:after {
height: 38px;
border-color: #1C8D36;
border-color: #006cff;
}
.main-sidebar-left .main-tabs-nav.layui-tab-title li {
@ -339,7 +373,8 @@
width: 50%;
}
.main-delegate .main-tabs-nav.layui-tab-title li, .main-middlebar .main-tabs-nav.layui-tab-title li {
.main-delegate .main-tabs-nav.layui-tab-title li,
.main-middlebar .main-tabs-nav.layui-tab-title li {
width: auto;
padding: 0 16px;
}
@ -350,7 +385,10 @@
line-height: 30px;
}
.main-sidebar-left th:first-of-type .layui-table-cell, .main-sidebar-left td:first-of-type .layui-table-cell, .main-sidebar-right th:first-of-type .layui-table-cell, .main-sidebar-right td:first-of-type .layui-table-cell {
.main-sidebar-left th:first-of-type .layui-table-cell,
.main-sidebar-left td:first-of-type .layui-table-cell,
.main-sidebar-right th:first-of-type .layui-table-cell,
.main-sidebar-right td:first-of-type .layui-table-cell {
padding: 0 0 0 10px;
}
@ -358,64 +396,87 @@
padding: 0 10px;
}
.layui-table, .layui-table-view {
.layui-table,
.layui-table-view {
margin: 6px 0 0;
background: none;
}
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
.layui-table tbody tr:hover,
.layui-table thead tr,
.layui-table-click,
.layui-table-header,
.layui-table-hover,
.layui-table-mend,
.layui-table-patch,
.layui-table-tool,
.layui-table-total,
.layui-table-total tr,
.layui-table[lay-even] tr:nth-child(even) {
background: none;
}
.layui-table tbody tr:hover {
background: rgba(194, 226, 211, .19);
background: rgba(194, 226, 211, 0.19);
}
.layui-table tbody tr td:hover {
cursor: pointer;
}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
.layui-table td,
.layui-table th,
.layui-table-col-set,
.layui-table-fixed-r,
.layui-table-grid-down,
.layui-table-header,
.layui-table-page,
.layui-table-tips-main,
.layui-table-tool,
.layui-table-total,
.layui-table-view,
.layui-table[lay-skin="line"],
.layui-table[lay-skin="row"] {
border-color: transparent;
}
.layui-table-header .layui-table-cell {
color: #959AA3;
color: #959aa3;
text-align: center;
}
.layui-table-sort .layui-table-sort-desc {
border-top-color: #D8D8D8;
border-top-color: #d8d8d8;
}
.layui-table-sort .layui-table-sort-desc:hover {
border-top-color: #D8D8D8;
border-top-color: #d8d8d8;
}
.layui-table-sort[lay-sort=desc] .layui-table-sort-desc {
border-top-color: #1C8D36;
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
border-top-color: #00cc5a;
}
.layui-table-sort .layui-table-sort-asc {
border-bottom-color: #D8D8D8;
border-bottom-color: #d8d8d8;
}
.layui-table-sort .layui-table-sort-asc:hover {
border-bottom-color: #D8D8D8;
border-bottom-color: #d8d8d8;
}
.layui-table-sort[lay-sort=asc] .layui-table-sort-asc {
border-bottom-color: #1C8D36;
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
border-bottom-color: #00cc5a;
}
.layui-table-body .laytable-cell-6-0-0 {
color: #E5544E !important;
color: #e5544e !important;
}
.layui-table-view .layui-table td {
padding: 0;
}
.layui-table-view .layui-table td .layui-table-cell {
color: #303133;
color: #ffffff;
text-align: center;
}
@ -424,34 +485,35 @@
}
.layui-icon.layui-icon-rate-solid {
color: #F79A28;
color: #f79a28;
}
.layui-icon.layui-icon-rate {
color: #959AA3;
color: #959aa3;
}
.buy-color {
color: #1C8D36;
color: #00cc5a;
}
.layui-table-body .laytable-cell-5-0-0 {
color: #1C8D36 !important;
color: #00cc5a !important;
}
.sell-color {
color: #E5544E;
color: #e5544e;
}
.gray-color {
color:#303133;
color: #ffffff;
}
.coin-text {
margin-left: 6px;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
@ -466,7 +528,7 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
padding: 12px auto;
background-color: rgba(189, 98, 255, 0.1);
font-size: 12px;
color: #1C8D36;
color: #00cc5a;
}
.main-sidebar-right .orderbook-wrap {
@ -480,7 +542,7 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
}
.highcharts-background {
fill: #121C31;
fill: #121c31;
}
.main-sidebar-top {
@ -494,47 +556,47 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
.main-sidebar-top .one {
font-size: 14px;
color: #666666;
color: rgba(255, 255, 255, 0.65);
}
.main-sidebar-top .one .s1 {
font-size: 28px;
color: #303133;
color: #ffffff;
}
.main-sidebar-top .two {
margin-left: 40px;
}
.main-sidebar-top .two .p1 {
font-size: 12px;
color: #666666;
color: rgba(255, 255, 255, 0.65);
}
.main-sidebar-top .two .p2 {
font-size: 14px;
color: #1C8D36;
color: #00cc5a;
}
.Thtitle {
margin-top: 40px;
line-height: 36px;
width: 100%;
background: rgba(28, 141,54, 0.05);
background: #23274d;
text-align: left;
font-size: 14px;
padding-left: 20px;
color: #303133;
color: #ffffff;
}
.cent {
color: #1C8D36;
color: #00cc5a;
font-weight: bold;
text-align: center;
}
.layui-table-body .laytable-cell-7-0-0 {
color: #1C8D36 !important;
color: #00cc5a !important;
}
.gai {
background-color: #F5F7FA !important;
background-color: #111534 !important;
}
.main-delegate {
border: 1px solid #D9D9D9;
border: 1px solid #d9d9d9;
}
.ma1 {
padding-bottom: 20px;

17
css/forgetPassword.css
View File

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

2
css/index.css
View File

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

37
css/login.css
View File

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

96
css/news.css
View File

@ -1,9 +1,18 @@
.newsHeader {
border-bottom: solid 1px #EDEFF2;
border-bottom: solid 1px #edeff2;
}
.newsContent {
background: #040610;
}
.newsContent .container {
margin: 21px auto 0;
margin: 41px auto 72px;
padding: 40px;
display: flex;
justify-content: space-between;
background-color: #111534;
border-radius: 15px;
}
.newsContent .container .tabs {
@ -11,9 +20,73 @@
font-weight: bold;
color: #303133;
margin-bottom: 20px;
border-radius: 8px;
width: 258px;
border: 1px solid #303552;
background: #23274d;
}
.newsContent .container .tabs .tabsIsActiveOne {
height: 63px;
line-height: 63px;
color: rgba(255, 255, 255, 0.65);
padding-left: 49px;
border-bottom: 1px solid #303552;
}
.newsContent .container .new_list {
width: 880px;
}
.newsContent .container .tabs span{
.newsContent .container .new_list .item {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.newsContent .container .new_list .item .newImg {
width: 180px;
height: 135px;
border-radius: 6px;
margin-right: 24px;
}
.newsContent .container .new_list .item .info .tit {
font-size: 20px;
font-family: SF Pro;
font-weight: 500;
line-height: 24px;
color: rgba(255, 255, 255, 0.85);
}
.newsContent .container .new_list .item .info .time {
margin: 6px 0 12px;
font-size: 14px;
font-family: SF Pro;
font-weight: 400;
line-height: 27px;
color: rgba(255, 255, 255, 0.25);
opacity: 1;
}
.newsContent .container .new_list .item .info .time img {
width: 20px;
height: 20px;
border-radius: 50%;
}
.newsContent .container .new_list .item .info .content {
font-size: 16px;
font-family: SF Pro;
font-weight: 400;
line-height: 24px;
color: rgba(255, 255, 255, 0.45);
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* .newsContent .container .tabs span{
cursor: pointer;
margin-right: 12px;
padding: 8px 0;
@ -33,7 +106,7 @@
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
} */
.newsContent .container .newList .new-item {
display: flex;
@ -59,9 +132,9 @@
position: absolute;
bottom: 10px;
right: 10px;
background-image: linear-gradient(to left, #1C8D36, #FFA3DC);
background-image: linear-gradient(to left, #1c8d36, #ffa3dc);
border-radius: 6px;
color: #FFFFFF;
color: #ffffff;
padding: 7px 12px;
}
.newsContent .container .newList .new-item .new_img .new_block img {
@ -107,13 +180,18 @@
}
.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 {
color: #1C8D36;
color: #006CFF;
}
.newcon {
background: #fff !important;
/* background: #fff !important; */
padding: 0;
}
.flex {

6
css/register.css
View File

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

136
html/exchange.html
View File

@ -83,6 +83,35 @@
<p class="p2">32,884.72</p>
</div>
</div>
<!-- 左边栏 -->
<div class="main-sidebar-left layui-tab layui-tab-brief">
<div class="main-tabs-nav layui-tab-title">
<li class="layui-this">Optional</li>
<li>BTC</li>
<li>USD</li>
<li>USDC</li>
</div>
<div class="main-tabs-content layui-tab-content">
<div class="layui-tab-item layui-show">
<table lay-filter="fav" id="fav"></table>
<div class="Thtitle"><span>Trade History</span> </div>
<table lay-filter="optional" id="optional"></table>
</div>
<div class="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-tabs-nav layui-tab-title">
@ -93,7 +122,7 @@
<div class="layui-tab-item layui-show">
<div class="main-tabs-content">
<table lay-filter="marketTrades" id="marketTrades"></table>
<div class="Thtitle cent"><span>32847.59</span> </div>
<div class="Thtitle cent"><span>32847.59 ↑</span> </div>
<table lay-filter="recc" id="recc"></table>
</div>
</div>
@ -108,34 +137,6 @@
</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">
<ul class="main-tabs-nav layui-tab-title">
@ -167,72 +168,109 @@
<div class="main-tabs-content exchange-container">
<div class="exchange-item">
<div class="exchange-head">
<div class="left">
<span>Buy</span>
<span>ALGO </span>
</div>
<div class="exchange-head exchange-head2">
<div class="right">
<span> -USD</span>
</div>
</div>
<!-- <div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span>
</div>
</div> -->
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyPrice" data-type="buy"
placeholder="Price" step="0.01">
<span class="s1">Price:</span>
<span class="s2">USDT</span>
<span class="s2">USD</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span>
<span class="s2">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-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 class="exchange-total-input">
<span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000"
step="0.00000001">
<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>
</div> -->
<div class="exchange-btn buy-btn"><a href="login.html">Log In</a> or <a
href="login.html">Register</a> Now to trade</div>
<a href="login.html">
<div class="exchange-btn buy-login-btn" style="display: none;">log in</div>
</a>
</div>
<div class="exchange-item">
<div class="exchange-head">
<div class="left">
<span>Buy</span>
<span>ALGO </span>
</div>
<div class="exchange-head exchange-head2">
<div class="right">
<span> -USD</span>
</div>
</div>
<!-- <div class="exchange-head exchange-head2">
<p>Available <span>0.12 USDT</span></p>
<span><a href="wallet.html">Recharge</a></span>
</div>
</div> -->
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyPrice" data-type="buy"
placeholder="Price" step="0.01">
<span class="s1">Price:</span>
<span class="s2">USDT</span>
<span class="s2">USD</span>
</div>
<div class="exchange-input">
<input type="number" class="layui-input compute" name="buyAmount" data-type="buy"
placeholder="Amount" step="0.0001">
<span class="s1">Amount:</span>
<span class="s2">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-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 class="exchange-total-input">
<span>USDT</span>
<input type="number" name="buyTotal" readonly value="0.00000000"
step="0.00000001">
<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>
</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>

115
html/news.html
View File

@ -18,8 +18,7 @@
<div class="">
<div class="header bo-show">
<div class="header_content container">
<a href="../index.html" class="logo"><img src="../image/[email protected]"
alt=""></a>
<a href="../index.html" class="logo"><img src="../image/[email protected]" alt=""></a>
<div class="header_tabs">
<div class="acon1">
<span class="NotLog" v-show="isLogin2">
@ -27,9 +26,11 @@
<a href="../html/register.html" class="a">Sign-up</a>
</span>
<span class="LogIn" v-show="isLogin">
<a href="" class="a">[email protected] <img src="../image/h1.png" alt="" class="h1"></a>
<a href="" class="a">[email protected] <img src="../image/h1.png" alt=""
class="h1"></a>
<div class="LogList">
<a href="securityCenter.html" class="active sc">Security center <img src="../image/meun_icon_my_nor.png" alt=""></a>
<a href="securityCenter.html" class="active sc">Security center <img
src="../image/meun_icon_my_nor.png" alt=""></a>
<a href="javascript::" class="so" @click="logOut">Sign out
<img src="../image/pop_icon_signout.png" alt="" class="img1">
<img src="../image/pop_icon_signoutb.png" alt="" class="img2">
@ -60,14 +61,105 @@
<div class="newsContent" id="news" v-cloak>
<div class="container">
<div class="tabs">
<span :class="tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('recent')">Bitcoin News</span>
<div class="tabsIsActiveOne" @click="handlerTabs('recent')">
Bitcoin News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Ethereum News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Litecoin News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Ripple News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Action News
</div>
<div class="tabsIsActiveOne" @click="handlerTabs('topNews')">
Blockchain News
</div>
<!-- <span :class="tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('recent')">Bitcoin News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Litecoin News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Ripple News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Ethereum News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Action News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Blockchain News</span>
<span :class="!tabsIsActiveOne ? 'tabsActive':''" @click="handlerTabs('topNews')">Blockchain News</span> -->
</div>
<div class="new_list">
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
Short-term profit opportunities are there, but so are concerns over a “panic” sell-off
still absent from BTC price charts.Short-term profit opportunities are there, but so are
concerns over a
</div>
</div>
</div>
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
Short-term profit opportunities are there, but so are concerns over a “panic” sell-off
still absent from BTC price charts.Short-term profit opportunities are there, but so are
concerns over a
</div>
</div>
</div>
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="four_content newcon">
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
Short-term profit opportunities are there, but so are concerns over a “panic” sell-off
still absent from BTC price charts.Short-term profit opportunities are there, but so are
concerns over a
</div>
</div>
</div>
<div class="item">
<img src="../image/img.png" class="newImg">
<div class="info">
<div class="tit">
More Americans have heard of Dogecoin than Ethereum: Survey
</div>
<div class="time">
<img src="../image/img.png">
Greg Thomson｜MAY 25, 2021
</div>
<div class="content">
Short-term profit opportunities are there, but so are concerns over a “panic” sell-off
still absent from BTC price charts.Short-term profit opportunities are there, but so are
concerns over a
</div>
</div>
</div>
<div id="pagination" class="pagination">
</div>
</div>
<!-- <div class="four_content newcon">
<div class="">
<div class="rq flex">
<div class="bot">
@ -163,9 +255,8 @@
</div>
</div>
</div>
<div id="pagination" class="pagination">
</div>
</div> -->
<!-- -->
<!-- help -->
<a href="../html/help.html" class="help_con">
<div class="a_con">
@ -240,7 +331,9 @@
<div class="container">
<div class="rq flex">
<div class="div1">
We use cookies and similar technologies to operate core site features, customize core services, analyze our traffic, and for security and marketing. Accept all cookies, customize your settings or read our full Cookie Policy.
We use cookies and similar technologies to operate core site features, customize core
services, analyze our traffic, and for security and marketing. Accept all cookies,
customize your settings or read our full Cookie Policy.
</div>
<div class="div2">
<a href="">Customize</a>

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

20
js/exchange.js
View File

@ -49,9 +49,9 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
skin: 'nob',
page: false
})
// usdt
const usdt = table.render({
elem: '#usdt',
//
const usd = table.render({
elem: '#usd',
data: [],
cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
@ -73,9 +73,9 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
skin: 'nob',
page: false,
})
// eth
const eth = table.render({
elem: '#eth',
// usdc
const usdc = table.render({
elem: '#usdc',
data: [],
cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
@ -90,8 +90,8 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
const rec = table.render({
elem: '#rec',
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' },
@ -245,13 +245,13 @@ $('.main-sidebar-left').on('click','.coinClass',function(e){
fav.reload({
data: []
})
usdt.reload({
usd.reload({
data: []
})
btc.reload({
data: []
})
eth.reload({
usdc.reload({
data: []
})
marketTrades.reload({

Write Preview
Loading…
Cancel
Save