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>
<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,15 +41,15 @@
<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="" />
<!-- <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 ">
......@@ -190,14 +202,14 @@
</div>
</div>
</div>
</el-dialog>
<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