123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- <template>
- <div>
- <header-component></header-component>
- <el-carousel indicator-position="none" arrow="never" height="900px">
- <el-carousel-item v-for="item,index in 3" :key="index">
- <div class="banner" :id="'banner'+index">
- <div class="position-box">
- <button class="carousel-apply-btn">申请代理</button>
- </div>
- </div>
- </el-carousel-item>
- </el-carousel>
- <div class="position-box">
- <div class="login-box">
- <div class="box-inner">
- <login-box></login-box>
- </div>
- </div>
- </div>
- <proxy-banner></proxy-banner>
- <div class="main-currency-container">
- <div class="header-title">
- <h1 class="title">主流交易币种</h1>
- <h2 class="eng-title">Mainstream Trading Crypto-currency</h2>
- <p class="blue-line"></p>
- </div>
- <div class="currency-container">
- <div class="currency-layer">
- <currency-block v-for="item,index in currencyDataList" :currency-data="item"></currency-block>
- </div>
- </div>
- </div>
- <div class="join-gain-container">
- <special-title title="加入我们,可以获得" eng-title="To join our agent you will gain the following advantages"></special-title>
- <join-gain-block
- class="jg-block"
- v-for="item,index in joinGainInfoDataList"
- :join-gain-info-data="item">
- </join-gain-block>
- </div>
- <div class="full-pic">
- <div class="introduce">
- <img class="plat-block" :src="require('../assets/platBlock.png')">
- <h1 class="title-main">专业严谨</h1>
- <h2 class="title-sub">的交易平台</h2>
- <p class="eng-title">Professional and rigorous trading platform</p>
- <hr class="short-white-line"/>
- <pre class="introduce-block">
- Fx66是基于区块链底层技术的数字货币交易所,
- 拥有撮合交易系统低延时、高并发的核心技术,
- 勇于突破传统交易所的局限,
- 将交易、资产写入区块链。
- </pre>
- </div>
- </div>
- <div class="one-stop-container">
- <special-title title="全方位 一站式服务" eng-title="All-around one-stop service"></special-title>
- <div class="intro-container">
- <rhombus-block v-for="item,index in infoDataList" :info-data="item"></rhombus-block>
- </div>
- </div>
- <right-helper></right-helper>
- </div>
- </template>
- <script>
- import HeaderComponent from "../components/header";
- import ProxyBanner from "../components/proxyBanner";
- import CurrencyBlock from "../components/currencyBlock";
- import JoinGainBlock from "../components/joinGainBlock";
- import SpecialTitle from "../components/specialTitle";
- import RhombusBlock from "../components/rhombusBlock";
- import RightHelper from "../components/rightHelper";
- import LoginBox from "../components/loginBox";
- export default {
- name: "index",
- components: {
- LoginBox,
- RightHelper, RhombusBlock, SpecialTitle, JoinGainBlock, CurrencyBlock, ProxyBanner, HeaderComponent, },
- data(){
- return{
- currencyDataList:[
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },{
- icon:'',
- name:'btc(比特币)'
- },
- {
- icon:'',
- name:'btc(比特币)'
- },
- ],
- joinGainInfoDataList:[
- {
- title:'超高返佣',
- engTitle:'High commission',
- description:'推荐FX66给他人,可以获取被推荐人等比例交易的手续费做为佣金。',
- imgUrl:require('../assets/add01.png')
- },
- {
- title:'安全存储',
- engTitle:'Secure storage ',
- description:'每笔交易需私钥签名,分布式校验,无法假冒和盗用;平台资金更安全,操作更快捷。',
- imgUrl:require('../assets/add02.png')
- },
- {
- title:'市场支持',
- engTitle:'Marketing support',
- description:'FX66经纪商可以共享公司的全部交易工具和交易资源,并且会在市场宣传方面给予相应的支持!',
- imgUrl:require('../assets/add03.png')
- },
- {
- title:'技术支持',
- engTitle:'Technical support',
- description:'我们拥有领先的技术开发团队,针对不同客户需求量身制定专属平台,仅收取少量成本费。',
- imgUrl:require('../assets/add04.png')
- }
- ],
- infoDataList:[
- {
- icon:'',
- line1:'FX66具备一键交易功能,',
- line2:'闪电交易,专业快捷!'
- },
- {
- icon:'',
- line1:'手机客户端,',
- line2:'随时随地,紧跟市场!'
- },
- {
- icon:'',
- line1:'专业分析指导,',
- line2:'价值评估市场!'
- },
- {
- icon:'',
- line1:'新手帮帮帮',
- line2:'一小时教您炒币入门'
- }
- ]
- }
- },
- methods:{
- }
- }
- </script>
- <style scoped lang="less">
- @import "../assets/less/_variable.less";
- #banner0{
- background: url(../assets/banner/banner.png) no-repeat 50%;
- background-size: auto 100%;
- height: 900px;
- }
- #banner1{
- background: url(../assets/banner/banner1.png) no-repeat 50%;
- background-size: auto 100%;
- height: 900px;
- }
- #banner2{
- background: url(../assets/banner/banner2.png) no-repeat 50%;
- background-size: auto 100%;
- height: 900px;
- }
- .carousel-apply-btn{
- position: absolute;
- width: 160px;
- height: 45px;
- background-color: #ffdf00;
- border-radius: 2px;
- border: none;
- font-size: 20px;
- color: #154bb2;
- left: 0;
- /*left: 350px;*/
- bottom: 400px;
- }
- .position-box{
- position: absolute;
- width: 1200px;
- transform: translateX(-50%);
- left: 50%;
- /*margin: 0 auto;*/
- top: 0;
- height:900px;
- }
- .login-box{
- position: absolute;
- right: 0;
- top:180px;
- width: 390px;
- height: 494px;
- background-color: rgba(255, 255, 255, 0.4);
- padding: 15px;
- & .box-inner{
- height: 100%;
- width: 100%;
- background-color: white;
- }
- }
- .main-currency-container{
- height: 910px;
- background: url(../assets/coinBg.png) no-repeat bottom;
- margin-top: 75px;
- & .header-title{
- & .title{
- font-weight: 700;
- font-size: 35px;
- color: @lightBlack;
- line-height: 35px;
- }
- & .eng-title{
- font-size: 20px;
- color: @lighterBlack;
- margin-top: 12px;
- }
- & .blue-line{
- margin: 15px auto 0;
- width: 60px;
- height: 2px;
- background-color: #1a6fa6;
- }
- }
- & .currency-container{
- margin-top: 85px;
- & .currency-layer{
- width: 912px;
- height: 363px;
- margin: 0 auto;
- display: flex;
- /*flex-direction: column;*/
- flex-wrap: wrap;
- align-content: space-between;
- justify-content: space-between;
- }
- }
- }
- .join-gain-container{
- width: 1200px;
- margin: 65px auto 0;
- display: flex;
- flex-wrap: wrap;
- & .jg-block{
- width: 50%;
- margin-top: 80px;
- }
- }
- .full-pic{
- position: relative;
- margin-top: 140px;
- width: 100%;
- height: 830px;
- background: url(../assets/platBg.png) 50% 50% no-repeat;
- & .introduce{
- position: absolute;
- width: 1200px;
- height: 255px;
- background-color: rgba(2, 134, 219, 0.83);
- left: 50%;
- transform: translateX(-50%);
- bottom:80px;
- & .plat-block{
- position: absolute;
- top: -37px;
- left: 157px;
- }
- & .title-main{
- color: white;
- text-align: left;
- font-size: 35px;
- font-weight: 700;
- margin:30px 0 0 195px;
- }
- & .title-sub{
- font-size: 24px;
- margin-left: 280px;
- color: white;
- text-align: left;
- }
- & .eng-title{
- width: 200px;
- margin-left: 195px;
- font-size: 12px;
- color: white;
- text-align: left;
- }
- & .short-white-line{
- margin: 20px 0 0 195px;
- border: none;
- height: 2px;
- width: 45px;
- background-color: white;
- }
- & .introduce-block{
- position: absolute;
- left: 580px;
- top: 57px;
- font-size: 18px;
- color: white;
- line-height: 2;
- }
- }
- }
- .one-stop-container{
- width: 1200px;
- margin: 70px auto 0;
- & .intro-container{
- margin-top: 85px;
- margin-bottom: 70px;
- display: inline-flex;
- }
- }
- </style>
|