diff --git a/src/components/ht/Ht.vue b/src/components/ht/Ht.vue index 3696bc9..64e4035 100644 --- a/src/components/ht/Ht.vue +++ b/src/components/ht/Ht.vue @@ -1418,9 +1418,10 @@ watch(budgetRefreshSignature, (next, prev) => {
+ { chosen-class="ht-sortable-chosen" drag-class="ht-sortable-drag" :class="[ - 'grid grid-cols-1 pb-4 pr-4', + 'grid grid-cols-1 pb-4 pr-4 pt-3', isListLayout ? 'gap-2' : 'gap-4', !isListLayout && 'md:grid-cols-2 lg:grid-cols-3' ]" @@ -1551,12 +1552,18 @@ watch(budgetRefreshSignature, (next, prev) => { - +
+
暂无合同卡片
+
赶紧来添加吧
+
{
+ @@ -1783,6 +1791,7 @@ watch(budgetRefreshSignature, (next, prev) => { .ht-contract-scroll-area :deep([data-slot='scroll-area-viewport']) { overscroll-behavior: contain; scroll-snap-type: y mandatory; + padding-top: 6px; } .ht-contract-scroll-area.is-dragging :deep([data-slot='scroll-area-viewport']) { @@ -1804,7 +1813,84 @@ watch(budgetRefreshSignature, (next, prev) => { will-change: transform, opacity; transform: translate3d(0, 0, 0); backface-visibility: hidden; - contain: paint; + isolation: isolate; + overflow: visible; + z-index: 0; + transition: + transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), + box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1), + border-color 180ms ease; + box-shadow: + 0 1px 2px hsl(var(--foreground) / 0.04), + 0 6px 16px hsl(var(--foreground) / 0.06); +} + +.ht-contract-card::before { + content: ''; + position: absolute; + inset: -4px; + border-radius: inherit; + pointer-events: none; + background: linear-gradient( + 130deg, + hsl(var(--primary) / 0.42) 0%, + hsl(var(--primary) / 0.22) 36%, + hsl(var(--foreground) / 0.09) 70%, + transparent 100% + ); + opacity: 0; + transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1); +} + +.ht-contract-card::after { + content: ''; + position: absolute; + left: 6px; + right: 6px; + bottom: -30px; + height: 52px; + border-radius: 999px; + pointer-events: none; + background: + radial-gradient(ellipse at center, + hsl(var(--primary) / 0.42) 0%, + hsl(var(--primary) / 0.24) 34%, + hsl(var(--foreground) / 0.20) 58%, + transparent 86%); + filter: blur(18px); + opacity: 0; + transform: translateY(4px); + transition: + opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1), + transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); +} + +.ht-contract-card:hover { + transform: translate3d(0, -5px, 0); + z-index: 14; + box-shadow: + 0 0 0 1.5px hsl(var(--primary) / 0.62), + 0 0 28px hsl(var(--primary) / 0.34), + 0 0 56px hsl(var(--primary) / 0.22), + 0 16px 34px hsl(var(--foreground) / 0.22), + 0 32px 60px hsl(var(--foreground) / 0.18); + border-color: hsl(var(--primary) / 0.72); +} + +.ht-contract-card:hover::before { + opacity: 1; +} + +.ht-contract-card:hover::after { + opacity: 0.95; + transform: translateY(0); +} + +.ht-contract-card:active { + transform: translate3d(0, -2px, 0); + box-shadow: + 0 5px 12px hsl(var(--foreground) / 0.10), + 0 10px 20px hsl(var(--foreground) / 0.10); } .ht-contract-card--ready { @@ -1834,7 +1920,20 @@ watch(budgetRefreshSignature, (next, prev) => { .ht-contract-card--selected { border-color: hsl(var(--primary)); - box-shadow: 0 0 0 1px hsl(var(--primary) / 0.22); + transform: translate3d(0, -4px, 0); + box-shadow: + 0 0 0 1px hsl(var(--primary) / 0.34), + 0 12px 24px hsl(var(--primary) / 0.18), + 0 22px 36px hsl(var(--foreground) / 0.10); +} + +.ht-contract-card--selected::before { + opacity: 1; +} + +.ht-contract-card--selected::after { + opacity: 1; + transform: translateY(0); } @keyframes ht-card-slide-in { @@ -1883,6 +1982,19 @@ watch(budgetRefreshSignature, (next, prev) => { opacity: 1; transform: none; } + + .ht-contract-card, + .ht-contract-card:hover, + .ht-contract-card:active, + .ht-contract-card--selected { + transition: none; + transform: none; + } + + .ht-contract-card::before, + .ht-contract-card::after { + transition: none; + } } diff --git a/src/components/ht/HtContractSummary.vue b/src/components/ht/HtContractSummary.vue index ae8a1b3..e2c4830 100644 --- a/src/components/ht/HtContractSummary.vue +++ b/src/components/ht/HtContractSummary.vue @@ -1,7 +1,7 @@