File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div id="Chapter1_2" class="content-wrap">
<div class="title-box mb25 flex align-center mt40">
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<div class="flex justify-between align-center">
<div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
<div class="content title-box">
<p class="title mt25 title-bg">step1. Hello WORLD</p>
<div class="flex justify-center">
<div class="readGroup">
<h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
<div>
<div class="textbox">
<article class="flex align-start mb10">
<div class="icon mr40">
<img src="../../../../resources/img/img37_s.png" alt="">
<p class="name">발화좌</p>
</div>
<p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
</article>
<article class="flex align-start mb10 justify-end">
<p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
<div class="icon ">
<img src="../../../../resources/img/img37_s.png" alt="">
<p class="name">발화좌</p>
</div>
</article>
<article class="flex align-start mb10">
<div class="icon mr40">
<img src="../../../../resources/img/img37_s.png" alt="">
<p class="name">발화좌</p>
</div>
<p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
</article>
<article class="flex align-start mb10 justify-end">
<p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
<div class="icon ">
<img src="../../../../resources/img/img37_s.png" alt="">
<p class="name">발화좌</p>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt=""></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
}
},
watch: {
},
computed: {
},
components: {
},
mounted() {
const textArea = this.$refs.textArea;
const popup = this.$refs.popup;
textArea.addEventListener('mousemove', (event) => {
const text = textArea.value;
const words = text.split(' ');
const selectionStart = textArea.selectionStart;
const selectionEnd = textArea.selectionEnd;
if (selectionStart !== selectionEnd) {
const selectedText = text.substring(selectionStart, selectionEnd);
const rect = textArea.getBoundingClientRect();
popup.style.left = `${event.clientX}px`;
popup.style.top = `${event.clientY + window.scrollY}px`;
popup.innerHTML = `You selected: ${selectedText}`;
popup.style.display = 'block';
} else {
popup.style.display = 'none';
}
});
document.addEventListener('click', (event) => {
if (!textArea.contains(event.target) && !popup.contains(event.target)) {
popup.style.display = 'none';
}
});
}
}
</script>