57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="login_container">
|
||
|
|
<div class="login-box">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="../assets/logo.png" alt="logo">
|
||
|
|
</div>
|
||
|
|
<el-form label-width="80px">
|
||
|
|
<el-form-item label="活动名称">
|
||
|
|
<el-input ></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Login'
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.login_container{
|
||
|
|
background-color: #2b4b6b;
|
||
|
|
height: 100%;
|
||
|
|
.login-box{
|
||
|
|
width: 450px;
|
||
|
|
height: 300px;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 3px;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
|
||
|
|
.avatar{
|
||
|
|
height: 130px;
|
||
|
|
width: 130px;
|
||
|
|
border: 1px solid #eeeeee;
|
||
|
|
border-radius: 50%;
|
||
|
|
padding: 10px;
|
||
|
|
box-shadow: 0 0 10px #dddddd;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
background-color: #fff;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #eeeeee;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|