tolag3/fairnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024/12/09 만족도 조사 푸터영역 고정

Browse Source
This commit is contained in:
subsub 2024-12-09 17:02:12 +09:00
parent 797e4d22b1
commit cc4b34b42b
4 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/webapp/kofair_case_seed/usr/guide.html
View File

@ -18,6 +18,8 @@
<ul class="guide_ul">
<li><a href="/kofair_case_seed/usr/style_guide.html" target="_blank">스타일가이드</a></li>
<li><a href="/kofair_case_seed/usr/layout/_header.html">header</a></li>
<li><a href="/kofair_case_seed/usr/layout/_footer.html">footer</a></li>

16
src/main/webapp/kofair_case_seed/usr/layout/_footer.html
View File

@ -1,3 +1,19 @@
<div class="satisfaction_area">
<div class="inner">
<div class="title"><i class="icon satisfation"></i><p>온라인분쟁조정시스템 서비스에 대하여 어느 정도 만족하셨습니까?</p></div>
<div class="satisfation_radio">
<ul class="radio_wrap">
<li><input type="radio" class="radio" id="satisfation_01" name="satisfation"><label for="satisfation_01">매우만족</label></li>
<li><input type="radio" class="radio" id="satisfation_02" name="satisfation"><label for="satisfation_02">만족</label></li>
<li><input type="radio" class="radio" id="satisfation_03" name="satisfation"><label for="satisfation_03">보통</label></li>
<li><input type="radio" class="radio" id="satisfation_04" name="satisfation"><label for="satisfation_04">불만족</label></li>
<li><input type="radio" class="radio" id="satisfation_05" name="satisfation"><label for="satisfation_05">매우불만족</label></li>
</ul>
<button class="btn btn_text btn_35 darkgray_border gray_fill btn_satisfation">등록</button>
</div>
</div>
</div>
<footer class="footer">
<div class="inner">
<h1 class="logo">

14
src/main/webapp/kofair_case_seed/usr/request/apl_06.html
View File

@ -144,20 +144,6 @@
</div>
</div>
<div class="satisfaction_area">
<div class="title"><i class="icon satisfation"></i><p>온라인분쟁조정시스템 서비스에 대하여 어느 정도 만족하셨습니까?</p></div>
<div class="satisfation_radio">
<ul class="radio_wrap">
<li><input type="radio" class="radio" id="satisfation_01" name="satisfation"><label for="satisfation_01">매우만족</label></li>
<li><input type="radio" class="radio" id="satisfation_02" name="satisfation"><label for="satisfation_02">만족</label></li>
<li><input type="radio" class="radio" id="satisfation_03" name="satisfation"><label for="satisfation_03">보통</label></li>
<li><input type="radio" class="radio" id="satisfation_04" name="satisfation"><label for="satisfation_04">불만족</label></li>
<li><input type="radio" class="radio" id="satisfation_05" name="satisfation"><label for="satisfation_05">매우불만족</label></li>
</ul>
<button class="btn btn_text btn_35 darkgray_border gray_fill btn_satisfation">등록</button>
</div>
</div>
</div>

32
src/main/webapp/kofair_case_seed/usr/style/style.css
View File

@ -182,8 +182,9 @@
.file_upload_wrap{display:flex;align-items:flex-start;}
.file_upload_wrap .file_list{display:flex;width:calc(100% - 100px);margin:0 0 0 10px;flex-direction:column;gap:8px;}
.file_upload_wrap li{display:flex;}
.file_upload_wrap li,.file_list.fill li{display:flex;}
.file_upload_wrap li a{display:flex;max-width:calc(100% - 30px);font-size:1.5rem;color:#333;padding:0 15px 0 0;background:#f4f5f7;border-radius:5px;align-items:center;}
.file_list.fill li a{display:flex;font-size:1.5rem;color:#333;padding:0 15px 0 0;background:#f4f5f7;border-radius:5px;align-items:center;}
.file_list>div>div{display:flex;min-height:40px;font-size:1.5rem;color:#333;padding:10px 15px 10px 30px;;background:#f4f5f7 url(/kofair_case_seed/usr/images/component/icon_file_clip.png) no-repeat left center;border-radius:5px;align-items:center;}
.file_list div img{display:none;}
.file_upload_wrap li a .file_name{max-width:calc(100% - 130px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
@ -293,14 +294,31 @@
.total_search .search_list li .date{position:absolute;font-size:1.6rem;color:#888;right:0;top:50%;transform:translateY(-50%);}
/* 만족도 조사 */
.satisfaction_area{position:relative;width:100%;margin:100px 0 0 0;border:1px solid #d8d8d8;border-radius:5px;}
.satisfaction_area::after{position:absolute;content:"";width:100%;height:1px;background:#e4e4e4;top:-50px;}
.satisfaction_area{position:relative;width:100%;max-width:1440px;margin:0 auto;}
.satisfaction_area .inner{position:relative;width:calc(100% - 366px);margin:100px 0 0 auto;border:1px solid #d8d8d8;border-radius:5px;}
.satisfaction_area .inner::after{position:absolute;content:"";width:100%;height:1px;background:#e4e4e4;top:-50px;}
.satisfaction_area .title{display:flex;height:52px;padding:0 0 0 24px;font-size:1.5rem;background:#f8f9fa;border-bottom:1px solid #d8d8d8;border-radius:5px 5px 0 0;align-items:center;gap:6px;}
.satisfaction_area .icon.satisfation{width:17px;height:17px;margin:2px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_satisfaction.png) no-repeat center center;}
.satisfaction_area .satisfation_radio{display:flex;height:72px;padding:0 32px 0 48px;justify-content:space-between;align-items:center;}
.satisfaction_area .radio_wrap{display:flex;gap:27px;}
.satisfaction_area .radio_wrap .radio+label{font-size:1.5rem;}
/* 댓글 */
.cmmt_wrap{margin-top: 30px;}
.cmmt_tit{display: flex; align-items: center;}
.cmmt_tit img{margin-right: 6px;}
.cmmt_tit span{color: #163db1; font-weight: bold; font-size: 20px;}
.cmmt_list{width: 100%; border-top: 1px solid #d5d5d5; margin-top: 10px;}
.cmmt_list li{display: flex; border-bottom: 1px solid #d5d5d5; padding: 24px 0;}
.cmmt_person{min-width: 70px; position: relative; font-size: 18px; font-weight: 500; margin-right: 10px; padding-left: 20px;}
.cmmt_person::before{position: absolute; content: " "; width: 1px; height: 15px; background-color: #d5d5d5; right: 0; top: 4px;}
.cmmt_detail{font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.5px; color: #222; padding-left: 20px;}
.cmmt_date{display: inline-block; margin-top: 20px; font-weight: 400; font-size: 16px; color: #999;}
.cmmt_detail .btn_wrap{float: right; margin-top: 15px;}
.cmmt_detail .btn_wrap button{font-size: 16px; min-width: 60px; height: 36px; vertical-align: middle;}
.cmmt_input{width: 100%; margin-top: 30px;}
.cmmt_input textarea{height: 80px; width: calc(100% - 90px); vertical-align: middle; border: 2px solid #e5e5e5; border-radius: 5px; padding: 15px; box-sizing: border-box;}
.cmmt_input .cmmt_add{width: 80px; height: 80px; border-radius: 5px; background-color: #163db1; border: 0; color: #fff; vertical-align: middle; margin-left: 5px; font-size: 18px; transition: background-color 0.2s linear;}
/* ==================== 테블릿 ==================== */
@media screen and (max-width: 1199px){
@ -494,8 +512,8 @@
.total_search .btn_wrap.right button{width:25%;}
/* 만족도 조사 */
.satisfaction_area{margin:160px 0 0 0;border:2px solid #d8d8d8;border-radius:10px;}
.satisfaction_area::after{height:2px;top:-80px;}
.satisfaction_area .inner{width:calc(100% - 60px);margin:160px auto 0 auto;padding:0;border:2px solid #d8d8d8;border-radius:10px;}
.satisfaction_area .inner::after{height:2px;top:-80px;}
.satisfaction_area .title{height:auto;padding:38px 40px;font-size:3rem;border-bottom:2px solid #d8d8d8;align-items:flex-start;border-radius:10px 10px 0 0;gap:12px;}
.satisfaction_area .icon.satisfation{width:29px;height:29px;margin:7px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_satisfaction_m.png) no-repeat center center;}
.satisfaction_area .title p{width:calc(100% - 29px);}
@ -661,8 +679,8 @@
.total_search .btn_wrap.right button{width:25%;}
/* 만족도 조사 */
.satisfaction_area{margin:80px 0 0 0;border:1px solid #d8d8d8;border-radius:5px;}
.satisfaction_area::after{height:1px;top:-40px;}
.satisfaction_area .inner{margin:80px auto 0 auto;border:1px solid #d8d8d8;border-radius:5px;}
.satisfaction_area .inner::after{height:1px;top:-40px;}
.satisfaction_area .title{padding:19px 20px;font-size:1.5rem;border-bottom:1px solid #d8d8d8;border-radius:5px 5px 0 0;gap:6px;}
.satisfaction_area .icon.satisfation{width:17px;height:17px;margin:3px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_satisfaction.png) no-repeat center center;}
.satisfaction_area .title p{width:calc(100% - 17px);}