|
|
<template>
|
|
|
<div class="index-container" @click="isspecialboxshow = false">
|
|
|
<!-- title部分 -->
|
|
|
<div class="pagetitle" id="pay">
|
|
|
<div class="w">
|
|
|
<span>
|
|
|
<!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> -->
|
|
|
<router-link to="/main"
|
|
|
><svg class="icon" aria-hidden="true">
|
|
|
<use xlink:href="#icon-dingbulogo"></use></svg
|
|
|
></router-link>
|
|
|
</span>
|
|
|
<span>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<router-link to="/">
|
|
|
<a
|
|
|
href="javascript:;"
|
|
|
:class="routertitleindex === 0 ? 'titleactive' : ''"
|
|
|
>首页</a
|
|
|
></router-link
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link to="/list" @click.native="toList"
|
|
|
><a
|
|
|
href="javascript:;"
|
|
|
:class="routertitleindex === 1 ? 'titleactive' : ''"
|
|
|
>一手职位</a
|
|
|
></router-link
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/mybill"
|
|
|
:class="routertitleindex === 5 ? 'titleactiveafter' : ''"
|
|
|
>我的报名
|
|
|
</router-link>
|
|
|
</li>
|
|
|
<!-- <li>
|
|
|
<router-link to="/serviceoutlets"
|
|
|
><a
|
|
|
href="javascript:;"
|
|
|
:class="routertitleindex === 2 ? 'titleactive' : ''"
|
|
|
>服务网点</a
|
|
|
>
|
|
|
</router-link>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link to="/aboutus">
|
|
|
<a
|
|
|
href="javascript:;"
|
|
|
:class="routertitleindex === 3 ? 'titleactive' : ''"
|
|
|
>关于我们</a
|
|
|
>
|
|
|
</router-link>
|
|
|
</li> -->
|
|
|
</ul>
|
|
|
</span>
|
|
|
|
|
|
<span class="login">
|
|
|
<span v-if="isLogin">
|
|
|
<a-dropdown overlayClassName="logindropdown">
|
|
|
<img
|
|
|
:src="loginValue.imgSrc"
|
|
|
alt=""
|
|
|
v-if="loginValue.imgSrc !== ''"
|
|
|
style="border-radius: 50%"
|
|
|
/>
|
|
|
<span v-else><i class="iconfont icon-morentouxiang"></i></span>
|
|
|
<div class="loginbox" slot="overlay">
|
|
|
<div>
|
|
|
<img
|
|
|
:src="loginValue.imgSrc"
|
|
|
alt=""
|
|
|
v-if="loginValue.imgSrc !== ''"
|
|
|
style="border-radius: 50%"
|
|
|
/>
|
|
|
<span v-else class="iconfont icon-morentouxiang avatar"></span
|
|
|
><span class="username">{{
|
|
|
loginValue.userName || loginValue.nickName || loginValue.tel
|
|
|
}}</span>
|
|
|
</div>
|
|
|
<router-link to="/accountsetting">
|
|
|
<div>
|
|
|
<span
|
|
|
><i class="iconfont icon-gerenzhongxin"></i>个人中心</span
|
|
|
><i class="iconfont icon-youjiantou"></i></div
|
|
|
></router-link>
|
|
|
<!-- <router-link to="/accountsetting"
|
|
|
><div>
|
|
|
<span
|
|
|
><i class="iconfont icon-zhanghaoshezhi"></i
|
|
|
>账号设置</span
|
|
|
><i class="iconfont icon-youjiantou"></i>
|
|
|
</div>
|
|
|
</router-link> -->
|
|
|
<button @click="logout">退出登录</button>
|
|
|
</div>
|
|
|
</a-dropdown>
|
|
|
</span>
|
|
|
<span class="loginbtn" v-else>
|
|
|
<!-- <router-link to="/register">注册</router-link>/ -->
|
|
|
<router-link to="/login"
|
|
|
><button style="cursor: pointer">登录</button></router-link
|
|
|
></span
|
|
|
>
|
|
|
</span>
|
|
|
<!-- <span class="navigationright">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/mytownsman"
|
|
|
:class="routertitleindex === 4 ? 'titleactiveafter' : ''"
|
|
|
>我的老乡
|
|
|
</router-link>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/mybill"
|
|
|
:class="routertitleindex === 5 ? 'titleactiveafter' : ''"
|
|
|
>我的报名
|
|
|
</router-link>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 搜索栏 -->
|
|
|
|
|
|
<router-view
|
|
|
:isspecialboxshow.sync="isspecialboxshow"
|
|
|
:formvalue="formvalue"
|
|
|
:jobMainList="jobMainList"
|
|
|
:isspinning="isspinning"
|
|
|
></router-view>
|
|
|
<!-- 老乡广告 -->
|
|
|
<!-- <div class="fellowtownsman" v-if="laoxiangshow">
|
|
|
<div class="w">
|
|
|
<div class="title">
|
|
|
<h1><span></span>老乡们都想去</h1>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
<div
|
|
|
class="jobinfobox"
|
|
|
v-for="(item, index) in fellowList"
|
|
|
:key="index"
|
|
|
>
|
|
|
<router-link :to="'/detail/' + item.id">
|
|
|
<a href="javascript:;" @click="resetpage">
|
|
|
<div class="imgbox">
|
|
|
<img v-if="item.logo" :src="item.logo" alt="" />
|
|
|
<img v-else src="../../../assets/nopicture.png" alt="" />
|
|
|
<span>服务费<i>1.3</i>元/小时</span>
|
|
|
</div>
|
|
|
<div class="jobname">{{ item.aliasName }}</div>
|
|
|
</a>
|
|
|
</router-link>
|
|
|
<div class="jobinfo">
|
|
|
<span>{{ item.district }}</span>
|
|
|
<span>{{ item.gender }}</span>
|
|
|
<span>{{ item.age }}</span>
|
|
|
</div>
|
|
|
<div class="jobtag">
|
|
|
<span>返费</span>
|
|
|
<span
|
|
|
v-for="(item1, index) in item.jobSpecialLabelNames"
|
|
|
:key="index"
|
|
|
>{{ item1 }}</span
|
|
|
>
|
|
|
</div>
|
|
|
<div class="jobprice">
|
|
|
<template v-if="item.hourlyPay"
|
|
|
><span>{{ item.hourlyPayTemp / 100 }}</span
|
|
|
>元/小时</template
|
|
|
>
|
|
|
<template v-else-if="item.dayPay"
|
|
|
><span>{{ item.hourlyPayTemp / 100 }}</span
|
|
|
>元/日</template
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<!-- banner广告栏 -->
|
|
|
<div class="banner" v-if="isbannershow">
|
|
|
<div class="w">
|
|
|
<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
|
|
|
<!-- <img src="../assets/phone.png" alt="" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- footer部分 -->
|
|
|
<footer v-if="isfootershow">
|
|
|
<div class="w">
|
|
|
<ul>
|
|
|
<li @click="totop"><router-link to="/list">一手职位</router-link></li>
|
|
|
<li></li>
|
|
|
<li @click="totop">
|
|
|
<router-link to="/serviceoutlets">服务网点</router-link>
|
|
|
</li>
|
|
|
<li></li>
|
|
|
<li @click="totop">
|
|
|
<router-link to="/aboutus">关于我们</router-link>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div>
|
|
|
Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
|
|
|
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
|
|
|
>京ICP备16043923号-9</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import joblist from "../components/firstjob/joblist.vue";
|
|
|
import {
|
|
|
JobListApi,
|
|
|
// getCityApi,
|
|
|
} from "../api/job";
|
|
|
|
|
|
import { logoutApi } from "../api/login";
|
|
|
import { disposeJobListData } from "../utils/commonUtil";
|
|
|
|
|
|
export default {
|
|
|
inject: ["reload"],
|
|
|
provide() {
|
|
|
return {
|
|
|
getJobList: this.getJobList,
|
|
|
};
|
|
|
},
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
// joblist,
|
|
|
},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
fellowList: [],
|
|
|
isspinning: false,
|
|
|
isspecialboxshow: false,
|
|
|
isfootershow: true,
|
|
|
laoxiangshow: false,
|
|
|
isbannershow: true,
|
|
|
isLogin: false,
|
|
|
loginValue: {},
|
|
|
jobMainList: [],
|
|
|
formvalue: {
|
|
|
// 筛选的上传参数
|
|
|
district: [], // 城镇数据
|
|
|
monthlyPayStr: [], // 每月工资
|
|
|
ageStr: [], // 年龄数据
|
|
|
jobSpecialLabelIds: [], // 特色标签索引
|
|
|
aliasName: "",
|
|
|
pageNum: 1,
|
|
|
pageSize: 8,
|
|
|
total: null, //分页配置
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
routertitleindex: {
|
|
|
set() {},
|
|
|
get() {
|
|
|
const path = this.$route.fullPath;
|
|
|
if (path.indexOf("serviceoutlets") > -1) {
|
|
|
return 2;
|
|
|
} else if (path.indexOf("list") > -1 || path.indexOf("detail") > -1) {
|
|
|
return 1;
|
|
|
} else if (path.indexOf("aboutus") > -1) {
|
|
|
return 3;
|
|
|
} else if (path.indexOf("main") > -1) {
|
|
|
return 0;
|
|
|
} else if (path.indexOf("mytownsman") > -1) {
|
|
|
return 4;
|
|
|
} else if (path.indexOf("mybill") > -1) {
|
|
|
return 5;
|
|
|
} else {
|
|
|
return 6;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
// isLogin() {
|
|
|
// return localStorage.getItem("LOGIN_DATA") !== null ? true : false;
|
|
|
// },
|
|
|
// loginValue() {
|
|
|
// return localStorage.getItem("LOGIN_DATA") !== null
|
|
|
// ? JSON.parse(localStorage.getItem("LOGIN_DATA"))
|
|
|
// : { tel: "" };
|
|
|
// return JSON.parse(data)
|
|
|
// },
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
routertitleindex() {
|
|
|
const path = this.$route.fullPath;
|
|
|
if (path.indexOf("serviceoutlets") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("list") > -1 || path.indexOf("detail") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("aboutus") > -1) {
|
|
|
this.laoxiangshow = false;
|
|
|
} else {
|
|
|
this.laoxiangshow = true;
|
|
|
}
|
|
|
this.showfooter();
|
|
|
},
|
|
|
$route: {
|
|
|
handler(to, from) {
|
|
|
console.log("ischange");
|
|
|
console.log(to);
|
|
|
console.log(from);
|
|
|
console.dir(this.navigationBarLocation);
|
|
|
window.addEventListener("scroll", this.navigationBarLocation);
|
|
|
window.addEventListener("scroll", this.windowScroll); //监听页面滚动
|
|
|
if (to.fullPath == "/list") {
|
|
|
window.removeEventListener("scroll", this.navigationBarLocation);
|
|
|
return;
|
|
|
} else if (to.fullPath == "/main") {
|
|
|
window.removeEventListener("scroll", this.windowScroll);
|
|
|
return;
|
|
|
}
|
|
|
window.removeEventListener("scroll", this.navigationBarLocation);
|
|
|
window.removeEventListener("scroll", this.windowScroll);
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
},
|
|
|
// isLogin() {
|
|
|
// this.isLogin = JSON.parse(localStorage.getItem("LOGIN_DATA"));
|
|
|
// console.log(this.isLogin);
|
|
|
// },
|
|
|
},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
this.isLogin = sessionStorage.getItem("LOGIN_DATA") !== null ? true : false;
|
|
|
console.log(JSON.parse(sessionStorage.getItem("LOGIN_DATA")));
|
|
|
this.getJobList();
|
|
|
this.isLaoxiangshow();
|
|
|
this.getRecommendJob();
|
|
|
this.showfooter();
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {
|
|
|
console.log(sessionStorage.getItem("LOGIN_DATA"));
|
|
|
|
|
|
this.loginValue =
|
|
|
sessionStorage.getItem("LOGIN_DATA") !== null
|
|
|
? JSON.parse(sessionStorage.getItem("LOGIN_DATA"))
|
|
|
: { tel: "" };
|
|
|
// console.log(this.loginValue);
|
|
|
// console.log(document.querySelector(".ant-pagination-options-quick-jumper"));
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
/**
|
|
|
* 处理后台返回的职位列表
|
|
|
*/
|
|
|
windowScroll() {
|
|
|
// console.log(e);
|
|
|
let scrollTop =
|
|
|
window.pageYOffset ||
|
|
|
document.documentElement.scrollTop ||
|
|
|
document.body.scrollTop;
|
|
|
// console.log(scrollTop); // 获取到页面滚动的值,
|
|
|
let navigation = document.getElementById("navigation");
|
|
|
let content = document.getElementById("maincontent");
|
|
|
// let filterbox = document.querySelector(".w");
|
|
|
// console.log(filterbox);
|
|
|
// console.log(content);
|
|
|
// let left = ("100vw" - "1200px") / 2;
|
|
|
if (this.$route.fullPath == "/list") {
|
|
|
if (scrollTop >= 81) {
|
|
|
navigation.style.position = "fixed";
|
|
|
navigation.style.top = "0px";
|
|
|
navigation.style.boxShadow = "2px 2px 4px 0px rgba(0,0,0,0.05)";
|
|
|
content.style.marginTop = "90px";
|
|
|
} else {
|
|
|
navigation.style.position = "relative";
|
|
|
navigation.style.right = "0";
|
|
|
content.style.marginTop = "16px";
|
|
|
navigation.style.boxShadow = "none";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
navigationBarLocation() {
|
|
|
let navigationBar = document.getElementById("navigationBar");
|
|
|
let aboutBill = document.getElementById("aboutBill");
|
|
|
// console.log(navigationBar.getBoundingClientRect().top);
|
|
|
console.log(aboutBill);
|
|
|
console.log(aboutBill.getBoundingClientRect().top);
|
|
|
if (this.$route.fullPath == "/main") {
|
|
|
if (
|
|
|
navigationBar.getBoundingClientRect().top <= 0 &&
|
|
|
aboutBill.getBoundingClientRect().top < 84
|
|
|
) {
|
|
|
navigationBar.style.position = "fixed";
|
|
|
navigationBar.style.top = "0px";
|
|
|
navigationBar.style.boxShadow = "0 0 10px 0 #eee";
|
|
|
} else if (
|
|
|
navigationBar.getBoundingClientRect().top == 0 &&
|
|
|
aboutBill.getBoundingClientRect().top >= 84
|
|
|
) {
|
|
|
// console.log('isbig');
|
|
|
navigationBar.style.position = "absolute";
|
|
|
navigationBar.style.top = "unset";
|
|
|
navigationBar.style.bottom = "0px";
|
|
|
navigationBar.style.boxShadow = "none";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 获取工作列表
|
|
|
async getJobList(newdata) {
|
|
|
this.isspinning = true;
|
|
|
console.log(this.formvalue);
|
|
|
try {
|
|
|
newdata = {
|
|
|
district: "",
|
|
|
monthlyPayStr: "",
|
|
|
ageStr: "",
|
|
|
jobSpecialLabelIds: "",
|
|
|
aliasName: "",
|
|
|
pageNum: 1,
|
|
|
pageSize: 8,
|
|
|
total: null, //分页配置
|
|
|
};
|
|
|
for (var k in this.formvalue) {
|
|
|
// console.log(this.formvalue[k]);
|
|
|
if (Array.isArray(this.formvalue[k])) {
|
|
|
newdata[k] =
|
|
|
this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
|
|
|
} else {
|
|
|
newdata[k] = this.formvalue[k];
|
|
|
}
|
|
|
}
|
|
|
// console.log(newdata);
|
|
|
// debugger;
|
|
|
// console.log(this.isLogin);
|
|
|
if (this.isLogin) {
|
|
|
const { data } = await JobListApi(newdata);
|
|
|
// console.log(data);
|
|
|
if (data.status === 200) {
|
|
|
this.jobMainList = disposeJobListData(data.data.recordList);
|
|
|
this.formvalue.total = data.data.recordCount;
|
|
|
// console.log(this.jobMainList);
|
|
|
} else {
|
|
|
this.$message.info("数据获取失败");
|
|
|
}
|
|
|
}
|
|
|
this.totop();
|
|
|
// = data.data.recordList;
|
|
|
// console.log(this.formvalue);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
this.isspinning = false;
|
|
|
},
|
|
|
|
|
|
totop() {
|
|
|
// console.log(window);
|
|
|
document.body.scrollTop = 0;
|
|
|
document.documentElement.scrollTop = 0;
|
|
|
// window.body.scrollY = 0;
|
|
|
},
|
|
|
isLaoxiangshow() {
|
|
|
const path = this.$route.fullPath;
|
|
|
if (path.indexOf("serviceoutlets") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("list") > -1 || path.indexOf("detail") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("aboutus") > -1) {
|
|
|
this.laoxiangshow = false;
|
|
|
} else {
|
|
|
this.laoxiangshow = true;
|
|
|
}
|
|
|
},
|
|
|
async getRecommendJob() {
|
|
|
this.isspinning = true;
|
|
|
try {
|
|
|
if (this.isLogin) {
|
|
|
const { data } = await JobListApi({
|
|
|
pageNum: 1,
|
|
|
pageSize: 4,
|
|
|
jobCategory: 608,
|
|
|
});
|
|
|
// console.log(data);
|
|
|
this.fellowList = disposeJobListData(data.data.recordList);
|
|
|
// console.log(this.fellowList);
|
|
|
}
|
|
|
// this.$emit("update:relationList", this.relationList);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
this.isspinning = false;
|
|
|
},
|
|
|
async logout() {
|
|
|
// logoutApi().then((result) => {
|
|
|
// console.log(result);
|
|
|
// });
|
|
|
try {
|
|
|
const data = await logoutApi();
|
|
|
console.log(data);
|
|
|
if (data.status === 200) {
|
|
|
sessionStorage.removeItem("LOGIN_DATA");
|
|
|
this.reload();
|
|
|
this.$router.push("/main");
|
|
|
} else {
|
|
|
console.log(1);
|
|
|
}
|
|
|
|
|
|
// this.fellowList = disposeJobListData(data.data.recordList);
|
|
|
// this.isspinning = false;
|
|
|
// console.log(this.fellowList);
|
|
|
// this.$emit("update:relationList", this.relationList);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
this.$message.warning(error.message);
|
|
|
}
|
|
|
// console.log(data);
|
|
|
// if (data.status === 200) {
|
|
|
// localStorage.removeItem("LOGIN_DATA");
|
|
|
// }
|
|
|
},
|
|
|
resetpage() {
|
|
|
console.log(1);
|
|
|
setTimeout(() => {
|
|
|
this.reload();
|
|
|
document.body.scrollTop = 0;
|
|
|
document.documentElement.scrollTop = 0;
|
|
|
}, 1000);
|
|
|
},
|
|
|
showfooter() {
|
|
|
const path = this.$route.fullPath;
|
|
|
|
|
|
if (path.indexOf("main") > -1) {
|
|
|
this.isbannershow = false;
|
|
|
this.isfootershow = false;
|
|
|
} else {
|
|
|
this.isbannershow = true;
|
|
|
|
|
|
this.isfootershow = true;
|
|
|
}
|
|
|
if (path.indexOf("login") > -1) {
|
|
|
this.isbannershow = false;
|
|
|
}
|
|
|
},
|
|
|
toList() {
|
|
|
console.log(this.$router);
|
|
|
// this.$router.go(0);
|
|
|
// window.location.reload();
|
|
|
this.reload();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.index-container {
|
|
|
height: 100%;
|
|
|
/deep/ .pagetitle {
|
|
|
background-color: #fff;
|
|
|
padding: 14px 0;
|
|
|
width: 100vw;
|
|
|
// font-size: 16px;
|
|
|
.titleactive {
|
|
|
// font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
.w {
|
|
|
overflow: hidden;
|
|
|
// display: flex;
|
|
|
// justify-content: space-between;
|
|
|
// line-height: 36px;
|
|
|
|
|
|
span {
|
|
|
float: left;
|
|
|
}
|
|
|
> span:first-of-type {
|
|
|
display: block;
|
|
|
width: 160px;
|
|
|
height: 52px;
|
|
|
// width: 228px;
|
|
|
// height: 36px;
|
|
|
// img {
|
|
|
// width: 100%;
|
|
|
// height: 100%;
|
|
|
// }
|
|
|
svg {
|
|
|
width: 100%;
|
|
|
height: 52px;
|
|
|
// font-size: 46px;
|
|
|
// line-height: 52px;
|
|
|
// color: #ff6a00;
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
> span:nth-of-type(2) {
|
|
|
ul {
|
|
|
font-size: 16px;
|
|
|
display: flex;
|
|
|
margin-left: 80px;
|
|
|
color: #666666;
|
|
|
li {
|
|
|
margin-right: 40px;
|
|
|
line-height: 52px;
|
|
|
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
a {
|
|
|
transition: none;
|
|
|
&:hover {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.navigationright {
|
|
|
float: right;
|
|
|
margin-right: 24px;
|
|
|
font-size: 16px;
|
|
|
ul {
|
|
|
display: flex;
|
|
|
text-align: center;
|
|
|
line-height: 52px;
|
|
|
|
|
|
li {
|
|
|
cursor: pointer;
|
|
|
a.titleactiveafter {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
a:hover {
|
|
|
color: #ff6a00;
|
|
|
}
|
|
|
&:first-child {
|
|
|
margin-right: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.login {
|
|
|
float: right;
|
|
|
// width: 36px;
|
|
|
line-height: 52px;
|
|
|
.loginbtn {
|
|
|
width: 70px;
|
|
|
}
|
|
|
|
|
|
> span {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
img {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
}
|
|
|
span {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
margin-top: 4px;
|
|
|
// margin-left: 33px;
|
|
|
border-radius: 999px;
|
|
|
// background-color: #ff6a00;
|
|
|
margin-right: -3px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
i {
|
|
|
font-size: 32px;
|
|
|
line-height: 30px;
|
|
|
color: #ff6a00;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #ff842b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 70px;
|
|
|
height: 32px;
|
|
|
font-size: 14px;
|
|
|
margin-top: 10px;
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #ff6a00;
|
|
|
line-height: 30px;
|
|
|
border-radius: 999px;
|
|
|
color: #ff6a00;
|
|
|
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fellowtownsman {
|
|
|
// height: 641px;
|
|
|
background: #ffffff;
|
|
|
.w {
|
|
|
padding: 30px 0;
|
|
|
.title {
|
|
|
font-size: 24px;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 56px;
|
|
|
h1 {
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
margin-top: -4px;
|
|
|
width: 4px;
|
|
|
height: 25px;
|
|
|
margin-right: 8px;
|
|
|
background: #ff6a00;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.main {
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
margin-top: 30px;
|
|
|
.jobinfobox {
|
|
|
width: 288px;
|
|
|
// height: 385px;
|
|
|
margin-bottom: 16px;
|
|
|
margin-right: 20px;
|
|
|
background: #ffffff;
|
|
|
border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
border-radius: 4px;
|
|
|
padding: 20px;
|
|
|
.imgbox {
|
|
|
position: relative;
|
|
|
width: 248px;
|
|
|
height: 186px;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
span {
|
|
|
position: absolute;
|
|
|
padding: 0 10px;
|
|
|
// width: 149px;
|
|
|
height: 28px;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
background: #ff6a00;
|
|
|
border-radius: 16px 16px 16px 0px;
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
color: #ffffff;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
}
|
|
|
.jobname {
|
|
|
height: 52px;
|
|
|
// margin: 12px 0;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 52px;
|
|
|
border-bottom: 1px solid #f2f0ec;
|
|
|
}
|
|
|
.jobinfo {
|
|
|
margin-top: 11px;
|
|
|
opacity: 0.5;
|
|
|
font-size: 18px;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
.jobtag {
|
|
|
margin-top: 12px;
|
|
|
text-align: left;
|
|
|
span:first-child {
|
|
|
color: #ff6a00;
|
|
|
background: rgba(254, 97, 0, 0.1);
|
|
|
}
|
|
|
span {
|
|
|
margin-right: 8px;
|
|
|
font-size: 16px;
|
|
|
padding: 3px 8px;
|
|
|
background: rgba(51, 51, 51, 0.06);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
.jobprice {
|
|
|
margin-top: 12px;
|
|
|
font-size: 18px;
|
|
|
font-weight: normal;
|
|
|
text-align: left;
|
|
|
color: #ff6a00;
|
|
|
line-height: 25px;
|
|
|
span {
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.banner {
|
|
|
height: 72px;
|
|
|
margin-top: 20px;
|
|
|
background-color: rgba(255, 106, 0);
|
|
|
margin-bottom: -20px;
|
|
|
.w {
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
i {
|
|
|
font-size: 32px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
img:last-child {
|
|
|
width: 173px;
|
|
|
height: 42px;
|
|
|
margin-right: 110px;
|
|
|
}
|
|
|
}
|
|
|
// background-color: black;
|
|
|
}
|
|
|
footer {
|
|
|
padding: 30px;
|
|
|
margin-top: 20px;
|
|
|
.w {
|
|
|
ul {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
li {
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
color: #4d575e;
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
li:nth-of-type(2n) {
|
|
|
width: 1px;
|
|
|
height: 20px;
|
|
|
margin: 5px 54px;
|
|
|
background-color: #4d575e;
|
|
|
}
|
|
|
}
|
|
|
div {
|
|
|
text-align: center;
|
|
|
margin-top: 16px;
|
|
|
color: #4d575e;
|
|
|
font-size: 14px;
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
width: 1px;
|
|
|
height: 16px;
|
|
|
margin: 0 10px;
|
|
|
background-color: #4d575e;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.loginbox {
|
|
|
line-height: 36px;
|
|
|
> div:first-child {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 16px 0;
|
|
|
img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
.username {
|
|
|
max-width: 120px;
|
|
|
display: block;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.avatar {
|
|
|
display: block;
|
|
|
line-height: 24px;
|
|
|
font-size: 24px !important;
|
|
|
color: #ff6a00;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
div {
|
|
|
padding: 10px 0;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|