localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

게시판 리스트 css 수정

Browse Source
This commit is contained in:
dyhj625 2025-03-13 10:59:35 +09:00
parent 2661929cb0
commit 2c1566f49e
1 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/board/BoardList.vue
View File

@ -1,17 +1,14 @@
<template> <template>
<div class="container flex-grow-1 container-p-y"> <div class="container flex-grow-1 container-p-y">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header d-flex flex-column">
<!-- 검색창 --> <!-- 검색창 -->
<div class="container col-6 mt-12 mb-8"> <div class="input-group mb-3 w-100">
<search-bar @update:data="search" @keyup.enter="searchOnEnter"/> <search-bar @update:data="search" @keyup.enter="searchOnEnter" class="flex-grow-1" />
</div> </div>
</div> <div class="d-flex align-items-center" style="gap: 15px;">
<div class="card-datatable">
<div class="row mx-6 my-6 justify-content-between g-3 align-items-center">
<div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center gap-2 mt-0">
<!-- 리스트 갯수 선택 --> <!-- 리스트 갯수 선택 -->
<select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange"> <select class="form-select w-auto" v-model="selectedSize" @change="handleSizeChange" style="margin-left: 0;">
<option value="10">10개씩</option> <option value="10">10개씩</option>
<option value="20">20개씩</option> <option value="20">20개씩</option>
<option value="30">30개씩</option> <option value="30">30개씩</option>
@ -19,25 +16,24 @@
</select> </select>
<!-- 셀렉트 박스 --> <!-- 셀렉트 박스 -->
<select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange"> <select class="form-select w-auto" v-model="selectedOrder" @change="handleSortChange">
<option value="date">최신날짜</option> <option value="date">최신날짜</option>
<option value="views">조회수</option> <option value="views">조회수</option>
</select> </select>
<!-- 공지 접기 기능 --> <!-- 공지 접기 기능 -->
<div class="form-check mb-0 ms-2"> <div class="form-check mb-0">
<input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" /> <input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
<label class="form-check-label" for="hideNotices">공지 숨기기</label> <label class="form-check-label" for="hideNotices">공지 숨기기</label>
</div> </div>
</div>
<div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end gap-2"> <!-- 새 글쓰기 버튼 -->
<!-- 새 글쓰기 --> <router-link to="/board/write" class="ms-auto">
<router-link to="/board/write" class="ms-2"> <WriteButton />
<WriteButton class="btn add-new btn-primary"/>
</router-link> </router-link>
</div> </div>
</div> </div>
<!-- 게시판 --> <div class="card-datatable m">
<div class="table-responsive"> <div class="table-responsive">
<table class="datatables-users table border-top dataTable dtr-column"> <table class="datatables-users table border-top dataTable dtr-column">
<thead> <thead>
@ -289,12 +285,11 @@ onMounted(() => {
width: 100% !important; width: 100% !important;
} }
} }
/* 댓글 개수 스타일 */
.comment-count { .comment-count {
font-size: 0.9rem; /* 글씨 크기 증가 */ font-size: 0.9rem;
font-weight: bold; font-weight: bold;
color: #ff5733; /* 강조 색상 (붉은 계열) */ color: #ff5733;
border-radius: 4px; /* 둥근 모서리 */ border-radius: 4px;
padding: 2px 6px; /* 내부 패딩 */ padding: 2px 6px;
} }
</style> </style>