Revert App.vue, add Funnel1.vue.

This commit is contained in:
bmauger 2021-10-06 09:32:58 -04:00
parent ebc75c4214
commit 53530ca91e
4 changed files with 63 additions and 37 deletions

View file

@ -14,7 +14,7 @@
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="Funnel1"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

View file

@ -1,45 +1,26 @@
<template> <template>
<div class="container-fluid"> <HeaderNav/>
<div class="row"> <div class="container">
<div class="col my-3 d-flex justify-content-center">
<vehicleImage/>
</div>
</div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p> <HelloWorld msg="VueJS with Bootstrap"/>
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
</div>
</div>
<div class="row">
<div class="col">
<buttonFunnel/>
</div>
</div>
<div class="row mt-5">
<div class="col">
<buttonPrimary/>
<buttonSecondary/>
<textInput/>
</div> </div>
</div> </div>
</div> </div>
<Colors/>
</template> </template>
<script> <script>
import buttonPrimary from './components/buttons/buttonPrimary'; import HelloWorld from './components/HelloWorld.vue';
import buttonSecondary from './components/buttons/buttonSecondary'; import HeaderNav from './components/HeaderNav';
import buttonFunnel from './components/buttons/buttonFunnel'; import Colors from './components/Colors';
import textInput from './components/forms/textInput';
import vehicleImage from './components/vehicleImage'; export default {
export default { name: 'App',
name: 'App', components: {
components: { HelloWorld,
buttonPrimary, HeaderNav,
buttonSecondary, Colors
buttonFunnel,
textInput,
vehicleImage
}
} }
}
</script> </script>

45
src/Funnel1.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<div class="container-fluid">
<div class="row">
<div class="col my-3 d-flex justify-content-center">
<vehicleImage/>
</div>
</div>
<div class="row">
<div class="col">
<p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
</div>
</div>
<div class="row">
<div class="col">
<buttonFunnel/>
</div>
</div>
<div class="row mt-5">
<div class="col">
<buttonPrimary/>
<buttonSecondary/>
<textInput/>
</div>
</div>
</div>
</template>
<script>
import buttonPrimary from './components/buttons/buttonPrimary';
import buttonSecondary from './components/buttons/buttonSecondary';
import buttonFunnel from './components/buttons/buttonFunnel';
import textInput from './components/forms/textInput';
import vehicleImage from './components/vehicleImage';
export default {
name: 'App',
components: {
buttonPrimary,
buttonSecondary,
buttonFunnel,
textInput,
vehicleImage
}
}
</script>

View file

@ -1,5 +1,5 @@
import { createApp } from "vue"; import { createApp } from "vue";
import App from "./App.vue"; import Funnel1 from "./Funnel1.vue";
//Bootstrap JavaScript //Bootstrap JavaScript
import "../node_modules/bootstrap/dist/js/bootstrap.js"; import "../node_modules/bootstrap/dist/js/bootstrap.js";
@ -7,4 +7,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js";
//Get Bootstrap and Custom Styles //Get Bootstrap and Custom Styles
import "./assets/scss/custom.scss"; import "./assets/scss/custom.scss";
createApp(App).mount("#app") createApp(Funnel1).mount("#Funnel1");