File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<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;
}
.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, .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>