Skip to content

K
kiaisoft_tuananh_nuxt
Commit 48903f3a authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

change

parent 3f14267b
Show whitespace changes
Inline Side-by-side
Showing with 1210 additions and 432 deletions
components/DetailModal.vue
View file @ 48903f3a
......@@ -24,7 +24,7 @@
</v-col>
<v-col class="half-space">
<v-row class="first-row flex-row align-center justify-space-between mt-2">
<v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
<v-card-title v-model="item.name" class="modal-title">
{{ name }}
</v-card-title>
<v-btn icon style="background-color:red" @click="$emit('close'); clearDialog()">
......@@ -266,6 +266,7 @@ export default {
font-weight: bold;
margin-left:-22px;
margin-top:10px;
width: 85%;
}
.hex-variant {
/* margin-top:0px; */
......
components/user/NavBar.vue
View file @ 48903f3a
......@@ -23,9 +23,11 @@
<v-icon>mdi-chevron-down</v-icon>
</div>
<div class="navbar-item">
<span>
<nuxt-link :to="`/home-page/posts/list`">
<span style="color:rgba(0, 0, 0, 0.87);">
Blogs
</span>
</nuxt-link>
<v-icon>mdi-chevron-down</v-icon>
</div>
<div class="navbar-item">
......
pages/home-page/index.vue
View file @ 48903f3a
......@@ -136,12 +136,6 @@
md="3"
class="feature-row"
>
<!-- <v-carousel
hide-delimiters
:slides-per-page="4"
:center-mode="true"
>
<v-carousel-item v-for="item in items" :key="item.id"> -->
<v-hover
v-slot="{ hover }"
:elevation="hover ? 12 : 2"
......@@ -240,25 +234,26 @@
class="card-img"
/>
<v-card-text class="calendar">
<span>19</span>
<span>JAN</span>
<span>{{ formatDateTime(item.created_at) }}</span>
<span>{{ formatMonthTime(item.created_at) }}</span>
</v-card-text>
<v-card-item class="card-4">
<v-card-title style="padding:5px;font-weight:800">
<v-card-title style="padding:5px;font-weight:800;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px">
<v-card-text class="post-content" style="padding:5px">
<div>{{ item.content }}</div>
</v-card-text>
<v-card-actions>
<nuxt-link :to="`/home-page/posts/${item.id}`">
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</nuxt-link>
</v-card-actions>
</v-card>
</v-col>
......@@ -339,29 +334,14 @@ export default {
price: '50$'
}
],
posts: [
{
images: 'https://d-themes.com/html/riode/images/blog/frame/1.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/2.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/3.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
}
],
posts: [],
categories: [],
product: []
}
},
mounted () {
this.getCategories()
this.getPosts()
// this.getNewProducts()
},
methods: {
......@@ -380,6 +360,22 @@ export default {
.catch(function (error) {
console.log(error)
})
},
getPosts () {
this.$axios
.get('/guest/posts/latest-posts/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.posts = response.data.data
})
.catch(function (error) {
console.log(error)
})
}
// getNewProducts () {
// this.$axios
......@@ -502,6 +498,13 @@ export default {
color: black !important;
font-weight: bold;
}
.post-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width: 500px) {
.feature-row {
flex: 1 1 49%;
......
pages/home-page/posts/_id/index.vue 0 → 100644
View file @ 48903f3a
<template>
<div>
<v-container>
<v-row class="bread-crumbs">
<v-breadcrumbs
class="bread-crumb"
:items="items"
separator="/"
small
dense
>
<template #item="{ item }">
<v-icon>{{ item.icon }}</v-icon>
{{ item.text }}
</template>
</v-breadcrumbs>
</v-row>
<v-row>
<v-img :src="post.images" />
</v-row>
<v-row class="post-details">
<v-row class="post-meta">
<v-card-text class="post-moment">
by <span class="font-weight-bold text-uppercase">{{ post.user.name }}</span> on {{ formatDateString(post.created_at) }}
</v-card-text>
</v-row>
<v-row style="margin-left: 0px">
<h1 class="post-title">
{{ post.title }}
</h1>
</v-row>
<v-row class="post-body">
<body-1 class="post-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque,
aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula
sollicitudin laoreet viverra, tortor libero sodales leo, eget
blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse
potenti.
</body-1>
<body-1 class="post-text">
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae
luctus metus libero eu augue. Morbi purus libero, faucibus
adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent
elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum
volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu
pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu,
fermentum et, dapibus sed, urna.
</body-1>
<v-row class="post-w-img">
<v-col class="col-img">
<v-img
:src="(post.id % 2 === 0) ? 'https://d-themes.com/html/riode/images/blog/single/2.jpg' : 'https://d-themes.com/html/riode/images/categories/category3.jpg'"
style="margin: auto"
class="post-img-2"
/>
<div class="d-flex justify-center">
<v-subtitle class="img-title">
Designe by Casper Dalin
</v-subtitle>
</div>
</v-col>
<v-col class="img-content">
<h3>Quisque volutpat mattiseros.</h3>
<body-1>
Sed pretium, ligula sollicitudin laoreet viverra, tortor libero
sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
</body-1>
<h3>More Details</h3>
<ul class="list-check">
<li v-for="(item, i) in list_check" :key="i">
{{ item.text }}
</li>
</ul>
</v-col>
</v-row>
<v-row class="post-quote">
<blockquote>
<p class="quote">
“ {{ post.content }} ”
</p>
</blockquote>
</v-row>
<body-1 class="post-text">
Morbi purus libero, faucibus adipiscing, commodo quis, gravida id,
est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper
lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi
neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus
pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi
interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a
ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis
libero dolor a purus.
</body-1>
<v-row class="post-author-detail">
<v-col>
<v-avatar rounded="0" color="blue-darken-2" width="60" height="60">
<v-img class="author-img" src="https://d-themes.com/html/riode/images/blog/comments/1.jpg" />
</v-avatar>
</v-col>
<v-row class="author-body">
<div class="d-flex flex-column">
<v-subtitle>AUTHOR</v-subtitle>
<v-title class="font-weight-black text-uppercase">
{{ post.user.name }}
</v-title>
</div>
<body-1>
Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae,
eu vulputate magna eros euerat. Aliquam erat volutpat.
</body-1>
</v-row>
</v-row>
</v-row>
</v-row>
</v-container>
<v-container>
<div class="d-flex align-center mt-12">
<h2 class="sub-title">
Related Post
</h2>
</div>
<v-row>
<v-col
v-for="(item, i) in relative_posts"
:key="i"
cols="12"
md="4"
class="feature-col"
>
<v-card
:loading="loading"
class="mx-auto my-12 card-4"
max-width="374"
>
<template #loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="deep-purple"
height="4"
indeterminate
/>
</template>
<v-img
cover
height="250"
:src="item.images"
class="card-img"
/>
<v-card-text class="calendar">
<span>19</span>
<span>JAN</span>
</v-card-text>
<v-card-item class="card-4">
<v-card-title style="padding:5px;font-weight:800">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px">
<div>{{ item.content }}</div>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
layout: 'user',
data: () => ({
post: {
user: {}
},
items: [
{
text: '',
href: '/home-page',
disabled: false,
icon: 'mdi-home'
},
{
text: 'Posts',
disabled: false,
href: '/home-page',
icon: ''
},
{
text: 'Single-post',
disabled: false,
href: '#',
icon: ''
}
],
list_check: [
{
text: 'Praesent id enim sit amet.'
},
{
text: 'Tdio vulputate eleifend in in tortor. ellus massa.'
},
{
text: 'Massa ristique sit amet condim vel.'
},
{
text: 'Dilisis Facilisis quis sapien. Praesent id enim sit amet'
},
{
text: 'Praesent id enim sit amet.'
},
{
text: 'Tdio vulputate eleifend in in tortor. ellus massa.'
}
],
relative_posts: [
{
images: 'https://d-themes.com/html/riode/images/blog/list/3.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/list/4.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/list/6.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
}
]
}),
created () {
this.getPost()
},
methods: {
async getPost () {
const resp = await this.$axios.get(`/guest/posts/detail/${this.$route.params.id}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.catch(function (error) {
console.log(error)
})
this.post = resp.data.data
console.log(this.post)
}
}
}
</script>
<style scoped>
.author-body {
flex: 7 0 70%;
}
.post-moment {
padding-left:0px;
}
.row {
margin-left: 0px;
}
.container {
max-width: 1185px !important;
font-size: 18px;
}
.post-details {
display: flex;
flex-direction: column;
margin-bottom: 60px;
}
.bread-crumbs {
padding-left: 0px;
}
.bread-crumb {
padding-left: 0px;
}
.post-meta {
padding-top: 3rem;
}
.post-text {
margin-bottom: 1rem;
margin-top: 1rem;
line-height: 1.72;
}
.list-check {
list-style: none; /* loại bỏ dấu chấm của danh sách */
padding: 0; /* loại bỏ padding mặc định của danh sách */
}
.list-check li {
position: relative; /* đặt vị trí tương đối để phù hợp với checkmark */
padding-left: 30px; /* để tạo không gian cho checkmark */
margin-bottom: 10px; /* đặt khoảng cách giữa các mục trong danh sách */
line-height: 1.5; /* đặt chiều cao dòng cho các mục */
}
.list-check li:before {
display: block;
position: absolute;
left: 3px;
top: 2px;
font-family: "riode";
font-weight: 700;
font-size: 1.2rem;
color: #222;
}
.list-check li:after {
content: "\2713";
position: absolute;
left: 4px;
top: 5px;
color: #007bff;
font-size: 16px;
line-height: 1;
}
.img-content {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 50px;
}
.quote {
line-height: 1.72;
font-size: 1.5rem;
letter-spacing: -0.025em;
font-weight: bold;
position: relative;
padding-left: 30px; /* Khoảng cách giữa biểu tượng và đoạn văn */
color: #666;
padding-left: 60px;
}
.quote::before {
content: ",,";
display: inline-block;
position: absolute;
left: 0;
top: -60px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 5.5rem;
color: #222;
line-height: 1;
}
.post-quote {
margin-top: 40px;
}
.post-author-detail {
padding:25px;
margin-top:40px;
display: flex;
flex-direction: row;
border: 1px solid #e1e1e1;
max-width:1185px !important;
}
.author-body {
display: flex;
flex-direction: column;
padding-top: 20px;
}
.author-img {
width:60px;
height:60px;
}
.sub-title {
text-transform: capitalize;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.0125em;
color: #222;
}
.calendar {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
top: 20px;
position: absolute;
background-color: #ffffff;
left: 20px;
opacity: 0.8;
padding: 10px;
border-radius: 4px;
color: black !important;
font-weight: bold;
}
.row >.feature-col:first-child {
padding-left:0px;
}
.img-title {
padding-left: 60px;
}
.col-img {
flex-grow: 0;
}
.post-img-2 {
width:450px;
height:550px;
}
.post-text {
text-align: justify;
}
@media only screen and (max-width: 500px) {
.container {
max-width: 415px !important;
font-size: 15px;
}
.row {
margin:0px;
}
.post-img-2 {
width:370px;
height:510px;
}
.post-text {
text-align: justify;
}
.img-title {
padding-left:0px;
}
.author-body {
flex: 1 0 70%;
}
.row >.feature-col {
padding-right:0px;
padding-left: 0px;
}
.row >.feature-col:not(:last-child) {
margin-bottom:-65px;
}
.quote::before {
top: -40px;
font-size: 4rem;
}
}
</style>
pages/home-page/posts/index.vue 0 → 100644
View file @ 48903f3a
<template>
<div>
<v-container>
<template>
<v-row class="bread-crumbs">
<v-breadcrumbs
class="bread-crumb"
:items="items"
separator="/"
small
dense
>
<template #item="{ item }">
<v-icon>{{ item.icon }}</v-icon>
{{ item.text }}
</template>
</v-breadcrumbs>
</v-row>
</template>
<v-row>
<v-img src="https://d-themes.com/html/riode/images/blog/single/3.jpg" />
</v-row>
<v-row class="post-details">
<v-row class="post-meta">
<v-card-text class="post-moment">
by JOHN DOE on Nov 22, 2018 | 2 Comments
</v-card-text>
</v-row>
<v-row style="margin-left: 0px">
<h1 class="post-title">
Explore Fashion Trending For Women In Autumn 2022
</h1>
</v-row>
<v-row class="post-body">
<body-1 class="post-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque,
aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula
sollicitudin laoreet viverra, tortor libero sodales leo, eget
blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse
potenti.
</body-1>
<body-1 class="post-text">
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae
luctus metus libero eu augue. Morbi purus libero, faucibus
adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent
elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum
volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu
pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu,
fermentum et, dapibus sed, urna.
</body-1>
<v-row class="post-w-img">
<v-col class="col-img">
<v-img
src="https://d-themes.com/html/riode/images/blog/single/2.jpg"
style="margin: auto"
class="post-img-2"
/>
<div>
<v-subtitle class="img-title">
Designe by Casper Dalin
</v-subtitle>
</div>
</v-col>
<v-col class="img-content">
<h3>Quisque volutpat mattiseros.</h3>
<body-1>
Sed pretium, ligula sollicitudin laoreet viverra, tortor libero
sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut
justo. Suspendisse potenti.
</body-1>
<h3>More Details</h3>
<ul class="list-check">
<li v-for="(item, i) in list_check" :key="i">
{{ item.text }}
</li>
</ul>
</v-col>
</v-row>
<v-row class="post-quote">
<blockquote>
<p class="quote">
“ Morbi purus libero, faucibus adipiscing, commodo quis, gravida
id, est. Sed lectus. Praesent elementum hendrerit tortor. ”
</p>
</blockquote>
</v-row>
<body-1 class="post-text">
Morbi purus libero, faucibus adipiscing, commodo quis, gravida id,
est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper
lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi
neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus
pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi
interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a
ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis
libero dolor a purus.
</body-1>
<v-row class="post-author-detail">
<v-col>
<v-avatar rounded="0" color="blue-darken-2" width="60" height="60">
<v-img class="author-img" src="https://d-themes.com/html/riode/images/blog/comments/1.jpg" />
</v-avatar>
</v-col>
<v-row class="author-body">
<div class="d-flex flex-column">
<v-subtitle>AUTHOR</v-subtitle>
<v-title class="font-weight-black">
John John
</v-title>
</div>
<body-1>
Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae,
eu vulputate magna eros euerat. Aliquam erat volutpat.
</body-1>
</v-row>
</v-row>
</v-row>
</v-row>
</v-container>
<v-container>
<div class="d-flex align-center mt-12">
<h2 class="sub-title">
Related Post
</h2>
</div>
<v-row>
<v-col
v-for="(item, i) in relative_posts"
:key="i"
cols="12"
md="4"
class="feature-col"
>
<v-card
:loading="loading"
class="mx-auto my-12 card-4"
max-width="374"
>
<template #loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="deep-purple"
height="4"
indeterminate
/>
</template>
<v-img
cover
height="250"
:src="item.images"
class="card-img"
/>
<v-card-text class="calendar">
<span>19</span>
<span>JAN</span>
</v-card-text>
<v-card-item class="card-4">
<v-card-title style="padding:5px;font-weight:800">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px">
<div>{{ item.content }}</div>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
layout: 'user',
data: () => ({
items: [
{
text: '',
href: '/',
icon: 'mdi-home'
},
{
text: 'Posts',
href: '/home-page/posts',
icon: ''
},
{
text: 'single-post',
href: '/',
icon: ''
}
],
list_check: [
{
text: 'Praesent id enim sit amet.'
},
{
text: 'Tdio vulputate eleifend in in tortor. ellus massa.'
},
{
text: 'Massa ristique sit amet condim vel.'
},
{
text: 'Dilisis Facilisis quis sapien. Praesent id enim sit amet'
},
{
text: 'Praesent id enim sit amet.'
},
{
text: 'Tdio vulputate eleifend in in tortor. ellus massa.'
}
],
relative_posts: [
{
images: 'https://d-themes.com/html/riode/images/blog/frame/1.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/2.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/3.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
}
]
})
}
</script>
<style scoped>
.row {
margin-left: 0px;
}
.container {
max-width: 1185px !important;
font-size: 18px;
}
.post-details {
display: flex;
flex-direction: column;
margin-bottom: 60px;
}
.bread-crumbs {
padding-left: 0px;
}
.bread-crumb {
padding-left: 0px;
}
.post-meta {
padding-top: 3rem;
}
.post-text {
margin-bottom: 1rem;
margin-top: 1rem;
line-height: 1.72;
}
.list-check {
list-style: none; /* loại bỏ dấu chấm của danh sách */
padding: 0; /* loại bỏ padding mặc định của danh sách */
}
.list-check li {
position: relative; /* đặt vị trí tương đối để phù hợp với checkmark */
padding-left: 30px; /* để tạo không gian cho checkmark */
margin-bottom: 10px; /* đặt khoảng cách giữa các mục trong danh sách */
line-height: 1.5; /* đặt chiều cao dòng cho các mục */
}
.list-check li:before {
display: block;
position: absolute;
left: 3px;
top: 2px;
font-family: "riode";
font-weight: 700;
font-size: 1.2rem;
color: #222;
}
.list-check li:after {
content: "\2713";
position: absolute;
left: 4px;
top: 5px;
color: #007bff;
font-size: 16px;
line-height: 1;
}
.img-content {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 50px;
}
.quote {
line-height: 1.72;
font-size: 1.5rem;
letter-spacing: -0.025em;
font-weight: bold;
position: relative;
padding-left: 30px; /* Khoảng cách giữa biểu tượng và đoạn văn */
color: #666;
padding-left: 60px;
}
.quote::before {
content: ",,";
display: inline-block;
position: absolute;
left: 0;
top: -60px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 5.5rem;
color: #222;
line-height: 1;
}
.post-quote {
margin-top: 40px;
}
.post-author-detail {
padding:25px;
margin-top:40px;
display: flex;
flex-direction: row;
border: 1px solid #e1e1e1;
max-width:1185px !important;
}
.author-body {
display: flex;
flex-direction: column;
padding-top: 20px;
}
.author-img {
width:60px;
height:60px;
}
.sub-title {
text-transform: capitalize;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.0125em;
color: #222;
}
.calendar {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
top: 20px;
position: absolute;
background-color: #ffffff;
left: 20px;
opacity: 0.8;
padding: 10px;
border-radius: 4px;
color: black !important;
font-weight: bold;
}
.row >.feature-col:first-child {
padding-left:0px;
}
.img-title {
padding-left: 60px;
}
.col-img {
flex-grow: 0;
}
.post-img-2 {
width:450px;
height:550px;
}
@media only screen and (max-width: 500px) {
.container {
max-width: 415px !important;
font-size: 15px;
}
.row {
margin:0px;
}
.post-img-2 {
width:370px;
height:510px;
}
.post-text {
text-align: justify;
}
.img-title {
padding-left:0px;
}
.author-body {
flex: 1 0 70%;
}
.row >.feature-col {
padding-right:0px;
padding-left: 0px;
}
.row >.feature-col:not(:last-child) {
margin-bottom:-65px;
}
}
</style>
pages/home-page/posts/list.vue 0 → 100644
View file @ 48903f3a
<template>
<div>
<v-container class="pa-0">
<v-row class="bread-crumbs mt-2">
<v-breadcrumbs
class="bread-crumb"
:items="items"
separator="/"
small
dense
>
<template #item="{ item }">
<v-icon>{{ item.icon }}</v-icon>
{{ item.text }}
</template>
</v-breadcrumbs>
</v-row>
<v-row class="pb-5 pt-0">
<v-col
v-for="(item, i) in posts"
:key="i"
cols="12"
md="4"
class="feature-col"
>
<v-card
:loading="loading"
class="mx-auto my-12 card-4"
max-width="374"
>
<template #loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="deep-purple"
height="4"
indeterminate
/>
</template>
<v-img
cover
height="250"
:src="item.images"
class="card-img"
/>
<v-card-text class="calendar">
<span>{{ formatDateTime(item.created_at) }}</span>
<span>{{ formatMonthTime(item.created_at) }}</span>
</v-card-text>
<v-card-item class="card-4">
<v-card-title style="padding:5px;font-weight:800;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px" class="post-content">
<div>{{ item.content }}</div>
</v-card-text>
<v-card-actions>
<nuxt-link :to="`/home-page/posts/${item.id}`">
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</nuxt-link>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<v-divider />
</v-container>
</div>
</template>
<script>
export default {
layout: 'user',
data: () => {
return {
posts: [
// {
// images: 'https://d-themes.com/html/riode/images/blog/list/3.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/list/4.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/list/6.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/frame/1.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/frame/2.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/frame/3.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// }
],
icons: ['mdi-cart', 'mdi-heart', 'mdi-magnify'],
products: [],
page: 1,
items: [
{
text: '',
to: '/home-page',
disabled: false,
icon: 'mdi-home'
},
{
text: 'Posts',
to: '/home-page/posts',
disabled: false,
icon: ''
}
]
}
},
created () {
this.getPosts()
},
methods: {
async getPosts () {
const resp = await this.$axios.get('/guest/posts/index', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.posts = response.data.data))
.catch(function (error) {
console.log(error)
})
console.log(resp)
}
}
}
</script>
<style lang="scss" scoped>
.sub-title {
text-transform: capitalize;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.0125em;
color: #222;
}
.calendar {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
top: 20px;
position: absolute;
background-color: #ffffff;
left: 20px;
opacity: 0.8;
padding: 10px;
border-radius: 4px;
color: black !important;
font-weight: bold;
}
.post-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width: 500px) {
.row >.feature-col {
padding-right:0px;
padding-left: 0px;
}
.row >.feature-col:not(:last-child) {
margin-bottom:-65px;
}
}
</style>
pages/home-page/products/_id/index.vue
View file @ 48903f3a
<template>
<v-container>
<!-- Full-width images with number text -->
<v-row class="bread-crumbs">
<v-breadcrumbs>
<v-breadcrumbs-item href="/home-page">
<v-icon>mdi-home</v-icon>
</v-breadcrumbs-item>
<v-breadcrumbs-item :href="`/home-page/categories/${product.category_id}`">
> Category
</v-breadcrumbs-item>
</v-breadcrumbs>
</v-row>
<div class="sub-container">
<div class="gallery-product">
<div>
<div class="mySlides">
<div class="numbertext">
1 / 4
</div>
<img :src="product.images[0]">
</div>
<div class="mySlides">
<div class="numbertext">
2 / 4
</div>
<img :src="product.images[1] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
<div class="mySlides">
<div class="numbertext">
3 / 4
</div>
<img :src="product.images[2] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
<div class="mySlides">
<div class="numbertext">
4 / 4
</div>
<img :src="product.images[3] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
......@@ -56,26 +53,23 @@
<div class="detail-product">
<v-col>
<v-row class="flex-row align-center justify-space-between mt-2">
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
<v-card-title class="modal-title text-uppercase" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
{{ product.name }}
</v-card-title>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Price:
</h3>
<v-card-title style="color: #d26e4b;font-weight: 700;line-height: 1;">
100$
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem;color: #d26e4b;">
${{ product.price }}.00
</v-card-title>
</v-row>
<v-card-text class="descrip">
Sed egestas, ante et vulputate volutpat,
{{ product.description }}
</v-card-text>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Color:
</h3>
<v-col cols="12" sm="6" md="4">
<v-col class="col-col" cols="12" sm="6" md="4">
<v-select
v-model="color"
label="Color"
......@@ -87,7 +81,7 @@
<h3 class="mr-4">
Size:
</h3>
<v-col cols="12" sm="6" md="4">
<v-col class="col-col" cols="12" sm="6" md="4">
<v-select
v-model="size"
label="Size"
......@@ -95,6 +89,11 @@
/>
</v-col>
</v-row>
<v-row v-if="isSelectionValid" class="flex-row align-center">
<h3 class="mr-4 mt-2 price-tag" style="color: rgb(210, 110, 75);">
{{ total_price.toFixed(2) + "$" }}
</h3>
</v-row>
<v-row class="mt-7">
<v-divider :thickness="2" />
</v-row>
......@@ -108,7 +107,7 @@
type="number"
/>
</v-col>
<v-btn @click="addProductToCard" color="primary" dense>
<v-btn color="primary" dense @click="addProductToCard">
Add to card (+)
</v-btn>
<v-btn
......@@ -167,6 +166,7 @@
cover
/>
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
</v-card-title>
......@@ -212,11 +212,35 @@ export default {
price: '100$',
name: 'xiaomi x99'
}
],
size: '',
color: '',
quantity: ''
quantity: 1,
breadcrumb: [
{
icon: 'mdi-home',
text: 'Home',
disabled: false,
href: '/home-page'
},
{
text: 'Category',
disabled: false,
href: '/home-page/categories/'
}
]
}
},
computed: {
total_price () {
if (this.quantity < 0) {
return 0
} else {
return this.quantity * this.product.price
}
},
isSelectionValid () {
return this.size !== '' && this.color !== ''
}
},
mounted () {
......@@ -275,6 +299,7 @@ export default {
this.$toast.success('Add product successfully!', {
duration: 3000
})
this.clear()
eventBus.$emit('add-to-cart', response)
})
.catch((errors) => {
......@@ -282,6 +307,11 @@ export default {
duration: 3000
})
})
},
clear () {
this.size = ''
this.color = ''
this.quantity = 1
}
}
}
......@@ -411,4 +441,43 @@ export default {
flex-direction: row;
gap: 20px;
}
.bread-crumbs >ul>li>a {
color: #222 !important;
}
@media only screen and (max-width: 500px) {
.sub-container {
flex-direction: column;
gap: 20px;
padding-left: 12px;
}
.mySlides {
width:378px!important;
height:426px !important;
}
.mySlides>img {
width:378px!important;
height:426px !important;
}
.gallery-product {
flex-direction: column;
}
.c2 {
flex-direction: row;
}
.column>img {
width: 87px!important;
height:100px!important;
}
.detail-product {
padding-left:15px;
}
.col-col {
max-width:80%;
}
.container {
max-width: 415px !important;
font-size: 15px;
}
}
</style>
pages/home-page/products/index.vue deleted 100644 → 0
View file @ 3f14267b
<template>
<v-container>
<!-- Full-width images with number text -->
<div class="sub-container">
<div class="gallery-product">
<div>
<div class="mySlides">
<div class="numbertext">
1 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
2 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
3 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
4 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<!-- Next and previous buttons -->
<a class="prev" @click="plusSlides(-1)">&#10094;</a>
<a class="next" @click="plusSlides(1)">&#10095;</a>
</div>
<!-- Thumbnail images -->
<div class="c2">
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
</div>
</div>
</div>
<div class="detail-product">
<v-col>
<v-row class="flex-row align-center justify-space-between mt-2">
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
MACBOOK PRO 1
</v-card-title>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Price:
</h3>
<v-card-title style="color: #d26e4b;font-weight: 700;line-height: 1;">
100$
</v-card-title>
</v-row>
<v-card-text class="descrip">
Sed egestas, ante et vulputate volutpat,
</v-card-text>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Color:
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
/>
</v-col>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Size:
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
/>
</v-col>
</v-row>
<v-row class="mt-7">
<v-divider :thickness="2" />
</v-row>
<v-row cols="12" md="2" class="flex-row align-center">
<h3 class="mr-4">
Quantity
</h3>
<v-col md="2">
<v-text-field
type="number"
/>
</v-col>
<v-btn color="primary" dense>
Add to card (+)
</v-btn>
<v-btn
plain
>
<v-icon large>
mdi-heart-outline
</v-icon>
</v-btn>
</v-row>
<v-row class="mb-1">
<v-divider :thickness="2" />
</v-row>
<v-row>
<v-icon class="mx-2">
mdi-twitter
</v-icon>
<v-icon class="mx-2">
mdi-facebook
</v-icon>
<v-icon class="mx-2">
mdi-instagram
</v-icon>
</v-row>
</v-col>
</div>
</div>
<v-row class="d-flex justify-center mt-10">
<h2>
RELATED PRODUCT
</h2>
</v-row>
<v-row class="pt-5 pb-5">
<v-col
v-for="(item, i) in items"
:key="i"
cols="12"
md="3"
>
<v-hover
v-slot="{ hover }"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover }"
>
<v-card
:elevation="hover ? 16 : 2"
:class="{ 'on-hover': hover }"
class="mx-auto pa-2 ma-3"
max-width="280"
link
>
<div>
<v-img
:src="item.images"
height="250px"
cover
/>
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
</v-card-title>
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
layout: 'user',
data: () => {
return {
product: [],
slideIndex: 1,
items: [
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
}
]
}
},
mounted () {
this.showSlides(1)
},
created () {
this.getProduct()
},
methods: {
async getProduct () {
const resp = await this.$axios.get(`/products/detail/${this.$route.params.id}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.product = response.data))
.catch(function (error) {
console.log(error)
})
console.log(resp)
},
// css gallery function
plusSlides (n) {
this.showSlides(this.slideIndex += n)
},
currentSlide (n) {
this.showSlides(this.slideIndex = n)
},
showSlides (n) {
let i
const slides = document.getElementsByClassName('mySlides')
const dots = document.getElementsByClassName('demo')
if (n > slides.length) { this.slideIndex = 1 }
if (n < 1) { this.slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none'
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' active', '')
}
slides[this.slideIndex - 1].style.display = 'block'
dots[this.slideIndex - 1].className += ' active'
}
}
}
</script>
<style scope>
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
height:100%;
max-width:543,41px;
max-height:461,6px;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 12px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 100%;
height: 25%;
max-width:109px;
max-height:122px;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
.gallery-product {
margin-top: 40px;
display: flex;
flex-direction: row-reverse;
gap: 5px;
justify-content: flex-end;
}
.c2 {
display: flex;
flex-direction: column;
margin-right: 20px;
max-width: 91px;
gap: 10px;
}
.sub-container {
display: flex;
flex-direction: row;
gap: 20px;
}
</style>
plugins/formatTime.js
View file @ 48903f3a
......@@ -18,6 +18,21 @@ Vue.mixin({
keepToken () {
const TOKEN = localStorage.getItem('token')
this.$auth.$storage.setUniversal('token', TOKEN)
},
formatDateString (dateStr) {
const date = new Date(dateStr)
const options = { month: 'short', day: 'numeric', year: 'numeric' }
return date.toLocaleDateString('en-US', options)
},
formatDateTime (dateStr) {
const date = new Date(dateStr)
const day = date.getDate()
return day
},
formatMonthTime (dateStr) {
const dateObj = new Date(dateStr)
const monthName = dateObj.toLocaleString('en-US', { month: 'short' }).toUpperCase()
return monthName
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment