@ -7,12 +7,7 @@
< img :src ="item.imgurl" width = "100%" height = "100%" / >
< / e l - c a r o u s e l - i t e m >
< / e l - c a r o u s e l > - - >
< el -carousel
class = "el_carousel"
: interval = "3000"
arrow = "never"
height = "660px"
>
< el -carousel class = "el_carousel" :interval ="3000" arrow = "never" height = "660px" >
< el -carousel -item class = "el_carousel_item" >
< img src = "../../assets/img/banner/yb1.jpg" / >
< / e l - c a r o u s e l - i t e m >
@ -338,68 +333,176 @@
<!-- 立即体验 -- >
< div class = "section illustration_area" >
< div class = "left" >
< div class = "title" > { { $t ( "homeNewText.aa1 " ) } } < / div >
< div class = "title" style = "margin-bottom: 42 px;" > { { $t ( "homeNewText.aa2 " ) } } < / div >
< div class = "title" > { { $t ( "homeNewText.ff0 " ) } } < / div >
< div style = "margin-bottom: 50px;margin-top: 20 px;" > { { $t ( "homeNewText.ff1 " ) } } < / div >
< 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'}" >
{ { $t ( "homeNewText.aa4" ) } }
< / 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 class = "num-info1 d-flex" style = "margin-top: 90px;" >
< div class = "num-info-count1" >
< div class = "num1" > Top 10 < / div >
< div style = "color: #999;font-size: 13px;" > { { $t ( "homeNewText.ee1" ) } } < / div >
< / div >
< div class = "num-info-count1" >
< div class = "num1" > 5 million + < / div >
< div style = "color: #999;font-size: 13px;" > { { $t ( "homeNewText.ee2" ) } } < / div >
< / div >
< div class = "num-info-count1" >
< div class = "num1" > { { '<0.10%' } } < / div >
< div style = "color: #999;font-size: 13px;" > { { $t ( "homeNewText.ee3" ) } } < / div >
< / div >
< div class = "num-info-count1" >
< div class = "num1" > 200 + < / div >
< div style = "color: #999;font-size: 13px;" > { { $t ( "homeNewText.ee4" ) } } < / div >
< / div >
< div class = "right" style = "overflow: visible;" >
< img src = "../../assets/img/home/illustration_1.png" alt = "" style = "height: 500px;width: auto;" >
< / div >
< / div >
< 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 = "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 > { { $t ( "homeNewText.aa7" ) } } < / div >
< div > { { $t ( "homeNewText.bb1" ) } } < / div >
< div > { { $t ( "homeNewText.bb2" ) } } < / div >
< div style = "width: 25%;text-align: right;" > { { $t ( "homeNewText.bb3" ) } } < / div >
< div class = "right" >
< img src = "../../assets/img/illustration_1.png" alt = "" style = "width: 418px;height: 534px;" >
< / div >
< / div >
< div class = "illustration_area" style = "padding-top: 50px;" v-if ="marketList[0]" >
< div class = "left" style = "width: 400px;margin-right: 180px;" >
< div style = "font-size: 40px;font-weight: bold;" > { { $t ( "homeNewText.ff2" ) } } < / div >
< div style = "font-size: 23px;margin: 10px 0px;" > { { $t ( "homeNewText.ff3" ) } } < / div >
< router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 25px;border-radius: 31px;" >
{ { $t ( "home.more" ) } }
< / r o u t e r - l i n k >
< router -link v -else class = "jump_btn" :to ="{name:'exchange-assets'}" style = "margin-top: 25px;border-radius: 31px;" >
{ { $t ( "college.seeMore" ) } }
< / r o u t e r - l i n k >
< / div >
< div v-for ="(item, index) in marketList[0].marketInfoList.slice(0,5)" :key="index" class="market_tr" >
< div class = "right" style = "width: 500px;" >
< div tyle = "width: 440px;" >
< div style = "display: flex;flex-wrap: wrap;" >
< div v-for ="(item, index) in marketList[0].marketInfoList.slice(0,5)" :key="index" style="border: 1px solid #353535;margin: 10px;padding: 10px;border-radius: 10px;width: 120px;" >
< div >
< img class = "icon" :src ="item.coin_icon" alt = "" >
{ { item . coin_name } }
< img class = "icon" :src ="item.coin_icon" style = "width: 40px;height: 40px;" >
< / div >
< div > { { item . price || item . close } } < / div >
< div style = "font-size: 12px;" > { { item . coin_name } } < / div >
< div style = "font-size: 12px;margin-bottom: 15px;" > $ { { item . price || item . close } } USD < / div >
< div : class = "item.increase >= 0 ? 'increaceAj' : 'decreaceAj'" > { { item . increaseStr } } < / div >
< div style = "margin-left: 17%;width: 8%;text-align: right;" > { { item . count } } < / div >
<!-- < div style = "margin-left: 17%;width: 8%;" > { { item . count } } < / div > -- >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- 数字货币交易 -- >
< div class = "illustration_area" style = "padding-top: 100px;" >
< div class = "img_cellphone" > < img src = "@/assets/img/cellPhone.png" alt = "" > < / div >
< div style = "margin-left: 100px;" >
< div style = "display: flex;align-items: center;" >
< img src = "" alt = "" style = "width: 60px;height: 60px;" >
< div class = "biku_text" > { { $t ( "homeNewText.ff4" ) } } < / div >
< / div >
< div class = "gouma_text" > { { $t ( "homeNewText.ff5" ) } } < / div >
< div class = "introduce_text" > { { $t ( "homeNewText.ff6" ) } } < / div >
< router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;border-radius: 31px;" >
{ { $t ( "homeNewText.aa3" ) } }
< / r o u t e r - l i n k >
< router -link v -else class = "jump_btn" :to ="{name:'exchange'}" style = "margin-top: 25px;border-radius: 31px;" >
{ { $t ( "college.seeMore" ) } }
< / r o u t e r - l i n k >
< / div >
< / div >
< div class = "marquee" v-if ="marketList[0]" >
< div class = "marquee-pargress d-flex" >
< ul class = "marquee-list d-flex" v-for ="box in 4" :key="box+'box'" >
<!-- < li class = "item" v-for ="item in homeList" :key="item.pair + '' + box" > - - >
< li class = "item" v-for ="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box" >
< div class = "price-info d-flex" >
< div class = "symbol" style = "margin-right: 5px" >
<!-- { { item . pair } } -- >
{ { item . coin_name } }
< div class = "illustration_area" style = "background-color:#000000;padding-top: 100px;" >
< div style = "margin-right: 60px;" >
< div style = "display: flex;align-items: center;" >
< img src = "" alt = "" style = "width: 60px;height: 60px;" >
< div class = "biku_text" > { { $t ( "homeNewText.ff7" ) } } < / div >
< / div >
< div class = "d-flex" >
< span > $ { { item . price || item . close } } < / span >
< span : class = "item.increase >= 0 ? 'increace' : 'decreace'" >
( { { item . increaseStr } } )
< / span >
< div class = "gouma_text" > { { $t ( "homeNewText.ff8" ) } } < / div >
< div class = "introduce_text" > { { $t ( "homeNewText.ff9" ) } } < / div >
< router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;border-radius: 31px;" >
{ { $t ( "homeNewText.aa3" ) } }
< / r o u t e r - l i n k >
< router -link v -else class = "jump_btn" :to ="{name:'contract'}" style = "margin-top: 25px;border-radius: 31px;" >
{ { $t ( "college.seeMore" ) } }
< / r o u t e r - l i n k >
< / div >
< div class = "img_cellphone" > < img src = "@/assets/img/cellPhone.png" alt = "" > < / div >
< / div >
< / li >
< / ul >
< div class = "illustration_area" style = "background-color:#000000;padding-top: 100px;" >
< div style = "width: 493px;height: 650px;border: 1px solid #2c2c2c;padding: 10px;border-radius: 10px;" > < img src = "@/assets/img/home_people.png" alt = "" > < / div >
< div style = "margin-left: 100px;" >
< div class = "gouma_text" > { { $t ( "homeNewText.ff10" ) } } < / div >
< div class = "introduce_text" > { { $t ( "homeNewText.ff11" ) } } < / div >
< router -link v-if ="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;border-radius: 31px;" >
{ { $t ( "homeNewText.aa3" ) } }
< / r o u t e r - l i n k >
< router -link v -else class = "jump_btn" :to ="{name:'exchange-assets'}" style = "margin-top: 25px;border-radius: 31px;" >
{ { $t ( "college.seeMore" ) } }
< / r o u t e r - l i n k >
< / div >
< / div >
<!-- 数字货币交易 -- >
< div class = "title1 fn-center" > { { $t ( "homeNewText.bb4" ) } } < / div >
< div class = "illustration_area" style = "background-color:#000000;padding-top: 100px;" >
< div class = "build-bottom d-flex" >
< div class = "build-left" >
< div class = "gouma_text" > { { $t ( "homeNewText.ff12" ) } } < / div >
< div class = "introduce_text" > { { $t ( "homeNewText.ff13" ) } } < / div >
< div style = "width: 380px;margin-top: 30px;border: 1px solid #fff;border-radius: 35px;padding: 5px 0px;" >
< div style = "display: flex;justify-content: space-around;" >
< div > < img src = "../../assets/img/features/apple_1.png" alt = "" style = "width: 30px;height: 30px;" > < / div >
< div style = "margin-right: 5px;" > < img src = "../../assets/img/features/android_1.png" alt = "" style = "width: 30px;height: 30px;" > < / div >
< div > < img src = "../../assets/img/features/google_1.png" alt = "" style = "width: 30px;height: 30px;" > < / div >
< / div >
< div style = "display: flex;justify-content: space-around;margin-top: 5px;" >
< div > App Store < / div >
< div > Android < / div >
< div > Google Play < / div >
< / div >
< / div >
< div style = "margin: 20px 0px;" > { { $t ( "homeNewText.ff16" ) } } < / div >
< div style = "" >
< img src = "" alt = "" style = "width: 135px;height: 135px;background-color: #000;margin-right: 33px;margin-left: 10px;" >
< div style = "font-size: 22px;font-weight: bold;" > { { $t ( "homeNewText.ff17" ) } } < / div >
< / div >
< / div >
< div class = "build-right" >
< img src = "@/assets/img/features/sj.png" alt = "mobile application" style = "width: 681px;height: 407px;" / >
< / div >
< / div >
< / div >
< div style = "width: 1200px;font-size: 40px;font-weight: 700;margin: 0px auto;background-color:#000000;padding-top: 100px;" > { { $t ( "homeNewText.ff14" ) } } < / div >
< div class = "illustration_area" style = "background-color:#000000;margin-top: 10px;" >
< div >
< div class = "text_mai" >
< div >
{ { $t ( "homeNewText.ff15" ) } }
< / div >
< img src = "@/assets/img/tiao.png" alt = "mobile application" style = "width: 36px;height: 36px;" / >
< / div >
< div class = "text_mai" >
< div >
{ { $t ( "homeNewText.ff15" ) } }
< / div >
< img src = "@/assets/img/tiao.png" alt = "mobile application" style = "width: 36px;height: 36px;" / >
< / div >
< / div >
< div >
< div class = "text_mai" >
< div >
{ { $t ( "homeNewText.ff15" ) } }
< / div >
< img src = "@/assets/img/tiao.png" alt = "mobile application" style = "width: 36px;height: 36px;" / >
< / div >
< div class = "text_mai" >
< div >
{ { $t ( "homeNewText.ff15" ) } }
< / div >
< img src = "@/assets/img/tiao.png" alt = "mobile application" style = "width: 36px;height: 36px;" / >
< / div >
< / div >
< / div >
<!-- < div class = "title1 fn-center" > { { $t ( "homeNewText.bb4" ) } } < / div >
< div class = "title2 fn-center" > { { $t ( "homeNewText.bb5" ) } } < / div >
< div class = "web_area" >
< img src = "../../assets/img/home/illustration_111.png" alt = "" style = "width: 100%;height: 100%;" >
@ -423,13 +526,14 @@
< / div >
< / div >
< div style = "width: 510px;color: #9a9a9a;font-size: 22px;" > { { $t ( "homeNewText.bb7" ) } } < / div >
< img src = "../../assets/img/home/qrcode.png" alt = "qrcode for APP" style = "width: 135px;height: 135px;margin: 23px 0px 10px;" >
< img src = "../../assets/img/home/qrcode.png" alt = "qrcode for APP"
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 class = "title1 fn-center" > { { $t ( "homeNewText.bb9" ) } } < / 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%;" >
@ -447,20 +551,14 @@
< 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 >
< / div > -- >
<!-- beginner ' s guide -- >
< div class = "lattest-news-section" v-if ="0" >
< div class = "beginner service" >
<!-- 标题 -- >
< div class = "service-title" >
< div
class = "text service-title-text1"
style = "font-size: 40px; font-weight: 700; line-height: 71px"
>
< div class = "text service-title-text1" style = "font-size: 40px; font-weight: 700; line-height: 71px" >
{ { '111' } }
< / div >
< div class = "dotfive d-flex" >
@ -468,16 +566,16 @@
< / div >
< / div >
<!-- 内容 独特的交易经验 -- >
< div class = "beginner_content service-content d-flex" style = "justify-content: space-between;align-items: center;" >
< div class = "beginner_content service-content d-flex"
style = "justify-content: space-between;align-items: center;" >
<!-- 文字部分 -- >
< div
class = "beginner_content_r"
>
< div class = "beginner_content_r" >
< div class = "service-content-text beginner-text" style = "margin-bottom: 50px;" >
< div class = "service-content-text-img text-img" >
< div class = "circle_bg" >
< img src = "../../assets/img/features/8.png" alt = "" style = "width: 24px;height: 24px;margin: 13px;" / >
< img src = "../../assets/img/features/8.png" alt = ""
style = "width: 24px;height: 24px;margin: 13px;" / >
< / div >
< / div >
< div class = "text-box" >
@ -493,7 +591,8 @@
< div class = "service-content-text beginner-text" >
< div class = "service-content-text-img text-img" >
< div class = "circle_bg" >
< img src = "../../assets/img/features/9.png" alt = "" style = "width: 24px;height: 24px;margin: 13px;" / >
< img src = "../../assets/img/features/9.png" alt = ""
style = "width: 24px;height: 24px;margin: 13px;" / >
< / div >
< / div >
< div class = "text-box" >
@ -510,40 +609,24 @@
<!-- 图片 -- >
< div class = "service-img" >
< img
src = "../../assets/img/features/stt.png"
style = "width: 326px; height: 424px"
alt = ""
/ >
< img src = "../../assets/img/features/stt.png" style = "width: 326px; height: 424px" alt = "" / >
< / div >
< / div >
<!-- colto - btn - group -- >
< div
class = "colto-btn-group"
style = "justify-content: center"
>
< router -link
tag = "button"
to = "/sign-in"
< div class = "colto-btn-group" style = "justify-content: center" >
< router -link tag = "button" to = "/sign-in"
class = "btn btn-success rounded-pill callto-btn container_button"
style = "background-color: rgb(84, 164, 80); margin-right: 50px"
> { { $t ( "common.login" ) } }
style = "background-color: rgb(84, 164, 80); margin-right: 50px" > { { $t ( "common.login" ) } }
< / r o u t e r - l i n k >
< router -link
tag = "button"
to = "/sign-up"
< router -link tag = "button" to = "/sign-up"
class = "btn btn-primary rounded-pill callto-btn container_button1"
style = "background-color: rgb(50, 105, 235)"
> { { $t ( "common.register" ) } }
style = "background-color: rgb(50, 105, 235)" > { { $t ( "common.register" ) } }
< / r o u t e r - l i n k >
< / div >
< div class = "colto-btn-group" >
< router -link
tag = "button"
to = "/exchange"
class = "btn btn-primary rounded-pill callto-btn"
> { { $t ( "common.trading" ) } }
< router -link tag = "button" to = "/exchange"
class = "btn btn-primary rounded-pill callto-btn" > { { $t ( "common.trading" ) } }
< / r o u t e r - l i n k >
< / div >
< / div >
@ -587,15 +670,9 @@
< / div >
<!-- 内容 -- >
< div class = "service-content d-flex" >
< div
class = "service-img"
style = "width: 600px; height: 600px; margin-right: 66px"
>
< img
src = "../../assets/img/network.svg"
style = "width: 100%; height: 100%; object-fit: contain"
alt = ""
/ >
< div class = "service-img" style = "width: 600px; height: 600px; margin-right: 66px" >
< img src = "../../assets/img/network.svg" style = "width: 100%; height: 100%; object-fit: contain"
alt = "" / >
< / div >
<!-- 文字部分 -- >
@ -708,42 +785,33 @@
<!-- 内容 -- >
< div class = "service-content d-flex" >
<!-- 文字部分 -- >
< div
class = "service-content-r"
style = "margin-right: 80px; margin-left: 0"
>
< div
class = "service-content-text"
style = "
< div class = "service-content-r" style = "margin-right: 80px; margin-left: 0" >
< div class = "service-content-text" style = "
font - size : 24 px ;
width : 568 px ;
height : 323 px ;
line - height : 50 px ;
"
>
" >
{ { $t ( "common.CoinsExpound" ) } } .
< / div >
< / div >
<!-- 右边图片 -- >
< div class = "service-img" >
< img
src = "../../assets/img/team.png"
style = "width: 565px; height: 481px"
alt = ""
/ >
< img src = "../../assets/img/team.png" style = "width: 565px; height: 481px" alt = "" / >
< / div >
< / div >
< / div >
< / div >
<!-- 常见问题 -- >
< div class = "title1 fn-center" > { { $t ( "homeNewText.bb13" ) } } < / div >
<!-- < div class = "title1 fn-center" > { { $t ( "homeNewText.bb13" ) } } < / div >
< div class = "help_area" >
< router -link :to ="'/notice/'+item.id" v-for ="(item, index) in helpList" :key="index+'help'" class="help_item" >
< router -link :to ="'/notice/'+item.id" v -for = " ( item , index ) in helpList " :key ="index+'help'"
class = "help_item" >
< div style = "color: #fff;" > { { item . title } } < / div >
< div class = "arrow" > < / div >
< / r o u t e r - l i n k >
< / div >
< / div > -- >
< / div >
< / template >
@ -776,8 +844,7 @@ export default {
} ,
/ / 特 色 卡 片 列 表
featuresList ( ) {
return [
{
return [ {
zoom : false ,
bgclr : "rgba(76, 48, 115, 1)" ,
picture : require ( "@/assets/img/features/trade.png" ) ,
@ -845,7 +912,9 @@ export default {
tab : "Optional" ,
searchTxt : "" ,
skro : new Skroll ( ) ,
collect : [ { symbol : "" } ] ,
collect : [ {
symbol : ""
} ] ,
ws : null ,
pcBannerList : [ ] ,
noticeList : [ ] ,
@ -862,7 +931,10 @@ export default {
d3 . axisBottom ( ) . scale ( y ) ;
x . domain ( d3 . extent ( data , ( d , i ) => i ) ) ;
y . domain ( [ 0 , d3 . max ( data , ( d ) => d ) ] ) ;
return { x , y } ;
return {
x ,
y
} ;
} ,
calculatePath ( ) {
this . marketList [ 0 ] . marketInfoList . map ( ( item ) => {
@ -877,7 +949,9 @@ export default {
console . info ( this . marketList [ 0 ] . marketInfoList ) ;
} ,
truncate ( str , length ) {
return _ . truncate ( str , { length } ) ;
return _ . truncate ( str , {
length
} ) ;
} ,
isShow ( str ) {
let reg = new RegExp ( this . searchTxt , "ig" ) ;
@ -1004,7 +1078,14 @@ export default {
} ) ;
ws . on ( "message" , ( res ) => {
/ / c o n s o l e . i n f o ( r e s )
let { data , msg , code , sub , type , status } = res ;
let {
data ,
msg ,
code ,
sub ,
type ,
status
} = res ;
if ( sub == "indexMarketList" ) {
this . marketList = data ;
this . replaceOptional ( ) ;
@ -1046,7 +1127,9 @@ export default {
} ,
/ / 獲 取 公 告 列 表
article ( ) {
Member . article ( { type : "notice" } ) . then ( ( res ) => {
Member . article ( {
type : "notice"
} ) . then ( ( res ) => {
this . noticeList = res . data . splice ( 0 , 4 ) ;
} ) ;
} ,
@ -1123,11 +1206,14 @@ export default {
/ / 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 : # 000 ! important ;
padding - bottom : 100 px ;
. el_carousel {
width : 100 % ;
. el_carousel_item {
width : 100 % ;
height : 660 px ;
img {
width : 100 % ;
}
@ -1148,12 +1234,15 @@ path {
. path_increace {
stroke : # 76 bf8a ;
}
. increaceAj {
color : # 4 EAA97 ;
}
. decreaceAj {
color : # CF6A57 ;
}
/ / . v i e w - m o r e {
/ / b a c k g r o u n d : # f d 5 b 2 c ! i m p o r t a n t ;
/ / }
@ -1180,26 +1269,27 @@ path {
}
. section {
background - color : # 000 ;
background - color : # 0 D 0D 0D ;
/ / 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 % ;
height : 660 px ;
background - size : 100 % 100 % ;
overflow - x : hidden ;
. banner - block {
width : 100 % ;
height : 660 px ;
. banner - block img {
width : 100 % ;
height : 100 % ;
}
}
}
. illustration_area {
width : 1200 px ;
margin : 133 px auto 133 px ;
display : flex ;
justify - content : space - between ;
justify - content : center ;
align - items : center ;
. left {
color : # fff ;
@ -1208,8 +1298,10 @@ path {
. title {
font - size : 60 px ;
}
. icon_box {
display : flex ; justify - content : space - between ;
display : flex ;
justify - content : space - between ;
align - items : center ;
margin - top : 168 px ;
@ -1218,20 +1310,51 @@ path {
}
}
}
. img_cellphone {
border : 5 px solid # 2 c2c2c ; border - radius : 10 px ; width : 366 px ; height : 691 px ;
}
. biku_text {
margin - left : 5 px ; font - size : 25 px ; font - weight : bold ;
}
. gouma_text {
font - size : 32 px ; width : 360 px ; margin - top : 20 px ;
}
. introduce_text {
font - size : 15 px ; width : 430 px ; margin - top : 20 px ;
}
. text_mai {
width : 590 px ;
border : 1 px solid # 393939 ;
margin : 10 px 5 px ;
padding : 5 px 10 px ;
height : 83 px ;
/ / l i n e - h e i g h t : 3 8 p x ;
border - radius : 12 px ;
display : flex ;
align - items : center ;
justify - content : space - between ;
font - size : 18 px ;
}
}
. jump_btn {
display : inline - block ;
min - width : 200 px ;
height : 78 px ;
line - height : 78 px ;
height : 60 px ;
line - height : 60 px ;
text - align : center ;
color : # 101010 ;
background - color : # fff ;
border - radius : 50 px ;
color : # fff ;
background - color : # 2 d58de ;
border - radius : 1 0px ;
font - size : 20 px ;
padding : 0 px 20 px ;
box - sizing : border - box ;
}
. jump_btn : hover {
background - color : # fff ;
color : # 2 d58de ;
}
. market_table {
width : 1200 px ;
font - size : 16 px ;
@ -1242,6 +1365,7 @@ path {
height : 30 px ;
margin - right : 17 px ;
}
. market_tr {
display : flex ;
justify - content : center ;
@ -1300,6 +1424,7 @@ path {
padding : 10 px ;
/ / m a r g i n - b o t t o m : 2 0 p x ;
@ include flexible ( row , flex - start , center ) ;
/ / b o r d e r : 1 p x s o l i d r e d ;
figure {
width : 100 % ;
@ -1377,6 +1502,7 @@ path {
margin - bottom : 150 px ;
background - image : url ( "../../assets/img/home/bg_1.png" ) ;
background - size : 100 % 100 % ;
. marquee - pargress {
align - items : center ;
width : 100 % ;
@ -1384,6 +1510,7 @@ path {
/ / 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 - s i z e : 1 0 0 % 1 0 0 % ;
}
. marquee - list {
background : transparent ;
}
@ -1397,9 +1524,11 @@ path {
margin : 0 100 px ;
padding : 10 px 18 px ! important ;
. price - info {
justify - content : space - around ;
}
. justify - content - between {
justify - content : space - around ;
align - items : center ;
@ -1410,6 +1539,7 @@ path {
. section1 . new - ticker - block - section {
background - color : rgb ( 23 , 30 , 43 ) ;
}
. container {
width : 1200 px ;
height : 787 px ;
@ -1418,7 +1548,9 @@ path {
border - radius : 15 px ;
padding : 20 px ;
}
. markets {
/ / b o r d e r : 1 p x s o l i d r e d ;
. markets__title {
line - height : 55 px ;
@ -1433,6 +1565,7 @@ path {
margin : 50 px auto 50 px ; / / 居 中
}
}
/ / . n e w s [ d a t a - v - 5 9 5 4 4 4 3 c ] ,
/ / . c o l t o - s e c t i o n [ d a t a - v - 5 9 5 4 4 4 3 c ] {
/ / b a c k g r o u n d - c o l o r : r g b ( 2 3 , 3 0 , 4 3 ) ;
@ -1440,6 +1573,7 @@ path {
. colto - content - wrap {
background - color : rgb ( 35 , 40 , 54 ) ;
}
/ / n u m c o u n t
. num - info {
width : 100 % ;
@ -1448,12 +1582,14 @@ path {
align - items : center ;
margin : 60 px 0 0 px ;
background - color : # 0 D0D0D ;
. num - info - count {
. num {
font - size : 36 px ;
color : white ;
font - weight : bold ;
}
. title {
color : # 999 ;
font - size : 20 px ;
@ -1467,10 +1603,12 @@ path {
. service - title - text1 {
font - size : 40 px ;
}
. dotfive {
width : 106 px ;
height : 10 px ;
margin : 4 px auto ;
. dotblue {
width : 10 px ;
height : 10 px ;
@ -1479,16 +1617,19 @@ path {
}
}
}
. lattest - news - section {
margin : 80 px auto 0 px ;
width : 1200 px ;
color : white ;
text - align : center ;
. service - content {
margin - top : 60 px ;
. service - content - r {
text - align : left ;
. service - content - text {
. service - content - text - img {
. content_img {
@ -1496,6 +1637,7 @@ path {
height : 42 px ;
margin : 20 px 20 px 20 px 0 ;
}
text - align : left ;
display : flex ;
align - items : center ;
@ -1510,6 +1652,7 @@ path {
font - size : 24 px ;
}
}
. text - box {
. service - content - text1 - title {
font - size : 24 px ;
@ -1525,24 +1668,30 @@ path {
. beginner_content {
. beginner_content_r {
width : 600 px ;
. beginner - text {
display : flex ;
/ / a l i g n - i t e m s : c e n t e r ;
margin - bottom : 20 px ;
. content_img {
width : 136 px ;
height : 136 px ;
margin - right : 20 px ;
image {
width : 100 % ;
height : 100 % ;
}
}
. text - box {
text - align : left ;
. service - content - text1 - title {
font - size : 24 px ;
}
. service - content - text1 - info1 {
font - size : 18 px ;
color : # 908 F94 ;
@ -1559,6 +1708,7 @@ path {
. service - content - text - img {
margin : 20 px 0 ;
}
. service - content - r_title {
width : 534 px ;
height : 231 px ;
@ -1567,6 +1717,7 @@ path {
}
}
}
. section - choose {
margin : 50 px auto ;
width : 100 % ;
@ -1574,6 +1725,7 @@ path {
background - color : # 000 ;
color : white ;
text - align : center ;
. section - choose - top {
. section - choose - boder {
margin : 10 px auto ;
@ -1588,10 +1740,12 @@ path {
justify - content : center ;
align - items : center ;
margin - top : 50 px ;
. section - choose - info - text {
flex - direction : column ;
}
}
. choose - btn {
text - align : center ;
line - height : 60 px ;
@ -1630,8 +1784,7 @@ path {
/ / c o l t o - s e c t i o n
. colto - section {
. colto - btn - group {
}
. colto - btn - group { }
}
. features {
@ -1804,8 +1957,7 @@ path {
-- swiper - pagination - color : rgba ( 0 , 0 , 0 , 0.5 ) ;
/* 两种都可以 */
. swiper - slide {
}
. swiper - slide { }
. swiper - button - next ,
. swiper - button - prev {
@ -2088,31 +2240,41 @@ path {
}
. title1 {
width : 1200 px ; margin : 0 px auto ;
font - size : 48 px ; font - weight : bold ;
width : 1200 px ;
margin : 0 px auto ;
font - size : 48 px ;
font - weight : bold ;
color : # fff ;
}
. title2 {
width : 1200 px ; margin : 20 px auto 100 px ;
font - size : 22 px ; color : # 9 a9a9a ;
width : 1200 px ;
margin : 20 px auto 100 px ;
font - size : 22 px ;
color : # 9 a9a9a ;
}
. web_area {
width : 1200 px ;
height : 717 px ;
margin : 0 px auto 150 px ;
}
. APP_area {
display : flex ;
justify - content : center ;
align - items : center ;
margin : 0 px auto 150 px ;
. left {
/ / w i d t h : 3 0 4 p x ;
height : 674 px ;
margin - right : 136 px ;
}
. application {
width : 500 px ; height : 82 px ;
width : 500 px ;
height : 82 px ;
border : 1 px solid # fafafa ;
border - radius : 100 px ;
margin : 17 px 0 px 27 px ;
@ -2126,31 +2288,39 @@ path {
flex - direction : column ;
align - items : center ;
}
. icon {
width : 40 px ; height : 40 px ;
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 {
width : 100 % ; height : 100 % ;
width : 100 % ;
height : 100 % ;
}
}
}
. circle_bg {
width : 50 px ;
height : 50 px ;
@ -2158,4 +2328,22 @@ path {
background - size : cover ;
margin - right : 10 px ;
}
. num - info1 {
width : 460 px ;
/ / h e i g h t : 2 3 0 p x ;
justify - content : space - between ;
align - items : center ;
margin : 60 px 0 0 px ;
. num - info - count1 {
. num1 {
font - size : 18 px ;
color : white ;
font - weight : bold ;
}
. title1 {
color : # 999 ;
font - size : 13 px ;
}
}
}
< / style >
