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" class="content-wrap">
<div style="margin: 30px 0px 50px; width: 20%">
<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"
style="justify-content: space-between"
>
<div>
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<button class="completeBtn" @click="complete">학습 종료</button>
</div>
<div class="flex justify-between align-center">
<div
class="pre-btn"
style="visibility: hidden"
@click="goToPage('Chapter1_2')"
>
<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" />
-->
<img class="bg" :src="img_src" />
</div>
</div>
<div class="next-btn" @click="goToNextPage">
<img src="../../../../resources/img/right.png" alt="" />
</div>
</div>
<TextToImage />
</div>
</template>
<script>
import TextToImage from "../../../component/TextToImage.vue";
import axios from "axios";
export default {
data() {
return {
text_data: null,
img_src: null,
seq: this.$store.getters.seqNum,
};
},
methods: {
complete() {
const { unit_id, book_id } = this.$route.query;
this.$router.push({
name: "Dashboard",
query: { value: this.seq, unit_id, book_id },
});
},
goToPage(page) {
this.$router.push({ name: page });
},
goToNextPage() {
alert("지문 학습 완료");
this.complete();
},
// 지문 API
async fetchText() {
axios({
url: "/text/selectOneText.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
textId: this.textId,
},
})
.then((response) => {
this.text_data = response.data[0];
console.log("지문 데이터 : ", this.text_data);
this.img_src = this.fetchImage(this.text_data.file_rpath);
})
.catch((err) => {
console.log("지문 에러 : ", err);
});
},
// 이미지 불러오기
fetchImage(fileRpath) {
return "http://165.229.169.113:9080/" + fileRpath;
},
},
watch: {},
computed: {
textId() {
//console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
return this.$store.getters.getTextId;
},
},
components: {
TextToImage: TextToImage,
},
mounted() {
this.fetchText();
},
};
</script>
<style scoped>
.listenGroup .textbox {
width: 900px;
}
.completeBtn {
margin-right: 100px;
background-color: #ffba08;
padding: 10px 30px;
border-radius: 10px;
font-size: 28px;
font-family: "ONEMobilePOPOTF";
}
</style>