Panel admin
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -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>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="row divMaster header cl-12 azulUnam">
|
||||
<div class="container" style="margin-top: 2rem;">
|
||||
<h2>Administrador</h2>
|
||||
<h5>ASINEA 2020</h5>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h2,h3,h4,h5{
|
||||
color: white;
|
||||
}
|
||||
.divMaster {
|
||||
height: 10em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.azulUnam {
|
||||
background-color: #1e3c70;
|
||||
}
|
||||
.sizeImg {
|
||||
height: 5rem;
|
||||
}
|
||||
.logo_acatlan_resp {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.logo_acatlan,
|
||||
.logo_unam {
|
||||
display: none !important;
|
||||
}
|
||||
.logo_acatlan_resp {
|
||||
display: block !important;
|
||||
}
|
||||
.logo_acatlan_resp a img {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1
-2
@@ -3,11 +3,10 @@ import App from "./App.vue";
|
||||
import VueRouter from "vue-router";
|
||||
import { routes } from "./routes";
|
||||
|
||||
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
|
||||
import { BootstrapVue } from 'bootstrap-vue'
|
||||
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(IconsPlugin)
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
||||
+3
-1
@@ -1,10 +1,12 @@
|
||||
import login from "./view/login.vue";
|
||||
import registro from "./view/registro.vue";
|
||||
import usuario from "./view/usuario.vue";
|
||||
import panelAdmin from "./view/panelAdmin.vue";
|
||||
|
||||
|
||||
export const routes = [
|
||||
{ path: "/", component: login, name: "Login" },
|
||||
{ path: "/registro", component: registro, name: "Registro" },
|
||||
{ path: "/usuario", component: usuario, name: "Usuario" }
|
||||
{ path: "/usuario", component: usuario, name: "Usuario" },
|
||||
{ path: "/admin", component: panelAdmin, name: "Admin" }
|
||||
];
|
||||
|
||||
+305
-284
@@ -2,35 +2,56 @@
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; " src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> <router-view></router-view>
|
||||
|
||||
<!--<div ><div ><iframe class="banner" frameborder="0" src="https://view.genial.ly/5e879acc5870c50e327954d1" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
|
||||
-->
|
||||
<div class="wrapper fadeInDown">
|
||||
<div id="formContent">
|
||||
<!-- Tabs Titles -->
|
||||
<div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; " src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
|
||||
|
||||
<div class="wrapper fadeInDown">
|
||||
<div id="formContent">
|
||||
|
||||
<!-- Icon -->
|
||||
<div class="fadeIn first">
|
||||
<h1>Iniciar Sesión</h1>
|
||||
</div>
|
||||
<div class="fadeIn first">
|
||||
<h1>Iniciar Sesión</h1>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form>
|
||||
<input type="text" id="login" class="fadeIn second" name="login" placeholder="Correo">
|
||||
<input type="password" id="password" class="fadeIn third" name="login" placeholder="Contraseña">
|
||||
<input type="submit" class="fadeIn fourth" value="Log In">
|
||||
</form>
|
||||
<form>
|
||||
<input type="text" id="login" class="fadeIn second" name="login" placeholder="Correo">
|
||||
<input type="password" id="password" class="fadeIn third" name="login" placeholder="Contraseña">
|
||||
<input type="submit" class="fadeIn fourth" value="Log In">
|
||||
</form>
|
||||
|
||||
<!-- Remind Passowrd -->
|
||||
<div id="formFooter">
|
||||
<a class="underlineHover" href="#">Registrate</a> <br/>
|
||||
<a class="underlineHover" href="#">¿ Olvidaste tu Contraseña ?</a>
|
||||
</div>
|
||||
<div id="formFooter">
|
||||
<a class="underlineHover" href="#">Registrate</a> <br/>
|
||||
<a class="underlineHover" href="#" v-b-modal.enviarPass >¿ Olvidaste tu Contraseña ?</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<b-modal
|
||||
id="enviarPass"
|
||||
ref="modal"
|
||||
title="Enviar correo con constraseña nueva"
|
||||
@show="resetModal"
|
||||
@hidden="resetModal"
|
||||
@ok="handleOk"
|
||||
hide-footer
|
||||
>
|
||||
<form ref="form" @submit.stop.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
:state="nameState"
|
||||
label="Correo"
|
||||
label-for="name-input"
|
||||
invalid-feedback="Es necesario el correo"
|
||||
>
|
||||
<b-form-input
|
||||
id="name-input"
|
||||
v-model="name"
|
||||
:state="nameState"
|
||||
required
|
||||
style="width: 100%; x"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</form>
|
||||
<b-button class="btn btn-outline-danger" @click="$bvModal.hide('enviarPass')">Cancelar</b-button>
|
||||
<b-button class="btn btn-outline-success float-right" @click="$bvModal.hide('enviarPass')" >Enviar</b-button>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -45,275 +66,275 @@ export default {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.banner{
|
||||
position: realtive;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
h1{
|
||||
margin-top:1.5rem;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
html {
|
||||
background-color: #56baed;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #92badd;
|
||||
display:inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display:inline-block;
|
||||
margin: 40px 8px 10px 8px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* STRUCTURE */
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#formContent {
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#formFooter {
|
||||
background-color: #f6f6f6;
|
||||
border-top: 1px solid #dce8f1;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 0 0 10px 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABS */
|
||||
|
||||
h2.inactive {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
h2.active {
|
||||
color: #0d0d0d;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FORM TYPOGRAPHY*/
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #56baed;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 80px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin: 5px 20px 40px 20px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
|
||||
background-color: #39ace7;
|
||||
}
|
||||
|
||||
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
|
||||
-moz-transform: scale(0.95);
|
||||
-webkit-transform: scale(0.95);
|
||||
-o-transform: scale(0.95);
|
||||
-ms-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
background-color: #f6f6f6;
|
||||
border: none;
|
||||
color: #0d0d0d;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 5px;
|
||||
width: 85%;
|
||||
border: 2px solid #f6f6f6;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
input[type=text]:placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
/* Simple CSS3 Fade-in-down Animation */
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
.banner{
|
||||
position: realtive;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
h1{
|
||||
margin-top:1.5rem;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
html {
|
||||
background-color: #56baed;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
a {
|
||||
color: #92badd;
|
||||
display:inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
opacity:0;
|
||||
-webkit-animation:fadeIn ease-in 1;
|
||||
-moz-animation:fadeIn ease-in 1;
|
||||
animation:fadeIn ease-in 1;
|
||||
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
|
||||
-webkit-animation-duration:1s;
|
||||
-moz-animation-duration:1s;
|
||||
animation-duration:1s;
|
||||
}
|
||||
|
||||
.fadeIn.first {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
-moz-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.fadeIn.second {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
-moz-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.fadeIn.third {
|
||||
-webkit-animation-delay: 0.8s;
|
||||
-moz-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.fadeIn.fourth {
|
||||
-webkit-animation-delay: 1s;
|
||||
-moz-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
.underlineHover:after {
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #56baed;
|
||||
content: "";
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.underlineHover:hover {
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.underlineHover:hover:after{
|
||||
width: 100%;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display:inline-block;
|
||||
margin: 40px 8px 10px 8px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* OTHERS */
|
||||
/* STRUCTURE */
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#icon {
|
||||
width:60%;
|
||||
}
|
||||
#formContent {
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#formFooter {
|
||||
background-color: #f6f6f6;
|
||||
border-top: 1px solid #dce8f1;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 0 0 10px 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABS */
|
||||
|
||||
h2.inactive {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
h2.active {
|
||||
color: #0d0d0d;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FORM TYPOGRAPHY*/
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #56baed;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 80px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin: 5px 20px 40px 20px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
|
||||
background-color: #39ace7;
|
||||
}
|
||||
|
||||
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
|
||||
-moz-transform: scale(0.95);
|
||||
-webkit-transform: scale(0.95);
|
||||
-o-transform: scale(0.95);
|
||||
-ms-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
background-color: #f6f6f6;
|
||||
border: none;
|
||||
color: #0d0d0d;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 5px;
|
||||
width: 85%;
|
||||
border: 2px solid #f6f6f6;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
input[type=text]:placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
/* Simple CSS3 Fade-in-down Animation */
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
|
||||
.fadeIn {
|
||||
opacity:0;
|
||||
-webkit-animation:fadeIn ease-in 1;
|
||||
-moz-animation:fadeIn ease-in 1;
|
||||
animation:fadeIn ease-in 1;
|
||||
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
|
||||
-webkit-animation-duration:1s;
|
||||
-moz-animation-duration:1s;
|
||||
animation-duration:1s;
|
||||
}
|
||||
|
||||
.fadeIn.first {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
-moz-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.fadeIn.second {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
-moz-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.fadeIn.third {
|
||||
-webkit-animation-delay: 0.8s;
|
||||
-moz-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.fadeIn.fourth {
|
||||
-webkit-animation-delay: 1s;
|
||||
-moz-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
.underlineHover:after {
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #56baed;
|
||||
content: "";
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.underlineHover:hover {
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.underlineHover:hover:after{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* OTHERS */
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#icon {
|
||||
width:60%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,543 @@
|
||||
<template>
|
||||
<div >
|
||||
<Header />
|
||||
<div class="row">
|
||||
<div style="height: 50%; background-color: #334FA1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper fadeInDown">
|
||||
<div id="formContent">
|
||||
<div class="container principal">
|
||||
|
||||
<b-tabs content-class="mt-5">
|
||||
<b-tab title="Enviar Ficha" active>
|
||||
<form>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Nombre</th>
|
||||
<th scope="col">Apellido Paterno</th>
|
||||
<th scope="col">Apellido Materno</th>
|
||||
<th scope="col">Correo</th>
|
||||
<th scope="col">Comunidad</th>
|
||||
<th scope="col">Pago total</th>
|
||||
<th scope="col">Enviar Ficha</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in enviar" v-bind:key="item.idPersona">
|
||||
<th scope="row">{{item.number}}</th>
|
||||
<td>{{item.nombre}}</td>
|
||||
<td>{{item.apellidoP}}</td>
|
||||
<td>{{item.apellidoM}}</td>
|
||||
<td>{{item.correo}}</td>
|
||||
<td>{{item.comunidad}}</td>
|
||||
<td>{{item.pago}}</td>
|
||||
<td ><button type="button" class="btn btn-outline-success" v-b-modal.fichaDeposito >Enviar ficha</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<input type="submit" class="fadeIn fourth" value="Descargar">
|
||||
</form>
|
||||
</b-tab>
|
||||
|
||||
<b-tab title="Pendientes por pagar">
|
||||
<form >
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Nombre</th>
|
||||
<th scope="col">Apellido Paterno</th>
|
||||
<th scope="col">Apellido Materno</th>
|
||||
<th scope="col">Correo</th>
|
||||
<th scope="col">Comunidad</th>
|
||||
<th scope="col">Pago total</th>
|
||||
<th scope="col">Fecha de envio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in pendientes" v-bind:key="item.idPersona">
|
||||
<th scope="row">{{item.number}}</th>
|
||||
<td>{{item.nombre}}</td>
|
||||
<td>{{item.apellidoP}}</td>
|
||||
<td>{{item.apellidoM}}</td>
|
||||
<td>{{item.correo}}</td>
|
||||
<td>{{item.comunidad}}</td>
|
||||
<td>{{item.pago}}</td>
|
||||
<td >{{item.fecha}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<input type="submit" class="fadeIn fourth" value="Descargar">
|
||||
</form>
|
||||
</b-tab>
|
||||
<b-tab title="Revisar Ficha" >
|
||||
<form >
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Nombre</th>
|
||||
<th scope="col">Apellido Paterno</th>
|
||||
<th scope="col">Apellido Materno</th>
|
||||
<th scope="col">Correo</th>
|
||||
<th scope="col">Comunidad</th>
|
||||
<th scope="col">Pago total</th>
|
||||
<th scope="col">Abrir pago</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in revisar" v-bind:key="item.idPersona">
|
||||
<th scope="row">{{item.number}}</th>
|
||||
<td>{{item.nombre}}</td>
|
||||
<td>{{item.apellidoP}}</td>
|
||||
<td>{{item.apellidoM}}</td>
|
||||
<td>{{item.correo}}</td>
|
||||
<td>{{item.comunidad}}</td>
|
||||
<td>{{item.pago}}</td>
|
||||
<td ><button type="button" class="btn btn-outline-success" v-b-modal.mostrarPago >Mostrar pago</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<input type="submit" class="fadeIn fourth" value="Descargar">
|
||||
</form>
|
||||
</b-tab>
|
||||
<b-tab title="Pagados" >
|
||||
<form >
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Nombre</th>
|
||||
<th scope="col">Apellido Paterno</th>
|
||||
<th scope="col">Apellido Materno</th>
|
||||
<th scope="col">Correo</th>
|
||||
<th scope="col">Comunidad</th>
|
||||
<th scope="col">Pago total</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in pagados" v-bind:key="item.idPersona">
|
||||
<th scope="row">{{item.number}}</th>
|
||||
<td>{{item.nombre}}</td>
|
||||
<td>{{item.apellidoP}}</td>
|
||||
<td>{{item.apellidoM}}</td>
|
||||
<td>{{item.correo}}</td>
|
||||
<td>{{item.comunidad}}</td>
|
||||
<td>{{item.pago}}</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<input type="submit" class="fadeIn fourth" value="Descargar">
|
||||
</form>
|
||||
</b-tab>
|
||||
<b-tab title="Solicitud de Factura" >
|
||||
<form >
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Nombre</th>
|
||||
<th scope="col">Apellido Paterno</th>
|
||||
<th scope="col">Apellido Materno</th>
|
||||
<th scope="col">Correo</th>
|
||||
<th scope="col">Comunidad</th>
|
||||
<th scope="col">Pago total</th>
|
||||
<th scope="col">Mostrar datos</th>
|
||||
<th scope="col">Enviar Factura</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in factura" v-bind:key="item.idPersona">
|
||||
<th scope="row">{{item.number}}</th>
|
||||
<td>{{item.nombre}}</td>
|
||||
<td>{{item.apellidoP}}</td>
|
||||
<td>{{item.apellidoM}}</td>
|
||||
<td>{{item.correo}}</td>
|
||||
<td>{{item.comunidad}}</td>
|
||||
<td>{{item.pago}}</td>
|
||||
<td ><button type="button" class="btn btn-outline-primary" v-b-modal.DatosPago>Mostrar pago</button></td>
|
||||
<td ><button type="button" class="btn btn-outline-success" >Enviar Factura</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<input type="submit" class="fadeIn fourth" value="Descargar">
|
||||
</form>
|
||||
</b-tab>
|
||||
|
||||
</b-tabs>
|
||||
|
||||
|
||||
|
||||
<b-modal id="fichaDeposito" centered title="BootstrapVue">
|
||||
<p class="my-4">Enviar Ficha de deposito</p>
|
||||
</b-modal>
|
||||
|
||||
<b-modal id="mostrarPago" centered title="Pago de Daniel Adrian">
|
||||
<p class="my-4">Pago </p>
|
||||
</b-modal>
|
||||
|
||||
<b-modal id="DatosPago" centered title="Datos de: " hide-footer>
|
||||
<p class="my-4">Pago </p>
|
||||
|
||||
</b-modal>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./../components/header.vue";
|
||||
export default {
|
||||
name: "panel",
|
||||
components: {
|
||||
Header
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enviar: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
|
||||
{number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
|
||||
pendientes: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00",fecha: "01/09/2020"},
|
||||
{number: 1,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00", fecha: "01/09/2020"}],
|
||||
revisar: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
|
||||
{number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
|
||||
pagados: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
|
||||
{number: 1,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
|
||||
factura: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
|
||||
{number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
|
||||
|
||||
selected: 1,
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.principal{
|
||||
padding: 3rem;
|
||||
}
|
||||
.banner{
|
||||
position: realtive;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
h1{
|
||||
margin-top:1rem;
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
html {
|
||||
background-color: #56baed;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #92badd;
|
||||
display:inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display:inline-block;
|
||||
margin: 40px 8px 10px 8px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* STRUCTURE */
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.wrapperRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#formContent {
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#formFooter {
|
||||
background-color: #f6f6f6;
|
||||
border-top: 1px solid #dce8f1;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 0 0 10px 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABS */
|
||||
|
||||
h2.inactive {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
h2.active {
|
||||
color: #0d0d0d;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FORM TYPOGRAPHY*/
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #56baed;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 80px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin: 5px 20px 40px 20px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
|
||||
background-color: #39ace7;
|
||||
}
|
||||
|
||||
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
|
||||
-moz-transform: scale(0.95);
|
||||
-webkit-transform: scale(0.95);
|
||||
-o-transform: scale(0.95);
|
||||
-ms-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
input[type=text], input[type=password]{
|
||||
background-color: #f6f6f6;
|
||||
border: none;
|
||||
color: #0d0d0d;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left:1rem;
|
||||
|
||||
|
||||
width: 100%;
|
||||
border: 2px solid #f6f6f6;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
select[type=text] {
|
||||
background-color: #f6f6f6;
|
||||
border: none;
|
||||
color: #0d0d0d;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left:1rem;
|
||||
width: 100%;
|
||||
border: 2px solid #f6f6f6;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
input[type=text]:focus {
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #5fbae9;
|
||||
}
|
||||
|
||||
input[type=text]:placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
/* Simple CSS3 Fade-in-down Animation */
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
|
||||
.fadeIn {
|
||||
opacity:0;
|
||||
-webkit-animation:fadeIn ease-in 1;
|
||||
-moz-animation:fadeIn ease-in 1;
|
||||
animation:fadeIn ease-in 1;
|
||||
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
|
||||
-webkit-animation-duration:1s;
|
||||
-moz-animation-duration:1s;
|
||||
animation-duration:1s;
|
||||
}
|
||||
|
||||
.fadeIn.first {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
-moz-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.fadeIn.second {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
-moz-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.fadeIn.third {
|
||||
-webkit-animation-delay: 0.8s;
|
||||
-moz-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.fadeIn.fourth {
|
||||
-webkit-animation-delay: 1s;
|
||||
-moz-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* Simple CSS3 Fade-in Animation */
|
||||
.underlineHover:after {
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #56baed;
|
||||
content: "";
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.underlineHover:hover {
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.underlineHover:hover:after{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* OTHERS */
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#icon {
|
||||
width:60%;
|
||||
}
|
||||
|
||||
</style>
|
||||
+15
-1
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 20px; padding-right: 20px;" src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> <router-view></router-view>
|
||||
<div style="width: 100%;"><div style="position: relative; padding-bottom: 15%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1500px" height="300px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 20px; padding-right: 20px;" src="https://view.genial.ly/5e5d914641b5c6242ec5b91f" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
|
||||
|
||||
<div class="wrapper fadeInDown">
|
||||
<div id="formContent">
|
||||
@@ -30,6 +30,8 @@
|
||||
<input type="file" class="form-control-file" id="exampleFormControlFile1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" class="fadeIn fourth" value="Enviar">
|
||||
<div class="row">
|
||||
|
||||
|
||||
@@ -43,6 +45,17 @@
|
||||
Quiero Factura
|
||||
</b-form-checkbox>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="fadeIn second" name="login" placeholder="Nombre">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="fadeIn second" name="login" placeholder="Apellido paterno">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="fadeIn second" name="login" placeholder="Apellido Materno">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
@@ -84,6 +97,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<input type="submit" class="fadeIn fourth" value="Enviar">
|
||||
</form>
|
||||
|
||||
<!-- Remind Passowrd -->
|
||||
|
||||
Reference in New Issue
Block a user