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
File name
Commit message
Commit date
<template>
<div class="content">
<div class="top-banner banner terms-banner">
<div class="flex-column align-center justify-center content">
<p class="banner-title text-ct white" aria-live="assertive">약관 및 정책</p>
<p class="box-title text-ct white">AI 디지털교과서 통합지원센터의 정보보호 및 이용 정책</p>
</div>
</div>
<PageNavigationBar :navi="naviData" />
<div class="pt100 pb100">
<div class="w1280">
<div>
<ul class="edu-tab flex justify-between align-center pd10 border radius mb30">
<li v-for="(type, idx) in tabType" :key="idx"
:class="{ 'gd-3 pd10 radius text-ct cursor': true, 'active': checkType === type.id }"
@click.stop="userTypeActive(type.id)" tabindex="0" @keydown.enter.space="userTypeActive(type.id)">
{{ type.name }}
</li>
</ul>
<div class="content pt30 pb30">
<div v-show="checkType === 'use'">
<div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
<div class="middle-title pb0 gd-8">
<p>이용약관</p>
</div>
<div class="flex justify-start align-center gd-4">
<div class="gd-7 pl0">
<p class="text-rg">이전 이용약관 확인</p>
</div>
<div class="gd-5 pr0">
<select name="" id="" class="full-select ml0">
<option value="1.0">Version 1.0</option>
</select>
</div>
</div>
</div>
<div class="border pd30">
<terms-1></terms-1>
</div>
</div>
<div v-show="checkType === 'privacy'">
<div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
<div class="middle-title pb0 gd-8">
<p>개인정보 처리방침</p>
</div>
<div class="flex justify-start align-center gd-4">
<div class="gd-7 pl0">
<p class="text-rg">이전 개인정보 처리방침 확인</p>
</div>
<div class="gd-5 pr0">
<select name="" id="" class="full-select ml0">
<option value="1.0">Version 1.0</option>
</select>
</div>
</div>
</div>
<Privacy />
</div>
<div v-show="checkType === 'email'">
<div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
<div class="middle-title pb0 gd-8">
<p>이메일 무단수집거부</p>
</div>
<div class="flex justify-start align-center gd-4">
<div class="gd-7 pl0">
<p class="text-rg">이전 이메일 무단수집거부 확인</p>
</div>
<div class="gd-5 pr0">
<select name="" id="" class="full-select ml0">
<option value="1.0">Version 1.0</option>
</select>
</div>
</div>
</div>
<Email />
</div>
<div v-show="checkType === 'copyright'">
<div class="flex justify-between align-center border-b mb30 pb10 no-gutters">
<div class="middle-title pb0 gd-8">
<p>저작권 정책</p>
</div>
<!-- <div class="flex justify-start align-center gd-4">
<div class="gd-7 pl0">
<p class="text-rg">이전 이용약관 확인</p>
</div>
<div class="gd-5 pr0">
<select name="" id="" class="full-select ml0">
<option value="1.0">Ver_1.0</option>
</select>
</div>
</div> -->
</div>
<div class="border pd30">
<Copyright />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ProgressBar from '../../../component/progressbar/ProgressBar.vue';
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import Email from '../../../component/terms/Email.vue';
import Privacy from '../../../component/terms/Privacy .vue';
import Terms1 from '../../../component/terms/Terms1.vue';
import Copyright from '../../../component/terms/Copyright.vue';
export default {
props: {
type: {
type: String,
required: true
}
},
data() {
return {
tabType: [{ id: 'use', name: '이용약관' }, { id: 'privacy', name: '개인정보 처리방침' }, { id: 'email', name: '이메일 무단수집거부' }, { id: 'copyright', name: '저작권 정책' }],
checkType: null,
naviData: {},
};
},
methods: {
userTypeActive: function (type) {
this.naviData.main = '약관 및 정책';
if (type == 'use') {
this.naviData.sub = '이용약관';
} else if (type == 'privacy') {
this.naviData.sub = '개인정보 처리방침';
} else if (type == 'email') {
this.naviData.sub = '이메일 무단수집거부';
} else if (type == 'copyright') {
this.naviData.sub = '저작권 정책';
}
this.checkType = type
}
},
watch: {
'$route.query.type': {
immediate: true,
handler(newType) {
this.userTypeActive(newType);
}
}
},
computed: {},
components: {
'ProgressBar': ProgressBar,
'Terms1': Terms1,
'Privacy': Privacy,
'Email': Email,
'PageNavigationBar': PageNavigationBar,
'Copyright': Copyright
},
created() {
this.naviData = {};
},
mounted() {
const type = this.$route.query.type;
this.naviData = { 'main': '', 'sub': '' };
this.naviData.main = '약관 및 정책';
if (type === 'use') {
this.checkType = type;
this.naviData.sub = '이용약관';
} else if (type === 'privacy') {
this.checkType = type;
this.naviData.sub = '개인정보 처리방침 ';
} else if (type === 'email') {
this.checkType = type;
this.naviData.sub = '이메일 무단수집거부';
} else if (type === 'copyright') {
this.checkType = type;
this.naviData.sub = '저작권 정책';
}
},
beforeDestroy() {
},
};
</script>