Skip to content

M
mancheng_code
Commit a8e984bd by heshihao
Options

feat: 登录页修改

parent a2bdc46d
Showing with 202 additions and 325 deletions
src/assets/images/industry/dldq-01.png
src/assets/images/industry/dldq-01.png

722 KB | W: | H:

src/assets/images/industry/dldq-01.png

382 KB | W: | H:

src/assets/images/industry/dldq-01.png
src/assets/images/industry/dldq-01.png
src/assets/images/industry/dldq-01.png
src/assets/images/industry/dldq-01.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/industry/dldq-02.png
src/assets/images/industry/dldq-02.png

594 KB | W: | H:

src/assets/images/industry/dldq-02.png

307 KB | W: | H:

src/assets/images/industry/dldq-02.png
src/assets/images/industry/dldq-02.png
src/assets/images/industry/dldq-02.png
src/assets/images/industry/dldq-02.png
  • 2-up
  • Swipe
  • Onion skin
src/views/login/login.vue
<template>
<div class="login_page">
<div class="bg2"></div>
<!-- <div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="bg4"></div> -->
<div class="header">
<div class="time">
<img src="@/assets/images/index/icon-ymd.png" alt="" />
<span>{{ nowTime }}</span>
</div>
<div class="users">
<!-- <div class="users">
<img src="@/assets/images/login/bg-login.png" alt="" />
<div class="u-left">
<img src="@/assets/images/index/icon-user.png" alt="" />
<span @click="dialogReg = true">注册</span>
<span>/</span>
<span @click="dialogVisible = true">登录</span>
<span>登录</span>
<span> / </span>
<span>注册</span>
</div>
</div>
</div> -->
</div>
<ul class="login_main">
<img
style="position: absolute;top: 0;left: 70px;height: 960px;width: 1000px;"
src="@/assets/images/login/main-left.png"
alt=""
/>
<img
src="@/assets/images/login/nav-foot.png"
alt=""
style="width: 902px;height: 194px;position: absolute;bottom: 0;left: 512px;"
/>
<!-- <ul class="login_main">
<li
class="animate__animated animate__pulse animate__slow animate__infinite"
v-for="(item, index) of list"
......@@ -29,175 +41,175 @@
<img v-if="select == index" :src="require(`@/assets/images/login/${item.select}`)" alt="" />
<img v-else :src="require(`@/assets/images/login/${item.url}`)" alt="" />
</li>
</ul>
</ul> -->
<div class="footer"></div>
<el-dialog :visible.sync="dialogVisible" :show-close="false" width="1290" :modal="false">
<div class="popup">
<div class="popup_main">
<div class="popup_main_box">
<div class="popup_title">
<img src="@/assets/images/login2/title-hydl.png" alt="" />
<img class="close" @click="closeDialog" src="@/assets/images/login2/icon-close.png" alt="" />
<div class="popup">
<div class="popup_main">
<div class="popup_main_box">
<div class="popup_title">
<!-- <img src="@/assets/images/login2/title-hydl.png" alt="" />
<img class="close" @click="closeDialog" src="@/assets/images/login2/icon-close.png" alt="" /> -->
</div>
<div class="login-box">
<ul class="nav ">
<li
:class="[activeName1 == 'outside' ? 'active' : '', 'left-radius ']"
v-if="bind == false && manage == false"
@click="activeName1 = 'outside'"
>
外部
</li>
<li
:class="[activeName1 == 'inside' ? 'active' : '', 'right-radius ']"
v-if="bind == false && manage == false"
@click="activeName1 = 'inside'"
>
内部
</li>
<li class="active bg-title" v-if="bind == true">绑定手机号</li>
<li class="active bg-title" v-if="manage == true">
管理员登录
</li>
</ul>
<div class="login-input" v-if="bind == false && manage == false && activeName1 == 'outside'">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="phone"
type="text"
autocomplete="new-password"
placeholder="请输入手机号码"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="vCode"
placeholder="请输入验证码"
autocomplete="new-password"
type="text"
style="width:100%"
></el-input>
<span v-show="!isSend" class="code" @click="sendCode">获取验证码</span>
<span v-show="isSend" class="send_code">{{ RemainingTime }}秒后重新获取</span>
</div>
<div class="submit" @click="codeLogin">
登录
</div>
<div class="other">
<span>其他方式登录</span>
<img @click="wxLogin" src="~@images/login2/icon-wechat.png" alt="" />
</div>
</div>
<div class="login-box">
<ul class="nav ">
<li
:class="[activeName1 == 'outside' ? 'active' : '', 'left-radius ']"
v-if="bind == false && manage == false"
@click="activeName1 = 'outside'"
>
外部
</li>
<li
:class="[activeName1 == 'inside' ? 'active' : '', 'right-radius ']"
v-if="bind == false && manage == false"
@click="activeName1 = 'inside'"
>
内部
</li>
<li class="active bg-title" v-if="bind == true">绑定手机号</li>
<li class="active bg-title" v-if="manage == true">
管理员登录
</li>
</ul>
<div class="login-input" v-if="bind == false && manage == false && activeName1 == 'outside'">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="phone"
type="text"
autocomplete="new-password"
placeholder="请输入手机号码"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="vCode"
placeholder="请输入验证码"
autocomplete="new-password"
type="text"
style="width:100%"
></el-input>
<span v-show="!isSend" class="code" @click="sendCode">获取验证码</span>
<span v-show="isSend" class="send_code">{{ RemainingTime }}秒后重新获取</span>
</div>
<div class="submit" @click="codeLogin">
登录
</div>
<div class="other">
<span>其他方式登录</span>
<img @click="wxLogin" src="~@images/login2/icon-wechat.png" alt="" />
</div>
<div class="login-input" v-if="bind == false && manage == false && activeName1 == 'inside'">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="phone"
type="text"
autocomplete="new-password"
placeholder="请输入手机号码"
style="width:100%"
></el-input>
</div>
<div class="login-input" v-if="bind == false && manage == false && activeName1 == 'inside'">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="phone"
type="text"
autocomplete="new-password"
placeholder="请输入手机号码"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="password"
type="password"
placeholder="请输入密码"
autocomplete="new-password"
style="width:100%"
></el-input>
</div>
<div class="submit" @click="pwdLogin">
登录
</div>
<div class="reg-manage">
<p @click="(dialogReg = true), (dialogVisible = false)">
<img src="~@/assets/images/login2/icon-zhuce.png" alt="" />
<span>立即注册</span>
</p>
<p @click="manage = true">
<img src="~@/assets/images/login2/icon-guanli.png" alt="" />
<span>管理员登录</span>
</p>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="password"
type="password"
placeholder="请输入密码"
autocomplete="new-password"
style="width:100%"
></el-input>
</div>
<div class="login-input" v-if="bind == true">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="phone"
type="text"
autocomplete="new-password"
placeholder="请输入手机号码"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="vCode"
placeholder="请输入验证码"
autocomplete="new-password"
type="text"
style="width:100%"
></el-input>
<span v-show="!isSend" class="code" @click="sendCode">获取验证码</span>
<span v-show="isSend" class="send_code">{{ RemainingTime }}秒后重新获取</span>
</div>
<div class="submit" @click="codeLogin">
登录
</div>
<div class="fan" @click="bind = false">
<img src="@/assets/images/login2/icon-fanhui.png" alt="" />
<span>返回</span>
</div>
<div class="submit" @click="pwdLogin">
登录
</div>
<div class="login-input" v-if="manage == true">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="manage_phone"
type="text"
autocomplete="new-password"
placeholder="请输入用户名"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="manage_password"
placeholder="请输入密码"
autocomplete="new-password"
type="password"
style="width:100%"
></el-input>
</div>
<div class="submit" @click="backLogin">
登录
</div>
<div class="fan" @click="manage = false">
<img src="@/assets/images/login2/icon-fanhui.png" alt="" />
<span>返回</span>
</div>
<div class="reg-manage">
<p @click="(dialogReg = true), (dialogVisible = false)">
<img src="~@/assets/images/login2/icon-zhuce.png" alt="" />
<span>立即注册</span>
</p>
<p @click="manage = true">
<img src="~@/assets/images/login2/icon-guanli.png" alt="" />
<span>管理员登录</span>
</p>
</div>
</div>
<div class="login-input" v-if="bind == true">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="phone"
type="text"
autocomplete="new-password"
placeholder="请输入手机号码"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="vCode"
placeholder="请输入验证码"
autocomplete="new-password"
type="text"
style="width:100%"
></el-input>
<span v-show="!isSend" class="code" @click="sendCode">获取验证码</span>
<span v-show="isSend" class="send_code">{{ RemainingTime }}秒后重新获取</span>
</div>
<div class="submit" @click="codeLogin">
登录
</div>
<div class="fan" @click="bind = false">
<img src="@/assets/images/login2/icon-fanhui.png" alt="" />
<span>返回</span>
</div>
</div>
<div class="login-input" v-if="manage == true">
<div class="input_father">
<img src="~@images/login2/icon-phonenb.png" alt="" />
<el-input
v-model="manage_phone"
type="text"
autocomplete="new-password"
placeholder="请输入用户名"
style="width:100%"
></el-input>
</div>
<div class="input_father">
<img src="~@images/login2/icon-password.png" alt="" />
<el-input
v-model="manage_password"
placeholder="请输入密码"
autocomplete="new-password"
type="password"
style="width:100%"
></el-input>
</div>
<div class="submit" @click="backLogin">
登录
</div>
<div class="fan" @click="manage = false">
<img src="@/assets/images/login2/icon-fanhui.png" alt="" />
<span>返回</span>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
<el-dialog :visible.sync="dialogReg" :show-close="false" class="reg" width="1738" :modal="false">
<div class="popup-2">
<div class="popup_main-2">
<div class="popup_main_box-2">
<div class="popup_title">
<img src="@/assets/images/login2/title-hydl.png" alt="" />
<img class="close" @click="closeDialog2" src="@/assets/images/login2/icon-close.png" alt="" />
<!-- <img src="@/assets/images/login2/title-hydl.png" alt="" />
<img class="close" @click="closeDialog2" src="@/assets/images/login2/icon-close.png" alt="" /> -->
</div>
<div class="login-box">
<ul class="nav center">
......@@ -953,7 +965,7 @@ export default {
position: relative;
width: 100%;
height: 100%;
background: url("~@images/login/index-bg.png") no-repeat center;
background: url("~@images/login/bg-all.png") no-repeat center;
.bg2 {
position: absolute;
left: 0;
......@@ -1012,7 +1024,7 @@ export default {
padding: 20px 160px 0 30px;
display: flex;
justify-content: space-between;
background: url("~@/assets/images/index/headbg-title.png") no-repeat;
background: url("~@/assets/images/login/headbg-title.png") no-repeat;
background-size: 100%;
.time {
......@@ -1031,19 +1043,33 @@ export default {
.users {
display: flex;
z-index: 999;
position: relative;
left: 0;
height: 62px;
width: 148px;
.u-right {
margin-left: 30px;
}
.u-left {
position: absolute;
z-index: 99;
left: 80px;
width: 200px;
}
span {
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
vertical-align: middle;
cursor: default;
color: #cde1ff;
}
img {
margin-right: 4px;
position: absolute;
left: 0;
top: -16px;
z-index: 9;
}
}
}
......@@ -1156,11 +1182,14 @@ export default {
}
.popup {
position: absolute;
box-sizing: border-box;
padding: 100px 350px 0;
width: 1290px;
height: 850px;
background: url("~@images/login2/img-dlbg.png") no-repeat center;
left: 1147px;
top: 159px;
// padding: 100px 350px 0;
width: 590px;
height: 609px;
background: url("~@images/login/bg-welcome.png") no-repeat center;
background-size: 100%;
}
.popup-2 {
......@@ -1180,6 +1209,7 @@ export default {
height: 100%;
}
.popup_title {
height: 180px;
position: relative;
img {
display: block;
......@@ -1195,10 +1225,10 @@ export default {
}
.login-box {
position: relative;
margin-top: -60px;
padding: 0 80px;
height: 200px;
z-index: 99;
// margin-top: 400px;
.nav {
display: flex;
margin-bottom: 44px;
......@@ -1496,160 +1526,7 @@ export default {
/deep/ .el-select {
width: 100%;
}
// @media only screen and (min-height: 1000px) {
// .login_page .login_header {
// height: 116px;
// }
// }
// @media screen and (min-width: 1366px) and (max-width: 1600px) {
// .login_page .time {
// padding-top: 40px;
// margin-left: 50px;
// }
// }
// @media only screen and (width: 1366px) {
// .login_page .login_header {
// height: 86px;
// }
// .login_page .time {
// font-size: 16px;
// padding-top: 30px;
// margin-left: 40px;
// }
// .login_page .user {
// padding-top: 20px;
// }
// .login_main li:nth-of-type(5) {
// top: 290px;
// right: 70px;
// }
// .login_main li:nth-of-type(4) {
// top: 290px;
// left: -30px;
// }
// }
// @media screen and (max-width: 1200px) {
// .login_page .login_header {
// background: url(/img/index-head.d7efde4d.png) no-repeat center 0;
// background-size: 100%;
// }
// .login_page .bg4 {
// padding: 0;
// }
// .login_page .time {
// font-size: 14px;
// padding-top: 22px;
// margin-left: 22px;
// }
// .login_page .user {
// padding-top: 14px;
// font-size: 14px;
// margin-right: 100px;
// img {
// width: 30px;
// }
// }
// .login_page {
// background-size: 145%;
// }
// .login_page .bg2::before {
// background-size: 80%;
// }
// .login_page .bg3::before {
// background-size: 80%;
// }
// .login_page .bg4 {
// background-size: 150%;
// }
// .login_main {
// width: 1366px;
// margin: 0 auto;
// position: relative;
// li {
// width: 180px;
// height: 180px;
// }
// }
// .login_main li:nth-of-type(2) {
// top: -50px;
// left: 80px;
// }
// .login_main li:nth-of-type(3) {
// top: -50px;
// right: 418px;
// }
// .login_main li:nth-of-type(4) {
// top: 160px;
// left: 22px;
// }
// .login_main li:nth-of-type(5) {
// top: 160px;
// right: 380px;
// }
// .login_main li:nth-of-type(6) {
// top: 380px;
// left: 80px;
// }
// .login_main li:nth-of-type(7) {
// top: 380px;
// right: 418px;
// }
// /deep/ .popup {
// margin-left: -60px;
// transform: scale(0.8);
// }
// }
/*
*常用电脑尺寸 1680 * 900
* 1512 * 790
* 1440 * 900
*ipad pro 1366 * 1024
*ipad mini 1024 * 768
*ipad 1024 * 768
*/
/*分辨率低于1680，采用下面的样式*/
// @media screen and (max-device-width: 1680px) {
// .time {
// margin-top: -10px;
// font-size: 14px;
// }
// .login_page .header .users {
// margin-top: -10px;
// span {
// font-size: 18px;
// }
// }
// .login_main {
// margin: -120px auto 0;
// transform: scale(0.88);
// }
// /deep/ .el-dialog__body {
// transform: scale(0.8);
// }
// }
/*分辨率低于1440，采用下面的样式*/
// @media screen and (max-device-width: 1440px) {
// .login_page .header .time span {
// font-size: 16px;
// }
// .login_page .header .users span {
// font-size: 16px;
// }
// .login_main {
// margin: -160px auto 0;
// transform: scale(0.8);
// }
// .login_main li:nth-of-type(1) {
// margin-top: -60px;
// }
// /deep/ .el-dialog__body {
// transform: scale(0.74);
// }
// }
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment