bigEdit: ajout des composants, contenu et interactivité pour la partie extra (partie fixe, plutôt informative)
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
<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')"><p>×</p></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;
|
||||
|
||||
}
|
||||
#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: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================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>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="windowContainer" id="contactPannel" ref="contactPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="$refs.contactPannel"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<div class="windowTitle">
|
||||
<div class="titleContent">
|
||||
<p>./Contact.333</p>
|
||||
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactContainer">
|
||||
<a class="btnContact" id="insta" @mousedown.stop @touchstart.stop href="https://www.instagram.com/vga.nar6.ta/" target="_blank" >Instagram : <br> <b>@vga.nar6.ta</b></a>
|
||||
<a class="btnContact" id="signal" @mousedown.stop @touchstart.stop href="https://signal.me/#eu/76w7wcHZpW1HtunwdjbIJZWpTGVMCqobn_qAzhGBrSRd8cGtdq9NZJondaOHJ9iM" target="_blank" >Signal : <br> <b>@vega.333</b></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*=====================ContactPannel CSS*/
|
||||
#contactPannel{
|
||||
background-color: var(--dark-color);
|
||||
position:absolute;
|
||||
cursor:grab;
|
||||
}
|
||||
|
||||
.contactContainer{
|
||||
width:100%;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btnContact{
|
||||
width: 100%;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: lighter;
|
||||
background-color: var(--dark-color);
|
||||
color: var(--light-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: var(--light-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btnContact b {
|
||||
font-weight: bold;
|
||||
}
|
||||
#insta{
|
||||
border-radius:0 0 0 16.1px;
|
||||
}
|
||||
|
||||
#signal{
|
||||
border-radius:0 0 16.1px 0;
|
||||
}
|
||||
|
||||
#insta:hover{
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--light-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
#signal:hover{
|
||||
background-color: var(--light-color);
|
||||
border-color: var(--accent-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/*=====================format pc*/
|
||||
@media(min-width:800px){
|
||||
#contactPannel{
|
||||
width:333px;
|
||||
height:144px;
|
||||
}
|
||||
.btnContact{
|
||||
height: 111px;
|
||||
padding-top: 21px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*=====================format tel*/
|
||||
@media(max-width:800px){
|
||||
#contactPannel{
|
||||
width:222px;
|
||||
height:77px;
|
||||
}
|
||||
|
||||
.btnContact{
|
||||
height: 80px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
|
||||
export default {
|
||||
name : 'ContactPannel',
|
||||
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>
|
||||
@@ -4,18 +4,30 @@
|
||||
<template>
|
||||
<div id="extraContainer">
|
||||
<div id="btnPannel">
|
||||
<button type="button" class="btnColStyle"><p>I</p></button>
|
||||
<button type="button" class="btnColStyle"><p>@</p></button>
|
||||
<button type="button" class="btnColStyle"><p>#</p></button>
|
||||
<button type="button" class="btnColStyle"><p>:/</p></button>
|
||||
<button type="button" class="btnColStyle" @click="openPannel('welcome')" id="info"><p>i</p></button>
|
||||
<button type="button" class="btnColStyle" @click="openPannel('about')"><p>#</p></button>
|
||||
<button type="button" class="btnColStyle" @click="openPannel('contact')"><p>@</p></button>
|
||||
<button type="button" class="btnColStyle" @click="openPannel('link')"><p>//</p></button>
|
||||
</div>
|
||||
<div id="contentContainer">
|
||||
<div id="contentContainer" ref="contentContainer">
|
||||
<div class="windowContainer" id="contentPannel">
|
||||
|
||||
</div>
|
||||
|
||||
<contactDiv v-show="isActive.includes('contact')" @close="closePannel('contact')" @focus="focusPannel('contact')" :class="{zTop: isFocused==='contact' , zBase: isFocused!== 'contact'}" >
|
||||
</contactDiv>
|
||||
|
||||
<aboutDiv v-show="isActive.includes('about')" @close="closePannel('about')" @focus="focusPannel('about')" :class="{zTop: isFocused==='about' , zBase: isFocused!== 'about'}" >
|
||||
</aboutDiv>
|
||||
|
||||
<linkDiv v-show="isActive.includes('link')" @close="closePannel('link')" @focus="focusPannel('link')" :class="{zTop: isFocused==='link' , zBase: isFocused!== 'link'}" >
|
||||
</linkDiv>
|
||||
|
||||
<welcomeDiv v-show="isActive.includes('welcome')" @close="closePannel('welcome')" @focus="focusPannel('welcome')" :class="{zTop: isFocused==='welcome' , zBase: isFocused!== 'welcome'}" >
|
||||
</welcomeDiv>
|
||||
</div>
|
||||
</div>
|
||||
</template>vh
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*Template HTML pour section titre pre-styled
|
||||
|
||||
@@ -26,13 +38,13 @@
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/*=====================Extra Content CSS*/
|
||||
|
||||
.btnColStyle{
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
font-family: 'lineal';
|
||||
font-size: 33px;
|
||||
color: var(--light-color);
|
||||
border-color: var(--Light-color);
|
||||
border-style: solid;
|
||||
@@ -48,6 +60,10 @@
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
#info{
|
||||
font-family: 'avara';
|
||||
}
|
||||
|
||||
/*=====================format pc*/
|
||||
@media (min-width:800px){
|
||||
#extraContainer{
|
||||
@@ -65,7 +81,7 @@
|
||||
#btnPannel{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
width: 15%;
|
||||
left:0;
|
||||
padding-top: 2vh;
|
||||
background-color: transparent;
|
||||
@@ -78,17 +94,18 @@
|
||||
#contentContainer{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
width: 85%;
|
||||
left:0;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#contentPannel{
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -97,6 +114,7 @@
|
||||
width:100%;
|
||||
height:20%;
|
||||
margin-top: 3.33vh;
|
||||
font-size: 77px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,7 +134,7 @@
|
||||
|
||||
#btnPannel{
|
||||
position: relative;
|
||||
height: 25%;
|
||||
height: 15%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
padding-left: 3vw;
|
||||
@@ -129,7 +147,7 @@
|
||||
|
||||
#contentContainer{
|
||||
position: relative;
|
||||
height: 75%;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
@@ -141,6 +159,8 @@
|
||||
}
|
||||
|
||||
#contentPannel{
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -148,6 +168,7 @@
|
||||
width:20%;
|
||||
height:100%;
|
||||
margin-left: 2.666vw;
|
||||
font-size: 33px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -155,6 +176,35 @@
|
||||
<script>
|
||||
export default {
|
||||
name : 'ExtraContent',
|
||||
data(){
|
||||
return{
|
||||
isActive:[],
|
||||
isFocused:""
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openPannel(name){
|
||||
if(!this.isActive.includes(name)){
|
||||
this.isActive.push(name);
|
||||
}
|
||||
this.isFocused = name;
|
||||
},
|
||||
focusPannel(name){
|
||||
if(this.isActive.includes(name)){
|
||||
this.isFocused = name;
|
||||
}
|
||||
},
|
||||
closePannel(name){
|
||||
const index = this.isActive.indexOf(name)
|
||||
if(index !== -1){
|
||||
this.isActive.splice(index,1);
|
||||
}
|
||||
if(this.isFocused === name){
|
||||
this.isFocused = null;
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log("Extra content is loaded!");
|
||||
}
|
||||
|
||||
@@ -65,13 +65,13 @@
|
||||
}
|
||||
/*Highlights z-index*/
|
||||
div.highlightItem{
|
||||
z-index: 9;
|
||||
z-index: 3;
|
||||
}
|
||||
div.highlightMax{
|
||||
z-index: 10;
|
||||
z-index: 4;
|
||||
}
|
||||
div.graffStyle{
|
||||
z-index:4;
|
||||
z-index: 5;
|
||||
position:absolute;
|
||||
margin-left: 100px;
|
||||
}
|
||||
@@ -91,12 +91,12 @@
|
||||
.imgStyle.highlightMax{
|
||||
width:444px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
z-index:4;
|
||||
}
|
||||
.imgStyle.graffStyle{
|
||||
width:100px;
|
||||
height:auto;
|
||||
z-index: 4;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -116,12 +116,12 @@
|
||||
.imgStyle.highlightMax{
|
||||
width:250px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
z-index:4;
|
||||
}
|
||||
.imgStyle.graffStyle{
|
||||
width:77px;
|
||||
height:auto;
|
||||
z-index: 4;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -140,12 +140,12 @@
|
||||
.imgStyle.highlightMax{
|
||||
width:200px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
z-index:4;
|
||||
}
|
||||
.imgStyle.graffStyle{
|
||||
width:50px;
|
||||
height:auto;
|
||||
z-index: 4;
|
||||
z-index: 5;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="$refs.linkPannel"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<div class="windowTitle">
|
||||
<div class="titleContent">
|
||||
<p>./ExternalLinks.333</p>
|
||||
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*=====================LinkPannel CSS*/
|
||||
#linkPannel{
|
||||
background-color: var(--dark-color);
|
||||
position:absolute;
|
||||
cursor:grab;
|
||||
}
|
||||
|
||||
/*=====================format pc*/
|
||||
@media(min-width:800px){
|
||||
#linkPannel{
|
||||
width:666px;
|
||||
height:666px;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================format tel*/
|
||||
@media(max-width:800px){
|
||||
#linkPannel{
|
||||
width:333px;
|
||||
height:333px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
|
||||
export default {
|
||||
name : 'LinkPannel',
|
||||
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>
|
||||
@@ -33,6 +33,9 @@
|
||||
}
|
||||
|
||||
#mainPannel{
|
||||
position: relative;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -55,6 +58,9 @@
|
||||
}
|
||||
|
||||
#mainPannel{
|
||||
position: relative;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="windowContainer" id="welcomePannel" ref="welcomePannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="$refs.welcomePannel"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<div class="windowTitle">
|
||||
<div class="titleContent">
|
||||
<p>./Welcome:{{guestName}}</p>
|
||||
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
|
||||
</div>
|
||||
</div>
|
||||
<p id="welcomeTxt">
|
||||
hello !
|
||||
<br>
|
||||
bienvenue dans ma petite bulle sur l'Internet
|
||||
<br>
|
||||
(ce site est mis en page de manière générative,
|
||||
<br>
|
||||
à chaque fois que tu actualises ça change ^^)
|
||||
<br><br>
|
||||
je bricole beaucoup de choses, mais ici c'est plutôt
|
||||
<br>
|
||||
les vêtements, bijoux et accessoires <b>PIQUANT!</b>
|
||||
<br>
|
||||
n'hésite pas à rechercher ou filtrer
|
||||
<br>
|
||||
pour trouver ce que tu veux
|
||||
<br><br>
|
||||
dans le menu + tu pourras trouver
|
||||
<br>
|
||||
un formulaire de contact et de liens externes
|
||||
<br>
|
||||
vers d'autres projets persos
|
||||
<br>
|
||||
et ceux des copines
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*=====================WelcomePannel CSS*/
|
||||
#welcomePannel{
|
||||
background-color: var(--dark-color);
|
||||
position:absolute;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#welcomeTxt{
|
||||
position:relative;
|
||||
padding: 10px;
|
||||
font-family: 'velvelyne';
|
||||
font-size:16px;
|
||||
color: var(--light-color);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
#welcomePannel:active{
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/*=====================format pc*/
|
||||
@media(min-width:800px){
|
||||
#welcomePannel{
|
||||
width:333px;
|
||||
height:400px;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================format tel*/
|
||||
@media(max-width:800px){
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
|
||||
export default {
|
||||
name : 'WelcomePannel',
|
||||
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,
|
||||
guestName:'unknown_Guest003'
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(() => {
|
||||
this.observeContainer()
|
||||
});
|
||||
console.log('coord:', this.coordX, this.coordY);
|
||||
console.log("Contact pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user