59 lines
2.3 KiB
Vue
Executable File
59 lines
2.3 KiB
Vue
Executable File
<template>
|
||
<div>
|
||
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12 col-md-5 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
|
||
</div>
|
||
<div class="col-12 col-md-7 col-lg-8 pt-5 ">
|
||
<div class="pb-3 text-center">
|
||
<img src="~/assets/image/Logo.png" style="width: 200px" />
|
||
</div>
|
||
<div class="text-center pt-1">
|
||
<h2 class="fw-bolder display-6 text-center" >Log In</h2>
|
||
<span class="fs-5 pt-1 text-muted">Welcome back, <span class="fw-bolder text-dark">Morris!</span></span>
|
||
</div>
|
||
<div class="row pt-4 pb-5">
|
||
<div class="col-12">
|
||
<form class=" ">
|
||
<div class="row pt-3 justify-content-center">
|
||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||
<label class="form-label">Email</label>
|
||
<input type="email" placeholder="JohnDoe@gmail.com" class="form-control" >
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center pt-3">
|
||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||
<label class="form-label">Password</label>
|
||
<input type="password" placeholder="Password" class="form-control" >
|
||
<span class="float-end pt-2"><a class="forgot-link" href="#">Forgot Password</a></span>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center pb-5">
|
||
<div class="col-12 col-sm-8 col-md-8 col-lg-5 pt-4 text-center">
|
||
<button type="submit" class=" login-btn col-12" >Sign Up</button>
|
||
<h4 class="text-center">or</h4>
|
||
<button type="submit" class=" login-ins-btn col-12" >Institution Login</button>
|
||
<h5 class="text-center pt-3">Don’t have an Account? <a class="signup-link" href="#">Sign Up</a></h5>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import backgroundImagePath from '~/assets/image/login4.png'
|
||
export default {
|
||
|
||
name:'LoGin',
|
||
data(){
|
||
return{
|
||
backgroundImagePath:backgroundImagePath,
|
||
}
|
||
}
|
||
}
|
||
</script> |