diff --git a/src/api/job.js b/src/api/job.js
index 9306100..1c4249f 100644
--- a/src/api/job.js
+++ b/src/api/job.js
@@ -76,3 +76,22 @@ export function getPolicyByJobIdApi(data) {
     url: `/yishoudan/store/job/getPolicyByStoreJobId?storeJobId=${data}`,
   });
 }
+// 获取热门职位城市
+export function getHotCityApi() {
+  return request({
+    url: `/yishoudan/city/getHotCity`,
+  });
+}
+
+// 获取热门职位城市
+export function getCityWhichHasJobApi() {
+  return request({
+    url: `/yishoudan/city/getCityHasOnlineJob`,
+  });
+}
+// 获取热门企业
+export function getHotStoreApi() {
+  return request({
+    url: `/yishoudan/store/getHotStore`,
+  });
+}
diff --git a/src/components/FirstJob/joblist.vue b/src/components/FirstJob/joblist.vue
index 8e7f26d..7484422 100644
--- a/src/components/FirstJob/joblist.vue
+++ b/src/components/FirstJob/joblist.vue
@@ -6,17 +6,9 @@
       </div>
     </div> -->
     <!-- 录单弹出框 -->
-    <a-drawer
-      title="报名"
-      placement="right"
-      :closable="true"
-      :visible="visible"
-      labelAlign="right"
-      width="480"
-      @close="onClose"
-    >
-      <!-- <recordbill :visible.sync="visible" :firminfo="apply"></recordbill> -->
-    </a-drawer>
+    <!-- <a-drawer title="报名" placement="right" :closable="true" :visible="visible" labelAlign="right" width="480" @close="onClose"> -->
+    <!-- <recordbill :visible.sync="visible" :firminfo="apply"></recordbill> -->
+    <!-- </a-drawer> -->
     <!-- <a-modal
       title="报名"
       :visible="visible"
@@ -30,6 +22,43 @@
       :destroyOnClose="true"
     >
     </a-modal> -->
+    <!-- 城市的弹出框 -->
+    <a-modal
+      class="cityModal"
+      v-model="visible"
+      width="680px"
+      title="请选择城市"
+      :footer="null"
+    >
+      <div class="inputBox">
+        <a-input
+          placeholder="请输入城市名称"
+          allow-clear
+          width="300px"
+          v-model="cityValue"
+        ></a-input
+        ><a-button @click="searchCity">确认</a-button>
+      </div>
+      <ul class="firstList">
+        <li @click="[(currentCity = hotCityList), (activeInd = -1)]">
+          <div :class="activeInd == -1 ? 'active' : ''">热门地区</div>
+        </li>
+        <li
+          v-for="(item, index) in hasJobCityList.firstList"
+          :key="index"
+          @click="[changeCurrentCity(index), (activeInd = index)]"
+        >
+          <div :class="activeInd == index ? 'active' : ''">
+            <span v-for="i in item" :key="i">{{ i }}</span>
+          </div>
+        </li>
+      </ul>
+      <ul class="currentCity">
+        <li v-for="(item, index) in currentCity" :key="index">
+          <div>{{ item.name }}</div>
+        </li>
+      </ul>
+    </a-modal>
     <!-- 筛选导航 -->
     <div class="navigation" id="navigation">
       <div class="w">
@@ -52,6 +81,8 @@
         </div>
         <ul class="filterbox">
           <li>
+            <!-- @click="visible = true" -->
+
             <i class="iconfont icon-dingwei"></i
             ><a-cascader
               :options="cityoption"
@@ -337,11 +368,15 @@ import {
   // JobListApi,
   getJobSpecialApi,
   getProvinceApi,
+  getHotCityApi,
+  getCityWhichHasJobApi,
+  getHotStoreApi,
   // getCityApi,
 } from "../../api/job";
 import { moneyToFixed, getSalaryClassifyValue } from "../../utils/commonUtil";
 import recommend from "@/components/FirstJob/components/recommend.vue";
 import { nationlist } from "../../utils/datalist";
+// import PinYin from '../../utils/ChinesePY'
 // import recordbill from "@/components/FirstJob/components/recordbill.vue";
 export default {
   // 注入获取职位列表的方法
@@ -380,6 +415,12 @@ export default {
       visible: false, // 录单模态框的展示
       confirmLoading: false, // 录单提交的loading效果
       cityoption: [], // 城市列表
+      hotCityList: [], // 热门城市列表
+      hasJobCityList: {}, // 有职位的城市列表
+      currentCity: {}, // 当前首字母展示的城市列表
+      cityValue: "", // 城市输入框内容
+      activeInd: -1,
+      hotStoreList: [],
       newFormValue: [],
       apply: "", // 报名企业id
       proxyinfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
@@ -459,8 +500,8 @@ export default {
             document.getElementById("city").style.width =
               (result.length + 3) * 14 + "px";
             document.getElementById("city").style.maxWidth = "210px";
-            document.querySelector("#city").nextElementSibling.style.width = // 获取下一个兄弟元素s
-              (result.length + 3) * 14 + "px";
+            document.querySelector("#city").nextElementSibling.style.width =
+              (result.length + 3) * 14 + "px"; // 获取下一个兄弟元素s
             document.getElementById("city").nextElementSibling.style.maxWidth =
               "210px";
           } else if (result.length > 5) {
@@ -533,6 +574,9 @@ export default {
     this.getJobSpecial();
     this.getProvince();
     this.getdateinfo();
+    this.getHotCity();
+    this.getCityWhichHasJob();
+    this.getHotStore();
   },
   /**
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
@@ -556,6 +600,7 @@ export default {
     //     // return document.body;
     //   };
     // },
+
     //搜索企业名称
     onSearch(e) {
       console.log(e);
@@ -712,50 +757,50 @@ export default {
       // });
     },
     // 录单弹出层的关闭
-    handleCancel() {
-      this.visible = false;
-      this.form = {
-        // 录单数据
-        name: "",
-        peoplecard: "",
-        gender: "",
-        nation: "",
-        location: "",
-        firm: "",
-        post: "",
-        pattern: "",
-        policy: "",
-        proxy: "",
-        facedate: "",
-      };
-    },
+    // handleCancel() {
+    // 	this.visible = false;
+    // 	this.form = {
+    // 		// 录单数据
+    // 		name: "",
+    // 		peoplecard: "",
+    // 		gender: "",
+    // 		nation: "",
+    // 		location: "",
+    // 		firm: "",
+    // 		post: "",
+    // 		pattern: "",
+    // 		policy: "",
+    // 		proxy: "",
+    // 		facedate: "",
+    // 	};
+    // },
     // 录单提交按钮的回调
 
     // 弹出录单模态框
-    showmodal(item) {
-      this.visible = true;
-      this.apply = item;
-      console.log(this.apply);
-      // console.log(id);
-    },
-    onClose() {
-      console.log(123);
-      this.visible = false;
-      this.form = {
-        // 录单数据
-        name: "",
-        peoplecard: "",
-        gender: "", // 性别
-        nation: "", // 民族
-        location: "", // 家庭住址
-        firm: "", // 公司名
-        post: "", // 岗位
-        pattern: "", // 模式
-        policy: "", // 代理政策
-        proxy: "", // 代理
-        facedate: "", // 面试时间
-      };
-    },
+    // showmodal(item) {
+    // 	this.visible = true;
+    // 	this.apply = item;
+    // 	console.log(this.apply);
+    // 	// console.log(id);
+    // },
+    // onClose() {
+    // 	console.log(123);
+    // 	this.visible = false;
+    // 	this.form = {
+    // 		// 录单数据
+    // 		name: "",
+    // 		peoplecard: "",
+    // 		gender: "", // 性别
+    // 		nation: "", // 民族
+    // 		location: "", // 家庭住址
+    // 		firm: "", // 公司名
+    // 		post: "", // 岗位
+    // 		pattern: "", // 模式
+    // 		policy: "", // 代理政策
+    // 		proxy: "", // 代理
+    // 		facedate: "", // 面试时间
+    // 	};
+    // },
     // 获取日期信息
     getdateinfo() {
       const date = new Date();
@@ -807,6 +852,89 @@ export default {
     getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
       return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
     },
+    async getHotCity() {
+      try {
+        const { data } = await getHotCityApi();
+        console.log(data);
+        if (data.status == 200) {
+          this.hotCityList = data.data;
+          this.currentCity = this.hotCityList;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getCityWhichHasJob() {
+      try {
+        const { data } = await getCityWhichHasJobApi();
+        console.log(data);
+        if (data.status == 200) {
+          let pinyinList = [];
+          data.data.forEach((item) => {
+            if (pinyinList.indexOf(item.firstLetter) == -1) {
+              pinyinList.push(item.firstLetter);
+            }
+          });
+          pinyinList.sort(); // 拼音首字母排序
+          let firstList = [];
+          let cityList = [];
+          let num = -1;
+
+          pinyinList.forEach((item, i) => {
+            if (i % 5 == 0) {
+              num++;
+              firstList[num] = [];
+            }
+            firstList[num].push(item);
+          });
+          firstList.forEach((item, i) => {
+            cityList[i] = [];
+
+            item.forEach((item1) => {
+              data.data.forEach((item2) => {
+                if (item2.firstLetter == item1) {
+                  cityList[i].push(item2);
+                }
+              });
+            });
+          });
+          this.hasJobCityList.firstList = firstList;
+          this.hasJobCityList.cityList = cityList;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getHotStore() {
+      try {
+        const { data } = await getHotStoreApi();
+        console.log(data);
+        if (data.status == 200) {
+          this.hotStoreList = data.data;
+          console.log(this.hotStoreList);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    changeCurrentCity(index) {
+      this.currentCity = this.hasJobCityList.cityList[index];
+      console.log(index);
+    },
+    searchCity() {
+      if (this.cityValue) {
+        this.currentCity = [];
+        this.hotCityList.forEach((item) => {
+          console.log(item);
+          console.log(item.name.indexOf(this.cityValue));
+          if (item.name.indexOf(this.cityValue) > -1) {
+            console.log(123);
+            this.currentCity.push(item);
+          }
+        });
+        console.log(this.currentCity);
+      }
+    },
     // todetail(item) {
     //   const routeURL = this.$router.resolve({
     //     name: "Detail",
@@ -1569,4 +1697,57 @@ export default {
     }
   }
 }
+.cityModal {
+  .inputBox {
+    display: flex;
+  }
+  .ant-input-affix-wrapper {
+    flex: 1;
+    margin-right: 30px;
+  }
+  button {
+    width: 60px;
+    height: 32px;
+  }
+  .firstList {
+    display: flex;
+    justify-content: start;
+    margin: 30px 0;
+    li {
+      width: 16.6%;
+      text-align: center;
+      div {
+        width: 60%;
+        padding-bottom: 5px;
+      }
+      .active {
+        color: #ff6a00;
+        // position: relative;
+        // &::after {
+        //   content:'';
+        //   display: block;
+        //   position: absolute;
+        //   height: 2px;
+        //   width: 50px;
+        //   bottom: 0;
+        //   left: 0;
+        //   background-color: #ff6a00;
+        // }
+        border-bottom: 2px solid #ff6a00;
+      }
+    }
+  }
+  .currentCity {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      width: 16.6%;
+      margin-bottom: 20px;
+      text-align: center;
+      div {
+        width: 60%;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/FirstJob/joblist1.vue b/src/components/FirstJob/joblist1.vue
new file mode 100644
index 0000000..b5a1e6c
--- /dev/null
+++ b/src/components/FirstJob/joblist1.vue
@@ -0,0 +1,1817 @@
+<template>
+  <div class="joblist-container">
+    <!-- <div class="searchbox">
+      <div class="w">
+        <span></span>
+      </div>
+    </div> -->
+    <!-- 录单弹出框 -->
+    <!-- <a-drawer title="报名" placement="right" :closable="true" :visible="visible" labelAlign="right" width="480" @close="onClose"> -->
+    <!-- <recordbill :visible.sync="visible" :firminfo="apply"></recordbill> -->
+    <!-- </a-drawer> -->
+    <!-- <a-modal
+      title="报名"
+      :visible="visible"
+      class="modal"
+      :confirm-loading="confirmLoading"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      :maskClosable="false"
+      okText="提交"
+      cancelText="取消"
+      :destroyOnClose="true"
+    >
+    </a-modal> -->
+    <!-- 城市的弹出框 -->
+    <a-modal
+      class="cityModal"
+      v-model="visible"
+      width="680px"
+      title="请选择城市"
+      :footer="null"
+    >
+      <div class="inputBox">
+        <a-input
+          placeholder="请输入城市名称"
+          allow-clear
+          width="300px"
+          v-model="cityValue"
+        ></a-input
+        ><a-button @click="searchCity">确认</a-button>
+      </div>
+      <ul class="firstList">
+        <li @click="[(currentCity = hotCityList), (activeInd = -1)]">
+          <div :class="activeInd == -1 ? 'active' : ''">热门地区</div>
+        </li>
+        <li
+          v-for="(item, index) in hasJobCityList.firstList"
+          :key="index"
+          @click="[changeCurrentCity(index), (activeInd = index)]"
+        >
+          <div :class="activeInd == index ? 'active' : ''">
+            <span v-for="i in item" :key="i">{{ i }}</span>
+          </div>
+        </li>
+      </ul>
+      <ul class="currentCity">
+        <li v-for="(item, index) in currentCity" :key="index">
+          <div @click="searchJob(item)">{{ item.name }}</div>
+        </li>
+      </ul>
+    </a-modal>
+    <!-- 筛选导航 -->
+    <div class="navigation" id="navigation">
+      <div class="w">
+        <!-- 特色筛选的列表盒子 -->
+        <div v-if="isspecialboxshow" class="specialbox" @click.stop="">
+          <div class="w">
+            <ul>
+              <li
+                v-for="(item, index) in specialList"
+                :key="index"
+                @click.stop="specialclick(index, item)"
+                :class="{
+                  'special-active': specialactive.indexOf(item.name) > -1,
+                }"
+              >
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <ul class="filterbox" style="display: none">
+          <!-- @click="visible = true" -->
+          <li>
+            <i class="iconfont icon-dingwei"></i
+            ><a-cascader
+              :options="cityoption"
+              change-on-select
+              @change="onChange"
+              placeholder="选择城市"
+              v-model="formvalue.district"
+              popupClassName="flitercity"
+              :getPopupContainer="
+                (triggerNode) => {
+                  return triggerNode.parentNode || document.body;
+                }
+              "
+              id="city"
+              :popupStyle="{
+                transform: 'all .1s',
+              }"
+              ><i slot="suffixIcon" class="iconfont icon-xiala"></i
+            ></a-cascader>
+          </li>
+          <li>
+            <a-cascader
+              :options="options.price"
+              placeholder="工价"
+              @change="onChange"
+              popupClassName="monthlypay"
+              :getPopupContainer="
+                (triggerNode) => {
+                  return triggerNode.parentNode || document.body;
+                }
+              "
+              v-model="formvalue.monthlyPayStr"
+              id="price"
+              ><i slot="suffixIcon" class="iconfont icon-xiala"></i
+            ></a-cascader>
+          </li>
+
+          <li>
+            <a-cascader
+              :options="options.age"
+              placeholder="年龄"
+              @change="onChange"
+              popupClassName="agestr"
+              :getPopupContainer="
+                (triggerNode) => {
+                  return triggerNode.parentNode || document.body;
+                }
+              "
+              v-model="formvalue.ageStr"
+              id="age"
+              ><i slot="suffixIcon" class="iconfont icon-xiala"></i
+            ></a-cascader>
+          </li>
+          <li class="special">
+            <div
+              @click.stop="isspecialboxshowclick"
+              :style="isspecialboxshow ? 'color:#ff6a00' : ''"
+            >
+              <ul class="showspecial" v-if="specialactive.length !== 0">
+                <li
+                  v-for="(item, index) in specialactive"
+                  :key="index"
+                  @click.stop
+                >
+                  {{ item
+                  }}<i
+                    class="iconfont icon-guanbi"
+                    @click.stop="delmark(index)"
+                  ></i>
+                </li>
+              </ul>
+              <span v-if="specialactive.length > 3">...</span>
+              <span
+                :style="specialactive.length != 0 ? 'color:#ff6a00' : ''"
+                v-if="specialactive.length === 0"
+                >特色</span
+              ><i
+                class="iconfont icon-xiala"
+                :class="isspecialboxshow ? 'turn' : ''"
+                :style="isspecialboxshow ? 'color:#ff6a00' : ''"
+              ></i>
+            </div>
+          </li>
+          <li class="claerfilter">
+            <a
+              @click="claerfilter"
+              href="javascript:;"
+              v-if="
+                formvalue.district.length !== 0 ||
+                formvalue.monthlyPayStr.length !== 0 ||
+                formvalue.ageStr.length !== 0 ||
+                formvalue.jobSpecialLabelIds.length !== 0
+              "
+              >清空筛选</a
+            >
+          </li>
+        </ul>
+        <span>
+          <a-input
+            placeholder="搜索企业/公司"
+            @keyup.enter="onSearch"
+            @input="resetsearch"
+            v-model="searchvalue"
+            class="searchinput"
+            style="width: 500px"
+            ><div slot="prefix" @click="visible = true">
+              全国<i class="iconfont icon-sousuoxiala"></i>
+            </div>
+            <button slot="suffix" @click="onSearch" style="margin-right: -12px">
+              搜索
+            </button>
+          </a-input>
+        </span>
+        <div class="hotStore">
+          <span>热门企业：</span>
+          <ul>
+            <li
+              v-for="(item, index) in hotStoreList"
+              :key="index"
+              @click="getHotStoreList(item)"
+            >
+              {{ item.aliasName }}
+            </li>
+            <li @click="resetResult" style="color: #aaa">重置</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <!-- 面包屑 -->
+    <!-- <a-breadcrumb class="w">
+      <a-breadcrumb-item href="">
+        <router-link to="/main"><a-icon type="home" /></router-link>
+      </a-breadcrumb-item>
+      <a-breadcrumb-item href="">
+        <span>一手职位</span>
+      </a-breadcrumb-item>
+    </a-breadcrumb> -->
+    <!-- 主体部分 -->
+    <div class="w" id="maincontent">
+      <div class="maincontentleft">
+        <div style="text-align: center">
+          <a-spin tip="加载中..." :spinning="isspinning"></a-spin>
+        </div>
+        <!-- <div
+          class="nodata"
+          v-if="jobMainList.length === 0 && isspinning === false"
+        > -->
+        <template v-if="jobMainList.length === 0 && isspinning === false">
+          <a-empty class="nodata" description="暂无符合条件的岗位" />
+        </template>
+        <!-- </div> -->
+        <div v-if="!isspinning">
+          <div class="subset" v-for="(item, index) in jobMainList" :key="index">
+            <div class="subsetleft">
+              <router-link
+                target="_blank"
+                :to="'/detail/' + item.id"
+                rel="opener"
+              >
+                <div class="imgbox" @click="totop">
+                  <img v-if="item.logo.length !== 0" :src="item.logo" />
+                  <img
+                    v-else
+                    src="../../../static/img/nopicture.png"
+                    style="height: 169px; width: "
+                  />
+                </div>
+              </router-link>
+              <div class="jobinfobox">
+                <router-link
+                  target="_blank"
+                  :to="'/detail/' + item.id"
+                  rel="opener"
+                >
+                  <div class="jobname" @click="totop">{{ item.jobName }}</div>
+                </router-link>
+                <div class="jobinfo">
+                  <span>{{ item.district }}</span>
+                  <span>{{ item.gender }}</span>
+                  <span>{{ item.age }}</span>
+                </div>
+                <div class="jobtag">
+                  <!-- <span>返费</span> -->
+                  <span
+                    v-for="(item1, index) in item.jobSpecialLabelNames"
+                    :key="index"
+                    >{{ item1 }}</span
+                  >
+                </div>
+                <div class="jobpricemonth">
+                  <!-- :style="{ opacity: item.minMonthlyPay ? '1' : '0' }" -->
+
+                  <span>{{ item.minMonthlyPay ? item.minMonthlyPay : "" }}</span
+                  >-<span>{{
+                    item.maxMonthlyPay ? item.maxMonthlyPay : ""
+                  }}</span
+                  >元/月
+                </div>
+                <div class="jobpricehour">
+                  {{
+                    getSalaryClassifyValue(
+                      item.salaryClassify,
+                      item.salaryClassifyValue
+                    )
+                  }}
+
+                  <!-- <template v-if="item.hourlyPay"
+                    ><span>{{ item.hourlyPay }}</span
+                    >元/小时</template
+                  >
+                  <template v-else-if="item.dayPay"
+                    ><span>{{ item.dayPay }}</span
+                    >元/日</template
+                  > -->
+                </div>
+              </div>
+            </div>
+            <div class="subsetright">
+              <div class="topContainer">
+                <div class="updateTime">
+                  <span
+                    >更新时间：{{ item.updateTime || "--" }} (
+                    {{ item.diffTime || "--" }} )
+                  </span>
+                </div>
+                <div class="topbox">
+                  <div>服务费</div>
+                  <div>{{ item.servetype }}</div>
+                </div>
+              </div>
+              <div class="bottombox1">
+                <router-link
+                  :to="'/detail/' + item.id"
+                  target="_blank"
+                  rel="opener"
+                  ><button>更多</button></router-link
+                >
+
+                <button @click="torecord(item)">报名</button>
+
+                <!-- <button @click="showmodal(item)" @click="">报名</button> -->
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pagecontainer">
+          <a-pagination
+            :current="+formvalue.pageNum"
+            :default-current="1"
+            :defaultPageSize="8"
+            :total="formvalue.total"
+            @change="pageChange"
+          />
+          <div class="ant-pagination-options-quick-jumper">
+            跳至<input
+              ref="pageinput"
+              type="text"
+              @keyup.enter="inputpageChange"
+              @blur="inputpageChange"
+            />页
+          </div>
+        </div>
+      </div>
+      <div class="maincontentright">
+        <div class="dateinfo">
+          <h1 class="bottombox"><i>我的日历</i></h1>
+          <p
+            class="day"
+            :style="{
+              'font-size': '60px',
+              color: '#FF6A00',
+              'line-height': '80px',
+              'margin-top': '8px',
+            }"
+          >
+            {{ dateinfo.day }}
+          </p>
+          <p class="week" :style="{ 'font-size': '16px', color: '#FF6A00' }">
+            {{ dateinfo.week }}
+          </p>
+          <p class="date" :style="{ 'font-size': '16px', color: '#FF6A00' }">
+            {{ dateinfo.date }}
+          </p>
+        </div>
+        <div class="hotphone">
+          <h1 class="bottombox"><i>服务热线</i></h1>
+          <p>135 2307 4549</p>
+        </div>
+        <!-- <div class="relationme">
+          <p class="bottombox"><i>一手单合作</i></p>
+          <button>发布一手单</button>
+        </div> -->
+        <recommend />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  // JobListApi,
+  getJobSpecialApi,
+  getProvinceApi,
+  getHotCityApi,
+  getCityWhichHasJobApi,
+  getHotStoreApi,
+  // getCityApi,
+} from "../../api/job";
+import { moneyToFixed, getSalaryClassifyValue } from "../../utils/commonUtil";
+import recommend from "@/components/FirstJob/components/recommend.vue";
+import { nationlist } from "../../utils/datalist";
+// import PinYin from '../../utils/ChinesePY'
+// import recordbill from "@/components/FirstJob/components/recordbill.vue";
+export default {
+  // 注入获取职位列表的方法
+  inject: ["getJobList", "reload"],
+  // 组件名称
+  name: "",
+  // 局部注册的组件
+  components: {
+    recommend,
+    // recordbill,
+  },
+  // 组件参数 接收来自父组件的数据
+  props: {
+    isspecialboxshow: {
+      require: true,
+    },
+    formvalue: {
+      // type: Object,
+      require: true,
+    },
+    jobMainList: {
+      require: true,
+    },
+    isspinning: {
+      require: true,
+    }, // 加载中显示
+  },
+  // 组件状态值
+  data() {
+    return {
+      // jobMainList: [], // 职位列表
+      specialList: [], // 获取的特色列表
+      searchvalue: "",
+      specialactive: [], // 点中的特色标签索引
+      specialvalue: [], // 点中的特色标签
+      visible: false, // 录单模态框的展示
+      confirmLoading: false, // 录单提交的loading效果
+      cityoption: [], // 城市列表
+      hotCityList: [], // 热门城市列表
+      hasJobCityList: {}, // 有职位的城市列表
+      currentCity: {}, // 当前首字母展示的城市列表
+      cityValue: "", // 城市输入框内容
+      activeInd: -1,
+      hotStoreList: [],
+      newFormValue: [],
+      apply: "", // 报名企业id
+      proxyinfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
+      nationlist: nationlist,
+
+      dateinfo: {
+        day: "",
+        week: "",
+        date: "",
+      },
+
+      options: {
+        //
+        price: [
+          {
+            value: "3000-4000",
+            label: "3000-4000元",
+            uid: 1,
+          },
+          {
+            value: "4000-5000",
+            label: "4000-5000元",
+            uid: 1,
+          },
+          {
+            value: "5000-6000",
+            label: "5000-6000元",
+            uid: 1,
+          },
+          {
+            value: "6000-7000",
+            label: "6000-7000元",
+            uid: 1,
+          },
+        ],
+        age: [
+          {
+            value: "16-45",
+            label: "16-45岁",
+            uid: 2,
+          },
+          {
+            value: "18-35",
+            label: "18-35岁",
+            uid: 2,
+          },
+          {
+            value: "45-58",
+            label: "45-58岁",
+            uid: 2,
+          },
+          {
+            value: "58",
+            label: "58岁以上",
+            uid: 2,
+          },
+        ],
+      },
+      relationList: [],
+    };
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {
+    formvalue: {
+      handler(e) {
+        // console.log(e);
+        // 筛选列表数据处理
+        // if(e.city !== undefined){
+        if (e.district.length === 0) {
+          document.getElementById("city").style.width = 85 + "px";
+        } else {
+          const result = e.district.join("");
+          // console.log(result);
+          if (result.length > 6) {
+            document.getElementById("city").style.width =
+              (result.length + 3) * 14 + "px";
+            document.getElementById("city").style.maxWidth = "210px";
+            document.querySelector("#city").nextElementSibling.style.width =
+              (result.length + 3) * 14 + "px"; // 获取下一个兄弟元素s
+            document.getElementById("city").nextElementSibling.style.maxWidth =
+              "210px";
+          } else if (result.length > 5) {
+            document.getElementById("city").style.width =
+              (result.length + 2.8) * 14 + "px";
+            document.querySelector("#city").nextElementSibling.style.width =
+              (result.length + 2.6) * 14 + "px";
+          } else if (result.length > 4) {
+            document.getElementById("city").style.width =
+              (result.length + 2.4) * 14 + "px";
+            document.querySelector("#city").nextElementSibling.style.width =
+              (result.length + 2.4) * 14 + "px";
+          } else {
+            document.getElementById("city").style.width =
+              (result.length + 1.5) * 14 + "px";
+            document.getElementById("city").style.minWidth = 72 + "px";
+            document.querySelector("#city").nextElementSibling.style.width =
+              (result.length + 1.5) * 14 + "px";
+          }
+        }
+        // }
+        // 工价的判断
+        if (e.monthlyPayStr.length === 0) {
+          document.getElementById("price").style.width = 60 + "px";
+        } else {
+          const result = e.monthlyPayStr.join("");
+          if (result.length >= 0) {
+            document.getElementById("price").style.width = "120px";
+            document.getElementById("price").nextElementSibling.style.width =
+              "130px";
+            // document.querySelector(".ant-cascader-picker-label").style.width =
+            // "150px";
+          }
+        }
+        // 年龄筛选长度的判断
+        if (e.ageStr.length === 0) {
+          document.getElementById("age").style.width = 60 + "px";
+        } else {
+          const result = e.ageStr.join("");
+          if (result.length >= 0) {
+            document.getElementById("age").style.width = "90px";
+            document.getElementById("age").nextElementSibling.style.width =
+              "90px";
+            // document.querySelector(".ant-cascader-picker-label").style.width =
+            // "150px";
+          }
+        }
+      },
+      deep: true,
+    },
+    $route: {
+      handler(to, from) {
+        console.log("ischange");
+        console.log(to);
+        console.log(from);
+      },
+      deep: true,
+    },
+  },
+  // 组件
+
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {
+    console.log(this.proxyinfo);
+    // this.reload();
+    this.getJobList();
+    this.getJobSpecial();
+    this.getProvince();
+    this.getdateinfo();
+    this.getHotCity();
+    this.getCityWhichHasJob();
+    this.getHotStore();
+  },
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {
+    // this.$nextTick(() => {
+    //   console.log(this.isspecialboxshow);
+    // });
+    // document.querySelector(".ant-pagination-options-quick-jumper").innerHTML =
+    //   "跳至<input  type='text'>页";
+    console.log(this.formvalue);
+    console.log(this.$route);
+  },
+  // 组件方法
+  methods: {
+    // 处理筛选框的定位
+    // filterbox() {
+    //   return () => {
+    //     return document.getElementById("filterbox")[0];
+    //     // return document.body;
+    //   };
+    // },
+
+    //搜索企业名称
+    onSearch(e) {
+      console.log(e);
+      // if (typeof e === "string" || typeof e === "number") {
+      //   if (e.length !== 0) {
+      //     console.log("zifuchuan ");
+      //     this.formvalue.aliasName = e;
+      //     this.getJobList();
+      //   }
+      // } else
+      this.formvalue.pageNum = 1;
+      if (e.target.value.trim() !== "") {
+        console.log("search");
+        this.formvalue.aliasName = e.target.value.trim();
+        this.getJobList();
+      } else if (this.searchvalue.trim() !== "") {
+        console.log("search1");
+        this.formvalue.aliasName = this.searchvalue;
+        this.getJobList();
+      }
+
+      // this.$router.push("/list").catch((err) => {
+      //   console.log(err);
+      // });
+    },
+    // 获取职位特色
+    async getJobSpecial() {
+      try {
+        const { data } = await getJobSpecialApi();
+        console.log(data);
+        this.specialList = data.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    // 获取省份列表
+    async getProvince() {
+      // const that = this;
+      try {
+        const { data } = await getProvinceApi();
+        // console.log(data);
+        data.data.pop();
+        this.cityoption = data.data;
+
+        // console.log(this.cityoption);
+        // console.log(data);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 筛选职位
+    onChange(e, item) {
+      console.log(e);
+      console.log(item);
+      if (item) {
+        if (item.uid === 1) {
+          console.log(1);
+          this.formvalue.monthlyPayStr = item[0];
+        } else if (item.uid === 2) {
+          this.formvalue.ageStr = item[0];
+        } else if (item[0].id) {
+          console.log(e.join());
+          this.formvalue.district = e;
+        }
+      }
+      this.getJobList();
+    },
+    pageChange(e) {
+      console.log(e);
+      this.formvalue.pageNum = e;
+      this.$refs.pageinput.value = "";
+      this.getJobList();
+    },
+    inputpageChange(e) {
+      const pagenumcount = this.formvalue.total / this.formvalue.pageSize;
+      console.log(pagenumcount);
+      if (e.target.value) {
+        if (e.target.value > pagenumcount) {
+          this.formvalue.pageNum = Math.ceil(pagenumcount);
+        } else {
+          this.formvalue.pageNum = e.target.value;
+        }
+      } else {
+        this.formvalue.pageNum = 1;
+      }
+      this.getJobList();
+      console.log(e);
+    },
+    handleChange() {},
+    claerfilter() {
+      const { pageNum, pageSize, total } = this.formvalue;
+      // this.formvalue = {  // 改变引用地址不会使vue侦听到数据的变化,
+      //   district: [],
+      //   monthlyPayStr: [],
+      //   ageStr: [],
+      //   jobSpecialLabelIds: [],
+      //   pageNum,
+      //   pageSize,
+      //   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);
+      this.specialactive = [];
+      this.specialvalue = [];
+      this.getJobList();
+    },
+    specialclick(index, item) {
+      console.log(item);
+      console.log(index);
+      let arrIndex = this.specialactive.indexOf(item.name);
+      if (arrIndex > -1) {
+        this.specialactive.splice(arrIndex, 1);
+        this.specialvalue.splice(arrIndex, 1);
+      } else {
+        this.specialactive.push(item.name);
+        this.specialvalue.push(item.id);
+      }
+      this.formvalue.jobSpecialLabelIds = this.specialvalue;
+      // console.log(this.specialactive);
+      this.getJobList();
+      console.log(this.specialvalue);
+      console.log(this.formvalue);
+      // console.log(index);
+    },
+    isspecialboxshowclick() {
+      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);
+      // });
+    },
+
+    // 录单弹出层的关闭
+    // handleCancel() {
+    // 	this.visible = false;
+    // 	this.form = {
+    // 		// 录单数据
+    // 		name: "",
+    // 		peoplecard: "",
+    // 		gender: "",
+    // 		nation: "",
+    // 		location: "",
+    // 		firm: "",
+    // 		post: "",
+    // 		pattern: "",
+    // 		policy: "",
+    // 		proxy: "",
+    // 		facedate: "",
+    // 	};
+    // },
+    // 录单提交按钮的回调
+
+    // 弹出录单模态框
+    // showmodal(item) {
+    // 	this.visible = true;
+    // 	this.apply = item;
+    // 	console.log(this.apply);
+    // 	// console.log(id);
+    // },
+    // onClose() {
+    // 	console.log(123);
+    // 	this.visible = false;
+    // 	this.form = {
+    // 		// 录单数据
+    // 		name: "",
+    // 		peoplecard: "",
+    // 		gender: "", // 性别
+    // 		nation: "", // 民族
+    // 		location: "", // 家庭住址
+    // 		firm: "", // 公司名
+    // 		post: "", // 岗位
+    // 		pattern: "", // 模式
+    // 		policy: "", // 代理政策
+    // 		proxy: "", // 代理
+    // 		facedate: "", // 面试时间
+    // 	};
+    // },
+    // 获取日期信息
+    getdateinfo() {
+      const date = new Date();
+      // console.log(date);
+      // console.log(date.getDate());
+      // console.log(date.getDay());
+      // console.log(date.getFullYear());
+      // console.log(date.getMonth());
+      if (date.getDay() === 1) {
+        this.dateinfo.week = "星期一";
+      } else if (date.getDay() === 2) {
+        this.dateinfo.week = "星期二";
+      } else if (date.getDay() === 3) {
+        this.dateinfo.week = "星期三";
+      } else if (date.getDay() === 4) {
+        this.dateinfo.week = "星期四";
+      } else if (date.getDay() === 5) {
+        this.dateinfo.week = "星期五";
+      } else if (date.getDay() === 6) {
+        this.dateinfo.week = "星期六";
+      } else if (date.getDay() === 7) {
+        this.dateinfo.week = "星期日";
+      }
+      // console.log(date.getDate());
+      // console.log(date.getDate().length);
+      if (date.getDate().toString().length <= 1) {
+        this.dateinfo.day = "0" + date.getDate();
+        console.log(this.dateinfo.day);
+      } else {
+        this.dateinfo.day = date.getDate();
+        console.log(this.dateinfo.day);
+      }
+      this.dateinfo.date = date.getFullYear() + "." + (date.getMonth() + 1);
+    },
+    delmark(index) {
+      console.log(index);
+      this.specialactive.splice(index, 1);
+      this.specialvalue.splice(index, 1);
+      this.getJobList();
+    },
+    torecord(item) {
+      // 跳转到路由新页面的方法
+      console.log(item);
+      // let userinfo = JSON.stringify(item);
+
+      this.$router.push({ name: "recordbill", params: item });
+      sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(item));
+    },
+    getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
+      return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
+    },
+    async getHotCity() {
+      try {
+        const { data } = await getHotCityApi();
+        console.log(data);
+        if (data.status == 200) {
+          this.hotCityList = data.data;
+          this.currentCity = this.hotCityList;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getCityWhichHasJob() {
+      try {
+        const { data } = await getCityWhichHasJobApi();
+        console.log(data);
+        if (data.status == 200) {
+          let pinyinList = [];
+          data.data.forEach((item) => {
+            if (pinyinList.indexOf(item.firstLetter) == -1) {
+              pinyinList.push(item.firstLetter);
+            }
+          });
+          pinyinList.sort(); // 拼音首字母排序
+          let firstList = [];
+          let cityList = [];
+          let num = -1;
+
+          pinyinList.forEach((item, i) => {
+            if (i % 5 == 0) {
+              num++;
+              firstList[num] = [];
+            }
+            firstList[num].push(item);
+          });
+          firstList.forEach((item, i) => {
+            cityList[i] = [];
+
+            item.forEach((item1) => {
+              data.data.forEach((item2) => {
+                if (item2.firstLetter == item1) {
+                  cityList[i].push(item2);
+                }
+              });
+            });
+          });
+          this.hasJobCityList.firstList = firstList;
+          this.hasJobCityList.cityList = cityList;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getHotStore() {
+      try {
+        const { data } = await getHotStoreApi();
+        console.log(data);
+        if (data.status == 200) {
+          this.hotStoreList = data.data;
+          console.log(this.hotStoreList);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    changeCurrentCity(index) {
+      this.currentCity = this.hasJobCityList.cityList[index];
+      console.log(index);
+    },
+    searchCity() {
+      if (this.cityValue) {
+        this.currentCity = [];
+        this.hotCityList.forEach((item) => {
+          console.log(item);
+          console.log(item.name.indexOf(this.cityValue));
+          if (item.name.indexOf(this.cityValue) > -1) {
+            console.log(123);
+            this.currentCity.push(item);
+          }
+        });
+        console.log(this.currentCity);
+      }
+    },
+    searchJob(item) {
+      console.log(item);
+      this.formvalue.cityName = item.name;
+      this.formvalue.levelType = item.levelType;
+      this.getJobList();
+      this.visible = false;
+    },
+    getHotStoreList(item) {
+      console.log(item);
+      this.formvalue.hotStoreId = item.storeId;
+      this.getJobList();
+    },
+    resetResult() {
+      this.formvalue.cityName = "";
+      this.formvalue.levelType = "";
+      this.formvalue.hotStoreId = "";
+      console.log(this.formvalue);
+      this.getJobList();
+    },
+    // todetail(item) {
+    //   const routeURL = this.$router.resolve({
+    //     name: "Detail",
+    //     query: item.id,
+    //   });
+    //   window.open(routeURL.href, "_blank");
+    //   console.log(item);
+    // },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.dropdown {
+  display: inline-block;
+  width: 100px;
+  height: 32px;
+  line-height: 30px;
+  font-size: 16px;
+  // border: 1px solid rgba(77, 87, 94, 0.3);
+  border-radius: 4px;
+  margin-left: 16px;
+  border: 1px solid #ff6a00;
+  background-color: #fff;
+  color: rgba(255, 106, 0, 1);
+  text-align: center;
+  cursor: pointer;
+  &:hover {
+    color: #fff;
+
+    background-color: rgba(255, 121, 26);
+  }
+}
+/deep/ .ant-drawer-content {
+  box-sizing: border-box;
+}
+// 录单模态框样式
+/deep/ .ant-drawer-wrapper-body {
+  // overflow: none;
+  // position: relative;
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 4px;
+  }
+
+  .ant-drawer-header {
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    padding: 12px 24px;
+    z-index: 999;
+    .ant-drawer-close {
+      height: 48px;
+      width: 48px;
+      line-height: 48px;
+    }
+  }
+  .ant-drawer-body {
+    overflow-y: auto;
+    margin-top: 47px;
+  }
+}
+
+/deep/ .ant-form {
+  // overflow: auto;
+  margin-bottom: 50px;
+}
+
+/deep/ .ant-form-item {
+  // margin-bottom: 0;
+  display: flex;
+  justify-content: start;
+  align-items: middle;
+  margin-top: -8px;
+  .ant-form-item-label {
+    line-height: 40px;
+    // font-weight: bold;
+  }
+
+  .ant-input {
+    // width: 430px;
+    height: 40px;
+    // border: none;
+    border: 1px solid #dddddd;
+    box-shadow: none !important;
+    // background-color: #f6f6f6;
+  }
+  .ant-select-selection__rendered,
+  .ant-select-selection--single,
+  .ant-select {
+    height: 40px;
+    // border: none;
+    // border: 1px solid #dddddd;
+    line-height: 40px;
+    box-shadow: none !important;
+    border-color: #d9d9d9;
+    /deep/ .ant-form-item-children {
+      line-height: 40px;
+      // .ant-radio-checked {
+      // }
+      // display: flex !important;
+    }
+    // &:hover {
+    //   border-color: #d9d9d9;
+    // }
+    // &:focus {
+    //   border-color: #d9d9d9;
+    // }
+    // &:active {
+    //   border-color: #d9d9d9;
+    // }
+  }
+}
+// /deep/ .ant-modal-footer {
+//   padding: 10px 24px;
+//   .ant-btn {
+//     box-shadow: none;
+//     &:hover {
+//       color: #ff6a00;
+//       border-color: #ff6a00;
+//     }
+//   }
+//   .ant-btn.ant-btn-primary {
+//     background-color: #ff6a00 !important;
+//     border: none;
+//     line-height: 32px;
+//     margin-left: 12px;
+//     color: #fff;
+//     box-shadow: none;
+//     &:hover {
+//       background-color: #ff8025 !important;
+//     }
+//   }
+// }
+/deep/ .ant-modal-header {
+  .ant-modal-title {
+    font-size: 20px;
+    // font-weight: normal;
+  }
+}
+/deep/ .ant-drawer-body {
+  overflow: auto;
+  padding: 20px 16px 8px 16px;
+}
+
+/deep/ .navigation {
+  // margin-top: -1px;
+  width: 100vw;
+  background-color: #fff;
+  border: 1px solid #f6f6f6;
+  // height: 72px;
+  // margin-bottom: 10px;
+  // line-height: 100px;
+
+  position: relative;
+  z-index: 999;
+  .special-active {
+    color: rgb(254, 97, 0) !important;
+    background-color: rgba(255, 106, 0, 0.1) !important;
+  }
+  .ant-cascader-picker-focused {
+    input {
+      transition: all 0.3s;
+    }
+    input::placeholder {
+      color: rgb(255, 106, 0) !important;
+    }
+    i {
+      color: rgb(255, 106, 0) !important;
+    }
+  }
+  > .w {
+    // height: 72px;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    .searchinput {
+      margin-top: 19px;
+      // margin-right: 285px;
+      i {
+        font-size: 12px;
+        margin-left: 4px;
+        color: #adadad;
+      }
+      .ant-input-affix-wrapper {
+        position: relative;
+        .ant-input-prefix {
+          position: absolute;
+          left: 8px;
+          top: 16px;
+          i {
+            font-size: 12px;
+            color: #c9c9c9;
+          }
+        }
+        .ant-input-suffix {
+          right: 0px !important;
+        }
+      }
+      .ant-input {
+        width: 100%;
+        height: 32px;
+        text-indent: 30px;
+        background: #fff;
+        // border: 1px solid rgba(77, 87, 94, 0.3);
+        border-radius: 136px;
+        box-shadow: 0px 2px 4px 0px transparent;
+        font-size: 14px !important;
+        padding-right: 0;
+        border-color: #e9e9e9;
+        &::placeholder {
+          text-indent: 30px;
+          font-size: 14px !important;
+        }
+        &:hover {
+          border-color: #ff6a00;
+          box-shadow: none;
+        }
+        &:focus {
+          border-color: #ff6a00;
+        }
+      }
+      button {
+        width: 70px;
+        height: 32px;
+        color: white;
+        background: #ff6a00;
+        border-color: #ff6a00;
+        border: none;
+        border-radius: 16px;
+        font-size: 14px;
+        box-shadow: none;
+        cursor: pointer;
+        outline: none;
+        &:hover {
+          background-color: #ff842b;
+        }
+        // &:focus {
+        //   border: none;
+        // }
+      }
+    }
+    .specialbox {
+      position: absolute;
+      border-bottom: 1px solid #f6f6f6;
+      box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
+      // display: ;
+      transition: all 0.4s;
+      left: 0;
+      top: 71px;
+      width: 100vw;
+      background-color: #fff;
+      z-index: 999;
+      ul {
+        overflow: hidden;
+        padding: 20px 0 8px 0;
+        li {
+          padding: 4px 16px;
+          margin: 0px 16px 12px 0;
+          cursor: pointer;
+          float: left;
+          background: rgba(216, 216, 216, 0.3);
+          border-radius: 15px;
+          font-size: 14px;
+          color: #4d575e;
+          line-height: 22px;
+          &:hover {
+            color: rgb(254, 97, 0);
+            background-color: rgba(255, 106, 0, 0.1);
+          }
+        }
+      }
+    }
+    .hotStore {
+      margin: 20px 0;
+      font-size: 14px;
+      line-height: 2;
+      display: flex;
+      > span {
+        width: 80px;
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1;
+        li {
+          color: #ff6a00;
+          margin-right: 40px;
+          overflow: hidden;
+          cursor: pointer;
+          // &:nth-child(-n + 5) {
+          // 	display: none;
+          // }
+        }
+      }
+    }
+    .filterbox {
+      display: flex;
+      justify-content: flex-start;
+      min-width: 645px;
+      > li {
+        margin-top: 22px;
+        font-size: 14px;
+        color: #4d575e;
+        margin-right: 4px;
+        .ant-cascader-picker {
+          width: auto;
+          position: relative;
+          transform: translateY(-2px);
+          .anticon-close-circle {
+            font-size: 14px;
+          }
+          .icon-xiala {
+            font-size: 12px;
+            transform: translateY(1px) scale(0.5);
+          }
+          .ant-cascader-input {
+            width: 60px;
+            // margin-top: -5px;
+            // max-width: 150px !important;
+            border: none;
+            padding: 0;
+            // margin-bottom: 6px;
+            box-shadow: none;
+
+            &::placeholder {
+              // width: auto;
+              // text-indent: 20px;
+              color: #4d575ecc;
+              line-height: 20px;
+              font-size: 14px;
+            }
+          }
+
+          span {
+            width: 60px;
+            // max-width: 150px;
+            color: rgb(255, 106, 0) !important;
+            font-size: 14px;
+            padding: 0 20px 0 0;
+            text-align: left;
+            line-height: 22px !important;
+          }
+        }
+      }
+      > li:first-child {
+        > i {
+          position: relative;
+          display: inline-block;
+          width: 12px;
+          height: 15px;
+          margin-right: 6px;
+          font-size: 14px;
+          color: #ff6a00;
+          // margin-top: -9px;
+          &::before {
+            position: absolute;
+            left: 0;
+            top: -2px;
+          }
+        }
+        .ant-cascader-picker {
+          width: auto;
+          position: relative;
+          .ant-cascader-input {
+            min-width: 85px;
+            &:hover &::placeholder {
+              color: #ff6a00;
+            }
+          }
+
+          .ant-cascader-input::placeholder {
+            // width: auto;
+            color: #4d575ecc;
+            text-indent: 0;
+            line-height: 20px;
+            font-size: 14px;
+          }
+          span {
+            // width: auto;
+            // max-width: 150px;
+            // min-width: 140px;
+            text-align: left;
+          }
+        }
+      }
+      .special {
+        position: relative;
+        div:first-child {
+          height: 32px;
+          margin-top: -2px;
+          line-height: 32px;
+          color: #4d575ecc;
+          display: flex;
+          cursor: pointer;
+          > .showspecial {
+            height: 32px;
+            overflow: hidden;
+            li {
+              margin: 6px 5px 0 0;
+              float: left;
+              height: 20px;
+              line-height: 19px;
+              padding: 0 8px;
+              color: #fff;
+              background-color: #ff6a00;
+              border-radius: 999px;
+              i {
+                display: inline-block;
+                font-size: 12px;
+                height: 12px;
+                position: relative;
+                margin-left: 3px;
+
+                transform: scale(0.8);
+                // vertical-align: middle;
+              }
+              &:nth-child(n + 4) {
+                display: none;
+              }
+            }
+          }
+          .icon-xiala {
+            transition: all 0.2s;
+            position: relative;
+            // float: left;
+            color: #c5c5c5;
+            margin-left: 4px;
+            display: inline-block;
+            font-size: 12px;
+            transform: translateY(0px) scale(0.5);
+          }
+          // .turn {
+          //   transform: translateY(-1px) scale(0.6) rotate(180deg);
+          // }
+        }
+      }
+      > li:last-child {
+        position: relative;
+        color: #8c8d8f;
+        font-size: 14px;
+        margin: 28px 25px 0 20px;
+        // color: rgba(78, 88, 95, 0.8);
+        transform: translateY(-1px);
+        // margin-left: 25px;
+        a {
+          transition: all 0.5s;
+          line-height: 14px;
+
+          &:active {
+            color: rgb(255, 106, 0);
+            transition: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+/deep/ #maincontent {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+  .maincontentleft {
+    width: 944px;
+    margin-right: 16px;
+    text-align: left;
+    .nodata {
+      overflow: hidden;
+      height: 230px;
+      padding-top: 30px;
+      text-align: center;
+      background-color: #fff;
+      border-radius: 5px;
+      margin: 0 auto;
+      color: #00000066;
+      margin-bottom: 20px;
+      p {
+        position: relative;
+        transform: translateY(35px);
+      }
+    }
+    .subset {
+      display: flex;
+      justify-content: space-between;
+      // width: 944px;
+      // height: 212px;
+      padding: 20px;
+      margin-bottom: 16px;
+      background: #ffffff;
+      border-radius: 4px;
+      transition: all 0.2s;
+
+      &:hover {
+        // position: relative;
+        box-shadow: 3px 3px 20px 0px rgba(77, 87, 94, 0.1);
+        // transform: translateY(-0.5px);
+      }
+      .subsetleft {
+        display: flex;
+        .imgbox {
+          width: 169px;
+          height: 169px;
+          margin-right: 16px;
+          position: relative;
+          overflow: hidden;
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translateX(-50%) translateY(-50%);
+
+            // width: 100%;
+            height: 100%;
+          }
+        }
+        .jobinfobox {
+          .jobname {
+            // margin: 12px 0;
+            font-size: 20px;
+            // font-weight: 400;
+            text-align: left;
+            color: #4d575e;
+            line-height: 20px;
+            &:hover {
+              color: #ff6a00;
+            }
+          }
+          .jobinfo {
+            margin-top: 16px;
+            opacity: 0.5;
+            font-size: 16px;
+            font-weight: 400;
+            text-align: left;
+            color: #4d575e;
+            line-height: 20px;
+          }
+          .jobtag {
+            margin-top: 14px;
+            text-align: left;
+            // span:first-child {
+            //   color: #ff6a00;
+            //   background: rgba(254, 97, 0, 0.1);
+            // }
+            span {
+              margin-right: 8px;
+              font-size: 16px;
+              padding: 2px 10px;
+              background: rgba(51, 51, 51, 0.06);
+              border-radius: 4px;
+            }
+          }
+          .jobpricemonth {
+            margin-top: 12px;
+            font-size: 16px;
+            font-weight: 400;
+            text-align: left;
+            color: #4d575e;
+            line-height: 22px;
+          }
+          .jobpricehour {
+            margin-top: 12px;
+            font-size: 16px;
+            font-weight: normal;
+            text-align: left;
+            color: #ff6a00;
+            // line-height: 24px;
+            span {
+              vertical-align: baseline;
+              font-size: 20px;
+              line-height: 24px;
+            }
+          }
+        }
+      }
+      .subsetright {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-end;
+        .topContainer {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: flex-end;
+          margin-top: -8px;
+        }
+        .updateTime {
+          line-height: 1;
+          font-size: 14px;
+          color: #999;
+        }
+        .topbox {
+          width: 116px;
+          height: 54px;
+          margin-top: 8px;
+          overflow: hidden;
+          text-align: center;
+          background: rgba(255, 106, 0, 0.1);
+          border-radius: 4px;
+          line-height: 30px;
+          div {
+            // font-weight: normal;
+            font-size: 16px;
+            span {
+              font-size: 20px;
+              // font-weight: normal;
+            }
+          }
+          div:first-child {
+            height: 24px;
+            background: #ff6a00;
+            line-height: 21px;
+            font-size: 14px;
+            color: #ffffff;
+            border: 1px solid #ff6a00;
+            border-radius: 4px 4px 0px 0px;
+          }
+          div:last-child {
+            font-weight: normal;
+            background-color: #fff4e3;
+            color: #ff6a00 !important;
+          }
+        }
+        .bottombox1 {
+          display: flex;
+          align-items: center;
+          button {
+            width: 100px;
+            height: 32px;
+            font-size: 16px;
+            // border: 1px solid rgba(77, 87, 94, 0.3);
+            border-radius: 4px;
+          }
+          a {
+            button:first-child {
+              border: 1px solid #d9d9d9;
+              // border-radius: 4px;
+              color: #4d575e;
+              background-color: #fff;
+              cursor: pointer;
+              &:hover {
+                color: #ff7614;
+                border-color: #ff7614;
+              }
+            }
+          }
+
+          > button:last-child {
+            margin-left: 16px;
+            border: 1px solid #ff6a00;
+            background-color: #fff;
+            color: rgba(255, 106, 0, 1);
+            cursor: pointer;
+            &:hover {
+              color: #fff;
+
+              background-color: rgba(255, 121, 26);
+            }
+          }
+        }
+      }
+    }
+    // .pagecontainer {
+    //   display: flex;
+    //   justify-content: center;
+    //   text-align: center;
+    //   margin-bottom: 30px;
+    //   .ant-pagination-options-quick-jumper {
+    //     margin-left: 10px;
+    //     font-size: 16px;
+    //   }
+    //   .ant-pagination-disabled {
+    //     a:hover {
+    //       color: #c5c5c5 !important;
+    //     }
+    //   }
+    //   .ant-pagination-next,
+    //   .ant-pagination-prev {
+    //     a:hover {
+    //       color: #ff6a00;
+    //     }
+    //   }
+    //   input[type="text"] {
+    //     box-shadow: none;
+    //     &:focus {
+    //       border: 1px solid #ff6a00;
+    //     }
+    //     &:hover {
+    //       border: 1px solid #ff6a00;
+    //     }
+    //   }
+    //   .ant-pagination-item {
+    //     border: none;
+    //     a:hover {
+    //       color: #ff6a00;
+    //     }
+    //   }
+    //   .ant-pagination-item-active {
+    //     background: #ff6a00;
+    //     a {
+    //       color: white;
+    //     }
+    //     a:hover {
+    //       color: white;
+    //     }
+    //   }
+    //   .ant-pagination-item-link {
+    //     border: none;
+    //   }
+    // }
+  }
+  .maincontentright {
+    width: 240px;
+    > div {
+      margin-bottom: 16px;
+    }
+    .dateinfo {
+      text-align: center;
+      overflow: hidden;
+      border-radius: 4px;
+      position: relative;
+      padding-bottom: 10px;
+      background-color: #fff4e3;
+      .bottombox {
+        position: relative;
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 10px;
+        font-size: 16px;
+        border-bottom: none;
+        color: #fff;
+        background-color: #ff6a00;
+        &::after {
+          left: 0;
+          display: none;
+        }
+      }
+    }
+    .hotphone {
+      overflow: hidden;
+      position: relative;
+      width: 240px;
+      height: 160px;
+      // height: 114px;
+      padding: 0 20px 20px 20px;
+      border-radius: 4px;
+      background-color: #fff;
+      text-align: center;
+      p {
+        position: absolute;
+        width: 100%;
+        font-size: 24px;
+        color: #ff6a00;
+        // font-weight: normal;
+        top: 65%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
+    .relationme {
+      overflow: hidden;
+      position: relative;
+      width: 240px;
+      height: 160px;
+      padding: 0 20px 20px;
+      background: #ffffff;
+      text-align: center;
+      button {
+        position: absolute;
+        width: 120px;
+        height: 32px;
+        margin-top: 16px;
+        font-size: 16px;
+        line-height: 20px;
+        border-radius: 999px;
+        border: 0;
+        background-color: #ff6a00;
+        color: #fff;
+        top: 55%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
+  }
+}
+.cityModal {
+  .inputBox {
+    display: flex;
+  }
+  .ant-input-affix-wrapper {
+    flex: 1;
+    margin-right: 30px;
+  }
+  button {
+    width: 60px;
+    height: 32px;
+  }
+  .firstList {
+    display: flex;
+    justify-content: start;
+    margin: 30px 0;
+    li {
+      width: 16.6%;
+      text-align: center;
+      div {
+        width: 60%;
+        padding-bottom: 5px;
+        cursor: pointer;
+      }
+      .active {
+        color: #ff6a00;
+        // position: relative;
+        // &::after {
+        //   content:'';
+        //   display: block;
+        //   position: absolute;
+        //   height: 2px;
+        //   width: 50px;
+        //   bottom: 0;
+        //   left: 0;
+        //   background-color: #ff6a00;
+        // }
+        border-bottom: 2px solid #ff6a00;
+      }
+    }
+  }
+  .currentCity {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      width: 16.6%;
+      margin-bottom: 20px;
+      text-align: center;
+      cursor: pointer;
+      div {
+        width: 60%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 75c3a1b..2e06db6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,11 @@ const routes = [
         name: "JobList",
         component: () => import("../components/FirstJob/joblist.vue"),
       },
+      {
+        path: "/list1",
+        name: "JobList",
+        component: () => import("../components/FirstJob/joblist1.vue"),
+      },
       {
         path: "/detail/:id",
         name: "Detail",