sdz/cmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页样式修改

Browse Source
This commit is contained in:
dengxin
2024-02-05 16:05:54 +08:00
parent 502e26526b
commit 534fcf9d2e
4 changed files with 126 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/bg/back_zj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

37
src/page/login/index.vue
View File

@@ -3,18 +3,23 @@
<!-- <cmanage-title @change="changeActive"></cmanage-title> -->
<div class="login-weaper animated bounceInDown">
<div style="height: 50px;"></div>
<div class="login-content">
<!-- <div class="login-left">
<img class="img" src="/manage/img/logobg.png" alt />
</div> -->
<div class="login-border">
<user-login v-if="activeName==='login'" @change="changeActive" />
<forget-pwd v-else-if="activeName==='pwd'" @change="changeActive" />
<user-register v-else-if="activeName==='register'" @change="changeActive" />
<work-station-login v-else-if="activeName==='workstation'" @change="changeActive"></work-station-login>
<div class="login-wrapper-small">
<div class="login-content">
<div class="login-left">
<img class="img" src="/img/bg/back_zj.png" alt />
</div>
<div class="login-border">
<user-login v-if="activeName === 'login'" @change="changeActive" />
<forget-pwd v-else-if="activeName === 'pwd'" @change="changeActive" />
<user-register v-else-if="activeName === 'register'" @change="changeActive" />
<work-station-login v-else-if="activeName === 'workstation'" @change="changeActive"></work-station-login>
</div>
</div>
</div>
<div data-v-3c692830="" style="text-align: center; margin-top: 20px; padding-bottom: 30px;"><div data-v-3c692830="" style="font-size: 12px; color: #40a9ff;">Copyright @ 德阳市智慧就业服务中心</div></div>
<div data-v-3c692830="" style="text-align: center; margin-top: 20px; padding-bottom: 30px;">
<div data-v-3c692830="" style="font-size: 12px; color: #40a9ff;">Copyright @ 德阳市智慧就业服务中心</div>
</div>
</div>
</div>
</template>
@@ -45,7 +50,7 @@ export default {
activeName: "login",
fixed: 0,
homeList: [],
fixedShow:false,
fixedShow: false,
maxFixed: 2000
};
},
@@ -53,15 +58,15 @@ export default {
created() {
},
mounted() {
this.$refs.login.addEventListener('scroll',this.scroll)
this.$refs.login.addEventListener('scroll', this.scroll)
this.maxFixed = this.$refs.login.scrollHeight
},
computed: {},
props: [],
methods: {
introduce (item) {
const arr = {"企业招聘":0,"一键录用":1,"电子合同":2,"职业伤害":3,"工资结算":4,"信用评价":5}
introduce(item) {
const arr = { "企业招聘": 0, "一键录用": 1, "电子合同": 2, "职业伤害": 3, "工资结算": 4, "信用评价": 5 }
this.$refs.intro[arr[item]].scrollIntoView()
},
changeActive(name) {
@@ -74,7 +79,7 @@ export default {
window.location.href = "http://crm.jobslink.cn/crm";
}
},
scroll(){
scroll() {
const tab = this.$refs.tab.$el
const login = this.$refs.login
this.fixedShow =
@@ -84,7 +89,7 @@ export default {
const number = login.scrollTop - tab.offsetTop
const index = Math.floor(number / 410)
const tabData = this.$refs.tab._data
if(tabData.active === 4 && tabData.activeStatus)return
if (tabData.active === 4 && tabData.activeStatus) return
this.$refs.tab.tabNum(index)
}
}

141
src/styles/login.scss
View File

@@ -3,62 +3,67 @@
padding: 0;
width: 100%;
height: 100%;
background-color:#fff;
background-color: #fff;
overflow: auto;
display: flex;
flex-direction: column;
.login-header{
.login-header {
width: 100%;
height: 70px;
min-height: 70px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 40px;
background-color:#fff;
background-color: #fff;
font-size: 16px;
color:#CCCCCC;
color: #cccccc;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.login-logo{
img{
.login-logo {
img {
display: inline-block;
width: 100%;
height: auto;
}
}
.login-menu{
li{
.login-menu {
li {
font-size: 16px;
padding: 0px;
margin-left:40px;
margin-left: 40px;
border-bottom: 0px;
}
}
}
.login-weaper {
width: 100%;
min-width: 1000px;
flex: 1;
justify-content: center;
align-items: center;
background-color: #f4f6fa;
.login-wrapper-small {
width: 100%;
min-width: 1000px;
flex: 1;
justify-content: center;
align-items: center;
background-color:#f4f6fa;
.login-content{
width: 1000px;
background-image: linear-gradient(0deg, #006dd9 0%, #74b2ec 99%);
.login-content {
width: 80%;
min-height: 40vw;
//height: 100%;
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
justify-content: space-around;
align-items: center;
flex-direction: row;
.login-left {
width: 530px;
height: 600px;
width: 30vw;
height: 30vw;
flex-shrink: 0;
position: relative;
.title {
margin-bottom: 40px;
@@ -75,95 +80,100 @@
}
}
.login-border {
width: calc(100% - 484px);
min-height: 600px;
width: calc(50% - 304px);
min-width: 350px;
// width: 500px!important;
// height: 300px;
// min-height: 600px;
box-sizing: border-box;
padding: 50px 40px 0px 0;
padding: 20px;
background-color: #fff;
border-radius: 4px;
// margin-left: 500px;
flex-shrink: 0;
.login-title {
color: #23a8ff;
font-size: 33px;
font-size: 22px;
text-align: center;
font-weight: bold;
}
.login-form {
padding: 0 30px 0 30px;
margin:0 auto;
margin: 0 auto;
.el-form-item {
height:60px;
height: 60px;
margin-bottom: 0px;
color:#333;
color: #333;
.el-form-item__content {
width: 100%;
height: 100%;
font-size: 14px;
color:#333;
color: #333;
.el-input {
height: 100%;
font-size: 14px;
position: relative;
color:#333;
.el-input__inner{
height:auto;
color: #333;
.el-input__inner {
height: auto;
position: absolute;
bottom:20px;
left:10px;
right:0px;
bottom: 20px;
left: 10px;
right: 0px;
line-height: normal;
padding-bottom: 10px;
background: #fff;
border-radius: 0;
font-size: 14px;
color:#333;
color: #333;
font-weight: normal;
border: none;
border-bottom: 1px solid rgb(235, 237, 242);
}
}
.el-form-item__error{
font-size: 12px
.el-form-item__error {
font-size: 12px;
}
.login-code{
position:absolute;
.login-code {
position: absolute;
right: 0px;
bottom: 10px;
height: 30px;
img{
img {
width: auto;
height: 30px;
}
.msg-text{
.msg-text {
cursor: pointer;
color:#5D9DF8;
color: #5d9df8;
font-size: 14px;
}
}
}
}
.forget-pwd{
.forget-pwd {
margin-top: 20px;
text-align: right;
.el-button{
.el-button {
font-size: 14px;
color: #5D9DF8;
color: #5d9df8;
padding: 0px;
}
width: 80px;
float: right;
}
.user-register{
margin-top: 20px;
width: 80px;
float: left;
.user-register {
margin-top: 20px;
width: 80px;
float: left;
text-align: left;
.el-button{
.el-button {
font-size: 14px;
color: #5D9DF8;
color: #5d9df8;
padding: 0px;
}
}
@@ -171,28 +181,29 @@
.login-submit {
width: 100%;
height: 50px;
background:#23a8ff;
background: #23a8ff;
margin-top: 30px;
border-radius: 8px;
font-size: 18px;
letter-spacing: 12px;
color: #FFFFFF;
color: #ffffff;
cursor: pointer;
}
.register-submit{
.register-submit {
width: 100%;
height: 50px;
background:#5D9DF8;
background: #5d9df8;
margin-top: 24px;
border-radius: 8px;
font-size: 18px;
letter-spacing: 12px;
color: #FFFFFF;
color: #ffffff;
cursor: pointer;
}
}
}
}
}
}
.login-footer {
@@ -207,28 +218,28 @@
//align-items: center;
}
input{
input {
box-shadow: 0 0 0 1000px white inset;
}
}
.registerContainer{
.registerContainer {
margin-top: -20px;
}
.introduceWrapBox{
margin: 0 auto;width: 1000px;
.introduceBox{
.introduceWrapBox {
margin: 0 auto;
width: 1000px;
.introduceBox {
display: flex;
background: #FFFFFF;
background: #ffffff;
align-items: center;
justify-content: space-between;
padding: 40px;
margin-bottom: 20px;
h4{
h4 {
font-size: 24px;
color: #333333;
}
p{
p {
font-size: 18px;
color: #666666;
letter-spacing: 0;

58
src/styles/media.scss
View File

@@ -176,36 +176,36 @@
.el-message-box {
width: 98% !important;
}
//登录页面
.login-header,login-footer{
width: 100%!important;
}
.login-container{
width: 100%!important;
margin: 0 auto;
}
.login-left {
display: none !important;
}
// //登录页面
// .login-header,login-footer{
// width: 100%!important;
// }
// .login-container{
// width: 100%!important;
// margin: 0 auto;
// }
// .login-left {
// display: none !important;
// }
.login-weaper {
width: 100%!important;
height: auto!important;
margin: 0 auto!important;
min-width:auto!important;
}
.login-content{
width: 96%!important;
margin: 0 auto!important;
}
.login-border {
width:100%!important;
margin: auto!important;
min-height: 420px!important;
}
.login-main {
width: 100% !important;
}
// .login-weaper {
// width: 100%!important;
// height: auto!important;
// margin: 0 auto!important;
// min-width:auto!important;
// }
// .login-content{
// width: 96%!important;
// margin: 0 auto!important;
// }
// .login-border {
// width:100%!important;
// margin: auto!important;
// min-height: 420px!important;
// }
// .login-main {
// width: 100% !important;
// }
//主框架
.avue-tags {
display: none;