更新

.env

@@ -0,0 +1,3 @@
+VUE_APP_AXIOS_BASE_URL = ''
+VUE_APP_ROUTER="/liveadmin"
+VUE_APP_LIMIT = 10

.eslintrc.js

@@ -0,0 +1,33 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/essential', '@vue/prettier'],
+  plugins: ['vue'],
+  rules: {
+    'max-len': [
+      'warn',
+      {
+        code: 1000,
+      },
+    ],
+    'no-unused-vars': 'off',
+    'no-console': 'off',
+    'prettier/prettier': [
+      'warn',
+      {
+        singleQuote: true,
+        trailingComma: 'es5',
+        bracketSpacing: true,
+        jsxBracketSameLine: true,
+        printWidth: 160,
+      },
+    ],
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

package.json

@@ -8,8 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "element-ui": "^2.13.2",
+    "lodash": "^4.17.20",
+    "moment": "^2.28.0",
+    "naf-core": "^0.1.2",
     "vue": "^2.6.11",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/App.vue

@@ -1,32 +1,28 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view />
   </div>
 </template>
 
 <style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+body {
+  margin: 0;
+  overflow-x: hidden;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
 }
 </style>

src/main.js

@@ -1,12 +1,22 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-
-Vue.config.productionTip = false;
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import '@/plugins/element.js';
+import '@/plugins/axios';
+import '@/plugins/check-res';
+import '@/plugins/meta';
+import '@/plugins/filters';
+import '@/plugins/loading';
+import '@/plugins/var';
+import '@/plugins/methods';
+import '@/plugins/setting';
 
 new Vue({
   router,
   store,
-  render: h => h(App)
-}).$mount("#app");
+  render: h => h(App),
+}).$mount('#app');
+window.vm = new Vue({
+  router,
+});

src/plugins/axios.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import AxiosWrapper from '@/util/axios-wrapper';
+
+const Plugin = {
+  install(vue, options) {
+    // 3. 注入组件
+    vue.mixin({
+      created() {
+        if (this.$store && !this.$store.$axios) {
+          this.$store.$axios = this.$axios;
+        }
+      },
+    });
+    // 4. 添加实例方法
+    vue.prototype.$axios = new AxiosWrapper(options);
+  },
+};
+
+Vue.use(Plugin, { baseUrl: process.env.VUE_APP_AXIOS_BASE_URL });

src/plugins/check-res.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-shadow */
+import Vue from 'vue';
+import _ from 'lodash';
+import { Message } from 'element-ui';
+// import { Notify } from 'vant';
+
+const vm = new Vue({});
+const Plugin = {
+  install(Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$checkRes = (res, okText, errText) => {
+      let _okText = okText;
+      let _errText = errText;
+      if (!_.isFunction(okText) && _.isObject(okText) && okText != null) {
+        ({ okText: _okText, errText: _errText } = okText);
+      }
+      const { errcode = 0, errmsg } = res || {};
+      if (errcode === 0) {
+        if (_.isFunction(_okText)) {
+          return _okText();
+        }
+        if (_okText) {
+          Message.success(_okText);
+          // Notify({ type: 'success', message: _okText });
+        }
+        return true;
+      }
+      if (_.isFunction(_errText)) {
+        return _errText();
+      }
+      Message.error(_errText || errmsg);
+      // Notify({ type: 'danger', message: _okText });
+      // Message({ message: _errText || errmsg, duration: 60000 });
+      return false;
+    };
+  },
+};
+
+Vue.use(Plugin);

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(Element);

src/plugins/filters.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import filters from '@/util/filters';
+
+for (const method in filters) {
+  Vue.filter(method, filters[method]);
+}

src/plugins/loading.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-console */
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+
+const Plugin = {
+  // eslint-disable-next-line no-unused-vars
+  install(vue, options) {
+    // 3. 注入组件
+    vue.mixin({
+      created() {
+        // eslint-disable-next-line no-underscore-dangle
+        const isRoot = this.constructor === Vue;
+        // console.log(`rootId:${rootVue_uid}; thisId:${this._uid}`);
+        // if (rootVue_uid !== 3) {
+        //   console.log(this);
+        // }
+        if (isRoot) {
+          const el = document.getElementById('loading');
+          if (el) el.style.display = 'none';
+        }
+      },
+    });
+  },
+};
+
+Vue.use(Plugin, { baseUrl: process.env.VUE_APP_AXIOS_BASE_URL });

src/plugins/meta.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import Meta from 'vue-meta';
+
+Vue.use(Meta);

src/plugins/methods.js

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import _ from 'lodash';
+const Plugin = {
+  install(Vue, options) {
+    // 3. 注入组件
+    Vue.mixin({
+      created() {
+        if (this.$store && !this.$store.$toUndefined) {
+          this.$store.$toUndefined = this.$toUndefined;
+        }
+      },
+    });
+    // 4. 添加实例方法
+    Vue.prototype.$toUndefined = object => {
+      let keys = Object.keys(object);
+      keys.map(item => {
+        object[item] = object[item] === '' ? (object[item] = undefined) : object[item];
+      });
+      return object;
+    };
+    Vue.prototype.$turnTo = item => {
+      if (item.info_type == 1) {
+        window.open(item.url);
+      } else {
+        let router = window.vm.$router;
+        let route = window.vm.$route.path;
+        router.push({ path: `/info/detail?id=${item.id}` });
+      }
+    };
+  },
+};
+
+Vue.use(Plugin);

src/plugins/setting.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+
+Vue.config.weixin = {
+  // baseUrl: process.env.BASE_URL + 'weixin',
+  baseUrl: `http://${location.host}/weixin`,
+};
+
+Vue.config.stomp = {
+  // brokerURL: 'ws://192.168.1.190:15674/ws',
+  brokerURL: '/ws', // ws://${location.host}/ws
+  connectHeaders: {
+    host: 'live',
+    login: 'live',
+    passcode: 'live',
+  },
+  // debug: true,
+  reconnectDelay: 5000,
+  heartbeatIncoming: 4000,
+  heartbeatOutgoing: 4000,
+};

src/plugins/var.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import _ from 'lodash';
+
+const getSiteId = () => {
+  let host = `${window.location.hostname}`; //`999991.smart.jilinjobswx.cn ${window.location.hostname}`
+  let schId;
+  host = host.replace('http://', '');
+  let arr = host.split('.');
+  if (arr.length > 0) {
+    schId = arr[0];
+    if (schId === 'smart') schId = 'master';
+    else `${schId}`.includes('localhost') || `${schId}`.includes('127.0.0.1') ? (schId = '99991') : '';
+    sessionStorage.setItem('schId', `${schId}`.includes('localhost') || `${schId}`.includes('127.0.0.1') ? '99991' : schId);
+  }
+  return schId;
+};
+const Plugin = {
+  install(vue, options) {
+    // 4. 添加实例方法
+    vue.prototype.$limit = 10;
+    vue.prototype.$site = getSiteId();
+  },
+};
+
+Vue.use(Plugin);

src/router/index.js

@@ -1,28 +1,19 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
-    component: Home
+    path: '/',
+    name: 'index',
+    meta: { title: '首页' },
+    component: () => import('../views/index.vue'),
   },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
-  }
 ];
-
 const router = new VueRouter({
-  routes
+  mode: 'history',
+  base: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_ROUTER,
+  routes,
 });
-
 export default router;

src/store/index.js

@@ -1,5 +1,5 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue';
+import Vuex from 'vuex';
 
 Vue.use(Vuex);
 
@@ -7,5 +7,5 @@ export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {}
+  modules: {},
 });

src/util/axios-wrapper.js

@@ -0,0 +1,118 @@
+/* eslint-disable no-console */
+/* eslint-disable no-param-reassign */
+
+import _ from 'lodash';
+import Axios from 'axios';
+import { Util, Error } from 'naf-core';
+// import { Indicator } from 'mint-ui';
+import util from './user-util';
+
+const { trimData, isNullOrUndefined } = Util;
+const { ErrorCode } = Error;
+
+let currentRequests = 0;
+
+export default class AxiosWrapper {
+  constructor({ baseUrl = '', unwrap = true } = {}) {
+    this.baseUrl = baseUrl;
+    this.unwrap = unwrap;
+  }
+
+  // 替换uri中的参数变量
+  static merge(uri, query = {}) {
+    if (!uri.includes(':')) {
+      return uri;
+    }
+    const keys = [];
+    const regexp = /\/:([a-z0-9_]+)/gi;
+    let res;
+    // eslint-disable-next-line no-cond-assign
+    while ((res = regexp.exec(uri)) != null) {
+      keys.push(res[1]);
+    }
+    keys.forEach(key => {
+      if (!isNullOrUndefined(query[key])) {
+        uri = uri.replace(`:${key}`, query[key]);
+      }
+    });
+    return uri;
+  }
+
+  $get(uri, query, options) {
+    return this.$request(uri, null, query, options);
+  }
+
+  $post(uri, data = {}, query, options) {
+    return this.$request(uri, data, query, options);
+  }
+
+  $delete(uri, data = {}, router, query, options = {}) {
+    options = { ...options, method: 'delete' };
+    return this.$request(uri, data, query, options, router);
+  }
+  async $request(uri, data, query, options) {
+    // TODO: 合并query和options
+    if (_.isObject(query) && _.isObject(options)) {
+      options = { ...options, params: query, method: 'get' };
+    } else if (_.isObject(query) && !query.params) {
+      options = { params: query };
+    } else if (_.isObject(query) && query.params) {
+      options = query;
+    }
+    if (!options) options = {};
+    if (options.params) options.params = trimData(options.params);
+    const url = AxiosWrapper.merge(uri, options.params);
+    currentRequests += 1;
+    // Indicator.open({
+    //   spinnerType: 'fading-circle',
+    // });
+
+    try {
+      const axios = Axios.create({
+        baseURL: this.baseUrl,
+      });
+      axios.defaults.headers.common.Authorization = util.token;
+      let res = await axios.request({
+        method: isNullOrUndefined(data) ? 'get' : 'post',
+        url,
+        data,
+        responseType: 'json',
+        ...options,
+      });
+      res = res.data;
+      const { errcode, errmsg, details } = res;
+      if (errcode) {
+        console.warn(`[${uri}] fail: ${errcode}-${errmsg} ${details}`);
+        return res;
+      }
+      // unwrap data
+      if (this.unwrap) {
+        res = _.omit(res, ['details']);
+        const keys = Object.keys(res);
+        if (keys.length === 1 && keys.includes('data')) {
+          res = res.data;
+        }
+      }
+      return res;
+    } catch (err) {
+      let errmsg = '接口请求失败，请稍后重试';
+      if (err.response) {
+        const { status } = err.response;
+        if (status === 401) errmsg = '用户认证失败，请重新登录';
+        if (status === 403) errmsg = '当前用户不允许执行该操作';
+      }
+      console.error(
+        `[AxiosWrapper] 接口请求失败: ${err.config && err.config.url} - 
+        ${err.message}`
+      );
+      return { errcode: ErrorCode.SERVICE_FAULT, errmsg, details: err.message };
+    } finally {
+      /* eslint-disable */
+      currentRequests -= 1;
+      if (currentRequests <= 0) {
+        currentRequests = 0;
+        // Indicator.close();
+      }
+    }
+  }
+}

src/util/filters.js

@@ -0,0 +1,10 @@
+import _ from 'lodash';
+
+const filters = {
+  getName(object) {
+    const { data, searchItem } = object;
+    return _.get(data, searchItem) === undefined ? '' : _.get(data, searchItem);
+  },
+};
+
+export default filters;

src/util/methods-util.js

@@ -0,0 +1,50 @@
+import { Util } from 'naf-core';
+
+const { isNullOrUndefined } = Util;
+
+export default {
+  //判断信息是否过期
+  isDateOff(dataDate) {
+    const now = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
+    dataDate = new Date(dataDate);
+    return now.getTime() <= dataDate.getTime();
+  },
+  //判断企业是否可以执行此动作/显示
+  checkCorp(data) {
+    const { role, unit, selfUnit, status, displayType, userid } = data;
+    if (!isNullOrUndefined(selfUnit) && !isNullOrUndefined(status)) {
+      return role === 'corp' && selfUnit === unit && status === '0';
+    } else if (!isNullOrUndefined(displayType)) {
+      if (role === 'corp') {
+        return role === displayType;
+      } else {
+        return role === displayType && !isNullOrUndefined(userid);
+      }
+    }
+  },
+  //获取url的参数params
+  getParams() {
+    let str = location.href;
+    let num = str.indexOf('?');
+    const param = {};
+    str = str.substr(num + 1);
+    let num2 = str.indexOf('#');
+    let str2 = '';
+    if (num2 > 0) {
+      str2 = str.substr(0, num2);
+    } else {
+      num2 = str.indexOf('/');
+      str2 = str.substr(0, num2);
+    }
+    const arr = str2.split('&');
+    for (let i = 0; i < arr.length; i++) {
+      num = arr[i].indexOf('=');
+      if (num > 0) {
+        const name = arr[i].substring(0, num);
+        const value = arr[i].substr(num + 1);
+        param[name] = decodeURI(value);
+      }
+    }
+    return param;
+  },
+};

src/util/user-util.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-console */
+export default {
+  get user() {
+    const val = sessionStorage.getItem('user');
+    try {
+      if (val) return JSON.parse(val);
+    } catch (err) {
+      console.error(err);
+    }
+    return null;
+  },
+  set user(userinfo) {
+    sessionStorage.setItem('user', JSON.stringify(userinfo));
+  },
+  get token() {
+    return sessionStorage.getItem('token');
+  },
+  set token(token) {
+    sessionStorage.setItem('token', token);
+  },
+  get openid() {
+    return sessionStorage.getItem('openid');
+  },
+  set openid(openid) {
+    sessionStorage.setItem('openid', openid);
+  },
+  get isGuest() {
+    return !this.user || this.user.role === 'guest';
+  },
+  save({ userinfo, token }) {
+    sessionStorage.setItem('user', JSON.stringify(userinfo));
+    sessionStorage.setItem('token', token);
+  },
+
+  get corpInfo() {
+    const val = sessionStorage.getItem('corpInfo');
+    if (val) return JSON.parse(val);
+    return null;
+  },
+  set corpInfo(corpInfo) {
+    sessionStorage.setItem('corpInfo', JSON.stringify(corpInfo));
+  },
+  saveCorpInfo(corpInfo) {
+    sessionStorage.setItem('corpInfo', JSON.stringify(corpInfo));
+  },
+
+  get unit() {
+    const val = sessionStorage.getItem('unit');
+    if (val) return JSON.parse(val);
+    return null;
+  },
+  set unit(unitList) {
+    sessionStorage.setItem('unit', JSON.stringify(unitList));
+  },
+  saveUnit(unitList) {
+    sessionStorage.setItem('unit', JSON.stringify(unitList));
+  },
+  get userInfo() {
+    const val = sessionStorage.getItem('userInfo');
+    if (val) return JSON.parse(val);
+    return null;
+  },
+  set userInfo(userInfo) {
+    sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
+  },
+  saveUserInfo(userInfo) {
+    sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
+  },
+};

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "Home",
-  components: {
-    HelloWorld
-  }
-};
-</script>

src/views/index.vue

@@ -0,0 +1,830 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" id="top">
+        <div class="w_1200">
+          <el-col :span="24" class="top">
+            <el-col :span="19">
+              <p>您好，欢迎访问吉林高等信息。。。</p>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" id="banner">
+        <el-col :span="24" class="banner">
+          <el-image :src="bannerImg.bannerUrl" style="width: 100%; height: 100%"></el-image>
+          <div class="w_1200">
+            <el-col :span="24" class="logoCon">
+              <el-col :span="2">
+                <el-image :src="bannerImg.logo" style="width: 100%"></el-image>
+              </el-col>
+              <el-col :span="22" class="textCon">
+                <p class="bannerText">吉林省高等学校毕业生就业信息网</p>
+                <p>Employment Information Network for graduates of Jilin Province colleges and universities</p>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="main">
+        <el-col :span="24" id="nav">
+          <div class="w_1200">
+            <el-col :span="24" class="nav">
+              <el-menu mode="horizontal" background-color="#6666ff" text-color="#fff" active-text-color="#fff">
+                <el-menu-item index="1" style="border-bottom: 0">网站首页</el-menu-item>
+                <el-submenu index="2" style="border-bottom: 0">
+                  <template slot="title">招聘信息</template>
+                  <el-menu-item index="2-1">宣讲会</el-menu-item>
+                  <el-menu-item index="2-2">选项2</el-menu-item>
+                  <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+                <el-submenu index="3" style="border-bottom: 0">
+                  <template slot="title">业务指南</template>
+                  <el-menu-item index="2-1">选项1</el-menu-item>
+                  <el-menu-item index="2-2">选项2</el-menu-item>
+                  <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+                <el-submenu index="4" style="border-bottom: 0">
+                  <template slot="title">政策法规</template>
+                  <el-menu-item index="2-1">选项1</el-menu-item>
+                  <el-menu-item index="2-2">选项2</el-menu-item>
+                  <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+                <el-menu-item index="5" style="border-bottom: 0">就业指导</el-menu-item>
+                <el-menu-item index="6" style="border-bottom: 0">党员之家</el-menu-item>
+                <el-menu-item index="7" style="border-bottom: 0">征兵宣传</el-menu-item>
+                <el-submenu index="8" style="border-bottom: 0">
+                  <template slot="title">网络课程</template>
+                  <el-menu-item index="2-1">选项1</el-menu-item>
+                  <el-menu-item index="2-2">选项2</el-menu-item>
+                  <el-menu-item index="2-3">选项3</el-menu-item>
+                </el-submenu>
+                <el-menu-item idnex="9" style="border-bottom: 0">关于我们</el-menu-item>
+              </el-menu>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" id="con1">
+          <div class="w_1200">
+            <el-col :span="24" class="con1">
+              <el-col :span="11" class="lunbo">
+                <el-carousel height="304px" indicator-position="none">
+                  <el-carousel-item v-for="(item, index) in con1Img" :key="index">
+                    <el-image :src="item.url" style="width: 100%; height: 100%"></el-image>
+                  </el-carousel-item>
+                </el-carousel>
+              </el-col>
+              <el-col :span="9" class="listInfo">
+                <el-col :span="24" class="notice">
+                  <el-col :span="20">
+                    <div class="noticeText">通知公告</div>
+                  </el-col>
+                  <el-col :span="4">
+                    <el-link href="#" class="more" :underline="false">
+                      <span>MORE</span>
+                      <i class="el-icon-d-arrow-right"></i>
+                    </el-link>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="info">
+                  <el-col :span="24" class="list" v-for="(item, index) in listInfo" :key="index">
+                    <el-link href="#" :underline="false">
+                      <el-col :span="19">
+                        <i class="el-icon-caret-right"></i>
+                        <span class="infoText">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="5">
+                        <div class="date">{{ item.date }}</div>
+                      </el-col>
+                    </el-link>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="4" class="login">
+                <el-col :span="24" class="business">
+                  <el-button type="success">企业登录</el-button>
+                </el-col>
+                <el-col :span="24" class="work">
+                  <div class="btnList">
+                    <el-link href="#" :underline="false">
+                      <el-col :span="24" class="btn">
+                        <el-image :src="btnListUrl" style="width: 100%; height: 100%"></el-image>
+                        <div class="btnText">就业信息填报</div>
+                      </el-col>
+                    </el-link>
+                    <el-link href="#" :underline="false">
+                      <el-col :span="24" class="btn">
+                        <el-image :src="btnListUrl" style="width: 100%; height: 100%"></el-image>
+                        <div class="btnText">就业信息填报</div>
+                      </el-col>
+                    </el-link>
+                    <el-link href="#" :underline="false">
+                      <el-col :span="24" class="btn">
+                        <el-image :src="btnListUrl" style="width: 100%; height: 100%"></el-image>
+                        <div class="btnText">就业信息填报</div>
+                      </el-col>
+                    </el-link>
+                    <el-link href="#" :underline="false">
+                      <el-col :span="24" class="btn">
+                        <el-image :src="btnListUrl" style="width: 100%; height: 100%"></el-image>
+                        <div class="btnText">就业信息填报</div>
+                      </el-col>
+                    </el-link>
+                    <el-link href="#" :underline="false">
+                      <el-col :span="24" class="btn">
+                        <el-image :src="btnListUrl" style="width: 100%; height: 100%"></el-image>
+                        <div class="btnText">就业信息填报</div>
+                      </el-col>
+                    </el-link>
+                  </div>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="con1">
+              <el-col :span="11" class="listInfo" style="width: 497px">
+                <el-col :span="24" class="notice">
+                  <el-col :span="20">
+                    <div class="noticeText">就业动态</div>
+                  </el-col>
+                  <el-col :span="4">
+                    <el-link href="#" class="more" :underline="false">
+                      <span>MORE</span>
+                      <i class="el-icon-d-arrow-right"></i>
+                    </el-link>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="info">
+                  <el-col :span="24" class="list" v-for="(item, index) in listInfo" :key="index">
+                    <el-link href="#" :underline="false">
+                      <el-col :span="19">
+                        <i class="el-icon-caret-right"></i>
+                        <span class="infoText">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="5">
+                        <div class="date">{{ item.date }}</div>
+                      </el-col>
+                    </el-link>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="9" class="listInfo">
+                <el-col :span="24" class="notice">
+                  <el-col :span="20">
+                    <div class="noticeText">高校动态</div>
+                  </el-col>
+                  <el-col :span="4">
+                    <el-link href="#" class="more" :underline="false">
+                      <span>MORE</span>
+                      <i class="el-icon-d-arrow-right"></i>
+                    </el-link>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="info">
+                  <el-col :span="24" class="list" v-for="(item, index) in listInfo" :key="index">
+                    <el-link href="#" :underline="false">
+                      <el-col :span="19">
+                        <i class="el-icon-caret-right"></i>
+                        <span class="infoText">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="5">
+                        <div class="date">{{ item.date }}</div>
+                      </el-col>
+                    </el-link>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="6" class="fast" style="width: 235px">
+                <el-col :span="24" class="notice">
+                  <el-col :span="17">
+                    <div class="noticeText">快速导航</div>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="tel">
+                  <el-col :span="24" class="telText">
+                    <i class="el-icon-phone"></i>
+                    <span>咨询电话：</span>
+                  </el-col>
+                  <el-col :span="24" class="num">
+                    <span>0431-84657570</span>
+                  </el-col>
+                  <el-col :span="24" class="navList">
+                    <el-col :span="8" v-for="(item, index) in navLists" :key="index" class="lists">
+                      <el-link href="#" :underline="false">
+                        <el-image :src="item.url" class="navImg"></el-image>
+                        <p>{{ item.text }}</p>
+                      </el-link>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="w_1200">
+            <el-col :span="24" class="bigImg">
+              <el-image :src="bigUrl" style="width: 100%; height: 100%"></el-image>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="info1">
+          <el-col :span="24" class="bg">
+            <img src="../assets/tu7.jpg" style="width: 100%; height: 100%" />
+          </el-col>
+          <el-col :span="24" class="hh">
+            <div class="w_1200">
+              <el-col :span="24" class="info1Text">最新招聘 New jobs</el-col>
+              <el-col :span="15" class="info1More">更多</el-col>
+              <el-col :span="24">
+                <!-- <el-row :gutter="10"> -->
+                <el-col :span="15" class="table1">
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                  <el-col :span="24" class="t-first">
+                    <el-col :span="8" class="mes h1">长春东方职业学院</el-col>
+                    <el-col :span="8" class="name h1">山东倒一医药科技有限公司</el-col>
+                    <el-col :span="4" class="fun h1">
+                      <el-link href="#" :underline="false">
+                        <span class="show">点击查看详情</span>
+                      </el-link>
+                    </el-col>
+                    <el-col :span="4" class="showDate h1">2020-6-03</el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="9" style="margin-left: 10px; width: 440px" class="table2">
+                  <el-col :span="24" class="board">
+                    <el-col :span="16">
+                      <div class="b-text">招聘公告</div>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-link href="#" :underline="false" class="b-more"> MORE >> </el-link>
+                    </el-col>
+                  </el-col>
+                  <el-col :span="24" v-for="(item, index) in bList" :key="index">
+                    <el-col :span="24" class="b-list">{{ item.text }}</el-col>
+                  </el-col>
+                </el-col>
+                <!-- </el-row> -->
+              </el-col>
+            </div>
+          </el-col>
+        </el-col>
+        <el-col :span="24">
+          <div class="w_1200">
+            <el-col :span="24">
+              <el-tabs v-model="activeName" class="webNav">
+                <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+              </el-tabs>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="footer">
+        <div class="w_1200">
+          <el-col :span="24" class="f-text">
+            <p>办公地址：长春市经济技术开发区金川街151号，吉林省高等学校毕业生就业指导中心2楼一站式办公大厅，邮编：130033。</p>
+            <p>公交线路：乘坐120路、227路、20路、260路、80路、130路、281路、154路、190路、125路公交北方市场下车，北方市场南门南行200米。</p>
+            <p>业务咨询电话：0431-84657570 0431-84657571; 办公时间：周一至周五，法定假日不对外办公。</p>
+            <p>吉ICP备09006292号-1 Copyright 2019 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved</p>
+          </el-col>
+          <el-col :span="24" style="text-align: center">
+            <el-link :underline="false">
+              <img src="../assets/tu7.png" />
+            </el-link>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      bannerImg: {
+        bannerUrl: require('@a/master_banner.png'),
+        logo: require('@a/master_logo.png'),
+      },
+      navList: [
+        {
+          text: '网站首页',
+        },
+        {
+          text: '招聘信息',
+        },
+        {
+          text: '业务指南',
+        },
+        {
+          text: '政策法规',
+        },
+        {
+          text: '就业指导',
+        },
+        {
+          text: '党员之家',
+        },
+        {
+          text: '征兵宣传',
+        },
+        {
+          text: '网络课程',
+        },
+        {
+          text: '关于我们',
+        },
+      ],
+      con1Img: [
+        {
+          url: require('@a/tu1.jpg'),
+        },
+        {
+          url: require('@a/tu2.png'),
+        },
+        {
+          url: require('@a/tu3.jpg'),
+        },
+      ],
+      listInfo: [
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+        {
+          text: '2020年前郭县桑葚人才专升本考试征集志愿哈哈',
+          date: '2020-09-07',
+        },
+      ],
+      btnListUrl: require('@a/tu4.jpg'),
+      navLists: [
+        {
+          url: require('@a/tu5.jpg'),
+          text: '就业派遣',
+        },
+        {
+          url: require('@a/tu5.jpg'),
+          text: '就业派遣',
+        },
+        {
+          url: require('@a/tu5.jpg'),
+          text: '就业派遣',
+        },
+        {
+          url: require('@a/tu5.jpg'),
+          text: '就业派遣',
+        },
+        {
+          url: require('@a/tu5.jpg'),
+          text: '就业派遣',
+        },
+        {
+          url: require('@a/tu5.jpg'),
+          text: '就业派遣',
+        },
+      ],
+      bigUrl: require('@a/tu6.jpg'),
+      bList: [
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+        {
+          text: '和田地区2020年面向社会公开招聘医疗卫生防疫工作人员公告',
+        },
+      ],
+      activeName: 'first',
+    };
+  },
+  created() {},
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+// * {
+//   margin: 0;
+//   padding: 0;
+// }
+image {
+  border: 0;
+  vertical-align: middle;
+}
+li {
+  list-style: none;
+}
+#index {
+  background-color: #f6f6f6;
+  .top {
+    height: 40px;
+    background-color: hsla(0, 0%, 96.1%, 0.31);
+    p {
+      line-height: 40px;
+    }
+  }
+  .banner {
+    height: 304px;
+    position: relative;
+    .logoCon {
+      position: absolute;
+      top: 20%;
+      left: 5%;
+      width: 93%;
+      .textCon {
+        padding: 22px;
+        .bannerText {
+          font-size: 40px;
+          font-weight: 600px;
+        }
+        p {
+          color: #1770c4;
+          font-family: cursive;
+        }
+      }
+    }
+  }
+  .nav {
+    .el-menu {
+      .el-menu-item {
+        padding: 0 20px;
+      }
+      // .el-menu-item.is-active {
+      //   background-color: rgb(38, 125, 231) !important;
+      // }
+    }
+    // .el-menu-item.is-active {
+    //   padding: 0 20px;
+    //   background-color: rgb(38, 125, 231) !important;
+    // }
+  }
+  .con1 {
+    height: 304px;
+    margin-top: 10px;
+    .lunbo {
+      width: 497px;
+      margin-right: 10px;
+    }
+    .listInfo {
+      height: 304px;
+      background-color: #fff;
+      margin-right: 10px;
+      width: 447.5px;
+      .notice {
+        border-bottom: 1px solid #176ebb;
+        .noticeText {
+          width: 110px;
+          height: 39px;
+          background-color: #176ebb;
+          font-size: 16px;
+          color: #fff;
+          line-height: 39px;
+          text-align: center;
+        }
+        .more {
+          height: 39px;
+          line-height: 39px;
+          text-align: right;
+          font-size: 16px;
+          color: #000;
+        }
+        .more:hover {
+          color: #a32324;
+        }
+      }
+      .info {
+        .list {
+          padding: 6px 10px;
+          .el-link {
+            .el-icon-caret-right {
+              padding: 4px 4px;
+              // 为什么给i加float:left就好了而后面的不加
+              float: left;
+            }
+            .infoText {
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              font-size: 16px;
+            }
+            .date {
+              font-size: 16px;
+            }
+          }
+          .el-link:hover {
+            color: #a32324;
+          }
+        }
+      }
+    }
+    .login {
+      width: 235px;
+      height: 304px;
+      background-color: #fff;
+      .business {
+        padding: 5px 0px;
+        text-align: center;
+      }
+      .work {
+        padding: 0 20px;
+        position: relative;
+        .btnList {
+          .el-link {
+            margin: 1px 0px;
+            .btn {
+              .btnText {
+                width: 100%;
+                height: 47px;
+                line-height: 42px;
+                text-align: center;
+                position: absolute;
+                top: 0;
+                left: 0;
+                color: #fff;
+                font-weight: 700;
+              }
+            }
+          }
+        }
+      }
+    }
+    .fast {
+      background-color: #fff;
+      height: 304px;
+      .notice {
+        border-bottom: 1px solid #176ebb;
+        .noticeText {
+          width: 110px;
+          height: 39px;
+          background-color: #176ebb;
+          color: #fff;
+          line-height: 39px;
+          text-align: center;
+        }
+      }
+      .tel {
+        padding: 15px 20px;
+        .telText {
+          font-size: 20px;
+        }
+        .num {
+          padding: 10px 0;
+          font-size: 20px;
+          color: #176ebb;
+        }
+        .navList {
+          .lists {
+            padding: 7px 0px;
+            text-align: center;
+          }
+          .navImg {
+            border-radius: 10px;
+          }
+        }
+      }
+    }
+  }
+  // 导航的背景、用布局之后的margin
+  .info1 {
+    height: 560px;
+    margin-top: 10px;
+    position: relative;
+  }
+  .bg {
+    height: 414px;
+  }
+  .hh {
+    position: absolute;
+    top: 37px;
+    left: 0;
+    .info1Text {
+      // margin-top: 37px;
+      text-align: center;
+      font-size: 25px;
+      color: #fff;
+      font-weight: 700;
+      letter-spacing: 0.5rem;
+    }
+    .info1More {
+      text-align: right;
+      color: #fff;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .table1 {
+      height: 416px;
+      padding: 10px;
+      background-color: #fff;
+      .t-first {
+        height: 40px;
+        line-height: 40px;
+        font-size: 16px;
+        text-align: center;
+        .h {
+          padding: 0px 15px;
+          color: #a01f25;
+        }
+        .h1 {
+          padding: 0px 15px;
+          .show {
+            color: red;
+          }
+        }
+      }
+    }
+    .table2 {
+      height: 416px;
+      background-color: #fff;
+      .board {
+        height: 40px;
+        border-bottom: 1px solid #176ebb;
+        .b-text {
+          width: 110px;
+          height: 40px;
+          background-color: #176ebb;
+          color: #fff;
+          line-height: 40px;
+          text-align: center;
+        }
+        .b-more {
+          height: 40px;
+          line-height: 40px;
+          text-align: right;
+          display: block;
+        }
+      }
+      .b-list {
+        padding: 10px;
+        font-size: 14px;
+      }
+    }
+  }
+  .webNav {
+    /deep/.el-tabs__nav-wrap::after {
+      height: 0px !important;
+    }
+    /deep/.el-tabs__nav-scroll {
+      background-color: #e3eaf7;
+      color: #0d5cb8;
+      .el-tabs__item {
+        padding: 0px 20px;
+        color: #0d5cb8;
+      }
+      .el-tabs__item.is-active {
+        color: #fff;
+        background: #0d5cb8;
+      }
+      /deep/.el-tabs__active-bar {
+        height: 0px !important;
+      }
+    }
+  }
+  .footer {
+    height: 190px;
+    background-color: rgb(4, 87, 199);
+    .f-text {
+      padding: 15px 0px;
+      text-align: center;
+      font-size: 14px;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/index1.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="index1">
+    <el-row>
+      <el-col :span="24">
+        <div class="w_1200">
+          <el-col :span="24" class="list">
+            <el-tabs :tab-position="tabPosition">
+              <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+              <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+              <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+              <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index1',
+  props: {},
+  components: {},
+  data() {
+    return {
+      tabPosition: 'left',
+    };
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.main {
+  .list {
+    .el-tabs--left .el-tabs__header.is-left {
+      margin-right: 30px;
+    }
+  }
+}
+</style>

vue.config.js

@@ -0,0 +1,37 @@
+const path = require('path');
+// const common = path.resolve(__dirname, '../common');
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_ROUTER,
+  // outputDir: process.env.VUE_APP_ROUTER,
+  configureWebpack: config => {
+    Object.assign(config, {
+      // 开发生产共同配置
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, './src'),
+          '@c': path.resolve(__dirname, './src/components'),
+          '@a': path.resolve(__dirname, './src/assets'),
+          // '@common': common,
+        },
+      },
+    });
+  },
+  devServer: {
+    port: '8001',
+    //api地址前缀
+    proxy: {
+      '/files': {
+        target: 'http://free.liaoningdoupo.com',
+      },
+      '/api': {
+        target: 'http://192.168.1.43:8080',
+        changeOrigin: true,
+        ws: true,
+      },
+      '/ws': {
+        target: 'http://free.liaoningdoupo.com',
+        ws: true,
+      },
+    },
+  },
+};