首页logo等

src/components/portal/LoginSystemBrand.vue

@@ -16,14 +16,16 @@ const wrapTitle = computed(() => lines.value.length === 1 && /[A-Za-z]/.test(pro
 
 <template>
   <aside class="login-page-wls__brand login-page-wls__brand--system" :aria-label="ariaLabel || '系统说明'">
-    <div class="login-page-wls__logo login-page-wls__logo--mark-only" aria-hidden="true">
-      <PortalBrandMark :logo-url="logoUrl" alt="" />
+    <div class="login-page-wls__brand-lockup">
+      <div class="login-page-wls__logo login-page-wls__logo--mark-only" aria-hidden="true">
+        <PortalBrandMark :logo-url="logoUrl" alt="" />
+      </div>
+      <h1 v-if="title.trim()" class="login-page-wls__title">
+        <span class="login-page-wls__title-main" :class="{ 'login-page-wls__title-main--wrap': wrapTitle }">
+          <span v-for="(line, i) in lines" :key="i" class="login-page-wls__title-line">{{ line }}</span>
+        </span>
+      </h1>
     </div>
-    <h1 v-if="title.trim()" class="login-page-wls__title">
-      <span class="login-page-wls__title-main" :class="{ 'login-page-wls__title-main--wrap': wrapTitle }">
-        <span v-for="(line, i) in lines" :key="i" class="login-page-wls__title-line">{{ line }}</span>
-      </span>
-    </h1>
     <p v-if="errorSlogan" class="login-page-wls__slogan login-page-wls__slogan--error">
       {{ errorSlogan }}
     </p>

src/styles/login-page-overrides.css

@@ -61,6 +61,10 @@ body.login-page-wls .login-page-wls__brand--system h1.login-page-wls__title {
   margin: 0;
 }
 
+body.login-page-wls--en .login-page-wls__brand--system .login-page-wls__title-main {
+  max-width: none;
+}
+
 body.login-page-wls .login-page-wls__logo-img {
   display: block;
   width: 72px;

src/styles/portal-brand.css

@@ -19,14 +19,22 @@ body.login-page-wls .login-page-wls__brand--system .portal-brand-mark {
 
 .login-page-wls__brand--system {
   display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.35rem;
+  max-width: min(42rem, 100%);
+}
+
+.login-page-wls__brand-lockup {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
-  flex-wrap: wrap;
-  gap: clamp(1rem, 2vw, 1.5rem);
-  max-width: 620px;
+  gap: clamp(0.85rem, 1.6vw, 1.35rem);
+  min-width: 0;
 }
 
 .login-page-wls__brand--system .login-page-wls__slogan {
-  flex: 1 0 100%;
   margin: 0.35rem 0 0;
 }
 
@@ -37,11 +45,14 @@ body.login-page-wls .login-page-wls__brand--system .portal-brand-mark {
 }
 
 .login-page-wls__brand--system .login-page-wls__title {
+  flex: 1 1 auto;
   min-width: 0;
   margin: 0;
 }
 
 .login-page-wls__brand--system .login-page-wls__title-main {
+  display: block;
+  max-width: none;
   font-size: clamp(1.42rem, 2.15vw, 1.85rem);
   line-height: 1.34;
   letter-spacing: 0.015em;
@@ -56,6 +67,17 @@ body.login-page-wls .login-page-wls__brand--system .portal-brand-mark {
   white-space: normal;
 }
 
+body.login-page-wls--en .login-page-wls__brand--system {
+  max-width: min(42rem, 100%);
+}
+
+body.login-page-wls--en .login-page-wls__brand--system .login-page-wls__title-main {
+  max-width: none;
+  font-size: clamp(1.08rem, 1.55vw, 1.38rem);
+  line-height: 1.28;
+  letter-spacing: -0.018em;
+}
+
 .header-brand {
   min-width: 0;
   display: flex;
@@ -109,8 +131,21 @@ html[lang="en"] .header-brand-name-en,
   display: block;
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 960px) {
   .login-page-wls__brand--system {
+    align-items: stretch;
+    text-align: left;
+    max-width: min(42rem, 100%);
+  }
+
+  .login-page-wls__brand-lockup {
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .login-page-wls__brand-lockup {
     gap: 0.75rem;
   }