17 changed files with 986 additions and 5 deletions
|
After Width: | Height: | Size: 751 B |
|
After Width: | Height: | Size: 567 B |
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
<v-header :title="$t('base.h5')"></v-header> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,517 @@ |
|||
<template> |
|||
<view class="d-flex flex-col"> |
|||
<v-header class="nav_bar" :title="$t('base.h4')"></v-header> |
|||
<view class="layout-main"> |
|||
<scroll-view scroll-y="true" class="scroll_height"> |
|||
<view class="container"> |
|||
|
|||
<!-- 1. 顶部全局切换 Tab --> |
|||
<view class="global-tabs"> |
|||
<view |
|||
class="tab-item" |
|||
:class="{ active: mainTab === 'stock' }" |
|||
@click="switchMainTab('stock')" |
|||
> |
|||
<text>{{$t('automation.a3')}}</text> |
|||
<view class="line" v-if="mainTab === 'stock'"></view> |
|||
</view> |
|||
<view |
|||
class="tab-item" |
|||
:class="{ active: mainTab === 'crypto' }" |
|||
@click="switchMainTab('crypto')" |
|||
> |
|||
<text>{{$t('automation.a4')}}</text> |
|||
<view class="line" v-if="mainTab === 'crypto'"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 2. 黑色资产信息面板 --> |
|||
<view class="black-panel"> |
|||
<view class="panel-header"> |
|||
<view class="title-box"> |
|||
<text class="title">{{$t('automation.a1')}}</text> |
|||
<text class="subtitle">{{$t('automation.a2')}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="asset-grid"> |
|||
<view class="grid-item w-60"> |
|||
<text class="label">{{$t('automation.a5')}}</text> |
|||
<text class="value">{{ currentAccount.total }} {{ currency }}</text> |
|||
</view> |
|||
<view class="grid-item w-40 text-right" @click="goToRecord"> |
|||
<text class="link-text">{{$t('automation.a6')}} ></text> |
|||
</view> |
|||
|
|||
<view class="grid-item w-60 mt-20"> |
|||
<text class="label">{{$t('automation.a7')}}</text> |
|||
<text class="value">{{ currentAccount.usable }} {{ currency }}</text> |
|||
</view> |
|||
<view class="grid-item w-40 mt-20 text-right"> |
|||
<text class="label">{{$t('automation.a8')}}</text> |
|||
<text class="value text-green">{{ currentAccount.todayProfit }} {{ currency }}</text> |
|||
</view> |
|||
|
|||
<view class="grid-item w-60 mt-20"> |
|||
<text class="label">{{$t('automation.a32')}}</text> |
|||
<text class="value text-green">{{ currentAccount.totalProfit }} {{ currency }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="action-buttons"> |
|||
<view class="action-btn" @click="openModal('deposit')">{{$t('automation.a10')}} ></view> |
|||
<view class="action-btn" @click="openModal('withdraw')">{{$t('automation.a11')}} ></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 3. 白色内容区域 --> |
|||
<view class="white-panel"> |
|||
<!-- 内部 Tab --> |
|||
<view class="sub-tabs"> |
|||
<view |
|||
class="sub-tab-item" |
|||
:class="{ active: subTab === 'market' }" |
|||
@click="subTab = 'market'" |
|||
> |
|||
{{$t('automation.a33')}} |
|||
</view> |
|||
<view class="sub-tab-item right-tab"> |
|||
<v-link class="tolink" tag="view" to="/pages/ellasAlpha/history"> |
|||
<text class="icon-history">🕒</text> {{$t('automation.a12')}} |
|||
</v-link> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 市场列表 --> |
|||
<view class="list-container" v-if="subTab === 'market'"> |
|||
<view class="list-header"> |
|||
<text class="col-name">{{ mainTab === 'stock' ? $t('automation.a3') : $t('automation.a13') }}</text> |
|||
<text class="col-price">{{$t('automation.a14')}}</text> |
|||
<text class="col-change">{{$t('automation.a15')}}</text> |
|||
</view> |
|||
|
|||
<view class="list-row" v-for="(item, index) in currentList" :key="index"> |
|||
<view class="col-name row-flex"> |
|||
<!-- 占位图标 --> |
|||
<view class="coin-icon" :style="{ backgroundColor: item.color }">{{ item.symbol.charAt(0) }}</view> |
|||
<view class="coin-info"> |
|||
<text class="coin-name">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="col-price"> |
|||
<text class="price-text">{{ item.price }}</text> |
|||
</view> |
|||
<view class="col-change"> |
|||
<text :class="['change-text', item.change > 0 ? 'text-green' : 'text-red']"> |
|||
{{ item.change > 0 ? '+' : '' }}{{ item.change }}% |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 历史订单 --> |
|||
<!-- <view class="history-container" v-if="subTab === 'history'"> |
|||
<view class="empty-state">暫無資料</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
<!-- ================= 弹窗遮罩与内容 ================= --> |
|||
<view class="modal-mask" v-if="modalType !== ''" @click="closeModal"></view> |
|||
|
|||
<view class="modal-content" v-if="modalType !== ''"> |
|||
<view class="modal-header"> |
|||
<text class="modal-title">{{ modalType === 'deposit' ? $t('automation.a10') : $t('automation.a11') }}</text> |
|||
<text class="modal-close" @click="closeModal">✕</text> |
|||
</view> |
|||
|
|||
<view class="modal-body"> |
|||
<view class="input-label"> |
|||
<text class="text-red">*</text> <text>{{$t('common.money')}}</text> |
|||
</view> |
|||
<input |
|||
class="amount-input" |
|||
type="digit" |
|||
:placeholder="$t('automation.a31')" |
|||
v-model="formAmount" |
|||
/> |
|||
|
|||
<!-- 存入资金的提示 --> |
|||
<view class="tips-box" v-if="modalType === 'deposit'"> |
|||
<text class="tip-text">{{$t('automation.a5')}}: {{ currentAccount.total }} {{ currency }}</text> |
|||
<text class="tip-text">{{$t('automation.a28')}}: {{ currency }}</text> |
|||
</view> |
|||
|
|||
<!-- 提取资金的提示 --> |
|||
<view class="tips-box" v-if="modalType === 'withdraw'"> |
|||
<text class="tip-text">{{$t('common.d22')}}: {{ currentAccount.usable }} {{ currency }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="modal-footer"> |
|||
<view class="btn-cancel" @click="closeModal">{{$t('automation.a29')}}</view> |
|||
<view class="btn-confirm" @click="confirmAction">{{$t('automation.a30')}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mainTab: 'stock', // 'stock' 或 'crypto' |
|||
subTab: 'market', // 'market' 或 'history' |
|||
modalType: '', // '' | 'deposit' | 'withdraw' |
|||
formAmount: '', |
|||
|
|||
// 账户资产数据 |
|||
accountData: { |
|||
stock: { |
|||
total: '0.00', |
|||
usable: '0.00', |
|||
todayProfit: '0.00', |
|||
totalProfit: '0.00' |
|||
}, |
|||
crypto: { |
|||
total: '209,000.00', |
|||
usable: '90,000.00', |
|||
todayProfit: '0.00', |
|||
totalProfit: '0.00' |
|||
} |
|||
}, |
|||
|
|||
// 列表数据 |
|||
marketData: { |
|||
stock: [ |
|||
{ name: 'Micron Technology...', symbol: 'MU', price: '996.00', change: -7.74, color: '#2980b9' }, |
|||
{ name: 'Nvidia Corp', symbol: 'NVDA', price: '218.66', change: 1.82, color: '#27ae60' }, |
|||
{ name: 'Broadcom Inc. Com...', symbol: 'AVGO', price: '418.91', change: -12.59, color: '#c0392b' }, |
|||
{ name: 'Marvell Technology', symbol: 'MRVL', price: '316.43', change: 4.90, color: '#8e44ad' }, |
|||
{ name: 'Alphabet Inc. Class ...', symbol: 'GOOGL', price: '372.19', change: 3.68, color: '#f39c12' }, |
|||
{ name: 'Advanced Micro De...', symbol: 'AMD', price: '523.20', change: -3.56, color: '#34495e' }, |
|||
], |
|||
crypto: [ |
|||
{ name: 'SOL/USDC', symbol: 'SOL', price: '65.40', change: -5.26, color: '#000000' }, |
|||
{ name: 'BTC/USDC', symbol: 'BTC', price: '62,533.25', change: -1.61, color: '#f39c12' }, |
|||
{ name: 'GALA/USDC', symbol: 'GALA', price: '0.00', change: -5.19, color: '#7f8c8d' }, |
|||
{ name: 'FIL/USDC', symbol: 'FIL', price: '0.78', change: -8.95, color: '#3498db' }, |
|||
{ name: 'GRT/USDC', symbol: 'GRT', price: '0.02', change: -6.22, color: '#9b59b6' }, |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
currency() { |
|||
return this.mainTab === 'stock' ? 'USDT' : 'USDC'; |
|||
}, |
|||
currentAccount() { |
|||
return this.accountData[this.mainTab]; |
|||
}, |
|||
currentList() { |
|||
return this.marketData[this.mainTab]; |
|||
} |
|||
}, |
|||
methods: { |
|||
switchMainTab(tab) { |
|||
this.mainTab = tab; |
|||
}, |
|||
openModal(type) { |
|||
this.formAmount = ''; |
|||
this.modalType = type; |
|||
}, |
|||
closeModal() { |
|||
this.modalType = ''; |
|||
}, |
|||
confirmAction() { |
|||
if (!this.formAmount) { |
|||
uni.showToast({ title: this.$t("automation.a31"), icon: 'none' }); |
|||
return; |
|||
} |
|||
uni.showToast({ title: this.$t("assets.e4"), icon: 'success' }); |
|||
this.closeModal(); |
|||
}, |
|||
goToRecord() { |
|||
// uni.showToast({ title: '跳轉到資金記錄', icon: 'none' }); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 基础容器，允许原生滚动 */ |
|||
.container { |
|||
min-height: 100vh; |
|||
background-color: #ffffff; |
|||
padding-bottom: 50rpx; /* 底部留白 */ |
|||
} |
|||
.scroll_height{ |
|||
height: calc(100vh - 45px); |
|||
} |
|||
|
|||
/* ================= 1. 顶部 Tab ================= */ |
|||
.global-tabs { |
|||
display: flex; |
|||
background-color: #ffffff; |
|||
height: 90rpx; |
|||
} |
|||
.tab-item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 30rpx; |
|||
color: #999; |
|||
position: relative; |
|||
} |
|||
.tab-item.active { |
|||
color: #333; |
|||
font-weight: bold; |
|||
} |
|||
.tab-item .line { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 60rpx; |
|||
height: 6rpx; |
|||
background-color: #000; |
|||
border-radius: 4rpx; |
|||
} |
|||
|
|||
/* ================= 2. 黑色面板 ================= */ |
|||
.black-panel { |
|||
background-color: #000000; |
|||
color: #ffffff; |
|||
padding: 40rpx 30rpx; |
|||
} |
|||
.panel-header { |
|||
margin-bottom: 40rpx; |
|||
} |
|||
.title { |
|||
font-size: 44rpx; |
|||
font-weight: bold; |
|||
display: block; |
|||
} |
|||
.subtitle { |
|||
font-size: 24rpx; |
|||
color: #aaaaaa; |
|||
margin-top: 10rpx; |
|||
display: block; |
|||
} |
|||
|
|||
/* 资产网格布局 */ |
|||
.asset-grid { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
.grid-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.w-60 { width: 60%; } |
|||
.w-40 { width: 40%; } |
|||
.mt-20 { margin-top: 30rpx; } |
|||
.text-right { text-align: right; align-items: flex-end; } |
|||
|
|||
.label { |
|||
font-size: 24rpx; |
|||
color: #aaaaaa; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.value { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.link-text { |
|||
font-size: 24rpx; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
/* 操作按钮 */ |
|||
.action-buttons { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
margin-top: 20rpx; |
|||
padding-top: 30rpx; |
|||
/* border-top: 1rpx solid #333333; */ |
|||
} |
|||
.action-btn { |
|||
font-size: 28rpx; |
|||
color: #ffffff; |
|||
padding: 10rpx 40rpx; |
|||
} |
|||
|
|||
/* ================= 3. 白色面板区域 ================= */ |
|||
.white-panel { |
|||
background-color: #ffffff; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
/* 内部 Tabs */ |
|||
.sub-tabs { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 0; |
|||
/* border-bottom: 1rpx solid #eeeeee; */ |
|||
} |
|||
.sub-tab-item { |
|||
font-size: 30rpx; |
|||
color: #666666; |
|||
} |
|||
.sub-tab-item.active { |
|||
color: #333333; |
|||
} |
|||
.right-tab { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #999999; |
|||
} |
|||
.icon-history { |
|||
margin-right: 10rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* 列表头部 */ |
|||
.list-header { |
|||
display: flex; |
|||
padding: 20rpx 0; |
|||
font-size: 26rpx; |
|||
color: #999999; |
|||
border-bottom: 1rpx solid #f5f5f5; |
|||
} |
|||
.col-name { flex: 4; } |
|||
.col-price { flex: 3; text-align: left; } |
|||
.col-change { flex: 2; text-align: right; } |
|||
|
|||
/* 列表行 */ |
|||
.list-row { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 30rpx 0; |
|||
border-bottom: 1rpx solid #f9f9f9; |
|||
} |
|||
.row-flex { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.coin-icon { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.coin-name { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
.price-text { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
.change-text { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* 颜色公共类 */ |
|||
.text-green { color: #00d26a; } |
|||
.text-red { color: #ff4d4f; } |
|||
|
|||
/* 历史记录空状态 */ |
|||
.empty-state { |
|||
text-align: center; |
|||
padding: 100rpx 0; |
|||
color: #999999; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* ================= 4. 弹窗样式 ================= */ |
|||
.modal-mask { |
|||
position: fixed; |
|||
top: 0; left: 0; right: 0; bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
z-index: 998; |
|||
} |
|||
.modal-content { |
|||
position: fixed; |
|||
top: 50%; left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 85%; |
|||
background-color: #ffffff; |
|||
border-radius: 20rpx; |
|||
z-index: 999; |
|||
overflow: hidden; |
|||
} |
|||
.modal-header { |
|||
position: relative; |
|||
text-align: center; |
|||
padding: 40rpx 0 20rpx; |
|||
} |
|||
.modal-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
.modal-close { |
|||
position: absolute; |
|||
right: 30rpx; |
|||
top: 30rpx; |
|||
font-size: 40rpx; |
|||
color: #999; |
|||
} |
|||
.modal-body { |
|||
padding: 20rpx 40rpx; |
|||
} |
|||
.input-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.amount-input { |
|||
height: 80rpx; |
|||
border: 1rpx solid #dddddd; |
|||
border-radius: 10rpx; |
|||
padding: 0 20rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.tips-box { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.tip-text { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-top: 10rpx; |
|||
} |
|||
.modal-footer { |
|||
display: flex; |
|||
padding: 40rpx; |
|||
justify-content: space-between; |
|||
} |
|||
.btn-cancel, .btn-confirm { |
|||
width: 46%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
border-radius: 10rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
.btn-cancel { |
|||
border: 2rpx solid #2979ff; |
|||
color: #2979ff; |
|||
background-color: #fff; |
|||
} |
|||
.btn-confirm { |
|||
background-color: #2979ff; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue