forked from SmartBench/CMVR-IOT-UI
Refactor UI components for improved layout and styling
- Updated VoiceConversation.vue to set a fixed font size for the header. - Changed index.vue to use an aside element for the header and adjusted layout to a grid system. - Enhanced lock.vue by restructuring the layout and improving visual elements for better user experience. - Revamped login.vue to introduce a visual section and reorganized form elements for clarity. - Redesigned register.vue to include a visual brand section and improved form layout for user registration.
This commit is contained in:
parent
5777d64821
commit
f4903d9eec
@ -47,7 +47,7 @@
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 56px);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 12px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
|
||||
@ -21,8 +21,8 @@ $menuLightText: #374151;
|
||||
$menuLightActiveText: #0052d9;
|
||||
|
||||
// 基础变量
|
||||
$base-sidebar-width: 216px;
|
||||
$sideBarWidth: 216px;
|
||||
$base-sidebar-width: 248px;
|
||||
$sideBarWidth: 248px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #374151;
|
||||
|
||||
@ -85,13 +85,13 @@ getBreadcrumb()
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
margin-left: 8px;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
color: var(--min-text-secondary);
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,17 +37,22 @@ const resetQuery = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="showSearch" class="table-search-shell">
|
||||
<div class="table-search-heading">
|
||||
<span>FILTER</span>
|
||||
<strong>条件筛选</strong>
|
||||
</div>
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
:ref="queryRef"
|
||||
:inline="inline"
|
||||
v-show="showSearch"
|
||||
:label-width="labelWidth"
|
||||
class="table-search-form"
|
||||
>
|
||||
<el-row :gutter="16">
|
||||
<slot name="one"></slot>
|
||||
<slot name="other" v-if="formData.search"></slot>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" :xxl="6" style="padding-bottom: 10px;">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" :xxl="6" class="table-search-actions">
|
||||
<el-space>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
@ -62,8 +67,45 @@ const resetQuery = () => {
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-search-shell {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.table-search-heading {
|
||||
min-height: 44px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
span {
|
||||
color: var(--min-primary);
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-form {
|
||||
padding: 18px 18px 2px;
|
||||
}
|
||||
|
||||
.table-search-actions {
|
||||
padding-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,31 @@
|
||||
<template>
|
||||
<section class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<section class="app-main" :class="{ 'app-main--immersive': isImmersive }">
|
||||
<div class="workspace-stage">
|
||||
<header v-if="!isImmersive" class="workspace-context">
|
||||
<div class="workspace-context__marker" aria-hidden="true">
|
||||
<span>{{ sectionCode }}</span>
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="workspace-context__copy">
|
||||
<span class="workspace-context__eyebrow">{{ sectionLabel }}</span>
|
||||
<h1>{{ routeTitle }}</h1>
|
||||
</div>
|
||||
<div class="workspace-context__path">
|
||||
<span>当前位置</span>
|
||||
<strong>{{ routeTrail }}</strong>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="workspace-view">
|
||||
<router-view v-slot="{ Component, route: currentRoute }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="tagsViewStore.cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
|
||||
<component v-if="!currentRoute.meta.link" :is="Component" :key="currentRoute.path"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
<iframe-toggle />
|
||||
<copyright />
|
||||
</section>
|
||||
@ -20,6 +39,33 @@ import useTagsViewStore from '@/store/modules/tagsView'
|
||||
const route = useRoute()
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
|
||||
const sectionMap = {
|
||||
system: ['SYS', '系统管理'],
|
||||
monitor: ['OPS', '运行监控'],
|
||||
tool: ['DEV', '开发工具'],
|
||||
device: ['DEV', '设备中心'],
|
||||
inspection: ['INS', '巡检业务'],
|
||||
intelligenceTest: ['AIT', '智能测试'],
|
||||
test: ['TST', '测试管理'],
|
||||
corpusManger: ['COR', '语料中心'],
|
||||
vi: ['VOC', '语音测试'],
|
||||
is: ['HMI', '交互测试'],
|
||||
evaluate: ['EVA', '评价中心'],
|
||||
}
|
||||
|
||||
const pathSection = computed(() => route.path.split('/').filter(Boolean)[0] || 'index')
|
||||
const sectionMeta = computed(() => sectionMap[pathSection.value] || ['CMV', '业务工作台'])
|
||||
const sectionCode = computed(() => sectionMeta.value[0])
|
||||
const sectionLabel = computed(() => sectionMeta.value[1])
|
||||
const routeTitle = computed(() => route.meta?.title || route.name || '工作台')
|
||||
const routeTrail = computed(() => {
|
||||
const titles = route.matched
|
||||
.map(item => item.meta?.title)
|
||||
.filter(Boolean)
|
||||
return titles.length ? titles.join(' / ') : routeTitle.value
|
||||
})
|
||||
const isImmersive = computed(() => route.path === '/index')
|
||||
|
||||
onMounted(() => {
|
||||
addIframe()
|
||||
})
|
||||
@ -38,8 +84,8 @@ function addIframe() {
|
||||
<style lang="scss" scoped>
|
||||
@use "@/assets/styles/variables.module" as *;
|
||||
.app-main {
|
||||
height: calc(100% - 56px);
|
||||
padding: 24px;
|
||||
height: calc(100% - 72px);
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -47,17 +93,150 @@ function addIframe() {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.workspace-stage {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-context {
|
||||
min-height: 112px;
|
||||
flex: 0 0 112px;
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr) minmax(220px, auto);
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.workspace-context__marker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
color: var(--min-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.workspace-context__marker i {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--min-primary);
|
||||
}
|
||||
|
||||
.workspace-context__copy {
|
||||
min-width: 0;
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.workspace-context__eyebrow,
|
||||
.workspace-context__path span {
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.workspace-context__copy h1 {
|
||||
margin: 6px 0 0;
|
||||
overflow: hidden;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workspace-context__path {
|
||||
min-width: 220px;
|
||||
padding: 24px 32px;
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.workspace-context__path strong {
|
||||
max-width: 360px;
|
||||
margin-top: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--min-text-regular);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workspace-view {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 24px 32px 32px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.app-main--immersive .workspace-view {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 80px;
|
||||
padding-top: 72px;
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
height: calc(100% - 96px);
|
||||
height: calc(100% - 116px);
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 120px;
|
||||
padding-top: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-main {
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.hasTagsView .app-main {
|
||||
height: calc(100% - 106px);
|
||||
}
|
||||
|
||||
.workspace-context {
|
||||
min-height: 88px;
|
||||
flex-basis: 88px;
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.workspace-context__marker {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.workspace-context__copy {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.workspace-context__copy h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.workspace-context__path {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-view {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -75,9 +254,4 @@ function addIframe() {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-main {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div class="navbar" :class="'nav' + settingsStore.navType">
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<div v-if="settingsStore.navType == 1" class="navbar-context">
|
||||
<div class="navbar-context__title">
|
||||
<span>CONTROL DESK</span>
|
||||
<strong>{{ currentTitle }}</strong>
|
||||
</div>
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
</div>
|
||||
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
|
||||
<template v-if="settingsStore.navType == 3">
|
||||
<logo v-show="settingsStore.sidebarLogo" :collapse="false"></logo>
|
||||
@ -88,6 +94,7 @@ const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
const lockStore = useLockStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const currentTitle = computed(() => route.meta?.title || route.name || '工作台')
|
||||
|
||||
function toggleSideBar() {
|
||||
appStore.toggleSideBar()
|
||||
@ -175,7 +182,7 @@ async function toggleTheme(event) {
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.navbar {
|
||||
height: 56px;
|
||||
height: 72px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--navbar-bg);
|
||||
@ -183,12 +190,13 @@ async function toggleTheme(event) {
|
||||
box-shadow: none;
|
||||
|
||||
.hamburger-container {
|
||||
width: 56px;
|
||||
line-height: 52px;
|
||||
width: 64px;
|
||||
line-height: 68px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
transition: background 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
@ -197,7 +205,39 @@ async function toggleTheme(event) {
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-context {
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
padding: 10px 20px;
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-context__title {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
span {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
strong {
|
||||
overflow: hidden;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
@ -213,7 +253,7 @@ async function toggleTheme(event) {
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 56px;
|
||||
line-height: 72px;
|
||||
display: flex;
|
||||
|
||||
&:focus {
|
||||
@ -233,10 +273,12 @@ async function toggleTheme(event) {
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
border-left: 1px solid transparent;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--navbar-hover);
|
||||
color: var(--min-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -256,10 +298,12 @@ async function toggleTheme(event) {
|
||||
|
||||
.avatar-container {
|
||||
width: auto;
|
||||
margin: 0 24px 0 8px;
|
||||
margin: 0;
|
||||
padding: 0 24px 0 16px;
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
|
||||
.avatar-wrapper {
|
||||
height: 56px;
|
||||
height: 72px;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -273,6 +317,17 @@ async function toggleTheme(event) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
max-width: 120px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
@ -284,4 +339,36 @@ async function toggleTheme(event) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
height: 64px;
|
||||
|
||||
.hamburger-container {
|
||||
width: 56px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.navbar-context {
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.navbar-context__title span,
|
||||
.breadcrumb-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-menu .avatar-container {
|
||||
padding: 0 14px;
|
||||
|
||||
.avatar-wrapper {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,13 @@
|
||||
<h1 v-else class="sidebar-title">{{ title }}</h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<span class="sidebar-brand-mark">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
</span>
|
||||
<span class="sidebar-brand-copy">
|
||||
<h1 class="sidebar-title">{{ title }}</h1>
|
||||
<small>TEST OPERATIONS</small>
|
||||
</span>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
@ -67,36 +72,71 @@ const getLogoTextColor = computed(() => {
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
background: v-bind(getLogoBackground);
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: v-bind(getLogoTextColor);
|
||||
font-weight: 600;
|
||||
line-height: 56px;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
font-size: 13px;
|
||||
font-family: var(--min-font-family);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex: 0 0 36px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.sidebar-brand-copy {
|
||||
min-width: 0;
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
|
||||
small {
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 9px;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
text-align: center;
|
||||
|
||||
.sidebar-logo-link {
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<div v-show="!isCollapse" class="sidebar-section-label">
|
||||
<span>工作导航</span>
|
||||
<strong>01</strong>
|
||||
</div>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
@ -21,6 +25,13 @@
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<div v-show="!isCollapse" class="sidebar-status">
|
||||
<span class="sidebar-status__signal"></span>
|
||||
<span>
|
||||
<strong>CMVR CONTROL OS</strong>
|
||||
<small>系统在线</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -71,11 +82,38 @@ const activeMenu = computed(() => {
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-container {
|
||||
background-color: v-bind(getMenuBackground);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.scrollbar-wrapper {
|
||||
background-color: v-bind(getMenuBackground);
|
||||
}
|
||||
|
||||
> .el-scrollbar {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-section-label {
|
||||
height: 48px;
|
||||
padding: 0 20px;
|
||||
flex: 0 0 48px;
|
||||
border-top: 1px solid var(--min-border-light);
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
|
||||
strong {
|
||||
color: var(--min-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
@ -83,11 +121,12 @@ const activeMenu = computed(() => {
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 2px 8px;
|
||||
border-radius: var(--min-radius-sm);
|
||||
font-size: 14px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -102,13 +141,14 @@ const activeMenu = computed(() => {
|
||||
|
||||
&.is-active {
|
||||
color: var(--menu-active-text);
|
||||
background-color: var(--min-primary-soft) !important;
|
||||
background-color: var(--min-bg-white) !important;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
background: var(--min-primary);
|
||||
@ -120,5 +160,42 @@ const activeMenu = computed(() => {
|
||||
color: v-bind(getMenuTextColor);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-status {
|
||||
min-height: 72px;
|
||||
padding: 16px 20px;
|
||||
flex: 0 0 72px;
|
||||
border-top: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--min-bg-subtle);
|
||||
|
||||
> span:last-child {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-status__signal {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
flex: 0 0 8px;
|
||||
border-radius: var(--min-radius-sm);
|
||||
background: var(--min-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div id="tags-view-container" class="tags-view-container">
|
||||
<div class="tags-view-index">
|
||||
<span>OPEN</span>
|
||||
<strong>{{ String(visitedViews.length).padStart(2, '0') }}</strong>
|
||||
</div>
|
||||
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
@ -248,30 +252,52 @@ function handleScroll() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 40px;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
background: var(--tags-bg, #fff);
|
||||
display: flex;
|
||||
background: var(--min-bg-subtle);
|
||||
border-bottom: 1px solid var(--tags-item-border, #d8dce5);
|
||||
box-shadow: none;
|
||||
|
||||
.tags-view-index {
|
||||
width: 72px;
|
||||
flex: 0 0 72px;
|
||||
border-right: 1px solid var(--tags-item-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 9px;
|
||||
|
||||
strong {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view-wrapper {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--tags-item-border);
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--tags-item-text);
|
||||
background: transparent;
|
||||
padding: 0 12px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
margin: 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 12px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@ -281,6 +307,7 @@ function handleScroll() {
|
||||
&.active {
|
||||
color: var(--min-primary);
|
||||
border-bottom-color: var(--min-primary);
|
||||
background: var(--min-bg-white);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@ -311,6 +338,22 @@ function handleScroll() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tags-view-container {
|
||||
height: 42px;
|
||||
|
||||
.tags-view-index {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tags-view-wrapper .tags-view-item {
|
||||
height: 41px;
|
||||
line-height: 41px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
--min-primary: #0052d9;
|
||||
--min-primary-hover: #0046b8;
|
||||
--min-primary-soft: #eef4ff;
|
||||
--min-primary-border: #cbdcf8;
|
||||
|
||||
/* 4px / 8px grid */
|
||||
--min-radius-sm: 2px;
|
||||
@ -54,6 +55,29 @@
|
||||
--el-border-radius-small: var(--min-radius-sm);
|
||||
--el-border-radius-round: var(--min-radius-base);
|
||||
--el-color-primary: var(--min-primary);
|
||||
--el-color-success: var(--min-primary);
|
||||
--el-color-success-light-3: #4d86e5;
|
||||
--el-color-success-light-5: #80a8ec;
|
||||
--el-color-success-light-7: var(--min-primary-border);
|
||||
--el-color-success-light-8: #dfe9fa;
|
||||
--el-color-success-light-9: var(--min-primary-soft);
|
||||
--el-color-success-dark-2: var(--min-primary-hover);
|
||||
--el-color-warning: var(--min-primary);
|
||||
--el-color-warning-light-3: #4d86e5;
|
||||
--el-color-warning-light-5: #80a8ec;
|
||||
--el-color-warning-light-7: var(--min-primary-border);
|
||||
--el-color-warning-light-8: #dfe9fa;
|
||||
--el-color-warning-light-9: var(--min-primary-soft);
|
||||
--el-color-warning-dark-2: var(--min-primary-hover);
|
||||
--el-color-danger: var(--min-primary);
|
||||
--el-color-danger-light-3: #4d86e5;
|
||||
--el-color-danger-light-5: #80a8ec;
|
||||
--el-color-danger-light-7: var(--min-primary-border);
|
||||
--el-color-danger-light-8: #dfe9fa;
|
||||
--el-color-danger-light-9: var(--min-primary-soft);
|
||||
--el-color-danger-dark-2: var(--min-primary-hover);
|
||||
--el-color-error: var(--min-primary);
|
||||
--el-color-error-light-9: var(--min-primary-soft);
|
||||
--el-box-shadow: var(--min-shadow-overlay);
|
||||
--el-box-shadow-light: 0 4px 16px rgba(31, 41, 55, 0.06);
|
||||
--el-box-shadow-lighter: 0 2px 8px rgba(31, 41, 55, 0.05);
|
||||
@ -159,6 +183,73 @@ label {
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
/* Structural workspace system shared by standard management pages. */
|
||||
.workspace-view > .app-container {
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.workspace-view .app-container > .el-form.el-form--inline,
|
||||
.workspace-view .app-container > div:first-child > .el-form.el-form--inline,
|
||||
.workspace-view .tree-sidebar-content .content-inner > .el-form.el-form--inline {
|
||||
position: relative;
|
||||
margin: 0 0 16px;
|
||||
padding: 20px 20px 4px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-top: 2px solid var(--min-primary);
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.workspace-view .app-container > .el-row.mb8,
|
||||
.workspace-view .app-container > div:first-child > .el-row.mb8,
|
||||
.workspace-view .tree-sidebar-content .content-inner > .el-row.mb8 {
|
||||
min-height: 58px;
|
||||
margin: 0 0 16px !important;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.workspace-view .app-container > .el-table,
|
||||
.workspace-view .app-container > div:not([class]) > .el-table,
|
||||
.workspace-view .tree-sidebar-content .content-inner > .el-table {
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.workspace-view .tree-sidebar-manage-wrap {
|
||||
min-height: 100%;
|
||||
border: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.workspace-view .tree-sidebar-manage-wrap .tree-sidebar-content {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background: var(--min-bg-page);
|
||||
}
|
||||
|
||||
.workspace-view .tree-sidebar-manage-wrap .content-inner {
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.workspace-view .pagination-container {
|
||||
min-height: 58px;
|
||||
margin: 0 !important;
|
||||
padding: 12px 16px !important;
|
||||
border: 1px solid var(--min-border-light);
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-base);
|
||||
@ -192,6 +283,36 @@ label {
|
||||
background: var(--min-primary-hover);
|
||||
}
|
||||
|
||||
.el-button--success,
|
||||
.el-button--warning,
|
||||
.el-button--danger,
|
||||
.el-button--info {
|
||||
--el-button-text-color: var(--min-text-regular);
|
||||
--el-button-bg-color: var(--min-bg-white);
|
||||
--el-button-border-color: var(--min-border-light);
|
||||
--el-button-hover-text-color: var(--min-primary);
|
||||
--el-button-hover-bg-color: var(--min-primary-soft);
|
||||
--el-button-hover-border-color: var(--min-primary);
|
||||
--el-button-active-text-color: var(--min-primary);
|
||||
--el-button-active-border-color: var(--min-primary);
|
||||
--el-button-active-bg-color: var(--min-primary-soft);
|
||||
}
|
||||
|
||||
.el-button--success.is-disabled,
|
||||
.el-button--warning.is-disabled,
|
||||
.el-button--danger.is-disabled,
|
||||
.el-button--info.is-disabled {
|
||||
--el-button-disabled-text-color: var(--min-text-placeholder);
|
||||
--el-button-disabled-bg-color: var(--min-bg-page);
|
||||
--el-button-disabled-border-color: var(--min-border-light);
|
||||
}
|
||||
|
||||
.el-message-box__status.el-message-box-icon--warning,
|
||||
.el-message-box__status.el-message-box-icon--error,
|
||||
.el-message-box__status.el-message-box-icon--success {
|
||||
color: var(--min-primary);
|
||||
}
|
||||
|
||||
.el-button--cyan,
|
||||
.el-button--cyan:hover,
|
||||
.el-button--cyan:focus,
|
||||
@ -237,18 +358,19 @@ label {
|
||||
--el-table-border-color: var(--min-border-light);
|
||||
--el-table-row-hover-bg-color: var(--min-bg-page);
|
||||
color: var(--min-text-regular);
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
height: 44px;
|
||||
height: 48px;
|
||||
padding: var(--min-space-base) 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell {
|
||||
height: 48px;
|
||||
padding: var(--min-space-base) 0;
|
||||
height: 52px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
@ -267,6 +389,7 @@ label {
|
||||
.el-message-box__header {
|
||||
padding: var(--min-space-5) var(--min-space-6) var(--min-space-4);
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
border-left: 4px solid var(--min-primary);
|
||||
}
|
||||
|
||||
.el-dialog__title,
|
||||
@ -359,4 +482,26 @@ label {
|
||||
.el-dialog {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.workspace-view .app-container > .el-form.el-form--inline,
|
||||
.workspace-view .app-container > div:first-child > .el-form.el-form--inline,
|
||||
.workspace-view .tree-sidebar-content .content-inner > .el-form.el-form--inline {
|
||||
padding: 16px 16px 0;
|
||||
}
|
||||
|
||||
.workspace-view .tree-sidebar-manage-wrap {
|
||||
border: 0;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.workspace-view .tree-sidebar-manage-wrap .tree-sidebar {
|
||||
width: 100% !important;
|
||||
max-height: 280px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
.workspace-view .tree-sidebar-manage-wrap .content-inner {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 统计卡片 -->
|
||||
<aside class="insight-panel">
|
||||
<header>
|
||||
<span>CORPUS / INDEX</span>
|
||||
<strong>语料数据概况</strong>
|
||||
</header>
|
||||
<StatCards />
|
||||
</aside>
|
||||
|
||||
<!-- 主体：目录树 + 列表 + 详情 -->
|
||||
<div class="main-layout">
|
||||
<main class="main-layout">
|
||||
<div class="left-panel">
|
||||
<CategoryTree @select-category="onSelectCategory" />
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<CorpusList :categoryId="categoryId" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -29,32 +33,82 @@ const onSelectCategory = (node) => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 272px minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.insight-panel {
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
|
||||
> header {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 16px 20px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-bottom: 0;
|
||||
background: var(--min-bg-white);
|
||||
|
||||
span {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.row-cards) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
:deep(.row-cards .card) {
|
||||
min-height: 132px;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.row-cards .card:last-child) {
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
}
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-items: stretch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.detail-wrapper {
|
||||
@ -62,8 +116,27 @@ const onSelectCategory = (node) => {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.page-container {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.insight-panel {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.insight-panel :deep(.row-cards) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.insight-panel :deep(.row-cards .card) {
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
grid-template-columns: 1fr;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
|
||||
@ -325,16 +325,18 @@ const cancel = () => {
|
||||
<style lang="scss" scoped>
|
||||
.main-workspace {
|
||||
.workspace-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 0.8fr) minmax(440px, 1.2fr);
|
||||
gap: 20px;
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--min-bg-white);
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-top: 2px solid var(--min-primary);
|
||||
padding: 20px;
|
||||
border-radius: var(--min-radius-base);
|
||||
border-radius: 0;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
@ -362,8 +364,9 @@ const cancel = () => {
|
||||
min-width: 0;
|
||||
background: var(--min-bg-white);
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-top: 2px solid var(--min-primary);
|
||||
padding: 20px;
|
||||
border-radius: var(--min-radius-base);
|
||||
border-radius: 0;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
@ -391,9 +394,9 @@ const cancel = () => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 980px) {
|
||||
.main-workspace .workspace-container {
|
||||
flex-direction: column;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="statCards">
|
||||
<aside class="statCards">
|
||||
<header><span>SPEECH / METRICS</span><strong>合成运行指标</strong></header>
|
||||
<StatCards />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主工作区 -->
|
||||
<main class="synthesis-workspace">
|
||||
<div class="mainWorkspace">
|
||||
<MainWorkspace @refresh="refresh" />
|
||||
</div>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<TaskList ref="taskListRef" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -27,16 +26,70 @@ const refresh = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
display: grid;
|
||||
grid-template-columns: 252px minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.statCards {
|
||||
margin-bottom: 12px;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
|
||||
> header {
|
||||
display: flex;
|
||||
min-height: 78px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
padding: 16px 20px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-bottom: 0;
|
||||
background: var(--min-bg-white);
|
||||
|
||||
span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
strong { color: var(--min-text-primary); font-size: 15px; font-weight: 600; }
|
||||
}
|
||||
|
||||
:deep(.row-cards) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
:deep(.row-cards .card) {
|
||||
min-height: 118px;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.row-cards .card:last-child) {
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
}
|
||||
}
|
||||
|
||||
.synthesis-workspace {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mainWorkspace {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.page-container {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.page-container .statCards { overflow: visible; }
|
||||
.page-container .statCards :deep(.row-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.page-container .statCards :deep(.row-cards .card) { border-bottom: 1px solid var(--min-border-light); }
|
||||
.page-container .synthesis-workspace { overflow: visible; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="app-container robot-device-page">
|
||||
<section class="page-heading">
|
||||
<div>
|
||||
<h2>机器人设备</h2>
|
||||
<p>设备由机器人在线上报，切换机器人后自动刷新。</p>
|
||||
<span>DEVICE / INVENTORY</span>
|
||||
<h2>机器人设备台账</h2>
|
||||
</div>
|
||||
<div class="robot-selector">
|
||||
<span>当前机器人</span>
|
||||
@ -16,20 +16,24 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="status-strip">
|
||||
<div class="device-workspace">
|
||||
<aside class="status-strip">
|
||||
<header><span>STATUS</span><strong>库存状态</strong></header>
|
||||
<div><strong>{{ devices.length }}</strong><span>设备总数</span></div>
|
||||
<div><strong class="online">{{ onlineCount }}</strong><span>在线设备</span></div>
|
||||
<div><strong class="fault">{{ faultCount }}</strong><span>故障设备</span></div>
|
||||
</aside>
|
||||
|
||||
<section class="device-data">
|
||||
<div class="filters">
|
||||
<span>DEVICE LIST</span>
|
||||
<el-input v-model="keyword" clearable :prefix-icon="Search" placeholder="搜索名称或设备 ID" />
|
||||
<el-select v-model="deviceKind" clearable placeholder="全部类型">
|
||||
<el-option v-for="item in deviceKinds" :key="item.value"
|
||||
:label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-table v-loading="loading" :data="filteredDevices" height="calc(100vh - 285px)"
|
||||
<el-table v-loading="loading" :data="filteredDevices" height="100%"
|
||||
empty-text="当前机器人尚未上报设备">
|
||||
<el-table-column label="设备" min-width="220">
|
||||
<template #default="{ row }">
|
||||
@ -68,6 +72,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -155,19 +161,26 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.robot-device-page { min-height: 100%; background: var(--min-bg-white); }
|
||||
.robot-device-page { display: flex; height: 100%; min-height: 560px; flex-direction: column; background: transparent; }
|
||||
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 0 20px; }
|
||||
.page-heading > div:first-child { display: flex; align-items: baseline; gap: 14px; }
|
||||
.page-heading > div:first-child > span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
.page-heading h2 { margin: 0 0 4px; color: var(--min-text-primary); font-size: 20px; font-weight: 600; letter-spacing: 0; }
|
||||
.page-heading p { margin: 0; color: var(--min-text-secondary); font-size: 13px; }
|
||||
.robot-selector { display: flex; align-items: center; gap: 8px; color: var(--min-text-regular); font-size: 13px; }
|
||||
.robot-selector .el-select { width: 330px; }
|
||||
.status-strip { display: flex; align-items: center; gap: 32px; margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--min-border-light); border-radius: var(--min-radius-base); background: var(--min-bg-white); }
|
||||
.status-strip > div:not(.filters) { display: grid; min-width: 74px; }
|
||||
.status-strip strong { color: var(--min-text-primary); font-size: 24px; font-weight: 600; line-height: 28px; }
|
||||
.status-strip strong.online { color: #16a34a; }
|
||||
.status-strip strong.fault { color: #dc2626; }
|
||||
.device-workspace { display: grid; flex: 1; min-height: 0; grid-template-columns: 196px minmax(0, 1fr); border: 1px solid var(--min-border-light); background: var(--min-bg-white); }
|
||||
.status-strip { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--min-border-light); background: var(--min-bg-white); }
|
||||
.status-strip header { display: flex; min-height: 74px; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--min-border-light); }
|
||||
.status-strip header span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
.status-strip header strong { color: var(--min-text-primary); font-size: 15px; font-weight: 600; }
|
||||
.status-strip > div { display: flex; min-height: 112px; flex-direction: column; justify-content: center; gap: 6px; padding: 20px; border-bottom: 1px solid var(--min-border-light); }
|
||||
.status-strip strong { color: var(--min-text-primary); font-size: 28px; font-weight: 600; line-height: 32px; }
|
||||
.status-strip strong.online { color: var(--min-primary); }
|
||||
.status-strip strong.fault { color: var(--min-text-primary); }
|
||||
.status-strip span { color: var(--min-text-secondary); font-size: 12px; }
|
||||
.filters { display: flex; flex: 1; justify-content: flex-end; gap: 10px; }
|
||||
.device-data { display: grid; min-width: 0; min-height: 0; grid-template-rows: 74px minmax(0, 1fr); }
|
||||
.filters { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--min-border-light); }
|
||||
.filters > span { margin-right: auto; color: var(--min-text-secondary); font-size: 10px; font-weight: 600; }
|
||||
.filters .el-input { width: 240px; }
|
||||
.filters .el-select { width: 150px; }
|
||||
.device-name { display: flex; align-items: center; gap: 12px; }
|
||||
@ -177,8 +190,16 @@ onMounted(async () => {
|
||||
.device-name small { overflow: hidden; color: var(--min-text-secondary); text-overflow: ellipsis; }
|
||||
.muted { color: var(--min-text-placeholder); }
|
||||
@media (max-width: 900px) {
|
||||
.page-heading, .status-strip { align-items: stretch; flex-direction: column; }
|
||||
.robot-device-page { height: auto; }
|
||||
.page-heading { align-items: stretch; flex-direction: column; }
|
||||
.device-workspace { grid-template-columns: minmax(0, 1fr); }
|
||||
.status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--min-border-light); }
|
||||
.status-strip header { grid-column: 1 / -1; }
|
||||
.status-strip > div { min-height: 90px; border-right: 1px solid var(--min-border-light); }
|
||||
.device-data { min-height: 620px; }
|
||||
.robot-selector, .filters { justify-content: flex-start; flex-wrap: wrap; }
|
||||
.robot-selector .el-select, .filters .el-input { width: 100%; }
|
||||
.filters { height: auto; }
|
||||
.filters > span { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,9 +4,11 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-container class="page__container">
|
||||
<el-container class="page__container" :class="{ 'page__container--log': flowInfoData.isLog }">
|
||||
<el-header v-if="!flowInfoData.isLog">
|
||||
<div class="flow-heading">
|
||||
<span class="flow-heading__index">FLOW / 01</span>
|
||||
<div class="flow-heading__identity">
|
||||
<div class="flow-heading__name">{{ flowInfoData.name || "未命名流程" }}</div>
|
||||
<div class="flow-status" :class="`flow-status--${flowState}`">
|
||||
<span class="flow-status__dot"></span>
|
||||
@ -19,6 +21,7 @@
|
||||
正在查看 V{{ previewingVersionNo }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!versionPreviewMode" class="btn__container">
|
||||
<div class="btn flow-actions">
|
||||
<el-tag v-if="hasRunResult && ['testRunError', 'testRunFinish'].includes(flowState)" :type="flowState === 'testRunFinish' ? 'success' : 'danger'">
|
||||
@ -121,6 +124,7 @@
|
||||
<Aside />
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<div class="canvas-stage">
|
||||
<div class="canvas-toolbar">
|
||||
<el-tooltip v-if="!flowStore.disableForm" content="撤销" placement="bottom">
|
||||
<el-button aria-label="撤销" @click="lf.undo()"><el-icon><RefreshLeft /></el-icon></el-button>
|
||||
@ -176,6 +180,27 @@
|
||||
<Background color="#d9dee8" :gap="24" :size="1" />
|
||||
<Controls position="bottom-right" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
<aside class="flow-summary">
|
||||
<header>
|
||||
<span>FLOW INDEX</span>
|
||||
<strong>流程概况</strong>
|
||||
</header>
|
||||
<div class="flow-summary__metrics">
|
||||
<div><strong>{{ flowMetrics.nodeCount }}</strong><span>节点</span></div>
|
||||
<div><strong>{{ flowMetrics.edgeCount }}</strong><span>连线</span></div>
|
||||
<div><strong>{{ nodeErrorList.length }}</strong><span>异常</span></div>
|
||||
</div>
|
||||
<dl class="flow-summary__list">
|
||||
<div><dt>当前状态</dt><dd>{{ stateMap[flowState] }}</dd></div>
|
||||
<div><dt>编辑状态</dt><dd>{{ draftDirty ? '有未保存修改' : '已同步' }}</dd></div>
|
||||
<div><dt>发布版本</dt><dd>{{ publishedVersionNo ? `V${publishedVersionNo}` : '未发布' }}</dd></div>
|
||||
<div><dt>画布模式</dt><dd>{{ flowStore.disableForm ? '只读' : '编辑' }}</dd></div>
|
||||
</dl>
|
||||
<button class="flow-summary__fit" type="button" @click="fitView">
|
||||
<el-icon><FullScreen /></el-icon><span>适应全部节点</span>
|
||||
</button>
|
||||
</aside>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
@ -849,6 +874,10 @@ const flowInfoData = ref({
|
||||
isLog: false,
|
||||
name: "流程",
|
||||
});
|
||||
const flowMetrics = computed(() => ({
|
||||
nodeCount: (vueFlow.getNodes.value || []).length,
|
||||
edgeCount: (vueFlow.getEdges.value || []).length,
|
||||
}));
|
||||
|
||||
/**
|
||||
* 试运行
|
||||
@ -2744,24 +2773,44 @@ onUnmounted(() => {
|
||||
overflow: hidden;
|
||||
|
||||
.page__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-header {
|
||||
display: flex;
|
||||
height: auto;
|
||||
min-height: 92px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
background: var(--min-bg-white);
|
||||
gap: 18px;
|
||||
gap: 24px;
|
||||
|
||||
.flow-heading {
|
||||
display: flex;
|
||||
flex: 0 0 230px;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flow-heading__index {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.flow-heading__identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flow-heading__name {
|
||||
@ -2796,37 +2845,26 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.flow-status--release,
|
||||
.flow-status--testRunFinish {
|
||||
border-color: #c8ead5;
|
||||
background: #effaf3;
|
||||
color: #1e7d49;
|
||||
}
|
||||
|
||||
.flow-status--testRunning,
|
||||
.flow-status--updateData {
|
||||
border-color: #cbdcf8;
|
||||
background: #f0f6ff;
|
||||
color: #2f6fca;
|
||||
}
|
||||
|
||||
.flow-status--testRunFinish,
|
||||
.flow-status--updateData,
|
||||
.flow-status--testRunError,
|
||||
.flow-status--stop {
|
||||
border-color: #f1cecb;
|
||||
background: #fff3f2;
|
||||
color: #c33b32;
|
||||
}
|
||||
|
||||
.flow-status--stop,
|
||||
.flow-status--pause {
|
||||
border-color: #ead9b8;
|
||||
background: #fff9eb;
|
||||
color: #9a6700;
|
||||
border-color: var(--min-primary-border);
|
||||
background: var(--min-primary-soft);
|
||||
color: var(--min-primary);
|
||||
}
|
||||
|
||||
.btn__container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
@ -2844,13 +2882,17 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100% - 60px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 216px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
@ -2861,6 +2903,13 @@ onUnmounted(() => {
|
||||
background: var(--min-bg-page);
|
||||
}
|
||||
|
||||
.canvas-stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
.canvas-toolbar {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -2972,6 +3021,129 @@ onUnmounted(() => {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-summary {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
background: var(--min-bg-white);
|
||||
|
||||
> header {
|
||||
display: flex;
|
||||
min-height: 74px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
|
||||
span {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flow-summary__metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 86px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
|
||||
&:last-child { border-right: 0; }
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 4px;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-summary__list {
|
||||
margin: 0;
|
||||
padding: 8px 18px;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
dt,
|
||||
dd { margin: 0; }
|
||||
|
||||
dt {
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
dd {
|
||||
overflow: hidden;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-summary__fit {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin: auto 18px 18px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-sm);
|
||||
background: var(--min-bg-white);
|
||||
color: var(--min-text-regular);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--min-primary);
|
||||
color: var(--min-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.page__container .el-main { grid-template-columns: minmax(0, 1fr) 192px; }
|
||||
.page__container .el-aside { width: 236px; }
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.page__container .el-main { grid-template-columns: minmax(0, 1fr); }
|
||||
.page__container .flow-summary { display: none; }
|
||||
.page__container .el-header { align-items: flex-start; flex-direction: column; }
|
||||
.page__container .el-header .flow-heading { flex-basis: auto; }
|
||||
.page__container .el-header .btn__container { width: 100%; justify-content: flex-start; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<h1>招商车研机器人智能测试管理系统</h1>
|
||||
<p class="hero-description">
|
||||
连接设备、编排流程、执行测试与巡检任务，集中管理机器人全生命周期测试业务。
|
||||
DEVICE {{ stats.device.value }} / FLOW {{ stats.flow.value }} / INSPECTION {{ stats.inspection.value }} / INSTANCE {{ stats.instance.value }}
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<el-button type="primary" size="large" @click="router.push('/flow')">
|
||||
@ -29,6 +29,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="operations-layout">
|
||||
<section class="overview-section" aria-labelledby="overview-title">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
@ -57,6 +58,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="operations-main">
|
||||
<section class="workspace-grid">
|
||||
<div class="dashboard-panel task-panel">
|
||||
<div class="panel-heading">
|
||||
@ -121,7 +123,6 @@
|
||||
</span>
|
||||
<span class="feature-copy">
|
||||
<strong>{{ feature.title }}</strong>
|
||||
<small>{{ feature.description }}</small>
|
||||
</span>
|
||||
<el-icon class="feature-arrow"><ArrowRight /></el-icon>
|
||||
</button>
|
||||
@ -160,6 +161,8 @@
|
||||
<span>{{ recentInstancesRestricted ? '暂无测试实例查看权限' : '暂无测试执行记录' }}</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -445,23 +448,23 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 2px 24px;
|
||||
padding: 0 32px 32px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
position: relative;
|
||||
min-height: 196px;
|
||||
padding: 32px;
|
||||
min-height: 320px;
|
||||
padding: 48px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-base);
|
||||
background: var(--min-bg-white);
|
||||
color: var(--min-text-primary);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #18202a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-panel::before {
|
||||
@ -472,8 +475,16 @@ onBeforeUnmount(() => {
|
||||
background-image: url('../assets/images/index-background.jpg');
|
||||
background-position: center 48%;
|
||||
background-size: cover;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.07;
|
||||
filter: grayscale(1) contrast(1.08);
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.hero-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background: rgba(17, 24, 39, 0.62);
|
||||
}
|
||||
|
||||
.hero-content,
|
||||
@ -483,7 +494,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 760px;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.platform-state {
|
||||
@ -491,7 +502,7 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 13px;
|
||||
color: var(--min-text-secondary);
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -505,7 +516,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.hero-content h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
max-width: 680px;
|
||||
font-size: 36px;
|
||||
line-height: 1.28;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
@ -514,8 +526,8 @@ onBeforeUnmount(() => {
|
||||
.hero-description {
|
||||
max-width: 670px;
|
||||
margin: 12px 0 22px;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
@ -538,21 +550,21 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.cockpit-button {
|
||||
border-color: var(--min-border-light) !important;
|
||||
background: var(--min-bg-white) !important;
|
||||
color: var(--min-text-regular) !important;
|
||||
border-color: rgba(255, 255, 255, 0.62) !important;
|
||||
background: transparent !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.cockpit-button:hover {
|
||||
border-color: var(--min-primary) !important;
|
||||
background: var(--min-primary-soft) !important;
|
||||
color: var(--min-primary) !important;
|
||||
border-color: #ffffff !important;
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.hero-time {
|
||||
min-width: 190px;
|
||||
padding-left: 26px;
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.36);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
@ -568,12 +580,25 @@ onBeforeUnmount(() => {
|
||||
|
||||
.hero-time > span:last-child,
|
||||
.time-label {
|
||||
color: var(--min-text-secondary);
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.operations-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 292px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.operations-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview-section {
|
||||
padding: 24px 0 20px;
|
||||
padding: 0;
|
||||
border-top: 2px solid var(--min-primary);
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
@ -585,7 +610,12 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 14px;
|
||||
min-height: 72px;
|
||||
margin: 0;
|
||||
padding: 14px 16px;
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
@ -612,19 +642,22 @@ onBeforeUnmount(() => {
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
position: relative;
|
||||
min-height: 116px;
|
||||
padding: 20px;
|
||||
min-height: 104px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: var(--min-radius-base);
|
||||
border: 0;
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
border-radius: 0;
|
||||
background: var(--el-bg-color);
|
||||
transition: border-color 160ms ease, background-color 160ms ease;
|
||||
}
|
||||
@ -655,7 +688,7 @@ onBeforeUnmount(() => {
|
||||
.metric-content {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: baseline;
|
||||
column-gap: 10px;
|
||||
}
|
||||
@ -691,16 +724,17 @@ onBeforeUnmount(() => {
|
||||
|
||||
.workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dashboard-panel {
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: var(--min-radius-base);
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-top: 2px solid var(--min-primary);
|
||||
border-radius: 0;
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
|
||||
@ -841,7 +875,7 @@ onBeforeUnmount(() => {
|
||||
min-height: 76px;
|
||||
padding: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--min-radius-base);
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr) 14px;
|
||||
align-items: center;
|
||||
@ -889,7 +923,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.recent-panel {
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.recent-list {
|
||||
@ -969,8 +1003,17 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.operations-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
border-top: 1px solid var(--min-border-light);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.workspace-grid {
|
||||
@ -980,12 +1023,12 @@ onBeforeUnmount(() => {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home-dashboard {
|
||||
padding-bottom: 16px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
min-height: 0;
|
||||
padding: 28px 22px;
|
||||
padding: 36px 24px;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -1016,6 +1059,10 @@ onBeforeUnmount(() => {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
.recent-item:nth-child(2) {
|
||||
border-top: 1px solid var(--el-border-color-extra-light);
|
||||
}
|
||||
|
||||
@ -1,20 +1,25 @@
|
||||
<template>
|
||||
<div class="header-container">
|
||||
<div class="left">
|
||||
<div class="date">
|
||||
<div>{{ currentTime }}</div>
|
||||
<div class="week">{{ weekText }}</div>
|
||||
</div>
|
||||
<div class="binary-strip">{{ binaryText }}</div>
|
||||
</div>
|
||||
<div class="application-title">两江鱼复智能网联新能源汽车产业基地数字化平台</div>
|
||||
<div class="right">
|
||||
<div class="binary-strip">{{ binaryText }}</div>
|
||||
<div class="btn-container">
|
||||
<button class="nav-btn" :class="{ active: activePage === 'home' }" @click="handleBtn('home')">地图总览</button>
|
||||
<button class="nav-btn" :class="{ active: activePage === 'monitoring' }" @click="handleBtn('monitoring')">智能监控</button>
|
||||
<button class="nav-btn" :class="{ active: activePage === 'manualTakeover' }" @click="handleBtn('manualTakeover')">人工接管</button>
|
||||
<div class="cockpit-brand">
|
||||
<span>CMVR / INS</span>
|
||||
<strong>两江鱼复智能网联新能源汽车产业基地数字化平台</strong>
|
||||
</div>
|
||||
<div class="cockpit-nav-label"><span>工作视图</span><b>03</b></div>
|
||||
<nav class="btn-container" aria-label="巡检驾驶舱视图">
|
||||
<button class="nav-btn" :class="{ active: activePage === 'home' }" @click="handleBtn('home')">
|
||||
<span>01</span><strong>地图总览</strong><small>MAP OVERVIEW</small>
|
||||
</button>
|
||||
<button class="nav-btn" :class="{ active: activePage === 'monitoring' }" @click="handleBtn('monitoring')">
|
||||
<span>02</span><strong>智能监控</strong><small>LIVE MONITOR</small>
|
||||
</button>
|
||||
<button class="nav-btn" :class="{ active: activePage === 'manualTakeover' }" @click="handleBtn('manualTakeover')">
|
||||
<span>03</span><strong>人工接管</strong><small>MANUAL CONTROL</small>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="cockpit-clock">
|
||||
<span class="clock-status"><i></i> SYSTEM LIVE</span>
|
||||
<strong>{{ currentTime }}</strong>
|
||||
<small>{{ weekText }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -26,8 +31,6 @@ const emits = defineEmits(['activePage'])
|
||||
const currentTime = ref('')
|
||||
const weekText = ref('')
|
||||
|
||||
const binaryText = ref('13513034532438213')
|
||||
|
||||
const weekNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
|
||||
const updateClock = () => {
|
||||
const now = new Date();
|
||||
@ -41,122 +44,181 @@ const updateClock = () => {
|
||||
weekText.value = weekNames[now.getDay()]
|
||||
}
|
||||
|
||||
const genBinary = (len) => {
|
||||
let str = '';
|
||||
for (let i = 0; i < len; i++) str += Math.round(Math.random()).toString();
|
||||
return str;
|
||||
}
|
||||
|
||||
const animateBinary = () => {
|
||||
binaryText.value = genBinary(30)
|
||||
}
|
||||
|
||||
const activePage = ref('home')
|
||||
const handleBtn = (page) => {
|
||||
activePage.value = page
|
||||
emits("activePage", page);
|
||||
}
|
||||
|
||||
let clockTimer, binaryTimer;
|
||||
let clockTimer;
|
||||
onMounted(() => {
|
||||
updateClock();
|
||||
clockTimer = setInterval(updateClock, 1000);
|
||||
animateBinary()
|
||||
binaryTimer = setInterval(animateBinary, 400);
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(clockTimer)
|
||||
clearInterval(binaryTimer)
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header-container {
|
||||
// width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin: 0 24px;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
.cockpit-brand {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 164px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
gap: 14px;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
|
||||
.week {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application-title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
span {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.btn-container {
|
||||
.cockpit-nav-label {
|
||||
display: flex;
|
||||
height: 52px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px ;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 11px;
|
||||
|
||||
b {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.nav-btn {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-sm);
|
||||
display: grid;
|
||||
position: relative;
|
||||
min-height: 88px;
|
||||
grid-template-columns: 22px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
row-gap: 3px;
|
||||
padding: 16px 24px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
background: var(--min-bg-white);
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--min-primary-soft);
|
||||
border-color: var(--min-primary);
|
||||
color: var(--min-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.binary-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Orbitron', monospace;
|
||||
> span {
|
||||
width: 22px;
|
||||
grid-row: 1 / 3;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 10px;
|
||||
color: var(--min-text-placeholder);
|
||||
letter-spacing: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
strong {
|
||||
grid-column: 2;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
grid-column: 2;
|
||||
margin-left: 0;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--min-bg-page);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--min-primary-soft);
|
||||
|
||||
&::before { background: var(--min-primary); }
|
||||
> span,
|
||||
strong { color: var(--min-primary); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cockpit-clock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--min-border-light);
|
||||
|
||||
.clock-status {
|
||||
color: var(--min-primary);
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-right: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--min-primary);
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.cockpit-brand { min-height: 112px; }
|
||||
.cockpit-brand strong { font-size: 14px; line-height: 1.4; }
|
||||
.cockpit-nav-label,
|
||||
.cockpit-clock { display: none; }
|
||||
.btn-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.btn-container .nav-btn { min-height: 64px; padding: 12px; }
|
||||
.btn-container .nav-btn small { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -822,7 +822,7 @@ $panel-border: rgb(112 192 255 / 24%);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(23px, 3vw, 30px);
|
||||
font-size: 28px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 5px;
|
||||
text-shadow: 0 0 25px rgb(79 159 255 / 25%);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="inspection-cockpit">
|
||||
<div class="header">
|
||||
<aside class="header">
|
||||
<Header @active-page="activePage" />
|
||||
</div>
|
||||
</aside>
|
||||
<div class="body-box">
|
||||
<MapOverview v-if="currentPage === 'home'" />
|
||||
<ManualTakeover v-if="currentPage === 'manualTakeover'" />
|
||||
@ -34,21 +34,33 @@ const activePage = (page) => {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: var(--min-bg-page);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 248px minmax(0, 1fr);
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
background: var(--min-bg-white);
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
border-right: 1px solid var(--min-border-light);
|
||||
}
|
||||
|
||||
.body-box {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 176px minmax(0, 1fr);
|
||||
|
||||
.header {
|
||||
height: 176px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--min-border-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@ -61,11 +73,6 @@ const activePage = (page) => {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
margin: 0 24px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.page-container,
|
||||
> .body-box > .monitor-container {
|
||||
border: 1px solid var(--min-border-light);
|
||||
@ -100,6 +107,16 @@ const activePage = (page) => {
|
||||
background: var(--min-primary-soft) !important;
|
||||
}
|
||||
|
||||
.robot svg,
|
||||
.mode-item svg {
|
||||
color: var(--min-primary) !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.xgplayer-error .xgplayer-error-refresh {
|
||||
color: var(--min-primary) !important;
|
||||
}
|
||||
|
||||
.title,
|
||||
.container-title,
|
||||
.robot-state,
|
||||
@ -174,11 +191,6 @@ const activePage = (page) => {
|
||||
border-radius: var(--min-radius-base);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.header-container .left { display: none; }
|
||||
.application-title { justify-content: flex-start; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
> .body-box {
|
||||
overflow: auto;
|
||||
@ -205,10 +217,6 @@ const activePage = (page) => {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.header-container {
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
> .body-box {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@ -1,21 +1,30 @@
|
||||
<template>
|
||||
<div class="lock-container">
|
||||
<!-- 时钟 -->
|
||||
<section class="lock-visual">
|
||||
<div class="lock-brand"><span>CMVR / SECURE</span><strong>CONTROL DESK</strong></div>
|
||||
<div class="clock-group">
|
||||
<span>LOCAL TIME</span>
|
||||
<div class="lock-time">{{ currentTime }}</div>
|
||||
<div class="lock-date">{{ currentDate }}</div>
|
||||
</div>
|
||||
<div class="lock-state"><i></i><span>SESSION LOCKED</span></div>
|
||||
</section>
|
||||
|
||||
<!-- 锁屏卡片 -->
|
||||
<main class="lock-access">
|
||||
<div class="access-index"><span>ACCESS</span><strong>03</strong></div>
|
||||
<div class="lock-card">
|
||||
<div class="account-row">
|
||||
<div class="avatar-wrap">
|
||||
<img :src="userStore.avatar" class="lock-avatar" @error="onAvatarError" />
|
||||
<div class="lock-icon"><el-icon><Lock /></el-icon></div>
|
||||
</div>
|
||||
<div class="lock-username">{{ userStore.nickName }}</div>
|
||||
<div class="lock-hint">系统已锁定，请输入密码解锁</div>
|
||||
<div><span>LOCKED ACCOUNT</span><div class="lock-username">{{ userStore.nickName }}</div></div>
|
||||
</div>
|
||||
|
||||
<div class="input-label">账户密码</div>
|
||||
<div class="input-wrap" :class="{ shake: isShaking }">
|
||||
<input ref="passwordInput" v-model="password" type="password" placeholder="请输入登录密码" class="lock-input" @keydown.enter="handleUnlock" autocomplete="off" />
|
||||
<button class="unlock-btn" @click="handleUnlock" :disabled="loading">
|
||||
<button class="unlock-btn" title="解锁" aria-label="解锁" @click="handleUnlock" :disabled="loading">
|
||||
<el-icon v-if="!loading"><Right /></el-icon>
|
||||
<span v-else class="loading-dot">···</span>
|
||||
</button>
|
||||
@ -27,6 +36,7 @@
|
||||
<a href="javascript:;" @click="goLogin">退出重新登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -113,62 +123,115 @@ onBeforeUnmount(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.lock-container {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(440px, 36vw);
|
||||
background: var(--min-bg-page);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
font-family: var(--min-font-family);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lock-time {
|
||||
.lock-visual {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 42px 48px;
|
||||
background-image: url('../assets/images/login-background.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.lock-visual::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.lock-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
span { padding-right: 16px; border-right: 2px solid var(--min-primary); color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
strong { color: var(--min-text-primary); font-size: 13px; font-weight: 600; }
|
||||
}
|
||||
|
||||
.clock-group {
|
||||
> span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
}
|
||||
|
||||
.lock-time {
|
||||
margin: 12px 0 4px;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 48px;
|
||||
font-size: 72px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 8px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.lock-date {
|
||||
.lock-date { color: var(--min-text-secondary); font-size: 14px; }
|
||||
|
||||
.lock-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--min-text-regular);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
|
||||
i { width: 6px; height: 6px; border-radius: 50%; background: var(--min-primary); }
|
||||
}
|
||||
|
||||
.lock-access {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
padding: 56px 48px;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.access-index {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 32px;
|
||||
gap: 10px;
|
||||
color: var(--min-text-secondary);
|
||||
margin-bottom: 32px;
|
||||
letter-spacing: 0;
|
||||
font-size: 10px;
|
||||
|
||||
strong { color: var(--min-primary); font-size: 12px; font-weight: 600; }
|
||||
}
|
||||
|
||||
.lock-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(400px, calc(100vw - 32px));
|
||||
padding: 32px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-base);
|
||||
background: var(--min-bg-white);
|
||||
width: min(360px, 100%);
|
||||
}
|
||||
|
||||
.account-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: none;
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
|
||||
> div:last-child > span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.lock-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--min-border-light);
|
||||
object-fit: cover;
|
||||
@ -195,14 +258,14 @@ onBeforeUnmount(() => {
|
||||
color: var(--min-text-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 5px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.lock-hint {
|
||||
.input-label {
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 13px;
|
||||
margin-bottom: 28px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
@ -305,8 +368,11 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.lock-time { font-size: 40px; }
|
||||
.lock-date { margin-bottom: 24px; }
|
||||
.lock-card { padding: 24px; }
|
||||
.lock-container { grid-template-columns: 1fr; grid-template-rows: 220px minmax(0, 1fr); }
|
||||
.lock-visual { padding: 24px; }
|
||||
.lock-time { margin-top: 8px; font-size: 44px; }
|
||||
.lock-state { display: none; }
|
||||
.lock-access { padding: 64px 24px; align-items: flex-start; }
|
||||
.lock-card { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,31 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<section class="login-visual">
|
||||
<div class="visual-brand">
|
||||
<span class="visual-brand__index">CMVR / 2026</span>
|
||||
<strong>{{ title }}</strong>
|
||||
</div>
|
||||
<div class="visual-copy">
|
||||
<span>INTELLIGENT TEST OPERATIONS</span>
|
||||
<h1>机器人智能测试<br>运行中枢</h1>
|
||||
<div class="visual-modules">
|
||||
<span>设备接入</span>
|
||||
<span>流程编排</span>
|
||||
<span>巡检执行</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="login-access">
|
||||
<div class="access-index">
|
||||
<span>SECURE ACCESS</span>
|
||||
<strong>01</strong>
|
||||
</div>
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<div class="form-heading">
|
||||
<span>ACCOUNT</span>
|
||||
<h2>登录工作台</h2>
|
||||
</div>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
@ -40,27 +64,26 @@
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<div class="form-options">
|
||||
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
||||
<router-link v-if="register" class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
<el-form-item class="submit-row">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
<span v-if="!loading">进入系统</span>
|
||||
<span v-else>正在登录...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>{{ footerContent }}</span>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -167,26 +190,140 @@ getCookie()
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(440px, 36vw);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--min-bg-page);
|
||||
}
|
||||
.login::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
.login-visual {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
min-width: 0;
|
||||
padding: 42px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.08;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.login-visual::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.visual-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
|
||||
strong {
|
||||
max-width: 420px;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.visual-brand__index {
|
||||
padding-right: 18px;
|
||||
border-right: 2px solid var(--min-primary);
|
||||
color: var(--min-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.visual-copy {
|
||||
max-width: 620px;
|
||||
|
||||
> span {
|
||||
color: var(--min-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 14px 0 28px;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 52px;
|
||||
line-height: 1.14;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.visual-modules {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
|
||||
span {
|
||||
min-width: 104px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(31, 41, 55, 0.28);
|
||||
border-right: 0;
|
||||
color: var(--min-text-regular);
|
||||
background: rgba(255, 255, 255, 0.52);
|
||||
font-size: 12px;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid rgba(31, 41, 55, 0.28);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-access {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
padding: 42px clamp(36px, 5vw, 76px);
|
||||
border-left: 1px solid var(--min-border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.access-index {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 9px;
|
||||
|
||||
strong {
|
||||
color: var(--min-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.form-heading {
|
||||
margin-bottom: 40px;
|
||||
|
||||
span {
|
||||
color: var(--min-primary);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 8px 0 0;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 32px;
|
||||
color: var(--min-text-primary);
|
||||
@ -196,11 +333,9 @@ getCookie()
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: min(420px, calc(100% - 32px));
|
||||
padding: 40px 40px 20px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-base);
|
||||
background: var(--min-bg-white);
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
margin: 0 auto;
|
||||
.el-input {
|
||||
height: 40px;
|
||||
input {
|
||||
@ -213,6 +348,27 @@ getCookie()
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-options {
|
||||
min-height: 48px;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.submit-row {
|
||||
margin-bottom: 0;
|
||||
|
||||
:deep(.el-form-item__content),
|
||||
:deep(.el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
@ -228,11 +384,10 @@ getCookie()
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
color: var(--min-text-secondary);
|
||||
font-family: var(--min-font-family);
|
||||
@ -245,8 +400,65 @@ getCookie()
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.login-form {
|
||||
padding: 32px 24px 12px;
|
||||
.login {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 220px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.visual-brand strong,
|
||||
.visual-modules {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visual-copy h1 {
|
||||
margin: 8px 0 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.login-access {
|
||||
padding: 54px 24px 48px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.form-heading {
|
||||
margin-bottom: 28px;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.access-index {
|
||||
top: 18px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.el-login-footer {
|
||||
position: static;
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) and (min-width: 521px) {
|
||||
.login {
|
||||
grid-template-columns: minmax(0, 1fr) 440px;
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.visual-copy h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.visual-modules {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<main class="register-access">
|
||||
<div class="access-index"><span>ACCOUNT</span><strong>02</strong></div>
|
||||
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<div class="form-heading"><span>USER REGISTRATION</span><h2>创建账户</h2><p>{{ title }}</p></div>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerForm.username"
|
||||
@ -52,26 +54,26 @@
|
||||
<img :src="codeUrl" @click="getCode" class="register-code-img"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-form-item class="register-actions">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.prevent="handleRegister"
|
||||
>
|
||||
<span v-if="!loading">注 册</span>
|
||||
<span v-else>注 册 中...</span>
|
||||
<span v-if="!loading">注册账户</span>
|
||||
<span v-else>注册中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;">
|
||||
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
|
||||
</div>
|
||||
<router-link class="link-type" :to="'/login'">返回登录</router-link>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-register-footer">
|
||||
<span>{{ footerContent }}</span>
|
||||
</div>
|
||||
<div class="el-register-footer"><span>{{ footerContent }}</span></div>
|
||||
</main>
|
||||
<section class="register-visual">
|
||||
<div class="visual-brand"><span>CMVR / BID</span><strong>{{ title }}</strong></div>
|
||||
<div class="visual-copy"><span>CONTROL ENVIRONMENT</span><h1>统一测试运营<br>与设备控制</h1></div>
|
||||
<div class="visual-index"><span>FLOW</span><span>INSPECTION</span><span>CORPUS</span></div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -156,40 +158,61 @@ getCode()
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.register {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(440px, 36vw) minmax(0, 1fr);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--min-bg-page);
|
||||
}
|
||||
.register::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
|
||||
.register-visual {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 42px 48px;
|
||||
overflow: hidden;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.08;
|
||||
}
|
||||
.title {
|
||||
margin: 0 0 32px;
|
||||
color: var(--min-text-primary);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
|
||||
.register-visual::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.register-access {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 56px 48px 68px;
|
||||
background: var(--min-bg-white);
|
||||
}
|
||||
|
||||
.access-index {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 32px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--min-text-secondary);
|
||||
font-size: 10px;
|
||||
|
||||
strong { color: var(--min-primary); font-size: 12px; font-weight: 600; }
|
||||
}
|
||||
|
||||
.register-form {
|
||||
width: min(420px, calc(100% - 32px));
|
||||
padding: 40px 40px 20px;
|
||||
border: 1px solid var(--min-border-light);
|
||||
border-radius: var(--min-radius-base);
|
||||
background: var(--min-bg-white);
|
||||
width: min(360px, 100%);
|
||||
|
||||
.el-input {
|
||||
height: 40px;
|
||||
input {
|
||||
@ -202,6 +225,38 @@ getCode()
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-heading {
|
||||
margin-bottom: 32px;
|
||||
|
||||
> span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
h2 { margin: 8px 0 5px; color: var(--min-text-primary); font-size: 28px; font-weight: 600; }
|
||||
p { margin: 0; color: var(--min-text-secondary); font-size: 12px; }
|
||||
}
|
||||
|
||||
.visual-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
|
||||
span { padding-right: 18px; border-right: 2px solid var(--min-primary); color: var(--min-primary); font-size: 11px; font-weight: 600; }
|
||||
strong { max-width: 420px; color: var(--min-text-primary); font-size: 14px; font-weight: 600; }
|
||||
}
|
||||
|
||||
.visual-copy {
|
||||
max-width: 620px;
|
||||
|
||||
span { color: var(--min-primary); font-size: 10px; font-weight: 600; }
|
||||
h1 { margin: 14px 0 0; color: var(--min-text-primary); font-size: 52px; font-weight: 600; line-height: 1.14; }
|
||||
}
|
||||
|
||||
.visual-index {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span { min-width: 108px; padding: 10px 14px; border: 1px solid rgba(31, 41, 55, 0.28); border-right: 0; background: rgba(255, 255, 255, 0.52); color: var(--min-text-regular); font-size: 11px; }
|
||||
span:last-child { border-right: 1px solid rgba(31, 41, 55, 0.28); }
|
||||
}
|
||||
.register-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
@ -217,25 +272,43 @@ getCode()
|
||||
}
|
||||
}
|
||||
.el-register-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
bottom: 20px;
|
||||
color: var(--min-text-secondary);
|
||||
font-family: var(--min-font-family);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.register-actions :deep(.el-form-item__content) { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
|
||||
.register-actions .el-button { flex: 1; margin: 0; }
|
||||
.register-actions .link-type { white-space: nowrap; }
|
||||
.register-code-img {
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.register-form {
|
||||
padding: 32px 24px 12px;
|
||||
.register {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 220px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.register-visual {
|
||||
grid-row: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.visual-brand strong,
|
||||
.visual-index { display: none; }
|
||||
.visual-copy h1 { font-size: 28px; }
|
||||
.register-access { grid-row: 2; padding: 54px 24px 60px; align-items: flex-start; }
|
||||
|
||||
.register-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-heading h2 { font-size: 24px; }
|
||||
.el-register-footer { right: 24px; left: 24px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user