Browse Source

Hub basics and primary works on ModelS

master
monaxys 2 years ago
parent
commit
676e1032c4
  1. 25
      src/App.vue
  2. BIN
      src/assets/images/logo.png
  3. BIN
      src/assets/logo.png
  4. 4
      src/components/Button.vue
  5. 40
      src/components/Footer.vue
  6. 49
      src/components/Header.vue
  7. 35
      src/components/HelloWorld.vue
  8. 3
      src/pages/CyberTrack.vue
  9. 34
      src/pages/TeslaMode.vue
  10. 23
      src/pages/hub.vue
  11. 5
      src/scss/main.scss

25
src/App.vue

@ -1,18 +1,15 @@
<script setup> <script setup>
// This starter template is using Vue 3 <script setup> SFCs // This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Header from './components/Header.vue'; import TeslaMode from "./pages/TeslaMode.vue"
import HelloWorld from './components/HelloWorld.vue'; import hub from "./pages/hub.vue"
import Footer from './components/Footer.vue' import CyberTrack from "./pages/CyberTrack.vue"
</script> </script>
<template lang="pug"> <template lang="pug">
Header/ hub(v-if="curPage === 1" @switch="curPage=$event")/
TeslaMode(v-else-if="curPage === 2")/
.content CyberTrack(v-else)/
img(alt="Vue logo" src="./assets/logo.png")/
HelloWorld(msg="Hello Vue 3 + Vite")/
Footer/
</template> </template>
<style> <style>
@ -22,3 +19,13 @@ Header/
margin-top: 60px; margin-top: 60px;
} }
</style> </style>
<script>
export default {
name: "App",
data () {
return{
curPage: 1
}
}
}
</script>

BIN
src/assets/images/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

4
src/components/Button.vue

@ -0,0 +1,4 @@
<template lang="pug">
button.button
slot
</template>

40
src/components/Footer.vue

@ -1,4 +1,42 @@
<template lang="pug"> <template lang="pug">
footer.footer footer.footer
span copyright2022 .container
.footer__copyright Tesla &copy; {{ 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>

49
src/components/Header.vue

@ -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>

35
src/components/HelloWorld.vue

@ -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>

3
src/pages/CyberTrack.vue

@ -0,0 +1,3 @@
<template lang="pug">
h1 cyber
</template>

34
src/pages/TeslaMode.vue

@ -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>

23
src/pages/hub.vue

@ -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>

5
src/scss/main.scss

@ -2,3 +2,8 @@ body {
font-family: $main-font; font-family: $main-font;
background-color: $bg-color; background-color: $bg-color;
} }
.container{
width: 100%;
max-width: 1020px;
margin: 0 auto;
}

Loading…
Cancel
Save