change login-page design

2026-10-06 13:38:35 +03:30
parent ab22c4dd63
commit cf8a46ec9c
35 changed files with 1377 additions and 188 deletions
@@ -1,66 +1,167 @@
 <template>
  <div class="dauth dauth--boursecu">
-    <div class="dauth__layout">
-      <main class="dauth-form-panel">
-        <slot />
-      </main>
+    <div class="dauth-page-logo">
+      <img :src="pageLogo" alt="بورس مس" class="dauth-page-logo__img">
+    </div>

-      <aside class="dauth-brand dauth-brand--boursecu">
-        <div class="dauth-brand__pattern" />
-        <div class="dauth-brand__content">
-          <img
-            :src="logo"
-            alt=""
-            class="dauth-brand__logo"
-          >
-          <h1 class="dauth-brand__title">{{ brandTitle }}</h1>
-          <p v-if="tagline" class="dauth-brand__tagline">{{ tagline }}</p>
-          <ul class="dauth-brand__features">
-            <li v-for="feature in features" :key="feature" class="dauth-brand__feature">
-              <span class="dauth-brand__feature-icon">
-                <BasicIcon icon="vuesax-linear:tick-circle" size="16" />
+    <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>
-              {{ feature }}
+              <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>
-        <div class="dauth-brand__footer">نسخه {{ version }}</div>
-      </aside>
+        <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>
+              <span class="dauth-form-links__text">پشتیبانی</span>
+            </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 { computed } from 'vue'
-import pkg from '../../../../../package.json'
-import { getDisplayAppVersion } from '@/config/config-cache'
+import router from '@/router'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import { useConfigStore } from '@/store/configStore'
-import {
-  getProjectDesktopLoginBrandLogo,
-  getProjectLoginTaglineLines,
-} from '@/utils/config'
+import { getProjectLoginLogo } from '@/utils/config'
+import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
+import copperProducts from '../../assets/img/login-copper-hero.jpg'

-const config = useConfigStore()
-const version = getDisplayAppVersion(pkg.version)
+const pageLogo = getProjectLoginLogo()

-const logo = computed(() => getProjectDesktopLoginBrandLogo(config.config?.avatar))
-
-const taglineLines = computed(() => getProjectLoginTaglineLines())
-const tagline = computed(() => {
-  if (taglineLines.value?.length) {
-    return taglineLines.value.join(' ')
-  }
-  return 'پلتفرم امن و سریع برای مدیریت دارایی و معاملات شما'
+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 brandTitle = computed(() => config.config?.name_fa ?? 'خوش آمدید')
-
-const features = [
-  'قیمت لحظه‌ای و نمودار بازار',
-  'مدیریت دارایی و کیف پول',
-  'معاملات سریع و امن',
+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>