第二版修改1

cyl/dev
王下 4 years ago
parent 822cd7943d
commit 6c4ebe1229

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 968 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

@ -1,7 +1,7 @@
<template> <template>
<div class="recommend-container"> <div class="recommend-container">
<div class="recommendposition" :class="isdetail ? 'showborder' : ''"> <div class="recommendposition" :class="isdetail ? 'showborder' : ''">
<h1 class="bottombox"><i>推荐职位</i></h1> <h1 class="bottombox" style="text-align: center"><i>推荐职位</i></h1>
<div style="text-align: center"> <div style="text-align: center">
<a-spin tip="加载中..." :spinning="isspinning"> </a-spin> <a-spin tip="加载中..." :spinning="isspinning"> </a-spin>
</div> </div>

@ -209,8 +209,8 @@ export default {
.subsetleft { .subsetleft {
display: flex; display: flex;
.imgbox { .imgbox {
width: 328px; width: 409px;
height: 245px; height: 230px;
margin-right: 20px; margin-right: 20px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -224,8 +224,8 @@ export default {
// } // }
img { img {
position: absolute; position: absolute;
width: 100%; // width: 100%;
height: 100%; height: 230px;
// top: 50%; // top: 50%;
// left: 50%; // left: 50%;
left: 0; left: 0;
@ -239,7 +239,7 @@ export default {
.ant-carousel { .ant-carousel {
.slick-slide { .slick-slide {
text-align: center; text-align: center;
height: 270px; height: 230px;
// height: 160px; // height: 160px;
// line-height: 160px; // line-height: 160px;
background: #364d79; background: #364d79;
@ -275,7 +275,10 @@ export default {
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 30px; line-height: 20px;
&:hover {
color: #ff6a00;
}
} }
.jobinfo { .jobinfo {
margin-top: 16px; margin-top: 16px;
@ -284,47 +287,48 @@ export default {
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 22px; line-height: 20px;
} }
.jobtag { .jobtag {
margin-top: 16px; margin-top: 14px;
text-align: left;
span:first-child { span:first-child {
color: #ff6a00; color: #ff6a00;
background: rgba(254, 97, 0, 0.06); background: rgba(254, 97, 0, 0.1);
} }
span { span {
margin-right: 8px; margin-right: 8px;
font-size: 16px; font-size: 16px;
padding: 2px 14px; padding: 2px 10px;
text-align: left;
background: rgba(51, 51, 51, 0.06); background: rgba(51, 51, 51, 0.06);
border-radius: 4px; border-radius: 4px;
} }
} }
.jobpricemonth { .jobpricemonth {
margin-top: 16px; margin-top: 16px;
font-size: 18px; font-size: 16px;
font-weight: 400;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 22px; line-height: 22px;
} }
.jobpricehour { .jobpricehour {
margin-top: 20px; margin-top: 16px;
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
color: #ff6a00; color: #ff6a00;
line-height: 18px; // line-height: 24px;
span { span {
vertical-align: bottom; vertical-align: baseline;
font-size: 24px; font-size: 20px;
line-height: 18px; line-height: 24px;
} }
} }
.billbutton { .billbutton {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin-top: 20px; margin-top: 15px;
span { span {
padding: 0 16px; padding: 0 16px;
height: 36px; height: 36px;
@ -349,6 +353,87 @@ export default {
} }
} }
} }
// .jobinfobox {
// .jobname {
// // margin: 12px 0;
// font-size: 20px;
// font-weight: 600;
// text-align: left;
// color: #4d575e;
// line-height: 30px;
// }
// .jobinfo {
// margin-top: 16px;
// opacity: 0.5;
// font-size: 16px;
// font-weight: 400;
// text-align: left;
// color: #4d575e;
// line-height: 22px;
// }
// .jobtag {
// margin-top: 16px;
// span:first-child {
// color: #ff6a00;
// background: rgba(254, 97, 0, 0.06);
// }
// span {
// margin-right: 8px;
// font-size: 16px;
// padding: 2px 14px;
// text-align: left;
// background: rgba(51, 51, 51, 0.06);
// border-radius: 4px;
// }
// }
// .jobpricemonth {
// margin-top: 16px;
// font-size: 18px;
// text-align: left;
// color: #4d575e;
// line-height: 22px;
// }
// .jobpricehour {
// margin-top: 20px;
// font-size: 18px;
// font-weight: bold;
// text-align: left;
// color: #ff6a00;
// line-height: 18px;
// span {
// vertical-align: bottom;
// font-size: 24px;
// line-height: 18px;
// }
// }
// .billbutton {
// display: flex;
// justify-content: flex-start;
// margin-top: 20px;
// span {
// padding: 0 16px;
// height: 36px;
// margin-right: 20px;
// border-radius: 4px;
// background-color: rgba(254, 97, 0, 0.1);
// font-size: 18px;
// font-weight: bold;
// color: #ff6a00;
// line-height: 34px;
// }
// button {
// width: 160px;
// // padding: 0 16px;
// height: 36px;
// border: none;
// background-color: #ff6a00;
// color: #fff;
// font-weight: bold;
// font-size: 18px;
// border-radius: 4px;
// }
// }
// }
} }
} }
.jobinformationbox { .jobinformationbox {

@ -1,23 +1,10 @@
<template> <template>
<div class="joblist-container"> <div class="joblist-container">
<div class="searchbox"> <!-- <div class="searchbox">
<div class="w"> <div class="w">
<span <span></span>
><router-link to="/list"><h1 class="logo"></h1></router-link
></span>
<span>
<a-input-search
placeholder="企业/公司"
enter-button="搜索"
@keyup.enter="onSearch"
@search="onSearch"
@input="resetsearch"
class="searchinput"
><i slot="prefix" class="iconfont icon-sousuo"></i
></a-input-search>
</span>
</div>
</div> </div>
</div> -->
<!-- 筛选导航 --> <!-- 筛选导航 -->
<div class="navigation"> <div class="navigation">
<div class="w"> <div class="w">
@ -100,6 +87,17 @@
> >
</li> </li>
</ul> </ul>
<span>
<a-input
placeholder="搜索企业/公司"
@keyup.enter="onSearch"
@search="onSearch"
@input="resetsearch"
class="searchinput"
><i slot="prefix" class="iconfont icon-sousuo"></i>
<button slot="suffix">搜索</button>
</a-input>
</span>
</div> </div>
</div> </div>
<!-- 主体部分 --> <!-- 主体部分 -->
@ -325,36 +323,44 @@ export default {
// //
// if(e.city !== undefined){ // if(e.city !== undefined){
if (e.district.length === 0) { if (e.district.length === 0) {
document.getElementById("city").style.width = 105 + "px"; document.getElementById("city").style.width = 95 + "px";
} else { } else {
const result = e.district.join(""); const result = e.district.join("");
console.log(result); console.log(result);
if (result.length > 6) { if (result.length > 6) {
document.getElementById("city").style.width = document.getElementById("city").style.width =
(result.length + 4) * 18 + "px"; (result.length + 3) * 18 + "px";
document.getElementById("city").style.maxWidth = "250px";
document.querySelector("#city").nextElementSibling.style.width = // s document.querySelector("#city").nextElementSibling.style.width = // s
(result.length + 4) * 18 + "px"; (result.length + 3) * 18 + "px";
} else if (result.length > 4) { document.getElementById("city").nextElementSibling.style.maxWidth =
"250px";
} else if (result.length > 5) {
document.getElementById("city").style.width = document.getElementById("city").style.width =
(result.length + 2.6) * 18 + "px"; (result.length + 2.6) * 18 + "px";
document.querySelector("#city").nextElementSibling.style.width = document.querySelector("#city").nextElementSibling.style.width =
(result.length + 2.6) * 18 + "px"; (result.length + 2.6) * 18 + "px";
} else if (result.length > 4) {
document.getElementById("city").style.width =
(result.length + 2.4) * 18 + "px";
document.querySelector("#city").nextElementSibling.style.width =
(result.length + 2.4) * 18 + "px";
} else { } else {
document.getElementById("city").style.width = document.getElementById("city").style.width =
(result.length + 2) * 18 + "px"; (result.length + 1.5) * 18 + "px";
document.getElementById("city").style.minWidth = 72 + "px"; document.getElementById("city").style.minWidth = 72 + "px";
document.querySelector("#city").nextElementSibling.style.width = document.querySelector("#city").nextElementSibling.style.width =
(result.length + 2) * 18 + "px"; (result.length + 1.5) * 18 + "px";
} }
} }
// } // }
// //
if (e.monthlyPayStr.length === 0) { if (e.monthlyPayStr.length === 0) {
document.getElementById("price").style.width = 70 + "px"; document.getElementById("price").style.width = 60 + "px";
} else { } else {
const result = e.monthlyPayStr.join(""); const result = e.monthlyPayStr.join("");
if (result.length >= 0) { if (result.length >= 0) {
document.getElementById("price").style.width = "150px"; document.getElementById("price").style.width = "140px";
document.getElementById("price").nextElementSibling.style.width = document.getElementById("price").nextElementSibling.style.width =
"150px"; "150px";
// document.querySelector(".ant-cascader-picker-label").style.width = // document.querySelector(".ant-cascader-picker-label").style.width =
@ -363,7 +369,7 @@ export default {
} }
// //
if (e.ageStr.length === 0) { if (e.ageStr.length === 0) {
document.getElementById("age").style.width = 70 + "px"; document.getElementById("age").style.width = 60 + "px";
} else { } else {
const result = e.ageStr.join(""); const result = e.ageStr.join("");
if (result.length >= 0) { if (result.length >= 0) {
@ -548,78 +554,34 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.searchbox { // .searchbox {
background-color: #fff; // background-color: #fff;
// border-bottom: 1px solid #eeefef; // // border-bottom: 1px solid #eeefef;
.w { // .w {
// display: flex; // // display: flex;
// justify-content: space-between; // // justify-content: space-between;
overflow: hidden; // overflow: hidden;
height: 100px; // height: 100px;
span { // span {
float: left; // float: left;
} // }
.logo { // .logo {
width: 424px; // width: 424px;
height: 49px; // height: 49px;
margin-top: 26px; // margin-top: 26px;
margin-right: 60px; // margin-right: 60px;
background: url("../../assets/logo.png") no-repeat; // background: url("../../assets/logo.png") no-repeat;
background-size: contain; // background-size: contain;
} // }
span:nth-of-type(2) { // }
margin-top: 27px; // }
i {
font-size: 18px;
margin-left: 4px;
color: #adadad;
}
/deep/ .ant-input {
width: 446px;
height: 46px;
text-indent: 10px;
border-color: #d9d9d9;
box-shadow: none;
font-size: 16px !important;
&::placeholder {
text-indent: 10px;
font-size: 16px;
}
&:hover {
border-color: #d9d9d9;
}
&:focus {
border-color: #ff6a00;
}
}
/deep/ .ant-input-group-addon .ant-btn {
width: 86px;
height: 46px;
font-size: 18px;
background-color: #ff6a00;
border-color: #ff6a00;
box-shadow: none;
}
}
span:nth-of-type(3) {
width: 76px;
height: 76px;
float: right;
margin-top: 12px;
img {
width: 100%;
height: 100%;
}
}
}
}
/deep/ .navigation { /deep/ .navigation {
// margin-top: -1px; // margin-top: -1px;
background-color: #fff; background-color: #fff;
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
height: 50px; height: 72px;
line-height: 50px;
// line-height: 100px;
position: relative; position: relative;
@ -639,8 +601,48 @@ export default {
} }
} }
> .w { > .w {
height: 72px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
> span {
margin-top: 14px;
i {
font-size: 18px;
margin-left: 4px;
color: #adadad;
}
.ant-input {
width: 400px;
height: 32px;
text-indent: 20px;
background: #fff;
border: 1px solid rgba(77, 87, 94, 0.3);
border-radius: 136px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
font-size: 14px !important;
&::placeholder {
text-indent: 20px;
font-size: 14px;
}
&:hover {
border-color: #d9d9d9;
}
&:focus {
border-color: #ff6a00;
}
}
button {
width: 70px;
height: 32px;
background: #ff6a00;
border-color: #ff6a00;
border-radius: 16px;
font-size: 14px;
box-shadow: none;
}
}
.specialbox { .specialbox {
position: absolute; position: absolute;
border-bottom: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;
@ -648,7 +650,7 @@ export default {
// display: ; // display: ;
transition: all 0.4s; transition: all 0.4s;
left: 0; left: 0;
top: 49px; top: 71px;
width: 100vw; width: 100vw;
background-color: #fff; background-color: #fff;
z-index: 999; z-index: 999;
@ -672,10 +674,10 @@ export default {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
li { li {
// margin-right: 30px; margin-top: 24px;
font-size: 16px; font-size: 16px;
color: #4d575e; color: #4d575e;
margin-right: 20px; // margin-right: 20px;
.ant-cascader-picker { .ant-cascader-picker {
width: auto; width: auto;
position: relative; position: relative;
@ -688,7 +690,7 @@ export default {
transform: translateY(-1px) scale(0.5); transform: translateY(-1px) scale(0.5);
} }
.ant-cascader-input { .ant-cascader-input {
width: 70px; width: 60px;
// margin-top: -5px; // margin-top: -5px;
// max-width: 150px !important; // max-width: 150px !important;
border: none; border: none;
@ -706,7 +708,7 @@ export default {
} }
span { span {
// width: 110px; width: 60px;
// max-width: 150px; // max-width: 150px;
color: rgb(255, 106, 0) !important; color: rgb(255, 106, 0) !important;
font-size: 18px; font-size: 18px;
@ -729,14 +731,14 @@ export default {
&::before { &::before {
position: absolute; position: absolute;
left: 0; left: 0;
top: -15px; // top: -15px;
} }
} }
.ant-cascader-picker { .ant-cascader-picker {
width: auto; width: auto;
position: relative; position: relative;
.ant-cascader-input { .ant-cascader-input {
min-width: 105px; min-width: 95px;
&:hover &::placeholder { &:hover &::placeholder {
color: #ff6a00; color: #ff6a00;
} }
@ -761,7 +763,7 @@ export default {
position: relative; position: relative;
div:first-child { div:first-child {
height: 32px; height: 32px;
margin-top: 7px; margin-top: -2px;
line-height: 32px; line-height: 32px;
color: #4d575ecc; color: #4d575ecc;
cursor: pointer; cursor: pointer;
@ -783,9 +785,10 @@ export default {
position: relative; position: relative;
color: #8c8d8f; color: #8c8d8f;
font-size: 16px; font-size: 16px;
margin: 27px 30px 0 25px;
// color: rgba(78, 88, 95, 0.8); // color: rgba(78, 88, 95, 0.8);
transform: translateY(-2px); transform: translateY(-2px);
margin-left: 30px; // margin-left: 25px;
a { a {
transition: all 0.5s; transition: all 0.5s;
line-height: 16px; line-height: 16px;

@ -69,13 +69,13 @@
<span <span
><input ><input
type="checkbox" type="checkbox"
name="register" id="register"
v-model="ischecked" v-model="ischecked"
@change="checked" @change="checked"
style="margin-right: 5px; vertical-align: middle" style="margin-right: 5px; vertical-align: middle"
va va
/> />
<span>下次自动登录</span></span <label for="register">下次自动登录</label></span
> >
<a class="login-form-forgot" href="">忘记密码</a> <a class="login-form-forgot" href="">忘记密码</a>
</div> </div>
@ -158,12 +158,12 @@
<span> <span>
<input <input
type="checkbox" type="checkbox"
name="register" id="register"
v-model="ischecked" v-model="ischecked"
@change="checked" @change="checked"
style="margin-right: 5px; vertical-align: middle" style="margin-right: 5px; vertical-align: middle"
/> />
<span>下次自动登录</span> <label for="register">下次自动登录</label>
</span> </span>
<a class="login-form-forgot" href="">忘记密码</a> <a class="login-form-forgot" href="">忘记密码</a>
</div> </div>
@ -326,7 +326,7 @@ export default {
} }
li { li {
padding: 0 0 4px 0; padding: 0 0 4px 0;
margin-bottom: 30px; margin-bottom: 25px;
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
color: #cccccc; color: #cccccc;
@ -393,16 +393,17 @@ export default {
.autologin { .autologin {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 12px;
> span { > span {
cursor: pointer; cursor: pointer;
input { input {
vertical-align: middle;
&:hover { &:hover {
border-color: #ff6a00; border-color: #ff6a00;
} }
} }
span { label {
transition: all 0.5s; transition: all 0.2s;
} }
&:hover { &:hover {
color: #ff6a00; color: #ff6a00;
@ -414,11 +415,11 @@ export default {
} }
.getrulecode { .getrulecode {
padding: 0 0 0 10px; padding: 0 0 0 10px;
font-size: 14px; font-size: 12px;
width: 82px; width: 82px;
text-align: center; text-align: center;
border-left: 1px #cccccc solid; border-left: 1px #cccccc solid;
line-height: 14px; line-height: 12px;
color: #4d575e; color: #4d575e;
span[data-mark="getcode"] { span[data-mark="getcode"] {

@ -67,13 +67,14 @@ export default {
} }
.middleslogan { .middleslogan {
position: absolute; position: absolute;
top: 300px; top: 40%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%) translateY(-50%);
color: #fff; color: #fff;
z-index: 99999; z-index: 99999;
i { i {
font-size: 90px; font-size: 90px;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
} }
} }
.bottominfo { .bottominfo {

@ -200,7 +200,7 @@ i {
.ant-cascader-menus.agestr { .ant-cascader-menus.agestr {
width: 100vw; width: 100vw;
margin: 0 auto; margin: 0 auto;
top: 186px !important; top: 152px !important;
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
.ant-cascader-menu { .ant-cascader-menu {
@ -219,7 +219,7 @@ i {
} }
.ant-cascader-menus.flitercity { .ant-cascader-menus.flitercity {
left: calc((100vw - 1216px) / 2) !important; left: calc((100vw - 1216px) / 2) !important;
top: 186px !important; top: 152px !important;
border-radius: 0 0 4px 4px !important; border-radius: 0 0 4px 4px !important;
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
@ -247,8 +247,8 @@ i {
} }
h1.bottombox, h1.bottombox,
p.bottombox { p.bottombox {
text-align: left; text-align: center;
border-bottom: 1px solid #eeefef; // border-bottom: 1px solid #eeefef;
margin-bottom: 16px; margin-bottom: 16px;
i { i {

@ -4,7 +4,7 @@ const baseURL = "https://d.matripe.com.cn";
const service = axios.create({ const service = axios.create({
// baseURL: "/api", // url = base url + request url // baseURL: "/api", // url = base url + request url
baseURL: baseURL, // baseURL: "/api", // url = base url + request url // url = base url + request url baseURL: baseURL, // baseURL: "/api", // url = base url + request url // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests withCredentials: true, // send cookies when cross-domain requests
timeout: 10000, // request timeout timeout: 10000, // request timeout
}); });
export default service; export default service;

@ -5,7 +5,7 @@
<div class="slogan"><img src="../assets/slogan1.png" alt="" /></div> <div class="slogan"><img src="../assets/slogan1.png" alt="" /></div>
</div> </div>
<div class="contentright"> <div class="contentright">
<div class="logo"><img src="../assets/logo.png" alt="" /></div> <div class="logo"><img src="../assets/loginlogo.png" alt="" /></div>
<div class="contentbox"> <div class="contentbox">
<router-view></router-view> <router-view></router-view>
</div> </div>
@ -55,7 +55,7 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
.login-container { .login-container {
height: 660px; height: calc(100% - 80px);
width: 100%; width: 100%;
position: relative; position: relative;
// background: url("../assets/Bg.png") no-repeat center; // background: url("../assets/Bg.png") no-repeat center;
@ -64,8 +64,8 @@ export default {
.centerbox { .centerbox {
position: absolute; position: absolute;
width: 800px; width: 800px;
height: 520px; height: 480px;
background-color: pink; // background-color: pink;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -103,9 +103,9 @@ export default {
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
.logo { .logo {
width: 245px; width: 120px;
height: 34px; height: 52px;
margin: 40px auto 30px; margin: 40px auto 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;

@ -5,7 +5,9 @@
<div class="w"> <div class="w">
<span> <span>
<!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> --> <!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> -->
<img src="../assets/toplogo.png" alt="" /> <router-link to="/list"
><img src="../assets/toplogo.png" alt=""
/></router-link>
</span> </span>
<span> <span>
<ul> <ul>
@ -61,7 +63,9 @@
</a-dropdown> </a-dropdown>
<span v-if="!isLogin"> <span v-if="!isLogin">
<!-- <router-link to="/register">注册</router-link>/ --> <!-- <router-link to="/register">注册</router-link>/ -->
<router-link to="/login"><button>登录</button></router-link></span <router-link to="/login"
><button style="cursor: pointer">登录</button></router-link
></span
> >
</span> </span>
</div> </div>
@ -396,7 +400,7 @@ export default {
showfooter() { showfooter() {
const path = this.$route.fullPath; const path = this.$route.fullPath;
if (path.indexOf("main") > -1) { if (path.indexOf("main") > -1 || path.indexOf("login") > -1) {
this.isfootershow = false; this.isfootershow = false;
} else { } else {
this.isfootershow = true; this.isfootershow = true;
@ -451,6 +455,9 @@ export default {
margin-right: 40px; margin-right: 40px;
line-height: 52px; line-height: 52px;
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05); text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
&:hover {
color: #ff6a00;
}
} }
} }
} }
@ -622,7 +629,7 @@ export default {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
color: #4d575e; color: #4d575e;
font-size: 14px;
i { i {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

Loading…
Cancel
Save