新增发布兼职入口【首页】【兼职招聘列表页】【兼职招聘详情页】

components/job/bottomBanner.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="{bottomBanner: !mobile, bottomBannerMobile: mobile}">
+    <div class="title">兼职招聘</div>
+    <div class="desc">兼职招聘正式上线！40W+程序员、7000+企业方，急速触达！</div>
+    <div class="btnList">
+      <div class="left" @click="jumpToCatHandler">
+        <p>我要找兼职</p>
+      </div>
+      <div class="right" @click="needFindJobHandler">
+        <p>我要招聘</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: [],
+    components: {},
+    data() {
+      return {
+        mobile: false,
+      }
+    },
+    computed: {},
+    mounted() {
+    },
+    methods: {
+      /** banner挑战 **/
+      jumpToCatHandler() {
+        location.href = "/job/?from=top_nav"
+      },
+      needFindJobHandler() {
+        this.$message.warning('请前往程序员客栈APP，发布兼职招聘')
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  @import "~@/assets/css/scssCommon.scss";
+
+  .bottomBanner {
+    width: 1000px;
+    height: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background: url("~@/assets/img/job/banner_bottom.png") no-repeat;
+    background-size: contain;
+    margin: 10px auto;
+
+    .title {
+      height:72px;
+      font-size:41px;
+      font-weight:600;
+      color:rgba(255,255,255,1);
+      line-height:72px;
+      letter-spacing:2px;
+    }
+    .desc {
+      height:26px;
+      font-size:19px;
+      font-weight:400;
+      color:rgba(255,255,255,1);
+      line-height:26px;
+    }
+    .btnList {
+      width: 100%;
+      margin-top: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .left, .right {
+        width:165px;
+        height:43px;
+        background:rgba(255,255,255,1);
+        border-radius:2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        p {
+          height:22px;
+          font-size:16px;
+          font-weight:500;
+          color:rgba(61,108,255,1);
+          line-height:22px;
+        }
+      }
+      .right {
+        margin-left: 20px;
+        border:1px solid rgba(255,255,255,1);
+        background: transparent;
+        p {
+          color:rgba(255,255,255,1);
+        }
+      }
+    }
+  }
+</style>

pages/job/detail/_id.vue

@@ -168,6 +168,8 @@
         <p class="tips">直接与雇主沟通！</p>
       </div>
     </div>
+    <BottomBanner></BottomBanner>
+
     <SeoFooter style="margin-top: 30px;" :data="footer"/>
   </div>
 </template>
@@ -182,6 +184,8 @@
   import "mint-ui/lib/style.css";
   import DealSeoFooter from "@/components/job/dealSeoFooter"
   import SeoFooter from "@/components/SeoFooter"
+  import BottomBanner from "@/components/job/bottomBanner"
+
 
   let qrcode = null
   if (process.browser) {
@@ -192,7 +196,7 @@
   const PERSONAL = 2;
   export default {
     name: "JobListSeoDetail",
-    components: {SeoFooter},
+    components: {SeoFooter, BottomBanner},
     data() {
       return {
         showConfirm: false,

pages/job/index.vue

@@ -94,6 +94,7 @@
               </div>
             </div>
           </div>
+          <BottomBanner></BottomBanner>
         </div>
       </div>
       <SeoFooter style="" :data="footer"/>
@@ -163,13 +164,14 @@
   import BindMobile from "@/components/common/bindMobile"
   import DealSeoData from "@/components/job/dealSeoIndex"
   import DealSeoFooter from "@/components/job/dealSeoFooter"
+  import BottomBanner from "@/components/job/bottomBanner"
   import SeoFooter from "@/components/SeoFooter"
 
   export default {
     name: "JobListSeoIndex",
     // layout: "opacity_header",
     showCommonFooter: false,
-    components: { ConnectUs, BindMobile, SeoFooter },
+    components: { ConnectUs, BindMobile, SeoFooter, BottomBanner },
     head() {
       const { title = "", keyword = "", descrption = "", h1 = "", canonical = "", metaLocation } = this.head || {}
       let obj = {
@@ -417,7 +419,7 @@
           title = `${jobName}兼职招聘`
         }
         return title
-      }
+      },
     }
   }
 </script>