| | |
| | | <template> |
| | | <div class="system-select-container"> |
| | | <div class="user-info-bar"> |
| | | <div class="user-left"></div> |
| | | <h3 class="user-details">欢迎访问多体系建设信息化系统</h3> |
| | | <div class="avatar-container"> |
| | | <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> |
| | | <div class="avatar-wrapper" style="display: flex;align-items: center"> |
| | | <img src="../assets/images/avator.png" class="user-avatar" /> |
| | | <span style="font-size: 16px">{{userName}}({{userTypeName}})</span> |
| | | <el-icon><caret-bottom /></el-icon> |
| | | </div> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item command="password"> |
| | | <span>修改密码</span> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item divided command="logout"> |
| | | <span>退出登录</span> |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 重新布局的系统选择区域 --> |
| | | <div class="app-container"> |
| | | <div class="systems-container"> |
| | | <div class="layout-container"> |
| | | <!-- 左侧列 --> |
| | |
| | | > |
| | | <div class="card-content"> |
| | | <div class="system-icon"> |
| | | <el-image v-if="getActualIndex(index) == 0" :src="system.platformPic"/> |
| | | <el-image v-else :src="picUrl + system.platformPic"/> |
| | | <el-image :src="picUrl + system.platformPic"/> |
| | | </div> |
| | | <h3>{{ system.platformName }}</h3> |
| | | </div> |
| | |
| | | |
| | | const lunar = lunarCalendar.solarToLunar(year, month, day) |
| | | if (lunar && lunar.lunarMonthName && lunar.lunarDayName) { |
| | | return `${lunar.lunarMonthName}${lunar.lunarDayName}` |
| | | return `农历·${lunar.lunarMonthName}${lunar.lunarDayName}` |
| | | } |
| | | return '' |
| | | } catch (error) { |
| | |
| | | <style scoped lang="scss"> |
| | | .system-select-container { |
| | | height: 100vh; |
| | | display: flex; |
| | | flex-direction: column; |
| | | background-color: #f5f7fa; |
| | | } |
| | | |
| | | .user-info-bar { |
| | |
| | | |
| | | .systems-container { |
| | | flex: 1; |
| | | padding: 20px; |
| | | overflow-y: auto; |
| | | width: 100%; |
| | | } |
| | | |
| | |
| | | display: flex; |
| | | gap: 20px; |
| | | width: 100%; |
| | | height: 100%; |
| | | height: calc(100% - 60px); |
| | | max-width: none; /* 移除最大宽度限制 */ |
| | | margin: 0; /* 移除居中margin */ |
| | | } |
| | |
| | | |
| | | // 超大屏幕优化 |
| | | @media (min-width: 1920px) { |
| | | .systems-container { |
| | | padding: 30px 40px; |
| | | } |
| | | |
| | | .layout-container { |
| | | gap: 30px; |
| | | gap: 20px; |
| | | } |
| | | |
| | | .module-card { |