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="Chapter2_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('Chapter2_2')"><img src="../../../../resources/img/left.png" alt=""></div>
<div class="content title-box">
<p class="subtitle2 "></p><p class="title mt25 title-bg">step2</p>
<div class="flex align-center mb30">
<p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p>
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
</button> -->
</div><div class="time-bg">
<div>
<div class="time">
<p class="second">{{timer}}</p>
<p class="text">sec</p>
</div>
</div>
</div>
<div class="imgGroup">
<div class="con">
<img :src="currentCon.imgSrc" alt="">
<p class="title3"><em class="yellow">{{ currentCon.titleEm }}</em>{{ currentCon.title }}</p>
<div class="flex align-center justify-center mt10">
<p class="yellow-box-big">{{ currentCon.boxText }}</p>
<span class="subtitle3">{{ currentCon.subtitle }}</span>
</div>
</div>
<div class="flex justify-center">
<div class="btnGroup mt50 flex justify-between">
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
<img :src="item.imgSrc1" >
<img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
</button>
</div>
</div>
</div>
</div>
<div class="next-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/right.png" alt=""></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{imgSrc1: 'client/resources/img/img53_6_35s.png', imgSrc2: 'client/resources/img/img53_1_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' } },
{imgSrc1: 'client/resources/img/img53_7_35s.png', imgSrc2: 'client/resources/img/img53_2_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 's', title: 'un', boxText: '명', subtitle: '태양' } },
{imgSrc1: 'client/resources/img/img53_8_35s.png', imgSrc2: 'client/resources/img/img53_3_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'r', title: 'ain', boxText: '명', subtitle: '비' } },
{imgSrc1: 'client/resources/img/img53_9_35s.png', imgSrc2: 'client/resources/img/img53_4_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 's', title: 'now', boxText: '명', subtitle: '눈' } },
{imgSrc1: 'client/resources/img/img53_10_35s.png', imgSrc2: 'client/resources/img/img53_5_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'w', title: 'ind', boxText: '명', subtitle: '바람' } }
],
currentCon: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' },
selectedIndex: 0,
timer: "00",
intervalId: null,
};
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
updateContent(index) {
this.selectedIndex = index;
this.currentCon = this.items[index].con;
this.startTimer();
},
startTimer() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
this.timer = 5;
this.intervalId = setInterval(() => {
if (this.timer > 0) {
this.timer--;
} else {
clearInterval(this.intervalId);
}
}, 1000);
}
},
beforeDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
}
}
</script>
<style scoped>
.popTxt img{
position: absolute;
top: 0;
left: 0;
}
</style>