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

添加跟换图片功能

Browse Source
This commit is contained in:
hantao 2026-02-06 10:54:29 +08:00
parent f0b652c600
commit 75761d90e0
6 changed files with 130 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/assets/main.css
View File

@ -3,8 +3,8 @@ body,
html {
margin: 0;
padding: 0;
background-color: #0f0f0f;
color: white;
background-color: #f3f2f2;
color: #2d2c2c;
font-family: 'Inter', system-ui, sans-serif;
overflow: hidden;
}
@ -15,3 +15,51 @@ html {
padding: 0;
font-weight: normal;
}
/* Custom Colored Gradient */
:global(.custom-gradient) {
--hover-tilt-custom-gradient: radial-gradient(
circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
rgba(125, 255, 194, calc(var(--hover-tilt-glare-intensity, 1) * 0.5)) 10%,
rgba(255, 255, 255, 0) 80%,
transparent 70%
);
}
/* Specular Highlight */
:global(.specular-highlight) {
--hover-tilt-custom-gradient: radial-gradient(
80% 100% at var(--gradient-x, 50%) var(--gradient-y, 50%),
rgb(255 255 255 / calc(var(--hover-tilt-glare-intensity, 1))) 50%,
transparent 55%
);
}
/* Aurora Sweep */
:global(.aurora-sweep) {
--hover-tilt-custom-gradient: conic-gradient(
from calc(var(--hover-tilt-angle, 0)) at center center,
rgba(255, 255, 255, calc(var(--hover-tilt-glare-intensity, 1) * 0.9)),
rgba(6, 182, 212, calc(var(--hover-tilt-glare-intensity, 1) * 0.7)),
rgba(255, 255, 255, calc(var(--hover-tilt-glare-intensity, 1) * 0.9))
);
}
/* Luminance Beam */
:global(.luminance-beam) {
--hover-tilt-custom-gradient: linear-gradient(
120deg,
rgb(0 0 0 / 0) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2) - 60%),
rgb(249 218 173 / var(--hover-tilt-glare-intensity, 1)) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2)),
rgb(0 0 0 / 0) calc((var(--gradient-x, 50%) / 2 + var(--gradient-y, 50%) / 2) + 60%)
);
}
/* Inverted Gradient */
:global(.inverted-gradient) {
--hover-tilt-custom-gradient: radial-gradient(
200% 200% at calc( var(--gradient-x, 50%) * 2 - 50% ) calc( var(--gradient-y, 50%) * 2 - 50% ),
transparent 30%,
rgb(255 255 255 / var(--hover-tilt-glare-intensity, 1)) 80%
);
}

6
src/components/Card.vue
View File

@ -9,10 +9,6 @@ const borderRadiusStyle = computed(() => ({
'--border-radius': store.formData['border-radius'] + 'px'
}));
watchEffect(() => {
console.log(tilt_store.tiltProps.shadow)
});
</script>
@ -26,7 +22,7 @@ img {
<template>
<!-- 利用这个元素承载 style 穿透到hover-tilt 内 -->
<div class="container" :style="borderRadiusStyle">
<hover-tilt v-bind="tilt_store.tiltProps" class="hover-tilt">
<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" />
</hover-tilt>
</div>

11
src/const/editor.ts
View File

@ -25,9 +25,18 @@ const editorConfig = [
step: 10
}
},
{
label: "padding",
value: 10,
params: {
min: 0,
step: 1,
max: 100
}
},
{
label: "background-color",
value: "#fff",
value: "#fffffff0",
params: {}
}
].map((i, index) => ({ ...i, id: index }));

22
src/const/hoverTilt.ts
View File

@ -28,6 +28,24 @@ export const hoverTiltConfig = [
},
//TODO:springOptions @see https://hover-tilt.simey.me/options/props/#springoptions
//TODO:tiltSpringOptions @see https://hover-tilt.simey.me/options/props/#tiltspringoptions
{
label: "stiffness",
value: 0.7,
params: {
min: 0,
max: 1,
step: 0.01
}
},
{
label: "damping",
value: 0.7,
params: {
min: 0,
max: 1,
step: 0.01
}
},
{
label: "enter-delay",
value: 0,
@ -48,8 +66,8 @@ export const hoverTiltConfig = [
},
{
label: "shadow2",
value: true,
label: "shadow",
value: false,
params: {
}
},

14
src/stores/editor.ts
View File

@ -3,7 +3,7 @@ import { reactive, computed } from 'vue'
import { EditorFolder } from '@/const/editor'
// 定义哪些属性需要添加 px 单位
const PX_PROPERTIES = ['width', 'border-radius']
const PX_PROPERTIES = ['width', 'border-radius', 'padding']
const TILT_PROPERTIES = ["border-radius"]
export const useEditorStore = defineStore('editor', () => {
@ -12,10 +12,20 @@ export const useEditorStore = defineStore('editor', () => {
// 初始化表单数据
function initializeFormData() {
let spring = { stiffness: 0.6, damping: 0.7 };
EditorFolder.children.forEach((item: any) => {
if (!(item.label in formData)) {
formData[item.label] = item.value
if (item.label == 'stiffness'){
spring.stiffness = item.value
}else if (item.label == 'damping'){
spring.damping = item.value
}else {
formData[item.label] = item.value
}
}
formData['spring-options'] = JSON.stringify(spring)
formData['tilt-spring-options'] = JSON.stringify(spring)
})
}

66
src/stores/hoverTilt.ts
View File

@ -1,37 +1,45 @@
import { defineStore } from 'pinia'
import { reactive, computed } from 'vue'
import { TiltFolder } from '@/const/hoverTilt'
import {defineStore} from 'pinia'
import {reactive, computed} from 'vue'
import {TiltFolder} from '@/const/hoverTilt'
export const useHoverTiltStore = defineStore('hoverTilt', () => {
// 存储 hover-tilt 配置数据
const formData = reactive<Record<string, any>>({})
// 存储 hover-tilt 配置数据
const formData = reactive<Record<string, any>>({})
// 初始化表单数据
function initializeFormData() {
TiltFolder.children.forEach((item: any) => {
if (!(item.label in formData)) {
formData[item.label] = item.value
}
// 初始化表单数据
function initializeFormData() {
TiltFolder.children.forEach((item: any) => {
if (!(item.label in formData)) {
formData[item.label] = item.value
}
})
}
// 获取转换后的 props 对象，将驼峰命名转换为连字符命名
const tiltProps = computed(() => {
const props: Record<string, any> = {}
let spring = {stiffness: 0.6, damping: 0.7};
Object.entries(formData).forEach(([key, value]) => {
if (key == 'stiffness') {
spring.stiffness = value
} else if (key == 'damping') {
spring.damping = value
} else if (value !== false) {
props[key] = value;
}
})
props['spring-options'] = JSON.stringify(spring)
props['tilt-spring-options'] = JSON.stringify(spring)
return props
})
}
// 获取转换后的 props 对象，将驼峰命名转换为连字符命名
const tiltProps = computed(() => {
const props: Record<string, any> = {}
Object.entries(formData).forEach(([key, value]) => {
if (value !== undefined && value !== false) {
props[key] = value
}
})
return props
})
return {
formData,
tiltProps,
initializeFormData,
return {
formData,
tiltProps,
initializeFormData,
}
}
}, {
persist: false
persist: false
})