set banner

src/views/base/assets/index.vue

@@ -13,6 +13,7 @@
 
     <div class="assets-page__body" :class="{ 'mpage-content': !isDesktop }">
       <section class="assets-top">
+        <div class="assets-chart-block">
         <article class="assets-card assets-chart">
           <div
             class="assets-chart__plot"
@@ -67,6 +68,22 @@
           </div>
         </article>
 
+        <nav class="assets-actions" aria-label="عملیات دارایی">
+          <button
+            v-for="action in assetActionItems"
+            :key="action.id"
+            type="button"
+            :class="{ 'is-main': action.primary }"
+            @click="go(action.routeName, action.query)"
+          >
+            <span v-if="action.iconSrc" class="assets-actions__icon">
+              <img :src="action.iconSrc" alt="" />
+            </span>
+            <span class="assets-actions__label">{{ action.label }}</span>
+          </button>
+        </nav>
+        </div>
+
         <article class="assets-card assets-balance">
           <span class="assets-balance__label">ارزش کل دارایی</span>
           <strong class="assets-balance__value">{{ usePrice(totalRialValue) }}</strong>
@@ -82,12 +99,14 @@
         </article>
       </section>
 
-      <nav class="assets-actions" aria-label="عملیات دارایی">
-        <button type="button" class="is-main" @click="go('wallet')">واریز</button>
-        <button type="button" @click="go('wallet')">برداشت</button>
-        <button type="button" @click="go('buyProduct')">معامله</button>
-        <button type="button" @click="go('transactions')">تراکنش‌ها</button>
-      </nav>
+      <button type="button" class="assets-banner-slot" @click="go('buyProduct')">
+        <img
+          :src="assetsCopperBanner"
+          alt="مس، قدم بعدی سبد دارایی شما — خرید و فروش شمش مس، ساده و آنلاین"
+          loading="lazy"
+          decoding="async"
+        />
+      </button>
 
       <section class="assets-card assets-table-wrap">
         <div class="assets-table-wrap__head">
@@ -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<string, string>
+  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<string, string>) {
+  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;
 }