boursecu_user/src/views/login/desktop/components/DesktopAuthShell.vue

<template>
  <div class="dauth dauth--boursecu">
    <div class="dauth-page-logo">
      <img :src="pageLogo" alt="بورس مس" class="dauth-page-logo__img">
    </div>

    <div class="dauth__layout">
      <div class="dauth-visual-col">
        <img
          :src="copperProducts"
          alt=""
          class="dauth-visual-col__products"
          loading="lazy"
        >
      </div>

      <section class="dauth-center-col" aria-label="معرفی بورس مس">
        <div class="dauth-center-col__body">
          <h1 class="dauth-center-col__headline">
            <span class="dauth-center-col__headline-line">به دنیای معاملات مس</span>
            <span class="dauth-center-col__headline-accent">خوش آمدید</span>
          </h1>
          <p class="dauth-center-col__lead">
            بورس مس مسیر خرید و فروش آنلاین مس را ساده، سریع و قابل اعتماد کرده است؛ با پشتوانه تولیدکنندگان واقعی.
          </p>
          <ul class="dauth-center-col__features">
            <li v-for="item in featureItems" :key="item.title" class="dauth-center-col__feature">
              <span class="dauth-center-col__feature-icon" aria-hidden="true">
                <BasicIcon :icon="item.icon" size="22" />
              </span>
              <div class="dauth-center-col__feature-text">
                <p class="dauth-center-col__feature-title">{{ item.title }}</p>
                <p class="dauth-center-col__feature-desc">{{ item.desc }}</p>
              </div>
            </li>
          </ul>
        </div>
        <p class="dauth-center-col__tagline">
          <span class="dauth-center-col__tagline-line" aria-hidden="true" />
          <span>مس، آینده‌ای مطمئن و...</span>
        </p>
      </section>

      <main class="dauth-form-panel">
        <div class="dauth-form-column">
          <div class="dauth-form-column__top">
            <slot />
          </div>
          <div class="dauth-form-column__foot">
            <nav class="dauth-form-links" aria-label="پیوندهای صفحه ورود">
              <span class="dauth-form-links__text">معاملات آتی</span>
              <span class="dauth-form-links__sep" aria-hidden="true">|</span>
              <span class="dauth-form-links__text">دسترسی به بازار</span>
              <span class="dauth-form-links__sep" aria-hidden="true">|</span>
              <button type="button" class="dauth-form-links__link dauth-form-links__link--accent" @click="goAboutUs">
                درباره مس
              </button>
              <span class="dauth-form-links__sep" aria-hidden="true">|</span>
              <button type="button" class="dauth-form-links__link" @click="onSupportClick">
                پشتیبانی
              </button>
            </nav>
            <div class="dauth-page-footer__status">
              <span class="dauth-page-footer__status-icon" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M4.5 16.2L9 12.2L11.6 14.6L17.2 7.8"
                    stroke="currentColor"
                    stroke-width="1.8"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M14.2 7.8H17.2V10.8"
                    stroke="currentColor"
                    stroke-width="1.8"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </span>
              <span>پلتفرم معاملات مس، در دسترس است</span>
            </div>
          </div>
        </div>
      </main>
    </div>

    <button
      type="button"
      class="dauth-form-support dauth-form-support--fab"
      :class="{ 'dauth-form-support--fab-dragging': supportDragging }"
      :style="supportFabStyle"
      title="پشتیبانی"
      @pointerdown="onSupportPointerDown"
      @pointermove="onSupportPointerMove"
      @pointerup="onSupportFabPointerUp"
      @pointercancel="onSupportPointerCancel"
    >
      <BasicIcon icon="vuesax-linear:headphone" size="16" />
      <span>پشتیبانی</span>
    </button>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { getProjectLoginLogo } from '@/utils/config'
import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
import copperProducts from '../../assets/img/login-copper-hero.webp'

const pageLogo = getProjectLoginLogo()

const {
  dragging: supportDragging,
  fabStyle: supportFabStyle,
  handlePointerDown: onSupportPointerDown,
  handlePointerMove: onSupportPointerMove,
  handlePointerUp: supportPointerUp,
  handlePointerCancel: onSupportPointerCancel,
} = useDraggableFloatingButton('boursecu_login_support_fab_v2', {
  width: 108,
  height: 40,
  defaultBottomGap: 28,
  defaultRightOffset: 24,
  fullViewport: true,
  ignoreBottomChrome: true,
})

const featureItems = [
  {
    icon: 'vuesax-linear:box',
    title: 'خرید و فروش کاتد، مفتول و سیم کابل',
    desc: 'با پشتوانه تولیدکننده واقعی',
  },
  {
    icon: 'vuesax-linear:refresh-circle',
    title: 'قابلیت تبدیل محصول',
    desc: 'از کاتد و مفتول به محصول نهایی (سیم و کابل)',
  },
  {
    icon: 'vuesax-linear:truck-tick',
    title: 'قابلیت تحویل فیزیکی',
    desc: 'به‌صورت مطمئن و برنامه‌ریزی‌شده',
  },
  {
    icon: 'vuesax-linear:shield-tick',
    title: 'قابلیت خرید اعتباری',
    desc: 'با شرایط منعطف و مطمئن',
  },
]

function onSupportClick() {
  void router.push({ name: 'support' })
}

function onSupportFabPointerUp(event: PointerEvent) {
  const clicked = supportPointerUp(event)
  if (!clicked) return
  onSupportClick()
}

function goAboutUs() {
  void router.push({ name: 'aboutUs' })
}
</script>

<style lang="less" src="../styles/desktop-auth.less"></style>