feat: change the order of fields at inquiry regist, detail page
This commit is contained in:
parent
02ce7217a7
commit
f0b23c35af
@ -2,15 +2,14 @@ NEXT_PUBLIC_RUN_MODE=development
|
||||
# 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
|
||||
# 다시 로컬에서 개발할때는 localhost로 변경
|
||||
#route handler
|
||||
NEXT_PUBLIC_API_URL=http://172.30.1.23:3000
|
||||
NEXT_PUBLIC_API_URL=http://localhost:3000
|
||||
|
||||
#qsp 로그인 api
|
||||
NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
|
||||
# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
|
||||
|
||||
#1:1문의 api
|
||||
NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
|
||||
NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com
|
||||
NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
|
||||
|
||||
|
||||
#QPARTNER 로그인 api
|
||||
|
||||
@ -2,15 +2,14 @@ NEXT_PUBLIC_RUN_MODE=local
|
||||
# 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
|
||||
# 다시 로컬에서 개발할때는 localhost로 변경
|
||||
#route handler
|
||||
NEXT_PUBLIC_API_URL=http://172.30.1.23:3000
|
||||
NEXT_PUBLIC_API_URL=http://localhost:3000
|
||||
|
||||
#qsp 로그인 api
|
||||
NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
|
||||
# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
|
||||
|
||||
#1:1문의 api
|
||||
NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
|
||||
NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com
|
||||
NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
|
||||
|
||||
#QPARTNER 로그인 api
|
||||
DB_HOST=202.218.61.226
|
||||
|
||||
@ -10,7 +10,7 @@ export async function GET(request: Request) {
|
||||
return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 })
|
||||
}
|
||||
try {
|
||||
const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL}/api/file/downloadFile2`, {
|
||||
const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile2`, {
|
||||
responseType: 'arraybuffer',
|
||||
params: {
|
||||
encodeFileNo,
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import Answer from './Answer'
|
||||
import { useInquiry } from '@/hooks/useInquiry'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useSessionStore } from '@/store/session'
|
||||
|
||||
export default function Detail() {
|
||||
const params = useParams()
|
||||
@ -12,6 +13,8 @@ export default function Detail() {
|
||||
const { commonCodeList } = useInquiry()
|
||||
const router = useRouter()
|
||||
|
||||
const { session } = useSessionStore()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inquiry-frame">
|
||||
@ -30,24 +33,30 @@ export default function Detail() {
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>登録日</th>
|
||||
<td>{inquiryDetail?.regDt}</td>
|
||||
<td>{inquiryDetail?.regDt.split(' ')[0]}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>作者</th>
|
||||
<td>{inquiryDetail?.regUserNm}</td>
|
||||
<th>顧客名</th>
|
||||
<td>
|
||||
{session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>販売店</th>
|
||||
<td>{inquiryDetail?.storeNm}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>施工店</th>
|
||||
<td>{inquiryDetail?.compCd}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>E-mail</th>
|
||||
<td>{inquiryDetail?.regEmail}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>名前</th>
|
||||
<td>{inquiryDetail?.regUserNm}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>お問い合わせ</th>
|
||||
<td>{inquiryDetail?.regUserTelNo}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
'use client'
|
||||
export default function ListTable() {
|
||||
return (
|
||||
<>
|
||||
<div className="sale-frame">
|
||||
<div className="inquiry-table-filter">
|
||||
<div className="filter-check">
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<label htmlFor="ch01">私が書いたお問い合わせ</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="filter-select">
|
||||
<select className="select-form" name="" id="">
|
||||
<option value="">全体</option>
|
||||
<option value="">全体</option>
|
||||
<option value="">全体</option>
|
||||
<option value="">全体</option>
|
||||
<option value="">全体</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inquiry-list-wrap">
|
||||
<div className="inquiry-list-tit">
|
||||
合計 <span>98</span>個
|
||||
</div>
|
||||
<ul className="inquiry-list">
|
||||
<li className="inquiry-item">
|
||||
<div className="inquiry-item-bx">
|
||||
<div className="inquiry-item-category">
|
||||
<span>屋根</span>
|
||||
<span>適合性</span>
|
||||
<span>屋根材</span>
|
||||
</div>
|
||||
<div className="inquiry-item-tit">屋根材適合性確認依頼</div>
|
||||
<div className="inquiry-item-date">2025.04.02</div>
|
||||
<div className="inquiry-badge badge blue">回答待ち</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="inquiry-item">
|
||||
<div className="inquiry-item-bx">
|
||||
<div className="inquiry-item-category">
|
||||
<span>屋根</span>
|
||||
<span>適合性</span>
|
||||
<span>屋根材</span>
|
||||
</div>
|
||||
<div className="inquiry-item-tit">設置可能ですか？</div>
|
||||
<div className="inquiry-item-date">2025.04.02</div>
|
||||
<div className="inquiry-badge badge orange">回答完了</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="inquiry-item">
|
||||
<div className="inquiry-item-bx">
|
||||
<div className="inquiry-item-category">
|
||||
<span>屋根</span>
|
||||
<span>適合性</span>
|
||||
<span>屋根材</span>
|
||||
</div>
|
||||
<div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
|
||||
<div className="inquiry-item-date">2025.04.02</div>
|
||||
<div className="inquiry-badge badge blue">回答待ち</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="inquiry-item">
|
||||
<div className="inquiry-item-bx">
|
||||
<div className="inquiry-item-category">
|
||||
<span>屋根</span>
|
||||
<span>適合性</span>
|
||||
<span>屋根材</span>
|
||||
</div>
|
||||
<div className="inquiry-item-tit">設置可能ですか？</div>
|
||||
<div className="inquiry-item-date">2025.04.02</div>
|
||||
<div className="inquiry-badge badge orange">回答完了</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="inquiry-item">
|
||||
<div className="inquiry-item-bx nodata">
|
||||
<div className="inquiry-item-nodata">조회된 데이터가 없습니다</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="sale-edit-btn">
|
||||
<button className="btn-frame n-blue icon">
|
||||
もっと見る<i className="btn-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -36,7 +36,13 @@ export default function RegistForm() {
|
||||
|
||||
useEffect(() => {
|
||||
if (session?.isLoggedIn) {
|
||||
setInquiryRequest({ ...inquiryRequest, regId: session?.userId ?? '', regUserNm: session?.userNm ?? '', storeId: session?.storeId ?? '' })
|
||||
setInquiryRequest({
|
||||
...inquiryRequest,
|
||||
regId: session?.userId ?? '',
|
||||
regUserNm: session?.userNm ?? '',
|
||||
storeId: session?.storeId ?? '',
|
||||
qstMail: session?.email ?? '',
|
||||
})
|
||||
}
|
||||
}, [session])
|
||||
|
||||
@ -74,6 +80,17 @@ export default function RegistForm() {
|
||||
focusOnRequiredField('qstMail')
|
||||
return
|
||||
}
|
||||
if (inquiryRequest.title.length > 100) {
|
||||
alert('お問い合わせタイトルは100文字以内で入力してください。')
|
||||
focusOnRequiredField('title')
|
||||
return
|
||||
}
|
||||
if (inquiryRequest.contents.length > 2000) {
|
||||
alert('お問い合わせ内容は2,000文字以内で入力してください。')
|
||||
focusOnRequiredField('contents')
|
||||
return
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
attachedFiles.forEach((file) => {
|
||||
formData.append('files', file)
|
||||
@ -92,6 +109,21 @@ export default function RegistForm() {
|
||||
)
|
||||
}
|
||||
|
||||
const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value.replace(/[^\d]/g, '')
|
||||
|
||||
let formattedNumber = ''
|
||||
if (value.length <= 3) {
|
||||
formattedNumber = value
|
||||
} else if (value.length <= 7) {
|
||||
formattedNumber = `${value.slice(0, 3)}-${value.slice(3)}`
|
||||
} else {
|
||||
formattedNumber = `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7, 11)}`
|
||||
}
|
||||
|
||||
setInquiryRequest({ ...inquiryRequest, regUserTelNo: formattedNumber })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inquiry-frame">
|
||||
@ -120,46 +152,50 @@ export default function RegistForm() {
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="data-input mt5">
|
||||
<select
|
||||
className="select-form"
|
||||
name="qnaClsMidCd"
|
||||
id="qnaClsMidCd"
|
||||
value={inquiryRequest.qnaClsMidCd}
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
{commonCodeList
|
||||
.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
|
||||
.map((code) => (
|
||||
<option key={code.code} value={code.code}>
|
||||
{code.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="data-input mt5">
|
||||
<select
|
||||
className="select-form"
|
||||
name="qnaClsSmlCd"
|
||||
id="qnaClsSmlCd"
|
||||
value={inquiryRequest.qnaClsSmlCd ?? ''}
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
{commonCodeList
|
||||
.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
|
||||
.map((code) => (
|
||||
<option key={code.code} value={code.code}>
|
||||
{code.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && (
|
||||
<div className="data-input mt5">
|
||||
<select
|
||||
className="select-form"
|
||||
name="qnaClsMidCd"
|
||||
id="qnaClsMidCd"
|
||||
value={inquiryRequest.qnaClsMidCd}
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
{commonCodeList
|
||||
.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
|
||||
.map((code) => (
|
||||
<option key={code.code} value={code.code}>
|
||||
{code.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
{commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && (
|
||||
<div className="data-input mt5">
|
||||
<select
|
||||
className="select-form"
|
||||
name="qnaClsSmlCd"
|
||||
id="qnaClsSmlCd"
|
||||
value={inquiryRequest.qnaClsSmlCd ?? ''}
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
|
||||
>
|
||||
<option value="" hidden>
|
||||
選択してください
|
||||
</option>
|
||||
{commonCodeList
|
||||
.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
|
||||
.map((code) => (
|
||||
<option key={code.code} value={code.code}>
|
||||
{code.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
@ -181,10 +217,13 @@ export default function RegistForm() {
|
||||
<div className="data-input">
|
||||
<input
|
||||
className="input-frame"
|
||||
type="text"
|
||||
type="tel"
|
||||
inputMode="tel"
|
||||
placeholder="電話番号を書き留めてください"
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })}
|
||||
onChange={handlePhoneNumberChange}
|
||||
value={inquiryRequest.regUserTelNo ?? ''}
|
||||
id="regUserTelNo"
|
||||
maxLength={13}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -197,6 +236,7 @@ export default function RegistForm() {
|
||||
className="input-frame"
|
||||
type="text"
|
||||
placeholder="E-mailを書いてください"
|
||||
value={inquiryRequest.qstMail}
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })}
|
||||
id="qstMail"
|
||||
/>
|
||||
@ -212,21 +252,24 @@ export default function RegistForm() {
|
||||
type="text"
|
||||
placeholder="お問い合わせタイトルを記入してください"
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })}
|
||||
maxLength={100}
|
||||
id="title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">
|
||||
お問い合わせタイプ <i className="import">*</i>
|
||||
お問い合わせ内容 <i className="import">*</i>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<textarea
|
||||
className="textarea-form"
|
||||
rows={6}
|
||||
id="contents"
|
||||
placeholder="TextArea Filed"
|
||||
placeholder="お問い合わせ内容を入力してください"
|
||||
onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })}
|
||||
value={inquiryRequest.contents}
|
||||
maxLength={2000}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@ -253,7 +296,10 @@ export default function RegistForm() {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="sale-edit-btn">
|
||||
<div className="btn-flex-wrap">
|
||||
<button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/list')}>
|
||||
リスト<i className="btn-arr"></i>
|
||||
</button>
|
||||
<button className="btn-frame n-blue icon" onClick={handleSubmit} disabled={isSavingInquiry}>
|
||||
登録<i className="btn-arr"></i>
|
||||
</button>
|
||||
|
||||
@ -13,12 +13,12 @@ const badgeStyle = [
|
||||
{
|
||||
id: 'Y',
|
||||
label: '回答完了',
|
||||
color: 'blue',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
id: 'N',
|
||||
label: '回答待ち',
|
||||
color: 'orange',
|
||||
color: 'blue',
|
||||
},
|
||||
]
|
||||
export default function ListTable() {
|
||||
@ -58,7 +58,11 @@ export default function ListTable() {
|
||||
}, [session, inquiryList])
|
||||
|
||||
const handleMyInquiry = () => {
|
||||
setInquiryListRequest({ ...inquiryListRequest, schRegId: inquiryListRequest.schRegId ? null : session.userId })
|
||||
setOffset(1)
|
||||
setInquiryListRequest({
|
||||
...inquiryListRequest,
|
||||
schRegId: inquiryListRequest.schRegId ? null : session.userId,
|
||||
})
|
||||
}
|
||||
|
||||
const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
@ -98,39 +102,40 @@ export default function ListTable() {
|
||||
<div className="inquiry-list-tit">
|
||||
合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個
|
||||
</div>
|
||||
{heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
|
||||
<div className="inquiry-item-bx nodata">
|
||||
<div className="inquiry-item-nodata">照会されたデータがありません。</div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="inquiry-list">
|
||||
{heldInquiryList.length > 0 &&
|
||||
heldInquiryList.map((inquiry: InquiryList) => (
|
||||
<li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
|
||||
<div className="inquiry-item-bx">
|
||||
<div className="inquiry-item-category">
|
||||
<span>{inquiry.qnaClsLrgCd}</span>
|
||||
<span>{inquiry.qnaClsMidCd}</span>
|
||||
<span>{inquiry.qnaClsSmlCd}</span>
|
||||
</div>
|
||||
<div className="inquiry-item-tit">{inquiry.qstTitle}</div>
|
||||
<div className="inquiry-item-date">{inquiry.regDt}</div>
|
||||
<div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
|
||||
{badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
|
||||
</div>
|
||||
<ul className="inquiry-list">
|
||||
{heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
|
||||
<li className="inquiry-item">
|
||||
<div className="inquiry-item-bx nodata">
|
||||
<div className="inquiry-item-nodata">照会されたデータがありません。</div>
|
||||
</div>
|
||||
</li>
|
||||
) : (
|
||||
heldInquiryList.map((inquiry: InquiryList) => (
|
||||
<li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
|
||||
<div className="inquiry-item-bx">
|
||||
<div className="inquiry-item-category">
|
||||
<span>{inquiry.qnaClsLrgCd}</span>
|
||||
<span>{inquiry.qnaClsMidCd}</span>
|
||||
<span>{inquiry.qnaClsSmlCd}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<div className="sale-edit-btn">
|
||||
<LoadMoreButton
|
||||
hasMore={hasMore}
|
||||
onLoadMore={() => {
|
||||
setOffset(offset + 10)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="inquiry-item-tit">{inquiry.qstTitle}</div>
|
||||
<div className="inquiry-item-date">{inquiry.regDt}</div>
|
||||
<div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
|
||||
{badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="sale-edit-btn">
|
||||
<LoadMoreButton
|
||||
hasMore={hasMore}
|
||||
onLoadMore={() => {
|
||||
setOffset(offset + 10)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import getConfigs from '@/config/config.common'
|
||||
|
||||
// 환경마다 달라져야 할 변수, 값들을 정의합니다. (여기는 local 환경에 맞는 값을 지정합니다.)
|
||||
const baseUrl = 'http://172.30.1.23:3000'
|
||||
const baseUrl = 'http://localhost:3000'
|
||||
const mode = 'local'
|
||||
|
||||
// 환경마다 달라져야 할 값들을 getConfig 함수에 전달합니다.
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
@use "../abstracts" as *;
|
||||
@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,68 +55,68 @@
|
||||
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{
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -124,31 +124,31 @@
|
||||
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{
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -156,65 +156,67 @@
|
||||
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-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;
|
||||
}
|
||||
}
|
||||
@ -222,110 +224,109 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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,65 +335,64 @@
|
||||
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{
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -400,26 +400,31 @@
|
||||
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;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.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 +435,45 @@
|
||||
}
|
||||
|
||||
// 1:1문의 작성
|
||||
.inquiry-file-wrap{
|
||||
.textarea-form {
|
||||
white-space: pre-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,33 +481,33 @@
|
||||
}
|
||||
|
||||
// 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{
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -507,151 +515,154 @@
|
||||
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;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.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;
|
||||
@ -659,13 +670,13 @@
|
||||
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