Skip to content

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

fix css home-page

parent f44b6471
Hide whitespace changes
Inline Side-by-side
Showing with 280 additions and 44 deletions
components/FooterBar.vue
View file @ b7120657
<!-- eslint-disable vue/no-parsing-error -->
<template>
<v-footer class="footer-bar mt-12 flex-wrap" dark padless>
<v-row class="d-flex justify-space-between align-center">
<v-col
cols="12"
md="3"
>
<v-img
width="153px"
src="https://d-themes.com/html/riode/images/logo-footer.png"
/>
</v-col>
<div class="flex-column">
<h3>Subscribe to our Newsletter</h3>
<h4>Get all the latest information, Sales and Offers.</h4>
</div>
<v-col
cols="12"
md="2"
>
<v-text-field label="email address here ..."></v-text-field>
</v-col>
<v-btn color="primary">SUBSCRIBE</v-btn>
</v-row>
<v-container class="footer-top">
<v-row class="d-flex justify-space-between align-center">
<v-col
cols="12"
md="3"
>
<v-img
width="153px"
src="https://d-themes.com/html/riode/images/logo-footer.png"
/>
</v-col>
<div class="flex-column">
<h3>Subscribe to our Newsletter</h3>
<h4>Get all the latest information, Sales and Offers.</h4>
</div>
<v-col
cols="12"
md="2"
>
<v-text-field label="email address here ..." />
</v-col>
<v-btn color="primary">
SUBSCRIBE
</v-btn>
</v-row>
</v-container>
<v-container class="divider-mid">
<v-divider />
</v-container>
<v-container class="footer-mid">
<v-row class="d-flex align-center">
<v-col class="d-flex-column" cols="3">
<h4 class="title">
Contact Info
</h4>
<div class="footer-content d-flex-column">
<div>PHONE: 012345678</div>
<div>EMAIL: mail@riode.com</div>
<div>PHONE: 123 StreetLand, City, England</div>
<div>WORKINGDAY / HOURS</div>
<div>Mon-Sun / 9:00 AM - 8:00 PM</div>
</div>
</v-col>
<v-col class="content-mid d-flex-column" cols="3">
<h4 class="title">
My Account
</h4>
<div class="footer-content d-flex-column">
<div>About Us</div>
<div>Order History</div>
<div>Returns</div>
<div>Custom Service</div>
<div>Terms & Condition</div>
</div>
</v-col>
<v-col class="d-flex-column" cols="3">
<h4 class="title">
Contact Info
</h4>
<div class="footer-content d-flex-column">
<div>Sign in</div>
<div>View Cart</div>
<div>My Wishlist</div>
<div>Track My Order</div>
<div>Help</div>
</div>
</v-col>
<v-col class="d-flex-column" cols="3">
<h4 class="title">
Instagram
</h4>
<div class="footer-content d-flex-column">
<v-img src="https://d-themes.com/html/riode/images/demos/demo1/banners/banner1.jpg" />
</div>
</v-col>
</v-row>
</v-container>
<v-container class="footer-bottom">
<v-divider class="bottom-hr" />
<v-row class="bottom-line d-flex-row justify-space-between">
<div>
<v-img src="https://d-themes.com/html/riode/images/payment.png" />
</div>
<div>
<span>Riode eCommerce © 2022. All Rights Reserved</span>
</div>
<div>
<v-btn
color="black"
fab
x-small
dark
outlined
>
<v-icon>mdi-facebook</v-icon>
</v-btn>
<v-btn
color="black"
fab
x-small
dark
outlined
>
<v-icon>mdi-twitter</v-icon>
</v-btn>
<v-btn
color="black"
fab
x-small
dark
outlined
>
<v-icon>mdi-instagram</v-icon>
</v-btn>
</div>
</v-row>
</v-container>
</v-footer>
</template>
......@@ -39,6 +134,44 @@ export default {
<style>
.footer-bar {
min-height: 350px;
padding: 4rem;
padding-top: 0px;
}
.container {
max-width: 1185px;
}
.divider-mid {
margin-top: 0px;
}
.footer-mid {
margin-top: 0px;
}
.footer-content {
gap: 10px;
display: flex;
flex-direction: column;
color: #999;
font-size: 15px;
}
.title {
margin-bottom:10px;
}
.footer-bottom {
margin-bottom: 20px;
}
.bottom-hr {
margin-bottom: 40px;
}
.bottom-line {
padding:15px;
}
.content-mid {
align-items: center !important;
}
@media only screen and (max-width: 500px) {
.content-mid {
display:flex;
flex-direction: column;
align-items: flex-start !important;
}
}
</style>
components/user/NavBar.vue
View file @ b7120657
......@@ -20,16 +20,19 @@
<span>
Pages
</span>
<v-icon>mdi-chevron-down</v-icon>
</div>
<div class="navbar-item">
<span>
Blogs
</span>
<v-icon>mdi-chevron-down</v-icon>
</div>
<div class="navbar-item">
<span>
About
</span>
<v-icon>mdi-chevron-down</v-icon>
</div>
</div>
<div class="d-flex align-center none-tag">
......@@ -121,9 +124,10 @@ export default {
.navbar-left {
width: 50%;
display: flex;
justify-content: space-between;
/* justify-content: space-between; */
padding-left: 0;
padding-right: 0;
gap:15px;
}
.dropdown {
position: relative;
......
layouts/user.vue
View file @ b7120657
......@@ -2,6 +2,21 @@
<v-app>
<UserHeader ref="child" />
<Nuxt />
<div class="badge-slide">
<v-btn elevation="2" color="black" tile class="badge">
<a href="#our-categories"><v-icon> mdi-home</v-icon></a>
</v-btn>
<v-btn elevation="2" color="black" tile class="badge-1">
<a href="#"><v-icon> mdi-information</v-icon></a>
</v-btn>
<v-btn elevation="2" color="black" tile class="badge-2">
<a href="#"><v-icon> mdi-star</v-icon></a>
</v-btn>
<v-btn elevation="2" color="primary" tile class="badge-3">
<a href="#"><v-icon> mdi-cart</v-icon></a>
</v-btn>
<a href="#" class="scroll-to-top-btn"><v-icon> mdi-arrow-up-bold</v-icon></a>
</div>
<FooterBar />
</v-app>
</template>
......@@ -16,6 +31,9 @@ export default {
FooterBar
},
components: { FooterBar },
mounted () {
this.scrollToTop()
},
created () {
this.changeColor()
},
......@@ -23,6 +41,26 @@ export default {
changeColor () {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
return true
},
scrollToTop () {
window.addEventListener('scroll', function () {
const scrollPos = window.scrollY
const scrollToTopBtn = document.querySelector('.scroll-to-top-btn')
if (scrollPos > 500) {
scrollToTopBtn.classList.add('active')
} else {
scrollToTopBtn.classList.remove('active')
}
})
document.querySelector('.scroll-to-top-btn').addEventListener('click', function (e) {
e.preventDefault()
window.scrollTo({
top: 0,
behavior: 'smooth'
})
})
}
}
}
......@@ -32,4 +70,64 @@ export default {
body{
font-family: monospace;
}
.scroll-to-top-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
background-color: #ffffff;
border-radius: 50%;
text-align: center;
font-size: 24px;
line-height: 50px;
z-index: 99;
}
.scroll-to-top-btn:hover {
background-color: #1b92cd;
}
.scroll-to-top-btn i {
transform: translateY(-2px);
}
.scroll-to-top-btn.active {
display: block;
}
.badge {
position: fixed;
right: 0;
top: 220px;
width:40px !important;
min-width: 40px !important;
}
.badge-1 {
position: fixed;
right: 0;
top: 260px;
width:40px !important;
min-width: 40px !important;
}
.badge-2 {
position: fixed;
right: 0;
top: 300px;
width:40px !important;
min-width: 40px !important;
}
.badge-3 {
position: fixed;
right: 0;
top: 340px;
width:40px !important;
min-width: 40px !important;
}
@media only screen and (max-width: 768px) {
.badge-slide {
display:none;
}
}
</style>
pages/home-page/categories/index.vue
View file @ b7120657
......@@ -39,20 +39,6 @@
height="250px"
cover
/>
<!-- <v-card-actions v-if="hover" class="d-flex align-center justify-center" style="position: absolute">
<v-btn
v-for="(icon, index) in icons"
:key="index"
:class="{ 'show-btns': hover }"
icon
>
<v-icon
:class="{ 'show-btns': hover }"
>
{{ icon }}
</v-icon>
</v-btn>
</v-card-actions> -->
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
......@@ -60,7 +46,7 @@
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
<v-card-actions class="d-flex justify-center">
<v-card-actions class="d-flex justify-center card-actions">
<v-btn
:class="{ 'show-btns': hover }"
icon
......
pages/home-page/index.vue
View file @ b7120657
......@@ -5,7 +5,7 @@
<!-- categories -->
<v-container>
<div class="d-flex justify-center align-center mt-12">
<h2 class="sub-title mb-5">
<h2 id="our-categories" class="sub-title mb-5">
Our Categories
</h2>
</div>
......@@ -81,10 +81,11 @@
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
<v-card-actions class="d-flex justify-center">
<v-card-actions class="d-flex justify-center card-actions ">
<v-btn
:class="{ 'show-btns': hover }"
icon
style="margin-left:8px"
>
<v-icon
:class="{ 'show-btns': hover }"
......@@ -129,7 +130,7 @@
v-for="(item, i) in features"
:key="i"
>
<!-- <v-carousel
<!-- <v-carousel
hide-delimiters
:slides-per-page="4"
:center-mode="true"
......@@ -160,7 +161,7 @@
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
<v-card-actions class="d-flex justify-center">
<v-card-actions class="d-flex justify-center card-actions ">
<v-btn
:class="{ 'show-btns': hover }"
icon
......@@ -196,7 +197,7 @@
</v-hover>
<!-- </v-carousel-item>
</v-carousel> -->
</v-col>
</v-col>
</v-row>
</v-container>
<v-container>
......@@ -423,4 +424,18 @@ export default {
.card-4 {
overflow: hidden;
}
.card-actions {
display: none !important;
}
.v-card:hover .card-actions {
display: flex !important;
flex-direction: column;
gap:5px;
top:0;
right:0;
position: absolute;
}
.card-actions > .v-btn {
background-color:#ffffff;
}
</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