aoshisen/card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 背景颜色

Browse Source
This commit is contained in:
aoshisen 2026-02-06 11:07:51 +08:00
parent 75761d90e0
commit aa52a881b2
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Card.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useEditorStore } from '@/stores/editor'; import { useEditorStore } from '@/stores/editor';
import { useHoverTiltStore } from '@/stores/hoverTilt'; import { useHoverTiltStore } from '@/stores/hoverTilt';
import {computed, watchEffect} from 'vue'; import { computed, watchEffect } from 'vue';
const store = useEditorStore(); const store = useEditorStore();
const tilt_store = useHoverTiltStore(); const tilt_store = useHoverTiltStore();
@ -23,7 +23,8 @@ img {
<!-- 利用这个元素承载 style 穿透到hover-tilt 内 --> <!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
<div class="container" :style="borderRadiusStyle"> <div class="container" :style="borderRadiusStyle">
<hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt specular-highlight"> <hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt specular-highlight">
<img :src="store.formData.image?.src ?? 'https://images.pokemontcg.io/swsh4/25_hires.png'" :style="store.imageStyle" /> <img :src="store.formData.image?.src ?? 'https://images.pokemontcg.io/swsh4/25_hires.png'"
:style="store.imageStyle" />
</hover-tilt> </hover-tilt>
</div> </div>
</template> </template>
@ -32,13 +33,20 @@ img {
.container { .container {
.hover-tilt { .hover-tilt {
&::part(tilt), &::part(tilt) {
&::part(container) {
&::before { &::before {
border-radius: var(--border-radius, 0px); border-radius: var(--border-radius, 0px);
overflow: hidden; overflow: hidden;
} }
} }
&::part(container) {
&::before {
border-radius: var(--border-radius, 0px);
overflow: hidden;
background-image: none !important;
}
}
} }
} }
</style> </style>