@ -1,7 +1,7 @@
< template > < template >
< view class = "d-flex flex-col" style = "background-color: #221F28 ;" > < view class = "d-flex flex-col" style = "background-color: #000117 ;" >
<!-- 头部 -- > <!-- 头部 -- >
< v -header class = "nav-tab" :left-arrow ="false" style = "background-color: #101010 ;" :left-click ="personalCenter" > < v -header class = "nav-tab" :left-arrow ="false" style = "background-color: #141414 ;" :left-click ="personalCenter" >
< template # left > < template # left >
< van -icon name = "user-circle-o" class = "fn-25 color-theme-1" / > < van -icon name = "user-circle-o" class = "fn-25 color-theme-1" / >
< / template > < / template >
@ -138,27 +138,20 @@
<!-- 加密货币之门 -- > <!-- 加密货币之门 -- >
< view class = "illustration_area" > < view class = "illustration_area" >
< view class = "title_before" > < / view > < img src = "../../assets/img/home/illustration_1.png" alt = "" style = "width: 600rpx;height: 600rpx;" >
< view class = "left" >
< view class = "title" > { { $t ( "homeNewText.aa1" ) } } < / view > < view class = "title" > { { $t ( "homeNewText.aa1" ) } } < / view >
< view style = "width: 700rpx;" > { { $t ( "homeNewText.aa2" ) } } < / view > < view class = "title" > { { $t ( "homeNewText.aa2" ) } } < / view >
< view v-if ="!isLogin" class="btn" @click="goReg" > < view v-if ="!isLogin" class="jump_btn" @click="goReg" >
< img src = "../../assets/img/home/fas fa-user-plus@3x.png" alt = "" >
{ { $t ( "homeNewText.aa3" ) } } { { $t ( "homeNewText.aa3" ) } }
< / view > < / view >
< view v -else class = "btn" @click ="goExchange" > < view v -else class = "jump_btn" @click ="goExchange" >
< img src = "../../assets/img/home/riFill-exchange-fill@3x.png" alt = "" >
{ { $t ( "homeNewText.aa4" ) } } { { $t ( "homeNewText.aa4" ) } }
< / view > < / view >
< / view >
< view class = "right" >
< img src = "../../assets/img/home/illustration_1.png" alt = "" style = "width: 540rpx;height: 550rpx;" >
< / view >
< / view > < / view >
<!-- 市场趋势 -- > <!-- 市场趋势 -- >
< view class = "" > < view class = "" >
< view class = "fn-20 fn-bold color-light m-x-md p-y-md" > { { $t ( "homeNewText.aa5" ) } } < / view > < view class = "fn-28 fn-bold color-light m-x-md p-y-md" > { { $t ( "homeNewText.aa5" ) } } < / view >
< view class = "fn-12 m-x-md" > { { $t ( "homeNewText.aa6" ) } } < / view > < view class = "fn-12 m-x-md" style = "color: #999;" > { { $t ( "homeNewText.aa6" ) } } < / view >
< / view > < / view >
< view class = "head_info m-y-md " > < view class = "head_info m-y-md " >
< van -tabs < van -tabs
@ -227,6 +220,11 @@
> >
< view class = "w-12/12 m-t-xs" > < view class = "w-12/12 m-t-xs" >
< view class = "fn-center w-max" > < view class = "fn-center w-max" >
< view class = "m-b-md m-x-md rounded-xs box-shadow link-active d-flex justify-between align-center p-y-xs box-size p-x-xs" >
< view class = "fn-left w-5/12" > { { $t ( "homeNewText.aa7" ) } } < / view >
< view class = "fn-right w-4/12" > { { $t ( "homeNewText.bb1" ) } } < / view >
< view class = "fn-right w-3/12 positions" > { { $t ( "homeNewText.bb2" ) } } < / view >
< / view >
< v -link < v -link
: to = " { : to = " {
path : '/pages/exchange/index' , path : '/pages/exchange/index' ,
@ -238,17 +236,17 @@
: parentItem . marketInfoList . slice ( 0 , 5 ) " : parentItem . marketInfoList . slice ( 0 , 5 ) "
: key = "item.pair_name" : key = "item.pair_name"
> >
< view class = "w-1/12" > < view class = "fn-left w-5/12" >
< image :src ="item.coin_icon" mode = "" style = "width: 60rpx;height: 60rpx;" > < / image >
< / view >
< view class = "fn-left w-7/12" >
< view class = "d-flex align-center" > < view class = "d-flex align-center" >
< text class = "fn-bold fn-14 color-light" > { { item . pair_name } } < / text > < image :src ="item.coin_icon" mode = "" style = "width: 60rpx;height: 60rpx;margin-right: 12rpx;" > < / image >
< text class = "fn-bold fn-14 color-light" > { { item . coin_name } } < / text >
<!-- < text class = "fn-bold fn-14 color-light" > { { item . pair_name } } < / text > -- >
< / view > < / view >
< view class = "d-flex align-center fn-12 m-t-xs" > < view class = "d-flex align-center fn-12 m-t-xs" v-if ="0" >
24 H { { $t ( "first.b3" ) } } { { omitTo ( item . vol , 0 ) } } 24 H { { $t ( "first.b3" ) } } { { omitTo ( item . vol , 0 ) } }
< / view > < / view >
< / view > < / view >
< view class = "fn-right w-4/12 color-light" > { { item . close } } < / view >
< view class = "fn-right w-3/12" > < view class = "fn-right w-3/12" >
< span < span
class = "fn-bold rounded-xs fn-16" class = "fn-bold rounded-xs fn-16"
@ -257,10 +255,7 @@
" "
> { { item . increaseStr } } < / s p a n > { { item . increaseStr } } < / s p a n
> >
< view class = "fn-12"
> { { item . close
} }
< / view >
<!-- < view class = "charts-box m-t-xs" > <!-- < view class = "charts-box m-t-xs" >
< qiun -data -charts < qiun -data -charts
type = "tarea" type = "tarea"
@ -280,58 +275,86 @@
<!-- 适合所有人的加密货币交易所 -- > <!-- 适合所有人的加密货币交易所 -- >
< view style = "margin-top: 100rpx;" > < view style = "margin-top: 100rpx;" >
< view class = "fn-20 fn-bold color-white m-y-md" style = "text-align: center;" > { { $t ( "homeNewText.bb4" ) } } < / view > < view style = "width: 700rpx;margin: 0px auto;" >
< view class = "fn-12" style = "text-align: center;" > { { $t ( "homeNewText.bb5" ) } } < / view > < view class = "fn-28 fn-bold m-y-md" style = "width: 75%;color: #e7e7e7;" > { { $t ( "homeNewText.bb4" ) } } < / view >
< view class = "fn-12" style = "color: #999;" > { { $t ( "homeNewText.bb5" ) } } < / view >
< / view >
< view class = "card_area m-y-md" > < view class = "card_area m-y-md" >
< view class = "card_item" style = "background-color: #332E2F;" > < view class = "card_item" >
< view class = "fn-18 fn-bold" style = "color: #908F94;margin-bottom:10px;" > < img src = "../../assets/img/home/6.png" / > { { $t ( "homeNewText.bb6" ) } } < / view > < img src = "../../assets/img/home/4.png" alt = "" >
< view style = "font-size: 14px;color: #595558;" > { { $t ( "homeNewText.bb7" ) } } < / view > < view class = "fn-16 fn-bold" style = "color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb6" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb7" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb8" ) } } < / view >
< / view >
< view class = "card_item" >
< img src = "../../assets/img/home/5.png" alt = "" >
< view class = "fn-16 fn-bold" style = "color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb9" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb10" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb11" ) } } < / view >
< / view >
< view class = "card_item" >
< img src = "../../assets/img/home/2.png" alt = "" >
< view class = "fn-16 fn-bold" style = "color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb12" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb13" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb14" ) } } < / view >
< / view > < / view >
< view class = "card_item" style = "background-color: #262836;" > < view class = "card_item" >
< view class = "fn-18 fn-bold" style = "color: #908F94;margin-bottom:10px;" > < img src = "../../assets/img/home/7.png" / > { { $t ( "homeNewText.cc1" ) } } < / view > < img src = "../../assets/img/home/6.png" alt = "" >
< view style = "font-size: 14px;color: #595558;" > { { $t ( "homeNewText.cc2" ) } } < / view > < view class = "fn-16 fn-bold" style = "color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb15" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb16" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb17" ) } } < / view >
< / view > < / view >
< view class = "card_item" style = "background-color: #2A2733;" > < view class = "card_item" >
< view class = "fn-18 fn-bold" style = "color: #908F94;margin-bottom:10px;" > < img src = "../../assets/img/home/8.png" / > { { $t ( "homeNewText.cc3" ) } } < / view > < img src = "../../assets/img/home/1.png" alt = "" >
< view style = "font-size: 14px;color: #595558;" > { { $t ( "homeNewText.cc4" ) } } < / view > < view class = "fn-16 fn-bold" style = "color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb18" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb19" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb20" ) } } < / view >
< / view >
< view class = "card_item" >
< img src = "../../assets/img/home/3.png" alt = "" >
< view class = "fn-16 fn-bold" style = "color: #e7e7e7;margin-bottom:10px;" > { { $t ( "homeNewText.bb21" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb22" ) } } < / view >
< view style = "font-size: 12px;color: #707275;" > { { $t ( "homeNewText.bb23" ) } } < / view >
< / view > < / view >
< / view > < / view >
< / view > < / view >
<!-- 交易 ， 随时随地 -- >
< view class = "download_area" >
< view class = "fn-20 fn-bold color-white" style = "text-align: center;" > { { $t ( "homeNewText.cc5" ) } } < / view >
< view class = "zhanshi" > < / view >
< view class = "btn" > < image src = "../../assets/img/home/antFill-apple@3x.png" mode = "" > < / image > App Store < / view >
< view class = "btn" > < image src = "../../assets/img/home/md-android@3x.png" mode = "" > < / image > Android < / view >
< view class = "btn" > < image src = "../../assets/img/home/riFill-google-play-fill@3x.png" mode = "" > Google Play < / image > < / view >
< / view >
< view class = "introduce_area" > < view class = "introduce_area" >
< view class = "fn-28 fn-bold color-white m-y-md" > { { $t ( "homeNewText.dd1" ) } } < / view >
< view class = "fn-12" style = "color: #999;" > { { $t ( "homeNewText.dd2" ) } } < / view >
< view class = "zhanshi" > < / view > < view class = "zhanshi" > < / view >
< view class = "item" > < view class = "item" >
< image src = "../../assets/img/home/图片 9@3x.png" mode = "" > < / image > < view class = "img" >
< view class = "" style = "flex: 1;" > < image src = "../../assets/img/home/8.png" mode = "" > < / image >
< view class = "fn-18 fn-bold color-white m-b-sm" > { { $t ( "homeNewText.dd1" ) } } < / view >
< view class = "" > { { $t ( "homeNewText.dd2" ) } } < / view >
< / view > < / view >
< / view >
< view class = "item" >
< image src = "../../assets/img/home/图片 7@3x.png" mode = "" > < / image >
< view class = "" style = "flex: 1;" > < view class = "" style = "flex: 1;" >
< view class = "fn-18 fn-bold color-white m-b-sm " > { { $t ( "homeNewText.dd3" ) } } < / view > < view class = "fn-16 fn-bold m-b-sm" style = "color: #e7e7e7;" > { { $t ( "homeNewText.dd3" ) } } < / view >
< view class = "" > { { $t ( "homeNewText.dd4" ) } } < / view > < view class = "" > { { $t ( "homeNewText.dd4" ) } } < / view >
< / view > < / view >
< / view > < / view >
< view class = "item" > < view class = "item" >
< image src = "../../assets/img/home/图片 6@3x.png" mode = "" > < / image > < view class = "img" >
< image src = "../../assets/img/home/9.png" mode = "" > < / image >
< / view >
< view class = "" style = "flex: 1;" > < view class = "" style = "flex: 1;" >
< view class = "fn-18 fn-bold color-white m-b-sm" > { { $t ( "homeNewText.dd5" ) } } < / view > < view class = "fn-16 fn-bold m-b-sm" style = "color: #e7e7e7; " > { { $t ( "homeNewText.dd5" ) } } < / view >
< view class = "" > { { $t ( "homeNewText.dd6" ) } } < / view > < view class = "" > { { $t ( "homeNewText.dd6" ) } } < / view >
< / view > < / view >
< / view > < / view >
< / view > < / view >
<!-- 交易 ， 随时随地 -- >
< view class = "download_area" >
< view style = "width: 700rpx;margin: 0px auto;" >
< view class = "fn-28 fn-bold m-y-md" style = "color: #e7e7e7;" > { { $t ( "homeNewText.cc5" ) } } < / view >
< view class = "fn-12" style = "color: #999;" > { { $t ( "homeNewText.cc8" ) } } < / view >
< / view >
< view class = "zhanshi" > < / view >
< view class = "btn" > < image src = "../../assets/img/home/antFill-apple@2x.png" mode = "" > < / image > App Store < / view >
< view class = "btn" > < image src = "../../assets/img/home/md-android@2x.png" mode = "" > < / image > Android < / view >
< view class = "btn" > < image src = "../../assets/img/home/riFill-google-play-fill@2x.png" mode = "" > Google Play < / image > < / view >
< / view >
<!-- 帮助中心 -- > <!-- 帮助中心 -- >
< view style = "width: 700rpx;margin: 120rpx auto 40rpx;" > < view style = "width: 700rpx;margin: 120rpx auto 40rpx;" v-if ="0" >
< view class = "fn-20 fn-bold color-white m-b-lg" style = "text-align: center;" > { { $t ( "homeNewText.dd7" ) } } < / view > < view class = "fn-20 fn-bold color-white m-b-lg" style = "text-align: center;" > { { $t ( "homeNewText.dd7" ) } } < / view >
< view class = "help_area" > < view class = "help_area" >
< view v-for ="(item, index) in helpList" :key="index" class="help_item" @click="toNotice(item)" > < view v-for ="(item, index) in helpList" :key="index" class="help_item" @click="toNotice(item)" >
@ -340,6 +363,37 @@
< / view > < / view >
< / view > < / view >
< / view > < / view >
<!-- 五百万 -- >
< view class = "five_million" >
< view class = "f_item" >
< view class = "txt1" > Top 10 < / view >
< view class = "txt2" > { { $t ( "homeNewText.ee1" ) } } < / view >
< / view >
< view class = "f_item" >
< view class = "txt1" > 5 million + < / view >
< view class = "txt2" > { { $t ( "homeNewText.ee2" ) } } < / view >
< / view >
< view class = "f_item" >
< view class = "txt1" > { { '< 0.10%' } } < / view >
< view class = "txt2" > { { $t ( "homeNewText.ee3" ) } } < / view >
< / view >
< view class = "f_item" >
< view class = "txt1" > 200 + < / view >
< view class = "txt2" > { { $t ( "homeNewText.ee4" ) } } < / view >
< / view >
< / view >
< view style = "display: flex;flex-direction: column;align-items: center;padding-bottom: 100rpx;" >
< view style = "font-size: 24px;font-weight: bold;color: #fff;margin-bottom: 20rpx;" >
{ { $t ( "homeNewText.ee5" ) } }
< / view >
< view v-if ="!isLogin" class="jump_btn" @click="goReg" >
{ { $t ( "homeNewText.aa3" ) } }
< / view >
< view v -else class = "jump_btn" @click ="goExchange" >
{ { $t ( "homeNewText.aa4" ) } }
< / view >
< / view >
< / s c r o l l - v i e w > < / s c r o l l - v i e w >
< / view > < / view >
<!-- 个人主页弹出层 -- > <!-- 个人主页弹出层 -- >
@ -1282,92 +1336,76 @@ export default {
font - size : 9 px ; font - size : 9 px ;
} }
. illustration_area { . illustration_area {
position : relative ; background - color : # 0 d0d0d ;
padding - top : 30 rpx ; padding - bottom : 60 rpx ;
padding - bottom : 160 rpx ; display : flex ;
. right { flex - direction : column ;
width : 540 rpx ; height : 550 rpx ; align - items : center ;
margin : 0 px auto ;
} . title {
. title_before { font - size : 18 px ; font - weight : bold ;
position : absolute ; margin - bottom : 20 rpx ;
top : 180 rpx ; color : # fff ;
left : 128 rpx ;
z - index : 0 ;
width : 74 px ;
height : 74 px ;
background - color : # 633417 ;
} }
. left {
color : # fff ;
position : absolute ;
top : 50 rpx ;
width : 100 % ;
text - align : center ;
. title {
font - size : 30 px ; font - weight : bold ;
margin - top : 160 rpx ;
margin - bottom : 44 rpx ;
}
. btn {
min - width : 500 rpx ; }
height : 88 rpx ; . jump_btn {
margin : 154 rpx auto 0 px ; min - width : 300 rpx ;
background - color : # EABB71 ; height : 80 rpx ;
border - radius : 5 px ; line - height : 80 rpx ;
display : inline - flex ; text - align : center ;
justify - content : center ; margin : 0 px auto 0 px ;
align - items : center ; background - color : # D0712F ;
font - size : 14 px ; border - radius : 10 px ;
color : # 000 ; font - size : 14 px ;
color : # fff ;
img {
width : 48 rpx ;
height : 48 rpx ;
margin - right : 10 px ;
}
}
}
} }
. card_area { . card_area {
. card_item { . card_item {
width : 70 0rpx ; width : 640 rpx ;
min - height : 280 rpx ; min - height : 642 rpx ;
border - radius : 10 px ; border - radius : 10 px ;
box - sizing : border - box ; box - sizing : border - box ;
padding : 70 rpx ; padding : 40 rpx 70 rpx ;
margin : 0 px auto 40 rpx ; margin : 0 px auto 40 rpx ;
background - color : # 1 B1B1B ;
} }
img { img {
width : 40 rpx ; width : 360 rpx ;
height : 40 rpx ; height : 360 rpx ;
margin - right : 20 rpx ; margin : 0 px 70 rpx 50 rpx ;
vertical - align : middle ;
} }
} }
. download_area { . download_area {
width : 700 rpx ; margin : 160 rpx auto 120 rpx ; width : 750 rpx ; height : 1400 rpx ;
margin : - 60 px auto 120 rpx ;
padding : 200 rpx 0 px 0 px ;
box - sizing : border - box ;
background - image : url ( "../../assets/img/home/radial_bg.png" ) ;
background - size : cover ;
background - repeat : no - repeat ;
background - position : 50 % 30 % ;
. zhanshi { . zhanshi {
width : 700 rpx ; width : 700 rpx ;
height : 470 rpx ; height : 470 rpx ;
background - image : url ( "../../assets/img/home/styy.png" ) ; background - image : url ( "../../assets/img/home/styy.png" ) ;
background - size : cover ; background - size : cover ;
margin : 40 rpx 0 px ; margin : 40 rpx auto ;
} }
. btn { . btn {
width : 700 rpx ; width : 700 rpx ;
height : 88 rpx ; height : 88 rpx ;
color : # 101010 ; color : # fff ;
background - color : # EABB71 ; background - color : # D0712F ;
border - radius : 50 px ; border - radius : 5 px ;
font - size : 16 px ; font - size : 16 px ;
display : inline - flex ; display : inline - flex ;
justify - content : center ; justify - content : center ;
align - items : center ; align - items : center ;
margin - bottom : 40 rpx ; margin : 0 px 25 rpx 40 rpx ;
image { image {
width : 56 rpx ; width : 56 rpx ;
@ -1376,28 +1414,55 @@ export default {
} }
} }
} }
. five_million {
display : flex ; flex - wrap : wrap ;
background - color : # 0 D0D0D ;
padding : 60 rpx 24 rpx ;
. f_item {
width : 47 % ;
margin : 20 rpx 0 px ;
. txt1 {
font - size : 28 px ;
font - weight : bold ;
color : # fff ;
}
. txt2 {
font - size : 14 px ;
color : # 999 ;
}
}
}
. introduce_area { . introduce_area {
width : 700 rpx ; margin : 0 px auto ; width : 700 rpx ; margin : 0 px auto ;
. zhanshi { . zhanshi {
width : 700 rpx ; width : 384 rpx ;
height : 700 rpx ; height : 498 rpx ;
background - image : url ( "../../assets/img/home/stt.png" ) ; background - image : url ( "../../assets/img/home/stt.png" ) ;
background - size : 100 % 100 % ; background - size : 100 % 100 % ;
margin : 0 px auto ;
} }
. item { . item {
width : 700 rpx ; width : 700 rpx ;
min - height : 220 rpx ; min - height : 220 rpx ;
font - size : 14 px ; font - size : 12 px ;
display : inline - flex ; display : inline - flex ;
justify - content : space - between ; justify - content : space - between ;
align - items : center ; / / a l i g n - i t e m s : c e n t e r ;
margin - bottom : 40 rpx ; margin - top : 40 rpx ;
color : # 707275 ;
image { . img {
width : 120 rpx ; width : 80 rpx ;
height : 120 rpx ; height : 80 rpx ;
background - image : url ( "../../assets/img/home/7.png" ) ;
background - size : contain ;
margin - right : 20 rpx ; margin - right : 20 rpx ;
} }
image {
width : 40 rpx ;
height : 40 rpx ;
margin : 20 rpx ;
}
} }
} }
. help_area { . help_area {
