|
|
@ -0,0 +1,275 @@ |
|
|
|
|
|
@charset "utf-8"; |
|
|
|
|
|
/* CSS Document */ |
|
|
|
|
|
/**************************币币交易**************************/ |
|
|
|
|
|
/**颜色**/ |
|
|
|
|
|
.hc-bgColor1{background: #fff;} |
|
|
|
|
|
.hc-bgColor3{background: #fff;} |
|
|
|
|
|
.hc-color4{color: #8488f5;} |
|
|
|
|
|
.hc-color2{color: #00c295;} |
|
|
|
|
|
/****/ |
|
|
|
|
|
.ce-warp{margin: 55px 0 0;} |
|
|
|
|
|
.ce-warp1{display:flex;margin-top: 5px; } |
|
|
|
|
|
.ex-content-top{} |
|
|
|
|
|
.ce-div1{width: 300px;max-width: 300px;} |
|
|
|
|
|
.ce-div2{margin-left: 5px;width: calc(100% - 900px);} |
|
|
|
|
|
.ce-div2.active{width: 68%;max-width: 100%;} |
|
|
|
|
|
.ce-div3{width: 300px;max-width: 300px;margin-left: 5px;} |
|
|
|
|
|
.ce-div4{width: 300px;max-width: 300px;margin-left: 5px;} |
|
|
|
|
|
.ce-div5{width: 100%;position: relative;} |
|
|
|
|
|
|
|
|
|
|
|
/***************************************/ |
|
|
|
|
|
/*--------------box1------------------*/ |
|
|
|
|
|
.list-div1-div1{padding: 0 15px;position: relative;} |
|
|
|
|
|
.list-div1-div1 h2{font-size: 14px;color: #66718f;} |
|
|
|
|
|
.list-div1-div1 p{font-size: 12px; color: #66718f;} |
|
|
|
|
|
.list-div1-div1 .hide{display:block;width: 20px;height: 20px;position: absolute;top:4px;right:10px;z-index: 999;cursor: pointer;} |
|
|
|
|
|
.list-div1-div1 .hide i {display: block;width: 20px;height: 20px;background: url(../images/eye_open.png) no-repeat center center;background-size:20px;} |
|
|
|
|
|
.list-div1-div1 .hide.active i{background: url(../images/eye_shut.png) no-repeat center center;background-size:20px;} |
|
|
|
|
|
.hc-colors{ color: #00c295; } |
|
|
|
|
|
|
|
|
|
|
|
.list1{border-bottom: 1px solid #2e2f43;} |
|
|
|
|
|
.list1-div1{padding:15px 10px 10px 10px;color: #fff;font-size: 14px;} |
|
|
|
|
|
|
|
|
|
|
|
.list2{padding: 10px;position: relative;} |
|
|
|
|
|
.list2-div1{overflow: hidden;} |
|
|
|
|
|
.list2-div1 span{color: #343434;display: inline-block;font-size: 14px; line-height: 26px;} |
|
|
|
|
|
/*搜索*/ |
|
|
|
|
|
.list2-div1 .list2-soso-box{width: 60%; float: right;border: 1px solid #cad7e0; border-radius: 3px;} |
|
|
|
|
|
.list2-soso-box input{width: 180px;padding-left: 10px;height: 26px;border: none;background: none;color: #66718f;} |
|
|
|
|
|
.list2-soso-box input::-webkit-input-placeholder{ color:#ccc;} |
|
|
|
|
|
.list2-soso-box .list2-icon-search{display: block;width: 28px;height: 28px;position: absolute;top:9px;right: 10px;background-image: url(../images/icon-search.png);background-position: center center;background-repeat: no-repeat;background-size:16px;cursor: pointer;} |
|
|
|
|
|
|
|
|
|
|
|
/***/ |
|
|
|
|
|
.list2-div2{width: 100%;padding-top: 10px;} |
|
|
|
|
|
.list2-div2 span{display: inline-block; font-size: 12px; line-height: 18px; color: #343434; border-radius: 3px;padding: 0 6px;cursor: pointer;} |
|
|
|
|
|
.list2-div2 span.active{background: #8488f5;color: #fff;} |
|
|
|
|
|
|
|
|
|
|
|
/***/ |
|
|
|
|
|
.list3{} |
|
|
|
|
|
.list3 .table-title{padding: 0 10px;} |
|
|
|
|
|
.list3 .table-title .table{width: 100%; max-width: 100%;} |
|
|
|
|
|
.list3 .table-title .table>thead>tr>th{padding: 0px;font-size:10px; color: #66718f;font-weight: normal;width: 33.33%;text-align: left;border:none;} |
|
|
|
|
|
.list3 .table-title .table>thead>tr>th:last-child{padding-left: 10px;} |
|
|
|
|
|
.list3 .table-title .table .cell{white-space: normal;word-break: break-all;line-height: 18px;font-size: 10px;} |
|
|
|
|
|
.list3 .table-title .table th>.cell{position: relative;word-wrap: normal;text-overflow: ellipsis;vertical-align: middle;width: 100%;box-sizing: border-box;} |
|
|
|
|
|
|
|
|
|
|
|
.list3 .table-title .table .caret-wrapper {display: -ms-inline-flexbox;display: inline-flex;-ms-flex-direction: column;flex-direction: column;-ms-flex-align: center;align-items: center;height: 34px;width: 24px;vertical-align: middle;cursor: pointer;overflow: initial;position: relative;} |
|
|
|
|
|
.list3 .table-title .table .sort-caret {width: 0;height: 0;border: 5px solid transparent;position: absolute;left: 7px;} |
|
|
|
|
|
.list3 .table-title .table .sort-caret.ascending {top: 5px;border-bottom-color: #464958;} |
|
|
|
|
|
.list3 .table-title .table .sort-caret.descending {bottom: 7px;border-top-color: #464958;} |
|
|
|
|
|
.list3 .table-title .table .sort-caret.ascending.active{border-bottom-color: #8488f5;} |
|
|
|
|
|
.list3 .table-title .table .sort-caret.descending.active{border-top-color: #8488f5;} |
|
|
|
|
|
|
|
|
|
|
|
/**------滚动滑块------**/ |
|
|
|
|
|
.list3 .table-content{padding: 0px 10px;height: 546px;overflow-x: hidden;overflow-y: scroll; |
|
|
|
|
|
scrollbar-face-color: #5f97ff;/*移动滑块颜色*/ |
|
|
|
|
|
scrollbar-shadow-color: #5f97ff;/*移动滑块边框颜色*/ |
|
|
|
|
|
scrollbar-track-color: #f9f9f9;/*背景颜色*/ |
|
|
|
|
|
scrollbar-arrow-color: #f9f9f9;/*箭头颜色*/ |
|
|
|
|
|
} |
|
|
|
|
|
.list3 .table-content::-webkit-scrollbar-track |
|
|
|
|
|
{ |
|
|
|
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); |
|
|
|
|
|
background-color: #f9f9f9; |
|
|
|
|
|
}/* 滚动条的滑轨背景颜色 */ |
|
|
|
|
|
.list3 .table-content::-webkit-scrollbar |
|
|
|
|
|
{ |
|
|
|
|
|
width: 6px; |
|
|
|
|
|
display: block; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
.list3 .table-content::-webkit-scrollbar-thumb |
|
|
|
|
|
{ |
|
|
|
|
|
background-color: #cad7e0; |
|
|
|
|
|
}/* 滑块颜色 */ |
|
|
|
|
|
/**----滚动滑块（结束）-----**/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**列表数据**/ |
|
|
|
|
|
.table-content-div1 .table{width: 100%;max-width: 100%;} |
|
|
|
|
|
.table-content-div1 .table>tbody>tr>td{padding: 0px;font-size:10px; color: #fff;font-weight: normal;width: 33.33%;text-align: left;border: none;} |
|
|
|
|
|
.table-content-div1 .table>tbody>tr>td:last-child{padding-left: 10px;} |
|
|
|
|
|
.list3 .table-content-div1 .table .cell{white-space: normal;word-break: break-all;line-height: 28px;font-size: 10px; color: #66718f;} |
|
|
|
|
|
.list3 .table-content-div1 .table .cells{ line-height: 18px; overflow: hidden; margin-bottom: 10px;} |
|
|
|
|
|
.list3 .table-content-div1 .table .cells span{ float: left; } |
|
|
|
|
|
.list3 .table-content-div1 .table th>.cell{position: relative;word-wrap: normal;text-overflow: ellipsis;vertical-align: middle;width: 100%;box-sizing: border-box;} |
|
|
|
|
|
/**红绿数据**/ |
|
|
|
|
|
.table-content-div1 .icon-arrow{display: inline-block;width:8px;height: 8px; position: relative;animation: mymovesheng 2s infinite;-webkit-animation: mymovesheng 2s infinite;margin-left: 6px;} |
|
|
|
|
|
.table-content-div1 .red-text .icon-arrow{background-image: url(../images/arrow-red.png);background-position: center center;background-repeat: no-repeat;background-size:cover;} |
|
|
|
|
|
.table-content-div1 .green-text .icon-arrow{background-image: url(../images/arrow-green.png);background-position: center center;background-repeat: no-repeat;background-size:cover;} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/***************************************/ |
|
|
|
|
|
/*--------------box2------------------*/ |
|
|
|
|
|
.line-top-div1{overflow: hidden; display: table;width: 100%;padding:4px 10px;} |
|
|
|
|
|
.line-top-div1 >div{display:table-cell; color: #fff;line-height: 18px;} |
|
|
|
|
|
|
|
|
|
|
|
.line-div3 img{position: relative;top:10px;cursor: pointer;} |
|
|
|
|
|
.line-div4 span{font-size: 18px; color: #ccc;position: relative;top:10px;} |
|
|
|
|
|
.span-text1{font-size:15px;} |
|
|
|
|
|
.span-text2{font-size: 12px; color: #66718f;} |
|
|
|
|
|
.line-div1 p{font-size: 12px; color: #66718f;line-height: 14px;} |
|
|
|
|
|
.line-div1 span{font-size: 12px;color: #ccc;line-height: 14px;} |
|
|
|
|
|
.line-btn .line-btn-span{position: relative;top:8px;display: inline-block; background: #8488f5; color: #fff;font-size: 12px;padding: 3px 8px;border-radius: 3px; cursor: pointer;} |
|
|
|
|
|
|
|
|
|
|
|
/**趋势图**/ |
|
|
|
|
|
.qushi-box{width:100%; height: 360px;background: #fff;position: relative;padding: 10px;overflow: hidden;} |
|
|
|
|
|
.qushi-box img{width: 100%;height: 100%;} |
|
|
|
|
|
|
|
|
|
|
|
.btn-quanping{width: 20px;height: 20px;position:absolute;right:6px;top:6px;} |
|
|
|
|
|
.btn-quanping i{display: block;width: 20px;height: 20px;background-image: url(../images/icon-quanping.png); background-position: center;background-size: 100%;background-repeat: no-repeat;} |
|
|
|
|
|
|
|
|
|
|
|
/**买入卖出部分**/ |
|
|
|
|
|
.exchange-warp{} |
|
|
|
|
|
.titlebox{overflow: hidden;background: #5f97ff;padding: 10px;} |
|
|
|
|
|
.el-tabs-title{width: 90%;float: left;font-size: 16px;color: #e9e9e9;} |
|
|
|
|
|
.el-tabs-title span{display: inline-block;padding-right: 20px;cursor: pointer;} |
|
|
|
|
|
.el-tabs-title span.active{color: #fff;} |
|
|
|
|
|
.feilv-aa{float: right;font-size: 16px; color: #fff;} |
|
|
|
|
|
|
|
|
|
|
|
.contantbox{} |
|
|
|
|
|
.el-tab-pane{overflow: hidden;} |
|
|
|
|
|
.el-tab-pane .exchange-div1{width: 50%;float: left;padding: 10px;} |
|
|
|
|
|
|
|
|
|
|
|
.inputbox{width: 100%;border-radius:3px;color: #fff;position: relative;/*background:#2a2d42;*/margin-bottom: 10px;} |
|
|
|
|
|
.inputbox input{width: 100%; height:32px;color: #343434;/*border: 1px solid #3a3b54;*/border-radius: 3px;background: #f6f6f6;display: block;padding-left: 60px;} |
|
|
|
|
|
.inputbox span{font-size: 12px; color: #66718f;} |
|
|
|
|
|
.inputbox input:hover{border: solid 1px rgba(132, 136, 245, 0.49);} |
|
|
|
|
|
.inputbox input.unlock-inp{ padding-left: 10px; } |
|
|
|
|
|
.buy-span{position: absolute;left: 10px;top:8px;} |
|
|
|
|
|
.bz-span{position: absolute;right: 10px;top:8px;} |
|
|
|
|
|
.unlock-buy{ width: 100%; float: left; padding: 10px;} |
|
|
|
|
|
.unlock-buy .sell-button{ display: block; |
|
|
|
|
|
padding: 6px 20px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
background: #f55d5d; |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
color: #fff; } |
|
|
|
|
|
|
|
|
|
|
|
.text-Price{padding: 0px 10px;} |
|
|
|
|
|
.text-Price span{font-size: 12px; color: #66718f;} |
|
|
|
|
|
|
|
|
|
|
|
.exchange-div1 .list1-div1{padding:6px 0 10px 0;} |
|
|
|
|
|
.exchange-div1 .list1-div1 .available{display: inline-block;font-size: 12px;color: #66718f;} |
|
|
|
|
|
.exchange-div1 .list1-div1 .btn{display: inline-block;float: right;font-size: 12px;color:#5f97ff;cursor: pointer;} |
|
|
|
|
|
|
|
|
|
|
|
/**滑动条**/ |
|
|
|
|
|
.sliderbox{margin-top: 16px;} |
|
|
|
|
|
.el-slider__runway{position:relative;height: 5px;width: 100%;background:#5f97ff;border-radius: 6px;} |
|
|
|
|
|
.el-slider__button-wrapper{width: 36px;height: 36px;position: absolute;left: 0;top:-15px;transform: translateX(-50%);margin-left: 15px;} |
|
|
|
|
|
.el-slider__button{width: 15px;height: 15px;border-radius: 3px;border: 1px solid #5f97ff; background: #fff;vertical-align: middle;display: inline-block; |
|
|
|
|
|
position: relative;top:5px;cursor: pointer;} |
|
|
|
|
|
.el-slider__number{overflow: hidden;padding: 5px 0;} |
|
|
|
|
|
.el-slider__number span{display: block;width: 24.5%;font-size: 12px; float: left; color: #66718f;text-align: right;} |
|
|
|
|
|
.el-slider__number span:first-child{width: 2%;text-align: left;} |
|
|
|
|
|
|
|
|
|
|
|
/****/ |
|
|
|
|
|
.textbox{font-size: 13px; color: #66718f;padding: 10px 0;} |
|
|
|
|
|
.textbox span{color: #fff;padding-left: 6px;} |
|
|
|
|
|
|
|
|
|
|
|
/**买入按钮**/ |
|
|
|
|
|
.buy-btnbox{width: 100%;} |
|
|
|
|
|
.buy-btnbox button{display: block;padding: 6px 20px;width: 100%;background:#00c295;border-radius: 3px;cursor: pointer; color: #fff;} |
|
|
|
|
|
/**卖出按钮**/ |
|
|
|
|
|
.buy-btnbox button.sell-button{background:#f55d5d;} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/***************************************/ |
|
|
|
|
|
/*--------------box3----box4--------------*/ |
|
|
|
|
|
.datalist-box{} |
|
|
|
|
|
|
|
|
|
|
|
.datalist-title{height: 43.64px;padding: 0 10px;} |
|
|
|
|
|
.datalist-title span{font-size:14px;line-height: 42px;color: #66718f;} |
|
|
|
|
|
/*列表单*/ |
|
|
|
|
|
.table-box{} |
|
|
|
|
|
.deal-list{display: table;width: 100%;text-align: center;position: relative;table-layout: fixed;} |
|
|
|
|
|
.deal-list ul{display: table;width: 100%;text-align: center;position: relative; z-index: 2;} |
|
|
|
|
|
.deal-list ul li{display: table-cell;font-size: 10px; color: #66718f; text-align: center;width: 33.33%;line-height: 20px;} |
|
|
|
|
|
/*标题*/ |
|
|
|
|
|
.deal-list-title ul li{color: #66718f;padding-top: 4px;padding-bottom: 2px;} |
|
|
|
|
|
/*中间更多*/ |
|
|
|
|
|
.deal-list-update{overflow: hidden;padding: 0 10px;line-height: 34px;box-shadow: 0 -1px 0 0 #f2f2f2, 0 1px 0 0 #f2f2f2;} |
|
|
|
|
|
.deal-list-update h3{width: 80%;float: left;padding-left: 10px;} |
|
|
|
|
|
.deal-list-update h3 span{font-size: 14px;} |
|
|
|
|
|
.deal-list-update h3 i{font-size: 10px;color: #66718f;} |
|
|
|
|
|
.deal-list-update a.more-aa{display: inline-block;float: right;font-size: 12px;} |
|
|
|
|
|
|
|
|
|
|
|
/**数据背景**/ |
|
|
|
|
|
.progress{width: 100%;height:20px;position: absolute;right: 0;top: 0;z-index: 1;} |
|
|
|
|
|
.progress-1{background: #f6f6f6;} |
|
|
|
|
|
.progress-2{background: rgba(1, 194, 148, 0.05);} |
|
|
|
|
|
|
|
|
|
|
|
/****/ |
|
|
|
|
|
.deallist-operation{padding:10px 20px;} |
|
|
|
|
|
.deal-list-range{display: flex;width: 40%;float: left;} |
|
|
|
|
|
.deal-list-type{width:50%;float: right; position: relative;} |
|
|
|
|
|
|
|
|
|
|
|
.list-range-1{width:33.33%;} |
|
|
|
|
|
.list-range-1 img{width: 20px;height: 20px;cursor: pointer;} |
|
|
|
|
|
|
|
|
|
|
|
.el-input{width: 100%;position: relative;cursor: pointer;} |
|
|
|
|
|
.el-input input{width: 100%; height: 28px;border-radius: 3px;border: solid 1px #cad7e0;color: #ccc;font-size: 12px; padding: 0 6px;} |
|
|
|
|
|
.el-input__suffix{position: absolute;right: 5px;top:50%;margin-top: -7px;} |
|
|
|
|
|
.el-input__suffix i{display: block;width: 14px; height: 14px;background-size: 100%; background-repeat: no-repeat;background-position: center;} |
|
|
|
|
|
.el-input__suffix i.active1{background-image: url(../images/icon-dowd.png);} |
|
|
|
|
|
.el-input__suffix i.active2{background-image: url(../images/icon-up.png);} |
|
|
|
|
|
|
|
|
|
|
|
/**隐藏的弹窗(两位小数)**/ |
|
|
|
|
|
.clearfix{clear:both} |
|
|
|
|
|
.i-color{color: #ccc !important;} |
|
|
|
|
|
.el-select-dropdown{position: absolute;top: 30px;left:0;width: 100%; z-index: 9} |
|
|
|
|
|
.el-select-dropdown ul{border: 1px solid #fff;background: #fff;padding: 5px 0; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
|
|
|
|
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
|
|
|
|
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown ul li{color: #fff;font-size: 12px;line-height: 28px;padding-left: 6px;color: #66718f;cursor: pointer;} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/***************************************/ |
|
|
|
|
|
/*--------------box5------------------*/ |
|
|
|
|
|
.el-tabbox-title{background:#5f97ff;display: table;width: 100%;} |
|
|
|
|
|
.el-tabbox-title span{display:inline-block;width: 130px;text-align: center;color: #e9e9e9;font-size: 14px;line-height: 40px;cursor: pointer;} |
|
|
|
|
|
.el-tabbox-title span.active{color: #fff;} |
|
|
|
|
|
|
|
|
|
|
|
/****/ |
|
|
|
|
|
.entrust-btn{position: absolute;top:10px;right: 20px;color: #fff;font-size: 14px;cursor: pointer;} |
|
|
|
|
|
|
|
|
|
|
|
.entrust-title{text-align: center;padding: 40px 0;} |
|
|
|
|
|
|
|
|
|
|
|
/***********币种介绍弹窗************/ |
|
|
|
|
|
.el-popover{width: 100%; height: 100%; overflow: hidden;position: fixed;top: 0;left: 0;z-index: 99999;background:none;} |
|
|
|
|
|
.popup-bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} |
|
|
|
|
|
.el-popover .popover-contant{padding: 16px 10px 10px 10px;position:absolute;top:96px;left:200px;z-index: 99;border-radius: 6px;border:1px solid #3a3b54;;background:#232436;width: 540px;} |
|
|
|
|
|
|
|
|
|
|
|
.po-title{overflow: hidden;} |
|
|
|
|
|
.po-title span{color: #ddd;font-size: 15px;line-height: 22px;padding-bottom: 6px;} |
|
|
|
|
|
.po-title span a{color: #8488f5;} |
|
|
|
|
|
.po-title span:first-child{float: left;} |
|
|
|
|
|
.po-title span:last-child{float: right;} |
|
|
|
|
|
|
|
|
|
|
|
.po-introduce{font-size: 10px; color: #ddd;line-height: 18px;} |
|
|
|
|
|
.po-introduce a{color: #8488f5;} |
|
|
|
|
|
|
|
|
|
|
|
.po-list{padding: 10px 0;} |
|
|
|
|
|
.po-list p{font-size: 12px; color: #66718f;line-height: 28px;} |
|
|
|
|
|
.po-list p span{color: #ddd;} |
|
|
|
|
|
.po-list p a{color: rgba(132, 136, 245, 0.64);} |
|
|
|
|
|
|
|
|
|
|
|
/***********选择小数点弹窗************/ |
|
|
|
|
|
.choose-lang{width: 100%;height: 100%;background: none;position: fixed;left: 0;top: 0;display: none;z-index:99;} |
|
|
|
|
|
|
|
|
|
|
|
.table>tbody>tr>td, .table>thead>tr>th{ border-bottom: 1px solid #f2f2f2 } |
|
|
|
|
|
|
|
|
|
|
|
.table>tbody>tr>td .cell { color: #66718f;} |
|
|
|
|
|
|
|
|
|
|
|
|
bellezhuo
6 years ago
