第一代页面

cyl/dev
王下 4 years ago
parent 7214e33ab9
commit 822cd7943d

@ -1,9 +1,31 @@
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view v-if="isRouterViewshow" />
</div> </div>
</template> </template>
<script>
export default {
provide() {
return {
reload: this.loader,
};
},
data() {
return {
isRouterViewshow: true,
};
},
methods: {
loader() {
this.isRouterViewshow = false;
console.log(123);
this.$nextTick(() => {
this.isRouterViewshow = true;
});
},
},
};
</script>
<style lang="less"> <style lang="less">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
@ -11,6 +33,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
// text-align: center; // text-align: center;
color: #2c3e50; color: #2c3e50;
height: 100%;
} }
#nav { #nav {

@ -15,3 +15,18 @@ export function getPhoneCodeApi(data) {
params: data, params: data,
}); });
} }
// 注册接口
export function registerApi(data) {
return request({
url: "/yishoudan/register",
method: "post",
params: data,
});
}
// 退出登录
export function logoutApi() {
return request({
url: "/yishoudan/logout",
// params: data,
});
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 568 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 MiB

@ -55,51 +55,63 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6ef;</span> <span class="icon iconfont">&#xe6f5;</span>
<div class="name">失败</div> <div class="name">下拉</div>
<div class="code-name">&amp;#xe6ef;</div> <div class="code-name">&amp;#xe6f5;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6ee;</span> <span class="icon iconfont">&#xe608;</span>
<div class="name">成功</div> <div class="name">搜索</div>
<div class="code-name">&amp;#xe6ee;</div> <div class="code-name">&amp;#xe608;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6ed;</span> <span class="icon iconfont">&#xe6f4;</span>
<div class="name">未选中</div> <div class="name">未选中</div>
<div class="code-name">&amp;#xe6ed;</div> <div class="code-name">&amp;#xe6f4;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6ec;</span> <span class="icon iconfont">&#xe6f3;</span>
<div class="name">选中</div> <div class="name">短信验证</div>
<div class="code-name">&amp;#xe6ec;</div> <div class="code-name">&amp;#xe6f3;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6ea;</span> <span class="icon iconfont">&#xe6f2;</span>
<div class="name">短信验证</div> <div class="name">手机</div>
<div class="code-name">&amp;#xe6ea;</div> <div class="code-name">&amp;#xe6f2;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6eb;</span> <span class="icon iconfont">&#xe6f1;</span>
<div class="name">手机</div> <div class="name">密码</div>
<div class="code-name">&amp;#xe6eb;</div> <div class="code-name">&amp;#xe6f1;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6e8;</span> <span class="icon iconfont">&#xe6f0;</span>
<div class="name">用户名</div> <div class="name">用户名</div>
<div class="code-name">&amp;#xe6e8;</div> <div class="code-name">&amp;#xe6f0;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6e7;</span> <span class="icon iconfont">&#xe6ef;</span>
<div class="name">密码</div> <div class="name">失败</div>
<div class="code-name">&amp;#xe6e7;</div> <div class="code-name">&amp;#xe6ef;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ee;</span>
<div class="name">成功</div>
<div class="code-name">&amp;#xe6ee;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ec;</span>
<div class="name">选中</div>
<div class="code-name">&amp;#xe6ec;</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -126,12 +138,6 @@
<div class="code-name">&amp;#xe6e2;</div> <div class="code-name">&amp;#xe6e2;</div>
</li> </li>
<li class="dib">
<span class="icon iconfont">&#xe6de;</span>
<div class="name">下拉</div>
<div class="code-name">&amp;#xe6de;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6df;</span> <span class="icon iconfont">&#xe6df;</span>
<div class="name">定位</div> <div class="name">定位</div>
@ -162,9 +168,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1642666391709') format('woff2'), src: url('iconfont.woff2?t=1643011389900') format('woff2'),
url('iconfont.woff?t=1642666391709') format('woff'), url('iconfont.woff?t=1643011389900') format('woff'),
url('iconfont.ttf?t=1642666391709') format('truetype'); url('iconfont.ttf?t=1643011389900') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -191,20 +197,20 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shibai"></span> <span class="icon iconfont icon-xiala"></span>
<div class="name"> <div class="name">
失败 下拉
</div> </div>
<div class="code-name">.icon-shibai <div class="code-name">.icon-xiala
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-chenggong"></span> <span class="icon iconfont icon-sousuo"></span>
<div class="name"> <div class="name">
成功 搜索
</div> </div>
<div class="code-name">.icon-chenggong <div class="code-name">.icon-sousuo
</div> </div>
</li> </li>
@ -217,15 +223,6 @@
</div> </div>
</li> </li>
<li class="dib">
<span class="icon iconfont icon-xuanzhong"></span>
<div class="name">
选中
</div>
<div class="code-name">.icon-xuanzhong
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-duanxinyanzheng"></span> <span class="icon iconfont icon-duanxinyanzheng"></span>
<div class="name"> <div class="name">
@ -244,6 +241,15 @@
</div> </div>
</li> </li>
<li class="dib">
<span class="icon iconfont icon-mima"></span>
<div class="name">
密码
</div>
<div class="code-name">.icon-mima
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-yonghuming"></span> <span class="icon iconfont icon-yonghuming"></span>
<div class="name"> <div class="name">
@ -254,11 +260,29 @@
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-mima"></span> <span class="icon iconfont icon-shibai"></span>
<div class="name"> <div class="name">
密码 失败
</div> </div>
<div class="code-name">.icon-mima <div class="code-name">.icon-shibai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chenggong"></span>
<div class="name">
成功
</div>
<div class="code-name">.icon-chenggong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuanzhong"></span>
<div class="name">
选中
</div>
<div class="code-name">.icon-xuanzhong
</div> </div>
</li> </li>
@ -298,15 +322,6 @@
</div> </div>
</li> </li>
<li class="dib">
<span class="icon iconfont icon-xiala"></span>
<div class="name">
下拉
</div>
<div class="code-name">.icon-xiala
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-dingwei"></span> <span class="icon iconfont icon-dingwei"></span>
<div class="name"> <div class="name">
@ -354,18 +369,18 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shibai"></use> <use xlink:href="#icon-xiala"></use>
</svg> </svg>
<div class="name">失败</div> <div class="name">下拉</div>
<div class="code-name">#icon-shibai</div> <div class="code-name">#icon-xiala</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chenggong"></use> <use xlink:href="#icon-sousuo"></use>
</svg> </svg>
<div class="name">成功</div> <div class="name">搜索</div>
<div class="code-name">#icon-chenggong</div> <div class="code-name">#icon-sousuo</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -376,14 +391,6 @@
<div class="code-name">#icon-weixuanzhong</div> <div class="code-name">#icon-weixuanzhong</div>
</li> </li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanzhong"></use>
</svg>
<div class="name">选中</div>
<div class="code-name">#icon-xuanzhong</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duanxinyanzheng"></use> <use xlink:href="#icon-duanxinyanzheng"></use>
@ -400,6 +407,14 @@
<div class="code-name">#icon-shouji</div> <div class="code-name">#icon-shouji</div>
</li> </li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mima"></use>
</svg>
<div class="name">密码</div>
<div class="code-name">#icon-mima</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yonghuming"></use> <use xlink:href="#icon-yonghuming"></use>
@ -410,10 +425,26 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mima"></use> <use xlink:href="#icon-shibai"></use>
</svg> </svg>
<div class="name">密码</div> <div class="name">失败</div>
<div class="code-name">#icon-mima</div> <div class="code-name">#icon-shibai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chenggong"></use>
</svg>
<div class="name">成功</div>
<div class="code-name">#icon-chenggong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanzhong"></use>
</svg>
<div class="name">选中</div>
<div class="code-name">#icon-xuanzhong</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -448,14 +479,6 @@
<div class="code-name">#icon-guanggao</div> <div class="code-name">#icon-guanggao</div>
</li> </li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiala"></use>
</svg>
<div class="name">下拉</div>
<div class="code-name">#icon-xiala</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingwei"></use> <use xlink:href="#icon-dingwei"></use>

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3135652 */ font-family: "iconfont"; /* Project id 3135652 */
src: url('iconfont.woff2?t=1642666391709') format('woff2'), src: url('iconfont.woff2?t=1643011389900') format('woff2'),
url('iconfont.woff?t=1642666391709') format('woff'), url('iconfont.woff?t=1643011389900') format('woff'),
url('iconfont.ttf?t=1642666391709') format('truetype'); url('iconfont.ttf?t=1643011389900') format('truetype');
} }
.iconfont { .iconfont {
@ -13,36 +13,44 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-shibai:before { .icon-xiala:before {
content: "\e6ef"; content: "\e6f5";
} }
.icon-chenggong:before { .icon-sousuo:before {
content: "\e6ee"; content: "\e608";
} }
.icon-weixuanzhong:before { .icon-weixuanzhong:before {
content: "\e6ed"; content: "\e6f4";
}
.icon-xuanzhong:before {
content: "\e6ec";
} }
.icon-duanxinyanzheng:before { .icon-duanxinyanzheng:before {
content: "\e6ea"; content: "\e6f3";
} }
.icon-shouji:before { .icon-shouji:before {
content: "\e6eb"; content: "\e6f2";
}
.icon-mima:before {
content: "\e6f1";
} }
.icon-yonghuming:before { .icon-yonghuming:before {
content: "\e6e8"; content: "\e6f0";
} }
.icon-mima:before { .icon-shibai:before {
content: "\e6e7"; content: "\e6ef";
}
.icon-chenggong:before {
content: "\e6ee";
}
.icon-xuanzhong:before {
content: "\e6ec";
} }
.icon-weixin:before { .icon-weixin:before {
@ -61,10 +69,6 @@
content: "\e6e2"; content: "\e6e2";
} }
.icon-xiala:before {
content: "\e6de";
}
.icon-dingwei:before { .icon-dingwei:before {
content: "\e6df"; content: "\e6df";
} }

File diff suppressed because one or more lines are too long

@ -6,60 +6,74 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "27322967", "icon_id": "27411236",
"name": "失败", "name": "下拉",
"font_class": "shibai", "font_class": "xiala",
"unicode": "e6ef", "unicode": "e6f5",
"unicode_decimal": 59119 "unicode_decimal": 59125
}, },
{ {
"icon_id": "27322870", "icon_id": "4550306",
"name": "成功", "name": "搜索",
"font_class": "chenggong", "font_class": "sousuo",
"unicode": "e6ee", "unicode": "e608",
"unicode_decimal": 59118 "unicode_decimal": 58888
}, },
{ {
"icon_id": "27321956", "icon_id": "27386047",
"name": "未选中", "name": "未选中",
"font_class": "weixuanzhong", "font_class": "weixuanzhong",
"unicode": "e6ed", "unicode": "e6f4",
"unicode_decimal": 59117 "unicode_decimal": 59124
}, },
{ {
"icon_id": "27321955", "icon_id": "27386041",
"name": "选中",
"font_class": "xuanzhong",
"unicode": "e6ec",
"unicode_decimal": 59116
},
{
"icon_id": "27321944",
"name": "短信验证", "name": "短信验证",
"font_class": "duanxinyanzheng", "font_class": "duanxinyanzheng",
"unicode": "e6ea", "unicode": "e6f3",
"unicode_decimal": 59114 "unicode_decimal": 59123
}, },
{ {
"icon_id": "27321945", "icon_id": "27386034",
"name": "手机", "name": "手机",
"font_class": "shouji", "font_class": "shouji",
"unicode": "e6eb", "unicode": "e6f2",
"unicode_decimal": 59115 "unicode_decimal": 59122
},
{
"icon_id": "27385998",
"name": "密码",
"font_class": "mima",
"unicode": "e6f1",
"unicode_decimal": 59121
}, },
{ {
"icon_id": "27321931", "icon_id": "27385997",
"name": "用户名", "name": "用户名",
"font_class": "yonghuming", "font_class": "yonghuming",
"unicode": "e6e8", "unicode": "e6f0",
"unicode_decimal": 59112 "unicode_decimal": 59120
}, },
{ {
"icon_id": "27321721", "icon_id": "27322967",
"name": "密码", "name": "失败",
"font_class": "mima", "font_class": "shibai",
"unicode": "e6e7", "unicode": "e6ef",
"unicode_decimal": 59111 "unicode_decimal": 59119
},
{
"icon_id": "27322870",
"name": "成功",
"font_class": "chenggong",
"unicode": "e6ee",
"unicode_decimal": 59118
},
{
"icon_id": "27321955",
"name": "选中",
"font_class": "xuanzhong",
"unicode": "e6ec",
"unicode_decimal": 59116
}, },
{ {
"icon_id": "27321723", "icon_id": "27321723",
@ -89,13 +103,6 @@
"unicode": "e6e2", "unicode": "e6e2",
"unicode_decimal": 59106 "unicode_decimal": 59106
}, },
{
"icon_id": "27146283",
"name": "下拉",
"font_class": "xiala",
"unicode": "e6de",
"unicode_decimal": 59102
},
{ {
"icon_id": "27146284", "icon_id": "27146284",
"name": "定位", "name": "定位",

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

@ -1,7 +1,7 @@
<template> <template>
<div class="recommend-container"> <div class="recommend-container">
<div class="recommendposition"> <div class="recommendposition" :class="isdetail ? 'showborder' : ''">
<h1><span></span>推荐职位</h1> <h1 class="bottombox"><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>
@ -10,18 +10,26 @@
v-for="(item, index) in relationList" v-for="(item, index) in relationList"
:key="index" :key="index"
> >
<div class="imgbox"> <router-link :to="'/detail/' + item.id">
<img <a href="javascript:;" @click="resetpage">
:src="item.logo || 'require(../../assets/美特科技.png)'" <div class="imgbox">
alt="" <img v-if="item.logo" :src="item.logo" alt="" />
/> <img v-else src="../../../../static/img/nopicture.png" alt="" />
<span>服务费<i>1.3</i>/小时</span> <span>服务费<i>1.3</i>/小时</span>
</div> </div>
<div class="jobname">{{ item.aliasName }}</div> <div class="jobname">
{{
item.aliasName !== null && item.aliasName !== ""
? item.aliasName
: item.storeName
}}
</div>
</a>
</router-link>
<div class="jobinfo"> <div class="jobinfo">
<span>{{ item.district }}</span> <span>{{ item.district }}</span>
<span>{{ item.gender }}</span> <span>{{ item.gender }}</span>
<span>{{ item.age }}</span> <span>{{ item.age }}</span>
</div> </div>
<div class="jobtag"> <div class="jobtag">
<span>返费</span> <span>返费</span>
@ -53,6 +61,7 @@ import {
// getCityApi, // getCityApi,
} from "../../../api/job"; } from "../../../api/job";
export default { export default {
inject: ["reload"],
// //
name: "", name: "",
// //
@ -63,6 +72,7 @@ export default {
data() { data() {
return { return {
isspinning: false, isspinning: false,
isdetail: false,
relationList: [], relationList: [],
}; };
}, },
@ -81,7 +91,13 @@ export default {
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子 * el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内 * 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/ */
mounted() {}, mounted() {
console.log(this.$route.fullPath);
if (this.$route.fullPath.indexOf("detail") > -1) {
this.isdetail = true;
}
console.log(this.isdetail);
},
// //
methods: { methods: {
async getRecommendJob() { async getRecommendJob() {
@ -94,26 +110,42 @@ export default {
}); });
console.log(data); console.log(data);
this.relationList = disposeJobListData(data.data.recordList); this.relationList = disposeJobListData(data.data.recordList);
this.isspinning = false; this.isspinning = false;
console.log(this.relationList); console.log(this.relationList);
this.relationList.forEach((item) => {
item.age = "";
});
// this.$emit("update:relationList", this.relationList); // this.$emit("update:relationList", this.relationList);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
}, },
resetpage() {
console.log(1);
setTimeout(() => {
this.reload();
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}, 1000);
},
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.showborder {
border: 1px solid rgba(77, 87, 94, 0.1);
}
.recommendposition { .recommendposition {
width: 270px; width: 270px;
// height: 1008px; // height: 1008px;
background: #ffffff; background: #ffffff;
border-radius: 4px; border-radius: 4px;
padding: 20px 20px 4px 20px; padding: 20px 20px 4px 20px;
h1 { h1 {
margin-bottom: 12px; // margin-bottom: 12px;
text-align: left; text-align: left;
span { span {
display: inline-block; display: inline-block;
@ -128,14 +160,15 @@ export default {
.jobinfobox { .jobinfobox {
width: 230px; width: 230px;
// height: 298px; // height: 298px;
margin-bottom: 16px; // margin-bottom: 16px;
background: #ffffff; background: #ffffff;
border: 1px solid rgba(77, 87, 94, 0.1); // border: 1px solid rgba(77, 87, 94, 0.1);
border-radius: 4px; border-radius: 4px;
padding: 16px; // padding: 16px;
margin-bottom: 20px;
.imgbox { .imgbox {
width: 198px; width: 230px;
height: 148px; height: 172px;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
@ -165,10 +198,11 @@ export default {
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 45px; line-height: 45px;
margin-top: 12px;
border-bottom: 1px solid #f2f0ec; border-bottom: 1px solid #f2f0ec;
} }
.jobinfo { .jobinfo {
margin-top: 11px; margin-top: 16px;
opacity: 0.5; opacity: 0.5;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
@ -177,14 +211,14 @@ export default {
line-height: 18px; line-height: 18px;
} }
.jobtag { .jobtag {
margin-top: 8px; margin-top: 12px;
text-align: left; text-align: left;
span:first-child { span:first-child {
color: #ff6a00; color: #ff6a00;
background: rgba(254, 97, 0, 0.1); background: rgba(254, 97, 0, 0.1);
} }
span { span {
margin-right: 8px; margin-right: 12px;
font-size: 14px; font-size: 14px;
padding: 3px 5px; padding: 3px 5px;
background: rgba(51, 51, 51, 0.06); background: rgba(51, 51, 51, 0.06);
@ -192,7 +226,7 @@ export default {
} }
} }
.jobprice { .jobprice {
margin-top: 12px; margin-top: 16px;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
color: #ff6a00; color: #ff6a00;

@ -11,6 +11,7 @@
effect="fade" effect="fade"
:dots="true" :dots="true"
ref="scrollimg" ref="scrollimg"
v-if="storeImage.length !== 0"
> >
<div <div
slot="prevArrow" slot="prevArrow"
@ -33,13 +34,14 @@
alt="" alt=""
/> />
</a-carousel> </a-carousel>
<img v-else src="../../../static/img/nopicture.png" alt="" />
</div> </div>
<div class="jobinfobox"> <div class="jobinfobox">
<div class="jobname">{{ jobDetail.aliasName }}</div> <div class="jobname">{{ jobDetail.aliasName }}</div>
<div class="jobinfo"> <div class="jobinfo">
<span>{{ jobDetail.district }}</span> <span>{{ jobDetail.district }}</span>
<span>{{ jobDetail.gender }}</span> <span>{{ jobDetail.gender }}</span>
<span>{{ jobDetail.age }}</span> <span>{{ jobDetail.age }}</span>
</div> </div>
<div class="jobtag"> <div class="jobtag">
<span>返费</span> <span>返费</span>
@ -60,7 +62,7 @@
>/小时</template >/小时</template
> >
<template v-else-if="jobDetail.dayPay" <template v-else-if="jobDetail.dayPay"
><span>{{ jobDetail.hourlyPay }}</span ><span>{{ jobDetail.dayPay }}</span
>/</template >/</template
> >
</div> </div>
@ -72,7 +74,7 @@
</div> </div>
</div> </div>
<div class="jobinformationbox"> <div class="jobinformationbox">
<h1><span class="beforeblock"></span>职位信息</h1> <h1 class="bottombox"><i>职位信息</i></h1>
<div <div
v-html="jobDetail.baseInfo" v-html="jobDetail.baseInfo"
@ -82,12 +84,12 @@
</div> </div>
<div class="maincontentright"> <div class="maincontentright">
<div class="hotphone"> <div class="hotphone">
<h1>服务热线</h1> <h1 class="bottombox"><i>服务热线</i></h1>
<p>0371-666666666</p> <p>0371-666666666</p>
</div> </div>
<div class="companyinfo"> <div class="companyinfo">
<div class="companydetail"> <div class="companydetail">
<h1><span class="beforeblock"></span>企业详情</h1> <h1 class="bottombox"><i>企业详情</i></h1>
<p>无锡健鼎科技</p> <p>无锡健鼎科技</p>
<div class="imgbox"> <div class="imgbox">
<img src="../../assets/无锡健鼎.png" alt="" /> <img src="../../assets/无锡健鼎.png" alt="" />
@ -98,7 +100,7 @@
</p> </p>
</div> </div>
<div class="companylocation"> <div class="companylocation">
<h1><span class="beforeblock"></span>企业位置</h1> <h1 class="bottombox"><i>企业位置</i></h1>
<div class="imgbox"> <div class="imgbox">
<img src="../../assets/map.png" alt="" /> <img src="../../assets/map.png" alt="" />
</div> </div>
@ -164,6 +166,7 @@ export default {
data.data.storeImage.forEach((item) => { data.data.storeImage.forEach((item) => {
this.storeImage.push(item.url); this.storeImage.push(item.url);
}); });
console.log(this.storeImage);
} else { } else {
this.$message.warning("数据获取失败"); this.$message.warning("数据获取失败");
} }
@ -182,6 +185,8 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
.detail-container { .detail-container {
overflow: hidden; overflow: hidden;
border-top: 1px solid #eeefef;
background-color: #fff; background-color: #fff;
} }
/deep/ .maincontent { /deep/ .maincontent {
@ -198,14 +203,17 @@ export default {
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
width: 914px; width: 914px;
height: 302px; // height: 302px;
border-radius: 4px;
border: 1px solid #eeefef; border: 1px solid #eeefef;
.subsetleft { .subsetleft {
display: flex; display: flex;
.imgbox { .imgbox {
width: 360px; width: 328px;
height: 270px; height: 245px;
margin-right: 20px; margin-right: 20px;
overflow: hidden;
position: relative;
// .slick-active { // .slick-active {
// button { // button {
// background-color: #fe6a00 !important; // background-color: #fe6a00 !important;
@ -215,9 +223,16 @@ export default {
// transition: all 0s ease 0s !important; // transition: all 0s ease 0s !important;
// } // }
img { img {
position: relative; position: absolute;
width: 100%;
height: 100%;
// top: 50%; // top: 50%;
// left: 50%; // left: 50%;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
// transform: translateX(-50%) translateY(-50%); // transform: translateX(-50%) translateY(-50%);
} }
@ -256,34 +271,32 @@ export default {
.jobinfobox { .jobinfobox {
.jobname { .jobname {
// margin: 12px 0; // margin: 12px 0;
font-size: 24px; font-size: 20px;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 33px; line-height: 30px;
} }
.jobinfo { .jobinfo {
margin-top: 16px; margin-top: 16px;
opacity: 0.5; opacity: 0.5;
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 25px; line-height: 22px;
} }
.jobtag { .jobtag {
margin-top: 16px; margin-top: 16px;
span:first-child { span:first-child {
color: #ff6a00; color: #ff6a00;
background: rgba(254, 97, 0, 0.06); background: rgba(254, 97, 0, 0.06);
} }
span { span {
margin-right: 8px; margin-right: 8px;
font-size: 18px; font-size: 16px;
padding: 4px 8px; padding: 2px 14px;
text-align: left; text-align: left;
background: rgba(51, 51, 51, 0.06); background: rgba(51, 51, 51, 0.06);
border-radius: 4px; border-radius: 4px;
} }
@ -293,43 +306,45 @@ export default {
font-size: 18px; font-size: 18px;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 25px; line-height: 22px;
} }
.jobpricehour { .jobpricehour {
margin-top: 12px; margin-top: 20px;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
color: #ff6a00; color: #ff6a00;
// line-height: 24px; line-height: 18px;
span { span {
vertical-align: baseline; vertical-align: bottom;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 18px;
} }
} }
.billbutton { .billbutton {
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
margin-top: 20px; margin-top: 20px;
span { span {
padding: 13px; padding: 0 16px;
margin-right: 24px; height: 36px;
margin-right: 20px;
border-radius: 4px; border-radius: 4px;
background-color: rgba(254, 97, 0, 0.1); background-color: rgba(254, 97, 0, 0.1);
font-size: 24px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #ff6a00; color: #ff6a00;
line-height: 24px; line-height: 34px;
} }
button { button {
width: 160px; width: 160px;
height: 50px; // padding: 0 16px;
height: 36px;
border: none; border: none;
background-color: #ff6a00; background-color: #ff6a00;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 18px;
border-radius: 4px; border-radius: 4px;
} }
} }
@ -339,6 +354,7 @@ export default {
.jobinformationbox { .jobinformationbox {
width: 914px; width: 914px;
border: 1px solid #eeefef; border: 1px solid #eeefef;
border-radius: 4px;
padding: 20px; padding: 20px;
h1 { h1 {
font-size: 24px; font-size: 24px;
@ -374,26 +390,23 @@ export default {
} }
.hotphone { .hotphone {
width: 270px; width: 270px;
height: 106px; // height: 114px;
padding: 20px 32px; padding: 20px;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
border: 1px solid #eeefef; border: 1px solid #eeefef;
p { p {
font-size: 24px; font-size: 24px;
color: #ff6a00; color: #ff6a00;
font-weight: bold; // font-weight: bold;
margin-top: 12px; margin-top: 12px;
} }
} }
.companyinfo { .companyinfo {
padding: 20px; padding: 20px;
border-radius: 4px;
border: 1px solid #eeefef; border: 1px solid #eeefef;
.companydetail { .companydetail {
h1 {
text-align: left;
margin-bottom: 12px;
}
p:first-of-type { p:first-of-type {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
@ -421,8 +434,9 @@ export default {
} }
.companylocation { .companylocation {
h1 { h1 {
height: 50px; // height: 50px;
line-height: 50px; // line-height: 50px;
padding-top: 10px;
text-align: left; text-align: left;
border-top: 1px solid #eeefef; border-top: 1px solid #eeefef;
} }

@ -1,5 +1,23 @@
<template> <template>
<div class="joblist-container"> <div class="joblist-container">
<div class="searchbox">
<div class="w">
<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 class="navigation"> <div class="navigation">
<div class="w"> <div class="w">
@ -27,17 +45,21 @@
@change="onChange" @change="onChange"
placeholder="选择城市" placeholder="选择城市"
v-model="formvalue.district" v-model="formvalue.district"
popupClassName="flitercity"
id="city" id="city"
/> ><i slot="suffixIcon" class="iconfont icon-xiala"></i
></a-cascader>
</li> </li>
<li> <li>
<a-cascader <a-cascader
:options="options.price" :options="options.price"
placeholder="工价" placeholder="工价"
@change="onChange" @change="onChange"
popupClassName="monthlypay"
v-model="formvalue.monthlyPayStr" v-model="formvalue.monthlyPayStr"
id="price" id="price"
/> ><i slot="suffixIcon" class="iconfont icon-xiala"></i
></a-cascader>
</li> </li>
<li> <li>
@ -45,9 +67,11 @@
:options="options.age" :options="options.age"
placeholder="年龄" placeholder="年龄"
@change="onChange" @change="onChange"
popupClassName="agestr"
v-model="formvalue.ageStr" v-model="formvalue.ageStr"
id="age" id="age"
/> ><i slot="suffixIcon" class="iconfont icon-xiala"></i
></a-cascader>
</li> </li>
<li class="special"> <li class="special">
<div <div
@ -63,7 +87,18 @@
></i> ></i>
</div> </div>
</li> </li>
<li @click="claerfilter"><a href="javascript:;">清空筛选</a></li> <li @click="claerfilter" class="claerfilter">
<a
href="javascript:;"
v-if="
formvalue.district.length !== 0 ||
formvalue.monthlyPayStr.length !== 0 ||
formvalue.ageStr.length !== 0 ||
formvalue.jobSpecialLabelIds.length !== 0
"
>清空筛选</a
>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -81,56 +116,71 @@
</div> </div>
<div v-if="!isspinning"> <div v-if="!isspinning">
<div class="subset" v-for="(item, index) in jobMainList" :key="index"> <div class="subset" v-for="(item, index) in jobMainList" :key="index">
<router-link :to="'/detail/' + item.id"> <div class="subsetleft">
<div class="subsetleft"> <router-link target="_blank" :to="'/detail/' + item.id">
<div class="imgbox"> <div class="imgbox" @click="totop">
<img <img v-if="item.logo.length !== 0" :src="item.logo" />
:src="item.logo || 'require(../../assets/美特科技.png)'" <img v-else src="../../../static/img/nopicture.png" />
/> </div>
</router-link>
<div class="jobinfobox">
<router-link target="_blank" :to="'/detail/' + item.id">
<div class="jobname" @click="totop">{{ item.aliasName }}</div>
</router-link>
<div class="jobinfo">
<span>{{ item.district }}</span>
<span>{{ item.gender }}</span>
<span>{{ item.age }}</span>
</div> </div>
<div class="jobinfobox"> <div class="jobtag">
<div class="jobname">{{ item.aliasName }}</div> <span>返费</span>
<div class="jobinfo"> <span
<span>{{ item.district }}</span> v-for="(item1, index) in item.jobSpecialLabelNames"
<span>{{ item.gender }}</span> :key="index"
<span>{{ item.age }}</span> >{{ item1 }}</span
</div> >
<div class="jobtag"> </div>
<span>返费</span> <div class="jobpricemonth">
<span <!-- :style="{ opacity: item.minMonthlyPay ? '1' : '0' }" -->
v-for="(item1, index) in item.jobSpecialLabelNames"
:key="index" <span>{{ item.minMonthlyPay ? item.minMonthlyPay : "" }}</span
>{{ item1 }}</span >-<span>{{
> item.maxMonthlyPay ? item.maxMonthlyPay : ""
</div> }}</span
<div >/
class="jobpricemonth" </div>
:style="{ opacity: item.minMonthlyPay ? '1' : '0' }" <div class="jobpricehour">
<template v-if="item.hourlyPay"
><span>{{ item.hourlyPay }}</span
>/小时</template
>
<template v-else-if="item.dayPay"
><span>{{ item.dayPay }}</span
>/</template
> >
<span>{{ item.minMonthlyPay }}</span
>-<span>{{ item.maxMonthlyPay }}</span
>/
</div>
<div class="jobpricehour">
<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>
</router-link> </div>
<div class="subsetright"> <div class="subsetright">
<div class="topbox"> <div
class="topbox"
:style="{
opacity:
item.returnFee &&
item.returnFee !== -1 &&
item.returnFee !== null
? '1'
: '0',
}"
>
<div>服务费</div> <div>服务费</div>
<div><span>1.5</span>/小时</div> <div>
<span>{{ item.returnFee }}</span
>/小时
</div>
</div> </div>
<div class="bottombox"> <div class="bottombox">
<router-link :to="'/detail/' + item.id"> <router-link target="_blank" :to="'/detail/' + item.id">
<button>更多</button> <button>更多</button>
</router-link> </router-link>
<button>录单</button> <button>录单</button>
@ -142,7 +192,7 @@
<a-pagination <a-pagination
:current="+formvalue.pageNum" :current="+formvalue.pageNum"
:default-current="1" :default-current="1"
:defaultPageSize="2" :defaultPageSize="8"
:total="formvalue.total" :total="formvalue.total"
@change="pageChange" @change="pageChange"
/> />
@ -157,11 +207,11 @@
</div> </div>
<div class="maincontentright"> <div class="maincontentright">
<div class="hotphone"> <div class="hotphone">
<h1>服务热线</h1> <h1 class="bottombox"><i>服务热线</i></h1>
<p>0371-666666666</p> <p>0371-666666666</p>
</div> </div>
<div class="relationme"> <div class="relationme">
<p>一手单合作</p> <p class="bottombox"><i>一手单合作</i></p>
<button>发布一手单</button> <button>发布一手单</button>
</div> </div>
<recommend /> <recommend />
@ -172,14 +222,16 @@
<script> <script>
import { import {
JobListApi, // JobListApi,
getJobSpecialApi, getJobSpecialApi,
getProvinceApi, getProvinceApi,
// getCityApi, // getCityApi,
} from "../../api/job"; } from "../../api/job";
import { disposeJobListData } from "../../utils/commonUtil"; import { moneyToFixed } from "../../utils/commonUtil";
import recommend from "@/components/FirstJob/components/recommend.vue"; import recommend from "@/components/FirstJob/components/recommend.vue";
export default { export default {
//
inject: ["getJobList"],
// //
name: "", name: "",
// //
@ -191,28 +243,28 @@ export default {
isspecialboxshow: { isspecialboxshow: {
require: true, require: true,
}, },
formvalue: {
// type: Object,
require: true,
},
jobMainList: {
require: true,
},
isspinning: {
require: true,
}, //
}, },
// //
data() { data() {
return { return {
isspinning: false, // // jobMainList: [], //
jobMainList: [], //
specialList: [], // specialList: [], //
formvalue: {
//
district: [],
monthlyPayStr: [],
ageStr: [],
jobSpecialLabelIds: [],
pageNum: 1,
pageSize: 2,
total: null, //
},
specialactive: [], // specialactive: [], //
specialvalue: [], // specialvalue: [], //
cityoption: [], // cityoption: [], //
newFormValue: [],
options: { options: {
// //
price: [ price: [
@ -275,24 +327,24 @@ export default {
if (e.district.length === 0) { if (e.district.length === 0) {
document.getElementById("city").style.width = 105 + "px"; document.getElementById("city").style.width = 105 + "px";
} else { } else {
const data = e.district.join(""); const result = e.district.join("");
console.log(data); console.log(result);
if (data.length > 6) { if (result.length > 6) {
document.getElementById("city").style.width = document.getElementById("city").style.width =
(data.length + 4) * 18 + "px"; (result.length + 4) * 18 + "px";
document.querySelector("#city").nextElementSibling.style.width = // s document.querySelector("#city").nextElementSibling.style.width = // s
(data.length + 4) * 18 + "px"; (result.length + 4) * 18 + "px";
} else if (data.length > 4) { } else if (result.length > 4) {
document.getElementById("city").style.width = document.getElementById("city").style.width =
(data.length + 2.6) * 18 + "px"; (result.length + 2.6) * 18 + "px";
document.querySelector("#city").nextElementSibling.style.width = document.querySelector("#city").nextElementSibling.style.width =
(data.length + 2.6) * 18 + "px"; (result.length + 2.6) * 18 + "px";
} else { } else {
document.getElementById("city").style.width = document.getElementById("city").style.width =
(data.length + 2) * 18 + "px"; (result.length + 2) * 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 =
(data.length + 2) * 18 + "px"; (result.length + 2) * 18 + "px";
} }
} }
// } // }
@ -300,8 +352,8 @@ export default {
if (e.monthlyPayStr.length === 0) { if (e.monthlyPayStr.length === 0) {
document.getElementById("price").style.width = 70 + "px"; document.getElementById("price").style.width = 70 + "px";
} else { } else {
const data = e.monthlyPayStr.join(""); const result = e.monthlyPayStr.join("");
if (data.length >= 0) { if (result.length >= 0) {
document.getElementById("price").style.width = "150px"; document.getElementById("price").style.width = "150px";
document.getElementById("price").nextElementSibling.style.width = document.getElementById("price").nextElementSibling.style.width =
"150px"; "150px";
@ -313,8 +365,8 @@ export default {
if (e.ageStr.length === 0) { if (e.ageStr.length === 0) {
document.getElementById("age").style.width = 70 + "px"; document.getElementById("age").style.width = 70 + "px";
} else { } else {
const data = e.ageStr.join(""); const result = e.ageStr.join("");
if (data.length >= 0) { if (result.length >= 0) {
document.getElementById("age").style.width = "100px"; document.getElementById("age").style.width = "100px";
document.getElementById("age").nextElementSibling.style.width = document.getElementById("age").nextElementSibling.style.width =
"100px"; "100px";
@ -347,6 +399,7 @@ export default {
// }); // });
// document.querySelector(".ant-pagination-options-quick-jumper").innerHTML = // document.querySelector(".ant-pagination-options-quick-jumper").innerHTML =
// "<input type='text'>"; // "<input type='text'>";
console.log(this.formvalue);
}, },
// //
methods: { methods: {
@ -354,49 +407,23 @@ export default {
* 处理后台返回的职位列表 * 处理后台返回的职位列表
*/ */
// //
async getJobList() { onSearch(e) {
this.isspinning = true; console.log(e);
console.log(this.formvalue); if (typeof e === "string" || typeof e === "number") {
try { if (e.length !== 0) {
var newdata = { console.log("zifuchuan ");
district: "", this.formvalue.aliasName = e;
monthlyPayStr: "", this.getJobList();
ageStr: "",
jobSpecialLabelIds: "",
pageNum: 1,
pageSize: 2,
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;
const { data } = await JobListApi(newdata);
if (data.status === 200) {
this.jobMainList = disposeJobListData(data.data.recordList);
this.formvalue.total = data.data.recordCount;
console.log(this.jobMainList);
} else {
this.$message.info("数据获取失败");
} }
console.log(data); } else if (e.target.value.trim() !== "") {
// = data.data.recordList; this.formvalue.aliasName = e.target.value.trim();
this.isspinning = false; this.getJobList();
console.log(this.formvalue);
} catch (error) {
console.log(error);
} }
this.$router.push("/list").catch((err) => {
console.log(err);
});
}, },
onSearch() {},
// //
async getJobSpecial() { async getJobSpecial() {
try { try {
@ -413,6 +440,7 @@ export default {
// const that = this; // const that = this;
try { try {
const { data } = await getProvinceApi(); const { data } = await getProvinceApi();
console.log(data);
data.data.pop(); data.data.pop();
this.cityoption = data.data; this.cityoption = data.data;
@ -429,7 +457,6 @@ export default {
if (item) { if (item) {
if (item.uid === 1) { if (item.uid === 1) {
console.log(1); console.log(1);
console.log(item[0]);
this.formvalue.monthlyPayStr = item[0]; this.formvalue.monthlyPayStr = item[0];
} else if (item.uid === 2) { } else if (item.uid === 2) {
this.formvalue.ageStr = item[0]; this.formvalue.ageStr = item[0];
@ -454,15 +481,22 @@ export default {
handleChange() {}, handleChange() {},
claerfilter() { claerfilter() {
const { pageNum, pageSize, total } = this.formvalue; const { pageNum, pageSize, total } = this.formvalue;
this.formvalue = { // this.formvalue = {
district: [], // district: [],
monthlyPayStr: [], // monthlyPayStr: [],
ageStr: [], // ageStr: [],
jobSpecialLabelIds: [], // jobSpecialLabelIds: [],
pageNum, // pageNum,
pageSize, // pageSize,
total, // // total, //
}; // };
this.formvalue.district = [];
this.formvalue.monthlyPayStr = [];
this.formvalue.ageStr = [];
this.formvalue.jobSpecialLabelIds = [];
this.formvalue.pageNum = pageNum;
this.formvalue.pageSize = pageSize;
this.formvalue.total = total;
console.log(this.formvalue); console.log(this.formvalue);
this.specialactive = []; this.specialactive = [];
this.specialvalue = []; this.specialvalue = [];
@ -488,13 +522,100 @@ export default {
isspecialboxshowclick() { isspecialboxshowclick() {
this.$emit("update:isspecialboxshow", !this.isspecialboxshow); this.$emit("update:isspecialboxshow", !this.isspecialboxshow);
}, },
totop() {
// console.log(window);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
// window.body.scrollY = 0;
},
moneyToFixed(value) {
return moneyToFixed(value);
},
//
resetsearch(e) {
// console.log(e);
if (e.target.value.length === 0) {
this.formvalue.aliasName = "";
this.getJobList();
}
this.$router.push("/list").catch((err) => {
console.log(err);
});
},
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.searchbox {
background-color: #fff;
// border-bottom: 1px solid #eeefef;
.w {
// display: flex;
// justify-content: space-between;
overflow: hidden;
height: 100px;
span {
float: left;
}
.logo {
width: 424px;
height: 49px;
margin-top: 26px;
margin-right: 60px;
background: url("../../assets/logo.png") no-repeat;
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: 50px;
@ -519,9 +640,11 @@ export default {
} }
> .w { > .w {
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
.specialbox { .specialbox {
position: absolute; position: absolute;
border-bottom: 1px solid #f6f6f6;
box-shadow: 5px 5px 10px rgb(223, 223, 223);
// display: ; // display: ;
transition: all 0.4s; transition: all 0.4s;
left: 0; left: 0;
@ -531,10 +654,10 @@ export default {
z-index: 999; z-index: 999;
ul { ul {
overflow: hidden; overflow: hidden;
padding: 12px 0 0 0; padding: 20px 0 8px 0;
li { li {
padding: 5px 12px; padding: 4px 16px;
margin: 0px 24px 10px 0; margin: 0px 24px 12px 0;
cursor: pointer; cursor: pointer;
float: left; float: left;
background: rgba(216, 216, 216, 0.3); background: rgba(216, 216, 216, 0.3);
@ -547,15 +670,23 @@ export default {
} }
> ul { > ul {
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
li { li {
// margin-right: 30px; // margin-right: 30px;
font-size: 18px; font-size: 16px;
color: #4d575e; color: #4d575e;
margin-right: 20px;
.ant-cascader-picker { .ant-cascader-picker {
width: auto; width: auto;
position: relative; position: relative;
transform: translateY(-2px); transform: translateY(-2px);
.anticon-close-circle {
font-size: 14px;
}
.icon-xiala {
font-size: 12px;
transform: translateY(-1px) scale(0.5);
}
.ant-cascader-input { .ant-cascader-input {
width: 70px; width: 70px;
// margin-top: -5px; // margin-top: -5px;
@ -564,14 +695,16 @@ export default {
padding: 0; padding: 0;
// margin-bottom: 6px; // margin-bottom: 6px;
box-shadow: none; box-shadow: none;
&::placeholder {
// width: auto;
// text-indent: 20px;
color: #4d575ecc;
line-height: 20px;
font-size: 16px;
}
} }
.ant-cascader-input::placeholder {
// width: auto;
// text-indent: 20px;
color: #4d575ecc;
line-height: 20px;
font-size: 18px;
}
span { span {
// width: 110px; // width: 110px;
// max-width: 150px; // max-width: 150px;
@ -590,7 +723,7 @@ export default {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 8px; margin-right: 8px;
font-size: 18px; font-size: 16px;
color: #4d575ecc; color: #4d575ecc;
// margin-top: -9px; // margin-top: -9px;
&::before { &::before {
@ -604,13 +737,17 @@ export default {
position: relative; position: relative;
.ant-cascader-input { .ant-cascader-input {
min-width: 105px; min-width: 105px;
&:hover &::placeholder {
color: #ff6a00;
}
} }
.ant-cascader-input::placeholder { .ant-cascader-input::placeholder {
// width: auto; // width: auto;
color: #4d575ecc; color: #4d575ecc;
text-indent: 0; text-indent: 0;
line-height: 20px; line-height: 20px;
font-size: 18px; font-size: 16px;
} }
span { span {
// width: auto; // width: auto;
@ -628,18 +765,18 @@ export default {
line-height: 32px; line-height: 32px;
color: #4d575ecc; color: #4d575ecc;
cursor: pointer; cursor: pointer;
i { .icon-xiala {
transition: all 0.2s; transition: all 0.2s;
position: relative; position: relative;
color: #c5c5c5; color: #c5c5c5;
margin-left: 5px; margin-left: 10px;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
transform: translateY(-1px) scale(0.7); transform: translateY(-2px) scale(0.5);
}
.turn {
transform: translateY(-1px) scale(0.7) rotate(180deg);
} }
// .turn {
// transform: translateY(-1px) scale(0.6) rotate(180deg);
// }
} }
} }
li:last-child { li:last-child {
@ -649,9 +786,9 @@ export default {
// 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: 30px;
a { a {
transition: all 0.5s; transition: all 0.5s;
line-height: 16px;
&:active { &:active {
color: rgb(255, 106, 0); color: rgb(255, 106, 0);
@ -690,15 +827,15 @@ export default {
justify-content: space-between; justify-content: space-between;
width: 914px; width: 914px;
height: 212px; height: 212px;
padding: 20px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
background: #ffffff; background: #ffffff;
border-radius: 4px; border-radius: 4px;
.subsetleft { .subsetleft {
display: flex; display: flex;
.imgbox { .imgbox {
width: 230px; width: 240px;
height: 172px; height: 180px;
margin-right: 20px; margin-right: 20px;
img { img {
width: 100%; width: 100%;
@ -712,7 +849,10 @@ export default {
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 28px; line-height: 20px;
&:hover {
color: #ff6a00;
}
} }
.jobinfo { .jobinfo {
margin-top: 16px; margin-top: 16px;
@ -724,7 +864,7 @@ export default {
line-height: 20px; line-height: 20px;
} }
.jobtag { .jobtag {
margin-top: 12px; margin-top: 14px;
text-align: left; text-align: left;
span:first-child { span:first-child {
color: #ff6a00; color: #ff6a00;
@ -732,22 +872,22 @@ export default {
} }
span { span {
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 16px;
padding: 4px 8px; padding: 2px 10px;
background: rgba(51, 51, 51, 0.06); background: rgba(51, 51, 51, 0.06);
border-radius: 4px; border-radius: 4px;
} }
} }
.jobpricemonth { .jobpricemonth {
margin-top: 12px; margin-top: 16px;
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 22px; line-height: 22px;
} }
.jobpricehour { .jobpricehour {
margin-top: 12px; margin-top: 16px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
@ -768,14 +908,15 @@ export default {
align-items: flex-end; align-items: flex-end;
.topbox { .topbox {
width: 116px; width: 116px;
height: 62px; height: 54px;
text-align: center; text-align: center;
background: rgba(255, 106, 0, 0.1); background: rgba(255, 106, 0, 0.1);
border-radius: 4px; border-radius: 4px;
color: #ff6a00; color: #ff6a00;
line-height: 30px; line-height: 30px;
div { div {
font-weight: bold; // font-weight: bold;
font-size: 16px;
span { span {
font-size: 20px; font-size: 20px;
@ -783,28 +924,30 @@ export default {
} }
} }
div:first-child { div:first-child {
height: 28px; height: 24px;
background: #ff6a00; background: #ff6a00;
line-height: 28px; line-height: 24px;
font-size: 18px; font-size: 14px;
color: #ffffff; color: #ffffff;
border: 1px solid #ff6a00; border: 1px solid #ff6a00;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
} }
div:last-child {
font-weight: bold;
}
} }
.bottombox { .bottombox {
button { button {
width: 72px; width: 100px;
height: 32px; height: 32px;
font-size: 16px;
border: 1px solid rgba(77, 87, 94, 0.3); border: 1px solid rgba(77, 87, 94, 0.3);
border-radius: 4px; border-radius: 4px;
} }
a { a {
button:first-child { button:first-child {
width: 72px; border: 1px solid rgba(140, 147, 153, 0.3);
height: 32px; // border-radius: 4px;
border: 1px solid rgba(77, 87, 94, 0.3);
border-radius: 4px;
color: #4d575e; color: #4d575e;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
@ -842,10 +985,10 @@ export default {
input[type="text"] { input[type="text"] {
box-shadow: none; box-shadow: none;
&:focus { &:focus {
border: 1px solid #ff6a006a; border: 1px solid #ff6a00;
} }
&:hover { &:hover {
border: 1px solid #ff6a006a; border: 1px solid #ff6a00;
} }
} }
.ant-pagination-item { .ant-pagination-item {
@ -874,25 +1017,25 @@ export default {
} }
.hotphone { .hotphone {
width: 270px; width: 270px;
height: 106px; // height: 114px;
padding: 20px 32px; padding: 20px 20px;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
p { p {
font-size: 24px; font-size: 24px;
color: #ff6a00; color: #ff6a00;
font-weight: bold; // font-weight: bold;
margin-top: 12px; margin-top: 12px;
} }
} }
.relationme { .relationme {
width: 270px; width: 270px;
padding: 20px 40px; padding: 20px 20px;
background: #ffffff; background: #ffffff;
border-radius: 4px; border-radius: 4px;
button { button {
width: 150px; width: 198px;
height: 32px; height: 32px;
margin-top: 16px; margin-top: 16px;
font-size: 16px; font-size: 16px;

@ -0,0 +1,64 @@
<template>
<div class="">
<span class="timebox">{{ timedata.deadline }}</span>
</div>
</template>
<script>
export default {
//
name: "",
//
components: {},
//
props: {
timedata: {
type: Object,
require: true,
},
},
//
data() {
return {};
},
//
computed: {},
//
watch: {},
//
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
created() {
this.deadline();
},
/**
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/
mounted() {},
//
methods: {
deadline() {
const that = this;
this.timedata.timer = setInterval(() => {
that.timedata.deadline--;
if (that.timedata.deadline <= 0) {
that.timedata.deadline = 60;
that.timedata.isfinish = true;
clearInterval(that.timedata.timer);
}
}, 1000);
console.log(this.timedata.deadline);
},
},
};
</script>
<style scoped lang="less">
.timebox {
display: inline-block;
width: 92px;
text-align: center;
}
</style>

@ -0,0 +1,430 @@
<template>
<div class="center">
<div class="formcontainer">
<ul class="loginchange centerall">
<li :class="{ loginactive: loginway === 1 }" @click="loginway = 1">
用户名密码登录
</li>
<li :class="{ loginactive: loginway === 2 }" @click="loginway = 2">
手机验证码登录
</li>
</ul>
<div class="formbox">
<template v-if="loginway === 1">
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="userhandleSubmit"
>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'tel',
{
rules: [
{
required: true,
message: '请输入用户名',
},
{
pattern: /^1[3456789]\d{9}$/,
message: '请输入正确手机号',
},
],
validateTrigger: 'submit',
},
]"
:maxLength="11"
placeholder="请输入用户名"
>
<i
slot="prefix"
class="iconfont icon-yonghuming"
style="font-size: 24px"
/>
</a-input>
</a-form-item>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'password',
{
rules: [
{
required: true,
message: '请输入密码',
},
],
validateTrigger: 'submit',
},
]"
type="password"
placeholder="请输入密码"
>
<i slot="prefix" class="iconfont icon-mima" />
</a-input>
</a-form-item>
<div class="autologin">
<span
><input
type="checkbox"
name="register"
v-model="ischecked"
@change="checked"
style="margin-right: 5px; vertical-align: middle"
va
/>
<span>下次自动登录</span></span
>
<a class="login-form-forgot" href="">忘记密码</a>
</div>
<a-form-item>
<a-button
type="primary"
html-type="submit"
class="login-form-button"
>
登录
</a-button>
</a-form-item>
</a-form>
<!-- <div class="register">
<router-link to="/register">还没有账号立即注册</router-link>
</div> -->
</template>
<template v-if="loginway === 2">
<a-form
id="components-form-demo-normal-login"
:form="form1"
class="login-form"
@submit="phonehandleSubmit"
>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'phone',
{
rules: [
{ required: true, message: '请输入手机号' },
{
pattern: /^1[3456789]\d{9}$/,
message: '请输入正确手机号',
},
],
validateTrigger: 'submit',
},
]"
autocomplete="off"
:maxLength="11"
placeholder="请输入手机号"
>
<i
slot="prefix"
class="icon-shouji iconfont"
style="font-size: 24px"
/>
</a-input>
</a-form-item>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'code',
{
rules: [
{
required: true,
message: '请输入验证码',
},
],
validateTrigger: 'submit',
},
]"
type="text"
placeholder="请输入验证码"
>
<i slot="prefix" class="icon-duanxinyanzheng iconfont" />
<span class="getrulecode" slot="suffix"
><span
@click="getPhoneCode"
data-mark="getcode"
v-if="timedata.isfinish"
>获取验证码</span
><timmer :timedata="timedata" v-if="!timedata.isfinish"
/></span>
</a-input>
</a-form-item>
<div class="autologin">
<span>
<input
type="checkbox"
name="register"
v-model="ischecked"
@change="checked"
style="margin-right: 5px; vertical-align: middle"
/>
<span>下次自动登录</span>
</span>
<a class="login-form-forgot" href="">忘记密码</a>
</div>
<a-form-item>
<a-button
type="primary"
html-type="submit"
class="login-form-button"
>
登录
</a-button>
</a-form-item>
</a-form>
<!-- <div class="register">
<router-link to="/register">还没有账号立即注册</router-link>
</div> -->
</template>
</div>
</div>
</div>
</template>
<script>
import { loginApi, getPhoneCodeApi } from "../../api/login";
import timmer from "./components/countback.vue";
export default {
//
name: "",
//
components: {
timmer,
},
//
props: {},
//
data() {
return {
loginway: 1,
ischecked: false,
form: this.$form.createForm(this),
form1: this.$form.createForm(this),
timedata: {
isfinish: true,
deadline: 60,
timmer: null,
},
};
},
//
computed: {},
//
watch: {},
//
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
created() {},
/**
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/
mounted() {},
//
methods: {
userhandleSubmit(e) {
//
e.preventDefault();
let params;
this.form.validateFields(async (err, values) => {
console.log(values);
if (!err) {
params = { ...values, loginType: 0 };
console.log(params);
try {
const { data } = await loginApi(params);
console.log(data);
if (data.status !== 200) {
this.$message.warning(data.msg);
return;
}
localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
this.$router.push("/list");
// this.$router.push("/list");
} catch (err) {
console.log(err);
}
} else {
console.log(err);
}
});
},
phonehandleSubmit(e) {
e.preventDefault();
let params;
this.form1.validateFields(async (err, values) => {
console.log(err);
if (!err) {
params = { ...values, loginType: 1 };
try {
const data = await loginApi(params);
console.log(data);
} catch (err) {
console.log(err);
}
} else {
console.log(err);
}
});
},
async getPhoneCode() {
const that = this;
this.form1.validateFields(["phone"], async (err, values) => {
console.log(values);
if (!err) {
that.timedata.isfinish = false;
try {
const data = await getPhoneCodeApi({ tel: values.phone });
console.log(data);
} catch (error) {
console.log(error);
}
} else {
console.log(err);
}
});
},
checked() {
console.log(this.ischecked);
},
},
};
</script>
<style scoped lang="less">
.center {
width: 290px;
overflow: hidden;
/deep/ .login-form {
background-color: #fff !important;
}
.centerall {
margin: 0 auto;
}
.loginchange {
display: flex;
width: 230px;
justify-content: space-between;
margin-top: 10px;
.loginactive {
color: #4d575e;
border-bottom: 1px solid #4d575e;
}
li {
padding: 0 0 4px 0;
margin-bottom: 30px;
font-size: 14px;
text-align: left;
color: #cccccc;
line-height: 22px;
cursor: pointer;
}
}
.formbox {
// /deep/ .ant-form-item {
// margin-bottom: 0px !important;
// padding-bottom: 20px !important;
// }
/deep/.ant-input-affix-wrapper {
i {
font-size: 26px;
// margin: 0 8px 0 4px;
color: #4d575e;
}
.ant-input {
height: 36px;
text-indent: 15px;
background-color: #f6f6f6;
border: none;
&:hover {
border-color: #ff6a00;
}
&:focus {
box-shadow: none;
}
&::placeholder {
opacity: 0.4;
color: #4d575e;
font-size: 14px;
text-indent: 15px;
}
}
}
.login-form-button {
width: 100%;
height: 36px;
margin-top: 40px;
border-radius: 27px;
background-color: #ff6a00;
font-size: 16px;
border: none;
color: white;
}
.register {
display: flex;
justify-content: center;
font-size: 12px;
span {
color: #4d575e;
i {
vertical-align: middle;
margin-right: 10px;
}
}
a {
color: #353649;
}
}
.autologin {
display: flex;
justify-content: space-between;
font-size: 14px;
> span {
cursor: pointer;
input {
&:hover {
border-color: #ff6a00;
}
}
span {
transition: all 0.5s;
}
&:hover {
color: #ff6a00;
}
}
a {
color: #4d575e;
}
}
.getrulecode {
padding: 0 0 0 10px;
font-size: 14px;
width: 82px;
text-align: center;
border-left: 1px #cccccc solid;
line-height: 14px;
color: #4d575e;
span[data-mark="getcode"] {
cursor: pointer;
}
}
}
}
</style>

@ -0,0 +1,340 @@
<template>
<div class="formcontainer">
<div class="title centerall">新用户注册</div>
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="registerSubmit"
>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'tel',
{
rules: rules.tel,
validateTrigger: 'submit',
validateFirst: true,
},
]"
autocomplete="off"
:maxLength="11"
placeholder="请输入手机号"
>
<i slot="prefix" class="icon-shouji iconfont" />
</a-input>
</a-form-item>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'code',
{
rules: rules.code,
validateTrigger: 'submit',
validateFirst: true,
},
]"
type="text"
autocomplete="off"
placeholder="请输入验证码"
>
<i slot="prefix" class="icon-duanxinyanzheng iconfont" />
<span class="getrulecode" slot="suffix"
><span
@click="getPhoneCode"
data-mark="getcode"
v-if="timedata.isfinish"
>获取验证码</span
><timmer :timedata="timedata" v-if="!timedata.isfinish"
/></span>
</a-input>
</a-form-item>
<a-form-item style="text-align: left">
<a-input
@input="getpassword"
v-decorator="[
'password',
{
rules: rules.password,
validateTrigger: 'submit',
validateFirst: true,
},
]"
type="password"
placeholder="请输入密码"
>
<i slot="prefix" class="iconfont icon-mima" />
</a-input>
</a-form-item>
<a-form-item style="text-align: left">
<a-input
v-decorator="[
'newpassword',
{
rules: rules.newpassword,
validateTrigger: 'submit',
validateFirst: true,
},
]"
type="password"
placeholder="请再次输入密码"
>
<i slot="prefix" class="iconfont icon-mima" />
</a-input>
</a-form-item>
<div style="text-align: left">
<input
type="checkbox"
name="register"
v-model="ischecked"
@change="checked"
style="margin-right: 5px; vertical-align: middle"
va
/>
<span label="register">注册即表示您已阅读并同意</span>
<span style="color: #ff6a00; font-size: 12px">平台用户协议</span>
</div>
<a-form-item>
<span></span>
<a-button type="primary" html-type="submit" class="login-form-button">
注册
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import { getPhoneCodeApi, registerApi } from "../../api/login";
import timmer from "./components/countback.vue";
export default {
//
name: "login",
//
components: {
timmer,
},
//
props: {},
//
data() {
return {
loginway: 1,
form: this.$form.createForm(this),
timedata: {
isfinish: true,
deadline: 60,
timmer: null,
},
setpassword: "",
ischecked: false,
rules: {
tel: [
{
required: true,
message: "请输入手机号",
},
{
pattern: /^1[3456789]\d{9}$/,
message: "请输入正确手机号",
},
],
code: [
{
required: true,
message: "请输入验证码",
},
],
password: [
{
required: true,
message: "请输入密码",
},
],
newpassword: [
{
required: true,
message: "请再次输入密码",
},
{
validator: this.replacepassword,
},
],
},
};
},
//
computed: {},
//
watch: {},
//
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
created() {},
/**
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/
mounted() {},
//
methods: {
registerSubmit(e) {
e.preventDefault();
console.log(1);
this.form.validateFields(
// ["tel", "code", "password"],
async (err, values) => {
console.log(values);
console.log(err);
if (!err && this.ischecked === true) {
try {
const { data } = await registerApi(values);
console.log(data);
if (data.status === 200) {
this.$message.success("注册成功");
this.$router.push("/login");
} else {
this.$message.warning(data.msg);
}
} catch (error) {
console.log(error);
}
} else if (this.ischecked !== true) {
this.$message.warning("请阅读并同意《平台用户协议》");
}
}
);
},
getPhoneCode() {
const that = this;
this.form.validateFields(["tel"], async (err, values) => {
console.log(values);
if (!err) {
that.timedata.isfinish = false;
console.log(that.timedata.isfinish);
console.log(this.setpassword + 1212121);
try {
const data = await getPhoneCodeApi({ tel: values.tel });
console.log(data);
} catch (error) {
console.log(error);
}
} else {
console.log(err);
}
});
},
getpassword(e) {
this.setpassword = e.target.value;
console.log(e);
},
replacepassword(rule, value, callback) {
console.log(rule);
console.log(value);
if (this.setpassword !== value) {
callback("两次密码不一样");
}
callback();
// console.log(callback);
},
checked() {
console.log(this.ischecked);
},
},
};
</script>
<style scoped lang="less">
.formcontainer {
.centerall {
margin: 0 auto;
}
.title {
display: inline-block;
text-align: center;
color: #4d575e;
border-bottom: 1px solid #4d575e;
padding: 0 0 4px 0;
margin-bottom: 25px;
font-size: 14px;
text-align: left;
line-height: 22px;
cursor: pointer;
}
/deep/.ant-input-affix-wrapper {
i {
font-size: 26px;
}
.ant-input {
height: 36px;
text-indent: 15px;
border: none;
background-color: #f6f6f6;
&:focus {
box-shadow: none;
}
&::placeholder {
font-size: 14px;
text-indent: 15px;
}
}
}
.login-form-button {
width: 100%;
height: 36px;
margin-top: 20px;
background-color: #ff6a00;
font-size: 20px;
border: none;
border-radius: 27px;
color: white;
}
.register {
display: flex;
justify-content: space-between;
font-size: 12px;
span {
color: #4d575e;
i {
vertical-align: middle;
margin-right: 10px;
}
}
a {
color: #ff6a00;
}
}
.autologin {
display: flex;
justify-content: space-between;
font-size: 14px;
a {
color: #ff6a00;
}
}
.getrulecode {
padding: 0 0 0 10px;
width: 89px;
font-size: 14px;
text-align: center;
border-left: 1px #cccccc solid;
line-height: 14px;
color: #4d575e;
span[data-mark="getcode"] {
cursor: pointer;
}
}
}
</style>

@ -14,9 +14,13 @@
服务业企业提供RPOBPOHRO等人力资源服务 服务业企业提供RPOBPOHRO等人力资源服务
</p> </p>
<div class="bottombox"> <div class="bottombox">
<div class="outletslocation"> <div
class="outletslocation"
@click="tomap"
style="cursor: pointer"
>
<i class="iconfont icon-dingwei"></i <i class="iconfont icon-dingwei"></i
>河南省郑州市航空港区XX街道XX号 ><span ref="maplocation">河南省郑州市航空港区XX街道XX号</span>
</div> </div>
<button>录单</button> <button>录单</button>
</div> </div>
@ -34,7 +38,11 @@
服务业企业提供RPOBPOHRO等人力资源服务 服务业企业提供RPOBPOHRO等人力资源服务
</p> </p>
<div class="bottombox"> <div class="bottombox">
<div class="outletslocation" @click="tomap"> <div
class="outletslocation"
@click="tomap"
style="cursor: pointer"
>
<i class="iconfont icon-dingwei"></i <i class="iconfont icon-dingwei"></i
><span ref="maplocation">河南省许昌市襄城县XX街道XX号</span> ><span ref="maplocation">河南省许昌市襄城县XX街道XX号</span>
</div> </div>

@ -0,0 +1,89 @@
<template>
<div class="main-container">
<div class="bgimg">
<a-carousel :autoplay="true" effect="fade" :dots="false" ref="scrollimg">
<img src="../../assets/banner1.png" alt="" />
<img src="../../assets/banner2.png" alt="" />
<img src="../../assets/banner3.png" alt="" />
</a-carousel>
<div class="middleslogan">
<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
</div>
<div class="bottominfo">
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>
</div>
</template>
<script>
export default {
//
name: "main",
//
components: {},
//
props: {},
//
data() {
return {};
},
//
computed: {},
//
watch: {},
//
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
created() {},
/**
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/
mounted() {},
//
methods: {},
};
</script>
<style scoped lang="less">
.main-container {
height: calc(100vh - 80px);
overflow: hidden;
.bgimg {
position: relative;
overflow: hidden;
width: 100vw;
height: calc(100% - 80px);
height: 100%;
// background: url("../../assets/banner1.png") no-repeat center;
img {
width: 100%;
height: 100%;
}
.middleslogan {
position: absolute;
top: 300px;
left: 50%;
transform: translateX(-50%);
color: #fff;
z-index: 99999;
i {
font-size: 90px;
}
}
.bottominfo {
position: absolute;
bottom: 40px;
left: 50%;
font-size: 14px;
transform: translateX(-50%);
color: #fff;
}
}
}
</style>

@ -7,9 +7,14 @@ const routes = [
{ {
path: "/", path: "/",
name: "Home", name: "Home",
redirect: "/list", redirect: "/main",
component: () => import("../views/main.vue"), component: () => import("../views/main.vue"),
children: [ children: [
{
path: "/main",
name: "Main",
component: () => import("../components/main/index.vue"),
},
{ {
path: "/list", path: "/list",
name: "JobList", name: "JobList",
@ -36,13 +41,34 @@ const routes = [
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import("../components/AboutUs/index.vue"), component: () => import("../components/AboutUs/index.vue"),
}, },
{
path: "/login",
name: "login",
// component: () => import("../components/Login/login.vue"),
component: () => import("../views/login.vue"),
children: [
{
path: "/login",
name: "login",
component: () => import("../components/Login/login.vue"),
},
],
},
], ],
}, },
{ // {
path: "/login", // path: "/login",
name: "Login", // name: "Loginpage",
component: () => import("../views/login.vue"), // component: () => import("../views/login.vue"),
}, // redirect: "/login",
// children: [
// {
// path: "/register",
// name: "register",
// component: () => import("../components/Login/register.vue"),
// },
// ],
// },
]; ];
const router = new VueRouter({ const router = new VueRouter({

@ -4,7 +4,9 @@ import Vuex from "vuex";
Vue.use(Vuex); Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: {}, state: {
joblist: {},
},
mutations: {}, mutations: {},
actions: {}, actions: {},
modules: {}, modules: {},

@ -97,11 +97,12 @@ table {
} }
body { body {
padding: 0; padding: 0;
// height: 3080px; // height: 3080px;
background-color: #eef1f5; // background-color: #eef1f5;
background-color: #f6f6f6;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
} }
p { p {
font-size: 18px; font-size: 18px;
@ -110,22 +111,12 @@ i {
font-style: normal; font-style: normal;
} }
// 字体图标 // 字体图标
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3135652 */ font-family: "iconfont"; /* Project id 3135652 */
src: url("../assets/fontfile/iconfont.woff2") src: url("../assets/fontfile/iconfont.woff2") format("woff2"),
format("woff2"), url("../assets/fontfile/iconfont.woff") format("woff"),
url("../assets/fontfile/iconfont.woff") url("../assets/fontfile/iconfont.ttf") format("truetype");
format("woff"),
url("../assets/fontfile/iconfont.ttf")
format("truetype");
} }
.iconfont { .iconfont {
@ -136,36 +127,44 @@ i {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-shibai:before { .icon-xiala:before {
content: "\e6ef"; content: "\e6f5";
} }
.icon-chenggong:before { .icon-sousuo:before {
content: "\e6ee"; content: "\e608";
} }
.icon-weixuanzhong:before { .icon-weixuanzhong:before {
content: "\e6ed"; content: "\e6f4";
}
.icon-xuanzhong:before {
content: "\e6ec";
} }
.icon-duanxinyanzheng:before { .icon-duanxinyanzheng:before {
content: "\e6ea"; content: "\e6f3";
} }
.icon-shouji:before { .icon-shouji:before {
content: "\e6eb"; content: "\e6f2";
}
.icon-mima:before {
content: "\e6f1";
} }
.icon-yonghuming:before { .icon-yonghuming:before {
content: "\e6e8"; content: "\e6f0";
} }
.icon-mima:before { .icon-shibai:before {
content: "\e6e7"; content: "\e6ef";
}
.icon-chenggong:before {
content: "\e6ee";
}
.icon-xuanzhong:before {
content: "\e6ec";
} }
.icon-weixin:before { .icon-weixin:before {
@ -184,10 +183,6 @@ i {
content: "\e6e2"; content: "\e6e2";
} }
.icon-xiala:before {
content: "\e6de";
}
.icon-dingwei:before { .icon-dingwei:before {
content: "\e6df"; content: "\e6df";
} }
@ -196,21 +191,25 @@ i {
content: "\e6e0"; content: "\e6e0";
} }
// 公用样式类名 // 公用样式类名
.w { .w {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.ant-cascader-menus { .ant-cascader-menus.monthlypay,
ul { .ant-cascader-menus.agestr {
width: 100vw;
margin: 0 auto;
top: 186px !important;
-webkit-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 {
height: auto; height: auto;
// background-color: black; width: 100%;
// width: 100vw !important;
.ant-cascader-menu-item { .ant-cascader-menu-item {
width: 100%;
text-align: left;
padding-left: calc((100vw - 1200px) / 2) !important ;
&:hover { &:hover {
background-color: rgba(255, 106, 0, 0.1); background-color: rgba(255, 106, 0, 0.1);
color: rgb(255, 106, 0); color: rgb(255, 106, 0);
@ -218,29 +217,71 @@ i {
} }
} }
} }
.beforeblock { .ant-cascader-menus.flitercity {
display: inline-block; left: calc((100vw - 1216px) / 2) !important;
vertical-align: middle; top: 186px !important;
margin-top: -4px; border-radius: 0 0 4px 4px !important;
width: 4px; -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
height: 20px; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
margin-right: 8px; .ant-cascader-menu {
background: #ff6a00; height: 500px;
.ant-cascader-menu-item {
width: 100%;
text-align: left;
// padding-left: calc((100vw - 1200px) / 2) !important ;
&:hover {
background-color: rgba(255, 106, 0, 0.1);
color: rgb(255, 106, 0);
}
}
} }
.ant-cascader-menu {
max-height: 300px !important;
&::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
} }
&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ .beforeblock {
border-radius: 5px; display: inline-block;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); vertical-align: middle;
background: rgba(0,0,0,0.1); margin-top: -4px;
width: 4px;
height: 20px;
margin-right: 8px;
background: #ff6a00;
}
h1.bottombox,
p.bottombox {
text-align: left;
border-bottom: 1px solid #eeefef;
margin-bottom: 16px;
i {
display: inline-block;
line-height: 20px;
border-bottom: 3px solid #ff6a00;
padding: 6px 0;
}
} }
&::-webkit-scrollbar-track {/*滚动条里面轨道*/ .ant-cascader-menu {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); max-height: 300px !important;
border-radius: 0; &::-webkit-scrollbar {
background: rgba(0,0,0,0.1); /*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(126, 126, 126, 0.06);
background: rgba(0, 0, 0, 0.1);
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(112, 112, 112, 0.06);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
} }
// 媒体查询
@media screen and (max-width: 1910px) {
.loginlogo {
margin: 40px auto !important;
}
} }

@ -1109,6 +1109,8 @@ function getJobSpecialLabelNamesArray(jobSpecialLabelNames) {
} }
return []; return [];
} }
// 处理职位列表的方法
export function disposeJobListData(jobList) { export function disposeJobListData(jobList) {
if (jobList !== undefined) { if (jobList !== undefined) {
if (Array.isArray(jobList)) { if (Array.isArray(jobList)) {
@ -1118,15 +1120,16 @@ export function disposeJobListData(jobList) {
if (isNotEmptyCheck(item.distance)) { if (isNotEmptyCheck(item.distance)) {
item["distanceKm"] = getDistanceName(item.distance); item["distanceKm"] = getDistanceName(item.distance);
} }
//年龄 //年龄
console.log(jobList); // console.log(jobList);
var ageStr = ""; var ageStr = "";
if (isNotEmptyCheck(item.minAge) && isNotEmptyCheck(item.maxAge)) { if (isNotEmptyCheck(item.minAge) && isNotEmptyCheck(item.maxAge)) {
ageStr = item.minAge + "-" + item.maxAge + "岁"; ageStr = "丨" + item.minAge + "-" + item.maxAge + "岁";
} else if (isNotEmptyCheck(item.minAge)) { } else if (isNotEmptyCheck(item.minAge)) {
ageStr = item.minAge + "岁以上"; ageStr = "丨" + item.minAge + "岁以上";
} else if (isNotEmptyCheck(item.maxAge)) { } else if (isNotEmptyCheck(item.maxAge)) {
ageStr = item.maxAge + "岁以下"; ageStr = "丨" + item.maxAge + "岁以下";
} }
item["age"] = ageStr; item["age"] = ageStr;
//时薪 //时薪
@ -1190,6 +1193,23 @@ export function disposeJobListData(jobList) {
item["jobSpecialLabelNames"] = getJobSpecialLabelNamesArray( item["jobSpecialLabelNames"] = getJobSpecialLabelNamesArray(
item.jobSpecialLabelNames item.jobSpecialLabelNames
); );
// 特色标签
// console.log(item.jobSpecialLabelNames);
const jobSpecialLabelNames = [];
if (
isNotEmptyCheck(item.jobSpecialLabelNames) &&
Array.isArray(item.jobSpecialLabelNames)
) {
item.jobSpecialLabelNames.forEach((item, index) => {
if (index <= 1) {
jobSpecialLabelNames.push(item);
// console.log(jobSpecialLabelNames);
} else {
return;
}
});
item.jobSpecialLabelNames = jobSpecialLabelNames;
}
// 年龄限制 // 年龄限制
if (item["gender"] === 1) { if (item["gender"] === 1) {
item["gender"] = "丨男"; item["gender"] = "丨男";
@ -1210,11 +1230,11 @@ export function disposeJobListData(jobList) {
//年龄 //年龄
var ageStr = ""; var ageStr = "";
if (isNotEmptyCheck(jobList.minAge) && isNotEmptyCheck(jobList.maxAge)) { if (isNotEmptyCheck(jobList.minAge) && isNotEmptyCheck(jobList.maxAge)) {
ageStr = jobList.minAge + "-" + jobList.maxAge + "岁"; ageStr = "丨" + jobList.minAge + "-" + jobList.maxAge + "岁";
} else if (isNotEmptyCheck(jobList.minAge)) { } else if (isNotEmptyCheck(jobList.minAge)) {
ageStr = jobList.minAge + "岁以上"; ageStr = "丨" + jobList.minAge + "岁以上";
} else if (isNotEmptyCheck(jobList.maxAge)) { } else if (isNotEmptyCheck(jobList.maxAge)) {
ageStr = jobList.maxAge + "岁以下"; ageStr = "丨" + jobList.maxAge + "岁以下";
} }
jobList["age"] = ageStr; jobList["age"] = ageStr;
//时薪 //时薪
@ -1278,6 +1298,24 @@ export function disposeJobListData(jobList) {
jobList["jobSpecialLabelNames"] = getJobSpecialLabelNamesArray( jobList["jobSpecialLabelNames"] = getJobSpecialLabelNamesArray(
jobList.jobSpecialLabelNames jobList.jobSpecialLabelNames
); );
// console.log(jobList.jobSpecialLabelNames);
// 特色标签
// console.log(jobList.jobSpecialLabelNames);
const jobSpecialLabelNames = [];
if (
isNotEmptyCheck(jobList.jobSpecialLabelNames) &&
Array.isArray(jobList.jobSpecialLabelNames)
) {
jobList.jobSpecialLabelNames.forEach((item, index) => {
if (index <= 4) {
jobSpecialLabelNames.push(item);
// console.log(jobSpecialLabelNames);
} else {
return;
}
});
jobList.jobSpecialLabelNames = jobSpecialLabelNames;
}
// 年龄限制 // 年龄限制
if (jobList["gender"] === 1) { if (jobList["gender"] === 1) {
jobList["gender"] = "丨男"; jobList["gender"] = "丨男";

@ -1,8 +1,9 @@
import axios from "axios"; import axios from "axios";
// const baseURL = 'https://d.matripe.com.cn' const baseURL = "https://d.matripe.com.cn";
// const baseURL = "http://bl7.matripe.com.cn:8001"; // const baseURL = "http://bl7.matripe.com.cn:8001";
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
// withCredentials: true, // send cookies when cross-domain requests // withCredentials: true, // send cookies when cross-domain requests
timeout: 10000, // request timeout timeout: 10000, // request timeout
}); });

@ -1,195 +1,21 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="contentbox"> <div class="centerbox">
<div class="center centerall"> <div class="contentleft">
<div class="logo"> <div class="slogan"><img src="../assets/slogan1.png" alt="" /></div>
<img src="../assets/logo.png" alt="" /> </div>
</div> <div class="contentright">
<ul class="loginchange centerall"> <div class="logo"><img src="../assets/logo.png" alt="" /></div>
<li :class="{ loginactive: loginway === 1 }" @click="loginway = 1"> <div class="contentbox">
用户名密码登录 <router-view></router-view>
</li>
<li :class="{ loginactive: loginway === 2 }" @click="loginway = 2">
手机验证码登录
</li>
</ul>
<div class="formbox">
<template v-if="loginway === 1" style="text-align: center">
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="handleSubmit"
>
<a-form-item>
<a-input
v-decorator="[
'tel',
{
rules: [
{
required: true,
message: '请输入用户名',
},
],
},
]"
placeholder="请输入用户名"
>
<i
slot="prefix"
class="iconfont icon-yonghuming"
style="color: rgba(0, 0, 0, 0.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="[
'password',
{
rules: [
{
required: true,
message: '请输入正确的密码',
},
],
},
]"
type="password"
placeholder="请输入密码"
>
<i
slot="prefix"
class="iconfont icon-mima"
style="color: rgba(0, 0, 0, 0.25)"
/>
</a-input>
</a-form-item>
<div class="autologin">
<a-checkbox
v-decorator="[
'remember',
{
valuePropName: 'checked',
initialValue: true,
},
]"
>
下次自动登录
</a-checkbox>
<a class="login-form-forgot" href="">忘记密码</a>
</div>
<a-form-item>
<a-button
type="primary"
html-type="submit"
class="login-form-button"
>
登录
</a-button>
</a-form-item>
</a-form>
<div class="register">
<span><i class="iconfont icon-weixin"></i>微信登录</span>
<a href="">还没有账号立即注册</a>
</div>
</template>
<template v-if="loginway === 2" style="text-align: center">
<a-form
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="handleSubmit"
>
<a-form-item>
<a-input
v-decorator="[
'tel',
{
rules: [
{
required: true,
message: '请输入手机号',
},
],
},
]"
placeholder="请输入手机号"
>
<i
slot="prefix"
class="icon-shouji iconfont"
style="color: rgba(0, 0, 0, 0.25)"
/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="[
'code',
{
rules: [
{
required: true,
message: '请输入验证码',
},
],
},
]"
type="text"
placeholder="请输入验证码"
>
<i
slot="prefix"
class="icon-duanxinyanzheng iconfont"
style="color: rgba(0, 0, 0, 0.25); font-size: 18px"
/>
<span class="getrulecode" slot="suffix" @click="getPhoneCode"
>获取验证码</span
>
</a-input>
</a-form-item>
<div class="autologin">
<a-checkbox
v-decorator="[
'remember',
{
valuePropName: 'checked',
initialValue: true,
},
]"
>
下次自动登录
</a-checkbox>
<a class="login-form-forgot" href="">忘记密码</a>
</div>
<a-form-item>
<a-button
type="primary"
html-type="submit"
class="login-form-button"
>
登录
</a-button>
</a-form-item>
</a-form>
<div class="register">
<span><i class="iconfont icon-weixin"></i>微信登录</span>
<a href="">还没有账号立即注册</a>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
<div class="imgbox">
<img src="../assets/loginimg.png" alt="" />
</div>
</div> </div>
</template> </template>
<script> <script>
import { loginApi, getPhoneCodeApi } from "../api/login"; // import { loginApi, getPhoneCodeApi } from "../api/login";
export default { export default {
// //
name: "login", name: "login",
@ -201,7 +27,11 @@ export default {
data() { data() {
return { return {
loginway: 1, loginway: 1,
form: this.$form.createForm(this, { name: "normal_login" }),
form: this.$form.createForm(this),
form1: this.$form.createForm(this),
isfinish: true,
deadline: 60,
}; };
}, },
// //
@ -219,152 +49,73 @@ export default {
*/ */
mounted() {}, mounted() {},
// //
methods: { methods: {},
handleSubmit(e) {
e.preventDefault();
const that = this;
let params;
this.form.validateFields(async (err, values) => {
console.log(values);
if (that.loginway === 1) {
params = { ...values, loginType: 0 };
} else {
params = { ...values, loginType: 1 };
}
console.log(params);
try {
const data = await loginApi(params);
console.log(data);
} catch (err) {
console.log(err);
}
if (!err) {
console.log("Received values of form: ", values);
}
});
},
async getPhoneCode() {
this.form.validateFields(async (err, values) => {
console.log(values);
try {
const data = await getPhoneCodeApi({ tel: values.tel });
console.log(data);
} catch (error) {
console.log(error);
}
});
},
},
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.login-container { .login-container {
display: flex; height: 660px;
width: 100vw; width: 100%;
> div { position: relative;
flex: 1; // background: url("../assets/Bg.png") no-repeat center;
height: 100vh; // background-size: 100% 100%;
} // box-shadow: 5px 5px 10px gray;
.contentbox { .centerbox {
background-color: white; position: absolute;
position: relative; width: 800px;
.centerall { height: 520px;
margin: 0 auto; background-color: pink;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 16px;
overflow: hidden;
.contentleft {
width: 400px;
height: 100%;
float: left;
position: relative;
background-color: #ff6a00;
.slogan {
position: absolute;
width: 275px;
height: 107px;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
// background-color: skyblue;
img {
width: 100%;
height: 100%;
}
}
} }
.center { .contentright {
width: 497px; width: 400px;
overflow: hidden; height: 100%;
float: left;
// padding: 40px 55px;
box-sizing: border-box;
background-color: #fff;
.logo { .logo {
width: 420px; width: 245px;
height: 60px; height: 34px;
margin: 100px auto; margin: 40px auto 30px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.loginchange { .contentbox {
display: flex;
width: 290px; width: 290px;
justify-content: space-between; margin: 0 auto;
.loginactive {
color: #4d575e;
border-bottom: 2px solid #4d575e;
}
li {
padding: 8px 0;
margin-bottom: 60px;
font-size: 16px;
text-align: left;
color: #cccccc;
line-height: 22px;
cursor: pointer;
}
} }
.formbox { // .content;
/deep/.ant-input-affix-wrapper {
i {
font-size: 24px;
}
.ant-input {
height: 70px;
text-indent: 15px;
&::placeholder {
font-size: 16px;
text-indent: 15px;
}
}
}
.login-form-button {
width: 100%;
height: 70px;
margin-top: 50px;
background-color: #ff6a00;
font-size: 20px;
border: none;
color: white;
}
.register {
display: flex;
justify-content: space-between;
font-size: 14px;
span {
color: #4d575e;
i {
vertical-align: middle;
margin-right: 10px;
}
}
a {
color: #ff6a00;
}
}
.autologin {
display: flex;
justify-content: space-between;
font-size: 14px;
a {
color: #ff6a00;
}
}
.getrulecode {
padding: 0 0 0 10px;
font-size: 16px;
border-left: 2px #cccccc solid;
line-height: 16px;
color: #ff6a00;
}
}
}
}
.imgbox {
background-color: skyblue;
img {
width: 100%;
height: 100%;
} }
} }
} }

@ -3,31 +3,26 @@
<!-- title部分 --> <!-- title部分 -->
<div class="pagetitle"> <div class="pagetitle">
<div class="w"> <div class="w">
<span <span>
><i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i <!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> -->
></span> <img src="../assets/toplogo.png" alt="" />
</span>
<span> <span>
<ul> <ul>
<!-- <li> <li>
<a <router-link to="/">
href="javascript:;" <a
:style=" href="javascript:;"
routertitleindex === 0 :class="routertitleindex === 0 ? 'titleactive' : ''"
? 'font-size:16px;font-weight:bold' >首页</a
: '' ></router-link
"
>首页</a
> >
</li> --> </li>
<li> <li>
<router-link to="/" <router-link to="/list"
><a ><a
href="javascript:;" href="javascript:;"
:style=" :class="routertitleindex === 1 ? 'titleactive' : ''"
routertitleindex === 1
? 'font-size:16px;font-weight:bold'
: ''
"
>一手职位</a >一手职位</a
></router-link ></router-link
> >
@ -36,11 +31,7 @@
<router-link to="/serviceoutlets" <router-link to="/serviceoutlets"
><a ><a
href="javascript:;" href="javascript:;"
:style=" :class="routertitleindex === 2 ? 'titleactive' : ''"
routertitleindex === 2
? 'font-size:16px;font-weight:bold'
: ''
"
>服务网点</a >服务网点</a
> >
</router-link> </router-link>
@ -49,43 +40,42 @@
<router-link to="/aboutus"> <router-link to="/aboutus">
<a <a
href="javascript:;" href="javascript:;"
:style=" :class="routertitleindex === 3 ? 'titleactive' : ''"
routertitleindex === 3
? 'font-size:16px;font-weight:bold'
: ''
"
>关于我们</a >关于我们</a
> >
</router-link> </router-link>
</li> </li>
</ul> </ul>
</span> </span>
<span
><i class="iconfont icon-yonghu" style="margin-right: 5px"></i>
<a href="javascript:;">注册 </a>/<router-link to="/login"
>&nbsp;登录</router-link
></span
>
</div>
</div>
<!-- 搜索栏 -->
<div class="searchbox">
<div class="w">
<span><h1 class="logo"></h1></span>
<span> <span>
<a-input-search <a-dropdown v-if="isLogin">
placeholder="企业 公司" <span
enter-button="搜索" ><i class="iconfont icon-yonghu" style="margin-right: 5px"></i
@search="onSearch" >用户名:{{ loginValue.tel }}</span
class="searchinput" >
/> <a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;" @click="logout">退</a>
</a-menu-item>
</a-menu>
</a-dropdown>
<span v-if="!isLogin">
<!-- <router-link to="/register">注册</router-link>/ -->
<router-link to="/login"><button>登录</button></router-link></span
>
</span> </span>
<span><img src="../assets/小程序码.png" alt="" /></span>
</div> </div>
</div> </div>
<router-view :isspecialboxshow.sync="isspecialboxshow"></router-view> <!-- 搜索栏 -->
<router-view
:isspecialboxshow.sync="isspecialboxshow"
:formvalue="formvalue"
:jobMainList="jobMainList"
:isspinning="isspinning"
></router-view>
<!-- 老乡广告 --> <!-- 老乡广告 -->
<div class="fellowtownsman" v-if="laoxiangshow"> <!-- <div class="fellowtownsman" v-if="laoxiangshow">
<div class="w"> <div class="w">
<div class="title"> <div class="title">
<h1><span></span>老乡们都想去</h1> <h1><span></span>老乡们都想去</h1>
@ -96,34 +86,52 @@
v-for="(item, index) in fellowList" v-for="(item, index) in fellowList"
:key="index" :key="index"
> >
<div class="imgbox"> <router-link :to="'/detail/' + item.id">
<img src="../assets/老乡们都想去(吉利汽车).png" alt="" /> <a href="javascript:;" @click="resetpage">
<span>服务费<i>1.3</i>/小时</span> <div class="imgbox">
</div> <img v-if="item.logo" :src="item.logo" alt="" />
<div class="jobname">宁波吉利汽车小时工</div> <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"> <div class="jobinfo">
<span>宁波市 |</span> <span>{{ item.district }}</span>
<span> 16-45</span> <span>{{ item.gender }}</span>
<span>{{ item.age }}</span>
</div> </div>
<div class="jobtag"> <div class="jobtag">
<span>返费</span> <span>返费</span>
<span>短期工</span> <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 class="jobprice"><span>30</span>/小时</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<!-- banner广告栏 --> <!-- banner广告栏 -->
<div class="banner"> <div class="banner" v-if="isfootershow">
<div class="w"> <div class="w">
<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
<!-- <img src="../assets/phone.png" alt="" /> --> <!-- <img src="../assets/phone.png" alt="" /> -->
</div> </div>
</div> </div>
<!-- footer部分 --> <!-- footer部分 -->
<footer> <footer v-if="isfootershow">
<div class="w"> <div class="w">
<ul> <ul>
<li @click="totop"><router-link to="/">一手职位</router-link></li> <li @click="totop"><router-link to="/">一手职位</router-link></li>
@ -136,7 +144,12 @@
<router-link to="/aboutus">关于我们</router-link> <router-link to="/aboutus">关于我们</router-link>
</li> </li>
</ul> </ul>
<div>Copyright © 2015 - 2022 Matripe. All Rights Reserved.</div> <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> </div>
</footer> </footer>
</div> </div>
@ -144,7 +157,21 @@
<script> <script>
// import joblist from "../components/firstjob/joblist.vue"; // 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 { export default {
inject: ["reload"],
provide() {
return {
getJobList: this.getJobList,
};
},
// //
name: "", name: "",
// //
@ -156,9 +183,25 @@ export default {
// //
data() { data() {
return { return {
fellowList: [1, 2, 3, 4], fellowList: [],
isspinning: false,
isspecialboxshow: false, isspecialboxshow: false,
isfootershow: true,
laoxiangshow: false, laoxiangshow: false,
isLogin: false,
loginValue: {},
jobMainList: [],
formvalue: {
//
district: [], //
monthlyPayStr: [], //
ageStr: [], //
jobSpecialLabelIds: [], //
aliasName: "",
pageNum: 1,
pageSize: 8,
total: null, //
},
}; };
}, },
// //
@ -173,11 +216,22 @@ export default {
return 1; return 1;
} else if (path.indexOf("aboutus") > -1) { } else if (path.indexOf("aboutus") > -1) {
return 3; return 3;
} else { } else if (path.indexOf("main") > -1) {
return 0; return 0;
} else {
return 4;
} }
}, },
}, },
// 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: { watch: {
@ -192,25 +246,83 @@ export default {
} else { } else {
this.laoxiangshow = true; this.laoxiangshow = true;
} }
this.showfooter();
}, },
// isLogin() {
// this.isLogin = JSON.parse(localStorage.getItem("LOGIN_DATA"));
// console.log(this.isLogin);
// },
}, },
// //
/** /**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在 * 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/ */
created() { created() {
this.getJobList();
this.isLaoxiangshow(); this.isLaoxiangshow();
this.getRecommendJob();
this.showfooter();
}, },
/** /**
* el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子 * el 被新创建的 vm.el 替换并挂载到实例上去之后调用该钩子
* 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内 * 如果 root 实例挂载了一个文档内元素 mounted 被调用时 vm.el 也在文档内
*/ */
mounted() { mounted() {
console.log(localStorage.getItem("LOGIN_DATA"));
this.isLogin = localStorage.getItem("LOGIN_DATA") !== null ? true : false;
this.loginValue =
localStorage.getItem("LOGIN_DATA") !== null
? JSON.parse(localStorage.getItem("LOGIN_DATA"))
: { tel: "" };
// console.log(document.querySelector(".ant-pagination-options-quick-jumper")); // console.log(document.querySelector(".ant-pagination-options-quick-jumper"));
}, },
// //
methods: { methods: {
onSearch() {}, //
async getJobList() {
this.isspinning = true;
console.log(this.formvalue);
try {
var 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;
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("数据获取失败");
}
// = data.data.recordList;
this.isspinning = false;
console.log(this.formvalue);
} catch (error) {
console.log(error);
}
},
totop() { totop() {
// console.log(window); // console.log(window);
document.body.scrollTop = 0; document.body.scrollTop = 0;
@ -229,244 +341,297 @@ export default {
this.laoxiangshow = true; this.laoxiangshow = true;
} }
}, },
async getRecommendJob() {
this.isspinning = true;
try {
const { data } = await JobListApi({
pageNum: 1,
pageSize: 4,
jobCategory: 608,
});
console.log(data);
this.fellowList = disposeJobListData(data.data.recordList);
this.isspinning = false;
console.log(this.fellowList);
// this.$emit("update:relationList", this.relationList);
} catch (error) {
console.log(error);
}
},
async logout() {
// logoutApi().then((result) => {
// console.log(result);
// });
try {
const data = await logoutApi();
console.log(data);
if (data.status === 200) {
localStorage.removeItem("LOGIN_DATA");
this.reload();
} 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.isfootershow = false;
} else {
this.isfootershow = true;
}
},
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
/deep/ .pagetitle { .index-container {
background-color: #ff6a00; height: 100%;
// padding: 8px auto; /deep/ .pagetitle {
font-size: 16px; background-color: #fff;
.w { padding: 14px;
display: flex;
justify-content: space-between;
color: #fff;
line-height: 36px;
span:first-child { font-size: 16px;
display: block; .titleactive {
width: 228px; font-size: 16px;
height: 36px; font-weight: bold;
i { color: #ff6a00;
color: #fff;
font-size: 20px;
}
} }
span:nth-of-type(2) { .w {
ul { overflow: hidden;
display: flex; // display: flex;
// margin-left: 45px; // justify-content: space-between;
li { // line-height: 36px;
margin-right: 50px; span {
} float: left;
} }
} span:first-child {
} display: block;
} width: 120px;
height: 52px;
.searchbox { // width: 228px;
background-color: #fff; // height: 36px;
border-bottom: 1px solid #eeefef; img {
.w { width: 100%;
// display: flex; height: 100%;
// justify-content: space-between;
overflow: hidden;
height: 100px;
span {
float: left;
}
.logo {
width: 424px;
height: 49px;
margin-top: 26px;
margin-right: 60px;
background: url("../assets/logo.png") no-repeat;
background-size: contain;
}
span:nth-of-type(2) {
margin-top: 27px;
/deep/ .ant-input {
width: 446px;
height: 46px;
box-shadow: none;
font-size: 18px !important;
&:hover {
border-color: #d9d9d9;
}
&:focus {
border-color: #ff6a00;
} }
// i {
// font-size: 20px;
// }
} }
/deep/ .ant-input-group-addon .ant-btn { span:nth-of-type(2) {
width: 86px; ul {
height: 46px; font-size: 16px;
font-size: 18px; display: flex;
background-color: #ff6a00; margin-left: 80px;
border-color: #ff6a00; color: #666666;
box-shadow: none; li {
margin-right: 40px;
line-height: 52px;
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
}
}
} }
} span:last-child {
span:nth-of-type(3) { float: right;
width: 76px; button {
height: 76px; width: 70px;
float: right; height: 32px;
margin-top: 12px; font-size: 14px;
img { margin-top: 10px;
width: 100%; background-color: #fff;
height: 100%; border: 1px solid #ff6a00;
line-height: 32px;
border-radius: 999px;
color: #ff6a00;
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
}
} }
} }
} }
}
.fellowtownsman { .fellowtownsman {
// height: 641px; // height: 641px;
background: #ffffff; background: #ffffff;
.w { .w {
padding: 30px 0; padding: 30px 0;
.title { .title {
font-size: 24px; font-size: 24px;
text-align: left; text-align: left;
color: #4d575e; color: #4d575e;
line-height: 56px; line-height: 56px;
h1 { 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: space-between;
margin-top: 30px;
.jobinfobox {
width: 288px;
height: 385px;
margin-bottom: 16px;
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 { span {
position: absolute; display: inline-block;
padding: 0 10px; vertical-align: middle;
// width: 149px; margin-top: -4px;
height: 28px; width: 4px;
left: 0; height: 25px;
bottom: 0; margin-right: 8px;
background: #ff6a00; background: #ff6a00;
border-radius: 16px 16px 16px 0px;
font-size: 16px;
text-align: center;
color: #ffffff;
line-height: 28px;
} }
} }
.jobname { }
height: 52px; .main {
// margin: 12px 0; display: flex;
font-size: 20px; justify-content: start;
font-weight: bold; margin-top: 30px;
text-align: left; .jobinfobox {
color: #4d575e; width: 288px;
line-height: 52px; // height: 385px;
border-bottom: 1px solid #f2f0ec; margin-bottom: 16px;
} margin-right: 20px;
.jobinfo { background: #ffffff;
margin-top: 11px; border: 1px solid rgba(77, 87, 94, 0.1);
opacity: 0.5; border-radius: 4px;
font-size: 18px; padding: 20px;
text-align: left; .imgbox {
color: #4d575e; position: relative;
line-height: 22px; width: 248px;
} height: 186px;
.jobtag { img {
margin-top: 12px; width: 100%;
text-align: left; height: 100%;
span:first-child { }
color: #ff6a00; span {
background: rgba(254, 97, 0, 0.1); 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;
}
} }
span { .jobname {
margin-right: 8px; height: 52px;
font-size: 16px; // margin: 12px 0;
padding: 3px 8px; font-size: 20px;
background: rgba(51, 51, 51, 0.06); font-weight: bold;
border-radius: 4px; text-align: left;
color: #4d575e;
line-height: 52px;
border-bottom: 1px solid #f2f0ec;
} }
} .jobinfo {
.jobprice { margin-top: 11px;
margin-top: 12px; opacity: 0.5;
font-size: 18px; font-size: 18px;
font-weight: bold; text-align: left;
text-align: left; color: #4d575e;
color: #ff6a00; line-height: 22px;
line-height: 25px; }
span { .jobtag {
font-size: 22px; 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: bold;
text-align: left;
color: #ff6a00;
line-height: 25px;
span {
font-size: 22px;
}
} }
} }
} }
} }
} }
} .banner {
.banner { height: 72px;
height: 72px; margin-top: 20px;
background-color: rgba(255, 106, 0); background-color: rgba(255, 106, 0);
.w { .w {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
i {
font-size: 36px;
color: #fff;
}
img:last-child {
width: 173px;
height: 42px;
margin-right: 110px;
}
}
// background-color: black;
}
footer {
padding: 30px;
.w {
ul {
display: flex; display: flex;
height: 100%;
justify-content: center; justify-content: center;
li { align-items: center;
font-size: 18px; i {
text-align: center; font-size: 32px;
color: #4d575e; color: #fff;
line-height: 25px;
} }
li:nth-of-type(2n) { img:last-child {
width: 1px; width: 173px;
height: 20px; height: 42px;
margin: 0 54px; margin-right: 110px;
background-color: rgb(77, 87, 94);
} }
} }
div { // background-color: black;
text-align: center; }
margin-top: 20px; footer {
padding: 30px;
.w {
ul {
display: flex;
justify-content: center;
li {
font-size: 18px;
text-align: center;
color: #4d575e;
line-height: 25px;
}
li:nth-of-type(2n) {
width: 1px;
height: 20px;
margin: 0 54px;
background-color: #4d575e;
}
}
div {
text-align: center;
margin-top: 20px;
color: #4d575e;
i {
display: inline-block;
vertical-align: middle;
width: 1px;
height: 20px;
margin: 0 10px;
background-color: #4d575e;
}
}
} }
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Loading…
Cancel
Save