feat(ui): 江苏商贸品牌视觉与首页/登录页改版

liu

2026-09-29 982c97ab82f3beb1b4febcf014562eda34b9fc05

 src/packages/effects/layouts/src/authentication/authentication.vue

@@ -7,7 +7,6 @@

import { Copyright } from '../basic/copyright';
import AuthenticationFormView from './form.vue';
import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue';

interface Props {
@@ -103,34 +102,39 @@
      </div>
    </slot>

    <!-- 系统介绍 -->
    <!-- 系统介绍：校园夜景插画铺满 + 左下角品牌文案 -->
    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
      <div
        class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
      >
        <div class="login-background absolute top-0 left-0 size-full"></div>
        <!-- 手绘校园插画；外部传入 sloganImage 时优先用外部图 -->
        <img
          v-if="sloganImage"
          alt=""
          class="campus-illustration"
          :src="sloganImage"
        />
        <img
          v-else
          alt=""
          class="campus-illustration"
          src="/static/imgs/jssm-campus.svg"
        />
        <!-- 压暗叠层：底部加重，保证文字可读 -->
        <div class="campus-overlay"></div>
        <div class="academic-bg-pattern"></div>

        <div
          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
          class="mr-20 flex-col-center h-full"
          class="campus-content"
          :class="{
            'enter-x': authPanelLeft,
            '-enter-x': authPanelRight,
          }"
        >
          <template v-if="sloganImage">
            <img
              :alt="appName"
              :src="sloganImage"
              class="h-64 w-2/5 animate-float"
            />
          </template>
          <SloganIcon v-else :alt="appName" class="h-64 w-2/5 animate-float" />
          <div class="text-1xl mt-6 font-sans text-foreground lg:text-2xl">
            {{ pageTitle }}
          </div>
          <div class="mt-2 dark:text-muted-foreground">
            {{ pageDescription }}
          </div>
          <div class="campus-rule"></div>
          <div class="academic-brand-title">{{ pageTitle }}</div>
          <div class="academic-brand-desc">{{ pageDescription }}</div>
        </div>
      </div>
    </div>
@@ -138,6 +142,8 @@
    <!-- 中心认证面板 -->
    <div v-if="authPanelCenter" class="relative flex-center w-full">
      <div class="login-background absolute top-0 left-0 size-full"></div>
      <!-- 学术风装饰网格背景 -->
      <div class="academic-bg-pattern"></div>
      <AuthenticationFormView
        class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
        data-side="bottom"
@@ -172,25 +178,85 @@
</template>

<style scoped>
.login-background {
  background: linear-gradient(
    154deg,
    #07070915 30%,
    hsl(var(--primary) / 30%) 48%,
    #07070915 64%
/* 校园插画铺满左侧品牌区；object-position 略偏上，保住建筑主体 */
.campus-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

/* 叠层：底部压暗给文字，左侧略暗以突出白色标题 */
.campus-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 24, 44, 0.12) 0%,
      rgba(8, 24, 44, 0.22) 42%,
      rgba(8, 24, 44, 0.86) 100%
    ),
    linear-gradient(
      90deg,
      rgba(8, 24, 44, 0.4) 0%,
      rgba(8, 24, 44, 0) 58%
  );
  filter: blur(100px);
}

/* 装饰网格：压到几乎不可见的金色细线 */
.academic-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

/* 品牌文案：定位到左下角 */
.campus-content {
  position: absolute;
  bottom: 68px;
  left: 56px;
  z-index: 10;
  max-width: 64%;
}

/* 标题上方的金色短横线 */
.campus-rule {
  width: 46px;
  height: 2px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e3c567, #b8901f);
}

/* 品牌区标题：米白，阴影收敛以保持庄重 */
.academic-brand-title {
  color: #f5f0e4 !important;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 5px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.academic-brand-desc {
  margin-top: 12px;
  color: rgba(212, 175, 55, 0.85) !important;
  font-size: 13.5px;
  letter-spacing: 3px;
}

.dark {
  .login-background {
    background: linear-gradient(
      154deg,
      #07070915 30%,
      hsl(var(--primary) / 20%) 48%,
      #07070915 64%
    );
    filter: blur(100px);
  .academic-bg-pattern {
    background-image:
      linear-gradient(rgba(212, 175, 55, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212, 175, 55, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
  }
}
</style>