Untitled
hoaily19
plain_text
4 months ago
7.0 kB
5
Indexable
<template> <section class="article-detail"> <!-- <section class="breadcrumb-section shop1 text-center mb-4"> <span class="crumb-border"></span> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="breadcrumb"> <li class="home"> <router-link to="/"><b>Trang chủ </b></router-link> <span class="icon-arrow-right text-danger"> <font-awesome-icon :icon="['fas', 'arrow-right']" /> </span> </li> <li class="home"> <router-link to="/tin-tuc"><b>Tin tức </b></router-link> <span class="icon-arrow-right text-danger"> <font-awesome-icon :icon="['fas', 'arrow-right']" /> </span> </li> <li> <strong><span class="text-danger"> Bài viết</span></strong> </li> </ul> </div> </div> </div> </section> --> <!-- Article Content Section --> <section class="content-section mt-5 py-5"> <div class="container"> <div class="row"> <div class="col-md-8"> <article class="main-article mb-5 shadow-lg p-4 rounded bg-white"> <img v-if="article.image" :src="`${API_URL}/storage/${article.image}`" alt="Article Thumbnail" class="img-fluid mb-4 rounded" style="height: 500px; object-fit: cover;" /> <h1 class="article-title mb-3 text-dark">{{ article.title }}</h1> <div class="article-meta text-muted mb-3"> <span><i class="fas fa-user"></i> Tác giả: <span class="fw-semibold">{{ article.author }}</span></span> <span class="mx-2">|</span> <span><i class="fas fa-calendar-alt"></i> Ngày đăng: <span class="fw-semibold">{{ article.date }}</span></span> </div> <div class="article-content" v-html="article.content"></div> </article> </div> <div class="col-md-4 sidebar-wrapper"> <aside class="sidebar fixed-sidebar"> <h4 class="sidebar-title mb-4">Có Thể Bạn Quan Tâm</h4> <ul class="list-group"> <li v-for="latest in latestArticles" :key="latest.id" class="list-group-item d-flex align-items-center hover-item"> <img v-if="latest.image" :src="`${API_URL}/storage/${latest.image}`" alt="Article Image" class="img-thumbnail me-3 rounded" style="width: 60px; height: 60px; object-fit: cover;" /> <router-link :to="'/chi-tiet-tin-tuc/' + latest.id" class="text-decoration-none text-dark hover-link"> {{ latest.title }} </router-link> </li> </ul> </aside> </div> </div> </div> </section> </section> </template> <script setup> import { ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; import axios from 'axios'; const API_URL = import.meta.env.VITE_API_URL; const article = ref({ title: '', author: '', date: '', image: '', content: '' }); const latestArticles = ref([]); const route = useRoute(); const id = route.params.id; const fetchArticle = async () => { try { const response = await axios.get(`${API_URL}/api/posts/${id}`); const post = response.data.post; article.value = { title: post.title, author: post.user.username, date: post.created_at, image: post.image, content: post.content, }; const allArticlesResponse = await axios.get(`${API_URL}/api/posts`); const allArticles = allArticlesResponse.data.posts; latestArticles.value = allArticles.slice(0, 4); } catch (error) { console.error('Failed to fetch article or all articles:', error); } }; onMounted(() => { fetchArticle(); }); </script> <style scoped> /* General Styles */ body { font-family: 'Arial', sans-serif; } .breadcrumb { margin-top: 20px; } .breadcrumb-item { font-weight: 500; } .breadcrumb-link { color: #007bff; transition: color 0.3s; } .breadcrumb-link:hover { color: #d9534f; } .main-article { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .article-title { font-size: 2rem; font-weight: 600; } .article-meta { font-size: 0.9rem; color: #777; } .article-meta .fw-semibold { font-weight: 600; } .article-content { font-size: 1.1rem; line-height: 1.8; color: #333; margin-top: 1.5rem; } .article-content p { margin-bottom: 1.5rem; } .article-content h2, .article-content h3, .article-content h4 { margin-top: 2rem; color: #2c3e50; } /* Sidebar */ .sidebar-title { font-size: 1.2rem; font-weight: 600; color: #333; } .list-group-item { border: 1px solid #e0e0e0; padding: 12px 15px; margin-bottom: 1rem; background-color: #f9f9f9; transition: background-color 0.3s, transform 0.2s ease-in-out; } .list-group-item:hover { background-color: #f1f1f1; transform: scale(1.03); } .list-group-item .hover-item img { border-radius: 5px; } .hover-link { color: #333; font-weight: 500; transition: color 0.3s; } .hover-link:hover { color: #d9534f; } img { width: 100%; } .fixed-sidebar { position: fixed; top: 100px; right: 50; width: 30%; height: calc(70vh - 70px); overflow-y: auto; padding: 15px; background-color: #f9f9f9; border-left: 1px solid #e0e0e0; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); } </style>
Editor is loading...
Leave a Comment