Skip to content

V
VENT
Commit 781dcca3 authored by shuang's avatar shuang
Browse files
Options

adds address form

parent 4baa847c
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 80 deletions
frontend/src/App.vue
View file @ 781dcca3
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
</template> </template>
<script> <script>
// import bulma from 'bulma';
export default { export default {
} }
...@@ -23,6 +22,10 @@ export default { ...@@ -23,6 +22,10 @@ export default {
box-sizing: border-box; box-sizing: border-box;
font-family: "DIN 2014", sans-serif; font-family: "DIN 2014", sans-serif;
} }
body {
padding-top: 40px;
padding-bottom: 40px;
}
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
......
frontend/src/components/AddressForm.vue 0 → 100644
View file @ 781dcca3
<template>
<form>
<div class="field search-bar-container">
First Name*
<div class="control is-medium has-icons-right">
<input
class="input is-medium"
type="text"
>
</div>
</div>
<div class="field search-bar-container">
Last Name*
<div class="control is-medium has-icons-right">
<input
class="input is-medium"
type="text"
>
</div>
</div>
<div class="field search-bar-container">
Email*
<div class="control is-medium has-icons-right">
<input
class="input is-medium"
type="email"
placeholder="name@company.com"
>
</div>
</div>
<div class="form-foot">
<p>By continuing, you agree to our Terms and Conditions</p>
<button type="submit" class="button is-rounded is-black">Continue</button>
</div>
</form>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'addressform'
});
</script>
<style lang="scss" scoped>
.input {
border-radius: 4px;
padding: 12px;
line-height: 28px;
border: 2px transparent solid;
background: #edf0f2;
min-width: 200px;
width: 100%;
box-shadow: none;
margin-bottom: 30px;
&:hover {
border: 2px transparent solid;
}
&:focus {
outline: none;
border: 2px solid black;
box-shadow: none;
background: white;
}
}
.search-bar-container {
text-align: left;
width: 70%;
margin: auto;
color: #4c4c5a;
font-size: 14px;
text-transform: uppercase;
}
.form-foot {
width: 70%;
display: flex;
justify-content: space-between;
margin: auto;
.button {
padding: 0px 46px 0px 46px;
}
.button:hover {
background-color: #4c4c5a;
}
}
</style>
frontend/src/components/HelloWorld.vue deleted 100644 → 0
View file @ 4baa847c
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
props: {
msg: String,
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
frontend/src/router/index.ts
View file @ 781dcca3
...@@ -20,7 +20,7 @@ const routes = [ ...@@ -20,7 +20,7 @@ const routes = [
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}, },
{ {
path: 'address', path: '/address',
name: 'address', name: 'address',
component: Address component: Address
} }
......
frontend/src/views/Address.vue
View file @ 781dcca3
<template> <template>
<div class="home"> <div>
<img alt="Vue logo" src="../assets/logo.png"> <section class="section">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div class="container">
<h1 class="title">JOIN OUR B2B COMMUNITY TODAY</h1>
<h2 class="subtitle">
Want to join our exclusive B2B program and shop our fleet of brands at a discount starting at 20% off, and 25% off for Williams – Sonoma Home? The application form below takes just a minute, and you’ll receive a response within 2-3 business days.
</h2>
</div>
</section>
<div class="tabs is-centered">
<ul>
<li class="is-active"><a>Your Details</a></li>
<li><a>Business Details</a></li>
<li><a>Profile Details</a></li>
<li><a>Qualifying Documents</a></li>
</ul>
</div>
<addressform></addressform>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' import addressform from "@/components/AddressForm.vue";
export default {
export default {
name: 'home',
components: { components: {
HelloWorld addressform
}
} }
}
</script> </script>
<style lang="scss" scoped>
section {
top: 25%;
width: 70%;
margin: auto;
text-align: left;
}
.title {
font-size: 56px;
line-height: 1.3214285714;
text-align: left;
font-weight: normal;
margin-bottom: 5%;
}
.tabs {
width: 70%;
margin: auto;
margin-bottom: 20px;
}
</style>
\ No newline at end of file
frontend/src/views/Home.vue
View file @ 781dcca3
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' // import HelloWorld from '@/components/HelloWorld.vue'
export default { export default {
name: 'home', // name: 'home',
components: { // components: {
HelloWorld // HelloWorld
} // }
} }
</script> </script>
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