Browse Source

登录页面切换风格

dev
马远东 2 months ago
parent
commit
0ab7c6a622
  1. 1
      src/css/common.css
  2. 1
      src/css/login.css
  3. 61
      src/page/login/index.vue
  4. 2
      src/styles/login.scss

1
src/css/common.css

@ -1812,6 +1812,7 @@ table {
float: left;
width: 50%;
position: relative;
}
.login-left .img {

1
src/css/login.css

@ -36,6 +36,7 @@
float: left;
width: 50%;
position: relative;
}
.login-left .img {

61
src/page/login/index.vue

@ -1,18 +1,22 @@
<template>
<div class="login-container" ref="login" @keyup.enter="handleLogin">
<div class="login-weaper animated bounceInDown">
<div class="top">
<!-- 横幅顶部 -->
<!-- <div class="top">
<img src="https://www.v6g.cn/IMAGE/top.png" />
</div>
</div> -->
<div class="login-left">
<div class="login-time">
{{ time }}
</div>
<div class="left">
<!-- 对联左 -->
<!-- <div class="left">
<img src="https://www.v6g.cn/IMAGE/left.png" />
</div>
<img src="../../../public/img/indexbg.png" />
</div> -->
<!-- 本地图片 -->
<!-- <img src="../../../public/img/indexbg.png" /> -->
<!-- 线上图片 -->
<img src="https://www.v6g.cn/IMAGE/indexbg.png" />
<!-- <p class="title">{{ $t('login.info') }}</p> -->
<!-- <img class="img" src="/img/logo.png" alt="" /> -->
@ -37,9 +41,10 @@
<!-- <a :href="website.ssoUrl + website.redirectUri">{{ $t('login.ssoLogin') }}</a> -->
</div>
</div>
<div class="right">
<!-- 对联右 -->
<!-- <div class="right">
<img src="https://www.v6g.cn/IMAGE/right.png" />
</div>
</div> -->
</div>
</div>
<div class="index_footer">
@ -182,37 +187,43 @@ export default {
width: 130px;
height: 60px;
}
span{
span {
margin-left: 10px;
}
}
}
.left{
.left {
position: absolute;
left: 0;
width: 80px;
height: 100%;
mask: linear-gradient(to right, #000000, #ffffffb0);
img{
img {
width: 100%;
height: 100%;
}
}
.right{
.right {
position: absolute;
right: 0;
width: 80px;
height: 100%;
mask: linear-gradient(to left, #000000, #ffffffb0);
img{
img {
width: 100%;
height: 100%;
}
}
.login-weaper{
.login-weaper {
position: relative;
}
.top{
.top {
position: absolute;
top: -18%;
left: 35%;
@ -221,9 +232,25 @@ span{
z-index: 1;
overflow: hidden;
border-radius: 15px;
img{
img {
width: 100%;
height: 100%;
}
}
.login-left {
/* 新增 */
box-sizing: border-box !important;
border: 1px solid #ebebeb !important;
background: #ffffff5c;
box-shadow: -1px -5px 8px #00000003;
backdrop-filter: blur(6px);
img {
width: 78%;
height: 100%;
}
}
</style>

2
src/styles/login.scss

@ -6,7 +6,7 @@
height: 100%;
margin: 0 auto;
// background-image: url('/img/bg/bg.jpg');
background-image: url('https://www.v6g.cn/IMAGE/fm2.png');
background-image: url('https://www.v6g.cn/IMAGE/kg2.png');
background-size: 100% 100%;
}

Loading…
Cancel
Save