mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-07-01 16:49:22 +00:00
Enhance RandomPicker component with persistent dialog feature and clean up global styles by removing unnecessary whitespace. Update styles for hover effects and ensure consistent formatting across SCSS files.
This commit is contained in:
parent
3c722875dd
commit
590cffc6e6
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-dialog v-model="dialog" max-width="600" fullscreen-breakpoint="sm">
|
<v-dialog v-model="dialog" max-width="600" fullscreen-breakpoint="sm" persistent>
|
||||||
<v-card class="random-picker-card">
|
<v-card class="random-picker-card">
|
||||||
<v-card-title class="text-h5 d-flex align-center">
|
<v-card-title class="text-h5 d-flex align-center">
|
||||||
<v-icon icon="mdi-account-question" class="mr-2" />
|
<v-icon icon="mdi-account-question" class="mr-2" />
|
||||||
@ -49,7 +49,7 @@
|
|||||||
<div v-if="tempFilters.excludeExcluded">• 已排除不参与学生 ({{ excludedCount }}人)</div>
|
<div v-if="tempFilters.excludeExcluded">• 已排除不参与学生 ({{ excludedCount }}人)</div>
|
||||||
</div>
|
</div>
|
||||||
</v-tooltip><!-- 添加临时过滤选项 -->
|
</v-tooltip><!-- 添加临时过滤选项 -->
|
||||||
|
|
||||||
<div class="d-flex flex-wrap justify-center gap-2 mt-4">
|
<div class="d-flex flex-wrap justify-center gap-2 mt-4">
|
||||||
<v-chip :color="tempFilters.excludeLate ? 'warning' : 'default'"
|
<v-chip :color="tempFilters.excludeLate ? 'warning' : 'default'"
|
||||||
:variant="tempFilters.excludeLate ? 'elevated' : 'text'"
|
:variant="tempFilters.excludeLate ? 'elevated' : 'text'"
|
||||||
@ -64,7 +64,7 @@
|
|||||||
{{ tempFilters.excludeAbsent ? '排除' : '包含' }}请假学生
|
{{ tempFilters.excludeAbsent ? '排除' : '包含' }}请假学生
|
||||||
</v-chip>
|
</v-chip>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<v-chip :color="tempFilters.excludeExcluded ? 'grey' : 'default'"
|
<v-chip :color="tempFilters.excludeExcluded ? 'grey' : 'default'"
|
||||||
:variant="tempFilters.excludeExcluded ? 'elevated' : 'text'"
|
:variant="tempFilters.excludeExcluded ? 'elevated' : 'text'"
|
||||||
|
@ -4,12 +4,12 @@
|
|||||||
.hover-card {
|
.hover-card {
|
||||||
transition: transform 0.2s ease, box-shadow 0.3s ease;
|
transition: transform 0.2s ease, box-shadow 0.3s ease;
|
||||||
will-change: transform, box-shadow;
|
will-change: transform, box-shadow;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
|
||||||
@ -22,7 +22,7 @@
|
|||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|
||||||
&.v-btn--icon {
|
&.v-btn--icon {
|
||||||
min-height: 56px;
|
min-height: 56px;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
@ -33,7 +33,7 @@
|
|||||||
.ripple-enhanced {
|
.ripple-enhanced {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -41,14 +41,14 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
|
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
|
||||||
rgba(255, 255, 255, 0.2) 0%,
|
rgba(255, 255, 255, 0.2) 0%,
|
||||||
rgba(255, 255, 255, 0) 60%);
|
rgba(255, 255, 255, 0) 60%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s;
|
transition: opacity 0.5s;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active::after {
|
&:active::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
@ -76,11 +76,12 @@ html {
|
|||||||
.fullscreen-mode {
|
.fullscreen-mode {
|
||||||
.v-app-bar {
|
.v-app-bar {
|
||||||
background-color: rgba(var(--v-theme-surface-variant), 0.85) !important;
|
background-color: rgba(var(--v-theme-surface-variant), 0.85) !important;
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-window {
|
.main-window {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user