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="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>
.tech-logo {
padding: 6rem 2rem 2rem 2rem;
width: 85%;
}
.tech-logo h1 {
font-size: 4rem;
font-family: SBaggroM;
font-weight: 500;
color: #0e0077;
/* position: relative; */
}
.tech-logo img {
width: 10rem;
}
.tech-sec {
width: 100%;
padding: 2rem;
}
.tech-sec1 {
display: grid;
grid-template-columns: 85% 15%;
padding: 2rem 3rem 1rem 3rem;
background-color: #f4f4f4;
border-top: 1px solid rgb(199, 199, 199);
}
.tech-sec1 h2 {
font-size: 2rem;
color: #3f87f7;
}
.tech-sec1 div {
padding: 1rem;
border-radius: 0.5rem;
margin-top: 3rem;
/* text-align: right; */
text-align: center;
background-color: #3f87f7;
}
.tech-sec1 div label {
color: white;
font-size: 1.5rem;
margin-right: 1rem;
}
.tech-sec1 div i {
font-size: 1.5rem;
}
.tech-sec2 {
border-top: 1px solid rgb(199, 199, 199);
border-bottom: 1px solid rgb(199, 199, 199);
}
.tech-sec2 section {
display: grid;
grid-template-columns: 50% 1fr;
}
.tech-sec2 section div:nth-child(1) {
/* background-color: gainsboro; */
padding: 6rem;
/* border: 1px solid red; */
/* justify-content: space-between; */
text-align: right;
}
.tech-sec2 section div:nth-child(2) {
/* border: 1px solid red; */
padding: 6rem;
display: grid;
grid-template-columns: 1fr;
}
.tech-sec2 section div:nth-child(2) p {
border-top: 1px solid gainsboro;
padding: 4rem;
}
.tech-sec2 section div:nth-child(2) span {
color: #3f87f7;
font-size: 2rem;
font-weight: 700;
}
.tech-sec2 section img {
padding: 5rem;
margin: 0 auto;
box-shadow: 1px 1px 5px 5px #b2b2b236;
background-color: rgb(190, 190, 190);
/* border: 1px solid red; */
width: 50%;
}
.tech-sec2 div {
padding: 2rem 0;
}
.tech-sec2 p {
font-size: 1.7rem;
}
.tech-sec2-end p {
text-align: right;
font-size: 1.5rem;
}
.tech-sec2-end p span {
color: #3f87f7;
margin-right: 1rem;
}
.tech-sec2-end p:nth-child(2) {
text-align: right;
}
.tech-sec2-bt {
text-align: right;
width: 100%;
padding: 2rem 0 6rem 0;
}
.tech-sec2-bt button {
width: 15%;
padding: 1rem;
background-color: #3f87f7;
color: white;
border-radius: 0.5rem;
font-family: "Pretendard-Regular";
}
@media all and (max-width: 479px) {
.tech-logo,
.tech-logo img {
/* width: 100%; */
margin: 0 auto;
text-align: center;
}
.tech-sec1 {
grid-template-columns: 1fr;
}
.tech-sec2 section {
grid-template-columns: 1fr;
}
.tech-sec2 section img {
padding: 0rem;
}
.tech-sec2 section div:nth-child(1) {
padding: 5rem 2rem;
}
}
@media all and (min-width: 480px) and (max-width: 767px) {
.tech-logo,
.tech-logo img {
/* width: 100%; */
margin: 0 auto;
text-align: center;
}
.tech-sec1 {
grid-template-columns: 1fr;
}
.tech-sec2 section {
grid-template-columns: 1fr;
}
.tech-sec2 section img {
padding: 0rem;
}
.tech-sec2 section div:nth-child(1) {
padding: 5rem 2rem;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.tech-sec1 {
grid-template-columns: 75% 25%;
}
}
@media all and (min-width: 1023px) and (max-width: 1268px) {
.tech-sec1 {
grid-template-columns: 80% 20%;
}
}
</style>