You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
839 lines
22 KiB
839 lines
22 KiB
<template> |
|
<div> |
|
<nav-header border-style="full"></nav-header> |
|
|
|
<!-- 轮播图 --> |
|
<div class="home-big"> |
|
<el-carousel |
|
indicator-position="none" |
|
id="el-carousel" |
|
style="height: 500px;" |
|
> |
|
<el-carousel-item v-for="(lunbo, indexLun) in lunbo" :key="indexLun"> |
|
<a :href="lunbo.jumpUrl" target="_blank"> |
|
<img :src="fileUrl + lunbo.fileUrl" alt /> |
|
</a> |
|
</el-carousel-item> |
|
</el-carousel> |
|
</div> |
|
|
|
<!-- 公告 --> |
|
<div class="eurTitle2"> |
|
<div class="eurTitle"> |
|
{{ $t('price.index.index_notice') }}: |
|
<!-- 轮播 --> |
|
<swipe class="my-swipe"> |
|
<swipe-item |
|
class="slide" |
|
v-for="(gong, indexGao) in gongGao" |
|
:key="indexGao" |
|
> |
|
<a :href="'./footer/noticeValue?id=' + gong.id"> |
|
<!-- <span v-if="lantion == 'zh-HK'">{{gong.detailsHk}} - </span> --> |
|
<span v-if="lantion == 'zh-CN'">{{ gong.title }}</span> |
|
<!-- <span v-else-if="lantion == 'en'">{{gong.details}}</span> --> |
|
</a> |
|
</swipe-item> |
|
</swipe> |
|
</div> |
|
</div> |
|
|
|
<!-- BTC --> |
|
<div class="usdList"> |
|
<div |
|
class="usdItem" |
|
v-for="(item, index) in usdsLsit" |
|
:key="index" |
|
v-loading="loading" |
|
element-loading-background="rgba(0, 0, 0, 0.2)" |
|
> |
|
<!-- 跳转到交易中心,携带交易对 --> |
|
<a :href="'./trade?id=' + item.currencyPair"> |
|
<p>{{ item.currencyPair | splitV }}</p> |
|
<p class="green" v-if="item.percent >= 0"> |
|
{{ item.amount | formatV }} |
|
<span class="shang">↑</span> |
|
<!-- <span |
|
v-if="!currentrate" |
|
>{{ (item.amount * item.hkdAmount) | formatV }} HKD</span> |
|
<span |
|
v-else-if="currentrate == 'HKD'" |
|
>{{ (item.amount * item.hkdAmount) | formatV }} HKD</span> |
|
<span |
|
v-else-if="currentrate == 'USD'" |
|
>{{ (item.amount * item.usdAmount) | formatV }} USD</span> |
|
<span |
|
v-else-if="currentrate == 'CNY'" |
|
>{{ (item.amount * item.cnyAmount) | formatV }} CNY</span> |
|
<span v-else>{{ (item.amount * item.eurAmount) | formatV }} EUR</span>--> |
|
</p> |
|
<p class="red" v-else> |
|
{{ item.amount | formatV }} |
|
<span class="shang">↓</span> |
|
</p> |
|
<!-- 成交额 --> |
|
<p> |
|
<span>{{ $t('price.table.header_qulit') }}</span> |
|
{{ item.total | formatV }} |
|
</p> |
|
<div class="upData" v-if="item.percent >= 0"> |
|
+{{ (item.percent * 100) | formatW }}% |
|
</div> |
|
<div class="upData2" v-else> |
|
{{ (item.percent * 100) | formatW }}% |
|
</div> |
|
<div class="curreyBig">{{ item.currencyPair.split('-')[0] }}</div> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<!-- 涨幅度内容 --> |
|
<div class="bigRange"> |
|
<div |
|
class="rangeTable" |
|
v-loading="rangLoading" |
|
element-loading-background="rgba(0, 0, 0, 0.2)" |
|
> |
|
<!-- 涨幅度标题 --> |
|
<!-- 跌漲幅 --> |
|
<div class="upRange">{{ $t('price.index.index_heigth') }}</div> |
|
<!-- 标题 --> |
|
<div class="rangthead"> |
|
<span>#</span> |
|
<span>{{ $t('price.table.header_pair') }}</span> |
|
<span>{{ $t('price.table.header_last_price') }}</span> |
|
<span>{{ $t('price.table.header_last_high') }}</span> |
|
<span>{{ $t('price.table.header_last_low') }}</span> |
|
<span>{{ $t('price.index.index_num') }}</span> |
|
<span>{{ $t('price.table.header_last_change') }}</span> |
|
</div> |
|
<!-- 跳转到交易中心,携带交易对 --> |
|
<a :href="'./trade?id=' + name"> |
|
<div |
|
class="rangeTr" |
|
v-for="(ran, indexs) in rangeList" |
|
:key="indexs" |
|
@click="hangdelTrade(ran.currencyPair)" |
|
> |
|
<div class="rangeTd"> |
|
<span>{{ indexs + 1 }}</span> |
|
</div> |
|
<!-- 币种 --> |
|
<div class="rangeTd"> |
|
<!-- 过滤器 --> |
|
<span>{{ ran.currencyPair.split('-')[0] }}</span> |
|
<span>/</span> |
|
<span>{{ ran.currencyPair.split('-')[1] }}</span> |
|
</div> |
|
<!-- 最新价 --> |
|
<div class="rangeTd" v-if="ran.percent >= 0"> |
|
{{ ran.amount | formatV }} |
|
<span>/</span> |
|
<span v-if="ran.currencyPair == 'HFH-USDT'">0.1500 USD</span> |
|
<span v-else-if="!currentrate" |
|
>{{ (ran.amount * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'HKD'" |
|
>{{ (ran.amount * ran.hkdAmount) | formatV }} HKD</span |
|
> |
|
<span v-else-if="currentrate == 'USD'" |
|
>{{ (ran.amount * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'CNY'" |
|
>{{ (ran.amount * ran.cnyAmount) | formatV }} CNY</span |
|
> |
|
<span v-else |
|
>{{ (ran.amount * ran.eurAmount) | formatV }} EUR</span |
|
> |
|
</div> |
|
<div class="rangeTdPrice" v-else> |
|
{{ ran.amount | formatV }} |
|
<span>/</span> |
|
<span v-if="ran.currencyPair == 'HFH-USDT'">0.1500 USD</span> |
|
<span v-else-if="!currentrate" |
|
>{{ (ran.amount * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'HKD'" |
|
>{{ (ran.amount * ran.hkdAmount) | formatV }} HKD</span |
|
> |
|
<span v-else-if="currentrate == 'USD'" |
|
>{{ (ran.amount * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'CNY'" |
|
>{{ (ran.amount * ran.cnyAmount) | formatV }} CNY</span |
|
> |
|
<span v-else |
|
>{{ (ran.amount * ran.eurAmount) | formatV }} EUR</span |
|
> |
|
</div> |
|
<!-- 价格高 --> |
|
<div class="rangeTd"> |
|
{{ ran.highest | formatV }} |
|
<span>/</span> |
|
<span v-if="ran.currencyPair == 'HFH-USDT'">0.1500 USD</span> |
|
<span v-else-if="!currentrate" |
|
>{{ (ran.highest * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'HKD'" |
|
>{{ (ran.highest * ran.hkdAmount) | formatV }} HKD</span |
|
> |
|
<span v-else-if="currentrate == 'USD'" |
|
>{{ (ran.highest * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'CNY'" |
|
>{{ (ran.highest * ran.cnyAmount) | formatV }} CNY</span |
|
> |
|
<span v-else |
|
>{{ (ran.highest * ran.eurAmount) | formatV }} EUR</span |
|
> |
|
</div> |
|
<!-- 价格低 --> |
|
<div class="rangeTd"> |
|
{{ ran.lowest | formatV }} |
|
<span>/</span> |
|
<span v-if="ran.currencyPair == 'HFH-USDT'">0.1500 USD</span> |
|
<span v-else-if="!currentrate" |
|
>{{ (ran.lowest * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'HKD'" |
|
>{{ (ran.lowest * ran.hkdAmount) | formatV }} HKD</span |
|
> |
|
<span v-else-if="currentrate == 'USD'" |
|
>{{ (ran.lowest * ran.usdAmount) | formatV }} USD</span |
|
> |
|
<span v-else-if="currentrate == 'CNY'" |
|
>{{ (ran.lowest * ran.cnyAmount) | formatV }} CNY</span |
|
> |
|
<span v-else |
|
>{{ (ran.lowest * ran.eurAmount) | formatV }} EUR</span |
|
> |
|
</div> |
|
<!-- 24H量 --> |
|
<div class="rangeTd"> |
|
{{ ran.total | formatV }} |
|
<!-- <span>{{ $t('price.index.index_num') }}</span> --> |
|
</div> |
|
<!-- 涨跌幅 --> |
|
<div class="rangeTd" v-if="ran.percent >= 0"> |
|
+{{ (ran.percent * 100) | formatW }}% |
|
</div> |
|
<div class="button" v-else> |
|
{{ (ran.percent * 100) | formatW }}% |
|
</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<!-- icon图标 --> |
|
<div class="bigServe"> |
|
<div class="serve"> |
|
<!-- 法币交易 --> |
|
<div class="function"> |
|
<div> |
|
<img src="../assets/home/itctrade.png" alt /> |
|
</div> |
|
<div>{{ $t('price.index.index_iconOtc') }}</div> |
|
<div>{{ $t('price.index.index_iconOtcVal') }}</div> |
|
</div> |
|
<!-- 币币交易 --> |
|
<div class="function"> |
|
<div> |
|
<img src="../assets/home/bibitrade.png" alt /> |
|
</div> |
|
<div>{{ $t('price.index.index_iconBibi') }}</div> |
|
<div>{{ $t('price.index.index_iconBibiVal') }}</div> |
|
</div> |
|
<!-- 系统安全 --> |
|
<div class="function"> |
|
<div> |
|
<img src="../assets/home/systemSecurity.png" alt /> |
|
</div> |
|
<div>{{ $t('price.index.index_iconWin') }}</div> |
|
<div>{{ $t('price.index.index_iconWinVal') }}</div> |
|
</div> |
|
<!-- 专业客服 --> |
|
<div class="function"> |
|
<div> |
|
<img src="../assets/home/service.png" alt /> |
|
</div> |
|
<div>{{ $t('price.index.index_iconChar') }}</div> |
|
<div>{{ $t('price.index.index_iconCharVal') }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- 二维码 --> |
|
<div class="qrCode"> |
|
<img src="../assets/home/iPhone.png" alt /> |
|
<div class="qrCode-contant"> |
|
<div class="qrCode-char">{{ $t('price.index.index_here') }}</div> |
|
<div class="qrCode-main"> |
|
<div>{{ $t('price.index.index_app') }}</div> |
|
<div> |
|
<img src="../assets/home/qrcode.png" alt /> |
|
</div> |
|
<div>iOS & Android</div> |
|
</div> |
|
</div> |
|
</div> |
|
<Footer></Footer> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
// 引入子组件 |
|
import NavHeader from '@/components/common/header'; |
|
import Footer from '@/components/common/footer'; |
|
|
|
// 引入 wensocket 模块 监听数据变化 |
|
import SockJS from 'sockjs-client'; |
|
import Stomp from 'stompjs'; |
|
|
|
// 引入请求函数 |
|
import {getUsd, getRange, getCurrencyUrl} from '@/api/currency'; |
|
import {getGongGao, getLunbo} from '@/api/priceSysconf.js'; |
|
import {getCurrentLanguage} from '@/common/i18n'; |
|
import {FILE_URL} from '@/api/app'; |
|
|
|
// 引入汇率 |
|
import {getExchangeRateCookie} from '@/utils/auth'; |
|
|
|
export default { |
|
name: 'app', |
|
components: { |
|
NavHeader, |
|
Footer, |
|
}, |
|
data() { |
|
return { |
|
usdsLsit: [], |
|
rangeList: [], |
|
name: '', //交易对 |
|
websock: null, |
|
stompClient: '', |
|
timer: '', |
|
currentrate: '', |
|
gongGao: [], |
|
lunbo: [], |
|
loading: true, |
|
rangLoading: true, |
|
lantion: '', |
|
fileUrl: '', |
|
bannerHeight: 500, |
|
screenWidth: 1920, |
|
}; |
|
}, |
|
created() { |
|
// 获取图片地址 |
|
this.fileUrl = FILE_URL; |
|
|
|
this.lantion = getCurrentLanguage(); |
|
this.initGonggao(); |
|
this.initLunbo(); |
|
this.initUsdList(); |
|
this.initRange(); |
|
// 获取头部栏点击汇率 |
|
this.currentrate = getExchangeRateCookie(); |
|
}, |
|
mounted() { |
|
this.initWebSocket(); |
|
this.setSize1(); |
|
const that = this; |
|
//监听浏览器窗口大小改变 |
|
window.addEventListener( |
|
'resize', |
|
function() { |
|
var width = |
|
window.innerWidth || |
|
document.documentElement.clientWidth || |
|
document.body.clientWidth; |
|
that.screenWidth = width; |
|
that.setSize(); |
|
}, |
|
false |
|
); |
|
}, |
|
beforeDestroy: function() { |
|
// 页面离开时断开连接,清除定时器 |
|
this.disconnect(); |
|
clearInterval(this.timer); |
|
}, |
|
methods: { |
|
setSize1: function() { |
|
var width = |
|
window.innerWidth || |
|
document.documentElement.clientWidth || |
|
document.body.clientWidth; |
|
this.screenWidth = width; |
|
//图片 高 / 宽 500 / 1920 |
|
this.bannerHeight = (500 / 1920) * this.screenWidth - 4; |
|
document.getElementById('el-carousel').style.height = |
|
this.bannerHeight + 'px'; |
|
}, |
|
|
|
setSize: function() { |
|
this.bannerHeight = (500 / 1920) * this.screenWidth - 4; |
|
document.getElementById('el-carousel').style.height = |
|
this.bannerHeight + 'px'; |
|
}, |
|
|
|
// 监听数据变化,开始 |
|
initWebSocket() { |
|
this.connection(); |
|
}, |
|
// 訂閲 |
|
subscribeMarket() { |
|
let this_ = this; |
|
var websocketURL = '/topic/market'; |
|
this.subObjMarket = this.stompClientMarket.subscribe( |
|
websocketURL, |
|
function(data) { |
|
//订单返回的盘口数据 |
|
var subData = JSON.parse(data.body); |
|
// console.log(subData); |
|
|
|
for (let i = 0; i < this_.rangeList.length; i++) { |
|
if (subData.currencyPair == this_.rangeList[i].currencyPair) { |
|
// this_.initRange(); |
|
this_.rangeList[i] = subData; |
|
this_.rangeList.push(subData); |
|
this_.rangeList.pop(); |
|
for (let j = 0; j < this_.usdsLsit.length; j++) { |
|
if (subData.currencyPair == this_.usdsLsit[j].currencyPair) { |
|
// this_.initUsdList(); |
|
this_.usdsLsit[j] = subData; |
|
this_.usdsLsit.push(subData); |
|
this_.usdsLsit.pop(); |
|
return; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
); |
|
}, |
|
connection() { |
|
// 建立连接对象 |
|
let socket = new SockJS(getCurrencyUrl() + '/websocket'); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息 |
|
// 获取STOMP子协议的客户端对象 |
|
this.stompClientMarket = new Stomp.over(socket); |
|
this.stompClientMarket.debug = null; |
|
var this_ = this; |
|
this.stompClientMarket.connect({}, function(event) { |
|
//防止单个用户多次订阅 |
|
if (this_.subObjMarket == null) { |
|
this_.subscribeMarket(); |
|
} else { |
|
this_.subObjMarket.unsubscribe(); |
|
this_.subscribeMarket(); |
|
} |
|
}); |
|
|
|
//关闭事件触发重新链接 |
|
socket.onclose = function() { |
|
// this.connectionMarket(); |
|
}; |
|
}, //连接 后台 |
|
disconnect() { |
|
if (this.stompClient) { |
|
this.stompClient.disconnect(); |
|
} |
|
}, // 断开连接 |
|
// 监听数据变化,结束 |
|
|
|
// 获取BTC内容 |
|
initUsdList() { |
|
getUsd().then(res => { |
|
if (res.data.code === 200) { |
|
this.loading = false; |
|
this.usdsLsit = res.data.data; |
|
// console.log(this.usdsLsit); |
|
} |
|
}); |
|
}, |
|
// 获取涨幅度列表 |
|
initRange() { |
|
getRange().then(res => { |
|
if (res.data.code === 200) { |
|
this.rangLoading = false; |
|
// 需求,定死最后一行跌涨幅(永远在最后一行) |
|
// var rightPbj = { |
|
// currencyPair: 'HFH-USDT', |
|
// amount: '0.15', |
|
// highest: '0.15', |
|
// lowest: '0.15', |
|
// total: '0', |
|
// percent: '0', |
|
// }; |
|
|
|
this.rangeList = res.data.data; |
|
// this.rangeList.push(rightPbj); |
|
// console.log(this.rangeList); |
|
} |
|
}); |
|
}, |
|
// 点击获取交易对,方便跳转 |
|
hangdelTrade(name) { |
|
this.name = name; |
|
}, |
|
// 获取公告内容 |
|
initGonggao() { |
|
getGongGao().then(res => { |
|
// console.log(res.data.data.rows); |
|
this.gongGao = res.data.data.rows; |
|
}); |
|
}, |
|
// 获取轮播图 |
|
initLunbo() { |
|
getLunbo({type: 'PC'}).then(res => { |
|
// console.log(res.data.data.rows); |
|
this.lunbo = res.data.data.rows; |
|
// console.log(this.lunbo); |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
.home-big { |
|
// max-width: 100%; |
|
// min-width: 1180px; |
|
// height: 500px; |
|
.el-carousel__container { |
|
height: 100% !important; |
|
} |
|
|
|
img { |
|
display: inline-block; |
|
height: auto; |
|
max-width: 100%; |
|
} |
|
} |
|
p { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
.eurTitle2 { |
|
width: 100%; |
|
background-color: #23252b; |
|
} |
|
.eurTitle { |
|
margin: 0 auto; |
|
width: 1180px; |
|
height: 40px; |
|
line-height: 40px; |
|
font-size: 14px; |
|
color: #ffffff; |
|
display: flex; |
|
flex-direction: row; |
|
} |
|
|
|
.usdList { |
|
margin: 0 auto; |
|
width: 1180px; |
|
margin-top: 34px; |
|
// margin: 2% auto 0; |
|
display: flex; |
|
justify-content: space-between; |
|
.usdItem { |
|
width: 28.5%; |
|
// height: 120px; |
|
position: relative; |
|
background: rgba(43, 44, 53, 1); |
|
border: 1px solid rgba(71, 71, 71, 0.1); |
|
border-radius: 4px 4px 4px 4px; |
|
// padding: 21px 31px; |
|
p { |
|
margin-left: 30px; |
|
font-size: 16px; |
|
color: #fff; |
|
// margin-top: 9px; |
|
} |
|
p:nth-of-type(1) { |
|
margin-top: 21px; |
|
} |
|
p:nth-of-type(2) { |
|
font-size: 18px !important; |
|
margin-top: 17px; |
|
.shang { |
|
position: relative; |
|
top: -3px; |
|
left: -14px; |
|
} |
|
span { |
|
font-size: 18px; |
|
margin-left: 10px; |
|
} |
|
} |
|
p:nth-of-type(3) { |
|
margin-top: 13px; |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
color: #9ba0bc; |
|
span { |
|
margin-right: 10px; |
|
} |
|
} |
|
} |
|
.upData { |
|
font-size: 16px; |
|
color: #4db872; |
|
position: absolute; |
|
top: 16px; |
|
right: 22px; |
|
} |
|
.upData2 { |
|
font-size: 16px; |
|
color: #ee6560; |
|
position: absolute; |
|
top: 16px; |
|
right: 22px; |
|
} |
|
.curreyBig { |
|
font-size: 48px; |
|
font-weight: 500; |
|
color: rgba(155, 160, 188, 0.03); |
|
position: absolute; |
|
top: 62px; |
|
right: 22px; |
|
} |
|
} |
|
.green { |
|
color: #4db872 !important; |
|
} |
|
.red { |
|
color: #ee6560 !important; |
|
} |
|
|
|
.bigRange { |
|
margin: 0 auto; |
|
width: 1180px; |
|
margin-top: 40px; |
|
margin-bottom: 72px; |
|
background-color: #23242b; |
|
.rangeTable { |
|
.upRange { |
|
font-size: 16px; |
|
color: rgba(255, 255, 255, 1); |
|
padding: 16px 40px; |
|
background-color: #1f2026; |
|
} |
|
.rangeTr { |
|
display: flex; |
|
align-items: center; |
|
font-size: 14px; |
|
padding: 16px 40px; |
|
.rangeTd { |
|
font-size: 14px; |
|
&:nth-child(1) { |
|
width: 50px; |
|
color: #fff; |
|
} |
|
&:nth-child(2) { |
|
width: 150px; |
|
color: #9ba0bc; |
|
} |
|
&:nth-child(3) { |
|
flex: 2; |
|
font-size: 14px; |
|
color: #4db872; |
|
span { |
|
color: #545663; |
|
} |
|
} |
|
&:nth-child(4) { |
|
flex: 2; |
|
font-size: 14px; |
|
color: #9ba0bc; |
|
span { |
|
color: #545663; |
|
} |
|
} |
|
&:nth-child(5) { |
|
flex: 2; |
|
font-size: 14px; |
|
color: #9ba0bc; |
|
span { |
|
color: #545663; |
|
} |
|
} |
|
&:nth-child(6) { |
|
flex: 1; |
|
// width: 60px; |
|
font-size: 14px; |
|
color: #9ba0bc; |
|
} |
|
&:nth-child(7) { |
|
flex: 1; |
|
// width: 60px; |
|
font-size: 14px; |
|
color: #4db872; |
|
} |
|
} |
|
.rangeTdPrice { |
|
flex: 2; |
|
font-size: 14px; |
|
width: 150px; |
|
color: #ee6560; |
|
span { |
|
color: #545663; |
|
} |
|
} |
|
.button { |
|
flex: 1; |
|
font-size: 14px; |
|
color: #ee6560; |
|
} |
|
&:nth-of-type(2n + 1) { |
|
background-color: #1f2026; |
|
} |
|
} |
|
.rangthead { |
|
font-size: 14px; |
|
color: #545663; |
|
padding: 16px 40px; |
|
background-color: #23242b; |
|
display: flex; |
|
span:nth-of-type(1) { |
|
width: 50px; |
|
} |
|
span:nth-of-type(2) { |
|
width: 150px; |
|
} |
|
span:nth-of-type(3) { |
|
flex: 2; |
|
} |
|
span:nth-of-type(4) { |
|
flex: 2; |
|
} |
|
span:nth-of-type(5) { |
|
flex: 2; |
|
} |
|
span:nth-of-type(6) { |
|
flex: 1; |
|
} |
|
span:nth-of-type(7) { |
|
flex: 1; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.my-swipe { |
|
width: 70%; |
|
height: 40px; |
|
color: #fff; |
|
font-size: 14px; |
|
text-align: left; |
|
margin-left: 15px; |
|
} |
|
|
|
.slide { |
|
color: #fff; |
|
} |
|
.mint-swipe-indicators { |
|
display: none; |
|
} |
|
.bigServe { |
|
background-color: #15161a; |
|
padding-top: 61px; |
|
padding-bottom: 57px; |
|
.serve { |
|
width: 1180px; |
|
margin: 0 auto; |
|
display: flex; |
|
justify-content: space-around; |
|
.function { |
|
width: 168px; |
|
div:nth-of-type(1) { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
img { |
|
width: 60px; |
|
height: 60px; |
|
} |
|
} |
|
div:nth-of-type(2) { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 18px; |
|
color: rgba(255, 255, 255, 1); |
|
margin: 17px 0; |
|
} |
|
div:nth-of-type(3) { |
|
text-align: center; |
|
font-size: 14px; |
|
color: rgba(155, 160, 188, 1); |
|
} |
|
} |
|
} |
|
} |
|
.mint-swipe-item { |
|
a { |
|
color: #fff !important; |
|
&:hover { |
|
color: #fff !important; |
|
} |
|
} |
|
} |
|
.qrCode { |
|
margin: 0 auto; |
|
width: 1180px; |
|
display: flex; |
|
// justify-content: center; |
|
// align-items: center; |
|
flex-direction: row; |
|
img { |
|
margin-left: 223px; |
|
margin-top: 76px; |
|
width: 327px; |
|
height: 414px; |
|
} |
|
&-contant { |
|
margin-top: 172px; |
|
margin-left: 61px; |
|
} |
|
&-char { |
|
font-size: 36px; |
|
font-weight: 400; |
|
color: #ffffff; |
|
} |
|
&-main { |
|
width: 130px; |
|
margin-top: 38px; |
|
|
|
div:nth-of-type(1) { |
|
font-size: 14px; |
|
color: #fff; |
|
} |
|
div:nth-of-type(2) { |
|
margin: 12px 0; |
|
background-color: #fff; |
|
width: 105px; |
|
height: 105px; |
|
position: relative; |
|
img { |
|
position: absolute; |
|
top: -73px; |
|
left: -220px; |
|
width: 100px; |
|
height: 100px; |
|
} |
|
} |
|
div:nth-of-type(3) { |
|
font-size: 14px; |
|
color: #9ba0bc; |
|
} |
|
} |
|
} |
|
// .mint-swipe-indicators { |
|
// margin-bottom: 20px; |
|
// } |
|
// .mint-swipe-indicator { |
|
// margin: 0 5px; |
|
// } |
|
</style>
|
|
|