102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<template>
|
|
<div class="full-width">
|
|
<transition name="slide-vertical" mode="out-in">
|
|
<div class="logo" :key="debouncedLogoText">
|
|
<span class="text">{{ debouncedLogoText }}</span>
|
|
<div class="underline full-width"></div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _debounce from "lodash.debounce";
|
|
|
|
const debounceLogoText = _debounce((self, newValue) => {
|
|
self.debouncedLogoText = newValue;
|
|
}, 200);
|
|
|
|
export default {
|
|
name: "CtexxxLogo",
|
|
created() {
|
|
this.debouncedLogoText = this.text || "ctexxx";
|
|
},
|
|
props: {
|
|
text: String
|
|
},
|
|
data() {
|
|
return {
|
|
debouncedLogoText: ""
|
|
}
|
|
},
|
|
watch: {
|
|
text(newValue) {
|
|
debounceLogoText(this, newValue || "ctexxx");
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~@/assets/_responsive";
|
|
|
|
.slide-vertical-enter-active {
|
|
transition: all 0.5s ease-out;
|
|
}
|
|
|
|
.slide-vertical-leave-active {
|
|
transition: all 0.5s ease-in;
|
|
}
|
|
|
|
.slide-vertical-enter-to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.slide-vertical-enter {
|
|
transform: translateY(-100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-vertical-leave-to {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.logo {
|
|
user-select: none;
|
|
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
|
|
& > .text {
|
|
font-family: 'Montserrat Alternates', sans-serif;
|
|
|
|
font-size: 5em;
|
|
|
|
color: #c34545;
|
|
text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
|
|
|
|
@include desktop {
|
|
font-size: 12em;
|
|
}
|
|
}
|
|
|
|
& > .underline {
|
|
transform: translateY(-0.7em);
|
|
|
|
height: 3px;
|
|
|
|
background: white;
|
|
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
|
|
|
|
@include desktop {
|
|
transform: translateY(-2em);
|
|
|
|
height: 5px;
|
|
}
|
|
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|