<template>
|
<div class="home-page">
|
<!-- Header -->
|
<div class="header">
|
<div class="header-left">
|
<img src="@/assets/image/login_logo.png" alt="Wealthinfra" class="logo" />
|
<span class="logo-text">Bitget</span>
|
</div>
|
<div class="header-right">
|
<div class="lang-selector" @click="$router.push('/language')">
|
<span class="lang-text">{{ currentLangName }}</span>
|
</div>
|
<div class="icon-btn">
|
<img src="@/assets/image/notice.png" alt="notice" />
|
</div>
|
<div class="icon-btn" @click="$router.push('/my/index')">
|
<img src="@/assets/image/noticeMore.png" alt="menu" />
|
</div>
|
</div>
|
</div>
|
|
<!-- Hero Banner -->
|
<van-swipe class="hero-section" :autoplay="3000" indicator-color="#92D1FF">
|
<!-- 第一张：一应俱全的金融交易体验 -->
|
<van-swipe-item>
|
<div class="hero-card">
|
<h1 class="hero-title">{{ $t('home.heroTitle1') }}</h1>
|
<p class="hero-desc">{{ $t('home.heroFeatures1') }}</p>
|
<button class="trade-btn" @click="router.push('/trade/options')">
|
{{ $t('立即交易') }}
|
<img src="@/assets/image/but_to.png" alt="play" class="play-icon" />
|
</button>
|
<div class="hero-illustration">
|
<div class="device-illustration">
|
<img src="@/assets/image/home/banner_1.png" alt="">
|
</div>
|
</div>
|
</div>
|
</van-swipe-item>
|
|
<!-- 第二张：您可以信赖的经济人 -->
|
<van-swipe-item>
|
<div class="hero-card">
|
<h1 class="hero-title">{{ $t('home.heroTitle') }}</h1>
|
<p class="hero-desc">{{ $t('home.heroDesc') }}</p>
|
<button class="trade-btn" @click="router.push('/trade/options')">
|
{{ $t('立即交易') }}
|
<img src="@/assets/image/but_to.png" alt="play" class="play-icon" />
|
</button>
|
<div class="hero-illustration">
|
<div class="robot-illustration">
|
<img src="@/assets/image/home/banner_2.png" alt="">
|
</div>
|
</div>
|
</div>
|
</van-swipe-item>
|
|
<!-- 第三张：顶尖交易技术 -->
|
<van-swipe-item>
|
<div class="hero-card">
|
<h1 class="hero-title">{{ $t('home.heroTitle2') }}</h1>
|
<p class="hero-desc">{{ $t('home.heroDesc2') }}</p>
|
<button class="trade-btn" @click="router.push('/trade/options')">
|
{{ $t('立即交易') }}
|
<img src="@/assets/image/but_to.png" alt="play" class="play-icon" />
|
</button>
|
<div class="hero-illustration">
|
<div class="crypto-illustration">
|
<img src="@/assets/image/home/banner_3.png" alt="">
|
</div>
|
</div>
|
</div>
|
</van-swipe-item>
|
</van-swipe>
|
|
<div class="no-more-notice">
|
<img src="@/assets/image/notice.png" alt="bell" />
|
<span>No More</span>
|
<img src="@/assets/image/icon-right.png" alt="play" class="arrow" />
|
</div>
|
|
<!-- Quick Access -->
|
<div class="quick-access">
|
<div class="quick-item" @click="$router.push('/cryptos/recharge/rechargeList?isForeign=true')">
|
<div class="quick-icon">
|
<img src="@/assets/image/cz.png" alt="recharge" />
|
</div>
|
<span>{{ $t('recharge') }}</span>
|
</div>
|
<div class="quick-item" @click="$router.push('/cryptos/withdraw/withdrawPage?type=exchange')">
|
<div class="quick-icon">
|
<img src="@/assets/image/tx.png" alt="withdraw" />
|
</div>
|
<span>{{ $t('withdraw') }}</span>
|
</div>
|
<div class="quick-item" @click="$router.push('/cryptos/loan')">
|
<div class="quick-icon">
|
<img src="@/assets/image/dk.png" alt="loan" />
|
</div>
|
<span>{{ $t('home.loan') }}</span>
|
</div>
|
<div class="quick-item" @click="$router.push('/customerService')">
|
<div class="quick-icon">
|
<img src="@/assets/image/lxkf.png" alt="service" />
|
</div>
|
<span>{{ $t('ContactService') }}</span>
|
</div>
|
</div>
|
|
<!-- Market Overview -->
|
<div class="market-overview">
|
<div class="currency-cards">
|
<div class="currency-card" v-for="pair in currencyPairs" :key="pair.symbol"
|
@click="goToOptions(pair.symbol, pair.type)">
|
<div class="currency-info">
|
<div class="currency-pair-row">
|
<img v-if="getPairIconUrl(pair)" :src="getPairIconUrl(pair)" alt=""
|
class="currency-card-icon" />
|
<div class="currency-pair">{{ pair.symboltxt.toUpperCase() }}</div>
|
</div>
|
<div class="currency-price">{{ pair.price }}</div>
|
<div class="currency-change" :class="pair.change >= 0 ? 'up' : 'down'">
|
{{ pair.change >= 0 ? '+' : '' }}{{ pair.change }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Trading Instruments -->
|
<div class="trading-section">
|
<div class="trading-tabs">
|
<div class="tab-item" v-for="tab in marketTabs" :key="tab.value"
|
:class="{ active: activeTab === tab.value }" @click="switchTab(tab.value)">
|
{{ $t(tab.label) }}
|
</div>
|
</div>
|
<div class="trading-pairs">
|
<div class="pair-item" v-for="pair in tradingPairs" :key="pair.symbol"
|
@click="goToOptions(pair.symbol, pair.type)">
|
<div class="pair-header">
|
<div class="pair-symbol">
|
<img v-if="getPairIconUrl(pair)" :src="getPairIconUrl(pair)" alt=""
|
class="pair-symbol-icon" />
|
{{ (pair.symboltxt || pair.symbol || '').toUpperCase() }}
|
</div>
|
<div class="pair-change" :class="pair.change >= 0 ? 'up' : 'down'">
|
{{ pair.change >= 0 ? '+' : '' }}{{ pair.change.toFixed(4) }}%
|
</div>
|
</div>
|
<div class="pair-bottom">
|
<button class="sell">
|
<span class="action-price">{{ pair.sellPrice }}</span>
|
<span class="action-label action-btn ">{{ $t('卖出') }}</span>
|
</button>
|
<div class="pair-chart">
|
<MiniKlineChart :key="pair.symbol" :data="pair.klineData || []" :up="pair.change >= 0" />
|
</div>
|
<button class=" buy">
|
<span class="action-price">{{ pair.buyPrice }}</span>
|
<span class="action-label action-btn">{{ $t('买入') }}</span>
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- About Us -->
|
<div class="about-section">
|
<div class="section-header" @click="router.push('/aboutUs')">
|
<h2>{{ $t('关于我们') }}</h2>
|
<span class="more-link">{{ $t('More') }} ></span>
|
</div>
|
<div class="video-thumbnail" role="button">
|
<div class="video-placeholder">
|
<video class="home-video" :src="homeVideoUrl" controls preload="metadata" @click.stop></video>
|
</div>
|
</div>
|
<p class="about-desc">{{ $t('home.aboutDesc') }}</p>
|
<ul class="feature-list">
|
<li v-for="feature in features" :key="feature">{{ feature }}</li>
|
</ul>
|
</div>
|
|
<!-- News Section -->
|
<div class="news-section">
|
<div class="section-header" @click="router.push('/news')">
|
<h2>{{ $t('home.news') }}</h2>
|
<span class="more-link">{{ $t('More') }} ></span>
|
</div>
|
<div class="news-carousel">
|
<div class="news-item" v-for="(item, index) in newsList" :key="item.id || index"
|
@click="router.push('/news')">
|
<img v-if="item.urlToImage" :src="item.urlToImage" alt="" class="news-image" />
|
<div class="news-content">
|
<h3 class="news-title">{{ (item.title || stripHtml(item.description || '')).slice(0, 40) }}{{
|
(item.title || stripHtml(item.description || '')).length > 40 ? '...' : '' }}</h3>
|
<p class="news-excerpt">{{ stripHtml(item.description || '').slice(0, 80) }}{{
|
stripHtml(item.description || '').length > 80 ? '...' : '' }}</p>
|
</div>
|
</div>
|
<div class="news-item news-item--placeholder" v-if="!newsList.length">
|
<div class="news-content">
|
<h3 class="news-title">{{ $t('home.news') }}</h3>
|
<p class="news-excerpt">--</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Download Section -->
|
<div class="download-section">
|
<h2>{{ $t('home.tradeGlobalMarkets') }}</h2>
|
<p class="download-desc">{{ $t('home.downloadDesc') }}</p>
|
<button class="download-btn">
|
{{ $t('home.downloadNow') }}
|
</button>
|
<div class="phone-mockups">
|
<!-- Phone mockups placeholder -->
|
<img src="@/assets/image/home/download.b711f9a.png" alt="phone-mockups" />
|
</div>
|
</div>
|
|
<!-- Partners -->
|
<div class="partners-section">
|
<img src="@/assets/image/home/hezuo@3x.fcc1aa7.png" alt="partners" />
|
</div>
|
|
<!-- Footer Info -->
|
<div class="footer-info">
|
<div class="footer-left">
|
<div class="info-section">
|
<h3>{{ $t('home.company') }}</h3>
|
<ul>
|
<li>{{ $t('关于我们') }}</li>
|
<li>{{ $t('home.teamIntro') }}</li>
|
<li>{{ $t('帮助中心') }}</li>
|
<li>{{ $t('home.emailSupport') }}</li>
|
<li>support@1m.com</li>
|
</ul>
|
</div>
|
<div class="info-section">
|
<h3>{{ $t('home.statement') }}</h3>
|
<ul>
|
<li>{{ $t('home.riskDisclosure') }}</li>
|
<li>{{ $t('home.privacyStatement') }}</li>
|
<li>{{ $t('home.amlPolicy') }}</li>
|
<li>{{ $t('home.regulatoryLicense') }}</li>
|
</ul>
|
</div>
|
</div>
|
<div class="footer-right">
|
<div class="info-section">
|
<h3>{{ $t('home.policy') }}</h3>
|
<ul>
|
<li>{{ $t('home.userAgreement') }}</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { useRouter } from 'vue-router'
|
import { IMG_PATH } from '@/config'
|
import homeVideoUrl from '@/assets/video/home_video.mp4'
|
import { _getRealtimeByType } from '@/service/quotes.api'
|
import MiniKlineChart from '@/components/MiniKlineChart/index.vue'
|
|
import { _getUsHeadNews } from '@/service/user.api'
|
// import newsPlaceholder from '@/assets/image/news-placeholder.png'
|
|
const { t, locale } = useI18n()
|
const router = useRouter()
|
|
function stripHtml(html) {
|
if (!html || typeof html !== 'string') return ''
|
const div = document.createElement('div')
|
div.innerHTML = html
|
return (div.textContent || div.innerText || '').trim()
|
}
|
|
// 跳转到交易页 Options，并带上 symbol 与 activeTab
|
function goToOptions(symbol, type) {
|
if (!symbol) return
|
router.push({
|
path: '/trade/options',
|
query: { symbol, activeTab: type || activeTab.value }
|
})
|
}
|
|
const YOUTUBE_LINK = 'https://www.youtube.com/watch?v=eAL5XVQtrxo&source_ve_path=OTY3MTQ&embeds_referring_euri=https%3A%2F%2Fwealthinfra.com%2F'
|
function openYouTubeLink() {
|
window.open(YOUTUBE_LINK, '_blank', 'noopener,noreferrer')
|
}
|
|
// 语言映射表
|
const langMap = {
|
'de': 'Deutsch',
|
'en': 'English',
|
'es': 'Español',
|
'fr': 'Français',
|
'Italy': 'Italiano',
|
'Japanese': '日本語',
|
'Korean': '한국어',
|
'pt': 'Português',
|
'vi': 'Tiếng Việt',
|
'CN': '繁体中文',
|
'zh-CN': '简体',
|
'gr': 'Ελληνικά',
|
'th': 'ไทย'
|
}
|
|
// 获取当前语言名称
|
const currentLangName = computed(() => {
|
return langMap[locale.value] || '简体'
|
})
|
|
const tradingPairs = ref([])
|
const activeTab = ref('cryptos')
|
const marketTabs = [
|
{ label: '加密货币', value: 'cryptos' },
|
{ label: '股票', value: 'US-stocks' },
|
{ label: 'ETF', value: 'indices' },
|
{ label: '外汇', value: 'forex' },
|
]
|
// 新闻列表，用于横向滚动轮播（与 news/index.vue 同源：_getUsHeadNews）
|
const newsList = ref([])
|
|
// Market Overview 使用 Trading Instruments 的前3条数据（保留完整 pair 用于展示图标）
|
const currencyPairs = computed(() => tradingPairs.value.slice(0, 3))
|
|
function getPairIconUrl(pair) {
|
if (!pair) return ''
|
if (activeTab.value === 'US-stocks' || activeTab.value === 'indices') return ''
|
return pair.iconImg ? `${IMG_PATH}/symbol/${pair.iconImg}.png` : ''
|
}
|
|
function switchTab(tab) {
|
if (activeTab.value === tab) return
|
activeTab.value = tab
|
fetchTradingData()
|
}
|
|
// 获取交易数据
|
const fetchTradingData = async () => {
|
const type = activeTab.value
|
|
try {
|
const params = {
|
type: type,
|
pageNo: 1
|
}
|
|
const data = await _getRealtimeByType(params)
|
|
if (data && Array.isArray(data)) {
|
const list = data
|
// 只取前5条数据，并转换为需要的格式
|
tradingPairs.value = list.slice(0, 5).map(item => {
|
const basePrice = parseFloat(item.close || item.lastPrice || 0)
|
const changeRatio = item.changeRatio || 0
|
|
// 生成小型 K 线图数据 [open, close, low, high] 若干根
|
const klineData = generateMiniKlineData(basePrice, changeRatio)
|
|
// 计算买入价和卖出价（买入价略高，卖出价略低）
|
const spread = basePrice * 0.0001 // 很小的价差
|
const sellPrice = (basePrice - spread).toFixed(4)
|
const buyPrice = (basePrice + spread).toFixed(4)
|
const symboltxt = item.enName || item.name || item.symbol
|
const symbolStr = item.symbol || '--'
|
const iconImg = item.symbol_data || (symbolStr.includes('/') ? symbolStr.split('/')[0].toLowerCase() : symbolStr.replace(/USDT$/i, '').toLowerCase()) || symbolStr.toLowerCase()
|
return {
|
symboltxt,
|
symbol: symbolStr,
|
type,
|
iconImg,
|
price: basePrice.toFixed(4),
|
change: changeRatio,
|
sellPrice,
|
buyPrice,
|
klineData
|
}
|
})
|
} else {
|
tradingPairs.value = []
|
}
|
} catch (error) {
|
console.error('获取交易数据失败:', error)
|
tradingPairs.value = []
|
}
|
}
|
|
// 根据当前价与涨跌幅生成小型 K 线数据，每根 [open, close, low, high]
|
function generateMiniKlineData(basePrice, changeRatio) {
|
const candleCount = 12
|
const startPrice = basePrice / (1 + (changeRatio || 0) / 100)
|
const range = basePrice - startPrice
|
const candles = []
|
let prevClose = startPrice
|
for (let i = 0; i < candleCount; i++) {
|
const t = (i + 1) / candleCount
|
const trend = startPrice + range * t
|
const noise = (Math.random() - 0.5) * (Math.abs(range) * 0.15 + basePrice * 0.002)
|
const close = i === candleCount - 1 ? basePrice : Math.max(basePrice * 0.001, trend + noise)
|
const open = prevClose
|
const low = Math.min(open, close) - Math.random() * basePrice * 0.001
|
const high = Math.max(open, close) + Math.random() * basePrice * 0.001
|
candles.push([open, close, low, high])
|
prevClose = close
|
}
|
return candles
|
}
|
|
// 组件挂载时获取数据
|
onMounted(() => {
|
fetchTradingData()
|
_getUsHeadNews().then((data) => {
|
const list = Array.isArray(data) ? data : (data && data.articles) ? data.articles : []
|
newsList.value = list.slice(0, 10)
|
}).catch(() => { })
|
})
|
|
const features = ref([
|
t('home.feature1'),
|
t('home.feature2'),
|
t('home.feature3'),
|
t('home.feature4')
|
])
|
|
const partners = ref([
|
'BINANCE', 'coinbase', 'Stralishit', 'Bitazza',
|
'Vanguard', 'ETX Capital', 'Coinb', 'Bitbank Global',
|
'FOREX.com', 'Bitget', 'JFX', 'ICDX'
|
])
|
</script>
|
|
<style lang="scss" scoped>
|
.home-page {
|
min-height: 100vh;
|
background: #fff;
|
padding-bottom: 12rem;
|
}
|
|
/* Header */
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 1.5rem;
|
background: #fff;
|
box-shadow: 0 1px 3px 1.5px #00000020;
|
|
.header-left {
|
display: flex;
|
align-items: center;
|
gap: 1rem;
|
|
.logo {
|
width: 4rem;
|
height: 4rem;
|
}
|
|
.logo-text {
|
font-size: 2.25rem;
|
font-weight: 700;
|
color: $text_color;
|
}
|
}
|
|
.header-right {
|
display: flex;
|
align-items: center;
|
gap: 1.5rem;
|
|
.lang-selector {
|
padding: 0.5rem 1rem;
|
background: #f5f5f5;
|
border-radius: 0.5rem;
|
font-size: 1.5rem;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
|
&:hover {
|
background: #e8e8e8;
|
}
|
|
.lang-text {
|
color: $text_color;
|
}
|
}
|
|
.icon-btn {
|
width: 4rem;
|
height: 4rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
background: #f5f5f5;
|
cursor: pointer;
|
|
img {
|
width: 2rem;
|
height: 2rem;
|
}
|
}
|
}
|
}
|
|
/* Hero Section */
|
.hero-section {
|
border-radius: 2rem;
|
overflow: hidden;
|
margin: 0 auto;
|
box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.08);
|
width: calc(100% - 4rem);
|
margin-top: 3rem;
|
|
:deep(.van-swipe) {
|
border-radius: 2rem;
|
overflow: hidden;
|
}
|
|
:deep(.van-swipe-item) {
|
margin: 0 auto;
|
}
|
|
:deep(.van-swipe__indicator) {
|
background-color: rgba(255, 255, 255, 0.5);
|
width: 1rem;
|
height: 1rem;
|
margin: 0 0.5rem;
|
}
|
|
:deep(.van-swipe__indicator--active) {
|
background-color: #92D1FF;
|
}
|
|
.hero-card {
|
background: #fff;
|
border-radius: 2rem;
|
padding: 3rem;
|
min-height: 40rem;
|
display: flex;
|
flex-direction: column;
|
|
.hero-title {
|
font-size: 3.5rem;
|
font-weight: 700;
|
color: $text_color;
|
margin-bottom: 3rem;
|
margin-top: 1rem;
|
}
|
|
.hero-desc {
|
font-size: 2.5rem;
|
color: $text_color;
|
margin-bottom: 3rem;
|
line-height: 1.5;
|
}
|
|
.trade-btn {
|
background: #0a6bfa;
|
color: #fff;
|
border: none;
|
padding: 1rem 3rem;
|
border-radius: 5rem;
|
font-size: 3rem;
|
font-weight: 300;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 1rem;
|
cursor: pointer;
|
margin-bottom: 3rem;
|
|
.play-icon {
|
width: 4.5rem;
|
object-fit: contain;
|
}
|
}
|
|
.hero-illustration {
|
position: relative;
|
margin-bottom: 2rem;
|
|
.robot-illustration,
|
.device-illustration,
|
.crypto-illustration {
|
width: 100%;
|
border-radius: 1rem;
|
|
img {
|
width: 70%;
|
margin: 0 auto;
|
}
|
}
|
}
|
}
|
}
|
|
.no-more-notice {
|
display: flex;
|
align-items: center;
|
gap: 1rem;
|
margin: 2rem 1.5rem;
|
font-size: 2.5rem;
|
color: $text_color;
|
padding: 2rem;
|
background-color: #f6f6f6;
|
border-radius: 2rem;
|
|
img {
|
width: 2rem;
|
height: 2rem;
|
}
|
|
.arrow {
|
margin-left: auto;
|
width: 2rem;
|
height: auto;
|
}
|
}
|
|
/* Quick Access */
|
.quick-access {
|
display: flex;
|
justify-content: space-around;
|
padding: 3rem 0;
|
background: #fff;
|
box-shadow: 0rem 1rem 4rem 0rem rgba(0, 0, 0, .12);
|
margin: 3rem 1.5rem 4rem;
|
border-radius: 2rem;
|
|
.quick-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 0.5rem;
|
cursor: pointer;
|
width: 25%;
|
|
.quick-icon {
|
width: 5rem;
|
height: 5rem;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 100%;
|
object-fit: contain;
|
}
|
}
|
|
span {
|
font-size: 2rem;
|
color: $text_color;
|
}
|
}
|
}
|
|
/* Market Overview */
|
.market-overview {
|
padding: 3rem;
|
background: #fff;
|
|
|
.currency-cards {
|
display: flex;
|
gap: 1.5rem;
|
|
.currency-card {
|
flex: 1;
|
padding: 2rem;
|
background: #f9f9f9;
|
border-radius: 1rem;
|
display: flex;
|
flex-direction: column;
|
gap: 1rem;
|
text-align: center;
|
|
.currency-pair-row {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 0.5rem;
|
margin-bottom: 0.5rem;
|
}
|
|
.currency-card-icon-wrap {
|
position: relative;
|
flex-shrink: 0;
|
}
|
|
.currency-card-icon {
|
width: 3rem;
|
height: 3rem;
|
border-radius: 50%;
|
object-fit: cover;
|
|
&--large {
|
width: 3rem;
|
height: 3rem;
|
}
|
|
&--sm {
|
position: absolute;
|
right: -0.2rem;
|
bottom: -0.2rem;
|
width: 1.4rem;
|
height: 1.4rem;
|
border-radius: 50%;
|
object-fit: cover;
|
border: 0.15rem solid #fff;
|
box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
|
}
|
}
|
|
.currency-pair {
|
font-size: 2rem;
|
color: $text_color;
|
margin-bottom: 0;
|
}
|
|
.currency-price {
|
font-size: 2.5rem;
|
font-weight: 700;
|
color: $text_color;
|
margin-bottom: 1rem;
|
}
|
|
.currency-change {
|
font-size: 2rem;
|
font-weight: 600;
|
|
&.up {
|
color: $green;
|
}
|
|
&.down {
|
color: $red;
|
}
|
}
|
}
|
}
|
}
|
|
/* Trading Section */
|
.trading-section {
|
padding: 3rem;
|
background: #fff;
|
|
.trading-tabs {
|
display: flex;
|
align-items: center;
|
gap: 1.6rem;
|
margin-bottom: 3rem;
|
overflow-x: auto;
|
|
.tab-item {
|
padding: 1.3rem 1rem;
|
font-size: 2rem;
|
color: $text_color;
|
white-space: nowrap;
|
cursor: pointer;
|
border-radius: 999px;
|
transition: background-color 0.2s, color 0.2s;
|
|
&.active {
|
padding: 1.3rem 3.5rem;
|
background: #3478F6;
|
color: #fff;
|
font-weight: 600;
|
box-shadow: 0 0.2rem 0.6rem rgba(52, 120, 246, 0.35);
|
}
|
}
|
}
|
|
.trading-pairs {
|
display: flex;
|
flex-direction: column;
|
gap: 2rem;
|
|
.pair-item {
|
display: flex;
|
flex-direction: column;
|
padding: 2rem;
|
background: #fff;
|
border-radius: 1rem;
|
border: 0.1rem solid #f0f0f0;
|
|
.pair-header {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.pair-symbol {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 0.6rem;
|
font-size: 2rem;
|
font-weight: 600;
|
color: $text_color;
|
|
.pair-symbol-icon-wrap {
|
position: relative;
|
flex-shrink: 0;
|
}
|
|
.pair-symbol-icon {
|
width: 2.4rem;
|
height: 2.4rem;
|
border-radius: 50%;
|
// object-fit: contain;
|
|
&--large {
|
width: 3rem;
|
height: 3rem;
|
}
|
|
&--sm {
|
position: absolute;
|
right: -0.2rem;
|
bottom: -0.2rem;
|
width: 1.6rem;
|
height: 1.6rem;
|
border-radius: 50%;
|
object-fit: cover;
|
border: 0.15rem solid #fff;
|
box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
|
}
|
}
|
}
|
|
.pair-change {
|
font-size: 1.75rem;
|
font-weight: 600;
|
|
&.up {
|
color: $green;
|
}
|
|
&.down {
|
color: $red;
|
}
|
}
|
}
|
|
.pair-bottom {
|
display: flex;
|
align-items: center;
|
gap: 1rem;
|
position: relative;
|
top: -2.2rem;
|
|
.action-price {
|
font-size: 2rem;
|
font-weight: 600;
|
}
|
|
.action-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 0.3rem 5rem;
|
border: 0.1rem solid #333;
|
border-radius: 0.2rem;
|
font-size: 1.8rem;
|
background: #fff;
|
cursor: pointer;
|
min-width: 7rem;
|
gap: 0.5rem;
|
flex-shrink: 0;
|
|
|
.action-label {
|
font-size: 1.5rem;
|
}
|
|
&.sell {
|
.action-price {
|
color: $text_color;
|
}
|
|
.action-label {
|
color: $red;
|
}
|
}
|
|
&.buy {
|
.action-price {
|
color: $text_color;
|
}
|
|
.action-label {
|
color: $green;
|
}
|
}
|
|
&:hover {
|
background: #f9f9f9;
|
}
|
}
|
|
.pair-chart {
|
flex: 1;
|
height: 2.5rem;
|
margin: 0 0.5rem;
|
min-width: 6rem;
|
}
|
}
|
}
|
}
|
}
|
|
/* About Section */
|
.about-section {
|
padding: 3rem;
|
background: #fff;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 2rem;
|
|
h2 {
|
font-size: 2.25rem;
|
font-weight: 700;
|
color: $text_color;
|
}
|
|
.more-link {
|
font-size: 1.75rem;
|
cursor: pointer;
|
}
|
}
|
|
.video-thumbnail {
|
margin-bottom: 2rem;
|
cursor: pointer;
|
|
.video-placeholder {
|
width: 100%;
|
background: #1a1a1a;
|
border-radius: 1rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 1rem;
|
|
.home-video {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
border-radius: 1rem;
|
}
|
|
.play-button {
|
width: 6rem;
|
height: 6rem;
|
background: rgba(255, 255, 255, 0.9);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #000;
|
font-size: 2rem;
|
}
|
}
|
|
.video-info {
|
.video-title {
|
font-size: 1.75rem;
|
font-weight: 600;
|
color: $text_color;
|
margin-bottom: 0.5rem;
|
}
|
|
.video-platform {
|
font-size: 1.5rem;
|
color: $text_color1;
|
}
|
}
|
}
|
|
.about-desc {
|
font-size: 1.75rem;
|
color: $text_color1;
|
line-height: 1.5;
|
margin-bottom: 2rem;
|
}
|
|
.feature-list {
|
list-style: none;
|
padding: 0;
|
|
li {
|
font-size: 1.75rem;
|
color: $text_color1;
|
margin-bottom: 1rem;
|
padding-left: 3rem;
|
position: relative;
|
|
&::before {
|
content: '✓';
|
position: absolute;
|
left: 0;
|
color: $green;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
|
/* News Section */
|
.news-section {
|
padding: 3rem;
|
background: #fff;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 2rem;
|
|
h2 {
|
font-size: 2.25rem;
|
font-weight: 700;
|
color: $text_color;
|
}
|
|
.more-link {
|
font-size: 1.75rem;
|
color: $text-color;
|
cursor: pointer;
|
}
|
}
|
|
.news-carousel {
|
display: flex;
|
gap: 1.5rem;
|
overflow-x: auto;
|
overflow-y: hidden;
|
padding-bottom: 0.5rem;
|
scroll-snap-type: x mandatory;
|
-webkit-overflow-scrolling: touch;
|
|
&::-webkit-scrollbar {
|
height: 0.4rem;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #ccc;
|
border-radius: 0.2rem;
|
}
|
|
.news-item {
|
flex-shrink: 0;
|
width: 45rem;
|
min-width: 28rem;
|
display: flex;
|
flex-direction: column;
|
gap: 1rem;
|
padding: 1.5rem;
|
background: #f9f9f9;
|
border-radius: 1rem;
|
scroll-snap-align: start;
|
cursor: pointer;
|
|
&.news-item--placeholder {
|
min-width: 100%;
|
}
|
|
.news-image {
|
width: 100%;
|
height: 14rem;
|
border-radius: 0.5rem;
|
object-fit: cover;
|
}
|
|
.news-content {
|
flex: 1;
|
min-width: 0;
|
|
.news-title {
|
font-size: 1.75rem;
|
font-weight: 600;
|
color: $text_color;
|
margin-bottom: 1rem;
|
}
|
|
.news-excerpt {
|
font-size: 1.5rem;
|
color: $text_color1;
|
line-height: 1.4;
|
}
|
}
|
}
|
}
|
}
|
|
/* Download Section */
|
.download-section {
|
padding: 3rem;
|
background: #fff;
|
text-align: left;
|
box-shadow: 0rem .8rem 3.2rem 0rem rgba(0, 0, 0, .12);
|
border-radius: 1.6rem;
|
margin: 3rem 3rem;
|
|
h2 {
|
font-size: 3rem;
|
font-weight: 700;
|
color: $text_color;
|
margin-bottom: 2rem;
|
}
|
|
.download-desc {
|
font-size: 2.2rem;
|
color: $text_color;
|
margin-bottom: 3rem;
|
}
|
|
.download-btn {
|
background: #0a6bfa;
|
color: #fff;
|
border: none;
|
padding: 1.2rem 3rem;
|
border-radius: 1rem;
|
font-size: 2rem;
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
gap: 1rem;
|
cursor: pointer;
|
|
img {
|
width: 2.5rem;
|
height: 2.5rem;
|
}
|
}
|
|
.phone-mockups {
|
margin-top: 4rem;
|
border-radius: 1rem;
|
|
img {
|
width: 80%;
|
margin: 0 auto;
|
}
|
}
|
}
|
|
/* Partners */
|
.partners-section {
|
padding: 3rem;
|
background: #fff;
|
text-align: center;
|
|
img {
|
width: 100%;
|
max-width: 100%;
|
height: auto;
|
display: block;
|
}
|
}
|
|
/* Footer Info */
|
.footer-info {
|
padding: 3rem;
|
background: #fff;
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 4rem;
|
|
.footer-left {
|
display: flex;
|
flex-direction: column;
|
gap: 4rem;
|
}
|
|
.footer-right {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
position: relative;
|
}
|
|
.info-section {
|
h3 {
|
font-size: 2rem;
|
font-weight: 700;
|
color: $text_color;
|
margin-bottom: 2rem;
|
}
|
|
ul {
|
list-style: none;
|
padding: 0;
|
|
li {
|
font-size: 1.75rem;
|
color: $text_color1;
|
margin-bottom: 1rem;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
