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">
<div class="tech">
<section class="tech-logo">
<img src="../../../../resources/jpg/tech-logo.png" alt="">
<h1>기술문서</h1>
</section>
<div class="tech-bos">
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button @click="goToPage3">바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
<p>23.10.26</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
goToPage3() {
this.$router.push('/TechnologyDtail.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-bos {
width: 90%;
margin: 0 auto;
/* place-items: center; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4rem;
padding: 6rem 3rem 6rem 3rem;
text-align: center;
/* border: 1px solid red; */
}
.tech-box-sec {
padding: 2rem;
/* border-radius: 2rem; */
background-color: #f9f9f9;
box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
/* border: 1px solid rgb(191, 191, 191); */
}
.tech-box-sec-h3 {
padding: 1rem;
font-size: 1.7rem;
font-family: "Pretendard-Regular";
}
.tech-box-sec div img {
/* border: 1px solid blue; */
box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
width: 85%;
height: 15rem;
margin: 0 auto;
background-size: cover;
border-radius: 1.5rem;
}
.tech-box-sec div p {
width: 85%;
padding: 1rem;
margin: 0 auto;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.tech-box-sec div button {
width: 85%;
border-radius: 2rem;
padding: 2rem;
font-size: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
background-color: #3f87f7;
}
@media all and (max-width: 479px) {
.tech-logo {
width: 100%;
text-align: center;
}
.tech-logo img {
margin: 0 auto;
}
.tech-bos {
width: 90%;
grid-template-columns: 1fr;
}
}
@media all and (min-width: 480px) and (max-width: 767px) {
.tech-logo {
width: 100%;
text-align: center;
}
.tech-logo img {
margin: 0 auto;
}
.tech-bos {
width: 90%;
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.tech-logo {
width: 100%;
text-align: center;
}
.tech-logo img {
margin: 0 auto;
}
.tech-bos {
width: 90%;
grid-template-columns: 1fr 1fr;
}
}
</style>