xioayue
/
nvr_coin_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2

master
luyisha 3 years ago
parent
43f0ddc408
commit
75d8ba6c2e
1 changed files with 527 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 696
      src/views/home/index.vue

696
src/views/home/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="dowebok" ref="dowebok">
<div class="section">
<div class="section" v-if="0">
<div class="banner-block col-xs-8">
<!-- <el-carousel :interval="6000" height="490px" style="width: 100%">
<el-carousel-item v-for="item in pcBannerList" :key="item.id" >
@ -38,6 +38,106 @@
<!-- 走马灯 -->
</div>
<div class="section" style="width: 100%;height:600px;background-color: #0D0E12;">
<!-- 全球数字资产交易平台 -->
<div class="section-block section-block-1" v-if="!isLogin">
<div>
<h1 style="font-size: 42px;">{{ $t("home.a4") }}</h1>
<h2 style="margin-bottom: 20px;">{{ $t("home.a5") }}</h2>
<router-link :to="`/sign-up`" class="btn3">{{ $t("home.a6") }}</router-link>
</div>
<img
src="../../../static/images/home_bg_1.png"
width="590px"
height="491px"
/>
</div>
<!-- 向賬戶充值 -->
<div class="section-block section-block-1" v-if="isLogin">
<div>
<h1>{{ $t("home.a0") }}</h1>
<h2 style="margin-bottom: 20px;">
{{ $t("home.a1") }}
<br />{{ $t("home.a2") }}
</h2>
<div class="btn3">{{ $t("home.a3") }}</div>
</div>
<img
src="../../../static/images/home_bg_1.png"
width="607px"
height="452px"
/>
</div>
</div>
<!-- 市场价 -->
<div class="section-block">
<div class="col-xs-8 banner-block-2">
<div class="flex-item-2" v-for="item in homeList2" :key="item.pair + ''">
<div class="price-info d-flex">
<img :src="item.coin_icon" alt="">
<div class="symbol" style="margin: 0px 20px 0px 6px;font-weight: bold;font-size: 16px;">
{{ item.pair_name }}
</div>
<div class="d-flex">
<span :class="item.increase >= 0 ? 'c_increase' : 'c_decreace'">
{{ item.increaseStr }}
</span>
</div>
</div>
<div style="font-weight: bold;font-size: 20px;">{{ item.close }}</div>
<div style="color: #999;">{{ item.close }}</div>
</div>
</div>
</div>
<!-- futures class -->
<div class="section-block section-block-4">
<div class="d-flex justify-content-between">
<div class="img-box" v-for="(item, index) in articleList" :key="index">
<router-link class="post-link" :to="`/college/detail/${item.category_id}/${item.id}`">
<img :src="item.full_cover" alt="" >
</router-link>
<!-- <div>{{ item.title }}</div> -->
</div>
</div>
</div>
<!-- 市场趋势 -->
<div class="section-block section-block-2">
<div class="d-flex justify-content-between" style="align-items: center;">
<h1>{{ $t("home.a8") }}</h1>
<!-- <span>
<router-link to="/exchange" style="color:#999;">{{ $t("home.a13") }}</router-link>
<img src="../../../static/images/icon/right.png" alt="" width="10" height="10" />
</span> -->
</div>
<div style="color: #999;">{{ $t("home.a7") }}</div>
<div class="d-flex justify-content-between mb-4">
<div style="width:25%;">
<div class="th">{{ $t("home.a9") }}</div>
<div class="td" v-for="(item, index) in brokenLine" :key="index">
<img :src="item.coin_icon" style="width:30px;height:30px;" />
<span>{{item.coin_name}}</span>
</div>
</div>
<div style="width:25%;">
<div class="th">{{ $t("home.a10") }}</div>
<div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.close}}</div>
</div>
<div style="width:25%;text-align: center;">
<div class="th">{{ $t("home.a11") }}</div>
<div class="td" v-for="(item, index) in brokenLine" :key="index"
:class="item.increase < 0 ? 'td c_decreace' : 'td c_increase'">{{item.increaseStr}}
</div>
</div>
<div style="width:25%;text-align: right;">
<div class="th">{{ $t("home.a12") }}</div>
<div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.vol}}</div>
</div>
</div>
<!-- <div v-if="!isLogin">
<div style="font-weight: bold;font-size: 22px;">{{ $t("home.a14") }}</div>
<div class="btn3 mt-3"><router-link to="/sign-in" class="target-a">{{ $t("home.a15") }}</router-link></div>
</div> -->
</div>
<!-- <div class="marquee">
<div class="marquee-pargress d-flex">
<ul class="marquee-list d-flex" v-for="box in 4" :key="box">
@ -353,28 +453,110 @@
<!-- </div>-->
<!--中间显示4个图标-->
<!-- number count -->
<!-- number count 五百万 -->
<div class="num-info d-flex">
<div class="num-info-count">
<div class="num">5 {{ $t("common.million") }}+</div>
<div class="title">{{ $t("common.user") }}</div>
<div class="num">{{ $t("home.a13") }}</div>
<div class="title">{{ $t("home.a17") }}</div>
</div>
<div class="num-info-count">
<div class="num">92,115,351</div>
<div class="title">{{ $t("common.tradings") }}</div>
<div class="num">{{ $t("home.a14") }}</div>
<div class="title">{{ $t("home.a18") }}</div>
</div>
<!-- <div class="num-info-count">
<div class="num">12,689,199</div>
<div class="title">payments in local currency</div>
</div> -->
<div class="num-info-count">
<div class="num">8,464,594</div>
<div class="title">{{ $t("common.using") }}</div>
<div class="num">{{ $t("home.a15") }}</div>
<div class="title">{{ $t("home.a19") }}</div>
</div>
<div class="num-info-count">
<div class="num">{{ $t("home.a16") }}</div>
<div class="title">{{ $t("home.a20") }}</div>
</div>
</div>
<!-- build --><!-- 多终端支持 -->
<div class="build-box">
<div class="build-bottom d-flex">
<div class="build-left">
<!-- applogo -->
<div class="service-title">
<div class="build-left-text-appname"
style="font-size: 32px;font-weight: bold;"
>
{{ $t("home.a21") }}
</div>
<div style="font-size: 16px">
{{ $t("home.a22") }}
</div>
</div>
<div class="build-left-text" style="font-size: 20px;margin-top: 30px;">
{{ $t("home.a23") }}
</div>
<div class="build-left-download d-flex">
<!-- ios -->
<div class="download">
<img src="../../../static/images/icon/antFill-apple@2x.png" alt="" />
<div class="download-ios-name">{{ $t("home.a24") }}</div>
</div>
<!-- android -->
<div class="download">
<img src="../../../static/images/icon/fab fa-android@2x.png" alt="" />
<div class="download-android-name">{{ $t("home.a25") }}</div>
</div>
</div>
<!-- qrcode -->
<div class="d-flex" style="align-items: center;">
<div class="qrcode">
<!-- <img src="../../assets/img/download.png" alt="" /> -->
</div>
<div>
<span style="font-size: 20px;font-weight: bold;">{{ $t("home.a26") }}</span>
<br />
<span>{{ $t("home.a27") }}</span>
</div>
</div>
</div>
<div class="build-right">
<div class="build-right-phone">
<img src="../../../static/images/a.png" alt="" />
</div>
</div>
</div>
</div>
<!-- 在NVRcoin，交易安全稳定 -->
<div class="section-block section-block-3">
<h1>{{ $t("home.a28") }}</h1>
<div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("home.a29") }}</div>
<div class="d-flex justify-content-between" style="flex-wrap: wrap;">
<div class="box box1">
<div>
<div class="txt_1">{{ $t("home.a30") }}</div>
<div class="txt_2">{{ $t("home.a31") }}</div>
</div>
</div>
<div class="box box2">
<div>
<div class="txt_1">{{ $t("home.a32") }}</div>
<div class="txt_2">{{ $t("home.a33") }}</div>
</div>
</div>
<div class="box box3">
<div>
<div class="txt_1">{{ $t("home.a34") }}</div>
<div class="txt_2">{{ $t("home.a35") }}</div>
</div>
</div>
<div class="box box4">
<div>
<div class="txt_1">{{ $t("home.a36") }}</div>
<div class="txt_2">{{ $t("home.a37") }}</div>
</div>
</div>
</div>
</div>
<!-- why you choose -->
<div class="lattest-news-section">
<div class="lattest-news-section" v-if="0">
<div class="section_choose service">
<!-- 标题 -->
<div class="service-title">
@ -526,7 +708,7 @@
<!-- </div>-->
<!-- our technology -->
<div class="lattest-news-section">
<div class="lattest-news-section" v-if="0">
<div class="section_technology service">
<!-- 标题 -->
<div class="service-title">
@ -569,7 +751,7 @@
</div>
<!-- beginner's guide -->
<div class="lattest-news-section">
<div class="lattest-news-section" v-if="0">
<div class="beginner service">
<!-- 标题 -->
<div class="service-title">
@ -702,97 +884,26 @@
</div>
</div>
</div>
<!-- build -->
<div class="build-box">
<!-- 标题部分 -->
<!-- <div class="section-choose section-build" style="height: 200px">
<div class="section-choose-top">
<div style="font-size: 48px; font-weight: 700">
Build your crypto portfolio anywhere
</div>
<div style="font-size: 20px; margin: 5px 0">
A powerful cryptocurrency exchange in your pocket. Buy, sell and
trade crypto on the go.
</div>
<div class="section-choose-boder"></div>
</div>
</div> -->
<!-- 下方部分 -->
<div class="build-bottom d-flex">
<!-- phone module -->
<div class="build-right">
<div class="build-right-phone">
<img src="../../assets/img/phonemodule.png" alt="" />
<!-- 新手指引 -->
<div class="section-block section-block-4" style="margin-top: 50px;">
<h1>{{ $t("home.a38") }}</h1>
<div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("home.a39") }}</div>
<div class="d-flex justify-content-between">
<div class="img-box-2" v-for="(item, index) in articleList" :key="index">
<router-link class="post-link" :to="`/college/detail/${item.category_id}/${item.id}`">
<!-- <img :src="item.full_cover" alt="" > -->
<div class="img"></div>
</router-link>
<!-- <div>{{ item.title }}</div> -->
</div>
</div>
<div class="build-left">
<!-- applogo -->
<div class="service-title">
<div
class="build-left-text-appname text-start service-title-text1"
style="font-size: 48px"
>
YBGCOINS APP
</div>
<div class="dotfive d-flex">
<div class="dotblue" v-for="item in 5" :key="item"></div>
</div>
</div>
<div class="build-left-text" style="font-size: 36px">
{{ $t("common.Create") }}
</div>
<div
class="build-left-text"
style="font-size: 20px; margin-top: 10px;"
>
{{ $t("common.Scan") }}.
</div>
<div class="build-left-download d-flex">
<!-- android -->
<div class="download_box d-flex">
<div class="download checked d-flex">
<img class="download_ico" src="../../assets/img/icon/android-fill.svg" alt="" />
<div class="download-android-name">
{{ $t("common.Android") }}
</div>
</div>
</div>
<!-- ios -->
<div class="download_box d-flex">
<div class="download checked d-flex">
<img class="download_ico" src="../../assets/img/icon/apple-fill.svg" alt="" />
<div class="download-ios-name">{{ $t("common.ios") }}</div>
</div>
</div>
<!-- qrcode -->
</div>
<!-- <div
class="build-left-text"
style="font-size: 20px; margin-top: 10px; font-weight: 400"
>
{{ $t("common.Scan") }}.
</div> -->
<!-- qrcode -->
<div class="download_qrcode d-flex">
<div class="qrcode">
<img src="../../assets/img/download.png" alt="" />
</div>
<div class="qrcode">
<img src="../../assets/img/download.png" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- 立即赚取收益 -->
<div class="section-block" style="padding-bottom: 100px;text-align: center;margin-top: 100px;">
<div style="font-size: 40px;font-weight: bold;margin-bottom: 30px;">{{ $t("home.a40") }}</div>
<router-link :to="`/exchange`" class="btn4" v-if="isLogin">{{ $t("home.a41") }}</router-link>
<router-link :to="`/sign-in`" class="btn4" v-if="!isLogin">{{ $t("home.a41") }}</router-link>
</div>
</div>
</template>
@ -887,6 +998,8 @@ export default {
bannerList: [],
articleList: [],
homeList: [],
homeList2: [],
brokenLine: [],
iconList: [],
marketList: [],
tab: "Optional",
@ -947,6 +1060,7 @@ export default {
this.bannerList = res.bannerList;
this.homeList = res.homeList;
this.homeList2 = res.homeList.splice(0,4);
// console.log(res.homeList);
this.marketList = res.marketList;
// this.calculatePath()
@ -1053,6 +1167,8 @@ export default {
let { data, msg, code, sub, type, status } = res;
if (sub == "indexMarketList") {
this.marketList = data;
this.brokenLine = data[0].marketInfoList.slice(0,5);
this.homeList2 = data[0].marketInfoList.slice(0,4);
this.replaceOptional();
// this.calculatePath()
} else if (type == "ping") {
@ -1081,9 +1197,9 @@ export default {
},
// 新手教程
getArticleList() {
College.getArticleList(20)
College.getArticleList(18)
.then((data) => {
this.articleList = data.splice(0, 4);
this.articleList = data.splice(0, 3);
setTimeout(() => {
this.skroll();
}, 100);
@ -1159,7 +1275,7 @@ export default {
<style lang="scss" scoped>
#dowebok {
background: rgb(18, 19, 24) !important;
background: #121318 !important;
.el_carousel {
width: 100%;
.el_carousel_item {
@ -1217,6 +1333,7 @@ path {
height: 660px;
background-size: 100% 100%;
overflow-x: hidden;
background-color: transparent;
.banner-block {
width: 100%;
height: 660px;
@ -1409,17 +1526,18 @@ path {
}
// num count
.num-info {
width: 100%;
width: 1200px;
height: 150px;
justify-content: space-evenly;
margin: 60px 0;
justify-content: space-between;
margin: 50px auto;
.num-info-count {
.num {
font-size: 36px;
color: rgba(50, 105, 235, 1);
font-weight: bold;
color: white;
}
.title {
color: white;
color: #999;
font-size: 20px;
}
}
@ -1571,91 +1689,75 @@ path {
width: 100%;
text-align: center;
color: white;
padding-bottom: 100px;
padding: 50px 0px;
background: url("../../../static/images/home_build_bg1.png");
background-size: 100% 100%;
.build-bottom {
justify-content: center;
width: 1200px;
margin: 0px auto;
justify-content: space-between;
align-items: center;
.text-start {
text-align: start;
}
.build-left {
text-align: left;
margin-left: 80px;
.service-title {
margin-bottom: 30px;
.dotfive {
margin-left: 8px;
}
}
// .build-left-logo {
// width: 366px;
// height: 92px;
// .build-left-logo img {
// width: 100%;
// height: 100%;
// }
// }
.build-left-download {
justify-content: space-between;
align-items: center;
width: 551px;
height: 80px;
width: 220px;
height: 130px;
font-size: 14px;
color: #000;
border-radius: 9999px;
margin: 28px 0;
.download_box {
width: 210px;
height: 80px;
align-items: center;
justify-content: center;
border: 2px solid white;
border-radius: 9999px;
padding: 6px;
.download {
width: 190px;
height: 60px;
background-color: #fff;
font-size: 24px;
align-items: center;
justify-content: center;
.download_ico {
width: 28px;
height: 28px;
margin-right: 6px;
}
.download {
width: 100px;
text-align: center;
font-size: 16px;
font-weight: 500;
img{
width: 48px;
height: 48px;
}
}
.download:nth-of-type(1){
width: 80px;
}
.checked {
border-radius: 9999px;
border: 1px solid rgba(187, 187, 187, 1);
background-color: rgba(255, 255, 255, 1);
color: #000;
}
}
.download_qrcode {
width: 551px;
justify-content: space-between;
align-items: center;
padding: 0 2px;
.qrcode {
width: 210px;
height: 210px;
border: 2px solid #fff;
background-color: #000;
border-radius: 20px;
img {
width: 100%;
height: 100%;
}
.qrcode {
width: 110px;
height: 110px;
padding: 10px;
border: 2px solid #fff;
background-color: #fff;
border-radius: 5px;
margin-right: 15px;
img {
width: 100%;
height: 100%;
}
}
}
.build-right {
width: 384px;
height: 791px;
.build-right img {
width: 100%;
height: 100%;
width: 297px;
height: 599px;
img {
width: 297px;
height: 599px;
}
}
}
@ -1954,6 +2056,262 @@ path {
}
}
.banner-block-2{
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0px;
.flex-item-2{
width: 336px;
height: 85px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
.price-info{
align-items: center;
img{
width: 30px;
height: 30px;
}
}
}
.flex-item-2:nth-of-type(1),
.flex-item-2:nth-of-type(2),
.flex-item-2:nth-of-type(3){
border-right: 1px solid #5e5e5e;
}
.flex-item-2:nth-of-type(2),
.flex-item-2:nth-of-type(3){
padding: 0px 75px;
flex-shrink: 0;
}
.flex-item-2:nth-of-type(1){
flex-shrink: 1;
}
.flex-item-2:nth-of-type(4){
padding-left: 80px;
flex-shrink: 1;
}
}
.c_decreace {
color: #CF6A57;
}
.c_increase {
color: #4EAA97;
}
.section-block{
width: 1200px;
margin: 0 auto;
h1{
font-size: 32px;
font-weight: 600;
}
h2{
font-size: 28px;
font-weight: normal;
}
h3{
font-size: 26px;
font-weight: 600;
}
.btn3{
display: inline-block;
width: auto;
padding: 10px 20px;
text-align: center;
background: #0B0FCC;
border-radius: 30px;
min-width: 200px;
color: #FFF;
a{
color: #FFF;
}
}
.btn4{
display: inline-block;
width: auto;
padding: 10px 20px;
text-align: center;
background: #0B0FCC;
border-radius: 5px;
min-width: 200px;
color: #FFF;
a{
color: #FFF;
}
}
}
.section-block-1{
height: 600px;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-block-2{
padding: 40px 0px 0px;
.th{
color:#898F9B;
}
.th, .td{
line-height: 50px;
}
.td span{
color:#898F9B;
margin-left: 6px;
}
}
.section-block-3{
margin-top: 80px;
.box{
border-radius: 10px;
box-sizing: border-box;
}
.box1{
width: 802px;
min-height: 220px;
padding: 18px 44px 18px 28px;
background-image: url("../../../static/images/1.png");
background-size: 100% 100%;
display: flex;
justify-content: space-between;
align-items: end;
.txt_1, .txt_2{
width: 450px;
}
img{
width: 277px;
height: 184px;
}
}
.box2{
width: 368px;
min-height: 220px;
padding: 26px 0px 0px 24px;
background-image: url("../../../static/images/2.png");
background-size: 100% 100%;
position: relative;
.txt_1{
width: 260px;
}
.txt_2{
width: 200px;
}
img{
width: 167px;
height: 167px;
position: absolute;
right: 0px;
bottom: 0px;
z-index: 1;
}
}
.box3{
width: 368px;
height: 260px;
padding: 26px 0px 0px 17px;
background-image: url("../../../static/images/3.png");
background-size: 100% 100%;
margin-top: 30px;
position: relative;
.txt_1, .txt_2{
width: 250px;
}
img{
width: 155px;
height: 155px;
position: absolute;
right: 0px;
bottom: 0px;
z-index: 1;
}
}
.box4{
width: 802px;
height: 260px;
padding: 30px 50px 30px 30px;
background-image: url("../../../static/images/4.png");
background-size: 100% 100%;
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: start;
.txt_1, .txt_2{
width: 520px;
}
img{
width: 225px;
height: 225px;
}
}
.txt_1{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.txt_2{
color: #999
}
img{
background: #ccc;
}
}
.section-block-4{
.label-1{
background: #F5F5F6;
padding: 10px 20px;
margin-right: 30px;
cursor: pointer;
}
.img-box{
width: 32%;
img{
width: 100%;
height: 220px;
background: #000;
border-radius: 10px;
margin-bottom: 0.5rem;
}
}
.img-box-2{
width: 386px;
a, a div{
width: 386px;
height: 180px;
}
}
.img-box-2:nth-of-type(1) .img{
background-image: url("../../../static/images/7.png");
}
.img-box-2:nth-of-type(2) .img{
background-image: url("../../../static/images/8.png");
}
.img-box-2:nth-of-type(3) .img{
background-image: url("../../../static/images/9.png");
}
.de{
color: #fff;
background: #326AEB;
}
.in{
background: #F5F5F6;
}
}
.markets__title_span {
font-size: 16px;
color: #a1a7ae;

Write Preview
Loading…
Cancel
Save