vue2-client 1.22.30 → 1.22.31

package/src/base-client/components/his/Login/index.vue

@@ -0,0 +1,781 @@
+<template>
+  <div class="scale-wrapper">
+    <div class="page-container">
+      <!-- 背景层 -->
+      <div class="bg-rect-685"></div>
+      <div class="bg-annotation3"></div>
+      <div class="decorative-stripes">
+        <div
+          v-for="n in 28"
+          :key="n"
+          class="stripe"
+          :class="{ 'stripe-no-blur': isNoBlurStripe(n) }"
+          :style="{ left: `calc(${n - 1} * (100% / 28))` }"
+        ></div>
+      </div>
+
+      <!-- 上下结构主体 -->
+      <div class="main-layout">
+        <!-- 上部区域 -->
+        <div class="top-section">
+          <div class="brand-group">
+            <img src="~@/assets/img/hisLogo.png" alt="芯蕊智能" class="brand-logo-img" />
+          </div>
+
+          <!-- 动态系统标题 + 下拉箭头 -->
+          <div class="his-system-title" @click="toggleHisDropdown">
+            {{ currentSystemName }}
+            <span class="his-dropdown-arrow">
+              <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
+                <path d="M9 6L15 12L9 18" stroke="#94979E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </span>
+          </div>
+          <div v-if="hisDropdownOpen" class="dropdown-menu his-dropdown-menu">
+            <div
+              v-for="sys in systemList"
+              :key="sys.code"
+              class="dropdown-item"
+              :class="{ active: currentSystem.code === sys.code }"
+              @click="selectSystem(sys)"
+            >
+              {{ sys.name }}
+            </div>
+          </div>
+
+          <div class="welcome-cn">欢迎使用芯蕊智能医疗系统</div>
+          <div class="welcome-en">Welcome to log in to Xinrui Intelligent Medical System</div>
+          <div class="divider-line"></div>
+        </div>
+
+        <!-- 下部区域（毛玻璃基底） -->
+        <div class="bottom-section">
+          <div class="rect-112"></div>
+
+          <!-- 登录卡片 -->
+          <div class="login-card">
+            <!-- 人员选择（高度 50px） -->
+            <div class="form-item" @click.stop="toggleUserDropdown">
+              <div class="select-box user-row">
+                <div class="user-avatar-mini" v-if="selectedUser">
+                  <div class="avatar-circle" v-if="selectedUser.avatar">
+                    <img :src="selectedUser.avatar" class="avatar-img" />
+                  </div>
+                  <div class="avatar-circle default-avatar" v-else></div>
+                  <span class="online-dot"></span>
+                </div>
+                <span class="select-text">{{ selectedUser ? selectedUser.name : '请选择人员' }}</span>
+                <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 6L15 12L9 18" stroke="#94979E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </div>
+              <div v-if="userDropdownOpen" class="dropdown-menu dropdown-relative">
+                <div
+                  v-for="user in filteredUsers"
+                  :key="user.code"
+                  class="dropdown-item"
+                  :class="{ active: selectedUser && selectedUser.code === user.code }"
+                  @click.stop="selectUser(user)"
+                >
+                  <div class="avatar-circle" v-if="user.avatar">
+                    <img :src="user.avatar" class="dropdown-avatar" />
+                  </div>
+                  <div class="avatar-circle default-avatar-small" v-else></div>
+                  {{ user.name }} - {{ user.title }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 职位筛选（高度 32px） -->
+            <div class="form-item" @click.stop="togglePositionDropdown">
+              <div class="select-box">
+                <span class="select-label">职位</span>
+                <span class="select-text">{{ filterPosition || '全部' }}</span>
+                <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 6L15 12L9 18" stroke="#94979E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </div>
+              <div v-if="positionDropdownOpen" class="dropdown-menu dropdown-relative">
+                <div class="dropdown-item" :class="{ active: !filterPosition }" @click.stop="setFilterPosition('')">全部</div>
+                <div
+                  v-for="pos in positionList"
+                  :key="pos"
+                  class="dropdown-item"
+                  :class="{ active: filterPosition === pos }"
+                  @click.stop="setFilterPosition(pos)"
+                >
+                  {{ pos }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 科室筛选（高度 32px） -->
+            <div class="form-item" @click.stop="toggleDeptDropdown">
+              <div class="select-box">
+                <span class="select-label">科室选择</span>
+                <span class="select-text">{{ filterDept || '全部' }}</span>
+                <svg class="arrow-icon" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 6L15 12L9 18" stroke="#94979E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </div>
+              <div v-if="deptDropdownOpen" class="dropdown-menu dropdown-relative">
+                <div class="dropdown-item" :class="{ active: !filterDept }" @click.stop="setFilterDept('')">全部</div>
+                <div
+                  v-for="dept in deptList"
+                  :key="dept"
+                  class="dropdown-item"
+                  :class="{ active: filterDept === dept }"
+                  @click.stop="setFilterDept(dept)"
+                >
+                  {{ dept }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 密码（高度 32px） -->
+            <div class="form-item password-item">
+              <input
+                :type="passwordVisible ? 'text' : 'password'"
+                :placeholder="passwordVisible ? '请输入密码' : '••••••••••'"
+                class="password-input"
+                v-model="actualPassword"
+                @focus="onPasswordFocus"
+                @blur="onPasswordBlur"
+                @keyup.enter="handleLogin"
+              />
+              <div class="password-toggle" @click.stop="togglePasswordVisibility">
+                <svg v-if="!passwordVisible" viewBox="0 0 24 24" fill="none">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="#848484" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <circle cx="12" cy="12" r="3" stroke="#848484" stroke-width="2" />
+                </svg>
+                <svg v-else viewBox="0 0 24 24" fill="none">
+                  <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94" stroke="#848484" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19" stroke="#848484" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <line x1="1" y1="1" x2="23" y2="23" stroke="#848484" stroke-width="2" stroke-linecap="round" />
+                </svg>
+              </div>
+            </div>
+
+            <!-- 医师编码（高度 32px） -->
+            <div class="form-item doctor-code-row">
+              <span class="input-label">医师编码：</span>
+              <input
+                type="text"
+                class="disabled-input"
+                :value="selectedUser ? selectedUser.doctorCode : ''"
+                disabled
+                placeholder="自动回显"
+              />
+            </div>
+
+            <!-- 登录按钮 -->
+            <div class="login-btn-wrap" @click="handleLogin">
+              <div class="login-btn">
+                <span class="login-btn-text">登录</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="copyright">©版权所有 2024-2026 XINRUI 芯蕊智能 . All Rights Reserved.</div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="toastMsg" class="toast">{{ toastMsg }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginPage',
+  data() {
+    return {
+      // 系统列表
+      systemList: [],
+      currentSystem: { code: '', name: 'HIS SYSTEM' },
+      // 用户相关
+      allUsers: [],
+      selectedUser: null,
+      filterPosition: '',
+      filterDept: '',
+      actualPassword: '',
+      passwordVisible: false,
+      // 下拉状态
+      hisDropdownOpen: false,
+      userDropdownOpen: false,
+      positionDropdownOpen: false,
+      deptDropdownOpen: false,
+      toastMsg: '',
+      isPasswordFocused: false
+    }
+  },
+  computed: {
+    currentSystemName() {
+      return this.currentSystem.name || 'HIS SYSTEM'
+    },
+    positionList() {
+      return [...new Set(this.allUsers.map(u => u.title))]
+    },
+    deptList() {
+      return [...new Set(this.allUsers.map(u => u.deptName))]
+    },
+    filteredUsers() {
+      let list = this.allUsers
+      if (this.filterPosition) {
+        list = list.filter(u => u.title === this.filterPosition)
+      }
+      if (this.filterDept) {
+        list = list.filter(u => u.deptName === this.filterDept)
+      }
+      return list
+    }
+  },
+  methods: {
+    isNoBlurStripe(index) {
+      return index === 9 || index === 12 || index === 17
+    },
+    // 获取系统列表（模拟，实际替换为 API）
+    async fetchSystems() {
+      // 示例：this.systemList = (await this.$http.get('/api/systems')).data
+      this.systemList = [
+        { code: 'his', name: 'HIS SYSTEM' },
+        { code: 'backup', name: '备用系统' }
+      ]
+      if (this.systemList.length) {
+        this.currentSystem = { ...this.systemList[0] }
+      }
+    },
+    // 选择系统
+    selectSystem(sys) {
+      this.currentSystem = { ...sys }
+      this.hisDropdownOpen = false
+      this.showToast(`已切换至: ${sys.name}`)
+    },
+    async fetchUsers() {
+      this.allUsers = [
+        {
+          name: '刘文军',
+          code: '1001',
+          title: '主任医师',
+          deptName: '心血管内科',
+          deptCode: 'D001',
+          doctorCode: '652106958140237',
+          avatar: 'http://192.168.50.67:31567/resource/af-system/images/17aa33361e4548988f72669756c7d965.jpg'
+        },
+        {
+          name: '张明华',
+          code: '1002',
+          title: '副主任医师',
+          deptName: '神经内科',
+          deptCode: 'D002',
+          doctorCode: '652106958140238',
+          avatar: 'http://192.168.50.67:31567/resource/af-system/images/17aa33361e4548988f72669756c7d965.jpg'
+        },
+        {
+          name: '李芳',
+          code: '1003',
+          title: '主治医师',
+          deptName: '心血管内科',
+          deptCode: 'D001',
+          doctorCode: '652106958140239',
+          avatar: 'http://192.168.50.67:31567/resource/af-system/images/17aa33361e4548988f72669756c7d965.jpg'
+        }
+      ]
+    },
+    selectUser(user) {
+      this.selectedUser = { ...user }
+      this.userDropdownOpen = false
+    },
+    setFilterPosition(pos) {
+      this.filterPosition = pos
+      this.positionDropdownOpen = false
+      this.selectedUser = null
+    },
+    setFilterDept(dept) {
+      this.filterDept = dept
+      this.deptDropdownOpen = false
+      this.selectedUser = null
+    },
+    toggleHisDropdown() {
+      this.closeOtherDropdowns('his')
+      this.hisDropdownOpen = !this.hisDropdownOpen
+    },
+    toggleUserDropdown() {
+      this.closeOtherDropdowns('user')
+      this.userDropdownOpen = !this.userDropdownOpen
+    },
+    togglePositionDropdown() {
+      this.closeOtherDropdowns('position')
+      this.positionDropdownOpen = !this.positionDropdownOpen
+    },
+    toggleDeptDropdown() {
+      this.closeOtherDropdowns('dept')
+      this.deptDropdownOpen = !this.deptDropdownOpen
+    },
+    closeAllDropdowns() {
+      this.hisDropdownOpen = false
+      this.userDropdownOpen = false
+      this.positionDropdownOpen = false
+      this.deptDropdownOpen = false
+    },
+    closeOtherDropdowns(type) {
+      if (type !== 'his') this.hisDropdownOpen = false
+      if (type !== 'user') this.userDropdownOpen = false
+      if (type !== 'position') this.positionDropdownOpen = false
+      if (type !== 'dept') this.deptDropdownOpen = false
+    },
+    togglePasswordVisibility() {
+      this.passwordVisible = !this.passwordVisible
+    },
+    onPasswordFocus() {
+      this.isPasswordFocused = true
+    },
+    onPasswordBlur() {
+      this.isPasswordFocused = false
+    },
+    handleLogin() {
+      if (!this.selectedUser) return this.showToast('请选择人员')
+      if (!this.actualPassword) return this.showToast('请输入密码')
+      this.showToast(`登录中... 人员编码: ${this.selectedUser.code}`)
+    },
+    showToast(msg) {
+      this.toastMsg = msg
+      setTimeout(() => { this.toastMsg = '' }, 2200)
+    },
+    handleClickOutside(e) {
+      const dropdowns = this.$el.querySelectorAll('.dropdown-menu')
+      let inside = false
+      dropdowns.forEach(menu => {
+        if (menu.contains(e.target)) inside = true
+      })
+      const triggers = this.$el.querySelectorAll('.select-box, .his-system-title')
+      triggers.forEach(el => {
+        if (el.contains(e.target)) inside = true
+      })
+      if (!inside) {
+        this.closeAllDropdowns()
+      }
+    }
+  },
+  mounted() {
+    this.fetchSystems()
+    this.fetchUsers()
+    document.addEventListener('click', this.handleClickOutside)
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside)
+  }
+}
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.scale-wrapper {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+.page-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #f0f4fc;
+  overflow: hidden;
+}
+
+.bg-rect-685 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 87, 254, 0.3);
+  filter: blur(827px);
+  pointer-events: none;
+}
+
+.bg-annotation3 {
+  position: absolute;
+  left: calc(51 / 1920 * 100vw);
+  top: 0;
+  width: calc(1200 / 1920 * 100vw);
+  height: calc(938 / 1080 * 100vh);
+  background: url('~@/assets/img/80359c35a5465167cb25ff87bab49035d041a65558b35-YJOr3x.png') no-repeat;
+  background-size: 100% 100%;
+  pointer-events: none;
+}
+
+.decorative-stripes {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.stripe {
+  position: absolute;
+  width: calc(100% / 28);
+  height: 100%;
+  background: linear-gradient(92deg, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.05) 85%);
+  -webkit-backdrop-filter: blur(60px);
+  backdrop-filter: blur(60px);
+}
+
+.stripe-no-blur {
+  mix-blend-mode: normal;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: linear-gradient(92deg, rgba(255, 255, 255, 0.25) 12%, rgba(255, 255, 255, 0) 81%);
+}
+
+.main-layout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.top-section {
+  flex: 0 0 calc(597 / 1080 * 100vh);
+  position: relative;
+}
+
+.bottom-section {
+  flex: 0 0 calc(483 / 1080 * 100vh);
+  position: relative;
+}
+
+.rect-112 {
+  position: absolute;
+  left: calc(-17 / 1920 * 100vw);
+  top: 0;
+  width: calc(100% + (34 / 1920 * 100vw));
+  height: 100%;
+  background: rgba(255, 255, 255, 0.3);
+  -webkit-backdrop-filter: blur(245px);
+  backdrop-filter: blur(245px);
+  pointer-events: none;
+}
+
+/* 品牌标识 */
+.brand-group {
+  position: absolute;
+  left: calc(103 / 1920 * 100vw);
+  top: calc(120 / 1080 * 100vh);
+  width: calc(163 / 1920 * 100vw);
+  height: calc(53.36 / 1080 * 100vh);
+}
+
+.brand-logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 系统标题（整合箭头） */
+.his-system-title {
+  position: absolute;
+  left: calc(1756 / 1920 * 100vw);
+  top: calc(38 / 1080 * 100vh);
+  font-size: calc(14 / 1920 * 100vw);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #3a3a4a;
+  white-space: nowrap;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.his-dropdown-arrow {
+  display: flex;
+  align-items: center;
+}
+
+/* 箭头图标：11px，比标题略小 */
+.arrow-icon {
+  width: calc(11 / 1920 * 100vw);
+  height: calc(11 / 1080 * 100vh);
+  transform: rotate(90deg);
+  transition: transform 0.2s;
+}
+
+.welcome-cn {
+  position: absolute;
+  left: calc(1328 / 1920 * 100vw);
+  top: calc(446 / 1080 * 100vh);
+  font-size: calc(28 / 1920 * 100vw);
+  font-weight: 700;
+  color: #0057FE;
+}
+
+.welcome-en {
+  position: absolute;
+  left: calc(1328 / 1920 * 100vw);
+  top: calc(491 / 1080 * 100vh);
+  font-size: calc(16 / 1920 * 100vw);
+  color: #0057FE;
+}
+
+.divider-line {
+  position: absolute;
+  left: calc(1118 / 1920 * 100vw);
+  top: calc(595 / 1080 * 100vh);
+  width: 41.77%;
+  height: 2px;
+  background: linear-gradient(90deg, #0057fe 0%, rgba(0, 87, 254, 0) 100%);
+}
+
+/* 登录卡片 */
+.login-card {
+  position: absolute;
+  left: calc(1328 / 1920 * 100vw);
+  top: calc(35 / 1080 * 100vh);
+  width: calc(281 / 1920 * 100vw);
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: calc(7 / 1920 * 100vw);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
+  padding: calc(20 / 1920 * 100vw) calc(8 / 1920 * 100vw) calc(10 / 1920 * 100vw);
+  display: flex;
+  flex-direction: column;
+  gap: calc(15 / 1080 * 100vh);
+}
+
+.form-item {
+  position: relative;
+}
+
+.select-box,
+.password-item,
+.doctor-code-row {
+  display: flex;
+  align-items: center;
+  border-radius: calc(7 / 1920 * 100vw);
+  padding: 0 calc(10 / 1920 * 100vw);
+}
+
+.user-row {
+  height: calc(50 / 1080 * 100vh);
+  background: rgba(255,255,255,0.6);
+  cursor: pointer;
+  gap: calc(8 / 1920 * 100vw);
+}
+
+.select-box:not(.user-row) {
+  height: calc(32 / 1080 * 100vh);
+  background: #fff;
+  cursor: pointer;
+  gap: calc(8 / 1920 * 100vw);
+}
+
+.password-item {
+  height: calc(32 / 1080 * 100vh);
+  background: #fff;
+  border: 1px solid #0057FE;
+}
+
+.doctor-code-row {
+  height: calc(32 / 1080 * 100vh);
+  background: #F4F4F4;
+  border: 1px solid #E5E9F0;
+}
+
+.select-label {
+  font-size: calc(14 / 1920 * 100vw);
+  color: #5D5C5C;
+  margin-right: calc(10 / 1920 * 100vw);
+  white-space: nowrap;
+}
+
+.select-text {
+  flex: 1;
+  font-size: calc(14 / 1920 * 100vw);
+  color: #1a1a2e;
+}
+
+.user-avatar-mini {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.avatar-circle {
+  width: calc(28 / 1920 * 100vw);
+  height: calc(28 / 1080 * 100vh);
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.default-avatar {
+  background: #919BB2;
+}
+
+.default-avatar-small {
+  width: calc(24 / 1920 * 100vw);
+  height: calc(24 / 1080 * 100vh);
+  background: #919BB2;
+}
+
+.avatar-img,
+.dropdown-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.online-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: calc(8 / 1920 * 100vw);
+  height: calc(8 / 1080 * 100vh);
+  background: #12BA76;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+
+.password-input,
+.disabled-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: calc(14 / 1920 * 100vw);
+  color: #1a1a2e;
+}
+
+.disabled-input {
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+.password-toggle {
+  cursor: pointer;
+  padding: calc(4 / 1920 * 100vw);
+}
+
+.password-toggle svg {
+  width: calc(20 / 1920 * 100vw);
+  height: calc(20 / 1080 * 100vh);
+}
+
+.input-label {
+  font-size: calc(14 / 1920 * 100vw);
+  color: #5D5C5C;
+  white-space: nowrap;
+  margin-right: calc(10 / 1920 * 100vw);
+}
+
+/* 登录按钮 */
+.login-btn-wrap {
+  margin-top: calc(5 / 1080 * 100vh);
+}
+
+.login-btn {
+  width: 100%;
+  height: calc(40 / 1080 * 100vh);
+  border-radius: calc(6 / 1920 * 100vw);
+  background: #0057FE;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0,87,254,0.3);
+}
+
+.login-btn:hover { background: #0046e0; }
+
+.login-btn-text {
+  font-size: calc(15 / 1920 * 100vw);
+  font-weight: 600;
+  color: #fff;
+}
+
+/* 下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  background: #fff;
+  border-radius: calc(7 / 1920 * 100vw);
+  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
+  z-index: 50;
+  padding: calc(4 / 1920 * 100vw) 0;
+  max-height: calc(200 / 1080 * 100vh);
+  overflow-y: auto;
+}
+
+/* 系统下拉：定位在标题左下方 */
+.his-dropdown-menu {
+  left: calc(1756 / 1920 * 100vw);
+  top: calc(62 / 1080 * 100vh);
+  min-width: calc(160 / 1920 * 100vw);
+}
+
+.dropdown-relative {
+  top: 100%;
+  left: 0;
+  right: 0;
+  min-width: 100%;
+}
+
+.dropdown-item {
+  padding: calc(8 / 1920 * 100vw) calc(16 / 1920 * 100vw);
+  font-size: calc(14 / 1920 * 100vw);
+  color: #3a3a4a;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: calc(10 / 1920 * 100vw);
+}
+
+.dropdown-item:hover { background: #f5f7fb; }
+
+.dropdown-item.active { background: #eef3ff; color: #0057FE; }
+
+/* 版权 */
+.copyright {
+  position: absolute;
+  left: calc(103 / 1920 * 100vw);
+  top: calc(315 / 1080 * 100vh);
+  font-size: calc(12 / 1920 * 100vw);
+  color: #9a9aaa;
+  white-space: nowrap;
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(30,30,40,0.9);
+  color: #fff;
+  padding: 12px 28px;
+  border-radius: 8px;
+  font-size: 14px;
+  z-index: 100;
+  pointer-events: none;
+  animation: toastIn 0.35s ease forwards;
+}
+
+@keyframes toastIn {
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
+  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
+  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+</style>