gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录样式

Browse Source
This commit is contained in:
admin
2021-06-30 15:30:55 +08:00
parent 1c9262b5a9
commit 6e05eb821f
2 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/cion.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

55
src/Login.vue
View File

@@ -1,36 +1,39 @@
<template> <template>
<div class="wrap"> <div class="background">
<div class="logins">
<div class="inside"> <div class="inside">
<div class="title" style="margin-top:70px"> <div class="title" style="margin-top:70px">
<img src="/logo.png" /> <img src="../public/images/cion.png" />
</div> </div>
<el-form> <el-form class="five">
<el-form-item> <el-form-item>
<el-input <el-input
prefix-icon="el-icon-user" prefix-icon="el-icon-user"
style="width: 300px;height: 40px;margin-left:34px;margin-top:45.57px" class="inputStyle tow"
v-model="username" v-model="username"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input
class="inputStyle"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
type="password" type="password"
style="width: 300px;height: 40px;margin-left:34px;"
v-model="pin" v-model="pin"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
style=" margin-bottom: -62px;" type="primary"
class="button" class="inputStyle button"
@click="login" @click="login"
style=" font-size: 16px;"
>登陆</el-button >登陆</el-button
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -62,14 +65,21 @@ export default {
} }
</script> </script>
<style> <style lang="scss">
body{ body{
background-color: #000c18; background-color: #000C18;
} }
.wrap{ .background:after{
background-color: #000c18; width: 100%;
background-size: 100% 100%; height: 100%;
background-repeat: no-repeat; background-color: #000C18;
opacity: 0.2;
}
.logins{
background-color: #000C18;
background-size: auto;
background-repeat: round;
background-image: url('../public/images/bg.png'); background-image: url('../public/images/bg.png');
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -77,7 +87,6 @@ body{
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
margin: auto; margin: auto;
} }
.inside { .inside {
@@ -97,21 +106,27 @@ body{
margin-left: 52px; margin-left: 52px;
margin-right: 10px; margin-right: 10px;
} }
.inputStyle{
width: 300px;
height: 40px;
}
.tow:first-of-type{
margin-top: 45.57px;
}
.five{
width: 300px;
height: 250px;
margin: auto;
}
.button { .button {
background: #0091ff; background: #0091ff;
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
border: 0px; border: 0px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 16px;
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
font-weight: 400; font-weight: 400;
width: 300px;
height: 40px;
text-align: center; text-align: center;
margin-top: 20px;
margin-left: 34px;
} }
</style> </style>