ini

src/SimubusLanding.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import lottie from 'lottie-web'
 import { clearSession, loadSession, saveSession } from './services/auth'
@@ -320,6 +320,7 @@ const copy = {
     logoutTitle: 'Are you sure you want to log out?',
     logoutBody: 'Do you want to log out of Simubus as 3180349346@qq.com?',
     logoutAction: 'Log Out Of The Account',
+    topbarUnlock: 'unlock',
     cancel: 'Cancel',
     profileName: 'Andy',
     profileEmail: '56998882589@gmail.com',
@@ -329,8 +330,8 @@ const copy = {
   },
   zh: {
     login: '登录',
-    heroTitle: 'Simubus - 电路接线仿真软件',
-    heroSubtitle: '你的虚拟电路实验室。',
+    heroTitle: 'Simubus - 电气接线仿真软件',
+    heroSubtitle: '你的虚拟电气实验室。',
     iosDownload: 'iOS 下载',
     androidDownload: 'Android 下载',
     featureOneTitle: '交互式电路设计体验',
@@ -376,6 +377,7 @@ const copy = {
     logoutTitle: '确定要退出登录吗？',
     logoutBody: '你要退出 3180349346@qq.com 的 Simubus 账号吗？',
     logoutAction: '退出当前账号',
+    topbarUnlock: '解锁',
     cancel: '取消',
     profileName: 'Andy',
     profileEmail: '56998882589@gmail.com',
@@ -404,7 +406,7 @@ const messages = computed(() => copy[currentLocale.value])
 
           <div class="header-actions">
             <template v-if="isAuthenticated">
-              <button class="header-pro-badge" type="button" @click="openProDestination"><span class="header-pro-badge__prefix">unlock</span><span class="header-pro-badge__brand">Simubus PRO</span></button>
+              <button class="header-pro-badge" type="button" @click="openProDestination"><span class="header-pro-badge__prefix">{{ messages.topbarUnlock }}</span><span class="header-pro-badge__brand">Simubus PRO</span></button>
               <div class="header-profile-menu" @mouseenter="openProfileMenu" @mouseleave="closeProfileMenu">
                 <button class="header-avatar-button" type="button" @click="openProfileMenu">
                   <img class="header-avatar-image" :src="session?.avatarUrl || 'https://www.figma.com/api/mcp/asset/ad158d05-a000-4d0d-b32d-5e1881f01559'" alt="User avatar" />
@@ -593,7 +595,7 @@ const messages = computed(() => copy[currentLocale.value])
           <h2>{{ messages.quickLinksTitle }}</h2>
           <a>{{ messages.quickLinks[0] }}</a>
           <a>{{ messages.quickLinks[1] }}</a>
-          <a class="active">{{ messages.quickLinks[2] }}</a>
+          <a>{{ messages.quickLinks[2] }}</a>
           <a>{{ messages.quickLinks[3] }}</a>
           <a>{{ messages.quickLinks[4] }}</a>
         </section>
@@ -650,3 +652,5 @@ const messages = computed(() => copy[currentLocale.value])
     </div>
   </div>
 </template>
+
+

src/main.js

@@ -5,3 +5,4 @@ import './login-page.css'
 import './pro-page.css'
 
 createApp(App).mount('#app')
+

src/style.css

@@ -159,7 +159,6 @@ img {
   font-size: 16px;
   line-height: 1;
   display: inline-block;
-  transform: skewX(-12deg);
 }
 
 .login-btn {
@@ -622,6 +621,10 @@ img {
   line-height: 1.5;
 }
 
+.figma-footer a {
+  cursor: pointer;
+}
+
 .quick-links a {
   padding: 7px 0;
 }
@@ -635,7 +638,8 @@ img {
   padding: 2px 0;
 }
 
-.figma-footer .active {
+.figma-footer a:hover,
+.figma-footer a:focus-visible {
   color: var(--green);
 }
 
@@ -892,7 +896,105 @@ img {
   }
 }
 
-.login-modal--logout {
+.login-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(2, 21, 13, 0.38);
+  backdrop-filter: blur(6px);
+}
+
+.login-modal {
+  position: relative;
+  width: min(100%, 502px);
+  max-height: min(100vh - 48px, 760px);
+  overflow: auto;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
+}
+
+.login-modal__close {
+  position: absolute;
+  top: 20px;
+  right: 40px;
+  width: 28px;
+  height: 28px;
+  color: #222;
+  font-size: 24px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-modal__brand-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 77px;
+  margin-bottom: 8px;
+}
+
+.login-modal__brand-image {
+  width: 71px;
+  height: 70px;
+  object-fit: cover;
+}
+
+.login-modal__brand-group {
+  width: 196px;
+  height: auto;
+  margin-left: -20px;
+}
+
+.login-modal__title {
+  margin: 0;
+  color: #333;
+  text-align: center;
+  font-size: 33px;
+  font-weight: 600;
+  line-height: 1.33;
+}
+
+.login-modal__signin-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 17px;
+  width: 100%;
+  height: 66px;
+  margin-top: 20px;
+  border: 1px solid #eff1f3;
+  border-radius: 12px;
+  background: #fff;
+  color: #333;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.login-modal__signin-icon {
+  width: 35px;
+  height: 35px;
+  object-fit: contain;
+}
+
+.login-modal__legal {
+  margin: 54px 0 0;
+  color: #85908c;
+  text-align: center;
+  font-size: 15px;
+  line-height: 1.33;
+}
+
+.login-modal__legal a,
+.login-modal__footer-links a {
+  color: #07c585;
+}.login-modal--logout {
   width: min(100%, 440px);
   min-height: 414px;
   padding: 80px 40px 40px;
@@ -1020,7 +1122,6 @@ img {
   font-weight: 790;
   line-height: 1;
   display: inline-block;
-  transform: skewX(-12deg);
 }
 .header-avatar-button {
   width: 56px;
@@ -1148,9 +1249,10 @@ img {
 
 .header-profile-dropdown {
   position: absolute;
-  top: calc(100% + 2px);
+  top: 100%;
   right: 0;
   z-index: 20;
+  padding-top: 8px;
 }
 
 .header-profile-dropdown__card {
@@ -1243,3 +1345,13 @@ img {
   box-shadow: none;
   transform: none;
 }
+
+
+
+
+
+
+
+
+
+