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="matching-box-wrap">
<div class="w1400">
<div class="matching-wrap">
<div class="matching-img">
<img src="../../../../resources/jpg/mat-img.png" alt="">
</div>
<!-- 매칭 텍스트 -->
<div class="matching-text">
<i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
<p>기업 홍보관</p>
</div>
<div class="matching-img">
<img src="../../../../resources/jpg/mat-img1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- best기업 -->
<section class="matching-box-main">
<div class="matching-box-wrap-one">
<div class="w1400">
<div class="matching-box-grid">
<!-- best 기업 -->
<h3>BEST 기업</h3>
<div class="matching-box-bos">
<div class="matching-box matchingbox" @click="goToPage1">
<div>
<h3>(주)지학사</h3>
<img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
<p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
<div class="matchingbox-1">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p class="matchingbox-text">조회수 <span>120</span></p>
</div>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
</div>
</div>
<div class="matching-box matchingbox">
<div>
<h3>(주)지학사</h3>
<img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
<p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
<div class="matchingbox-1">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p class="matchingbox-text">조회수 <span>120</span></p>
</div>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
</div>
</div>
<div class="matching-box matchingbox">
<div>
<h3>(주)지학사</h3>
<img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
<p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
<div class="matchingbox-1">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p class="matchingbox-text">조회수 <span>120</span></p>
</div>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
</div>
</div>
<div class="matching-box matchingbox">
<div>
<h3>(주)지학사</h3>
<img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
<p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
<div class="matchingbox-1">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p class="matchingbox-text">조회수 <span>120</span></p>
</div>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
</div>
</div>
<div class="matching-box matchingbox">
<div>
<h3>(주)지학사</h3>
<img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
<p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
<div class="matchingbox-1">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p class="matchingbox-text">조회수 <span>120</span></p>
</div>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
</div>
</div>
<div class="matching-box matchingbox">
<div>
<h3>(주)지학사</h3>
<img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
<p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
<div class="matchingbox-1">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p class="matchingbox-text">조회수 <span>120</span></p>
</div>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 일반기업 -->
<section class="matching-box-main">
<div class="matching-box-main-two">
<div class="w1400">
<div class="matching-box-grid-two">
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
<div class="matching-box-2">
<div>
<h5>(주)금성출판사</h5>
<div class="matching-span">
<span>#혁신기업</span>
<span>#혁신기업</span>
<span>#혁신기업</span>
</div>
<div class="matchingbox-2">
<p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
<p>조회수 <span>110</span> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
goToPage1() {
this.$router.push('/MatchingDtail.page')
}
},
watch: {
},
computed: {
},
mounted() {
console.log('Matching mounted');
}
}
</script>
<style scoped>
.matching-box-wrap {
width: 100%;
background: linear-gradient(#5dadf6, #2e87da, #5dadf6);
}
.matching-wrap {
padding: 30px 30px;
display: grid;
width: 100%;
/* border: 1px solid red; */
justify-content: center;
grid-template-columns: 1fr 1fr 1fr;
}
.matching-wrap div {
/* width: 40%; */
width: 100%;
/* border: 1px solid red; */
}
.matching-wrap img {
width: 100%;
margin: 0 auto;
/* text-align: center; */
justify-content: center;
}
.matching-text {
margin: 0 auto;
text-align: center;
font-size: 5rem;
/* padding-bottom: 50px; */
font-family: SBaggroM;
color: white;
}
.matching-box-wrap-one {
width: 100%;
height: 100%;
padding: 3rem;
margin: 0 auto;
text-align: center;
color: #3f87f7;
background-color: #e2e2e2;
}
.matching-box-grid>h3 {
font-size: 2.6rem;
padding: 3rem;
font-family: SBaggroM;
}
.matching-box-bos {
width: 100%;
place-items: center;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.matchingbox {
width: 90%;
padding: 2rem;
}
.matchingbox h3 {
padding: 1rem;
font-size: 2rem;
color: #3f87f7;
font-family: "Pretendard-Regular";
}
.matchingbox img {
/* padding: 2rem; */
height: 119px;
width: 80%;
margin: 0 auto;
object-fit: contain;
}
.matchingbox p:nth-child(3) {
text-align: left;
color: #333;
font-size: 1.5rem;
padding: 1rem;
}
.matchingbox p:nth-child(4) {
text-align: right;
font-size: 1.5rem;
color: #333;
padding: 1rem;
}
.matchingbox div {
padding: 1rem;
background-color: #ffffff;
box-shadow: 2px 2px 2px #33333332;
position: relative;
}
.matchingbox div:nth-child(1):before {
position: absolute;
content: "AA등급";
line-height: 40px;
color: white;
font-size: 1.5rem;
font-weight: 800;
width: 90px;
height: 40px;
top: -25px;
right: -5%;
background-color: #3f87f7;
border-radius: 45px;
transform: translateX(-50%);
}
.matchingbox-1 {
display: flex;
box-shadow: 0px 0px 0px white !important;
flex-direction: row;
justify-content: flex-end;
}
.matchingbox-1 p {
text-align: right;
font-size: 1.5rem;
padding: 1rem;
color: rgb(6, 6, 6);
}
.matchingbox-text {
text-align: right;
font-size: 1.3rem;
padding: 1rem;
font-weight: 700;
color: rgb(6, 6, 6);
}
.matchingbox-text span {
font-weight: 400;
}
.matching-box-main-two {
width: 100%;
margin: 0 auto;
}
.matching-box-grid-two {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: 0 auto;
place-items: center;
padding: 3rem;
}
.matching-box-2 {
padding: 2rem;
margin: 1rem;
background-color: #f9f9f9;
box-shadow: 2px 2px 5px #33333332;
}
.matching-box-2 div {
display: flex;
flex-wrap: wrap;
}
.matching-box-2 h5 {
width: 100%;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.matching-box-2 p {
width: 100%;
font-size: 1.5rem;
text-align: right;
justify-content: right;
font-family: "Pretendard-Regular";
}
.matchingbox-2 {
width: 100%;
display: flex;
padding: 1.5rem 0px;
flex-wrap: nowrap;
justify-content: flex-end;
flex-direction: row !important;
}
.matchingbox-2 p {
width: 25%;
}
@media all and (max-width:479px) {
.matching-box img {
width: 100%;
}
.matching-span span {
padding: 1rem 1.5rem 1rem 1.5rem;
}
.matching-box-bos {
grid-template-columns: 1fr;
}
.matching-box-grid-two {
grid-template-columns: 1fr;
width: 100%;
}
.matching-text {
/* display: none; */
padding-top: 3rem;
font-size: 2rem;
}
}
@media all and (min-width: 480px) and (max-width: 767px) {
.matching-box img {
width: 100%;
}
.matching-box-bos {
grid-template-columns: 1fr;
}
.matching-box-grid-two {
grid-template-columns: 1fr;
}
.mat-sec-b {
width: 90%;
}
.matching-text {
font-size: 3rem;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.matching-box img {
width: 100%;
}
.matching-box-bos {
width: 100%;
grid-template-columns: 1fr 1fr;
}
.matching-box-grid-two {
grid-template-columns: 1fr 1fr;
}
.mat-sec-b {
width: 90%;
}
}
@media all and (min-width: 1023px) and (max-width: 1268px) {}
</style>