52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { setRandomBGCL } from "../utils/randomBGCL.js";
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
text: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
imageSrc: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 200
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const imageLoaded = ref(false);
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="image-container" :style="{background: setRandomBGCL(text), height: size + 'px'}">
|
||
|
|
<img :src="imageSrc" alt="image" class="image"
|
||
|
|
:style="{height: size + 'px', display: imageLoaded ? 'block' : 'none'}"
|
||
|
|
@load="imageLoaded = true"
|
||
|
|
@error="imageLoaded = false" />
|
||
|
|
<div v-if="!imageLoaded" class="cover-character" :style="{fontSize: size + 'px'}">
|
||
|
|
{{ text[0] }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.image-container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.image-container .cover-character {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
color: gray;
|
||
|
|
mix-blend-mode: difference;
|
||
|
|
}
|
||
|
|
.image {
|
||
|
|
width: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|