597 lines
22 KiB
Vue
597 lines
22 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
export default {
|
||
|
|
props: {},
|
||
|
|
page: {
|
||
|
|
title: "Blog-list"
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
Layout,
|
||
|
|
PageHeader,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Blog List",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: "Blog",
|
||
|
|
href: "/",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Blog List",
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-9 col-lg-8">
|
||
|
|
<div class="card">
|
||
|
|
<b-tabs
|
||
|
|
content-class="p-4"
|
||
|
|
class="pt-2"
|
||
|
|
nav-wrapper-class="nav-item"
|
||
|
|
nav-class="justify-content-center nav-tabs-custom"
|
||
|
|
>
|
||
|
|
<b-tab title="All Post" active>
|
||
|
|
<div>
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-xl-8">
|
||
|
|
<div>
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-4">
|
||
|
|
<div>
|
||
|
|
<h5 class="mb-0">Blog List</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-8">
|
||
|
|
<div class="float-end">
|
||
|
|
<ul class="nav nav-pills">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a
|
||
|
|
class="nav-link disabled"
|
||
|
|
href="#"
|
||
|
|
tabindex="-1"
|
||
|
|
aria-disabled="true"
|
||
|
|
>View :</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="nav-item"
|
||
|
|
data-toggle="tooltip"
|
||
|
|
data-placement="top"
|
||
|
|
title="List"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
class="nav-link active text-white"
|
||
|
|
to="/blog/list"
|
||
|
|
>
|
||
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="nav-item"
|
||
|
|
data-toggle="tooltip"
|
||
|
|
data-placement="top"
|
||
|
|
title="Grid"
|
||
|
|
>
|
||
|
|
<a class="nav-link" to="/blog/grid">
|
||
|
|
<i class="mdi mdi-view-grid-outline"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<hr class="mb-4" />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h5>
|
||
|
|
<a href="/blog/detail" class="text-dark"
|
||
|
|
>Beautiful Day with Friends</a
|
||
|
|
>
|
||
|
|
</h5>
|
||
|
|
<p class="text-muted">10 Apr, 2020</p>
|
||
|
|
|
||
|
|
<div class="position-relative mb-3">
|
||
|
|
<img
|
||
|
|
src="/images/small/img-2.jpg"
|
||
|
|
alt=""
|
||
|
|
class="img-thumbnail"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="list-inline">
|
||
|
|
<li class="list-inline-item me-3">
|
||
|
|
<a href="#" class="text-muted">
|
||
|
|
<i
|
||
|
|
class="bx bx-purchase-tag-alt align-middle text-muted me-1"
|
||
|
|
></i>
|
||
|
|
Project
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item me-3">
|
||
|
|
<a href="#" class="text-muted">
|
||
|
|
<i
|
||
|
|
class="bx bx-comment-dots align-middle text-muted me-1"
|
||
|
|
></i>
|
||
|
|
12 Comments
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<p>
|
||
|
|
Neque porro quisquam est, qui dolorem ipsum quia dolor
|
||
|
|
sit amet, consectetur, adipisci velit, aliquam quaerat
|
||
|
|
voluptatem. Ut enim ad minima veniam, quis
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<a href="#" class="text-primary"
|
||
|
|
>Read more <i class="mdi mdi-arrow-right"></i
|
||
|
|
></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h5>
|
||
|
|
<a href="/blog/detail" class="text-dark"
|
||
|
|
>Project discussion with team</a
|
||
|
|
>
|
||
|
|
</h5>
|
||
|
|
<p class="text-muted">24 Mar, 2020</p>
|
||
|
|
|
||
|
|
<div class="position-relative mb-3">
|
||
|
|
<img
|
||
|
|
src="/images/small/img-6.jpg"
|
||
|
|
alt=""
|
||
|
|
class="img-thumbnail"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div class="blog-play-icon">
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="avatar-sm d-block mx-auto"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle font-size-18"
|
||
|
|
><i class="mdi mdi-play"></i
|
||
|
|
></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="list-inline">
|
||
|
|
<li class="list-inline-item me-3">
|
||
|
|
<a href="#" class="text-muted">
|
||
|
|
<i
|
||
|
|
class="bx bx-purchase-tag-alt align-middle text-muted me-1"
|
||
|
|
></i>
|
||
|
|
Development
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item me-3">
|
||
|
|
<a href="#" class="text-muted">
|
||
|
|
<i
|
||
|
|
class="bx bx-comment-dots align-middle text-muted me-1"
|
||
|
|
></i>
|
||
|
|
08 Comments
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
At vero eos et accusamus et iusto odio dignissimos
|
||
|
|
ducimus qui blanditiis praesentium voluptatum deleniti
|
||
|
|
atque corrupti quos dolores similique sunt in culpa
|
||
|
|
qui officia deserunt mollitia animi est
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<a href="#" class="text-primary"
|
||
|
|
>Read more <i class="mdi mdi-arrow-right"></i
|
||
|
|
></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="my-5" />
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<ul
|
||
|
|
class="pagination justify-content-center pagination-rounded"
|
||
|
|
>
|
||
|
|
<li class="page-item disabled">
|
||
|
|
<a href="#" class="page-link"
|
||
|
|
><i class="mdi mdi-chevron-left"></i
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li class="page-item">
|
||
|
|
<a href="#" class="page-link">1</a>
|
||
|
|
</li>
|
||
|
|
<li class="page-item active">
|
||
|
|
<a href="#" class="page-link">2</a>
|
||
|
|
</li>
|
||
|
|
<li class="page-item">
|
||
|
|
<a href="#" class="page-link">3</a>
|
||
|
|
</li>
|
||
|
|
<li class="page-item">
|
||
|
|
<a href="#" class="page-link">...</a>
|
||
|
|
</li>
|
||
|
|
<li class="page-item">
|
||
|
|
<a href="#" class="page-link">10</a>
|
||
|
|
</li>
|
||
|
|
<li class="page-item">
|
||
|
|
<a href="#" class="page-link"
|
||
|
|
><i class="mdi mdi-chevron-right"></i
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-tab>
|
||
|
|
<b-tab title="Archive">
|
||
|
|
<div>
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-xl-8">
|
||
|
|
<h5>Archive</h5>
|
||
|
|
|
||
|
|
<div class="mt-5">
|
||
|
|
<div class="d-flex flex-wrap">
|
||
|
|
<div class="me-2">
|
||
|
|
<h4>2020</h4>
|
||
|
|
</div>
|
||
|
|
<div class="ms-auto">
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>03</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr class="mt-2" />
|
||
|
|
|
||
|
|
<div class="list-group list-group-flush">
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Beautiful
|
||
|
|
Day with Friends</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Drawing a
|
||
|
|
sketch</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Project
|
||
|
|
discussion with team</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-5">
|
||
|
|
<div class="d-flex flex-wrap">
|
||
|
|
<div class="me-2">
|
||
|
|
<h4>2019</h4>
|
||
|
|
</div>
|
||
|
|
<div class="ms-auto">
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>06</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr class="mt-2" />
|
||
|
|
|
||
|
|
<div class="list-group list-group-flush">
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Coffee
|
||
|
|
with Friends</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Neque
|
||
|
|
porro quisquam est</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Quis autem
|
||
|
|
vel eum iure</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Cras mi eu
|
||
|
|
turpis</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Drawing a
|
||
|
|
sketch</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Project
|
||
|
|
discussion with team</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-5">
|
||
|
|
<div class="d-flex flex-wrap">
|
||
|
|
<div class="me-2">
|
||
|
|
<h4>2018</h4>
|
||
|
|
</div>
|
||
|
|
<div class="ms-auto">
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>03</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr class="mt-2" />
|
||
|
|
|
||
|
|
<div class="list-group list-group-flush">
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Beautiful
|
||
|
|
Day with Friends</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Drawing a
|
||
|
|
sketch</a
|
||
|
|
>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/blog/detail"
|
||
|
|
class="list-group-item text-muted"
|
||
|
|
><i class="mdi mdi-circle-medium me-1"></i> Project
|
||
|
|
discussion with team</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-tab>
|
||
|
|
</b-tabs>
|
||
|
|
<!-- Nav tabs -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xl-3 col-lg-4">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body p-4">
|
||
|
|
<div class="search-box">
|
||
|
|
<p class="text-muted">Search</p>
|
||
|
|
<div class="position-relative">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="form-control rounded bg-light border-light"
|
||
|
|
placeholder="Search..."
|
||
|
|
/>
|
||
|
|
<i class="mdi mdi-magnify search-icon"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="my-4" />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p class="text-muted">Categories</p>
|
||
|
|
|
||
|
|
<ul class="list-unstyled fw-medium">
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> Design</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> Development
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>04</span
|
||
|
|
></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> Business</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> Project</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> Travel<span
|
||
|
|
class="badge badge-soft-success rounded-pill ms-1 float-end font-size-12"
|
||
|
|
>12</span
|
||
|
|
></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="my-4" />
|
||
|
|
<div>
|
||
|
|
<p class="text-muted">Archive</p>
|
||
|
|
|
||
|
|
<ul class="list-unstyled fw-medium">
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> 2020
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>03</span
|
||
|
|
></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> 2019
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>06</span
|
||
|
|
></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" class="text-muted py-2 d-block"
|
||
|
|
><i class="mdi mdi-chevron-right me-1"></i> 2018
|
||
|
|
<span
|
||
|
|
class="badge badge-soft-success rounded-pill float-end ms-1 font-size-12"
|
||
|
|
>05</span
|
||
|
|
></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<hr class="my-4" />
|
||
|
|
<div>
|
||
|
|
<p class="text-muted mb-2">Popular Posts</p>
|
||
|
|
|
||
|
|
<div class="list-group list-group-flush">
|
||
|
|
<a href="#" class="list-group-item text-muted py-3 px-2">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="me-3">
|
||
|
|
<img
|
||
|
|
src="/images/small/img-7.jpg"
|
||
|
|
alt=""
|
||
|
|
class="avatar-md h-auto d-block rounded"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="font-size-13 text-truncate">
|
||
|
|
Beautiful Day with Friends
|
||
|
|
</h5>
|
||
|
|
<p class="mb-0 text-truncate">10 Apr, 2020</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item text-muted py-3 px-2">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="me-3">
|
||
|
|
<img
|
||
|
|
src="/images/small/img-4.jpg"
|
||
|
|
alt=""
|
||
|
|
class="avatar-md h-auto d-block rounded"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="font-size-13 text-truncate">
|
||
|
|
Drawing a sketch
|
||
|
|
</h5>
|
||
|
|
<p class="mb-0 text-truncate">24 Mar, 2020</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item text-muted py-3 px-2">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="me-3">
|
||
|
|
<img
|
||
|
|
src="/images/small/img-6.jpg"
|
||
|
|
alt=""
|
||
|
|
class="avatar-md h-auto d-block rounded"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="font-size-13 text-truncate">
|
||
|
|
Project discussion with team
|
||
|
|
</h5>
|
||
|
|
<p class="mb-0 text-truncate">11 Mar, 2020</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="my-4" />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p class="text-muted mb-1">Tags</p>
|
||
|
|
|
||
|
|
<ul class="list-inline widget-tag">
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Design</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Development</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Business</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Project</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Travel</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Lifestyle</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a href="#" class="badge bg-light font-size-12 mt-2"
|
||
|
|
>Photography</a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end card -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</Layout>
|
||
|
|
</template>
|