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="mat-main">
<section class="main-sec sec1">
<!-- <div class="main-content"> -->
<div class="flex">
<!-- 매칭비주얼 -->
<div class="mat-b">
<div class="w1400">
<div class="mat-b-b">
<div class="mat-img">
<img src="../../../../resources/jpg/mat-img.png" alt="">
</div>
<!-- 매칭 텍스트 -->
<div class="mat-text">
<i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
<p>기업 홍보관</p>
</div>
<div class="mat-img">
<img src="../../../../resources/jpg/mat-img1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="w1400">
<div class="mat-bos">
<h1><img src="../../../../resources/jpg/mat-img-d.png" alt="">회사소개</h1>
</div>
<div class="matDtail-sec">
<section class="mat-sec1">
<h2>(주)지학사 <span>(1등급)</span></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="mat-sec2">
<div>
<img src="../../../../resources/jpg/matching-img.png" alt="">
</div>
<div>
<p>교과서
지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
</p>
</div>
<div class="mat-sec2-end">
<p>
<i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
366666
</p>
<p><span>조회수</span>45454</p>
</div>
</section>
<section class="mat-sec2-bt">
<button @click="goToPage2">목록</button>
</section>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
goToPage2() {
this.$router.push('/Matching.page')
}
},
watch: {
},
computed: {
},
mounted() {
console.log('Matching mounted');
}
}
</script>
<style scoped>
.mat-bos {
padding: 6rem 6rem 1rem 6rem;
width: 100%;
}
.mat-bos img {
width: 50px;
/* transform: translateY(10px);/ */
z-index: -1;
}
.mat-bos h1 {
font-size: 2.7rem;
z-index: 100 !important;
font-family: SBaggroM;
}
.matDtail-sec {
width: 100%;
padding: 0rem 6rem 6rem 6rem;
display: grid;
grid-template-columns: 1fr;
}
.mat-sec1 {
display: grid;
grid-template-columns: 85% 15%;
padding: 2rem 3rem 1rem 3rem;
background-color: #f4f4f4;
border-top: 1px solid rgb(199, 199, 199);
}
.mat-sec1 h2 {
font-size: 2rem;
color: #3f87f7;
}
.mat-sec1 h2 span {
color: #90baff;
font-size: 1.5rem;
}
.mat-sec1 div {
padding: 1rem;
border-radius: 0.5rem;
margin-top: 3rem;
/* text-align: right; */
text-align: center;
background-color: #3f87f7;
}
.mat-sec1 div label {
color: white;
font-size: 1.5rem;
margin-right: 1rem;
}
.mat-sec1 div i {
font-size: 1.5rem;
}
.mat-sec2 {
border-top: 1px solid rgb(199, 199, 199);
border-bottom: 1px solid rgb(199, 199, 199);
}
.mat-sec2 div {
padding: 2rem 0;
}
.mat-sec2-end {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mat-sec2 p {
font-size: 1.7rem;
}
.mat-sec2-end p {
font-size: 1.5rem;
}
.mat-sec2-end p span {
color: #3f87f7;
margin-right: 1rem;
}
.mat-sec2-end p:nth-child(2) {
text-align: right;
}
.mat-sec2-bt {
text-align: right;
width: 100%;
padding: 2rem 0;
}
.mat-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) {
.mat-bos {
width: 100%;
padding: 2rem;
}
.mat-bos h1,
.mat-bos img {
text-align: center;
margin: 0 auto;
}
.mat-sec1 {
grid-template-columns: 1fr;
}
.matDtail-sec {
width: 100%;
padding: 2rem;
}
.mat-span span {
padding: 1rem 1.5rem 1rem 1.5rem;
}
}
@media all and (min-width: 480px) and (max-width: 767px) {
.mat-bos {
width: 100%;
padding: 2rem;
}
.mat-bos h1,
.mat-bos img {
text-align: center;
margin: 0 auto;
}
.mat-sec1 {
grid-template-columns: 1fr;
}
.matDtail-sec {
width: 100%;
padding: 2rem;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.mat-sec1 {
grid-template-columns: 75% 25%;
}
}
@media all and (min-width: 1023px) and (max-width: 1268px) {
.mat-sec1 {
grid-template-columns: 80% 20%;
}
}
</style>