<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>
