<template>
    <div class="w1400">
        <section class="tech-logo">
            <img src="../../../../resources/jpg/tech-logo.png" alt="">

            <h1>기술문서</h1>
        </section>

        <div class="tech-sec">
            <section class="tech-sec1">
                <h2>2022년 온라인 콘텐츠 활용 교과서 선도학교 교원 역량 효과성 분석</h2>
                <div>
                    <input type="file" id="dtaildown" style="display: none;">
                    <label for="dtaildown">기술문서 다운로드</label>
                    <i class="fa-solid fa-download" style="color: #ffffff;"></i>
                </div>
            </section>

            <!-- /상세내용 -->
            <section class="tech-sec2">
                <section>

                    <div>
                        <img src="../../../../resources/jpg/tech-img.png" alt="">
                    </div>
                    <div>
                        <p><span>연구책임자</span> 정종원</p>
                        <p><span>연구진</span> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
                        <p><span>담당부서</span> 디지털교과서부</p>
                    </div>
                </section>
                <div class="tech-sec2-end">

                    <p><span>조회수</span>45454</p>

                </div>
            </section>

            <section class="tech-sec2-bt">
                <button @click="goToPage4">목록</button>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        goToPage4() {
            this.$router.push('/Technology.page')
        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Technology mounted');
    }
}
</script>
<style scoped>
@media all and (min-width: 1023px) and (max-width: 1268px) {
    .tech-sec1 {
        grid-template-columns: 80% 20%;
    }
}
</style>
