configuracion inicial del Front / Header, footer
This commit is contained in:
KIKIN
+22
-13
@@ -1,28 +1,37 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<Header />
|
||||
<router-view></router-view>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import Header from './components/Header'
|
||||
import Footer from './components/Footer'
|
||||
|
||||
import Vue from 'vue'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: 'app',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<footer id="footer">
|
||||
<div class="separador"></div>
|
||||
<div class="container p-3">
|
||||
<div class="cont-text-foo text-white text-center">
|
||||
<div class="d-flex justify-content-between flex-wrap">
|
||||
<div class="my-auto">
|
||||
<a href="#">
|
||||
<img src="../img/logo.png" alt="" style="height:50px;">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<h6 class="text-center mb-2"><b>CONTACTANOS</b></h6>
|
||||
<div class="d-flex">
|
||||
<font-awesome-icon icon="map-marker-alt" class="text-white mr-2 footer-icon" />
|
||||
<a href="https://www.google.com.mx/maps/place/Fes+Acatlan/@19.4839532,-99.2486563,17z/data=!3m1!4b1!4m5!3m4!1s0x85d2030fd8a9a8c1:0x1f9446a4f2a37e53!8m2!3d19.4839482!4d-99.2464676" target="_blank" class="text-white"><p>Ubicación</p></a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex my-2">
|
||||
<font-awesome-icon icon="phone-alt" class="text-white mr-2 footer-icon" />
|
||||
<p>Telefono</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<font-awesome-icon icon="envelope" class="text-white mr-2 footer-icon" />
|
||||
<p>Correo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<h6 class="mb-2"><b>INFORMACIÓN DEL SITIO</b></h6>
|
||||
<div class="d-inline-block">
|
||||
<a href="#" class="text-white"><p><b>Políticas de compra</b></p></a>
|
||||
<a href="#" class="text-white"><p class="my-2"><b>Manual de compra</b></p></a>
|
||||
<a href="#" class="text-white"><p><b>Aviso de privacidad</b></p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: #fff;" class="my-3">
|
||||
<p>
|
||||
Hecho en México, todos los derechos reservados 2020.
|
||||
<br />
|
||||
Esta página puede ser reproducida con fines no lucrativos,
|
||||
siempre y cuando no se mutile, se cite la fuente
|
||||
<br />
|
||||
completa y su dirección electrónica. De otra forma, requiere
|
||||
permiso previo por escrito de la institución.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
/* #footer {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
} */
|
||||
.separador {
|
||||
background-color: #bb8800;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.cont-text-foo {
|
||||
font-size: 10px;
|
||||
}
|
||||
footer {
|
||||
background-color: #1b3d70;
|
||||
}
|
||||
.footer-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<header id="iniLetter" class="header-h">
|
||||
|
||||
<div class="container py-3 py-md-2 d-flex justify-content-between align-items-center">
|
||||
|
||||
<div class="mr-5 mr-md-0">
|
||||
<a href="https://www.unam.mx/">
|
||||
<img
|
||||
src="../img/Logo-UNAM.png"
|
||||
class="img-fluid"
|
||||
alt="Logo UNAM"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="http://www.acatlan.unam.mx/">
|
||||
<img
|
||||
src="../img/logo_fesa.png"
|
||||
class="img-fluid"
|
||||
alt="Logo Fes Acatlán"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="header-f" >
|
||||
<div class="container d-flex py-2 align-items-center justify-content-between">
|
||||
<div>
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
|
||||
<font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.header-h {
|
||||
/* background: #1b3d70; */
|
||||
background: #1b3d70;
|
||||
}
|
||||
|
||||
.header-f {
|
||||
background-color: #bb8800;
|
||||
}
|
||||
.cart-icon-custom-properties {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<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-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>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 779 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
+35
@@ -1,8 +1,43 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './routes'
|
||||
|
||||
import {library} from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faUserSecret,
|
||||
faUser,
|
||||
faLock,
|
||||
faGraduationCap,
|
||||
faExternalLinkAlt,
|
||||
faKey,
|
||||
faExclamationCircle,
|
||||
faEnvelope,
|
||||
faShoppingCart,
|
||||
faTrash,
|
||||
faMapMarkerAlt,
|
||||
faPhoneAlt
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
||||
|
||||
library.add(faUserSecret)
|
||||
library.add(faUser)
|
||||
library.add(faLock)
|
||||
library.add(faExternalLinkAlt)
|
||||
library.add(faGraduationCap)
|
||||
library.add(faExclamationCircle)
|
||||
library.add(faKey)
|
||||
library.add(faEnvelope)
|
||||
library.add(faShoppingCart)
|
||||
library.add(faTrash)
|
||||
library.add(faMapMarkerAlt)
|
||||
library.add(faPhoneAlt)
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// el: '#app',
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router,
|
||||
}).$mount('#app')
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import Home from './view/Home.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'root',
|
||||
redirect: 'home'
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
component: Home,
|
||||
name: 'home'
|
||||
},
|
||||
]
|
||||
|
||||
Vue.use(VueRouter)
|
||||
/* Produccción */
|
||||
// const router = new VueRouter({mode: 'history', routes})
|
||||
/* Pruebas */
|
||||
const router = new VueRouter({ routes })
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="container my-5">
|
||||
<h1>Hola</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user