<template>
    <div id="Chapter1" class="content-wrap">
        <div style="margin: 30px 0px 50px">
            <router-link to="/MyPlan.page">
                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
            </router-link>
        </div>
        <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('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
            <div class="content title-box">
                <div class="listenGroup">
                    <p class="title mt25 title-bg">step1. Hello WORLD</p>
                    <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
                    <div class="textbox">
                        <p class="title">The Eiffel Tower and the statue of Lierbty</p>
                        <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top. You can walk or take elevators to the top.</p>
                    </div>
                    <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img src="../../../../resources/img/btn09_s.png"
                            data-num="1"></button>
                </div>
            </div>
            <div class="next-btn"  @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt=""></div>
        </div>
        <TextToImage/>
    </div>
</template>

<script>
import TextToImage from '../../../component/TextToImage.vue';
export default {
    data() {
        return {
        }
    },
    methods: {
        goToPage(page) {
            this.$router.push({ name: page });
        }
    },
    watch: {

    },
    computed: {

    },
    components: {
        TextToImage : TextToImage
    },
    mounted() {
    }
}
</script>
<style scoped>
.listenGroup .textbox { width: 900px};
</style>