diff --git a/src/assets/img/assets-copper-banner.webp b/src/assets/img/assets-copper-banner.webp new file mode 100644 index 0000000..2bca27e Binary files /dev/null and b/src/assets/img/assets-copper-banner.webp differ diff --git a/src/views/base/assets/index.vue b/src/views/base/assets/index.vue index 1105db5..1cea440 100644 --- a/src/views/base/assets/index.vue +++ b/src/views/base/assets/index.vue @@ -13,6 +13,7 @@
+
+ +
+
ارزش کل دارایی {{ usePrice(totalRialValue) }} @@ -82,12 +99,14 @@
- +
@@ -134,6 +153,47 @@ import { } from '@/utils/productAssets' import type { WalletMetalTotal } from '@/models/walletAssets' import { useAssetsPortfolioChart } from './composables/useAssetsPortfolioChart' +import assetsCopperBanner from '@/assets/img/assets-copper-banner.webp' +import { getBoursecuActionIconSrc } from '@/utils/config' + +type AssetActionItem = { + id: string + label: string + routeName: string + query?: Record + primary?: boolean + iconSrc?: string +} + +const assetActionItems: AssetActionItem[] = [ + { + id: 'deposit', + label: 'واریز', + routeName: 'wallet', + query: { state: 'deposit' }, + primary: true, + iconSrc: getBoursecuActionIconSrc('wallet'), + }, + { + id: 'withdraw', + label: 'برداشت', + routeName: 'wallet', + query: { state: 'withdraw' }, + iconSrc: getBoursecuActionIconSrc('wallet'), + }, + { + id: 'trade', + label: 'معامله', + routeName: 'buyProduct', + iconSrc: getBoursecuActionIconSrc('buySell'), + }, + { + id: 'transactions', + label: 'تراکنش‌ها', + routeName: 'transactions', + iconSrc: getBoursecuActionIconSrc('transactions'), + }, +] const isDesktop = useDesktopBreakpoint() const { assetsSummary, loadWalletAssets } = useWalletAssets() @@ -235,8 +295,8 @@ function assetsMetalLabel(metal: WalletMetalTotal): string { return assetsDisplayText(resolveMetalAssetsDisplayLabel(metal)) } -function go(name: string) { - router.push({ name }) +function go(name: string, query?: Record) { + router.push(query ? { name, query } : { name }) } onMounted(async () => { @@ -291,12 +351,38 @@ onMounted(async () => { gap: 0.75rem; } +.assets-chart-block { + display: flex; + flex-direction: column; + gap: 0.55rem; + min-width: 0; +} + @media (min-width: 768px) { .assets-top { grid-template-columns: 1.15fr 0.85fr; + align-items: start; } } +.assets-banner-slot { + display: block; + width: 100%; + padding: 0; + border: 0; + background: transparent; + border-radius: 22px; + overflow: hidden; + cursor: pointer; +} + +.assets-banner-slot img { + display: block; + width: 100%; + height: auto; + object-fit: cover; +} + .assets-card { background: #fff; border: 1px solid color-mix(in srgb, @App-primary-color 14%, #fff); @@ -444,6 +530,45 @@ onMounted(async () => { gap: 0.45rem; } +.assets-actions button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + min-width: 0; + overflow: visible; +} + +.assets-actions__icon { + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + flex-shrink: 0; + overflow: visible; +} + +.assets-actions__icon img { + width: 100%; + height: 100%; + object-fit: contain; + transform: scale(2.25); +} + +.assets-actions button.is-main .assets-actions__icon { + background: #fff; + border-radius: 999px; + overflow: hidden; +} + +.assets-actions__label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .assets-table-wrap { padding: 0.9rem; }