153 lines
3.8 KiB
Vue
153 lines
3.8 KiB
Vue
<script setup>
|
|
import CloseIcon from '../assets/icons/close.svg'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
|
|
<Moveable
|
|
className="moveable"
|
|
:target="$refs.aboutPannel"
|
|
:draggable="true"
|
|
@drag="onDrag"
|
|
/>
|
|
<div class="windowTitle">
|
|
<div class="titleContent">
|
|
<p>./About.333</p>
|
|
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
|
|
<CloseIcon name="close" class="icon"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p id="about_text">
|
|
si vous êtes là c'est que vous voulez en savoir plus,
|
|
<br>
|
|
alors voici quelques infos sur mes pratiques :
|
|
<br><br>
|
|
je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller
|
|
<br>
|
|
PENDANT DES SIÈCLES!
|
|
<br><br>
|
|
je travaille une esthétique punk, brutaliste
|
|
<br>
|
|
et maximaliste, et utilise une matière première
|
|
<br>
|
|
de seconde main, voire recyclée, trouvée dans la rue,
|
|
<br>
|
|
les poubelles, etc.
|
|
<br><br>
|
|
je produit des accessoires à partir de rien (vraiment !)
|
|
<br>
|
|
et je custom des vêtements, découper, recoudre, rajouter, enlever, teinter, décolorer, démonter pour ré-assembler, tout est permis ^^
|
|
<br><br>
|
|
je travaille UNIQUEMENT sur commande ! x333
|
|
<br><br>
|
|
tout est vendu à un prix libre, convenu à l'avance,
|
|
<br>
|
|
en fonction des moyens de chacun.x.s
|
|
<br><br>
|
|
le troc d'objet, de service ou de conaissances
|
|
<br>
|
|
est également bienvenu, et peut remplacer
|
|
<br>
|
|
COMPLÈTEMENT un paiement monnayé
|
|
<br><br>
|
|
l'upcycling est un mythe vendu par des prétentieu.x.s
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/*=====================AboutPannel CSS*/
|
|
#aboutPannel{
|
|
background-color: var(--dark-color);
|
|
position:absolute;
|
|
cursor:grab;
|
|
}
|
|
#aboutPannel .windowTitle{
|
|
height: 42px;
|
|
}
|
|
|
|
#about_text{
|
|
position:relative;
|
|
padding: 10px;
|
|
font-family: 'velvelyne';
|
|
font-size:16px;
|
|
color: var(--light-color);
|
|
font-weight: lighter;
|
|
overflow-y: scroll;
|
|
scroll-behavior: smooth;
|
|
pointer-events: all;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
/*=====================format pc*/
|
|
@media(min-width:800px){
|
|
#aboutPannel{
|
|
width: 333px;
|
|
height: 66.6%;
|
|
}
|
|
}
|
|
|
|
/*=====================format tel*/
|
|
@media(max-width:800px){
|
|
#aboutPannel{
|
|
position:fixed;
|
|
width: 333px;
|
|
height: 80%;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import Moveable from 'vue3-moveable';
|
|
|
|
export default {
|
|
name : 'AboutPannel',
|
|
components:{
|
|
Moveable
|
|
},
|
|
emits: ["focus","close"],
|
|
methods:{
|
|
onDrag({ target, transform }) {
|
|
target.style.transform = transform;
|
|
},
|
|
observeContainer(){
|
|
const container = document.getElementById("contentContainer");
|
|
|
|
if(!container){
|
|
console.error("container not found");
|
|
return
|
|
}
|
|
|
|
const observer = new ResizeObserver(entries=>{
|
|
const rect = entries[0].contentRect;
|
|
|
|
this.bodyWidth = rect.width;
|
|
this.bodyHeight = rect.height;
|
|
|
|
this.coordX = Math.random()*(this.bodyWidth-333);
|
|
this.coordY = Math.random()*(this.bodyHeight-333);
|
|
});
|
|
|
|
observer.observe(container);
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
bodyHeight:0,
|
|
bodyWidth:0,
|
|
coordX:0,
|
|
coordY:0,
|
|
}
|
|
},
|
|
mounted(){
|
|
this.$nextTick(() => {
|
|
this.observeContainer()
|
|
});
|
|
console.log('coord:', this.coordX, this.coordY);
|
|
console.log("Contact pannel is loaded!");
|
|
}
|
|
};
|
|
</script>
|