mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
'admin-12.27:编写登录界面'
This commit is contained in:
lyt
parent
8d14803ad2
commit
1ccc74ec2b
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<el-form class="login-content-form">
|
||||
<el-form-item>
|
||||
<el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
|
||||
clearable autocomplete="off">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password" clearable
|
||||
autocomplete="off">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="16">
|
||||
<el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code" clearable autocomplete="off"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="login-content-code">
|
||||
<span class="login-content-code-img">1234</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="login-content-submit" round>
|
||||
<span>登 录</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
name: "login",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
userName: "",
|
||||
password: "",
|
||||
code: "",
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-content-form {
|
||||
margin-top: 20px;
|
||||
.login-content-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.login-content-code-img {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgb(220, 223, 230);
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 5px;
|
||||
text-indent: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-form class="login-content-form">
|
||||
<el-form-item>
|
||||
<el-input type="text" placeholder="请输入手机号" prefix-icon="el-icon-user" v-model="ruleForm.userName" clearable
|
||||
autocomplete="off">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="16">
|
||||
<el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code" clearable autocomplete="off"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button>获取验证码</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="login-content-submit" round>
|
||||
<span>登 录</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
name: "login",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
userName: "",
|
||||
code: "",
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-content-form {
|
||||
margin-top: 20px;
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,39 +3,21 @@
|
||||
<div class="login-logo">
|
||||
<img src="/@/assets/logo-web-element.svg" />
|
||||
</div>
|
||||
<div class="login-content">
|
||||
<div class="login-content" :class="{'login-content-mobile' : tabsActiveName === 'mobile'}">
|
||||
<div class="login-content-main">
|
||||
<h4 class="login-content-title">vue-admin-wonderful</h4>
|
||||
<el-form class="login-content-form" ref="ruleForm">
|
||||
<el-form-item>
|
||||
<el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
|
||||
clearable autocomplete="off" ref="userName">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password"
|
||||
clearable autocomplete="off" ref="password">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="16">
|
||||
<el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code" clearable autocomplete="off" ref="code"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="login-content-code">
|
||||
<span class="login-content-code-img">1234</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="login-content-submit" round>
|
||||
<span>登 录</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
|
||||
<el-tab-pane label="账号密码登录" name="account">
|
||||
<transition name="el-zoom-in-center">
|
||||
<Account v-show="!isTabPaneShow" />
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="手机号登录" name="mobile">
|
||||
<transition name="el-zoom-in-center">
|
||||
<Mobile v-show="isTabPaneShow" />
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-button type="text" size="small">第三方登录</el-button>
|
||||
<el-button type="text" size="small">友情链接</el-button>
|
||||
</div>
|
||||
@ -48,19 +30,24 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from "vue";
|
||||
import Account from "/@/views/login/component/account.vue";
|
||||
import Mobile from "/@/views/login/component/mobile.vue";
|
||||
import { toRefs, reactive, getCurrentInstance } from "vue";
|
||||
export default {
|
||||
name: "login",
|
||||
components: { Account, Mobile },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
userName: "",
|
||||
password: "",
|
||||
code: "",
|
||||
},
|
||||
tabsActiveName: "account",
|
||||
isTabPaneShow: false,
|
||||
});
|
||||
const onTabsClick = () => {
|
||||
state.isTabPaneShow = !state.isTabPaneShow;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
onTabsClick,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -83,14 +70,16 @@ export default {
|
||||
.login-content {
|
||||
width: 500px;
|
||||
padding: 20px;
|
||||
height: 410px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2px 12px 0 rgba(179, 202, 233, 1);
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 2px 12px 0 var(--color-primary-light-1);
|
||||
border-radius: 4px;
|
||||
transition: height 0.2s linear;
|
||||
height: 480px;
|
||||
overflow: hidden;
|
||||
.login-content-main {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
@ -102,41 +91,11 @@ export default {
|
||||
letter-spacing: 4px;
|
||||
margin: 15px 0 30px;
|
||||
}
|
||||
.login-content-form {
|
||||
.login-content-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.login-content-code-img {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #fdfdfd;
|
||||
border: 1px solid rgb(220, 223, 230);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 5px;
|
||||
line-height: 38px;
|
||||
text-indent: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-content-mobile {
|
||||
height: 418px;
|
||||
}
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user