mz666
/
bocai_supplyChain_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面优化

Browse Source
cyl/dev
jscyl13849007907 1 year ago
parent 36e128e517
commit a8fcdba976
3 changed files with 598 additions and 35 deletions
Show Stats Download Patch File Download Diff File

66
src/components/FirstJob/joblist.vue
Unescape Escape View File

@ -34,8 +34,9 @@
<img src="//matripe.oss-cn-beijing.aliyuncs.com/bcSVG/dtLogo.png" class="icon" />
</router-link>
</span>
<div class="searchBox" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" outline="0" hidefocus="true">
<a-input :placeholder="jobNum ? `近48小时更新${jobNum}职位` : ''" @keyup.enter="onSearch" @input="resetsearch" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" v-model="searchValue" class="searchinput" style allow-clear>
<div class="searchBox g_flex_row_start" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" outline="0" hidefocus="true">
<div class="g_flex_1">
<a-input :placeholder="jobNum ? `近48小时更新${jobNum}条招工信息` : ''" @keyup.enter="onSearch" @input="resetsearch" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" v-model="searchValue" class="searchinput g_w_all" style allow-clear>
<div slot="prefix" class="fsa w100" @focus.stop tabindex="0" @click.stop="visible = true">
<span class="dpib esl" style="width: 60px">{{ currentCity }}</span>
<div>
@ -45,19 +46,11 @@
</div>
<button slot="suffix" @click="onSearch" style="border-radius: 0px 6px 6px 0">搜索</button>
</a-input>
<!-- v-show="isdownHotStoreShow" -->
<!-- <ul class="downHotStore" style="display: none">
<div>热门企业</div>
<li v-for="(item, index) in hotStoreList" :key="index" @click="getHotStoreList(item)">
{{ item.storeName }}
</li>
</ul>-->
<div class="hotStore">
<!-- <span>热门企业：</span> -->
<ul>
<li v-for="(item, index) in hotStoreList" :key="index" @click="getHotStoreList(item)">{{ item.storeName }}</li>
<!-- <li @click="resetResult" style="color: #aaa">重置</li> -->
</ul>
</div>
<div class="g_flex_none g_ml_12">
<a style="font-size: 14px;" @click="hideFilterContent">
筛选 <a-icon type="down" style="font-size: 14px;" />
</a>
</div>
</div>
<ul class="hotTag" style="display: none">
@ -86,16 +79,19 @@
</a-breadcrumb>-->
<!-- #### 主体部分 ##### -->
<div class="w" id="maincontent">
<div class="maincontentleft" style="padding-top: 50px">
<div class="maincontentleft" style="padding-top: 16px">
<div class="tabBar" @click="changeTab($event)">
<div class="tabSubset" :class="{ active: signType == '' }" v-if="!hasTab" data-type="0">全部</div>
<div class="tabSubset" :class="{ active: signType == 0 }" data-type="0">默认</div>
<div class="tabSubset" :class="{ active: signType == 1 }" data-type="1">按距离</div>
<div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">按工价</div>
<div class="tabSubset" :class="{ active: signType == 3 }" data-type="3">按佣金</div>
<!-- <div class="tabSubset" :class="{ active: signType == 1 }" v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" data-type="1">一才</div> -->
<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
<!-- <div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">三方</div> -->
</div>
<div class="filter" v-show="signType == ''" :class="[filterStatus == 0 ? '' : 'nobd']" style>
<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }">
<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false">
<span>
<span>
所有筛选
@ -441,7 +437,7 @@
<span v-if="item.jobDesp" :class="'copyInfo' + index">{{ item.jobDesp }}</span
><span v-else>暂无详单</span>
</template>-->
<a>
<a v-if="false">
<button
type="primary"
class="jobDesp br4"
@ -454,7 +450,29 @@
</button>
</a>
<!-- </a-popover> -->
<button class="apply br4" @click="torecord(item)" v-if="item.recruitment == '1'">报名</button>
<div class="g_flex_row_end">
<!-- <a-button shape="circle" type="danger" ghost>
<template #icon> -->
<div class="g_w_60 g_cursor_point">
<div class="g_text_c g_w_all" style="height: 18px;overflow: hidden;line-height: 18px;">
<a-icon type="message" class="g_fs_16" style="color: #666;" />
</div>
<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">联系客服</div>
</div>
<!-- </template>
</a-button>
<a-button shape="circle" type="danger" ghost @click="toggleGhost" class="g_ml_12">
<template #icon> -->
<div class="g_w_40 g_cursor_point">
<div class="g_text_c g_w_all" style="height: 18px;line-height: 18px;">
<a-icon class="g_fs_17" style="color:#666;" type="star" />
</div>
<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">收藏</div>
</div>
<!-- </template> -->
<!-- </a-button> -->
</div>
<a-button class="br4 g_ml_12" @click="torecord(item)" v-if="item.recruitment == '1'" type="primary">立即报名</a-button>
<button class="norecruitment" v-else>暂时停招</button>
<!-- <button @click="showmodal(item)" @click="">报名</button> -->
@ -1228,7 +1246,6 @@ export default {
},
// 改变自营三方类型
changeTab(e) {
console.log(e.target.dataset.type);
if (e.target.dataset.type != undefined) {
this.formvalue.pageNum = 1;
if (e.target.dataset.type != 0) {
@ -1837,7 +1854,7 @@ export default {
<style scoped lang="less">
.joblist-container {
background-color: #fff;
background-color: #f0f0f0;
}
// .dropdown {
// display: inline-block;
@ -1976,7 +1993,7 @@ export default {
// margin-top: -1px;
width: 100vw;
padding: 25px 0 64px 0;
background-color: #fff;
background-color: #f0f0f0;
// border: 1px solid #f6f6f6;
// height: 72px;
// margin-bottom: 10px;
@ -2001,7 +2018,7 @@ export default {
}
> .w {
// height: 72px;
background-color: #fff;
background-color: #f0f0f0;
display: flex;
justify-content: center;
// flex-direction: column;
@ -2409,6 +2426,7 @@ export default {
display: flex;
justify-content: center;
margin-top: 10px;
background-color: #f0f0f0;
.maincontentleft {
width: 800px;
margin-right: 16px;

545
src/style/index.less
Unescape Escape View File

@ -1077,3 +1077,548 @@ p.bottombox {
.bd1 {
border: 1px solid #ddd;
}
.g_ {
&mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
cursor: pointer;
}
&float {
&_left {
float: left;
}
&_right {
float: right;
}
&_none {
clear: both;
}
}
&flex {
// 弹性布局
&_1 {
// 示例：g_flex_1
flex: 1;
}
&_2 {
// 示例：g_flex_1
flex: 2;
}
&_3 {
// 示例：g_flex_1
flex: 3;
}
&_4 {
// 示例：g_flex_1
flex: 4;
}
&_none {
flex: none;
}
&_c {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
&_rowRight_columnCenter {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
align-items: center;
}
&_rowRight_columnEnd {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
align-items: flex-end;
}
&_row_start {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
&_row_start_none {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
&_row_start_c {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
&_row_between {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
&_row_around {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
&_row_center {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
&_row_end {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
&_column_start {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
}
&_column_between {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
&_column_around {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
&_column_end {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
}
&_column_center {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
}
&ell {
// 多行省略
&_1 {
// 示例：g_ell_1
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
&_2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
&_3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
}
&_4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
&fw {
// 加粗
&_100 {
// 示例：g_fw_100
font-weight: 100;
}
&_200 {
font-weight: 200;
}
&_300 {
font-weight: 300;
}
&_400 {
font-weight: 400;
}
&_500 {
font-weight: 500;
}
&_600 {
font-weight: 600;
}
&_700 {
font-weight: 700;
}
&_800 {
font-weight: 800;
}
&_900 {
font-weight: 900;
}
&_bold {
font-weight: bold;
}
}
&c {
// 字体颜色
&_0 {
// 示例：g_c_0
color: #000;
}
&_3 {
color: #333;
}
&_6 {
color: #666;
}
&_8c {
color: #8c8c8c;
}
&_9 {
color: #999;
}
&_c {
color: #ccc;
}
&_f {
color: #fff;
}
&_04bc {
color: #004bbc;
}
&_d8 {
color: #d8d8d8;
}
&_d9 {
color: #d9d9d9;
}
&_57 {
color: #576b95;
}
&_0d {
color: #0d4c7f;
}
&_f52d {
color: #f5222d;
}
&_f40 {
color: #ff4400;
}
&_594e {
color: #594e4e;
}
&_c1e {
color: #52c41a;
}
&_26 {
color: #262626;
}
&_7 {
color: #777777;
}
&_8 {
color: #888888;
}
&_f0 {
color: #ff0000;
}
&_main {
color: #1677ff;
}
}
&bg {
// 背景色
&_f {
// 示例：g_bg_f
background-color: #fff;
}
&_0 {
// 示例：g_bg_f
background-color: #000;
}
&_f0 {
background-color: #f0f0f0;
}
&_e {
background-color: #eee;
}
&_f5 {
background-color: #f5f5f5;
}
&_main {
background-color: #1677ff !important;
background: #1677ff !important;
}
&_f40 {
background-color: #ff4400;
}
}
&text {
// 字体位置
&_l {
// 示例：g_text_l
text-align: left;
}
&_c {
text-align: center;
}
&_r {
text-align: right;
}
&_underline {
text-decoration: underline;
}
}
&position {
// 定位
&_rela {
// 示例：g_position_rela
position: relative;
}
&_abso {
position: absolute;
&_c {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
&_fixed {
position: fixed;
&_c {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
}
&cursor {
// 手势
&_point {
// 示例：g_cursor_point
cursor: pointer;
}
&_na {
cursor: not-allowed;
}
&_def {
cursor: default;
}
}
&border {
&_d {
border: 1px solid #ddd;
}
&_top_d {
border-top: 1px solid #ddd;
}
&_right_d {
border-right: 1px solid #ddd;
}
&_bottom_d {
border-bottom: 1px solid #ddd;
}
&_left_d {
border-left: 1px solid #ddd;
}
&_e {
border: 1px solid #eee;
}
&_top_e {
border-top: 1px solid #eee;
}
&_right_e {
border-right: 1px solid #eee;
}
&_bottom_e {
border-bottom: 1px solid #eee;
}
&_left_e {
border-left: 1px solid #eee;
}
&_9 {
border: 1px solid #999;
}
&_d9 {
border: 1px solid #d9d9d9;
}
&_main {
border: 1px solid #1677ff;
}
}
&clear_scroll::-webkit-scrollbar {
display: none;
}
&w {
&_all {
width: 100%;
}
&_pull {
width: 100vw;
}
&_three {
width: 33.3333%;
}
}
&h {
&_all {
height: 100%;
}
&_pull {
height: 100vh;
}
&_three {
width: 33.3333%;
}
}
// 全局表格的分页器样式处理
&pageBottom {
position: sticky;
bottom: -16px;
width: 100%;
background-color: #fff;
z-index: 999;
}
// 行高设置
&lh {
&_1 {
line-height: 1;
}
}
}
/* 内外边距 */
.gmp(300);
.gmp(@n, @i: -100) when (@i =< @n) {
.g_pl_@{i} {
// 示例：g_pl_1,g_pl_2...g_pl_200
padding-left: 0px + @i;
}
.g_pr_@{i} {
padding-right: 0px + @i;
}
.g_pt_@{i} {
padding-top: 0px + @i;
}
.g_pb_@{i} {
padding-bottom: 0px + @i;
}
.g_ml_@{i} {
margin-left: 0px + @i;
}
.g_mr_@{i} {
margin-right: 0px + @i;
}
.g_mt_@{i} {
margin-top: 0px + @i;
}
.g_mb_@{i} {
margin-bottom: 0px + @i;
}
.g_p_@{i} {
padding: 0px + @i;
}
.g_m_@{i} {
margin: 0px + @i;
}
.gmp(@n, (@i+1));
}
/* 字体 */
.gfs(100);
.gfs(@n, @i: 10) when (@i =< @n) {
.g_fs_@{i} {
font-size: 0px + @i;
}
.g_fsi_@{i} {
font-size: 0px + @i !important;
}
.gfs(@n, (@i+1));
}
/* dot点生成 */
.gdot(50);
.gdot(@n, @i: 0) when (@i =< @n) {
.g_dot_@{i} {
width: 0px + @i;
height: 0px + @i;
border-radius: 50%;
}
.gdot(@n, (@i+1));
}
/* 圆角 */
.gradius(30);
.gradius(@n, @i: 0) when (@i =< @n) {
.g_br_@{i} {
border-radius: 0px + @i;
}
.gradius(@n, (@i+1));
}
/* 尺寸 */
.gSize(500);
.gSize(@n, @i: 0) when (@i =< @n) {
.g_w_@{i} {
width: 0px + @i;
}
.g_h_@{i} {
height: 0px + @i;
}
.gSize(@n, (@i+1));
}
/* 最大最小宽度高度 */
.gSize(500);
.gSize(@n, @i: 0) when (@i =< @n) {
.g_minw_@{i} {
min-width: 0px + @i;
}
.g_maxw_@{i} {
max-width: 0px + @i;
}
.g_minh_@{i} {
min-height: 0px + @i;
}
.g_maxh_@{i} {
max-height: 0px + @i;
}
}

6
src/views/main.vue
Unescape Escape View File

@ -22,7 +22,7 @@
<router-link to="/" :class="routertitleindex == 0 ? 'titleactive' : ''" rel="opener">首页</router-link>
</li>
<li>
<router-link to="/list" @click.native="toList" :class="routertitleindex == 1 ? 'titleactive' : ''" rel="opener">伯才职位</router-link>
<router-link to="/list" @click.native="toList" :class="routertitleindex == 1 ? 'titleactive' : ''" rel="opener">职位列表</router-link>
</li>
<li v-if="false">
<router-link to="/list?type=vocational" :class="routertitleindex == 8 ? 'titleactive' : ''" rel="opener">职教职培</router-link>
@ -38,7 +38,7 @@
"
>
<span class="" style="cursor: pointer">
<div :class="routertitleindex == 5 ? 'titleactive' : ''">我的报名</div>
<div :class="routertitleindex == 5 ? 'titleactive' : ''">报名工单</div>
</span>
<div class="loginbox" style="" slot="overlay">
<router-link to="/mybill">
@ -162,7 +162,7 @@
"
>
<span class="fsa fsa-box">
<span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
<span class="iconfont icon-morentouxiang mr4 f32" style="color: #ccc;" v-if="!userbaseInfo.imgSrc"></span>
<img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius: 50%; width: 28px; height: 28px" alt v-else />
<div class="ml4 f14 c6">{{ userbaseInfo.userName || userbaseInfo.nickName || "-" }}</div>
</span>

Write Preview
Loading…
Cancel
Save