.home-box {
|
position: relative;
|
}
|
|
/* 首页介绍部分 */
|
/* .content-view-box>h3{
|
padding-top:70px;
|
} */
|
.introduce-image-box {
|
padding: 50px 0 100px 0;
|
width: 567px;
|
height: 349px;
|
}
|
|
.introduce-box {
|
/* background:#0e0c2f url(../../assets/newImages/home/home-background.png) no-repeat center; */
|
height: 500px;
|
color: white;
|
z-index: 1;
|
}
|
|
.introduce-background {
|
position: relative;
|
}
|
|
.introduce-title-box {
|
position: absolute;
|
top: 80px;
|
}
|
|
.introduce-title-box > h3 {
|
font-size: 60px;
|
margin: 0;
|
width: 248px;
|
line-height: 72px;
|
font-weight: bold;
|
}
|
|
.introduce-title-box > p {
|
/* margin:10px 0 45px 0; */
|
width: 450px;
|
}
|
|
.introduce-title-box > p,
|
.introduce-market > div > p,
|
.trade-box > p {
|
color: #ffffff;
|
}
|
|
.introduce-title-box-3 {
|
position: absolute;
|
top: 80px;
|
}
|
|
.introduce-title-box-3 > h3 {
|
font-size: 60px;
|
margin: 0;
|
width: 448px;
|
line-height: 72px;
|
font-weight: bold;
|
}
|
|
.introduce-title-box-3 > p {
|
/* margin:10px 0 45px 0; */
|
width: 450px;
|
}
|
|
.introduce-title-box-3 > p,
|
.introduce-market > div > p,
|
.trade-box > p {
|
color: #ffffff;
|
}
|
|
.input-style {
|
width: 380px;
|
height: 50px;
|
background-color: white;
|
border: 1px solid #eeeff1;
|
outline: none;
|
margin-right: 30px;
|
padding-left: 10px;
|
box-sizing: border-box;
|
border-radius: 3px;
|
}
|
|
.mark-background {
|
position: absolute;
|
top: 435px;
|
/* background: #b1b1b5 url(@/assets/newImages/home/mark-bg.png) no-repeat center; */
|
left: 0;
|
right: 0;
|
z-index: 2;
|
height: 150px;
|
background-color: rgba(0, 0, 0, 0.3);
|
}
|
|
.introduce-market {
|
display: flex;
|
color: white;
|
padding-top: 30px;
|
z-index: 33;
|
}
|
|
.introduce-market > div {
|
flex: 1;
|
}
|
|
.introduce-market > div > h4 {
|
margin: 5px 0;
|
font-size: 22px;
|
}
|
|
.introduce-market > div > p {
|
margin: 5px 0;
|
}
|
|
/**/
|
.margin-left50 {
|
margin-right: 50px;
|
}
|
|
.width1134 {
|
width: 580px;
|
height: 200px;
|
}
|
|
.display-flex {
|
display: flex;
|
}
|
|
.display-flex-right {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.box {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: space-between;
|
}
|
|
.column {
|
flex-basis: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.box {
|
display: flex;
|
}
|
|
/* display:flex; */
|
/* 立刻创建您的加密组合 */
|
.item-box-0 {
|
width: 1200px;
|
line-height: 47px;
|
position: absolute;
|
/* left: 50%; */
|
/* right: 50%; */
|
top: 6px;
|
color: #171a1e;
|
font-size: 40px;
|
text-align: center;
|
}
|
|
.item-box-0-1 {
|
width: 1200px;
|
line-height: 47px;
|
position: absolute;
|
/* left: 50%; */
|
/* right: 50%; */
|
top: 56px;
|
color: #474d57;
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.item-box-0-icon0 {
|
width: 72px;
|
height: 72px;
|
position: absolute;
|
top: 126px;
|
left: 0;
|
/* color:#474D57; */
|
/* font-size: 16px;
|
text-align:center; */
|
}
|
|
.item-box-0-title0 {
|
width: 260px;
|
height: 23px;
|
position: absolute;
|
top: 146px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 20px;
|
}
|
|
.item-box-0-content0 {
|
width: 300px;
|
height: 38px;
|
position: absolute;
|
top: 186px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 16px;
|
color: #495666;
|
}
|
|
.item-box-0-icon1 {
|
width: 72px;
|
height: 72px;
|
position: absolute;
|
top: 286px;
|
left: 0;
|
/* color:#474D57; */
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.item-box-0-title1 {
|
width: 260px;
|
height: 23px;
|
position: absolute;
|
top: 306px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 20px;
|
}
|
|
.item-box-0-content1 {
|
width: 300px;
|
height: 38px;
|
position: absolute;
|
top: 346px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 16px;
|
color: #495666;
|
}
|
|
.item-box-0-icon2 {
|
width: 72px;
|
height: 72px;
|
position: absolute;
|
top: 452px;
|
left: 0;
|
/* color:#474D57; */
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.item-box-0-title2 {
|
width: 260px;
|
height: 23px;
|
position: absolute;
|
top: 472px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 20px;
|
}
|
|
.item-box-0-content2 {
|
width: 300px;
|
height: 38px;
|
position: absolute;
|
top: 512px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 16px;
|
color: #495666;
|
}
|
|
.item-box-0-icon3 {
|
width: 72px;
|
height: 72px;
|
position: absolute;
|
top: 600px;
|
left: 0;
|
/* color:#474D57; */
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.item-box-0-title3 {
|
width: 260px;
|
height: 23px;
|
position: absolute;
|
top: 620px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 20px;
|
}
|
|
.item-box-0-content3 {
|
width: 300px;
|
height: 38px;
|
position: absolute;
|
top: 660px;
|
left: 86px;
|
/* color:#474D57; */
|
font-size: 16px;
|
color: #495666;
|
}
|
|
.item-box-0-icon4 {
|
width: 815px;
|
height: 634px;
|
position: absolute;
|
top: 136px;
|
left: 400px;
|
/* color:#474D57; */
|
/* font-size: 16px;
|
text-align:center; */
|
}
|
|
/* 赚取加密货币 */
|
.item-box-1 {
|
width: 449px;
|
line-height: 47px;
|
position: absolute;
|
left: -120px;
|
/* right: 50%; */
|
top: 120px;
|
color: #171a1e;
|
font-size: 40px;
|
/* text-align:center; */
|
}
|
|
.item-box-1-1 {
|
width: 400px;
|
line-height: 19px;
|
position: absolute;
|
left: -120px;
|
top: 246px;
|
color: #171a1e;
|
font-size: 16px;
|
}
|
|
.item-box-1-rect {
|
width: 126px;
|
height: 42px;
|
position: absolute;
|
left: -120px;
|
top: 310px;
|
background-color: #1d91ff;
|
}
|
|
.item-box-1-rect-226 {
|
width: 226px;
|
height: 42px;
|
position: absolute;
|
left: -120px;
|
top: 310px;
|
background-color: #1d91ff;
|
}
|
|
.item-box-1-rect > p {
|
position: absolute;
|
margin: auto;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
color: #ffffff;
|
font-size: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.item-box-1-rect-226 > p {
|
position: absolute;
|
margin: auto;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
color: #ffffff;
|
font-size: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.item-box-1-img {
|
width: 540px;
|
height: 460px;
|
position: absolute;
|
right: 135px;
|
top: 0px;
|
}
|
|
/* 最值得信赖的加密货币平台 */
|
.item-box-2 {
|
width: 1200px;
|
line-height: 47px;
|
position: absolute;
|
top: 56px;
|
color: #171a1e;
|
font-size: 40px;
|
text-align: center;
|
}
|
|
.item-box-2-1 {
|
width: 1200px;
|
line-height: 47px;
|
position: absolute;
|
|
top: 106px;
|
color: #474d57;
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.item-box-2-p0 {
|
width: 282px;
|
height: 193px;
|
position: absolute;
|
top: 226px;
|
left: 0;
|
font-size: 20px;
|
text-align: center;
|
background-color: #ffffff;
|
}
|
|
.item-box-2-icon0 {
|
width: 100px;
|
height: 100px;
|
position: absolute;
|
top: 20px;
|
left: 95px;
|
}
|
|
.item-box-2-title0 {
|
width: 276px;
|
height: 23px;
|
position: absolute;
|
top: 110px;
|
font-size: 20px;
|
color: #000000;
|
text-align: center;
|
}
|
|
.item-box-2-content0 {
|
width: 276px;
|
height: 38px;
|
position: absolute;
|
top: 150px;
|
font-size: 16px;
|
color: #495666;
|
text-align: center;
|
}
|
|
.item-box-2-p1 {
|
width: 282px;
|
height: 193px;
|
position: absolute;
|
top: 226px;
|
left: 460px;
|
font-size: 20px;
|
text-align: center;
|
background-color: #ffffff;
|
}
|
|
.item-box-2-p2 {
|
width: 282px;
|
height: 193px;
|
position: absolute;
|
top: 226px;
|
right: 0;
|
font-size: 20px;
|
text-align: center;
|
background-color: #ffffff;
|
}
|
|
/* 信息 */
|
.item-box-3-p0 {
|
width: 271px;
|
height: 139px;
|
position: absolute;
|
/* top: 40px; */
|
top: 0;
|
bottom: 0;
|
left: 0px;
|
margin: auto;
|
/* background-color: #000000; */
|
}
|
|
.item-box-3-title0 {
|
width: 271px;
|
line-height: 66px;
|
position: absolute;
|
top: 25px;
|
/* left: 0; */
|
font-size: 56px;
|
text-align: center;
|
color: #ffffff;
|
}
|
|
.item-box-3-content0 {
|
width: 271px;
|
line-height: 19px;
|
position: absolute;
|
top: 110px;
|
font-size: 16px;
|
color: #ffffff;
|
text-align: center;
|
}
|
|
.item-box-3-p1 {
|
width: 271px;
|
height: 139px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
/* top: 40px; */
|
/* background-color: #000000; */
|
}
|
|
.item-box-3-p2 {
|
width: 271px;
|
height: 139px;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
right: 0px;
|
margin: auto;
|
/* background-color: #000000; */
|
}
|
|
/* 交易，随时随地 */
|
.item-box-4-p0 {
|
width: 700px;
|
height: 363px;
|
position: absolute;
|
top: 140px;
|
left: 0px;
|
/* background-color: #1D91FF; */
|
}
|
|
.item-box-4-icon0 {
|
width: 150px;
|
height: 150px;
|
position: absolute;
|
top: 100px;
|
left: 0px;
|
border-radius: 5px;
|
}
|
|
.item-box-4-title0 {
|
width: 700px;
|
line-height: 66px;
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
font-size: 40px;
|
text-align: left;
|
color: #171a1e;
|
}
|
|
.item-box-4-title1 {
|
width: 280px;
|
line-height: 66px;
|
position: absolute;
|
top: 120px;
|
left: 200px;
|
font-size: 20px;
|
/* text-align: center; */
|
color: #171a1e;
|
}
|
|
.item-box-4-title2 {
|
width: 280px;
|
line-height: 66px;
|
position: absolute;
|
top: 160px;
|
left: 200px;
|
font-size: 16px;
|
/* text-align: center; */
|
color: #474d57;
|
}
|
|
.item-box-4-list {
|
width: 400px;
|
line-height: 96px;
|
position: absolute;
|
top: 260px;
|
left: 0px;
|
}
|
|
.item-box-4-p1 {
|
width: 496px;
|
height: 363px;
|
position: absolute;
|
top: 140px;
|
right: 0px;
|
/* background-color: #b7ba6b; */
|
}
|
|
.item-box-4-icon1 {
|
width: 574px;
|
height: 561px;
|
position: absolute;
|
top: -80px;
|
right: 0px;
|
/* border-radius: 5px; */
|
}
|
|
/* 领先的数字交易平台 */
|
.item-box-index {
|
display: flex;
|
padding: 40px 0 20px 0;
|
}
|
|
.item-box-index > img {
|
flex: 1;
|
display: inline-block;
|
width: 1200px;
|
height: 288px;
|
}
|
|
.item-box-index > img:nth-child(1) {
|
margin-right: 40px;
|
}
|
|
/* banner部分 */
|
.banner-box {
|
display: flex;
|
padding: 40px 0 20px 0;
|
}
|
|
.banner-box > img {
|
flex: 1;
|
display: inline-block;
|
width: 580px;
|
height: 200px;
|
}
|
|
.banner-box > img:nth-child(1) {
|
margin-right: 40px;
|
}
|
|
/* 行情列表 */
|
.market-box {
|
padding-bottom: 124px;
|
}
|
|
.market-title {
|
display: flex;
|
justify-content: center;
|
padding-left: 20px;
|
padding-right: 20px;
|
}
|
|
.market-title > p {
|
flex: 1;
|
color: #707a8a;
|
align-items: center;
|
font-size: 20px;
|
}
|
|
.market-content {
|
display: flex;
|
cursor: pointer;
|
padding-left: 20px;
|
padding-right: 20px;
|
}
|
|
.market-content:hover {
|
background-color: #fafafa;
|
}
|
|
.market-content > div {
|
flex: 1;
|
margin: 20px 0;
|
}
|
|
/* 随时开启交易 */
|
.trade-background {
|
background-color: #fafafa;
|
/* background-color:#171A1E; */
|
}
|
|
.trade-box > h3 {
|
font-size: 30px;
|
margin: 10px 0;
|
color: white;
|
}
|
|
.trade-content-box {
|
display: flex;
|
padding: 91px 0;
|
}
|
|
.trade-content-box > div {
|
flex: 1;
|
}
|
|
.left-trade {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.left-trade > h3 {
|
line-height: 0px;
|
color: white;
|
}
|
|
.left-trade > p {
|
line-height: 25px;
|
}
|
|
.trade-button-box {
|
display: flex;
|
}
|
|
.trade-button-box > div {
|
margin-right: 10px;
|
}
|
|
.line-div-box {
|
border: 1px solid #707a8a;
|
border-radius: 3px;
|
width: 140px;
|
height: 40px;
|
text-align: center;
|
font-size: 16px;
|
box-sizing: border-box;
|
cursor: pointer;
|
color: white;
|
}
|
|
.yellow-div-box {
|
background-color: white;
|
width: 140px;
|
height: 40px;
|
text-align: center;
|
border-radius: 3px;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
|
.yellow-div-box > img,
|
.line-div-box > img {
|
display: inline-block;
|
width: 14px;
|
height: 17px;
|
margin-right: 10px;
|
}
|
|
.code-view {
|
background-color: white;
|
width: 40px;
|
height: 40px;
|
text-align: center;
|
border-radius: 3px;
|
cursor: pointer;
|
position: relative;
|
}
|
|
.qr-box {
|
position: absolute;
|
top: 45px;
|
}
|
|
.qr-image {
|
position: absolute;
|
top: 5px;
|
left: 2px;
|
}
|
|
.right-trade {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
/*App*/
|
.flex-container-index {
|
display: -webkit-flex;
|
display: flex;
|
width: 400px;
|
height: 96px;
|
/* background-color: lightgrey; */
|
}
|
|
.flex-item-index {
|
/* background-color: cornflowerblue; */
|
width: 94px;
|
height: 76px;
|
margin: 10px;
|
}
|
|
.flex-item2 {
|
/* background-color: cornflowerblue; */
|
width: 94px;
|
height: 76px;
|
margin-top: 50px;
|
margin-left: 50px;
|
/* position: relative;
|
margin-top: .8rem; */
|
}
|
|
.left-trade-1 {
|
display: flex;
|
align-items: start;
|
justify-content: left;
|
}
|
|
/* 初学者指南 */
|
.guide-box {
|
/* background: url("../../assets/newImages/home/guide.png") no-repeat right
|
center; */
|
background-position: right 19px top 50%;
|
padding: 50px 0 100px 0;
|
min-width: 900px;
|
}
|
|
.left-guide {
|
width: 50%;
|
}
|
|
.guide-text-box {
|
padding: 30px;
|
cursor: pointer;
|
}
|
|
.guide-text {
|
margin-left: 20px;
|
}
|
|
.guide-text > h4 {
|
margin: 0 0 10px 0;
|
}
|
|
.journey-btn {
|
width: 256px;
|
height: 80px;
|
line-height: 80px;
|
font-size: 26px;
|
}
|
|
/* 帮助中心 */
|
.help-background {
|
background-color: #171a1e;
|
}
|
|
.help-box {
|
display: flex;
|
padding: 50px 0 100px 0;
|
}
|
|
.left-help {
|
flex: 4;
|
padding: 20px;
|
}
|
|
.right-help {
|
flex: 2;
|
}
|
|
.right-help > div {
|
display: flex;
|
flex-direction: row;
|
align-items: flex-start;
|
justify-content: center;
|
padding: 20px 0;
|
}
|
|
.left-help > h4 {
|
margin: 10px 0;
|
}
|
|
.help-content {
|
border-bottom: 1px solid #6b6a81;
|
padding: 20px 0;
|
}
|
|
.help-content > div > h4,
|
.right-help-text > h4 {
|
margin: 10px 0;
|
color: white;
|
}
|
|
.help-content > p {
|
margin: 0;
|
line-height: 25px;
|
}
|
|
.right-help > div:hover,
|
.guide-text-box:hover {
|
background-color: white;
|
box-shadow: 0 0 10px #c8ccd2;
|
border-radius: 4px;
|
}
|
|
.text-slide-fade-enter-active {
|
transition: all 1s ease;
|
}
|
|
.text-slide-fade-leave-active {
|
transition: all 0.5s ease;
|
}
|
.text-slide-fade-enter,
|
.text-slide-fade-leave-to {
|
transform: translateY(10px);
|
opacity: 0;
|
}
|
|
/* 货币之旅 */
|
.currency-content {
|
display: flex;
|
margin: 100px 0 50px 0;
|
}
|
|
.currency-content > div {
|
flex: 1;
|
padding-right: 30px;
|
}
|
|
.currency-content > div > p {
|
font-size: 24px;
|
}
|
|
.currency-content > div > div > img {
|
display: inline-block;
|
width: 100px;
|
height: 100px;
|
}
|
|
.currency-text {
|
margin: 20px 0;
|
}
|
|
.currency-text > p {
|
padding: 4px 0;
|
margin: 0;
|
font-size: 16px;
|
}
|
|
/* 开始使用 */
|
.trade-background-view {
|
background: #171a1e;
|
}
|
|
.button-width {
|
width: 200px;
|
height: 50px;
|
line-height: 50px;
|
}
|
|
/* !* 客服 *!*/
|
/*.service-box{*/
|
/* position: fixed;*/
|
/* right:30px;*/
|
/* top:50%;*/
|
/* cursor: pointer;*/
|
/*}*/
|
|
/*空行*/
|
.div-blank-30 {
|
width: 248px;
|
height: 30px;
|
/* line-height:50px; */
|
}
|
|
.div-blank-40 {
|
width: 248px;
|
height: 40px;
|
/* line-height:50px; */
|
}
|
|
/* 交易按钮 */
|
.buy-button {
|
min-width: 110px;
|
height: 40px;
|
line-height: 40px;
|
background-color: white;
|
border-style: solid;
|
border-color: #1d91ff;
|
color: #1d91ff;
|
border-radius: 4px;
|
outline: none;
|
/* border:none; */
|
cursor: pointer;
|
font-size: 15px;
|
margin-right: 10px;
|
padding: 0 10px;
|
}
|
|
.buy-button:hover {
|
min-width: 110px;
|
height: 40px;
|
line-height: 40px;
|
background-color: #1d91ff;
|
border-style: solid;
|
border-color: #1d91ff;
|
color: white;
|
border-radius: 4px;
|
outline: none;
|
border: none;
|
cursor: pointer;
|
font-size: 15px;
|
margin-right: 10px;
|
padding: 0 10px;
|
}
|
|
.buy-button-3 {
|
min-width: 210px;
|
height: 40px;
|
line-height: 40px;
|
background-color: white;
|
border-style: solid;
|
border-color: #1d91ff;
|
color: #1d91ff;
|
border-radius: 4px;
|
outline: none;
|
/* border:none; */
|
cursor: pointer;
|
font-size: 15px;
|
margin-right: 10px;
|
padding: 0 10px;
|
}
|
|
.buy-button-3:hover {
|
min-width: 210px;
|
height: 40px;
|
line-height: 40px;
|
background-color: #1d91ff;
|
border-style: solid;
|
border-color: #1d91ff;
|
color: white;
|
border-radius: 4px;
|
outline: none;
|
border: none;
|
cursor: pointer;
|
font-size: 15px;
|
margin-right: 10px;
|
padding: 0 10px;
|
}
|
