monaxys
2 years ago
11 changed files with 160 additions and 58 deletions
After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,4 @@ |
|||||||
|
<template lang="pug"> |
||||||
|
button.button |
||||||
|
slot |
||||||
|
</template> |
@ -1,4 +1,42 @@ |
|||||||
<template lang="pug"> |
<template lang="pug"> |
||||||
footer.footer |
footer.footer |
||||||
span copyright2022 |
.container |
||||||
|
.footer__copyright Tesla © {{ year }} |
||||||
|
|
||||||
|
nav.footer-nav |
||||||
|
a(href="#") Privacy & Legal |
||||||
|
a(href="#") Contact |
||||||
|
a(href="#") Careers |
||||||
|
a(href="#") Get Newsletter |
||||||
|
a(href="#") Locations |
||||||
</template> |
</template> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.footer{ |
||||||
|
background: #f0f0f0; |
||||||
|
height: 115px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.container{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
&-nav{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Footer', |
||||||
|
setup() { |
||||||
|
return { year: new Date().getFullYear() }; |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
@ -1,17 +1,40 @@ |
|||||||
<template lang="pug"> |
<template lang="pug"> |
||||||
header.header |
header.header.container |
||||||
span.header__logo logo |
h1 |
||||||
nav.header__nav |
img.logo__image(src="../assets/images/logo.png" alt="Tesla") |
||||||
a(href="#") link |
nav.header-nav |
||||||
|
a.header-nav__item(href="#") Test Drive |
||||||
|
a.header-nav__item(href="#") Contacts |
||||||
|
a.header-nav__item(href="#") Shop |
||||||
</template> |
</template> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.header{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.logo{ |
||||||
|
&__image{ |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.header-nav{ |
||||||
|
&__item { |
||||||
|
margin: 0 8px; |
||||||
|
text-transform: uppercase; |
||||||
|
font-family: 'Montserrat'; |
||||||
|
font-style: normal; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 22px; |
||||||
|
line-height: 27px; |
||||||
|
text-decoration: none; |
||||||
|
letter-spacing: 0.025em; |
||||||
|
border-bottom: 2px solid transparent; |
||||||
|
color: #000000; |
||||||
|
|
||||||
<style lang="scss"> |
&:hover{ |
||||||
.header { |
border-color: black; |
||||||
background-color: $primary-color; |
} |
||||||
|
} |
||||||
&__nav { |
} |
||||||
display: inline-block; |
} |
||||||
float: right; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
</style> |
||||||
|
@ -1,35 +0,0 @@ |
|||||||
<script setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
|
|
||||||
defineProps({ |
|
||||||
msg: String |
|
||||||
}) |
|
||||||
|
|
||||||
const count = ref(0) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template lang="pug"> |
|
||||||
h1 {{ msg }} |
|
||||||
|
|
||||||
p |
|
||||||
| Recommended IDE setup: |
|
||||||
a(href="https://code.visualstudio.com/" target="_blank") VS Code |
|
||||||
| + |
|
||||||
a(href="https://github.com/johnsoncodehk/volar" target="_blank") Volar |
|
||||||
|
|
||||||
p |
|
||||||
a(href="https://vitejs.dev/guide/features.html" target="_blank") |
|
||||||
| Vite Documentation |
|
||||||
| | |
|
||||||
| |
|
||||||
a(href="https://v3.vuejs.org/" target="_blank") Vue 3 Documentation |
|
||||||
|
|
||||||
button(type="button" @click="count++") count is: {{ count }} |
|
||||||
p Edit #[code components/HelloWorld.vue] to test hot module replacement. |
|
||||||
</template> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
a { |
|
||||||
color: #42b983; |
|
||||||
} |
|
||||||
</style> |
|
@ -0,0 +1,3 @@ |
|||||||
|
<template lang="pug"> |
||||||
|
h1 cyber |
||||||
|
</template> |
@ -0,0 +1,34 @@ |
|||||||
|
<template lang="pug"> |
||||||
|
.tesla-mode |
||||||
|
Header.tesla-mode__header/ |
||||||
|
.intro |
||||||
|
Footer/ |
||||||
|
h1 modelS |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Header from "../components/Header.vue" |
||||||
|
import Footer from "../components/Footer.vue" |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "TeslaMode", |
||||||
|
components: { |
||||||
|
Header, |
||||||
|
Footer, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss"> |
||||||
|
.tesla-mode{ |
||||||
|
&__header{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.intro{ |
||||||
|
background: wheat; |
||||||
|
min-height: 100vh; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,23 @@ |
|||||||
|
<template lang="pug"> |
||||||
|
.hub |
||||||
|
Button.hub__button(@click="openPage(2)") models |
||||||
|
Button.hub__button(@click="openPage(3)") cyber |
||||||
|
</template> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
|
<script setup> |
||||||
|
import Button from "../components/Button.vue" |
||||||
|
</script> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "hub", |
||||||
|
emits: ["switch"], |
||||||
|
methods: { |
||||||
|
openPage(num) { |
||||||
|
this.$emit("switch", num) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
Loading…
Reference in new issue