zzy
/
fjrcloud-community-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

界面样式调整

master
zzy 2026-04-25 14:28:48 +08:00
parent 9e579d589b
commit 19825c7bc3
2 changed files with 71 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
index.html
View File

@ -45,6 +45,7 @@
font-size: 20px;
font-weight: bold;
text-align: center;
color: #333;
}
.app-loading .app-loading-logo {
@ -52,97 +53,91 @@
margin: 0 auto 15px auto;
}
.app-loading .app-loading-item {
.app-loading .app-loading-spinner {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
vertical-align: middle;
}
.app-loading .app-loading-spinner::before,
.app-loading .app-loading-spinner::after {
content: '';
position: absolute;
border: 3px solid #1677ff;
border-radius: 50%;
}
.app-loading .app-loading-outter {
position: absolute;
width: 100%;
height: 100%;
border: 4px solid #2d8cf0;
border-bottom: 0;
border-left-color: transparent;
border-radius: 50%;
animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
.app-loading .app-loading-spinner::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
.app-loading .app-loading-inner {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
.app-loading .app-loading-spinner::after {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-bottom-color: transparent;
animation: spin 1.5s linear infinite reverse;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.app-loading .pulse-dot {
position: relative;
width: 40px;
height: 40px;
border: 4px solid #87bdff;
border-right: 0;
border-top-color: transparent;
margin: 20px auto 0;
}
.app-loading .pulse-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: #1677ff;
border-radius: 50%;
animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
animation: pulse 1.5s ease-in-out infinite;
}
@-webkit-keyframes loader-outter {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-outter {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes loader-inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
50% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.5;
}
}
</style>
<div class="app-loading">
<div class="app-loading-wrap">
<div class="app-loading-title">
<img src="/logo.gif" class="app-loading-logo" alt="Logo" />
<div class="app-loading-logo" style="display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; margin: 0 auto 15px auto; background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); border-radius: 20px; box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3);">
<svg viewBox="0 0 1024 1024" width="60" height="60" fill="white">
<path d="M512 64L128 256v512l384 192 384-192V256L512 64zm0 72l304 152v448L512 888 208 736V288L512 136z"/>
<path d="M288 512h128l64-160 96 288 64-128h128" stroke="white" stroke-width="40" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="app-loading-title">%VITE_APP_TITLE%</div>
</div>
<div class="app-loading-item">
<div class="app-loading-outter"></div>
<div class="app-loading-inner"></div>
</div>
<div class="app-loading-spinner"></div>
<div class="pulse-dot"></div>
</div>
</div>
</div>

19
src/layout/components/ToolHeader.vue
View File

@ -63,7 +63,7 @@ export default defineComponent({
{layout.value !== 'top' ? (
<div class="h-full flex items-center">
{hamburger.value && layout.value !== 'cutMenu' ? (
<Collapse class="custom-hover" color="#fff"></Collapse>
<Collapse class="custom-hover text-white hover:text-white/85"></Collapse>
) : undefined}
{breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
</div>
@ -71,20 +71,19 @@ export default defineComponent({
<div class="h-full flex items-center">
{hasTenantVisitPermission.value ? <TenantVisit /> : undefined}
{screenfull.value ? (
<Screenfull class="custom-hover" color="#fff"></Screenfull>
<Screenfull class="custom-hover text-white hover:text-white/85"></Screenfull>
) : undefined}
{search.value ? <RouterSearch isModal={false} color="#fff"/> : undefined}
{search.value ? <RouterSearch isModal={false} class="text-white hover:text-white/85"/> : undefined}
{size.value ? (
<SizeDropdown class="custom-hover" color="#fff"></SizeDropdown>
<SizeDropdown class="custom-hover text-white hover:text-white/85"></SizeDropdown>
) : undefined}
{locale.value ? (
<LocaleDropdown
class="custom-hover"
color="#fff"
class="custom-hover text-white hover:text-white/85"
></LocaleDropdown>
) : undefined}
{message.value ? (
<Message class="custom-hover" color="#fff"></Message>
<Message class="custom-hover text-white hover:text-white/85"></Message>
) : undefined}
<UserInfo></UserInfo>
</div>
@ -100,7 +99,7 @@ $prefix-cls: #{$namespace}-tool-header;
.#{$prefix-cls} {
transition: left var(--transition-time-02);
.custom-hover {
:deep(.custom-hover) {
cursor: pointer;
transition: all 0.3s;
border-radius: 4px;
@ -110,9 +109,5 @@ $prefix-cls: #{$namespace}-tool-header;
background-color: rgba(255, 255, 255, 0.2);
}
}
:deep(.layout-border__right) {
border-right: none !important;
}
}
</style>