You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
906 B
48 lines
906 B
6 months ago
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<!-- 方块盒子 -->
|
||
|
|
<div class="item" ref="cardRef1"></div>
|
||
|
|
<!-- 方块盒子 -->
|
||
|
|
<div class="item" ref="cardRef2"></div>
|
||
|
|
<!-- 方块盒子 -->
|
||
|
|
<div class="item" ref="cardRef3"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useLightCard } from './js/use-light-card.ts';
|
||
|
|
|
||
|
|
const { cardRef: cardRef1 } = useLightCard();
|
||
|
|
const { cardRef: cardRef2 } = useLightCard({
|
||
|
|
light: {
|
||
|
|
color: '#ffffff',
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const { cardRef: cardRef3 } = useLightCard({
|
||
|
|
light: {
|
||
|
|
color: 'yellow',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
background: black;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 200px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
position: relative;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
background: #1c1c1f;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|