127 lines
2.4 KiB
Vue
127 lines
2.4 KiB
Vue
<script setup>
|
|
import {ref} from 'vue';
|
|
import {setRandomBGCL} from "../utils/randomBGCL.js";
|
|
|
|
const props = defineProps({
|
|
tool: Object
|
|
});
|
|
|
|
const hover = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<router-link :to="'/tools/'+tool.id">
|
|
<div
|
|
class="tool-box"
|
|
@mouseover="hover = true"
|
|
@mouseleave="hover = false"
|
|
>
|
|
<div class="image-container" :style="{background: setRandomBGCL(tool.title)}">
|
|
<div class="cover-character">{{ tool.title[0] }}</div>
|
|
<img v-if="tool.image" :src="tool.image" :alt="tool.title"/>
|
|
</div>
|
|
<div class="text"><h3>{{ tool.title }}</h3>
|
|
<p>{{ tool.description }}</p></div>
|
|
<div class="text-background">
|
|
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tool-box {
|
|
position: relative;
|
|
width: 170px;
|
|
height: 225px;
|
|
border: cyan solid 1px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-light .tool-box {
|
|
border: #ffb74d solid 1px;
|
|
}
|
|
|
|
.tool-box:hover {
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.image-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image-container .cover-character {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 200px;;
|
|
font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
|
|
color: gray;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
.image-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.text-background {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: linear-gradient(to top, black, transparent);
|
|
color: white;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.text {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: linear-gradient(to top, black, transparent);
|
|
color: white;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
z-index: 10;
|
|
}
|
|
|
|
.text h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
white-space: nowrap;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.text p {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.tool-box:hover .text-background {
|
|
background: linear-gradient(to top, black 60%, transparent);
|
|
transform: scaleY(5);
|
|
}
|
|
|
|
.tool-box:hover h3 {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.tool-box:hover p {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
</style>
|