pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

지은

master
이준희 11 months ago
parent
259a65b420
commit
3629520881
2 changed files with 225 additions and 360 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      src/assets/css/custom.css
  2. 563
      src/views/control/setting/steps/ReserveStep1.js

20
src/assets/css/custom.css
Unescape View File

@ -904,7 +904,23 @@ background-size: 75% auto;
.fsm-ti .btn-wrap button + button{margin-left:0.5rem} .fsm-ti .btn-wrap button + button{margin-left:0.5rem}
.fsm-box .list-input label{font-size:0.875rem} .fsm-box .list-input label{font-size:0.875rem}
.reservation-date .box{background:#242b3d;border:1px solid #404656;padding:0.5rem} .reservation-date .box{display:flex!important;flex-direction: column;align-items:center;justify-content:center;background:#404656;border:2px solid #404656;border-radius: 0.1rem;padding:0.5rem;cursor:pointer;min-height:80px}
.reservation-date .box.active{border-color: #7367f0;}
.reservation-date .box.active span{color:#fff;}
.reservation-date .box .date{display:block;font-size:0.875rem} .reservation-date .box .date{display:block;font-size:0.875rem}
.reservation-date .box .state{font-size:1.5rem;} .reservation-date .box .state{font-size:1.25rem;font-weight:400;}
.reservation-date .box .rate{font-size:0.875rem;margin-left:4px}
.reservation-date .slick-slide{margin-left:1rem;max-width: 144px;} .reservation-date .slick-slide{margin-left:1rem;max-width: 144px;}
.reservation-table table{width:100%;margin:1rem auto}
.reservation-table table tr th, .reservation-table table tr td{vertical-align:middle;}
.reservation-table table thead{background:#343d55;font-size:1rem;}
.reservation-table table thead tr th{padding:0.8rem 0.4rem;font-weight:500;}
.reservation-table table tbody tr td{padding:0.8rem 0;}
.reservation-table table tbody tr td:nth-child(4) .amount{border-left:0;border-right:0}
.reservation-table table tbody tr td .amount{border:1px solid #404656;width:100%;height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0px auto;line-height:1.2;}
.reservation-table table tbody tr td .rate{font-size:0.875rem;font-weight:400;margin-left:4px}
.reservation-table .state{font-size:1.25rem;font-weight:400}
.reservation-table .flight span{display:block;}
.reservation-table .seat{display:block;font-size:0.875rem;margin-top:6px;font-weight:400;}
.reservation-table .alltime .start, .reservation-table .alltime .arrive{font-size:1.25rem;font-weight:400;}

563
src/views/control/setting/steps/ReserveStep1.js
Unescape View File

@ -1,6 +1,6 @@
import React, { useState, Component } from 'react' import React, { useState, Component } from 'react';
import Slider from "react-slick"; import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css'; import 'slick-carousel/slick/slick-theme.css';
@ -16,33 +16,28 @@ export default function ReserveStep1() {
slidesToScroll: 1 slidesToScroll: 1
}; };
return ( return (
<div className='step-reservation'> <div className='step-reservation'>
<div className='step-box'> <div className='step-box'>
<div className='uam-reservation-tab-list'> <div className='uam-reservation-tab-list'>
<div className='list'> <div className='list'>고양 킨텍스</div>
고양 킨텍스 <div className='list'>여의도 공원</div>
</div> <div className='list'>2023. 10. 22(목) ~ 2023. 11. 01(목)</div>
<div className='list'> <div className='list'>성인 1명, 소아 1명, 유아 1명</div>
여의도 공원
</div>
<div className='list'>
2023. 10. 22(목) ~ 2023. 11. 01(목)
</div>
<div className='list'>
성인 1명, 소아 1명, 유아 1명
</div>
<Button>수정</Button> <Button>수정</Button>
</div> </div>
</div> </div>
<div className='step-box'> <div className='step-box'>
<div className='step-reservation-header'> <div className='step-reservation-header'>
<Badge color='primary' className='badge-glow'>여정 1</Badge> <Badge color='primary' className='badge-glow'>
여정 1
</Badge>
<div className='place'> <div className='place'>
<span>고양 킨텍스</span> <span>고양 킨텍스</span>
<span className='arrow'><ArrowRight /></span> <span className='arrow'>
<ArrowRight />
</span>
<span>여의도 공원</span> <span>여의도 공원</span>
</div> </div>
@ -60,13 +55,17 @@ export default function ReserveStep1() {
<span className='date'>2025.10.25(수)</span> <span className='date'>2025.10.25(수)</span>
<span className='state'>매진</span> <span className='state'>매진</span>
</div> </div>
<div className='box'> <div className='box active'>
<span className='date'>2025.10.26(목)</span> <span className='date'>2025.10.26(목)</span>
<span className='state'>56,000<span className='rate'>KRW</span></span> <span className='state'>
56,000<span className='rate'>KRW</span>
</span>
</div> </div>
<div className='box'> <div className='box'>
<span className='date'>2025.10.27(금)</span> <span className='date'>2025.10.27(금)</span>
<span className='state'>58,000<span className='rate'>KRW</span></span> <span className='state'>
58,000<span className='rate'>KRW</span>
</span>
</div> </div>
<div className='box'> <div className='box'>
<span className='date'>2025.10.28(토)</span> <span className='date'>2025.10.28(토)</span>
@ -74,17 +73,28 @@ export default function ReserveStep1() {
</div> </div>
<div className='box'> <div className='box'>
<span className='date'>2025.10.29(일)</span> <span className='date'>2025.10.29(일)</span>
<span className='state'>48,000<span className='rate'>KRW</span></span> <span className='state'>
48,000<span className='rate'>KRW</span>
</span>
</div> </div>
<div className='box'> <div className='box'>
<span className='date'>2025.10.30(월)</span> <span className='date'>2025.10.30(월)</span>
<span className='state'>38,000<span className='rate'>KRW</span></span> <span className='state'>
38,000<span className='rate'>KRW</span>
</span>
</div> </div>
</Slider> </Slider>
</div> </div>
<div> <div className='reservation-table'>
<table> <table>
<colgroup>
<col width='20%' />
<col width='20%' />
<col width='15%' />
<col width='15%' />
<col width='15%' />
</colgroup>
<thead> <thead>
<tr> <tr>
<th>출발/도착시간(비행시간)</th> <th>출발/도착시간(비행시간)</th>
@ -97,423 +107,262 @@ export default function ReserveStep1() {
<tbody> <tbody>
<tr> <tr>
<td> <td>
<span>1시간 5분</span>
<div> <div>
<span>08:40</span>- <span className='alltime'>
<span>09:45</span> <span className='time'>1시간 5분</span>
<span>+1 day</span> <span className='start'>08:40</span>
<span className='arrive'>09:45</span>
</span>
<span className='plus'>+1 day</span>
</div> </div>
</td> </td>
<td> <td>
<div> <div className='flight'>
<span>3P1003</span> <span>3P1003</span>
<span>B737-800</span> <span>B737-800</span>
</div> </div>
</td> </td>
<td><span>매진</span></td>
<td> <td>
<div> <div className='amount'>
<span>76.000 KRW</span> <span className='state'>매진</span>
<span>잔여7석</span>
</div> </div>
</td> </td>
<td> <td>
<div> <div className='amount'>
<span>76.000 KRW</span> <span className='state'>
<span>잔여7석</span> 76.000<span className='rate'>KRW</span>
</span>
<span className='seat'>잔여 7석</span>
</div>
</td>
<td>
<div className='amount'>
<span className='state'>
76.000<span className='rate'>KRW</span>
</span>
<span className='seat'>잔여 7석</span>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div
style={{
display: 'flex',
// justifyContent: 'space-between',
flexDirection: 'column',
borderBottom: '1px dotted #000',
marginBottom: '30px'
}}
>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
backgroundColor: '#F2F2F2', justifyContent: 'center',
marginBottom: '5px', flexDirection: 'column',
padding: '10px' alignItems: 'center'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
출발/도착시간 (비행시간)
</div>
<div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div>
<div style={{ flex: 1, textAlign: 'center' }}>특가운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>할인운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>정규운임</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
borderBottom: '1px dotted #000',
marginBottom: '5px',
padding: '10px'
}} }}
> >
<div style={{ flex: 1, textAlign: 'center' }}> <span style={{ color: '#990033' }}>여정 2</span>
<span>1시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
08:40----------------------09:45
</div>
</div>
<div style={{ flex: 1, textAlign: 'center' }}>
<div>3P1003</div>
<div>B737-800</div>
</div>
<div <div
style={{ style={{
flex: 1,
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
height: '50px', width: '25%'
border: '1px solid #F2F2F2',
padding: '5px'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px',
padding: '5px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span>잔여7석</span>
</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px',
padding: '5px'
}} }}
> >
<div>
<div>
<span style={{ fontWeight: 'bold' }}>76,000 </span>
<span>KRW</span>
</div>
<span>잔여7석</span>
</div>
</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>1시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
10:40----------------------11:45
</div>
<div <div
style={{ style={{
display: 'flex', fontWeight: 'bold',
justifyContent: 'end', fontSize: '1.4rem',
marginRight: '40px' color: '#000'
}} }}
> >
<span>+1 day</span> 여의도 공원
</div> </div>
</div> <div
<div style={{ flex: 1, textAlign: 'center' }}> style={{
<div>3P1003</div> fontWeight: 'bold',
<div>B737-800</div> fontSize: '1.7rem',
</div> color: '#000'
<div }}
style={{ >
flex: 1, ➔
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2',
padding: '5px'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px',
padding: '3px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span>잔여3석</span>
</div> </div>
</div> <div
<div style={{
style={{ fontWeight: 'bold',
flex: 1, fontSize: '1.4rem',
textAlign: 'center', color: '#000'
border: '1px solid #F2F2F2', }}
height: '50px', >
padding: '3px' 고양 킨텍스
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>76,000 </span>
<span>KRW</span>
</div>
<span>잔여3석</span>
</div> </div>
</div> </div>
</div> </div>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center'
}}
>
<span style={{ color: '#990033' }}>여정 2</span>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'space-around', // justifyContent: 'space-between',
alignItems: 'center', flexDirection: 'column',
width: '25%' borderBottom: '1px dotted #000'
}} }}
> >
<div <div
style={{ style={{
fontWeight: 'bold', display: 'flex',
fontSize: '1.4rem', backgroundColor: '#F2F2F2',
color: '#000' marginBottom: '5px',
}} padding: '10px'
>
여의도 공원
</div>
<div
style={{
fontWeight: 'bold',
fontSize: '1.7rem',
color: '#000'
}}
>
➔
</div>
<div
style={{
fontWeight: 'bold',
fontSize: '1.4rem',
color: '#000'
}} }}
> >
고양 킨텍스 <div style={{ flex: 1, textAlign: 'center' }}>
</div> 출발/도착시간 (비행시간)
</div>
</div>
<div
style={{
display: 'flex',
// justifyContent: 'space-between',
flexDirection: 'column',
borderBottom: '1px dotted #000'
}}
>
<div
style={{
display: 'flex',
backgroundColor: '#F2F2F2',
marginBottom: '5px',
padding: '10px'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
출발/도착시간 (비행시간)
</div>
<div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div>
<div style={{ flex: 1, textAlign: 'center' }}>특가운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>할인운임</div>
<div style={{ flex: 1, textAlign: 'center' }}>정규운임</div>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
borderBottom: '1px dotted #000',
marginBottom: '5px',
padding: '10px'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>1시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
08:40----------------------09:45
</div> </div>
</div> <div style={{ flex: 1, textAlign: 'center' }}>편명/기종</div>
<div style={{ flex: 1, textAlign: 'center' }}> <div style={{ flex: 1, textAlign: 'center' }}>특가운임</div>
<div>3P1003</div> <div style={{ flex: 1, textAlign: 'center' }}>할인운임</div>
<div>B737-800</div> <div style={{ flex: 1, textAlign: 'center' }}>정규운임</div>
</div> </div>
<div <div
style={{ style={{
flex: 1,
display: 'flex', display: 'flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '50px', borderBottom: '1px dotted #000',
border: '1px solid #F2F2F2', marginBottom: '5px',
padding: '5px' padding: '10px'
// width: '500px',
}} }}
> >
<div>매진</div> <div style={{ flex: 1, textAlign: 'center' }}>
</div> <span>1시간 5분</span>
<div <div style={{ fontWeight: 'bold' }}>
style={{ 08:40----------------------09:45
flex: 1, </div>
textAlign: 'center', </div>
border: '1px solid #F2F2F2', <div style={{ flex: 1, textAlign: 'center' }}>
height: '50px', <div>3P1003</div>
padding: '5px' <div>B737-800</div>
}} </div>
> <div
<div> style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2',
padding: '5px'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px',
padding: '5px'
}}
>
<div>
<div>
<span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span>잔여7석</span>
</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px',
padding: '5px'
}}
>
<div> <div>
<span style={{ fontWeight: 'bold' }}>63,000 </span> <div>
<span>KRW</span> <span style={{ fontWeight: 'bold' }}>76,000 </span>
<span>KRW</span>
</div>
<span>잔여9석</span>
</div> </div>
<span>잔여7석</span>
</div> </div>
</div> </div>
<div <div
style={{ style={{
flex: 1, display: 'flex',
textAlign: 'center', alignItems: 'center'
border: '1px solid #F2F2F2',
height: '50px',
padding: '5px'
}} }}
> >
<div> <div style={{ flex: 1, textAlign: 'center' }}>
<div> <span>1시간 5분</span>
<span style={{ fontWeight: 'bold' }}>76,000 </span> <div style={{ fontWeight: 'bold' }}>
<span>KRW</span> 10:40----------------------11:45
</div>
<div
style={{
display: 'flex',
justifyContent: 'end',
marginRight: '40px'
}}
>
<span>+1 day</span>
</div> </div>
<span>잔여9석</span>
</div> </div>
</div> <div style={{ flex: 1, textAlign: 'center' }}>
</div> <div>3P1003</div>
<div <div>B737-800</div>
style={{
display: 'flex',
alignItems: 'center'
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<span>1시간 5분</span>
<div style={{ fontWeight: 'bold' }}>
10:40----------------------11:45
</div> </div>
<div <div
style={{ style={{
flex: 1,
display: 'flex', display: 'flex',
justifyContent: 'end', justifyContent: 'center',
marginRight: '40px' alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2',
padding: '3px'
// width: '500px',
}} }}
> >
<span>+1 day</span> <div>매진</div>
</div> </div>
</div> <div
<div style={{ flex: 1, textAlign: 'center' }}> style={{
<div>3P1003</div> flex: 1,
<div>B737-800</div> textAlign: 'center',
</div> border: '1px solid #F2F2F2',
<div height: '50px',
style={{ padding: '3px'
flex: 1, }}
display: 'flex', >
justifyContent: 'center',
alignItems: 'center',
height: '50px',
border: '1px solid #F2F2F2',
padding: '3px'
// width: '500px',
}}
>
<div>매진</div>
</div>
<div
style={{
flex: 1,
textAlign: 'center',
border: '1px solid #F2F2F2',
height: '50px',
padding: '3px'
}}
>
<div>
<div> <div>
<span style={{ fontWeight: 'bold' }}>63,000 </span> <div>
<span>KRW</span> <span style={{ fontWeight: 'bold' }}>63,000 </span>
<span>KRW</span>
</div>
<span>잔여3석</span>
</div> </div>
<span>잔여3석</span>
</div> </div>
</div> <div
<div style={{
style={{ flex: 1,
flex: 1, textAlign: 'center',
textAlign: 'center', border: '1px solid #F2F2F2',
border: '1px solid #F2F2F2', height: '50px',
height: '50px', padding: '3px'
padding: '3px' }}
}} >
>
<div>
<div> <div>
<span style={{ fontWeight: 'bold' }}>76,000 </span> <div>
<span>KRW</span> <span style={{ fontWeight: 'bold' }}>76,000 </span>
<span>KRW</span>
</div>
<span>잔여9석</span>
</div> </div>
<span>잔여9석</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
); );
} }

Write Preview
Loading…
Cancel
Save