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
File name
Commit message
Commit date
<template>
<div class="news-wrap">
<div class="content-box">
<div class="title-wrap">
<h2 class="main-title">홍보 / news</h2>
</div>
<div class="content-wrap">
<div class="search-zone">
<select name="" id="">
<option value="">전체</option>
</select>
<div class="search-wrap">
<input type="text" name="" id="" placeholder="검색어를 입력하세요." class="search">
<button class="blue-btn">검색</button>
</div>
</div>
<ul class="news-list">
<li>
<a href="#">
<div class="thumbnail">
<img class="fit-picture" src="" alt="thumbnail" />
</div>
<div class="text-zone">
<p class="content-title">제목이 들어가는 부분입니다.</p>
<p class="content-detail">제목이 내용이 들어가는 부분입니다.</p>
<p class="content-info"><span class="writer">작성자:</span><span class="views">조회수:</span></p>
<p class="content-date">23.10.23</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="thumbnail">
<img class="fit-picture" src="" alt="thumbnail" />
</div>
<div class="text-zone">
<p class="content-title">제목이 들어가는 부분입니다.</p>
<p class="content-detail">제목이 내용이 들어가는 부분입니다.</p>
<p class="content-info"><span class="writer">작성자:</span><span class="views">조회수:</span></p>
<p class="content-date">23.10.23</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="thumbnail">
<img class="fit-picture" src="" alt="thumbnail" />
</div>
<div class="text-zone">
<p class="content-title">제목이 들어가는 부분입니다.</p>
<p class="content-detail">제목이 내용이 들어가는 부분입니다.</p>
<p class="content-info"><span class="writer">작성자:</span><span class="views">조회수:</span></p>
<p class="content-date">23.10.23</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="thumbnail">
<img class="fit-picture" src="" alt="thumbnail" />
</div>
<div class="text-zone">
<p class="content-title">제목이 들어가는 부분입니다.</p>
<p class="content-detail">제목이 내용이 들어가는 부분입니다.</p>
<p class="content-info"><span class="writer">작성자:</span><span class="views">조회수:</span></p>
<p class="content-date">23.10.23</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="thumbnail">
<img class="fit-picture" src="" alt="thumbnail" />
</div>
<div class="text-zone">
<p class="content-title">제목이 들어가는 부분입니다.</p>
<p class="content-detail">제목이 내용이 들어가는 부분입니다.</p>
<p class="content-info"><span class="writer">작성자:</span><span class="views">조회수:</span></p>
<p class="content-date">23.10.23</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="thumbnail">
<img class="fit-picture" src="" alt="thumbnail" />
</div>
<div class="text-zone">
<p class="content-title">제목이 들어가는 부분입니다.</p>
<p class="content-detail">제목이 내용이 들어가는 부분입니다.</p>
<p class="content-info"><span class="writer">작성자:</span><span class="views">조회수:</span></p>
<p class="content-date">23.10.23</p>
</div>
</a>
</li>
</ul>
<div class="btn-wrap">
<button class="blue-btn" @click="selectInsert">글쓰기</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
selectInsert:function(){
this.$router.push({ path: '/adm/newsInsert.page', query: {}})
}
},
watch: {},
computed: {},
components: {},
mounted() {
}
};
</script>
<style scoped>
.news-wrap,
.content-box {
width: 100%;
height: 100%;
font-size: 1.3rem;
}
.news-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.news-list li {
padding: 20px;
border: 1px solid #eee;
}
.news-list li a {
display: block;
width: 100%;
height: 100%;
}
.news-list li a .thumbnail {
width: 100%;
height: 150px;
margin-bottom: 15px;
}
.news-list li a .thumbnail img {
display: block;
width: 100%;
height: 100%;
background-color: #aaa;
}
.text-zone p {
margin-bottom: 8px;
}
.content-title {
font-size: 1.6rem;
font-weight: 800;
}
.content-detail {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.content-date{
color: #aaa;
}
</style>