매물 상세 등록번호 임시저장시 색깔 클래스 추가
This commit is contained in:
parent
46d3c5c4cc
commit
279bcacada
@ -1,38 +1,50 @@
|
||||
import Link from 'next/link'
|
||||
import '@/styles/publishpage.scss'
|
||||
import Link from "next/link";
|
||||
import "@/styles/publishpage.scss";
|
||||
|
||||
export default function PublishList (){
|
||||
return(
|
||||
export default function PublishList() {
|
||||
return (
|
||||
<div className="publish-list">
|
||||
<div className="p-header">
|
||||
<h1>Hanasys 현지조사</h1>
|
||||
</div>
|
||||
<div className="p-body">
|
||||
<div className="p-contents">
|
||||
<div className='p-guide'>
|
||||
<div className="p-guide">
|
||||
<div className="p-guide-header">Publish Guide</div>
|
||||
<div className="p-guide-content">
|
||||
<p>※ className은 케밥 케이스 사용 <span>ex) "sample-class"</span></p>
|
||||
<p>※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자 사용 <span>ex) "img_sample01"</span></p>
|
||||
<p>※ button, select, checkbox, radio... 등 기본 설정은 <span>InputCommon.jsx</span>에 정의된 내용만 사용 (icon버튼 제외)</p>
|
||||
<p>※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에 적합한 폴더에 생성</p>
|
||||
<div className='p-guide-inputcommon'>
|
||||
<p>
|
||||
※ className은 케밥 케이스 사용 <span>ex) "sample-class"</span>
|
||||
</p>
|
||||
<p>
|
||||
※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자
|
||||
사용 <span>ex) "img_sample01"</span>
|
||||
</p>
|
||||
<p>
|
||||
※ button, select, checkbox, radio... 등 기본 설정은{" "}
|
||||
<span>InputCommon.jsx</span>에 정의된 내용만 사용 (icon버튼
|
||||
제외)
|
||||
</p>
|
||||
<p>
|
||||
※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에
|
||||
적합한 폴더에 생성
|
||||
</p>
|
||||
<div className="p-guide-inputcommon">
|
||||
<h3>기본 SetUp Input 모음</h3>
|
||||
<Link href={'/inputcommon'}>InputCommon.jsx</Link>
|
||||
<Link href={"/inputcommon"}>InputCommon.jsx</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-list-wrap'>
|
||||
<div className="p-list-wrap">
|
||||
<h2>Publish List</h2>
|
||||
<div className='p-list-table'>
|
||||
<div className="p-list-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{width: '10%'}}/>
|
||||
<col/>
|
||||
<col style={{width: '20%'}}/>
|
||||
<col style={{width: '13%'}}/>
|
||||
<col style={{width: '20%'}}/>
|
||||
<col style={{width: '13%'}}/>
|
||||
<col style={{ width: "10%" }} />
|
||||
<col />
|
||||
<col style={{ width: "20%" }} />
|
||||
<col style={{ width: "13%" }} />
|
||||
<col style={{ width: "20%" }} />
|
||||
<col style={{ width: "13%" }} />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -49,66 +61,54 @@ export default function PublishList (){
|
||||
<td>Login</td>
|
||||
<td>Login Page</td>
|
||||
<td>
|
||||
<Link href={'login'}>LoginPage.tsx</Link>
|
||||
<Link href={"login"}>LoginPage.tsx</Link>
|
||||
</td>
|
||||
<td></td>
|
||||
<td className='c'>
|
||||
|
||||
</td>
|
||||
<td className='c red'>2025/04/28</td>
|
||||
<td className="c"></td>
|
||||
<td className="c red">2025/04/28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Main</td>
|
||||
<td>Main Page</td>
|
||||
<td>
|
||||
<Link href={'main'}>MainPage.tsx</Link>
|
||||
<Link href={"main"}>MainPage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
회원정보 팝업 포함
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c">회원정보 팝업 포함</td>
|
||||
<td className="c red">
|
||||
<ul>
|
||||
<li>2025/05/15</li>
|
||||
<li>* 팝업 img태그 Image 컴포넌트 변환</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/29</td>
|
||||
<td className="c red">2025/04/29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alert</td>
|
||||
<td>Alert 모음</td>
|
||||
<td>
|
||||
<Link href={'alert'}>AlertPage.tsx</Link>
|
||||
<Link href={"alert"}>AlertPage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
|
||||
</td>
|
||||
<td className='c'>
|
||||
|
||||
</td>
|
||||
<td className='c red'>2025/04/29</td>
|
||||
<td className="c"></td>
|
||||
<td className="c"></td>
|
||||
<td className="c red">2025/04/29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={3}>매물</td>
|
||||
<td>매물 목록</td>
|
||||
<td>
|
||||
<Link href={'sale/salelist'}>SaleListPage.tsx</Link>
|
||||
<Link href={"sale/salelist"}>SaleListPage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>2025/04/29</td>
|
||||
<td className="c"></td>
|
||||
<td className="c"></td>
|
||||
<td className="c red">2025/04/29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>매물 상세</td>
|
||||
<td>
|
||||
<Link href={'sale/saledetail'}>SaleDetailPage.tsx</Link>
|
||||
<Link href={"sale/saledetail"}>SaleDetailPage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
제출 팝업 포함
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c">제출 팝업 포함</td>
|
||||
<td className="c red">
|
||||
{/* <ul>
|
||||
<li>2025/05/15</li>
|
||||
<li>* 상세 페이지 전체 재수정</li>
|
||||
@ -123,26 +123,32 @@ export default function PublishList (){
|
||||
<li>2025/05/27</li>
|
||||
<li>* 제출 팝업 상단 select 영역 추가</li>
|
||||
</ul> */}
|
||||
<ul>
|
||||
{/* <ul>
|
||||
<li>2025/05/28</li>
|
||||
<li>* 제출 팝업 발송자 영역 최상단 위치 조정</li>
|
||||
<li>* 제출 팝업 내용 영역 수정</li>
|
||||
<li>* 지붕 구조의 순서 영역 수정</li>
|
||||
</ul> */}
|
||||
<ul>
|
||||
<li>2025/07/18</li>
|
||||
<li>
|
||||
* 매물 상세 등록번호 임시저장시 색깔 클래스 추가
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/29</td>
|
||||
<td className="c red">2025/04/29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>매물 신규등록</td>
|
||||
<td>
|
||||
<Link href={'sale/saleedit'}>SaleEditPage.tsx</Link>
|
||||
<Link href={"sale/saleedit"}>SaleEditPage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
<td className="c">
|
||||
<ul>
|
||||
<li>주소 검색 팝업 포함</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c red">
|
||||
{/* <ul>
|
||||
<li>2025/05/15</li>
|
||||
<li>* 페이지 추가</li>
|
||||
@ -154,48 +160,53 @@ export default function PublishList (){
|
||||
<li>* 지붕 구조의 순서 영역 수정</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/05/15</td>
|
||||
<td className="c red">2025/05/15</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td rowSpan={4}>1:1 문의</td>
|
||||
<td>1:1 문의 목록</td>
|
||||
<td>
|
||||
<Link href={'inquiry/inquirylist'}>InquiryListPage.tsx</Link>
|
||||
<Link href={"inquiry/inquirylist"}>
|
||||
InquiryListPage.tsx
|
||||
</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c"></td>
|
||||
<td className="c red">
|
||||
<ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* 제목 변경 및 문의 유형 추가</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
<td className="c red">2025/04/30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:1 문의 작성</td>
|
||||
<td>
|
||||
<Link href={'inquiry/inquirycreate'}>InquiryCreatePage.tsx</Link>
|
||||
<Link href={"inquiry/inquirycreate"}>
|
||||
InquiryCreatePage.tsx
|
||||
</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c"></td>
|
||||
<td className="c red">
|
||||
<ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* 문의 유형 필드 및 연락처, 이름 필드 추가, 제목 변경</li>
|
||||
<li>
|
||||
* 문의 유형 필드 및 연락처, 이름 필드 추가, 제목 변경
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
<td className="c red">2025/04/30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:1 문의 상세</td>
|
||||
<td>
|
||||
<Link href={'inquiry/inquirydetail'}>InquiryDetailPage.tsx</Link>
|
||||
<Link href={"inquiry/inquirydetail"}>
|
||||
InquiryDetailPage.tsx
|
||||
</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c"></td>
|
||||
<td className="c red">
|
||||
{/* <ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li>
|
||||
@ -205,16 +216,17 @@ export default function PublishList (){
|
||||
<li>* 상세 인적 정보 위치 변경</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
<td className="c red">2025/04/30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1:1 문의 상세 (답변)</td>
|
||||
<td>
|
||||
<Link href={'inquiry/inquiryanswer'}>InquiryAnswerPage.tsx</Link>
|
||||
<Link href={"inquiry/inquiryanswer"}>
|
||||
InquiryAnswerPage.tsx
|
||||
</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c"></td>
|
||||
<td className="c red">
|
||||
{/* <ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li>
|
||||
@ -224,30 +236,28 @@ export default function PublishList (){
|
||||
<li>* 상세 인적 정보 위치 변경</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
<td className="c red">2025/04/30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>비밀번호 변경</td>
|
||||
<td>비밀번호 변경 페이지</td>
|
||||
<td>
|
||||
<Link href={'pwchange'}>PwChangePage.tsx</Link>
|
||||
<Link href={"pwchange"}>PwChangePage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
<td className="c"></td>
|
||||
<td className="c"></td>
|
||||
<td className="c red">2025/04/30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>지붕재 적합성</td>
|
||||
<td>지붕재 적합성 페이지</td>
|
||||
<td>
|
||||
<Link href={'roofcompliance'}>RoofCompliancePage.tsx</Link>
|
||||
<Link href={"roofcompliance"}>
|
||||
RoofCompliancePage.tsx
|
||||
</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
지붕재 적합성 상세 팝업 포함
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<td className="c">지붕재 적합성 상세 팝업 포함</td>
|
||||
<td className="c red">
|
||||
{/* <ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* Search Input 지우기 버튼 추가가</li>
|
||||
@ -257,39 +267,36 @@ export default function PublishList (){
|
||||
<li>* 팝업 img태그 Image 컴포넌트 변환</li>
|
||||
<li>* 최하단 버튼 모음 float버튼 변환</li>
|
||||
</ul> */}
|
||||
<ul className='mt5'>
|
||||
<ul className="mt5">
|
||||
<li>2025/06/05</li>
|
||||
<li>* 팝업 버튼 float 변경</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/05/08</td>
|
||||
<td className="c red">2025/05/08</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowSpan={2}>PDF 뷰어</td>
|
||||
<td>조사매물 pdf</td>
|
||||
<td>
|
||||
<Link href={'pdfview'}>PDFView.tsx</Link>
|
||||
<Link href={"pdfview"}>PDFView.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
</td>
|
||||
<td className='c red'>2025/05/19</td>
|
||||
<td className="c"></td>
|
||||
<td className="c red"></td>
|
||||
<td className="c red">2025/05/19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>지붕재 적합성 pdf</td>
|
||||
<td>
|
||||
<Link href={'pdftable'}>PDFTablePage.tsx</Link>
|
||||
<Link href={"pdftable"}>PDFTablePage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<ul className='mt5'>
|
||||
<td className="c"></td>
|
||||
<td className="c red">
|
||||
<ul className="mt5">
|
||||
<li>2025/06/02</li>
|
||||
<li>* 하단 날짜 추가 및 min max width 수정</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/05/28</td>
|
||||
<td className="c red">2025/05/28</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -298,5 +305,5 @@ export default function PublishList (){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
export default function SaleDetailData(){
|
||||
return(
|
||||
export default function SaleDetailData() {
|
||||
return (
|
||||
<div className="sale-data-table-wrap">
|
||||
<table className="sale-data-table">
|
||||
<colgroup>
|
||||
<col style={{width: '80px'}}/>
|
||||
<col />
|
||||
<col style={{ width: "80px" }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>登録番号</th>
|
||||
<td>0000000020</td>
|
||||
<td className="sale-data-num">0000000020</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>登録日</th>
|
||||
@ -26,11 +26,13 @@ export default function SaleDetailData(){
|
||||
<tr>
|
||||
<th>ダウンロード</th>
|
||||
<td>
|
||||
<button className="data-down">HWJ現地調査票確認<i className="down-icon"></i></button>
|
||||
<button className="data-down">
|
||||
HWJ現地調査票確認<i className="down-icon"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
@use "../abstracts" as *;
|
||||
|
||||
// input form 공통
|
||||
.data-input-form-bx{
|
||||
.data-input-form-bx {
|
||||
margin-bottom: 18px;
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.data-input-form-tit{
|
||||
.data-input-form-tit {
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
margin-bottom: 10px;
|
||||
.import{
|
||||
color: #F00;
|
||||
.import {
|
||||
color: #f00;
|
||||
}
|
||||
span{
|
||||
span {
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
|
||||
}
|
||||
}
|
||||
.data-input-guide{
|
||||
.data-input-guide {
|
||||
margin-top: 8px;
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flex-wrap{
|
||||
.btn-flex-wrap {
|
||||
@include flex(5px);
|
||||
margin-top: 24px;
|
||||
.btn-bx{
|
||||
.btn-bx {
|
||||
flex: 1;
|
||||
}
|
||||
&.com{
|
||||
.btn-bx{
|
||||
&.com {
|
||||
.btn-bx {
|
||||
flex: 1 1 auto;
|
||||
button{
|
||||
button {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -40,13 +40,13 @@
|
||||
}
|
||||
|
||||
// 매물 common
|
||||
.top-btn{
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
right: 15px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background-color: rgba(0, 0, 0, 0.50);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-image: url(/assets/images/sub/top_btn_icon.svg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -55,277 +55,282 @@
|
||||
z-index: 90000;
|
||||
}
|
||||
|
||||
.sale-contents{
|
||||
.sale-contents {
|
||||
width: 100%;
|
||||
background-color: #F5F5F5;
|
||||
.sale-frame{
|
||||
background-color: #f5f5f5;
|
||||
.sale-frame {
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
border-top: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
background-color: $white-fff;
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-form-btn-wrap{
|
||||
padding: 20px 20px 0 ;
|
||||
.sale-form-btn-wrap {
|
||||
padding: 20px 20px 0;
|
||||
background-color: #fff;
|
||||
.btn-flex-wrap{
|
||||
.btn-flex-wrap {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 매물 목록
|
||||
.sale-form-bx{
|
||||
.sale-form-bx {
|
||||
margin-bottom: 14px;
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.sale-list-wrap{
|
||||
.sale-list-item{
|
||||
}
|
||||
.sale-list-wrap {
|
||||
.sale-list-item {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ececec;
|
||||
cursor: pointer;
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-item-bx{
|
||||
.sale-item-date-bx{
|
||||
.sale-item-bx {
|
||||
.sale-item-date-bx {
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
margin-bottom: 9px;
|
||||
.sale-item-num{
|
||||
.sale-item-num {
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding-right: 6px;
|
||||
&::after{
|
||||
content: '';
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #A2ABB8;
|
||||
background-color: #a2abb8;
|
||||
}
|
||||
}
|
||||
.sale-item-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
.sale-item-date {
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
.sale-item-tit{
|
||||
.sale-item-tit {
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@include ellipsis(1);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.sale-item-customer{
|
||||
.sale-item-customer {
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.sale-item-update-bx{
|
||||
.sale-item-update-bx {
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.sale-item-name{
|
||||
.sale-item-name {
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
padding-right: 6px;
|
||||
&::after{
|
||||
content: '';
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #A2ABB8;
|
||||
background-color: #a2abb8;
|
||||
}
|
||||
}
|
||||
.sale-item-update{
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
.sale-item-update {
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
&.nodata{
|
||||
.sale-item-nodata{
|
||||
&.nodata {
|
||||
.sale-item-nodata {
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-edit-btn{
|
||||
.sale-edit-btn {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
// 매물 상세
|
||||
.sale-data-table-wrap{
|
||||
.sale-data-table-wrap {
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-top: 1px solid #ececec;
|
||||
.sale-data-num {
|
||||
color: #1259cb;
|
||||
}
|
||||
}
|
||||
.sale-data-table{
|
||||
.sale-data-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
tbody{
|
||||
tr{
|
||||
th{
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
vertical-align: top;
|
||||
padding: 5px 0;
|
||||
}
|
||||
td{
|
||||
td {
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding: 5px 0 8px 14px;
|
||||
.data-down{
|
||||
.data-down {
|
||||
@include flex(8px);
|
||||
align-items: center;
|
||||
color: #1259CB;
|
||||
i{
|
||||
color: #1259cb;
|
||||
i {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
background: url(/assets/images/sub/down_icon.svg)no-repeat center;
|
||||
background: url(/assets/images/sub/down_icon.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
th,td{
|
||||
&:first-child {
|
||||
th,
|
||||
td {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
th,td{
|
||||
&:last-child {
|
||||
th,
|
||||
td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sale-detail-toggle-wrap{
|
||||
border-top: 1px solid #ECECEC;
|
||||
.sale-detail-toggle-wrap {
|
||||
border-top: 1px solid #ececec;
|
||||
}
|
||||
.sale-detail-toggle-bx{
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
.sale-detail-toggle-bx {
|
||||
border-bottom: 1px solid #ececec;
|
||||
}
|
||||
.sale-detail-toggle-head{
|
||||
.sale-detail-toggle-head {
|
||||
@include flex(5px);
|
||||
padding: 14px 18px;
|
||||
background-color: $white-fff;
|
||||
cursor: pointer;
|
||||
.sale-detail-toggle-name{
|
||||
.sale-detail-toggle-name {
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.sale-detail-toggle-btn-wrap{
|
||||
.sale-detail-toggle-btn-wrap {
|
||||
margin-left: auto;
|
||||
.sale-detail-toggle-btn{
|
||||
.sale-detail-toggle-btn {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
|
||||
background-size: cover
|
||||
background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-detail-toggle-cont{
|
||||
.sale-detail-toggle-cont {
|
||||
display: none;
|
||||
.sale-frame{
|
||||
.sale-frame {
|
||||
padding: 24px 20px;
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
padding-top: 24px;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sale-detail-toggle-bx{
|
||||
&.act{
|
||||
.sale-detail-toggle-head{
|
||||
background-color: #5F738E;
|
||||
.sale-detail-toggle-name{
|
||||
color: #fff
|
||||
.sale-detail-toggle-bx {
|
||||
&.act {
|
||||
.sale-detail-toggle-head {
|
||||
background-color: #5f738e;
|
||||
.sale-detail-toggle-name {
|
||||
color: #fff;
|
||||
}
|
||||
.sale-detail-toggle-btn-wrap{
|
||||
.sale-detail-toggle-btn{
|
||||
background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
|
||||
.sale-detail-toggle-btn-wrap {
|
||||
.sale-detail-toggle-btn {
|
||||
background: url(/assets/images/sub/sale_toggle_btn_white.svg)
|
||||
no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-detail-toggle-cont{
|
||||
.sale-detail-toggle-cont {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 매물 기본정보
|
||||
.form-flex{
|
||||
.form-flex {
|
||||
@include flex(5px);
|
||||
.form-bx{
|
||||
.form-bx {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.form-btn{
|
||||
.form-btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
// 매물 전기 지붕정보
|
||||
.sale-roof-title{
|
||||
.sale-roof-title {
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
}
|
||||
.data-check-wrap{
|
||||
.data-check-wrap {
|
||||
@include flex(10px);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
.radio-form-box,
|
||||
.check-form-box{
|
||||
.check-form-box {
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
&.mb0{
|
||||
&.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.data-input{
|
||||
&.flex{
|
||||
.data-input {
|
||||
&.flex {
|
||||
@include flex(8px);
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
flex: none;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 1:1 문의 common
|
||||
.inquiry-frame{
|
||||
.inquiry-frame {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.badge{
|
||||
.badge {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -334,92 +339,91 @@
|
||||
text-align: center;
|
||||
font-size: $font-s-12;
|
||||
font-weight: $font-w-500;
|
||||
&.blue{
|
||||
color: #5497E9;
|
||||
background-color: #ECF5FF;
|
||||
&.blue {
|
||||
color: #5497e9;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
&.orange{
|
||||
color: #F86A56;
|
||||
background-color: #FFEFED;
|
||||
&.orange {
|
||||
color: #f86a56;
|
||||
background-color: #ffefed;
|
||||
}
|
||||
&.block{
|
||||
&.block {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
// 1:1 문의 목록
|
||||
.inquiry-table-filter{
|
||||
.inquiry-table-filter {
|
||||
margin-bottom: 24px;
|
||||
.filter-check{
|
||||
.filter-check {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
.inquiry-list-tit{
|
||||
.inquiry-list-tit {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
span{
|
||||
span {
|
||||
font-weight: $font-w-500;
|
||||
}
|
||||
}
|
||||
.inquiry-list{
|
||||
.inquiry-item{
|
||||
.inquiry-list {
|
||||
.inquiry-item {
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
&:last-child{
|
||||
border-bottom: 1px solid #ececec;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.inquiry-item-bx{
|
||||
.inquiry-item-bx {
|
||||
position: relative;
|
||||
padding-right: 70px;
|
||||
.inquiry-item-category{
|
||||
.inquiry-item-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
span{
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding: 0 6px;
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
&::before{
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #A2ABB8;
|
||||
background-color: #a2abb8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inquiry-item-tit{
|
||||
.inquiry-item-tit {
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@include ellipsis(1);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.inquiry-item-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
.inquiry-item-date {
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
}
|
||||
.inquiry-badge{
|
||||
.inquiry-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
&.nodata{
|
||||
&.nodata {
|
||||
padding-right: 0;
|
||||
.inquiry-item-nodata{
|
||||
.inquiry-item-nodata {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@ -430,42 +434,43 @@
|
||||
}
|
||||
|
||||
// 1:1문의 작성
|
||||
.inquiry-file-wrap{
|
||||
.inquiry-file-wrap {
|
||||
margin-top: 20px;
|
||||
.file-list-wrap{
|
||||
.file-list-wrap {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
.file-list-tit{
|
||||
.file-list-tit {
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.file-list{
|
||||
.file-list {
|
||||
margin-top: 14px;
|
||||
.file-item{
|
||||
border-top: 1px solid #EDEDED;
|
||||
.file-item {
|
||||
border-top: 1px solid #ededed;
|
||||
cursor: default;
|
||||
.file-item-bx{
|
||||
.file-item-bx {
|
||||
width: 100%;
|
||||
padding: 14px 0;
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.file-item-name{
|
||||
.file-item-name {
|
||||
@include ellipsis(1);
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding-right: 10px;
|
||||
}
|
||||
.file-del{
|
||||
.file-del {
|
||||
flex: none;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
|
||||
background: url(/assets/images/common/id_delete_icon.svg) no-repeat
|
||||
center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.file-item-bx{
|
||||
&:last-child {
|
||||
.file-item-bx {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -473,186 +478,186 @@
|
||||
}
|
||||
|
||||
// 1:1 문의 상세
|
||||
.inquiry-detail-data-table{
|
||||
.inquiry-detail-data-table {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ececec;
|
||||
}
|
||||
.inquiry-detail-data{
|
||||
.inquiry-detail-data {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
margin-bottom: 24px;
|
||||
.inquiry-detail-category{
|
||||
.inquiry-detail-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 3px;
|
||||
span{
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding: 0 6px;
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
&::before{
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #A2ABB8;
|
||||
background-color: #a2abb8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inquiry-detail-tit{
|
||||
.inquiry-detail-tit {
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.inquiry-detail-txt{
|
||||
.inquiry-detail-txt {
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
// 1:1 문의 답변
|
||||
.inquiry-answer-wrap{
|
||||
.inquiry-answer-wrap {
|
||||
margin-top: 24px;
|
||||
|
||||
}
|
||||
.inquiry-answer-header{
|
||||
.inquiry-answer-header {
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #F86A56;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
.inquiry-answer-tit{
|
||||
@include defaultFont($font-s-14, $font-w-500, #F86A56);
|
||||
border-top: 1px solid #f86a56;
|
||||
border-bottom: 1px solid #ececec;
|
||||
.inquiry-answer-tit {
|
||||
@include defaultFont($font-s-14, $font-w-500, #f86a56);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.inquiry-answer-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #F86A56);
|
||||
.inquiry-answer-date {
|
||||
@include defaultFont($font-s-13, $font-w-400, #f86a56);
|
||||
}
|
||||
}
|
||||
.inquiry-answer-tit{
|
||||
.inquiry-answer-tit {
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
// 비밀번호 변경
|
||||
.border-frame{
|
||||
.border-frame {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
border-top: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.pw-guide{
|
||||
.pw-guide-tit{
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259CB);
|
||||
.pw-guide {
|
||||
.pw-guide-tit {
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259cb);
|
||||
}
|
||||
.pw-guide-txt{
|
||||
@include defaultFont($font-s-13, $font-w-400, #417DDC);
|
||||
.pw-guide-txt {
|
||||
@include defaultFont($font-s-13, $font-w-400, #417ddc);
|
||||
}
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.compliance-icon{
|
||||
.compliance-icon {
|
||||
display: flex;
|
||||
}
|
||||
.compliance-check-wrap{
|
||||
.compliance-check-wrap {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.compliance-check-bx{
|
||||
.compliance-check-bx {
|
||||
position: relative;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid #EFEFEF;
|
||||
border: 1px solid #efefef;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.act{
|
||||
.bx-btn{
|
||||
&.act {
|
||||
.bx-btn {
|
||||
transform: rotate(0) !important;
|
||||
}
|
||||
.reference-list{
|
||||
display: block
|
||||
.reference-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-name-wrap{
|
||||
.check-name-wrap {
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.check-name{
|
||||
.check-name {
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.check-name-btn{
|
||||
.check-name-btn {
|
||||
padding-left: 5px;
|
||||
margin-left: auto;
|
||||
.bx-btn{
|
||||
.bx-btn {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
|
||||
background: url(/assets/images/sub/compliance_bx_icon.svg) no-repeat
|
||||
center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.reference-list{
|
||||
.reference-list {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
transition: all .15s ease-in-out;
|
||||
.reference-item{
|
||||
border-top: 1px solid #ececec;
|
||||
transition: all 0.15s ease-in-out;
|
||||
.reference-item {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 14px;
|
||||
.reference-item-bx{
|
||||
.reference-item-bx {
|
||||
@include flex(10px);
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
align-items: center;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.check{
|
||||
.reference-item{
|
||||
&.check {
|
||||
.reference-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compliace-nosearch{
|
||||
.compliace-nosearch {
|
||||
padding: 30px 0;
|
||||
span{
|
||||
span {
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.check-item-wrap{
|
||||
.check-item-wrap {
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
}
|
||||
.compliance-icon-wrap{
|
||||
.compliance-icon-wrap {
|
||||
margin-left: auto;
|
||||
min-width: 44px;
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
}
|
||||
.float-btn-wrap{
|
||||
.float-btn-wrap {
|
||||
position: sticky;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
@ -660,14 +665,14 @@
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
@media screen and (max-width: 360px){
|
||||
.btn-flex-wrap{
|
||||
@media screen and (max-width: 360px) {
|
||||
.btn-flex-wrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
.data-check-wrap{
|
||||
.data-check-wrap {
|
||||
.radio-form-box,
|
||||
.check-form-box{
|
||||
.check-form-box {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user