Skip to content

K
kiaisoft_tuananh_nuxt
Commit 5a4c369d authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

6-4-23

parent 3c1d445d
Hide whitespace changes
Inline Side-by-side
Showing with 353 additions and 6 deletions
components/Navbar.vue
View file @ 5a4c369d
...@@ -36,6 +36,13 @@ ...@@ -36,6 +36,13 @@
mdi-newspaper mdi-newspaper
</v-icon> </v-icon>
</v-btn> </v-btn>
<v-btn to="/home-page">
<span>HOME PAGE</span>
<v-icon dense>
mdi-home
</v-icon>
</v-btn>
</v-toolbar-title> </v-toolbar-title>
<v-spacer /> <v-spacer />
...@@ -80,6 +87,9 @@ ...@@ -80,6 +87,9 @@
</template> </template>
<script> <script>
export default { export default {
mounted () {
console.log('123')
},
methods: { methods: {
async logout () { async logout () {
try { try {
......
components/user/Header.vue
View file @ 5a4c369d
...@@ -43,6 +43,12 @@ ...@@ -43,6 +43,12 @@
</div> </div>
</div> </div>
<v-divider vertical /> <v-divider vertical />
<div class="header-info" @click="changeColor">
<v-icon small>
mdi-moon-waning-crescent
</v-icon>
<span>night</span>
</div>
<div class="header-info"> <div class="header-info">
<v-icon small> <v-icon small>
mdi-map-marker-outline mdi-map-marker-outline
...@@ -373,6 +379,10 @@ export default { ...@@ -373,6 +379,10 @@ export default {
console.log('abc') console.log('abc')
this.getCardProducts() this.getCardProducts()
}) })
},
changeColor () {
console.log('abcd')
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
} }
} }
} }
...@@ -546,4 +556,17 @@ b { ...@@ -546,4 +556,17 @@ b {
width: 70px !important; width: 70px !important;
min-width: 70px; min-width: 70px;
} }
.header-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
@media only screen and (max-width: 768px) {
.header-middle-content {
display: flex;
flex-direction: column;
}
.header-middle-right {
margin-top: 10px;
width: 95%;
}
}
</style> </style>
pages/home-page/categories/_id/index.vue
View file @ 5a4c369d
...@@ -42,13 +42,15 @@ ...@@ -42,13 +42,15 @@
link link
> >
<div> <div>
<v-img <router-link :to="`/home-page/products/${item.id}`">
:src="item.images[0]" <v-img
height="250px" :src="item.images[0]"
cover height="250px"
/> cover
/>
</router-link>
</div> </div>
<v-card-title class="d-flex justify-center"> <v-card-title class="d-flex justify-center" style="color: black">
{{ item.name }} {{ item.name }}
</v-card-title> </v-card-title>
<v-card-subtitle class="d-flex justify-center"> <v-card-subtitle class="d-flex justify-center">
......
pages/home-page/products/_id/index.vue 0 → 100644
View file @ 5a4c369d
<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://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
2 / 4
</div>
<img src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
3 / 4
</div>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
4 / 4
</div>
<img src="https://www.w3schools.com/howto/img_lights.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://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.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-container>
</template>
<script>
export default {
layout: 'user',
data: () => {
return {
product: [],
slideIndex: 1
}
},
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>
pages/login.vue
View file @ 5a4c369d
...@@ -157,4 +157,9 @@ export default { ...@@ -157,4 +157,9 @@ export default {
border-radius: 1rem; border-radius: 1rem;
} }
@media only screen and (max-width: 768px) {
.login-form{
width: 80%;
}
}
</style> </style>
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