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> <template>
<div class="login_page"> <div class="login_page">
<div class="bg2"></div> <!-- <div class="bg2"></div>
<div class="bg3"></div> <div class="bg3"></div>
<div class="bg4"></div> <div class="bg4"></div> -->
<div class="header"> <div class="header">
<div class="time"> <div class="time">
<img src="@/assets/images/index/icon-ymd.png" alt="" /> <img src="@/assets/images/index/icon-ymd.png" alt="" />
<span>{{ nowTime }}</span> <span>{{ nowTime }}</span>
</div> </div>
<div class="users"> <!-- <div class="users">
<img src="@/assets/images/login/bg-login.png" alt="" />
<div class="u-left"> <div class="u-left">
<img src="@/assets/images/index/icon-user.png" alt="" /> <span>登录</span>
<span @click="dialogReg = true">注册</span> <span> / </span>
<span>/</span> <span>注册</span>
<span @click="dialogVisible = true">登录</span>
</div> </div>
</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 <li
class="animate__animated animate__pulse animate__slow animate__infinite" class="animate__animated animate__pulse animate__slow animate__infinite"
v-for="(item, index) of list" v-for="(item, index) of list"
...@@ -29,175 +41,175 @@ ...@@ -29,175 +41,175 @@
<img v-if="select == index" :src="require(`@/assets/images/login/${item.select}`)" alt="" /> <img v-if="select == index" :src="require(`@/assets/images/login/${item.select}`)" alt="" />
<img v-else :src="require(`@/assets/images/login/${item.url}`)" alt="" /> <img v-else :src="require(`@/assets/images/login/${item.url}`)" alt="" />
</li> </li>
</ul> </ul> -->
<div class="footer"></div> <div class="footer"></div>
<el-dialog :visible.sync="dialogVisible" :show-close="false" width="1290" :modal="false">
<div class="popup"> <div class="popup">
<div class="popup_main"> <div class="popup_main">
<div class="popup_main_box"> <div class="popup_main_box">
<div class="popup_title"> <div class="popup_title">
<img src="@/assets/images/login2/title-hydl.png" alt="" /> <!-- <img src="@/assets/images/login2/title-hydl.png" alt="" />
<img class="close" @click="closeDialog" src="@/assets/images/login2/icon-close.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>
<div class="login-box"> <div class="login-input" v-if="bind == false && manage == false && activeName1 == 'inside'">
<ul class="nav "> <div class="input_father">
<li <img src="~@images/login2/icon-phonenb.png" alt="" />
:class="[activeName1 == 'outside' ? 'active' : '', 'left-radius ']" <el-input
v-if="bind == false && manage == false" v-model="phone"
@click="activeName1 = 'outside'" type="text"
> autocomplete="new-password"
外部 placeholder="请输入手机号码"
</li> style="width:100%"
<li ></el-input>
: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>
<div class="login-input" v-if="bind == false && manage == false && activeName1 == 'inside'"> <div class="input_father">
<div class="input_father"> <img src="~@images/login2/icon-password.png" alt="" />
<img src="~@images/login2/icon-phonenb.png" alt="" /> <el-input
<el-input v-model="password"
v-model="phone" type="password"
type="text" placeholder="请输入密码"
autocomplete="new-password" autocomplete="new-password"
placeholder="请输入手机号码" style="width:100%"
style="width:100%" ></el-input>
></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> </div>
<div class="login-input" v-if="bind == true"> <div class="submit" @click="pwdLogin">
<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>
<div class="login-input" v-if="manage == true"> <div class="reg-manage">
<div class="input_father"> <p @click="(dialogReg = true), (dialogVisible = false)">
<img src="~@images/login2/icon-phonenb.png" alt="" /> <img src="~@/assets/images/login2/icon-zhuce.png" alt="" />
<el-input <span>立即注册</span>
v-model="manage_phone" </p>
type="text" <p @click="manage = true">
autocomplete="new-password" <img src="~@/assets/images/login2/icon-guanli.png" alt="" />
placeholder="请输入用户名" <span>管理员登录</span>
style="width:100%" </p>
></el-input> </div>
</div> </div>
<div class="input_father"> <div class="login-input" v-if="bind == true">
<img src="~@images/login2/icon-password.png" alt="" /> <div class="input_father">
<el-input <img src="~@images/login2/icon-phonenb.png" alt="" />
v-model="manage_password" <el-input
placeholder="请输入密码" v-model="phone"
autocomplete="new-password" type="text"
type="password" autocomplete="new-password"
style="width:100%" placeholder="请输入手机号码"
></el-input> style="width:100%"
</div> ></el-input>
<div class="submit" @click="backLogin"> </div>
登录 <div class="input_father">
</div> <img src="~@images/login2/icon-password.png" alt="" />
<div class="fan" @click="manage = false"> <el-input
<img src="@/assets/images/login2/icon-fanhui.png" alt="" /> v-model="vCode"
<span>返回</span> placeholder="请输入验证码"
</div> 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> </div>
</div> </div>
</div> </div>
</el-dialog> </div>
<el-dialog :visible.sync="dialogReg" :show-close="false" class="reg" width="1738" :modal="false"> <el-dialog :visible.sync="dialogReg" :show-close="false" class="reg" width="1738" :modal="false">
<div class="popup-2"> <div class="popup-2">
<div class="popup_main-2"> <div class="popup_main-2">
<div class="popup_main_box-2"> <div class="popup_main_box-2">
<div class="popup_title"> <div class="popup_title">
<img src="@/assets/images/login2/title-hydl.png" alt="" /> <!-- <img src="@/assets/images/login2/title-hydl.png" alt="" />
<img class="close" @click="closeDialog2" src="@/assets/images/login2/icon-close.png" alt="" /> <img class="close" @click="closeDialog2" src="@/assets/images/login2/icon-close.png" alt="" /> -->
</div> </div>
<div class="login-box"> <div class="login-box">
<ul class="nav center"> <ul class="nav center">
...@@ -953,7 +965,7 @@ export default { ...@@ -953,7 +965,7 @@ export default {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("~@images/login/index-bg.png") no-repeat center; background: url("~@images/login/bg-all.png") no-repeat center;
.bg2 { .bg2 {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -1012,7 +1024,7 @@ export default { ...@@ -1012,7 +1024,7 @@ export default {
padding: 20px 160px 0 30px; padding: 20px 160px 0 30px;
display: flex; display: flex;
justify-content: space-between; 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%; background-size: 100%;
.time { .time {
...@@ -1031,19 +1043,33 @@ export default { ...@@ -1031,19 +1043,33 @@ export default {
.users { .users {
display: flex; display: flex;
z-index: 999; z-index: 999;
position: relative;
left: 0;
height: 62px;
width: 148px;
.u-right { .u-right {
margin-left: 30px; margin-left: 30px;
} }
.u-left {
position: absolute;
z-index: 99;
left: 80px;
width: 200px;
}
span { span {
font-size: 20px; font-size: 20px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #ffffff;
vertical-align: middle; vertical-align: middle;
cursor: default; cursor: default;
color: #cde1ff;
} }
img { img {
margin-right: 4px; position: absolute;
left: 0;
top: -16px;
z-index: 9;
} }
} }
} }
...@@ -1156,11 +1182,14 @@ export default { ...@@ -1156,11 +1182,14 @@ export default {
} }
.popup { .popup {
position: absolute;
box-sizing: border-box; box-sizing: border-box;
padding: 100px 350px 0; left: 1147px;
width: 1290px; top: 159px;
height: 850px; // padding: 100px 350px 0;
background: url("~@images/login2/img-dlbg.png") no-repeat center; width: 590px;
height: 609px;
background: url("~@images/login/bg-welcome.png") no-repeat center;
background-size: 100%; background-size: 100%;
} }
.popup-2 { .popup-2 {
...@@ -1180,6 +1209,7 @@ export default { ...@@ -1180,6 +1209,7 @@ export default {
height: 100%; height: 100%;
} }
.popup_title { .popup_title {
height: 180px;
position: relative; position: relative;
img { img {
display: block; display: block;
...@@ -1195,10 +1225,10 @@ export default { ...@@ -1195,10 +1225,10 @@ export default {
} }
.login-box { .login-box {
position: relative; position: relative;
margin-top: -60px;
padding: 0 80px; padding: 0 80px;
height: 200px; height: 200px;
z-index: 99; z-index: 99;
// margin-top: 400px;
.nav { .nav {
display: flex; display: flex;
margin-bottom: 44px; margin-bottom: 44px;
...@@ -1496,160 +1526,7 @@ export default { ...@@ -1496,160 +1526,7 @@ export default {
/deep/ .el-select { /deep/ .el-select {
width: 100%; 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，采用下面的样式*/ /*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) { @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