Skip to content

M
mancheng_code
Commit a8e984bd by heshihao
Options

feat: 登录页修改

parent a2bdc46d
Showing with 55 additions and 178 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,15 +41,15 @@ ...@@ -29,15 +41,15 @@
<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>
<div class="login-box"> <div class="login-box">
<ul class="nav "> <ul class="nav ">
...@@ -190,14 +202,14 @@ ...@@ -190,14 +202,14 @@
</div> </div>
</div> </div>
</div> </div>
</el-dialog>
<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