Commit @a59958c919c3085efa08a2cf7363f9aebe10449f

guntaek 09-19

Merge branch 'master' of http://210.180.118.83/jichoi/lms_front

@a59958c919c3085efa08a2cf7363f9aebe10449f

2e4c679

a59958c

client/views/pages/main/Chapter/Chapter1_1.vue

--- client/views/pages/main/Chapter/Chapter1_1.vue

+++ client/views/pages/main/Chapter/Chapter1_1.vue


             this.$router.push({ name: page });
         },
         goToNextPage() {
-            alert('지문 학습 완료!');
-            this.complete();
+            this.goToPage('Chapter1_3');
+            // alert('지문 학습 완료!');
+            // this.complete();
         },
         // 대화 지문 API
         async fetchText() {

2e4c679

a59958c

client/views/pages/main/Chapter/Chapter1_3.vue

--- client/views/pages/main/Chapter/Chapter1_3.vue

+++ client/views/pages/main/Chapter/Chapter1_3.vue


                 <span class="title mr40">1. Hello WORLD</span>
                 <span class="subtitle">my name is dd</span>
             </div>
-            <button class="completeBtn" @click="complete">학습 종료</button>
+            <div class="flex">
+                <TextToImage />
+                <button class="completeBtn" @click="complete">학습 종료</button>
+            </div>
         </div>
         <div class="flex justify-between align-center">
-            <div class="pre-btn" style="visibility: hidden" @click="goToPage('Chapter1_2')">
+            <div class="pre-btn" @click="goToPage('Chapter1_1')">
                 <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" />
+                <p class="title mt25 title-bg">step1. Hello WORLD</p>
+                <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
+                    <h4>지문을 집중해서 듣고 읽어보세요</h4>
+                    <div class="listen-btn">
+                        <img src="../../../../resources/img/btn10_s.png" alt="" @click="generateTts('male')" />
+                        <audio id="tts-audio-player" preload="auto"></audio>
+                    </div>
+                </div>
+                <div class="flex listen-box">
+                    <div class="listenGroup">
+                        <p>{{ text_ttl }}</p>
+                        <div class="listen-cnt" v-for="(line, index) in text_cnt_list" :key="index">
+                            {{ line }}
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="next-btn" @click="goToNextPage">
                 <img src="../../../../resources/img/right.png" alt="" />
             </div>
         </div>
-        <TextToImage />
     </div>
 </template>
 

     data() {
         return {
             text_data: null,
+            text_ttl: null,
+            text_cnt: null, // 지문 내용
+            text_cnt_list: [],
             img_src: null,
             seq: this.$store.getters.seqNum,
         };

             this.$router.push({ name: page });
         },
         goToNextPage() {
-            alert('지문 학습 완료!');
-            this.complete();
+            this.goToPage('Chapter5');
+            // alert('지문 학습 완료!');
+            // this.complete();
         },
         // 지문 API
         async fetchText() {

                     'Content-Type': 'application/json; charset=UTF-8',
                 },
                 data: {
-                    textId: this.textId,
+                    // textId: this.textId,
+                    textId: 'TEXT_000000000005004',
                 },
             })
                 .then((response) => {
                     this.text_data = response.data[0];
+                    this.text_ttl = response.data[0].text_ttl;
+                    this.text_cnt = response.data[0].text_cnt;
+                    this.text_cnt_list = this.text_cnt.split('/').filter((text) => text.trim() !== '');
                     console.log('지문 데이터 : ', this.text_data);
                     this.img_src = this.fetchImage(this.text_data.file_rpath);
                 })

         // 이미지 불러오기
         fetchImage(fileRpath) {
             return 'http://165.229.169.113:9080/' + fileRpath;
+        },
+        // 대화 지문 재생
+        generateTts(gender) {
+            axios({
+                url: 'http://165.229.169.32:35716/generate_tts',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                responseType: 'blob',
+                data: {
+                    gender: gender,
+                    input_text: this.text_cnt,
+                },
+            })
+                .then((response) => {
+                    console.log('tts 응답 : ', response);
+                    const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
+                    const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
+                    const audioPlayer = document.getElementById('tts-audio-player');
+                    audioPlayer.src = audioUrl;
+                    audioPlayer.play();
+                })
+                .catch((err) => {
+                    console.log('tts 에러 : ', err);
+                });
         },
     },
     watch: {},

     font-size: 28px;
     font-family: 'ONEMobilePOPOTF';
 }
+
+.listen-box {
+    gap: 50px;
+    width: 1282px;
+    height: 500px;
+    overflow: scroll;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.listenGroup {
+    margin-left: 5rem;
+}
+
+.listenGroup p {
+    font-size: 40px;
+    font-weight: bold;
+}
+
+.listen-cnt {
+    font-size: 24px;
+    margin-top: 30px;
+}
 </style>

2e4c679

a59958c

client/views/pages/main/Chapter/Chapter5.vue

--- client/views/pages/main/Chapter/Chapter5.vue

+++ client/views/pages/main/Chapter/Chapter5.vue

...	...	@@ -1,0 +1,345 @@
	1	+<template>
	2	+ <div id="Chapter1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
	9	+ </div>
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <div class="flex">
	16	+ <TextToImage />
	17	+ <button class="completeBtn" @click="complete">학습 종료</button>
	18	+ </div>
	19	+ </div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" @click="goToPage('Chapter1_3')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
	24	+ <div class="content title-box">
	25	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	26	+ <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
	27	+ <h4>지문을 집중해서 듣고 읽어보세요</h4>
	28	+ <div class="listen-btn">
	29	+ <img src="../../../../resources/img/btn10_s.png" alt="" @click="generateTts('male')" />
	30	+ <audio id="tts-audio-player" preload="auto"></audio>
	31	+ </div>
	32	+ </div>
	33	+ <div class="flex listen-box">
	34	+ <div class="listenGroup">
	35	+ <p>{{ text_ttl }}</p>
	36	+ <div class="listen-cnt" v-for="(line, index) in text_cnt_list" :key="index">
	37	+ <p @click="handleSelectLine(line)" :style="getStyle(line)">{{ line }}</p>
	38	+ </div>
	39	+ </div>
	40	+ <div class="button-box mr50">
	41	+ <button class="word" @click="wordQuestion">단어 설명</button>
	42	+ <button class="passage" @click="passageQuestion">문장 설명</button>
	43	+ </div>
	44	+ </div>
	45	+ </div>
	46	+ <div class="next-btn" @click="goToNextPage">
	47	+ <img src="../../../../resources/img/right.png" alt="" />
	48	+ </div>
	49	+ </div>
	50	+ <div class="popup-wrap" v-if="popupOpen">
	51	+ <div class="popup-container flex-column">
	52	+ <div class="popup-header flex align-center">
	53	+ <p>선생님의 한 마디</p>
	54	+ <img
	55	+ class="look-btn"
	56	+ @click="handlePopupClose"
	57	+ src="../../../../resources/img/btn25_93t_normal.png"
	58	+ alt=""
	59	+ />
	60	+ </div>
	61	+ <div>
	62	+ <p class="popup-content mt30" v-html="formattedExplanation"></p>
	63	+ </div>
	64	+ </div>
	65	+ </div>
	66	+ </div>
	67	+</template>
	68	+
	69	+<script>
	70	+import TextToImage from '../../../component/TextToImage.vue';
	71	+import axios from 'axios';
	72	+export default {
	73	+ data() {
	74	+ return {
	75	+ text_data: null,
	76	+ text_ttl: null,
	77	+ text_cnt: null, // 지문 내용
	78	+ text_cnt_list: [],
	79	+ img_src: null,
	80	+ seq: this.$store.getters.seqNum,
	81	+
	82	+ popupOpen: false,
	83	+ selectedLine: null, // 선택한 지문
	84	+ explanation_response: null, // 설명 응답
	85	+ };
	86	+ },
	87	+ methods: {
	88	+ complete() {
	89	+ const { unit_id, book_id } = this.$route.query;
	90	+ this.$router.push({
	91	+ name: 'Dashboard',
	92	+ query: { value: this.seq, unit_id, book_id },
	93	+ });
	94	+ },
	95	+ goToPage(page) {
	96	+ this.$router.push({ name: page });
	97	+ },
	98	+ goToNextPage() {
	99	+ // this.goToPage('Chapter5');
	100	+ alert('지문 학습 완료!');
	101	+ this.complete();
	102	+ },
	103	+ // 지문 API
	104	+ async fetchText() {
	105	+ axios({
	106	+ url: '/text/selectOneText.json',
	107	+ method: 'post',
	108	+ headers: {
	109	+ 'Content-Type': 'application/json; charset=UTF-8',
	110	+ },
	111	+ data: {
	112	+ // textId: this.textId,
	113	+ textId: 'TEXT_000000000005004',
	114	+ },
	115	+ })
	116	+ .then((response) => {
	117	+ this.text_data = response.data[0];
	118	+ this.text_ttl = response.data[0].text_ttl;
	119	+ this.text_cnt = response.data[0].text_cnt;
	120	+ this.text_cnt_list = this.text_cnt.split('/').filter((text) => text.trim() !== '');
	121	+ console.log('지문 데이터 : ', this.text_data);
	122	+ this.img_src = this.fetchImage(this.text_data.file_rpath);
	123	+ })
	124	+ .catch((err) => {
	125	+ console.log('지문 에러 : ', err);
	126	+ });
	127	+ },
	128	+ // 이미지 불러오기
	129	+ fetchImage(fileRpath) {
	130	+ return 'http://165.229.169.113:9080/' + fileRpath;
	131	+ },
	132	+ // 대화 지문 재생
	133	+ generateTts(gender) {
	134	+ axios({
	135	+ url: 'http://165.229.169.32:35716/generate_tts',
	136	+ method: 'post',
	137	+ headers: {
	138	+ 'Content-Type': 'application/json; charset=UTF-8',
	139	+ },
	140	+ responseType: 'blob',
	141	+ data: {
	142	+ gender: gender,
	143	+ input_text: this.text_cnt,
	144	+ },
	145	+ })
	146	+ .then((response) => {
	147	+ console.log('tts 응답 : ', response);
	148	+ const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
	149	+ const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
	150	+ const audioPlayer = document.getElementById('tts-audio-player');
	151	+ audioPlayer.src = audioUrl;
	152	+ audioPlayer.play();
	153	+ })
	154	+ .catch((err) => {
	155	+ console.log('tts 에러 : ', err);
	156	+ });
	157	+ },
	158	+ // 검색할 지문 선택
	159	+ handleSelectLine(line) {
	160	+ this.selectedLine = line;
	161	+ console.log('선택된 지문 : ', this.selectedLine);
	162	+ },
	163	+ // 단어 설명
	164	+ wordQuestion() {
	165	+ console.log('line : ', this.selectedLine);
	166	+ if (this.selectedLine === null) {
	167	+ alert('궁금한 대화문을 선택해주세요');
	168	+ return;
	169	+ }
	170	+ axios({
	171	+ url: 'http://165.229.169.32:35716/word_question',
	172	+ method: 'post',
	173	+ headers: {
	174	+ 'Content-Type': 'application/json; charset=UTF-8',
	175	+ },
	176	+ data: {
	177	+ word: this.selectedLine,
	178	+ },
	179	+ })
	180	+ .then((response) => {
	181	+ // console.log('word 지문 응답 : ', response.data.explanation);
	182	+ this.explanation_response = response.data.explanation;
	183	+ this.handlePopupOpen();
	184	+ })
	185	+ .catch((err) => {
	186	+ console.log('word 지문 에러 : ', err);
	187	+ });
	188	+ },
	189	+
	190	+ // 지문 설명
	191	+ passageQuestion() {
	192	+ console.log('line : ', this.selectedLine);
	193	+ if (this.selectedLine === null) {
	194	+ alert('궁금한 대화문을 선택해주세요');
	195	+ return;
	196	+ }
	197	+ axios({
	198	+ url: 'http://165.229.169.32:35716/passage_question',
	199	+ method: 'post',
	200	+ headers: {
	201	+ 'Content-Type': 'application/json; charset=UTF-8',
	202	+ },
	203	+ data: {
	204	+ passage: this.selectedLine,
	205	+ },
	206	+ })
	207	+ .then((response) => {
	208	+ // console.log('passage 지문 응답 : ', response.data.explanation);
	209	+ this.explanation_response = response.data.explanation;
	210	+ this.handlePopupOpen();
	211	+ })
	212	+ .catch((err) => {
	213	+ console.log('passage 지문 에러 : ', err);
	214	+ });
	215	+ },
	216	+ /* 팝업 */
	217	+ handlePopupOpen() {
	218	+ this.popupOpen = true;
	219	+ },
	220	+
	221	+ handlePopupClose() {
	222	+ this.popupOpen = false;
	223	+ this.explanation_response = null;
	224	+ this.selectedLine = null;
	225	+ },
	226	+ getStyle(line) {
	227	+ return {
	228	+ backgroundColor: this.selectedLine === line ? '#ffc980' : '',
	229	+ fontSize: this.selectedLine === line ? '40px' : '',
	230	+ boxShadow: this.selectedLine === line ? 'rgba(0, 0, 0, 0.24) 0px 3px 8px' : '',
	231	+ fontWeight: this.selectedLine === line ? 'bold' : '',
	232	+ cursor: 'pointer',
	233	+ };
	234	+ },
	235	+ },
	236	+ watch: {},
	237	+ computed: {
	238	+ textId() {
	239	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	240	+ return this.$store.getters.getTextId;
	241	+ },
	242	+ // 지문 포맷팅
	243	+ formattedExplanation() {
	244	+ return this.explanation_response.replace(/\n/g, '<br>').replace(/\\(.?)\\*/g, '<strong>$1</strong>');
	245	+ },
	246	+ },
	247	+ components: {
	248	+ TextToImage: TextToImage,
	249	+ },
	250	+ mounted() {
	251	+ this.fetchText();
	252	+ },
	253	+};
	254	+</script>
	255	+<style scoped>
	256	+.listenGroup .textbox {
	257	+ width: 900px;
	258	+}
	259	+
	260	+.completeBtn {
	261	+ margin-right: 100px;
	262	+ background-color: #ffba08;
	263	+ padding: 10px 30px;
	264	+ border-radius: 10px;
	265	+ font-size: 28px;
	266	+ font-family: 'ONEMobilePOPOTF';
	267	+}
	268	+
	269	+.listen-box {
	270	+ gap: 50px;
	271	+ justify-content: space-between;
	272	+ height: 500px;
	273	+}
	274	+
	275	+.listenGroup {
	276	+ margin-left: 5rem;
	277	+ width: 1282px;
	278	+ overflow: scroll;
	279	+ overflow-y: auto;
	280	+ overflow-x: hidden;
	281	+ padding: 0px 20px 0px 0px;
	282	+}
	283	+
	284	+.listenGroup p {
	285	+ font-size: 40px;
	286	+ font-weight: bold;
	287	+}
	288	+
	289	+.listen-cnt p {
	290	+ font-size: 24px;
	291	+ margin-top: 30px;
	292	+ font-weight: normal;
	293	+}
	294	+
	295	+.button-box {
	296	+ display: flex;
	297	+ flex-direction: column;
	298	+ align-items: center;
	299	+ justify-content: space-evenly;
	300	+}
	301	+
	302	+.button-box button {
	303	+ font-family: 'ONEMobilePOPOTF';
	304	+ font-size: 25px;
	305	+ color: #fff;
	306	+ padding: 20px 70px;
	307	+ border-radius: 15px;
	308	+ box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
	309	+}
	310	+.word {
	311	+ background-color: #28b863;
	312	+}
	313	+
	314	+.passage {
	315	+ background-color: #9528b7;
	316	+}
	317	+
	318	+.popup-container {
	319	+ background-color: #fff;
	320	+ position: absolute;
	321	+ width: 120rem;
	322	+ height: 60rem;
	323	+ padding: 30px;
	324	+ border-radius: 10px;
	325	+ top: 25rem;
	326	+ left: 40rem;
	327	+ overflow: scroll;
	328	+ overflow-x: hidden;
	329	+}
	330	+
	331	+.popup-header {
	332	+ justify-content: space-between;
	333	+}
	334	+
	335	+.popup-header p {
	336	+ font-size: 30px;
	337	+ font-family: 'ONEMobilePOPOTF';
	338	+ color: #6327b9;
	339	+}
	340	+
	341	+.popup-content {
	342	+ font-size: 24px;
	343	+ padding: 20px;
	344	+}
	345	+</style>

2e4c679

a59958c

client/views/pages/main/Main_c.vue

--- client/views/pages/main/Main_c.vue

+++ client/views/pages/main/Main_c.vue


         <router-view></router-view>
 
         <!-- Footer that re-renders on route change -->
-        <FooterComponent :key="$route.fullPath" />
+        <!-- <FooterComponent :key="$route.fullPath" /> -->
     </div>
 </template>
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -132,8 +132,9 @@
132	132	this.$router.push({ name: page });
133	133	},
134	134	goToNextPage() {
135		- alert('지문 학습 완료!');
136		- this.complete();
	135	+ this.goToPage('Chapter1_3');
	136	+ // alert('지문 학습 완료!');
	137	+ // this.complete();
137	138	},
138	139	// 대화 지문 API
139	140	async fetchText() {

...	...	@@ -12,26 +12,37 @@
12	12	<span class="title mr40">1. Hello WORLD</span>
13	13	<span class="subtitle">my name is dd</span>
14	14	</div>
15		- <button class="completeBtn" @click="complete">학습 종료</button>
	15	+ <div class="flex">
	16	+ <TextToImage />
	17	+ <button class="completeBtn" @click="complete">학습 종료</button>
	18	+ </div>
16	19	</div>
17	20	<div class="flex justify-between align-center">
18		- <div class="pre-btn" style="visibility: hidden" @click="goToPage('Chapter1_2')">
	21	+ <div class="pre-btn" @click="goToPage('Chapter1_1')">
19	22	<img src="../../../../resources/img/left.png" alt="" />
20	23	</div>
21	24	<div class="content title-box">
22		- <div class="listenGroup">
23		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
24		- <!--
25		- <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1" />
26		- -->
27		- <img class="bg" :src="img_src" />
	25	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	26	+ <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
	27	+ <h4>지문을 집중해서 듣고 읽어보세요</h4>
	28	+ <div class="listen-btn">
	29	+ <img src="../../../../resources/img/btn10_s.png" alt="" @click="generateTts('male')" />
	30	+ <audio id="tts-audio-player" preload="auto"></audio>
	31	+ </div>
	32	+ </div>
	33	+ <div class="flex listen-box">
	34	+ <div class="listenGroup">
	35	+ <p>{{ text_ttl }}</p>
	36	+ <div class="listen-cnt" v-for="(line, index) in text_cnt_list" :key="index">
	37	+ {{ line }}
	38	+ </div>
	39	+ </div>
28	40	</div>
29	41	</div>
30	42	<div class="next-btn" @click="goToNextPage">
31	43	<img src="../../../../resources/img/right.png" alt="" />
32	44	</div>
33	45	</div>
34		- <TextToImage />
35	46	</div>
36	47	</template>
37	48
...	...	@@ -42,6 +53,9 @@
42	53	data() {
43	54	return {
44	55	text_data: null,
	56	+ text_ttl: null,
	57	+ text_cnt: null, // 지문 내용
	58	+ text_cnt_list: [],
45	59	img_src: null,
46	60	seq: this.$store.getters.seqNum,
47	61	};
...	...	@@ -58,8 +72,9 @@
58	72	this.$router.push({ name: page });
59	73	},
60	74	goToNextPage() {
61		- alert('지문 학습 완료!');
62		- this.complete();
	75	+ this.goToPage('Chapter5');
	76	+ // alert('지문 학습 완료!');
	77	+ // this.complete();
63	78	},
64	79	// 지문 API
65	80	async fetchText() {
...	...	@@ -70,11 +85,15 @@
70	85	'Content-Type': 'application/json; charset=UTF-8',
71	86	},
72	87	data: {
73		- textId: this.textId,
	88	+ // textId: this.textId,
	89	+ textId: 'TEXT_000000000005004',
74	90	},
75	91	})
76	92	.then((response) => {
77	93	this.text_data = response.data[0];
	94	+ this.text_ttl = response.data[0].text_ttl;
	95	+ this.text_cnt = response.data[0].text_cnt;
	96	+ this.text_cnt_list = this.text_cnt.split('/').filter((text) => text.trim() !== '');
78	97	console.log('지문 데이터 : ', this.text_data);
79	98	this.img_src = this.fetchImage(this.text_data.file_rpath);
80	99	})
...	...	@@ -85,6 +104,32 @@
85	104	// 이미지 불러오기
86	105	fetchImage(fileRpath) {
87	106	return 'http://165.229.169.113:9080/' + fileRpath;
	107	+ },
	108	+ // 대화 지문 재생
	109	+ generateTts(gender) {
	110	+ axios({
	111	+ url: 'http://165.229.169.32:35716/generate_tts',
	112	+ method: 'post',
	113	+ headers: {
	114	+ 'Content-Type': 'application/json; charset=UTF-8',
	115	+ },
	116	+ responseType: 'blob',
	117	+ data: {
	118	+ gender: gender,
	119	+ input_text: this.text_cnt,
	120	+ },
	121	+ })
	122	+ .then((response) => {
	123	+ console.log('tts 응답 : ', response);
	124	+ const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
	125	+ const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성
	126	+ const audioPlayer = document.getElementById('tts-audio-player');
	127	+ audioPlayer.src = audioUrl;
	128	+ audioPlayer.play();
	129	+ })
	130	+ .catch((err) => {
	131	+ console.log('tts 에러 : ', err);
	132	+ });
88	133	},
89	134	},
90	135	watch: {},
...	...	@@ -115,4 +160,27 @@
115	160	font-size: 28px;
116	161	font-family: 'ONEMobilePOPOTF';
117	162	}
	163	+
	164	+.listen-box {
	165	+ gap: 50px;
	166	+ width: 1282px;
	167	+ height: 500px;
	168	+ overflow: scroll;
	169	+ overflow-y: auto;
	170	+ overflow-x: hidden;
	171	+}
	172	+
	173	+.listenGroup {
	174	+ margin-left: 5rem;
	175	+}
	176	+
	177	+.listenGroup p {
	178	+ font-size: 40px;
	179	+ font-weight: bold;
	180	+}
	181	+
	182	+.listen-cnt {
	183	+ font-size: 24px;
	184	+ margin-top: 30px;
	185	+}
118	186	</style>

...	...	@@ -4,7 +4,7 @@
4	4	<router-view></router-view>
5	5
6	6	<!-- Footer that re-renders on route change -->
7		- <FooterComponent :key="$route.fullPath" />
	7	+ <!-- <FooterComponent :key="$route.fullPath" /> -->
8	8	</div>
9	9	</template>
10	10

Delete comment