@ -38,27 +38,8 @@
<!-- 走马灯 -- > <!-- 走马灯 -- >
< / div > < / div >
< div style = "display: none;" >
<!-- < div class = "marquee" >
< div class = "marquee-pargress d-flex" >
< ul class = "marquee-list d-flex" v-for ="box in 4" :key ="box" >
< li class = "item" v-for ="item in homeList" :key="item.pair + '' + box" >
< div class = "price-info d-flex" >
< div class = "symbol" style = "margin-right: 5px" >
{ { item . pair } }
< / div >
< div class = "d-flex" >
< span > { { item . price } } < / span >
< span : class = "item.increase >= 0 ? 'increace' : 'decreace'" >
{ { item . increaseStr } }
< / span >
< / div >
< / div >
< / li >
< / ul >
< / div >
< / div > -- >
< div style = "display: none;" >
<!-- 公告 -- > <!-- 公告 -- >
<!-- < div class = "notice container d-flex align-items-center" > <!-- < div class = "notice container d-flex align-items-center" >
< div < div
@ -358,19 +339,24 @@
< div class = "section illustration_area" > < div class = "section illustration_area" >
< div class = "left" > < div class = "left" >
< div class = "title" > { { $t ( "homeNewText.aa1" ) } } < / div > < div class = "title" > { { $t ( "homeNewText.aa1" ) } } < / div >
< div class = "title" style = "margin-bottom: 75 px;" > { { $t ( "homeNewText.aa2" ) } } < / div > < div class = "title" style = "margin-bottom: 42 px;" > { { $t ( "homeNewText.aa2" ) } } < / div >
< router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" > < router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" >
{ { $t ( "homeNewText.aa3" ) } } { { $t ( "homeNewText.aa3" ) } }
< / r o u t e r - l i n k > < / r o u t e r - l i n k >
< router -link v -else class = "jump_btn" :to ="{name:'exchange'}" > < router -link v -else class = "jump_btn" :to ="{name:'exchange'}" >
{ { $t ( "homeNewText.aa4" ) } } { { $t ( "homeNewText.aa4" ) } }
< / r o u t e r - l i n k > < / r o u t e r - l i n k >
< div class = "icon_box" >
< img src = "../../assets/img/home/illustration_2.png" alt = "" style = "width: 148px;" >
< img src = "../../assets/img/home/illustration_3.png" alt = "" style = "width: 215px;" >
< img src = "../../assets/img/home/illustration_4.png" alt = "" style = "width: 80px;" >
< / div >
< / div > < / div >
< div class = "right" > < div class = "right" >
< img src = "../../assets/img/illustration_1.png" alt = "" style = "width: 520px;height: 520px;" > < img src = "../../assets/img/home/ illustration_1.png" alt = "" style = "width: 293px;height: 626px;border: 1px solid #fff ;" >
< / div > < / div >
< / div > < / div >
< div class = "market_table" v-if ="marketList[0]" > < div class = "market_table" v-if ="marketList[0] && 0 " >
< div style = "font-size: 40px;font-weight: bold;width: 1200px;margin: auto;" > { { $t ( "homeNewText.aa5" ) } } < / div > < div style = "font-size: 40px;font-weight: bold;width: 1200px;margin: auto;" > { { $t ( "homeNewText.aa5" ) } } < / div >
< div style = "width: 1200px;font-size: 20px;color: #707275;margin: 20px auto;" > { { $t ( "homeNewText.aa6" ) } } < / div > < div style = "width: 1200px;font-size: 20px;color: #707275;margin: 20px auto;" > { { $t ( "homeNewText.aa6" ) } } < / div >
< div class = "market_tr" style = "color: #999;line-height: 60px;" > < div class = "market_tr" style = "color: #999;line-height: 60px;" >
@ -390,61 +376,92 @@
< / div > < / div >
< / div > < / div >
< div class = "marquee" v-if ="marketList[0]" >
<!-- 适合所有人的加密货币交易所 -- > < div class = "marquee-pargress d-flex" >
< div style = "width: 1200px;font-size: 40px;font-weight: bold;margin: 0px auto;" > { { $t ( "homeNewText.bb4" ) } } < / div > < ul class = "marquee-list d-flex" v-for ="box in 4" :key="box+'box'" >
< div style = "width: 1200px;font-size: 20px;color: #707275;margin: 20px auto 50px;" > { { $t ( "homeNewText.bb5" ) } } < / div > <!-- < li class = "item" v-for ="item in homeList" :key="item.pair + '' + box" > - - >
< div class = "card_area" > < li class = "item" v-for ="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box" >
< div class = "card_item" > < div class = "price-info d-flex" >
< img src = "../../assets/img/features/4.png" alt = "" > < div class = "symbol" style = "margin-right: 5px" >
< div style = "font-size: 20px;color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb6" ) } } < / div > <!-- { { item . pair } } -- >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb7" ) } } < / div > { { item . coin_name } }
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb8" ) } } < / div > < / div >
< / div > < div class = "d-flex" >
< div class = "card_item" > < span > $ { { item . price || item . close } } < / span >
< img src = "../../assets/img/features/5.png" alt = "" > < span : class = "item.increase >= 0 ? 'increace' : 'decreace'" >
< div style = "font-size: 20px;color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb9" ) } } < / div > ( { { item . increaseStr } } )
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb10" ) } } < / div > < / span >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb11" ) } } < / div > < / div >
< / div > < / div >
< div class = "card_item" > < / li >
< img src = "../../assets/img/features/2.png" alt = "" > < / ul >
< div style = "font-size: 20px;color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb12" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb13" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb14" ) } } < / div >
< / div >
< div class = "card_item" >
< img src = "../../assets/img/features/6.png" alt = "" >
< div style = "font-size: 20px;color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb15" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb16" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb17" ) } } < / div >
< / div >
< div class = "card_item" >
< img src = "../../assets/img/features/1.png" alt = "" >
< div style = "font-size: 20px;color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb18" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb19" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb20" ) } } < / div >
< / div > < / div >
< div class = "card_item" > < / div >
< img src = "../../assets/img/features/3.png" alt = "" >
< div style = "font-size: 20px;color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb21" ) } } < / div > <!-- 数字货币交易 -- >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb22" ) } } < / div > < div class = "title1 fn-center" > { { $t ( "homeNewText.bb4" ) } } < / div >
< div style = "font-size: 14px;color: #707275;" > { { $t ( "homeNewText.bb23" ) } } < / div > < div class = "title2 fn-center" > { { $t ( "homeNewText.bb5" ) } } < / div >
< div class = "web_area" >
< img src = "" alt = "" style = "width: 100%;height: 100%;" >
< / div >
< div class = "APP_area" >
< img src = "" alt = "" class = "left" >
< div >
< div style = "width: 500px;font-size: 48px;line-height: 72px;" > { { $t ( "homeNewText.bb6" ) } } < / div >
< div class = "d-flex application" >
< div class = "app_icon" >
< img src = "../../assets/img/home/apple_1.png" alt = "" class = "icon" >
< div > App Store < / div >
< / div >
< div class = "app_icon" >
< img src = "../../assets/img/home/android_1.png" alt = "" class = "icon" >
< div > Android < / div >
< / div >
< div class = "app_icon" >
< img src = "../../assets/img/home/google_1.png" alt = "" class = "icon" >
< div > Google Play < / div >
< / div >
< / div >
< div style = "color: #9a9a9a;font-size: 22px;" > { { $t ( "homeNewText.bb7" ) } } < / div >
< img src = "" alt = "" style = "width: 135px;height: 135px;margin: 23px 0px 10px;" >
< div style = "font-weight: bold;font-size: 22px;" > { { $t ( "homeNewText.bb8" ) } } < / div >
< / div > < / div >
< / div > < / div >
<!-- 您数字货币之旅的得力助手 -- >
< div class = "title1 fn-center" > { { $t ( "homeNewText.bb9" ) } } < / div >
< div class = "title2 fn-center" > { { $t ( "homeNewText.bb10" ) } } < / div >
< div class = "travel_area" >
< img src = "../../assets/img/home/bg_2.png" alt = "" style = "width: 100%;height: 100%;" >
< / div >
< div class = "title1" > { { $t ( "homeNewText.bb11" ) } } < / div >
< div class = "title2" > { { $t ( "homeNewText.bb12" ) } } < / div >
< div class = "learn_area" >
< router -link :to ="'/notice/'+helpList[0].id" class = "learn_item" >
< img src = "../../assets/img/home/bg_3.png" alt = "" >
< / r o u t e r - l i n k >
< router -link :to ="'/notice/'+helpList[1].id" class = "learn_item" >
< img src = "../../assets/img/home/bg_3.png" alt = "" >
< / r o u t e r - l i n k >
< router -link :to ="'/notice/'+helpList[2].id" class = "learn_item" >
< img src = "../../assets/img/home/bg_3.png" alt = "" >
< / r o u t e r - l i n k >
<!-- < div class = "learn_item" > < img src = "../../assets/img/home/bg_3.png" alt = "" > < / div >
< div class = "learn_item" > < img src = "../../assets/img/home/bg_3.png" alt = "" > < / div >
< div class = "learn_item" > < img src = "../../assets/img/home/bg_3.png" alt = "" > < / div > -- >
< / div >
<!-- beginner ' s guide -- > <!-- beginner ' s guide -- >
< div style = "width: 1200px;font-size: 40px;font-weight: 700;margin: 0px auto;" > { { $t ( "homeNewText.dd1" ) } } < / div > < div class = "lattest-news-section" v-if ="0" >
< div style = "width: 1200px;font-size: 20px;color: #707275;margin: 0px auto;" > { { $t ( "homeNewText.dd2" ) } } < / div >
< div class = "lattest-news-section" >
< div class = "beginner service" > < div class = "beginner service" >
<!-- 标题 -- > <!-- 标题 -- >
< div class = "service-title" v-if ="0" > < div class = "service-title" >
< div < div
class = "text service-title-text1" class = "text service-title-text1"
style = "font-size: 40px; font-weight: 700; line-height: 71px" style = "font-size: 40px; font-weight: 700; line-height: 71px"
> >
{ { $t ( "homeNewText.dd1" ) } } { { '111' } }
< / div > < / div >
< div class = "dotfive d-flex" > < div class = "dotfive d-flex" >
< div class = "dotblue" v-for ="item in 5" :key ="item" > < / div > < div class = "dotblue" v-for ="item in 5" :key ="item" > < / div >
@ -465,10 +482,10 @@
< / div > < / div >
< div class = "text-box" > < div class = "text-box" >
< div style = "font-size: 28px;color: #e7e7e7;" > < div style = "font-size: 28px;color: #e7e7e7;" >
{ { $t ( "homeNewText.dd3" ) } } { { '111' } }
< / div > < / div >
< div class = "service-content-text1-info1 info" style = "color: #707275;" > < div class = "service-content-text1-info1 info" style = "color: #707275;" >
{ { $t ( "homeNewText.dd4" ) } } { { '111' } }
< / div > < / div >
< / div > < / div >
< / div > < / div >
@ -481,10 +498,10 @@
< / div > < / div >
< div class = "text-box" > < div class = "text-box" >
< div style = "font-size: 28px;color: #e7e7e7;" > < div style = "font-size: 28px;color: #e7e7e7;" >
{ { $t ( "homeNewText.dd5" ) } } { { '111' } }
< / div > < / div >
< div class = "service-content-text1-info1 info" style = "color: #707275;" > < div class = "service-content-text1-info1 info" style = "color: #707275;" >
{ { $t ( "homeNewText.dd6" ) } } { { '111' } }
< / div > < / div >
< / div > < / div >
< / div > < / div >
@ -502,7 +519,7 @@
< / div > < / div >
<!-- colto - btn - group -- > <!-- colto - btn - group -- >
< div v -if = " 0 " < div
class = "colto-btn-group" class = "colto-btn-group"
style = "justify-content: center" style = "justify-content: center"
> >
@ -521,7 +538,7 @@
> { { $t ( "common.register" ) } } > { { $t ( "common.register" ) } }
< / r o u t e r - l i n k > < / r o u t e r - l i n k >
< / div > < / div >
< div v-if ="0" class="colto-btn-group" > < div class = "colto-btn-group" >
< router -link < router -link
tag = "button" tag = "button"
to = "/exchange" to = "/exchange"
@ -533,37 +550,7 @@
< / div > < / div >
<!-- 背景径向渐变 -- > <!-- 背景径向渐变 -- >
< div class = "radial_bg" > < div class = "radial_bg" v-if ="0" >
<!-- 隨處交易 -- >
< div style = "width: 1200px;font-size: 40px;font-weight: bold;margin: 0px auto;" > { { $t ( "homeNewText.cc5" ) } } < / div >
< div style = "width: 1200px;font-size: 20px;color: #707275;margin: 0px auto;" > { { $t ( "homeNewText.cc8" ) } } < / div >
< div class = "build-box" >
< div class = "build-bottom d-flex" >
< div class = "build-left" >
< div style = "display: flex;margin: 114px auto 66px;" >
< img src = "../../assets/img/features/code.png" alt = "" style = "width: 135px;height: 135px;background-color: #000;margin-right: 33px;" >
< div >
< div style = "font-size: 22px;margin: 30px 0px 10px 0px;" > { { $t ( "homeNewText.cc6" ) } } < / div >
< div style = "color: #908F94;font-size: 18px;" > { { $t ( "homeNewText.cc7" ) } } < / div >
< / div >
< / div >
< div style = "display: flex;justify-content: space-between;padding: 0px 23px 0px 10px;" >
< div > < img src = "../../assets/img/features/apple_1.png" alt = "" > < / div >
< div style = "margin-right: 5px;" > < img src = "../../assets/img/features/android_1.png" alt = "" > < / div >
< div > < img src = "../../assets/img/features/google_1.png" alt = "" > < / div >
< / div >
< div style = "display: flex;justify-content: space-between;margin-top: 12px;" >
< div > App Store < / div >
< div > Android < / div >
< div > Google Play < / div >
< / div >
< / div >
<!-- phone module -- >
< div class = "build-right" >
< img src = "../../assets/img/features/aj.png" alt = "mobile application" / >
< / div >
< / div >
< / div >
<!-- number count -- > <!-- number count -- >
< div class = "num-info d-flex" > < div class = "num-info d-flex" >
< div class = "num-info-count" > < div class = "num-info-count" >
@ -749,25 +736,15 @@
< / div > < / div >
< / div > < / div >
<!-- 幫助中心 -- > <!-- 常见问题 -- >
< div style = "font-size: 42px;font-weight: bold;text-align: center;" v-if ="0" > {{ $ t ( " homeNewText.dd7 " ) } }< / div > < div class = "title1 fn-center" > { { $t ( "homeNewText.bb13" ) } } < / div >
< div class = "help_area" v-if ="0" > < div class = "help_area" >
< router -link :to ="'/notice/'+item.id" v-for ="(item, index) in helpList" :key="index" class="help_item" > < router -link :to ="'/notice/'+item.id" v-for ="(item, index) in helpList" :key="index+'help' " class="help_item" >
< div > { { item . title } } < / div > < div style = "color: #fff;" > { { item . title } } < / div >
< div class = "arrow" > < / div > < div class = "arrow" > < / div >
< / r o u t e r - l i n k > < / r o u t e r - l i n k >
< / div > < / div >
< div style = "padding-top: 30px;" >
< div style = "font-weight: bold;font-size: 40px;text-align: center;" > { { $t ( "homeNewText.ee5" ) } } < / div >
< div style = "margin: 20px auto 0px;display: flex;justify-content: center;" >
< router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" >
{ { $t ( "homeNewText.aa3" ) } }
< / r o u t e r - l i n k >
< router -link v -else class = "jump_btn" :to ="{name:'exchange-assets'}" >
{ { $t ( "homeNewText.aa4" ) } }
< / r o u t e r - l i n k >
< / div >
< / div >
< / div > < / div >
< / template > < / template >
@ -1144,7 +1121,7 @@ export default {
< style lang = "scss" scoped > < style lang = "scss" scoped >
# dowebok { # dowebok {
/ / b a c k g r o u n d : r g b ( 1 8 , 1 9 , 2 4 ) ! i m p o r t a n t ; / / b a c k g r o u n d : r g b ( 1 8 , 1 9 , 2 4 ) ! i m p o r t a n t ;
background - color : # 000117 ! important ; background - color : # 000 ! important ;
padding - bottom : 100 px ; padding - bottom : 100 px ;
. el_carousel { . el_carousel {
width : 100 % ; width : 100 % ;
@ -1203,7 +1180,7 @@ path {
} }
. section { . section {
background - color : # 221 F28 ; background - color : # 000 ;
/ / b a c k g r o u n d - i m a g e : u r l ( . . / . . / a s s e t s / i m g / i n d e x _ b a n n e r _ 2 . p n g ) ; / / b a c k g r o u n d - i m a g e : u r l ( . . / . . / a s s e t s / i m g / i n d e x _ b a n n e r _ 2 . p n g ) ;
width : 100 % ; width : 100 % ;
height : 660 px ; height : 660 px ;
@ -1219,30 +1196,37 @@ path {
} }
} }
. illustration_area { . illustration_area {
width : 1200 px ;
margin : 133 px auto 133 px ;
display : flex ; display : flex ;
justify - content : center ; justify - content : space - between ;
align - items : center ; align - items : center ;
background : # 0 D0D0D ;
. left { . left {
color : # fff ; color : # fff ;
margin - right : 120 px ;
. title { . title {
font - size : 56 px ; font - size : 60 px ;
width : 560 px ; }
. icon_box {
display : flex ; justify - content : space - between ;
align - items : center ;
margin - top : 168 px ;
img {
margin - right : 57 px ;
}
} }
} }
} }
. jump_btn { . jump_btn {
display : inline - block ; display : inline - block ;
min - width : 200 px ; min - width : 200 px ;
height : 60 px ; height : 78 px ;
line - height : 60 px ; line - height : 78 px ;
text - align : center ; text - align : center ;
color : # fff ; color : # 101010 ;
background - color : # D1712E ; background - color : # fff ;
border - radius : 1 0px ; border - radius : 5 0px ;
font - size : 20 px ; font - size : 20 px ;
padding : 0 px 20 px ; padding : 0 px 20 px ;
box - sizing : border - box ; box - sizing : border - box ;
@ -1389,12 +1373,18 @@ path {
. marquee { . marquee {
width : 100 % ; width : 100 % ;
height : 60 px ; height : 60 px ;
margin - bottom : 150 px ;
background - image : url ( "../../assets/img/home/bg_1.png" ) ;
background - size : 100 % 100 % ;
. marquee - pargress { . marquee - pargress {
align - items : center ; align - items : center ;
width : 100 % ; width : 100 % ;
height : 60 px ; height : 60 px ;
/ / b a c k g r o u n d : ( " . . / . . / a s s e t s / i m g / b g / 5 . p n g " ) n o - r e p e a t ! i m p o r t a n t ; / / b a c k g r o u n d : ( " . . / . . / a s s e t s / i m g / b g / 5 . p n g " ) n o - r e p e a t ! i m p o r t a n t ;
background - size : 100 % 100 % ; / / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
}
. marquee - list {
background : transparent ;
} }
li . item { li . item {
@ -1623,37 +1613,6 @@ path {
padding : 240 px 0 px 70 px ; padding : 240 px 0 px 70 px ;
margin - top : - 80 px ; margin - top : - 80 px ;
} }
/ / b u i l e d
. build - box {
width : 100 % ;
text - align : center ;
color : white ;
margin - top : 50 px ;
. build - bottom {
justify - content : center ;
. text - start {
text - align : start ;
}
. build - left {
text - align : left ;
margin - right : 45 px ;
width : 400 px ;
img {
width : 40 px ;
height : 40 px ;
}
}
. build - right {
width : 752 px ;
height : 506 px ;
. build - right img {
width : 100 % ;
height : 100 % ;
}
}
}
}
/ / b a n n e r - b o t t o m / / b a n n e r - b o t t o m
. banner - bottom { . banner - bottom {
@ -2108,52 +2067,87 @@ path {
. help_area { . help_area {
width : 1200 px ; width : 1200 px ;
/ / h e i g h t : 5 0 0 p x ; margin : 0 px auto ;
margin : 50 px auto 0 px ; font - size : 34 px ;
border - radius : 10 px ;
background - color : # 312 B3B ;
font - size : 24 px ;
box - sizing : border - box ;
padding : 20 px 40 px ;
. help_item { . help_item {
height : 90 px ; height : 188 px ;
display : flex ; display : flex ;
justify - content : space - between ; justify - content : space - between ;
align - items : center ; align - items : center ;
border - bottom : 1 px solid # 282828 ; border - bottom : 1 px solid # FEFEFE ;
}
. help_item : nth - last - child ( 1 ) {
border - bottom : none ;
} }
. arrow { . arrow {
width : 24 px ; width : 60 px ;
height : 24 px ; height : 60 px ;
background - image : url ( "../../assets/img/arrow .png" ) ; background - image : url ( "../../assets/img/home/plus .png" ) ;
background - size : cover ; background - size : cover ;
} }
} }
. card_area { . title1 {
/ / h e i g h t : 1 6 4 p x ; width : 1200 px ; margin : 0 px auto ;
width : 1200 px ; display : flex ; justify - content : space - between ; font - size : 48 px ; font - weight : bold ;
margin : 50 px auto 100 px ; color : # fff ;
flex - wrap : wrap ; }
. card_item { . title2 {
width : 366 px ; width : 1200 px ; margin : 20 px auto 100 px ;
border - radius : 10 px ; font - size : 22 px ; color : # 9 a9a9a ;
/ / h e i g h t : 1 0 0 % ; }
box - sizing : border - box ; . web_area {
padding : 36 px ; width : 1200 px ;
background - color : # 1 B1B1B ; height : 717 px ;
margin - bottom : 50 px ; margin : 0 px auto 150 px ;
}
. APP_area {
display : flex ;
justify - content : center ;
align - items : center ;
margin : 0 px auto 150 px ;
. left {
width : 304 px ;
height : 674 px ;
border : 1 px solid # fff ;
margin - right : 136 px ;
}
. application {
width : 500 px ; height : 82 px ;
border : 1 px solid # fafafa ;
border - radius : 100 px ;
margin : 17 px 0 px 27 px ;
color : # 908 F94 ;
font - size : 16 px ;
justify - content : space - around ;
align - items : center ;
. app_icon {
display : flex ;
flex - direction : column ;
align - items : center ;
}
. icon {
width : 40 px ; height : 40 px ;
}
}
}
. travel_area {
width : 1200 px ;
height : 322 px ;
margin : 0 px auto 150 px ;
}
. learn_area {
width : 1200 px ;
height : 202 px ;
margin : 0 px auto 123 px ;
display : flex ;
justify - content : space - between ;
. learn_item {
width : 380 px ;
height : 202 px ;
border - radius : 10 px ;
img { img {
width : 220 px ; width : 100 % ; height : 100 % ;
height : 220 px ;
margin - left : 37 px ;
margin - bottom : 47 px ;
} }
} }
} }
