政策咨询/招聘就业/合作企业

jsconfig.json

@@ -3,6 +3,7 @@
     "target": "es5",
     "module": "esnext",
     "baseUrl": "./",
+    "jsx": "preserve",
     "moduleResolution": "node",
     "paths": {
       "@/*": [

src/api/CooperativeEnterprise/index.js

@@ -0,0 +1,25 @@
+/**
+ * @Description: 合作企业
+ * @Author: 空白格
+ * @Date: 2022-08-11 16:31:06
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 16:31:06
+ * @FilePath: \veterans_client_web\src\api\CooperativeEnterprise\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+/**
+ * 获取合作企业列表
+ * @param {*} params
+ * @returns
+ */
+export function getCompanyList(params) {
+  return request({
+    url: '/app/company/list',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/Dict/index.js

@@ -0,0 +1,25 @@
+/**
+ * @Description: 获取字典数据
+ * @Author: 空白格
+ * @Date: 2022-08-11 11:34:47
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 11:38:02
+ * @FilePath: \veterans_client_web\src\api\Dict\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from "@/utils/request";
+/**
+ * 获取字典数据
+ * @param {*} params
+ * @returns
+ */
+export function getDictData(params) {
+  return request({
+    url: '/app/sys/dictdata',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/PolicyAdvice/index.js

@@ -0,0 +1,25 @@
+/**
+ * @Description: 政策咨询
+ * @Author: 空白格
+ * @Date: 2022-08-11 11:53:02
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 11:54:20
+ * @FilePath: \veterans_client_web\src\api\PolicyAdvice\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+/**
+ * 获取政策咨询数据
+ * @param {*} params
+ * @returns
+ */
+export function getPolicyData(params) {
+  return request({
+    url: '/app/policy/article/door/list',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/RecruitmentEmployment/index.js

@@ -0,0 +1,41 @@
+/**
+ * @Description: 招聘就业接口
+ * @Author: 空白格
+ * @Date: 2022-08-11 14:04:57
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 14:58:27
+ * @FilePath: \veterans_client_web\src\api\RecruitmentEmployment\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+/**
+ * 获取企业推荐数据
+ * @param {*} params
+ * @returns
+ */
+export function getRecommendCompanyData(params) {
+  return request({
+    url: '/app/company/queryRecommendList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}
+
+/**
+ * 获取最新岗位数据
+ * @param {*} params
+ * @returns
+ */
+export function getLatestRecruitmentData(params) {
+  return request({
+    url: '/app/companypost/pageList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/components/BannerBreadcrumb/index.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Description: 顶部广告图和面包屑
+ * @Author: 空白格
+ * @Date: 2022-08-11 13:44:08
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 13:49:12
+ * @FilePath: \veterans_client_web\src\components\BannerBreadcrumb\index.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="banner-breadcrumb">
+    <!-- 广告图 -->
+    <div class="banner-breadcrumb-header">
+      <div class="banner-breadcrumb-header-title">{{ title }}</div>
+    </div>
+    <!-- 面包屑 -->
+    <div class="banner-breadcrumb-breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BannerBreadcrumb',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner-breadcrumb {
+  &-header {
+    width: 100%;
+    height: 104px;
+    line-height: 104px;
+    background-image: url("./../../assets/images/policy-advice-bg.png");
+    background-position: center center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    &-title {
+      width: 70%;
+      min-width: 600px;
+      margin: 0 auto;
+      text-align: right;
+      color: #416050;
+      font-size: 30px;
+    }
+  }
+  &-breadcrumb {
+    background-color: #fff;
+    :deep(.el-breadcrumb) {
+      width: 70%;
+      height: 64px;
+      line-height: 64px;
+      min-width: 600px;
+      margin: 0 auto;
+      font-size: 20px;
+    }
+    :deep(.el-breadcrumb__inner.is-link) {
+      color: #7e7e7e;
+      font-weight: normal;
+    }
+    :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+      color: #ff0000;
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -3,15 +3,17 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:30:36
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-10 15:36:48
+ * @LastEditTime: 2022-08-11 13:38:56
  * @FilePath: \veterans_client_web\src\layout\index.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <el-container>
-    <el-header class="header" height="60px">
+  <div class="container">
+    <div class="header" height="73px">
       <div class="header-box">
-        <div class="header-box-left">贵州退役军人教育培训</div>
+        <div class="header-box-left">
+          <router-link to="/">贵州退役军人教育培训</router-link>
+        </div>
         <div class="header-box-right">
           <div class="header-box-right-search">
             <el-input
@@ -30,11 +32,11 @@
           </div>
         </div>
       </div>
-    </el-header>
-    <el-main class="main">
+    </div>
+    <div class="main">
       <router-view />
-    </el-main>
-    <el-footer class="footer" height="100px">
+    </div>
+    <div class="footer" height="100px">
       <div class="footer-link">
         <router-link class="link" to="">关于我们</router-link> |
         <router-link class="link" to="">加入收藏</router-link> |
@@ -47,8 +49,8 @@
         主办单位：贵州省退役军人事务厅、黔CP备19001516号-1
         网站标识码：5200000143
       </div>
-    </el-footer>
-  </el-container>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -65,39 +67,57 @@ export default {
       userInfo: (state) => state.user.userInfo,
     }),
   },
-  created() {
-    console.log(this.userInfo);
-  },
+  created() {},
 };
 </script>
 
 <style lang="scss" scoped>
 .header {
-  background-color: #3d5d4c;
-  height: 60px;
+  background-color: #416050;
+  height: 73px;
   &-box {
     width: 70%;
     min-width: 600px;
-    height: 60px;
+    height: 73px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    &-left {
+    &-left a {
       color: #fff;
-      font-size: 20px;
+      font-size: 26px;
+      font-family: SourceHanSansCN;
+      font-weight: blod;
     }
     &-right {
       display: flex;
       align-items: center;
       &-search {
-        ::v-deep .el-input__inner {
+        :deep(.el-input__inner) {
           border-radius: 100px !important;
+          width: 253px;
+          height: 42px;
+          line-height: 42px;
+          padding-left: 57px;
+          background: rgba($color: #fff, $alpha: 0.5);
+          color: #fff;
+          &::placeholder {
+            color: #fff;
+          }
+        }
+        :deep(.el-input__prefix) {
+          font-size: 20px;
+          left: 16px;
+          color: #fff;
+        }
+        :deep(.el-input--small .el-input__icon) {
+          line-height: 42px;
         }
       }
       &-user {
         color: #fff;
         margin-left: 30px;
+        font-size: 16px;
         .link {
           color: #fff;
         }
@@ -106,17 +126,15 @@ export default {
   }
 }
 .main {
-  min-height: calc(100vh - 160px);
   background-color: #f2f2f2;
-  padding: 0;
 }
 .footer {
-  background-color: #3d5d4c;
+  background-color: #659789;
   opacity: 0.7;
   height: 100px;
   text-align: center;
   color: #fff;
-  font-size: 12px;
+  font-size: 14px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/router/index.js

@@ -16,6 +16,30 @@ const routes = [
         meta: {
           title: '首页'
         }
+      },
+      {
+        path: 'policyadvice',
+        name: 'PolicyAdvice',
+        component: () => import('@/views/PolicyAdvice/PolicyAdviceIndex.vue'),
+        meta: {
+          title: '政策咨询'
+        }
+      },
+      {
+        path: 'recruitmentemployment',
+        name: 'RecruitmentEmploymentIndex',
+        component: () => import('@/views/RecruitmentEmployment/RecruitmentEmploymentIndex.vue'),
+        meta: {
+          title: '招聘就业'
+        }
+      },
+      {
+        path: 'cooperativeenterprise',
+        name: 'CooperativeEnterpriseIndex',
+        component: () => import('@/views/CooperativeEnterprise/CooperativeEnterpriseIndex.vue'),
+        meta: {
+          title: '合作企业'
+        }
       }
     ]
   },

src/views/CooperativeEnterprise/CooperativeEnterpriseIndex.vue

@@ -0,0 +1,257 @@
+<!--
+ * @Description: 合作企业
+ * @Author: 空白格
+ * @Date: 2022-08-11 16:00:30
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 17:12:00
+ * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\CooperativeEnterpriseIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="cooperative-enterprise">
+    <BannerBreadcrumb title="合作企业" />
+    <div class="cooperative-enterprise-content">
+      <div class="cooperative-enterprise-content-list" v-loading="loading">
+        <el-tabs v-model="queryParams.trade" @tab-click="handleClick">
+          <el-tab-pane
+            v-for="(item, index) in companyTradeList"
+            :key="index"
+            :label="item.label"
+            :name="item.text"
+          >
+            <div class="company-list">
+              <el-row :gutter="16">
+                <el-col
+                  :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="12"
+                  :xl="12"
+                  v-for="(company, cIndex) in companyList"
+                  :key="cIndex"
+                >
+                  <div class="company-list-item">
+                    <div class="company-list-item-left">
+                      <el-image
+                        class="image"
+                        :src="
+                          company.logoUrl ||
+                          require('@/assets/images/default-company.png')
+                        "
+                      >
+                        <div slot="placeholder" class="image-slot">
+                          加载中<span class="dot">...</span>
+                        </div>
+                        <div slot="error" class="image-slot">
+                          <el-image
+                            class="image"
+                            :src="
+                              require('@/assets/images/default-company.png')
+                            "
+                          ></el-image>
+                        </div>
+                      </el-image>
+                    </div>
+                    <div class="company-list-item-center">
+                      <div class="name">{{ company.companyName }}</div>
+                      <div>
+                        {{ company.scope | filtersDict(companyScopeList) }} ·
+                        {{ company.trade | filtersDict(companyTradeList) }}
+                      </div>
+                    </div>
+                    <div class="company-list-item-right">
+                      <i class="el-icon-arrow-right"></i>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="pagination" v-if="total">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="queryParams.pageSize"
+            :total="total"
+            @current-change="currentChange"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import { getDictData } from "@/api/Dict";
+import { getCompanyList } from "@/api/CooperativeEnterprise";
+export default {
+  name: "CooperativeEnterpriseIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      companyTradeList: [],
+      companyScopeList: [],
+      queryParams: {
+        trade: "0",
+        pageNum: 1,
+        pageSize: 10,
+        companyName: undefined,
+      },
+      companyList: [],
+      total: 0,
+      loading: false,
+    };
+  },
+  created() {
+    this.getDict();
+    this.getList();
+  },
+  methods: {
+    /**
+     * 获取字典数据
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getDict() {
+      getDictData({ key: "company_trade" }).then((res) => {
+        this.companyTradeList = res.data;
+        this.companyTradeList.unshift({ label: "全部", text: "0" });
+      });
+      getDictData({ key: "company_scope" }).then((res) => {
+        this.companyScopeList = res.data;
+      });
+    },
+    /**
+     * tab切换触发
+     * @date 2022-08-11
+     * @param {any} tab
+     * @returns {any}
+     */
+    handleClick(tab) {
+      this.queryParams.trade = tab.name;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /**
+     * 获取企业列表
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getList() {
+      this.loading = true;
+      const queryParams = {
+        ...this.queryParams,
+      };
+      queryParams.trade = queryParams.trade === "0" ? "" : queryParams.trade;
+      getCompanyList(queryParams).then((res) => {
+        this.companyList = res.data.rows;
+        this.total = Number(res.data.total);
+        this.loading = false;
+      });
+    },
+    /**
+     * 分页切换触发
+     * @date 2022-08-11
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getList();
+    },
+  },
+  filters: {
+    filtersDict(val, list) {
+      let label = "-";
+      list.forEach((element) => {
+        if (Number(element.text) === Number(val)) {
+          label = element.label;
+        }
+      });
+      return label;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.cooperative-enterprise {
+  &-content {
+    width: calc(70% + 40px);
+    min-width: 600px;
+    margin: 23px auto 0;
+    &-list {
+      padding: 20px 20px 100px;
+      background-color: #fff;
+      :deep(.el-tabs__item) {
+        font-size: 20px;
+        font-weight: 500;
+        color: #000000;
+      }
+      :deep(.el-tabs__item:hover) {
+        color: #163da5;
+      }
+      :deep(.el-tabs__item.is-active) {
+        color: #163da5;
+      }
+      :deep(.el-tabs__active-bar) {
+        background-color: #163da5;
+      }
+      .company-list {
+        padding: 5px;
+        &-item {
+          display: flex;
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          padding: 16px;
+          margin-bottom: 20px;
+          cursor: pointer;
+          &-left {
+            width: 61px;
+            height: 61px;
+            margin-right: 15px;
+            border: solid 1px #e2e2e2;
+            border-radius: 4px;
+            .image {
+              width: 100%;
+              height: 100%;
+              border-radius: 4px;
+            }
+          }
+          &-center {
+            flex: 1;
+            color: #919191;
+            font-size: 14px;
+            font-family: SourceHanSansCN;
+            .name {
+              color: #1a1a1a;
+              font-size: 20px;
+              font-family: SourceHanSansCN;
+              margin-bottom: 5px;
+            }
+          }
+          &-right {
+            display: flex;
+            align-items: center;
+            color: #9c9c9c;
+            font-size: 18px;
+          }
+        }
+      }
+      .pagination {
+        text-align: center;
+        :deep(.el-pager .active) {
+          background-color: #FF3939;
+        }
+        :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+          background-color: #FF3939;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Home/HomeIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:26:40
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-10 18:01:06
+ * @LastEditTime: 2022-08-11 16:01:41
  * @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -11,7 +11,7 @@
   <div class="home">
     <!-- 轮播图 -->
     <div class="home-carousel">
-      <el-carousel :interval="2000" arrow="always" height="500px">
+      <el-carousel :interval="2000" arrow="always" height="645px">
         <el-carousel-item v-for="(item, index) in bannerList" :key="index">
           <el-image class="image" :src="item.bannerUrl" fit="fill">
             <div slot="placeholder" class="image-slot">
@@ -24,7 +24,7 @@
     <div class="home-main">
       <div class="home-main-box">
         <!-- 菜单部分 -->
-        <el-row :gutter="30" class="home-main-menu">
+        <el-row :gutter="0" class="home-main-menu">
           <el-col
             :xs="12"
             :sm="8"
@@ -34,17 +34,19 @@
             v-for="(menu, index) in menuList"
             :key="index"
           >
-            <div class="home-main-menu-icon">
-              <el-image class="image" :src="menu.icon"></el-image>
+            <div class="home-main-menu-item" @click="jumpPage(menu.path)">
+              <div class="home-main-menu-icon">
+                <el-image class="image" :src="menu.icon"></el-image>
+              </div>
+              <div class="home-main-menu-name">{{ menu.name }}</div>
             </div>
-            <div class="home-main-menu-name">{{ menu.name }}</div>
           </el-col>
         </el-row>
         <!-- 新闻部分 -->
-        <el-row :gutter="30" class="home-main-news">
+        <el-row :gutter="0" class="home-main-news">
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="home-main-news-left">
-              <el-carousel :interval="100000" arrow="never" height="400px">
+              <el-carousel :interval="5000" arrow="never" height="303px">
                 <el-carousel-item
                   v-for="(item, index) in newsList"
                   :key="index"
@@ -127,14 +129,17 @@ export default {
         {
           name: "政策咨询",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
+          path: "/policyadvice",
         },
         {
           name: "招聘就业",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-2.svg"),
+          path: '/recruitmentemployment'
         },
         {
           name: "合作企业",
           icon: require("@/assets/images/home-menu-icon/home-menu-icon-3.svg"),
+          path: '/cooperativeenterprise'
         },
         {
           name: "合作院校",
@@ -213,35 +218,48 @@ export default {
      * @returns {any}
      */
     handleClick(tab) {
-      switch(tab.name) {
-        case 'first':
+      switch (tab.name) {
+        case "first":
           this.getNews();
           break;
-        case 'second':
+        case "second":
           this.getNotice();
-          break
+          break;
       }
-    }
+    },
+    /**
+     * 跳转到指定页面
+     * @date 2022-08-11
+     * @param {any} path
+     * @returns {any}
+     */
+    jumpPage(path) {
+      this.$router.push(path);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .home {
+  height: 100%;
   &-carousel {
     .image {
       width: 100%;
       height: 100%;
     }
     .image-slot {
-      line-height: 500px;
+      line-height: 645px;
       text-align: center;
     }
-    ::v-deep .el-carousel__indicators {
+    :deep(.el-carousel__indicators) {
       // 指示器
-      bottom: 6%;
+      bottom: 84px;
+    }
+    :deep(.el-carousel__arrow) {
+      border: solid 1px rgba($color: #fff, $alpha: 0.7);
     }
-    ::v-deep .el-carousel__button {
+    :deep(.el-carousel__button) {
       // 指示器按钮
       width: 10px;
       height: 10px;
@@ -249,59 +267,66 @@ export default {
       border-radius: 50%;
       background-color: #fff;
     }
-    ::v-deep .is-active .el-carousel__button {
+    :deep(.is-active .el-carousel__button) {
       // 指示器激活按钮
-      width: 20px;
+      width: 18px;
       border-radius: 10px;
     }
   }
   &-main {
     width: 70%;
+    min-height: 100vh;
     margin: 0 auto;
     min-width: 600px;
     position: relative;
     &-box {
       width: 100%;
       position: absolute;
-      top: -30px;
+      top: -53px;
       z-index: 1000;
     }
     &-menu {
       width: 100%;
       background-color: #fff;
-      padding: 30px 30px 0;
+      padding: 30px 50px 10px;
       border-radius: 5px;
+      &-item {
+        cursor: pointer;
+        margin-bottom: 20px;
+      }
       &-icon {
         text-align: center;
         .image {
-          width: 98px;
-          height: 98px;
+          width: 100%;
+          height: 100%;
+          max-width: 85px;
+          max-height: 85px;
         }
       }
       &-name {
         text-align: center;
-        margin-top: 20px;
-        margin-bottom: 30px;
+        margin-top: 24px;
       }
     }
     &-news {
       width: 100%;
       background-color: #fff;
-      padding: 30px;
+      padding: 39px 50px;
       border-radius: 5px;
-      margin-top: 30px;
+      margin-top: 14px;
       &-left {
+        margin-right: 30px;
         .image {
           width: 100%;
           height: 100%;
-          border-radius: 5px;
+          border-radius: 2px;
         }
         .title {
-          width: calc(100% - 40px);
-          height: 40px;
-          line-height: 40px;
-          padding: 0 20px;
-          background-color: rgba($color: #000000, $alpha: 0.3);
+          width: calc(100% - 26px);
+          height: 43px;
+          line-height: 43px;
+          padding: 0 13px;
+          background-color: rgba($color: #000000, $alpha: 0.6);
           color: #fff;
           white-space: nowrap;
           overflow: hidden;
@@ -309,34 +334,51 @@ export default {
           word-break: break-all;
           position: absolute;
           bottom: 0;
+          font-size: 14px;
+          font-weight: blod;
         }
-        ::v-deep .el-carousel__indicators {
+        :deep(.el-carousel__indicators) {
           // 指示器
           left: auto;
           right: -20px;
         }
-        ::v-deep .el-carousel__button {
+        :deep(.el-carousel__button) {
           // 指示器按钮
-          width: 10px;
-          height: 10px;
+          width: 7px;
+          height: 7px;
           border: none;
           border-radius: 50%;
           background-color: #fff;
         }
-        ::v-deep .is-active .el-carousel__button {
+        :deep(.is-active .el-carousel__button) {
           // 指示器激活按钮
-          width: 20px;
+          width: 16px;
           border-radius: 10px;
           background-color: #f00;
         }
       }
       &-right {
+        :deep(.el-tabs__item) {
+          font-size: 20px;
+          font-weight: 500;
+          color: #000000;
+        }
+        :deep(.el-tabs__item:hover) {
+          color: #163DA5;
+        }
+        :deep(.el-tabs__item.is-active) {
+          color: #163DA5;
+        }
+        :deep(.el-tabs__active-bar) {
+          background-color: #163DA5;
+        }
         .news-infomation {
           &-item {
             display: flex;
             justify-content: space-between;
             margin-bottom: 10px;
             font-size: 14px;
+            color: #373737;
             cursor: pointer;
             &:hover {
               text-decoration: underline;
@@ -355,6 +397,7 @@ export default {
               text-overflow: ellipsis;
               word-break: break-all;
               text-align: right;
+              color: #797979;
             }
           }
         }

src/views/PolicyAdvice/PolicyAdviceIndex.vue

@@ -0,0 +1,157 @@
+<!--
+ * @Description: 政策咨询
+ * @Author: 空白格
+ * @Date: 2022-08-11 09:15:53
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 17:08:38
+ * @FilePath: \veterans_client_web\src\views\PolicyAdvice\PolicyAdviceIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="policy-advice">
+    <BannerBreadcrumb title="政策咨询"/>
+    <!-- 内容 -->
+    <div class="policy-advice-box">
+      <div class="policy-advice-box-logo">
+        <el-image
+          class="image"
+          :src="require('@/assets/images/policy-advice-logo.png')"
+          fit="cover"
+        ></el-image>
+      </div>
+      <div class="policy-advice-box-policy">
+        <el-tabs v-model="queryParams.artCategoryId" @tab-click="handleClick">
+          <el-tab-pane
+            v-for="(item, index) in policyTypeList"
+            :key="index"
+            :label="item.label"
+            :name="item.text"
+          >
+            <ul class="policy-list" v-loading="loading">
+              <li class="policy-list-item" v-for="(item, index) in policyList" :key="index">
+                <div class="policy-list-title">{{ item.artTitle }}</div>
+                <div class="policy-list-icon">
+                  <i class="el-icon-arrow-right"></i>
+                </div>
+              </li>
+            </ul>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BannerBreadcrumb from '@/components/BannerBreadcrumb'
+import { getDictData } from "@/api/Dict";
+import { getPolicyData } from "@/api/PolicyAdvice";
+export default {
+  name: "PolicyAdviceIndex",
+  components: {
+    BannerBreadcrumb
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        artCategoryId: "",
+      },
+      policyTypeList: [],
+      policyList: [],
+      loading: false
+    };
+  },
+  created() {
+    this.getDictList();
+  },
+  methods: {
+    /**
+     * 获取字典数据
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getDictList() {
+      getDictData({ key: "policy_type" }).then((res) => {
+        this.policyTypeList = res.data;
+        if (this.policyTypeList.length) {
+          this.queryParams.artCategoryId = this.policyTypeList[0].text;
+          this.getPolicyList();
+        }
+      });
+    },
+    /**
+     * 获取政策咨询列表数据
+     */
+    getPolicyList() {
+      this.loading = true
+      getPolicyData(this.queryParams).then((res) => {
+        this.policyList = res.rows;
+        this.loading = false
+      });
+    },
+    /**
+     * tab点击
+     * @date 2022-08-11
+     * @param {any} tab
+     * @returns {any}
+     */
+    handleClick(tab) {
+      this.queryParams.pageNum = 1;
+      this.queryParams.artCategoryId = tab.name;
+      this.getPolicyList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.policy-advice {
+  &-box {
+    width: calc(70% + 40px);
+    min-width: 600px;
+    margin: 23px auto 0;
+    background-color: #fff;
+    &-logo {
+      width: 100%;
+      height: 157px;
+      .image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &-policy {
+      padding: 20px 20px 100px;
+      min-height: 400px;
+      :deep(.el-tabs__item) {
+        font-size: 20px;
+        font-weight: 500;
+        color: #000000;
+      }
+      :deep(.el-tabs__item:hover) {
+        color: #163da5;
+      }
+      :deep(.el-tabs__item.is-active) {
+        color: #163da5;
+      }
+      :deep(.el-tabs__active-bar) {
+        background-color: #163da5;
+      }
+      .policy-list {
+        &-item {
+          display: flex;
+          justify-content: space-between;
+          border-bottom: dashed 1px #d7d7d7;
+          color: #2B2B2B;
+          font-size: 16px;
+          height: 50px;
+          line-height: 50px;
+          margin-bottom: 10px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/RecruitmentEmployment/RecruitmentEmploymentIndex.vue

@@ -0,0 +1,430 @@
+<!--
+ * @Description: 招聘就业
+ * @Author: 空白格
+ * @Date: 2022-08-11 13:25:43
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-11 17:12:50
+ * @FilePath: \veterans_client_web\src\views\RecruitmentEmployment\RecruitmentEmploymentIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="recruitment-employment">
+    <BannerBreadcrumb title="招聘就业" />
+    <div class="recruitment-employment-content">
+      <!-- 企业推荐 -->
+      <div class="enterprise-recommendation">
+        <div class="enterprise-recommendation-title">
+          <div class="title">企业推荐</div>
+          <div class="more">更多</div>
+        </div>
+        <div class="enterprise-recommendation-list">
+          <el-carousel
+            class="enterprise-recommendation-carousel"
+            :autoplay="false"
+            arrow="never"
+          >
+            <el-carousel-item
+              class="enterprise-recommendation-list-item"
+              v-for="(item, index) in companyList"
+              :key="index"
+            >
+              <div class="company-list">
+                <el-row :gutter="20">
+                  <el-col
+                    :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="6"
+                    :xl="6"
+                    v-for="(company, cIndex) in item"
+                    :key="cIndex"
+                  >
+                    <div class="company-list-item">
+                      <div class="logo">
+                        <el-image
+                          class="image"
+                          :src="
+                            company.logoUrl ||
+                            require('@/assets/images/default-company.png')
+                          "
+                        >
+                          <div slot="placeholder" class="image-slot">
+                            加载中<span class="dot">...</span>
+                          </div>
+                          <div slot="error" class="image-slot">
+                            <el-image
+                              class="image"
+                              :src="
+                                require('@/assets/images/default-company.png')
+                              "
+                            ></el-image>
+                          </div>
+                        </el-image>
+                      </div>
+                      <div class="details">
+                        <div class="details-name">
+                          {{ company.companyName }}
+                        </div>
+                        <div class="details-post">
+                          岗位<span>{{ company.postCount }}</span
+                          >个
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+      <!-- 最新招聘 -->
+      <div class="latest-recruitment" v-loading="loading">
+        <div class="latest-recruitment-title">
+          <div class="title">最新招聘</div>
+        </div>
+        <div class="latest-recruitment-list">
+          <el-row :gutter="16">
+            <el-col
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="12"
+              :xl="12"
+              v-for="(item, index) in postList"
+              :key="index"
+            >
+              <div class="latest-recruitment-list-item">
+                <div class="logo">
+                  <el-image
+                    class="image"
+                    :src="
+                      item.companyLogoUrl ||
+                      require('@/assets/images/default-company.png')
+                    "
+                  >
+                    <div slot="placeholder" class="image-slot">
+                      加载中<span class="dot">...</span>
+                    </div>
+                    <div slot="error" class="image-slot">
+                      <el-image
+                        class="image"
+                        :src="require('@/assets/images/default-company.png')"
+                      ></el-image>
+                    </div>
+                  </el-image>
+                </div>
+                <div class="postinfo">
+                  <div class="postname">{{ item.postName || "-" }}</div>
+                  <div class="condition">
+                    {{
+                      `${item.areaName || "-"} | 工作${
+                        item.workYear || "-"
+                      }年 | ${getEducationLevel(item.educationBg)}`
+                    }}
+                  </div>
+                  <div>{{ item.companyName || "-" }}</div>
+                </div>
+                <div class="wages">
+                  <div class="wages-range">
+                    {{ `${item.lowestSalary}k ~ ${item.highestSalary}k` }}
+                  </div>
+                  <div>{{ parseTime(item.createTime, "{y}-{m}-{d}") }}</div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="pagination" v-if="total">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="queryParams.pageSize"
+              :total="total"
+              @current-change="currentChange"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import {
+  getRecommendCompanyData,
+  getLatestRecruitmentData,
+} from "@/api/RecruitmentEmployment";
+import { getDictData } from "@/api/Dict";
+import { parseTime } from "@/utils/utils";
+export default {
+  name: "RecruitmentEmploymentIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      companyList: [],
+      queryParams: {
+        newest: 1,
+        pageNum: 1,
+        pageSize: 10,
+        postName: undefined,
+      },
+      postList: [],
+      educationList: [],
+      parseTime: parseTime,
+      total: 0,
+      loading: false,
+    };
+  },
+  created() {
+    this.getDict();
+    this.getRecommendCompanyList();
+    this.getLatestRecruitmentList();
+  },
+  methods: {
+    /**
+     * 获取教育字典
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getDict() {
+      getDictData({ key: "degr_educ" }).then((res) => {
+        this.educationList = res.data;
+      });
+    },
+    /**
+     * 获取推荐企业
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getRecommendCompanyList() {
+      getRecommendCompanyData().then((res) => {
+        let arr = [],
+          data = res.data;
+        for (let i = 0; i < data.length; i += 4) {
+          arr.push(data.slice(i, i + 4));
+        }
+        this.companyList = arr;
+      });
+    },
+    /**
+     * 获取最新岗位
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getLatestRecruitmentList() {
+      this.loading = true;
+      getLatestRecruitmentData(this.queryParams).then((res) => {
+        this.postList = res.rows;
+        this.total = Number(res.total);
+        this.loading = false;
+      });
+    },
+    /**
+     * 分页切换
+     * @date 2022-08-11
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getLatestRecruitmentList();
+    },
+    /**
+     * 获取教育等级名称
+     * @date 2022-08-11
+     * @param {any} val
+     * @returns {any}
+     */
+    getEducationLevel(val) {
+      let label = "-";
+      this.educationList.forEach((item) => {
+        if (Number(item.text) === Number(val)) {
+          label = item.label;
+        }
+      });
+      return label;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.recruitment-employment {
+  &-content {
+    width: calc(70% + 40px);
+    min-width: 600px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+    .enterprise-recommendation {
+      background-color: #fff;
+      margin-top: 22px;
+      padding: 36px 20px 20px;
+      &-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        color: #727272;
+        font-size: 14px;
+        margin-bottom: 20px;
+        .title {
+          font-size: 26px;
+          color: #1a1a1a;
+          font-family: SourceHanSansCN;
+        }
+        .more {
+          cursor: pointer;
+        }
+      }
+      &-list {
+        :deep(.el-carousel__button) {
+          // 指示器按钮
+          width: 9px;
+          height: 9px;
+          border: none;
+          border-radius: 50%;
+          background-color: #c2c2c2;
+        }
+        :deep(.is-active .el-carousel__button) {
+          // 指示器激活按钮
+          width: 17px;
+          background-color: #ff0101;
+          border-radius: 5px;
+        }
+        .company-list {
+          padding: 4px;
+          &-item {
+            padding: 16px;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            border-radius: 3px;
+            display: flex;
+            cursor: pointer;
+            margin-bottom: 20px;
+            .logo {
+              width: 61px;
+              height: 61px;
+              border: solid 1px #e2e2e2;
+              border-radius: 4px;
+              margin-right: 15px;
+              .image {
+                width: 100%;
+                height: 100%;
+                border-radius: 4px;
+              }
+            }
+            .details {
+              line-height: 20px;
+              font-size: 14px;
+              color: #919191;
+              width: calc(100% - 77px);
+              &-name {
+                width: 100%;
+                color: #1a1a1a;
+                font-size: 20px;
+                margin-bottom: 10px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-all;
+              }
+              span {
+                color: #ff6300;
+              }
+            }
+          }
+        }
+      }
+    }
+    .latest-recruitment {
+      background-color: #fff;
+      margin-top: 22px;
+      padding: 20px 20px 60px;
+      &-title {
+        margin-bottom: 20px;
+        .title {
+          font-size: 26px;
+          color: #1a1a1a;
+          font-family: SourceHanSansCN;
+        }
+      }
+      &-list {
+        &-item {
+          display: flex;
+          padding: 14px 16px;
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          margin-bottom: 20px;
+          cursor: pointer;
+          .logo {
+            width: 61px;
+            height: 61px;
+            border: solid 1px #e2e2e2;
+            border-radius: 4px;
+            margin-right: 15px;
+            .image {
+              width: 100%;
+              height: 100%;
+              border-radius: 4px;
+              border: solid 1px #e2e2e2;
+            }
+          }
+          .postinfo {
+            flex: 1;
+            font-size: 13px;
+            color: #919191;
+            .postname {
+              color: #1a1a1a;
+              font-size: 20px;
+              font-family: SourceHanSansCN;
+              margin-bottom: 2px;
+            }
+            .condition {
+              font-size: 14px;
+              margin-bottom: 2px;
+            }
+          }
+          .wages {
+            display: flex;
+            flex-direction: column;
+            font-size: 13px;
+            color: #919191;
+            &-range {
+              flex: 1;
+              text-align: right;
+              font-family: SourceHanSansCN;
+              color: #ee5a0f;
+              font-size: 18px;
+            }
+          }
+        }
+      }
+      .pagination {
+        text-align: center;
+        :deep(.el-pager .active) {
+          background-color: #FF3939;
+        }
+        :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+          background-color: #FF3939;
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width: 768px) {
+  .enterprise-recommendation-carousel :deep(.el-carousel__container) {
+    height: 500px;
+  }
+}
+@media (min-width: 768px) and (max-width: 1200px) {
+  .enterprise-recommendation-carousel :deep(.el-carousel__container) {
+    height: 280px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .enterprise-recommendation-carousel :deep(.el-carousel__container) {
+    height: 150px;
+  }
+}
+</style>