<template> <div class="wrap"> <div> <div class="search-wrap clear-fix"> <div class="float-left"> <h3 class="sub-title">행정동 목록</h3> </div> <div class="float-right"> <form action=""> <select name="" id=""> <option value="">검색조건</option> </select> <input type="text" /> <button type="button" class="btn-2 green-btn">검색</button> </form> </div> </div> <div> <table> <colgroup> <col style="width: 5%" /> <col style="width: 10%" /> <col style="width: 10%" /> <col style="width: 20%" /> <col style="width: 10%" /> <col style="width: 10%" /> <col style="width: 15%" /> <col style="width: 20%" /> </colgroup> <thead> <tr> <th rowspan="2">순번</th> <th rowspan="2">ID</th> <th rowspan="2">한글명</th> <th rowspan="2">영문명</th> <th colspan="2">좌표</th> <th rowspan="2">레이어</th> <th rowspan="2">등록일</th> </tr> <tr> <th>위도</th> <th>경도</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2203060</td> <td>평리1동</td> <td>Pyeongni 1–dong</td> <td>00.000000</td> <td>00.000000</td> <td></td> <td>2023-03-03 12:50</td> </tr> </tbody> </table> </div> <div class="bottom-wrap"> <div class="pg-wrap"> <a href="#" class="pg-item prev">◀</a> <a href="#" class="pg-item active">1</a> <a href="#" class="pg-item">2</a> <a href="#" class="pg-item">3</a> <a href="#" class="pg-item">4</a> <a href="#" class="pg-item">5</a> <a href="#" class="pg-item next">▶</a> </div> </div> </div> <div> <div class="sub-title-wrap"> <h3 class="sub-title">행정동 정보관</h3> <span class="btn-2 green-btn">신규등록</span> </div> <div> <table> <colgroup> <col style="width: 10%" /> <col style="width: 10%" /> <col style="width: 30%" /> <col style="width: 20%" /> <col style="width: 30%" /> </colgroup> <tbody> <tr> <th colspan="2">ID</th> <td><input type="text" class="full" /></td> <th>레이어</th> <td><input type="text" class="full" /></td> </tr> <tr> <th colspan="2">한글명</th> <td><input type="text" class="full" /></td> <th>등록일</th> <td></td> </tr> <tr> <th colspan="2">영문명</th> <td><input type="text" class="full" /></td> <th>수정일</th> <td></td> </tr> <tr> <th rowspan="2">좌표</th> <th class="second">위도</th> <td><input type="text" class="full" /></td> <th>등록자</th> <td></td> </tr> <tr> <th class="second">경도</th> <td><input type="text" class="full" /></td> <th>수정자</th> <td></td> </tr> </tbody> </table> </div> <div class="btn-wrap"> <button type="button" class="btn-2 gray-btn" @click="modal_2 = true"> 삭제 </button> <button type="button" class="btn-2 green-btn" @click="modal_1 = true"> 저장 </button> </div> </div> <div> <div class="sub-title-wrap"> <h3 class="sub-title">파일 업로드</h3> </div> <div> <table> <colgroup> <col style="width: 30%" /> <col style="width: 70%" /> </colgroup> <tbody> <tr> <th>ID</th> <td class="txt-left"> <input type="file" name="" id="fileBtn" /> <label for="fileBtn" class="btn-2 green-btn"> 파일선택 </label> <button type="button" class="gray-btn">등록</button> </td> </tr> <tr> <th>양식다운로드</th> <td></td> </tr> </tbody> </table> </div> </div> </div> <div class="modal-wrap" v-if="modal_1 == true"> <div class="modal-bg"></div> <div class="modal"> <p>행정동을 <span class="txt-point">등록</span>하시겠습니까?</p> <div class="btn-wrap"> <button type="button" class="green-btn">확인</button> <button type="button" class="gray-btn" @click="modal_1 = false"> 취소 </button> </div> </div> </div> <div class="modal-wrap" v-if="modal_2 == true"> <div class="modal-bg"></div> <div class="modal"> <p> 해당 기능은 데이터 삭제 기능입니다.<br /> 데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br /> 삭제를 원하시면 아래 삭제 버튼을 눌러주세요. </p> <div class="btn-wrap"> <button type="button" class="green-btn">삭제</button> <button type="button" class="gray-btn" @click="modal_2 = false"> 취소 </button> </div> </div> </div> </template> <script> export default { data() { return { modal_1: false, modal_2: false, }; }, methods: {}, watch: {}, computed: {}, mounted() { console.log("Main4 mounted"); }, }; </script> <style scoped> .wrap { width: 155rem; margin: 100px auto; } .search-wrap, .sub-title-wrap { margin-bottom: 30px; } .search-wrap { margin-bottom: 30px; } .search-wrap input, .search-wrap select { height: 22.5px; border-radius: 3px; border: 1px solid #949292; } .float-left { float: left; } .float-left .sub-title, .sub-title-wrap .sub-title { font-size: 20px; } .float-right { float: right; } .sub-title-wrap > * { display: inline-block; vertical-align: middle; } .sub-title-wrap > *:not(:last-child) { margin-right: 2rem; } .full { width: 100%; } .txt-left { text-align: left; } .txt-left .green-btn { margin-right: 2rem; /* border: 1px solid red; */ } .btn-2 { display: inline-block; padding: 0.3rem 2rem; font-size: 13.333px; } label.btn-2 { cursor: pointer; } .clear-fix::after { content: ""; display: block; clear: both; } .search-wrap .float-right form > *:not(:last-child) { margin-right: 1rem; } table { width: 100%; text-align: center; border-collapse: collapse; } th, td { border-left: none; border-right: none; } table th { padding: 15px; color: #fff; background-color: #13833b; border-bottom: 1px solid #e5e5dd; } table td { padding: 10px; border-bottom: 1px solid #e5e5dd; } table tbody th.second { background-color: #31a257; } table tr:nth-child(odd) { background-color: #f7f6f6; } table tr:nth-child(even) { background-color: #fdfdf2; } .bottom-wrap { position: relative; padding: 1rem 0; } .pg-wrap { text-align: center; } .pg-item { display: inline-block; padding: 10px; color: #949292; } .pg-item.prev, .pg-item.next, .pg-item.active { color: #13833b; } #fileBtn::file-selector-button { display: none; } .btn-wrap { text-align: right; margin-top: 15px; } .btn-wrap > *:not(:last-child) { margin-right: 15px; } .modal-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .modal-bg { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 350px; padding: 5rem; z-index: 2; background-color: #fff; border-radius: 1rem; text-align: center; } .modal .btn-wrap { margin-top: 15px; text-align: center; } .txt-point { color: #13833b; } </style>