自己动手，改了下mp的样式。
添加了一些黑色元素、透明、动画、和鼠标交互悬浮效果等。
- pc效果图：
- 手机效果图：
食用方法：
mp的右上角主题风格自定义添加如下：
html {
background-image: url(https://img.picgo.net/2024/07/06/17104778532001710477853973c09137638bd261.jpg);
background-attachment: fixed;
background-size: cover;
height: 100%;
}
body, #app, .v-application {
height: 100% !important;
min-height: initial !important;
background: none !important;
backdrop-filter: blur(2px);
transition: transform 0.5s ease, box-shadow 0.5s ease;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
animation: bodyFadeIn 1s;
}
@keyframes bodyFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.layout-wrapper {
height: 100%;
overflow: auto;
}
::-webkit-scrollbar-thumb {
background: rgba(var(--v-theme-perfect-scrollbar-thumb),0.8) !important;
transition: background 0.3s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background: #a1a1a1bb !important;
}
.v-application, .v-card--variant-elevated .v-list {
background: none !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.layout-nav-type-vertical .layout-vertical-nav {
background: rgba(var(--v-theme-background),0.3);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.v-card, .v-list-item, .v-field--variant-solo, .v-field--variant-solo-filled, .v-field--variant-solo-inverted {
background: rgba(var(--v-theme-background),0.3);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.v-card:hover, .v-list-item:hover, .v-field--variant-solo:hover, .v-field--variant-solo-filled:hover, .v-field--variant-solo-inverted:hover {
transform: scale(1.01);
box-shadow: 0 0 25px rgba(0,0,0,0.8);
}
.v-dialog .v-card {
background: rgba(var(--v-theme-background),0.5);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.v-toolbar {
background: rgba(var(--v-table-header-background),0.3) !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.v-list, .v-application .fc {
background: rgba(var(--v-theme-surface),0.3) !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.v-application .fc .fc-scrollgrid-section-sticky > * {
background: rgba(var(--v-theme-surface),0.2) !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.navbar-blur.layout-navbar .navbar-content-container, .v-table {
background: none !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.v-data-table th, .v-data-table td {
background: rgba(var(--v-theme-surface),0.4) !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.v-skeleton-loader {
background: rgba(var(--v-theme-surface),0.2) !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.bg-primary {
background-color: rgba(0, 0, 0, 0.6) !important;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
@media (max-width: 600px) {
body, #app, .v-application {
backdrop-filter: blur(4px);
}
.v-card, .v-list-item, .v-field--variant-solo, .v-field--variant-solo-filled, .v-field--variant-solo-inverted {
box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.v-card:hover, .v-list-item:hover, .v-field--variant-solo:hover, .v-field--variant-solo-filled:hover, .v-field--variant-solo-inverted:hover {
transform: scale(1.01);
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
}
if(window.hljsLoader && !document.currentScr(๐•ᴗ•๐).parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
window.hljsLoader.highlightBlocks(document.currentScr(๐•ᴗ•๐).parentNode);
}
可自行更换背景
将background-image: url(https://img.picgo.net/2024/07/06/17104778532001710477853973c09137638bd261.jpg);里的url更换成你自己喜欢的即可。
蒙眼银发女背景图地址：https://img.picgo.net/2024/07/06/17104778532001710477853973c09137638bd261.jpg
