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>