| | |
|---|
| | | <transition name="sidebarLogoFade">
|
|---|
| | | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
|---|
| | | <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="公司Logo" />
|
|---|
| | | <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1> |
|---|
| | | <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1>
|
|---|
| | | </router-link>
|
|---|
| | | <router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
|---|
| | | <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="公司Logo" />
|
|---|
| | | <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1> |
|---|
| | | <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1>
|
|---|
| | | </router-link>
|
|---|
| | | </transition>
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | opacity: 0;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .sidebar-logo-container { |
|---|
| | | position: relative; |
|---|
| | | width: 100% !important; |
|---|
| | | height: 56px !important; |
|---|
| | | line-height: 56px; |
|---|
| | | background: rgba(255, 255, 255, 0.78); |
|---|
| | | border: 1px solid var(--surface-border); |
|---|
| | | border-radius: 0 22px 22px 0; |
|---|
| | | text-align: center; |
|---|
| | | overflow: hidden; |
|---|
| | | box-shadow: var(--shadow-sm); |
|---|
| | | |
|---|
| | | & .sidebar-logo-link { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 18px 0 14px; |
|---|
| | | |
|---|
| | | & .sidebar-logo { |
|---|
| | | width: auto; |
|---|
| | | max-width: 132px; |
|---|
| | | max-height: 34px; |
|---|
| | | height: auto; |
|---|
| | | vertical-align: middle; |
|---|
| | | object-fit: contain; |
|---|
| | | object-position: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & .sidebar-title { |
|---|
| | | display: inline-block; |
|---|
| | | margin: 0; |
|---|
| | | color: var(--text-primary); |
|---|
| | | font-weight: 600; |
|---|
| | | line-height: 1.2; |
|---|
| | | font-size: 14px; |
|---|
| | | font-family: "Segoe UI", "PingFang SC", sans-serif; |
|---|
| | | vertical-align: middle; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .sidebar-logo-container {
|
|---|
| | | position: relative;
|
|---|
| | | width: 100% !important;
|
|---|
| | | height: 56px !important;
|
|---|
| | | line-height: 56px;
|
|---|
| | | background: rgba(255, 255, 255, 0.78);
|
|---|
| | | border: 1px solid var(--surface-border);
|
|---|
| | | border-radius: 0 22px 22px 0;
|
|---|
| | | text-align: center;
|
|---|
| | | overflow: hidden;
|
|---|
| | | box-shadow: var(--shadow-sm);
|
|---|
| | |
|
|---|
| | | & .sidebar-logo-link {
|
|---|
| | | height: 100%;
|
|---|
| | | width: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | align-items: center;
|
|---|
| | | justify-content: center;
|
|---|
| | | padding: 0 18px 0 14px;
|
|---|
| | |
|
|---|
| | | & .sidebar-logo {
|
|---|
| | | width: auto;
|
|---|
| | | max-width: 250px;
|
|---|
| | | max-height: 50px;
|
|---|
| | | height: auto;
|
|---|
| | | vertical-align: middle;
|
|---|
| | | object-fit: contain;
|
|---|
| | | object-position: center;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | & .sidebar-title {
|
|---|
| | | display: inline-block;
|
|---|
| | | margin: 0;
|
|---|
| | | color: var(--text-primary);
|
|---|
| | | font-weight: 600;
|
|---|
| | | line-height: 1.2;
|
|---|
| | | font-size: 14px;
|
|---|
| | | font-family: "Segoe UI", "PingFang SC", sans-serif;
|
|---|
| | | vertical-align: middle;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &.collapse {
|
|---|
| | | .sidebar-logo-link { |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sidebar-logo { |
|---|
| | | max-width: 30px; |
|---|
| | | max-height: 30px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | .sidebar-logo-link {
|
|---|
| | | padding: 0;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .sidebar-logo {
|
|---|
| | | max-width: 30px;
|
|---|
| | | max-height: 30px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
