主站首页

src/components/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :info="info"></top>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <menuInfo></menuInfo>
+      </el-col>
+      <el-col :span="24" class="banner">
+        <banner :info="info"></banner>
+      </el-col>
+      <el-col :span="24" class="newsNotice">
+        <div class="w_1200">
+          <el-col :span="16" class="news">
+            <news :imglist="imglist"></news>
+          </el-col>
+          <el-col :span="7" class="notice">
+            <notice :noticeList="noticeList"></notice>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="caleRecruit">
+        <div class="w_1200">
+          <el-col :span="8" class="calendar">
+            <calendar></calendar>
+          </el-col>
+          <el-col :span="16" class="recruitRight">
+            <el-col :span="24" class="recruit">
+              <recruit :recruitList="recruitList"></recruit>
+            </el-col>
+            <el-col :span="24" class="company">
+              <company :companyList="companyList"></company>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="login">
+        <div class="w_1200">
+          <login></login>
+        </div>
+      </el-col>
+      <el-col :span="24" class="naitve">
+        <div class="w_1200">
+          <naitve :nativeList="nativeList"></naitve>
+        </div>
+      </el-col>
+      <el-col :span="24" class="contact">
+        <contact :info="info"></contact>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <foot :info="info"></foot>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import banner from '@/layout/index/banner.vue';
+import news from '@/layout/index/news.vue';
+import notice from '@/layout/index/notice.vue';
+import calendar from '@/layout/index/calendar.vue';
+import recruit from '@/layout/index/recruit.vue';
+import company from '@/layout/index/company.vue';
+import login from '@/layout/index/login.vue';
+import naitve from '@/layout/index/naitve.vue';
+import contact from '@/layout/index/contact.vue';
+import foot from '@/layout/index/foot.vue';
+
+export default {
+  name: 'index',
+  props: {
+    info: null, //头部信息
+    imglist: null, //新闻信息
+    noticeList: null, //通知公告
+    recruitList: null, //最新招聘信息
+    companyList: null, //招聘企业
+    nativeList: null, //信息网导航
+  },
+  components: {
+    top, //头部
+    menuInfo, //导航
+    banner, //banner
+    news, //新聞
+    notice, //通告
+    calendar, //日历
+    recruit, //招聘信息
+    company, //企业
+    login, //登录
+    naitve, //导航
+    contact, //联系我们
+    foot, //底部信息
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 120px;
+  overflow: hidden;
+}
+.menu {
+  height: 40px;
+  background-color: #0457c7;
+  overflow: hidden;
+}
+.banner {
+  height: 450px;
+  overflow: hidden;
+}
+.newsNotice {
+  height: 303px;
+  margin: 35px 0 0 0;
+  overflow: hidden;
+}
+.news {
+  height: 303px;
+  overflow: hidden;
+}
+.notice {
+  float: right;
+  width: 380px;
+  height: 303px;
+  overflow: hidden;
+}
+.caleRecruit {
+  height: 476px;
+  margin: 35px 0 0 0;
+  overflow: hidden;
+}
+.calendar {
+  width: 369px;
+  height: 476px;
+  overflow: hidden;
+}
+.recruitRight {
+  float: right;
+  height: 476px;
+  overflow: hidden;
+}
+.recruit {
+  height: 303px;
+  overflow: hidden;
+}
+.company {
+  height: 173px;
+  overflow: hidden;
+}
+.login {
+  height: 50px;
+  margin: 15px 0 0 0;
+  overflow: hidden;
+}
+.naitve {
+  height: 255px;
+  margin: 30px 0 0 0;
+  overflow: hidden;
+}
+.contact {
+  height: 265px;
+  margin: 30px 0 0 0;
+  background-color: #d5e2f8;
+  overflow: hidden;
+}
+.foot {
+  height: 133px;
+  background-color: #0457c7;
+  overflow: hidden;
+}
+</style>

src/layout/index/banner.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="banner">
+    <el-row>
+      <el-col :span="24">
+        <el-image :src="info.banner" style="height:450px;" fit="fit"></el-image>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'banner',
+  props: {
+    info: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

src/layout/index/calendar.vue

@@ -0,0 +1,212 @@
+<template>
+  <div id="self-calendar">
+    <el-row style="background:#598bed;height:476px;">
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="calendar">
+          <el-calendar>
+            <template #dateCell="{date, data}">
+              <el-row>
+                <el-col :span="24" @click.native="search(data)">{{ date | getDay }}</el-col>
+              </el-row>
+            </template>
+          </el-calendar>
+        </el-col>
+        <el-col :span="24" class="list">
+          <span class="jiantou"></span>
+          <el-col :span="24" class="listInfo" v-if="info.id">
+            <el-col :span="24" class="title">
+              <p class="textOver">{{ info.title }}</p>
+            </el-col>
+            <el-col :span="24" class="organizer">
+              <p class="textOver">主办方：{{ info.organizer }}</p>
+            </el-col>
+            <el-col :span="12" class="address">
+              <p class="textOver">地点：{{ info.address }}</p>
+            </el-col>
+            <el-col :span="12" class="date">
+              <p>时间：{{ info.date }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="listInfo" v-else>
+            <el-col :span="24" class="none">
+              2020年毕业季大型招聘会 7月敬请关注
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="loginBtn">
+        <el-button type="primary">学生登录</el-button>
+        <el-button type="success">企业登录</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+export default {
+  name: 'self-calendar',
+  props: {},
+  components: {},
+  data: () => ({
+    calendar: new Date(),
+    list: [],
+    loading: false,
+    infoList: [],
+    info: {
+      id: 1,
+      title: '应届毕业生大型招聘会',
+      organizer: '一汽大众大型招聘会',
+      date: '2019-11-7',
+      address: '长春会展中心',
+    },
+  }),
+  created() {
+    this.search();
+  },
+  computed: {},
+  methods: {
+    ...mapActions(['jobfairOperation']),
+    async search(date) {
+      let options = { date: date ? date.day : undefined };
+      // 1直接拿着参数发送请求
+      let result = await this.jobfairOperation({ type: 'list', data: { ...options } });
+      if (`${result.errcode}` === '0') {
+        //给this=>vue的实例下在中的list属性，赋予result。data的值
+        this.$set(this, `infoList`, result.data);
+        if (result.data.length > 0) this.$set(this, `info`, result.data[0]);
+        else this.$set(this, `info`, {});
+      } else {
+        this.$set(this, `info`, {});
+        this.$message.error(result.errmsg ? result.errmsg : 'error');
+      }
+    },
+  },
+  filters: {
+    getDay(data) {
+      return data.getDate();
+    },
+    getTime(date) {
+      if (date) {
+        let arr = date.split(' ');
+        return arr[1];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.info {
+  height: 396px;
+}
+.calendar {
+  height: 280px;
+}
+.list {
+  position: relative;
+  height: 116px;
+}
+.loginBtn {
+  height: 80px;
+  line-height: 80px;
+  text-align: center;
+}
+/deep/.el-calendar {
+  background-color: #598bed;
+}
+/deep/.el-calendar__title {
+  color: yellow;
+  font-weight: 微软雅黑;
+  font-size: 20px;
+}
+/deep/.el-calendar__body {
+  padding: 0 40px;
+}
+/deep/.el-calendar-table thead th {
+  padding: 0;
+  color: #ffff;
+  font-weight: bold;
+}
+/deep/.el-calendar-table .el-calendar-day {
+  line-height: 35px;
+  height: 35px;
+  text-align: center;
+  padding: 0;
+  color: #fff;
+}
+/deep/.el-calendar-table tr td:first-child {
+  border-left: none;
+}
+/deep/.el-calendar-table tr:first-child td {
+  border-top: none;
+}
+/deep/.el-calendar-table td {
+  border-bottom: none;
+  border-right: none;
+}
+/deep/.el-calendar__header {
+  border-bottom: none;
+  padding: 12px 50px;
+}
+/deep/.el-calendar__button-group {
+  display: none;
+}
+/deep/.el-calendar-table td.is-today {
+  color: #0066ff;
+  background: #f8ab55;
+  border-radius: 90px;
+}
+/deep/.el-calendar-table td.is-selected {
+  background-color: #54f77f;
+  color: yellow;
+  border-radius: 50px;
+}
+.listInfo {
+  height: 100px;
+  width: 89%;
+  background: #fff;
+  margin: 13px 20px;
+  border-radius: 10px;
+}
+.jiantou {
+  display: inline-block;
+  position: absolute;
+  top: -7px;
+  left: 45%;
+  width: 0px;
+  height: 0;
+  border-width: 10px;
+  border-style: solid;
+  border-color: #598bed #598bed #fff #598bed;
+}
+.listInfo .title p {
+  text-align: center;
+  padding: 5px 0;
+  font-size: 20px;
+}
+.listInfo .organizer {
+  padding: 5px 15px;
+}
+.listInfo .address {
+  padding: 5px 0 0 12px;
+}
+.listInfo .date {
+  padding: 5px 0;
+}
+.none {
+  font-size: 24px;
+  color: #676767;
+  text-align: center;
+  padding: 19px 28px;
+}
+</style>

src/layout/index/company.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="company">
+    <el-row>
+      <el-col :span="24" class="company">
+        <el-col :span="24" class="newsTop">
+          <el-col :span="18" class="text">
+            {{ title }}
+          </el-col>
+          <el-col :span="6" class="link">
+            <el-link :underline="false">MORE<i class="el-icon-circle-plus-outline" style="color:#f8b024;font-weight:bold;margin:0 5px;"></i> </el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="12" class="list" v-for="(item, index) in companyList" :key="index">
+            <el-col :span="24" class="title">
+              <p class="textOver">{{ item.title }}({{ item.time }})</p>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'company',
+  props: {
+    companyList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '招聘企业',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.newsTop {
+  height: 35px;
+  line-height: 35px;
+  border-bottom: 2px solid #0656d1;
+}
+.newsTop .text {
+  font-size: 20px;
+  color: #0874ee;
+  font-weight: 600;
+  padding: 0 10px;
+}
+.newsTop .link {
+  text-align: right;
+  padding: 0 5px;
+}
+.list {
+  padding: 13px 0;
+}
+.list p {
+  font-size: 14px;
+  color: #222222;
+}
+</style>

src/layout/index/contact.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="contact">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24">
+          <el-col :span="12">
+            <el-col :span="24" class="top">
+              联系我们
+            </el-col>
+            <el-col :span="24" class="title">
+              <p><i class="el-icon-location-outline"></i>{{ info.address }}</p>
+            </el-col>
+            <el-col :span="24" class="title">
+              <p><i class="el-icon-message"></i>{{ info.email }}</p>
+            </el-col>
+            <el-col :span="24" class="title">
+              <p><i class="el-icon-truck"></i>{{ info.gongjiao }}</p>
+            </el-col>
+            <el-col :span="24" class="title">
+              <p><i class="el-icon-phone"></i>{{ info.mobile }}</p>
+            </el-col>
+            <el-col :span="24" class="title">
+              <p><i class="el-icon-timer"></i>{{ info.date }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="12" class="ditu">
+            <p>地图</p>
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'contact',
+  props: {
+    info: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.top {
+  font-size: 24px;
+  color: #535353;
+  padding: 10px;
+}
+.title {
+  font-size: 14px;
+  color: #868686;
+  padding: 5px 60px 5px 10px;
+}
+.ditu {
+  padding: 30px 94px;
+}
+.ditu p {
+  width: 410px;
+  height: 200px;
+  border: 1px solid #ccc;
+}
+</style>

src/layout/index/foot.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="foot">
+    <el-row>
+      <el-col :span="24" class="foot">
+        <p class="textOver">{{ info.footTitle }}</p>
+        <el-image :src="footUrl"></el-image>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'foot',
+  props: {
+    info: null,
+  },
+  components: {},
+  data: () => ({
+    footUrl: require('@/assets/blue.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.foot {
+  text-align: center;
+}
+.foot p {
+  color: #fff;
+  font-size: 14px;
+  padding: 15px 0;
+}
+</style>

src/layout/index/login.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24" class="login">
+        <el-link :underline="false">
+          <el-image style="width:294px;height:50px;padding: 0 0 0 40px;" :src="yizhanshi"></el-image>
+        </el-link>
+        <el-link :underline="false" href="http://jilinbys.ncss.org.cn/login">
+          <el-image style="width:112px;height:50px;padding: 0 0 0 15px;" :src="xuesheng"></el-image>
+        </el-link>
+        <el-link :underline="false" href="http://jilinbys.ncss.org.cn/rec/login">
+          <el-image style="width:112px;height:50px;padding: 0 0 0 15px;" :src="qiye"></el-image>
+        </el-link>
+        <el-link :underline="false" href="http://file.ncss.org.cn/ncsFile/ncss/guidebook/student_guide.pdf">
+          <el-image style="width:167px;height:50px;padding: 0 0 0 190px;" :src="shouce"></el-image>
+        </el-link>
+        <el-link :underline="false" href="http://file.ncss.org.cn/ncsFile/ncss/guidebook/rec_guide.pdf">
+          <el-image style="width:167px;height:50px;padding: 0 0 0 15px;" :src="shouces"></el-image>
+        </el-link>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  props: {},
+  components: {},
+  data: () => ({
+    yizhanshi: require('@/assets/yizhan.png'),
+    xuesheng: require('@/assets/xuesheng.png'),
+    qiye: require('@/assets/qiye.png'),
+    shouce: require('@/assets/shouce.png'),
+    shouces: require('@/assets/shouces.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  height: 50px;
+  line-height: 0px;
+  background-color: #4193c5;
+}
+.login .el-link {
+  height: 48px;
+}
+</style>

src/layout/index/menuInfo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="menuInfo">
+    <el-row>
+      <el-col :span="24">
+        <div class="w_1200">
+          <el-menu
+            :default-active="activeIndex1"
+            class="el-menu-demo"
+            mode="horizontal"
+            @select="handleSelect"
+            background-color="#0457c7"
+            text-color="#fff"
+            active-text-color="#fff"
+          >
+            <el-menu-item index="1">首页</el-menu-item>
+            <el-menu-item index="2">政策法规</el-menu-item>
+            <el-menu-item index="3">网上大厅</el-menu-item>
+            <el-menu-item index="4">招聘信息</el-menu-item>
+            <el-menu-item index="5">就业指导</el-menu-item>
+            <el-menu-item index="6">党员之家</el-menu-item>
+            <el-menu-item index="7">调查问卷</el-menu-item>
+            <el-menu-item index="8">关于我们</el-menu-item>
+          </el-menu>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'menuInfo',
+  props: {},
+  components: {},
+  data: () => ({
+    activeIndex1: '1',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+/deep/.el-menu--horizontal > .el-menu-item {
+  height: 40px;
+  line-height: 40px;
+}
+/deep/.el-menu--horizontal > .el-menu-item {
+  border-bottom: none;
+}
+/deep/.el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom: none;
+  background-color: #1b6edd !important;
+}
+</style>

src/layout/index/naitve.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="naitve">
+    <el-row>
+      <el-col :span="24" class="native">
+        <el-tabs v-model="activeName" type="card" :before-leave="handleClick">
+          <el-tab-pane v-for="(item, index) in nativeList" :key="index">
+            <span slot="label">{{ item.title }}</span>
+            <el-col :span="6" v-for="(tag, index) in item.children" :key="index" class="enterList">
+              <el-col :span="24" class="title">
+                <el-link :underline="false" :href="tag.url" target="_blank">{{ tag.title }} </el-link>
+              </el-col>
+            </el-col>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'naitve',
+  props: {
+    nativeList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-tabs__nav-scroll {
+  background-color: #e3eaf7;
+}
+/deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  border-bottom-color: none;
+}
+/deep/.el-tabs__item.is-active {
+  color: #fff;
+  background: #0d5cb8;
+}
+/deep/.el-tabs__item {
+  color: #0d5cb8;
+}
+.enterList {
+  padding: 14px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.title {
+  font-size: 14px;
+  color: #5b5b5b;
+  text-align: center;
+}
+</style>

src/layout/index/news.vue

@@ -0,0 +1,177 @@
+<template>
+  <div id="news">
+    <el-row>
+      <el-col :span="24" class="news">
+        <el-col :span="24" class="newsTop">
+          <el-col :span="18" class="text">
+            {{ title }}
+          </el-col>
+          <el-col :span="6" class="link">
+            <el-link :underline="false">MORE<i class="el-icon-circle-plus-outline" style="color:#f8b024;font-weight:bold;margin:0 5px;"></i> </el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="11" class="block">
+            <el-carousel :interval="5000" arrow="always" ref="shubiao">
+              <el-carousel-item v-for="(item, index) in imglist" :key="index" :name="`${index}`">
+                <!-- @click="$router.push({ path: `/info/detail?id=${item.id}` })" -->
+                <el-link :underline="false">
+                  <el-image style="width:369px;height:242px;" :src="item.url"></el-image>
+                  <el-col :span="24" class="cont">
+                    <p>{{ item.content }}</p>
+                  </el-col>
+                </el-link>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="12" class="content">
+            <el-col :span="24" class="titList" @mouseover="shuYi(index)" :class="newListActive(item)" v-for="(item, index) in imglist" :key="index">
+              <span class="shu"></span>
+              <!-- @click="$router.push({ path: `/info/detail?id=${tag.id}` })" -->
+              <span class="title">{{ item.title }}</span>
+              <span class="time">{{ item.time }}</span>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news',
+  props: {
+    imglist: null,
+  },
+  components: {},
+  data: () => ({
+    title: '就业动态',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    shuYi(index) {
+      this.$refs.shubiao.setActiveItem(`${index}`);
+    },
+    newListActive(item) {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+/deep/.el-carousel__indicators {
+  display: none;
+}
+.newsTop {
+  height: 35px;
+  line-height: 35px;
+  border-bottom: 2px solid #0656d1;
+}
+.newsTop .text {
+  font-size: 20px;
+  color: #0874ee;
+  font-weight: 600;
+  padding: 0 10px;
+}
+.newsTop .link {
+  text-align: right;
+  padding: 0 5px;
+}
+.info {
+  margin: 24px 0 0 0;
+}
+.block {
+  width: 369px;
+  height: 242px;
+  overflow: hidden;
+}
+.cont {
+  position: absolute;
+  bottom: 0;
+  height: 40px;
+  line-height: 40px;
+  background-color: #0656d19f;
+}
+.cont p {
+  font-size: 18px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 15px;
+}
+/deep/.el-carousel__container {
+  height: 242px;
+}
+.content {
+  float: right;
+  width: 415px;
+}
+.titList {
+  border-bottom: 1px dashed #ccc;
+  padding: 5px 0;
+}
+.titList .shu {
+  display: inline-block;
+  width: 2px;
+  height: 16px;
+  background-color: transparent;
+}
+.titList .title {
+  font-size: 14px;
+  color: #5b5b5b;
+  display: inline-block;
+  width: 300px;
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.titList .time {
+  font-size: 14px;
+  color: #5b5b5b;
+  display: inline-block;
+  width: 70px;
+  overflow: hidden;
+  padding: 0 10px;
+}
+.titList:hover {
+  cursor: pointer;
+}
+.titList:hover .title {
+  color: #333333;
+}
+.titList:hover .shu {
+  background-color: #0656d1;
+}
+/deep/.el-carousel__arrow {
+  width: 17px;
+  height: 39px;
+  border-radius: 0;
+  background-color: #0656d1;
+}
+/deep/.el-carousel__arrow--left {
+  left: 0;
+}
+/deep/.el-carousel__arrow--right {
+  right: 0;
+}
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 18px;
+  opacity: 0.75;
+  line-height: 300px;
+  margin: 0;
+}
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

src/layout/index/notice.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="notice">
+    <el-row>
+      <el-col :span="24" class="notice">
+        <el-col :span="24" class="newsTop">
+          <el-col :span="18" class="text">
+            {{ title }}
+          </el-col>
+          <el-col :span="6" class="link">
+            <el-link :underline="false">MORE<i class="el-icon-circle-plus-outline" style="color:#f8b024;font-weight:bold;margin:0 5px;"></i> </el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="list" v-for="(item, index) in noticeList" :key="index">
+            <span class="shu"></span>
+            <span class="title">{{ item.title }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {
+    noticeList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '通知公告',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.newsTop {
+  height: 35px;
+  line-height: 35px;
+  border-bottom: 2px solid #0656d1;
+}
+.newsTop .text {
+  font-size: 20px;
+  color: #0874ee;
+  font-weight: 600;
+  padding: 0 10px;
+}
+.newsTop .link {
+  text-align: right;
+  padding: 0 5px;
+}
+.info {
+  margin: 15px 0 0 0;
+}
+.list {
+  padding: 9px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.list .shu {
+  display: inline-block;
+  width: 2px;
+  height: 16px;
+  background-color: transparent;
+}
+.list .title {
+  font-size: 14px;
+  color: #5b5b5b;
+  display: inline-block;
+  width: 358px;
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list:hover {
+  cursor: pointer;
+}
+.list:hover .title {
+  color: #333333;
+}
+.list:hover .shu {
+  background-color: #0656d1;
+}
+</style>

src/layout/index/recruit.vue

@@ -0,0 +1,153 @@
+<template>
+  <div id="recruit">
+    <el-row>
+      <el-col :span="24" class="recruit">
+        <el-col :span="24" class="newsTop">
+          <el-col :span="18" class="text">
+            {{ title }}
+          </el-col>
+          <el-col :span="6" class="link">
+            <el-link :underline="false">MORE<i class="el-icon-circle-plus-outline" style="color:#f8b024;font-weight:bold;margin:0 5px;"></i> </el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="listTop">
+              <el-col :span="6" class="title">标题</el-col>
+              <el-col :span="6" class="jobs">职位</el-col>
+              <el-col :span="6" class="kong">功能</el-col>
+              <el-col :span="6" class="date">发布时间</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="listinfo" v-for="(item, index) in recruitList" :key="index">
+            <el-col :span="6" class="title">
+              <p class="textOver"><span class="dian"></span>{{ item.title }}</p>
+            </el-col>
+            <el-col :span="6" class="jobs">
+              <p class="textOver">{{ item.jobs }}</p>
+            </el-col>
+            <el-col :span="6" class="link"><el-link :underline="false">[在线投递简历]</el-link></el-col>
+            <el-col :span="6" class="date">{{ item.date }}</el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'recruit',
+  props: {
+    recruitList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '最新招聘信息',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.newsTop {
+  height: 35px;
+  line-height: 35px;
+  border-bottom: 2px solid #0656d1;
+}
+.newsTop .text {
+  font-size: 20px;
+  color: #0874ee;
+  font-weight: 600;
+  padding: 0 10px;
+}
+.newsTop .link {
+  text-align: right;
+  padding: 0 5px;
+}
+.list {
+  margin: 10px 0 0 0;
+}
+.listTop {
+  height: 35px;
+  line-height: 35px;
+}
+.listTop .title {
+  width: 215px;
+  margin: 0 35px 0 0;
+  font-size: 16px;
+  color: #181818;
+  text-align: center;
+  border-bottom: 1px solid #a3c1f1;
+}
+.listTop .jobs {
+  width: 162px;
+  margin: 0 35px 0 0;
+  font-size: 16px;
+  color: #181818;
+  text-align: center;
+  border-bottom: 1px solid #a3c1f1;
+}
+.listTop .kong {
+  width: 178px;
+  margin: 0 35px 0 0;
+  text-align: center;
+  border-bottom: 1px solid #a3c1f1;
+}
+.listTop .date {
+  width: 140px;
+  font-size: 16px;
+  color: #181818;
+  text-align: center;
+  border-bottom: 1px solid #a3c1f1;
+}
+.listinfo {
+  height: 44px;
+  line-height: 44px;
+  border-bottom: 1px dashed #ccc;
+}
+.dian {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 5px;
+  background-color: red;
+  border-radius: 90px;
+}
+.listinfo .title {
+  width: 215px;
+  margin: 0 35px 0 0;
+  font-size: 14px;
+  color: #181818;
+  text-align: left;
+}
+.listinfo .jobs {
+  width: 162px;
+  margin: 0 35px 0 0;
+  font-size: 14px;
+  color: #181818;
+  text-align: center;
+}
+.listinfo .link {
+  width: 178px;
+  margin: 0 35px 0 0;
+  text-align: center;
+}
+.listinfo .date {
+  width: 140px;
+  font-size: 14px;
+  color: #181818;
+  text-align: center;
+}
+</style>

src/layout/index/top.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="12" class="left">
+          <el-image style="height:120px;" :src="info.src"></el-image>
+        </el-col>
+        <el-col :span="12" class="right">
+          <p class="phone"><i class="el-icon-phone-outline" style="color:#868686;"></i>{{ info.phone }}</p>
+          <p class="day"><i class="el-icon-timer"></i>办公时间：周一至周五，法定假日不对外办公</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'top',
+  props: {
+    info: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.left {
+  height: 120px;
+}
+.right {
+  text-align: right;
+  padding: 37px;
+}
+.right .phone {
+  font-size: 20px;
+  color: #1776c3;
+}
+.right .day {
+  font-size: 14px;
+  color: #868686;
+}
+</style>

src/views/index.vue

@@ -1,15 +1,74 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <index-detail
+      :info="info"
+      :imglist="imglist"
+      :noticeList="noticeList"
+      :recruitList="recruitList"
+      :companyList="companyList"
+      :nativeList="nativeList"
+    ></index-detail>
   </div>
 </template>
 
 <script>
+import indexDetail from '@/components/index.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    indexDetail,
+  },
+  data: () => ({
+    info: {
+      src: require('@/assets/logo.png'),
+      phone: '0431-12345678',
+      banner: require('@/assets/banner.png'),
+      address: '办公地址：长春市经济技术开发区金川街151号吉林省高等学校毕业生就业指导中心2楼一站式办公大厅',
+      email: '邮编：130012',
+      gongjiao: '公交线路：乘坐120路、227路、20路、260路、80路、130路、281路、154路、190路、125路公交北方市场下车，北方市场南门南行200米。',
+      mobile: '业务咨询电话：0431-84657570 0431-84657571;',
+      date: '办公时间：周一至周五，法定假日不对外办公。',
+      footTitle: '吉ICP备09006292号-1 Copyright 2013 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved',
+    },
+    imglist: [
+      {
+        url: require('@/assets/news.png'),
+        title: '省成功举办全国高校就业指导人员培训',
+        time: '2019-12-2',
+        content: '省成功举办全国高校就业指导人员培训省成功举办全国高校就业指导人员培训',
+      },
+    ],
+    noticeList: [
+      {
+        title: '省成功举办全国高校就业指导人员培训省成功举办全国高校就业指导人员培训',
+      },
+    ],
+    recruitList: [
+      {
+        title: '辽源市百康药业有限责任公司',
+        jobs: '招聘化学和药学相关专业',
+        date: '2019-12-02',
+      },
+    ],
+    companyList: [
+      {
+        title: '[广西] 中国建筑材料工业地质勘查中心广西总队',
+        time: '(10-15)',
+      },
+    ],
+    nativeList: [
+      {
+        title: '网站导航',
+        children: [
+          {
+            title: '长春工业大学就业信息网',
+            url: 'http://99991.smart.cc-lotus.info/www/',
+          },
+        ],
+      },
+    ],
+  }),
   created() {},
   computed: {},
   methods: {},

src/views/index/App.vue

@@ -1,22 +0,0 @@
-<template>
-  <div id="app">
-    <router-view />
-  </div>
-</template>
-<script>
-export default {
-  name: 'app',
-  components: {},
-};
-</script>
-
-<style lang="scss">
-html {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-body {
-  margin: 0;
-  overflow-x: hidden;
-}
-</style>

src/views/index/main.js

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

src/views/index/router.js

@@ -1,16 +0,0 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-
-Vue.use(Router);
-
-export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/index',
-      name: 'index',
-      component: () => import('@/views/index/views/index.vue'),
-    },
-  ],
-});

src/views/index/store/store.js

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

src/views/index/views/index.vue

@@ -1,513 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="top">
-        <div class="w_1200">
-          <el-col :span="17" class="topLeft">
-            <el-image style="width: 440px; height: 70px" :src="urllogo"></el-image>
-            <el-image style="width: 70px; height: 70px;margin:0 0 0 30px;" :src="urlerweima"></el-image>
-          </el-col>
-          <el-col :span="7" class="topRight">
-            <el-col :span="8">
-              <el-link :underline="false">
-                <i class="el-icon-user"></i>
-                <p>学生登录</p>
-              </el-link>
-            </el-col>
-            <el-col :span="8">
-              <el-link :underline="false">
-                <i class="el-icon-user"></i>
-                <p>单位登录/注册</p>
-              </el-link>
-            </el-col>
-            <el-col :span="8">
-              <el-link :underline="false">
-                <i class="el-icon-user"></i>
-                <p>企业登录</p>
-              </el-link>
-            </el-col>
-          </el-col>
-        </div>
-      </el-col>
-      <el-col :span="24">
-        <div class="w_1200">
-          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#333">
-            <el-submenu index="1">
-              <template slot="title">
-                新闻公告
-              </template>
-              <el-menu-item index="1-1">通知公告</el-menu-item>
-              <el-menu-item index="1-2">就业快讯</el-menu-item>
-            </el-submenu>
-            <el-submenu index="2">
-              <template slot="title">
-                学生导航
-              </template>
-              <el-menu-item index="2-1">毕业生签约流程</el-menu-item>
-              <el-menu-item index="2-2">三方协议违约说明</el-menu-item>
-            </el-submenu>
-            <el-submenu index="3">
-              <template slot="title">
-                学子风采
-              </template>
-              <el-menu-item index="3-1">学子风采</el-menu-item>
-            </el-submenu>
-            <el-submenu index="4">
-              <template slot="title">
-                企业服务
-              </template>
-              <el-menu-item index="4-1">院系公告</el-menu-item>
-              <el-menu-item index="4-2">生源信息</el-menu-item>
-              <el-menu-item index="4-3">入校招聘流程</el-menu-item>
-              <el-menu-item index="4-4">宣讲会预约</el-menu-item>
-              <el-menu-item index="4-5">双选会预约</el-menu-item>
-              <el-menu-item index="4-6">校园地图</el-menu-item>
-            </el-submenu>
-            <el-submenu index="5">
-              <template slot="title">
-                就业服务
-              </template>
-              <el-menu-item index="5-1">求职之路</el-menu-item>
-              <el-menu-item index="5-2">国内求学</el-menu-item>
-              <el-menu-item index="5-3">出国留学</el-menu-item>
-              <el-menu-item index="5-4">创新创业</el-menu-item>
-              <el-menu-item index="5-5">留言咨询</el-menu-item>
-              <el-menu-item index="5-6">预约指导</el-menu-item>
-            </el-submenu>
-            <el-menu-item index="6">联系我们</el-menu-item>
-          </el-menu>
-        </div>
-      </el-col>
-      <el-col :span="24">
-        <div class="w_1200">
-          <div class="block">
-            <el-carousel :autoplay="true">
-              <el-carousel-item v-for="(item, index) in imgList" :key="index">
-                <img :src="item.url" class="imgList" />
-              </el-carousel-item>
-            </el-carousel>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="24" class="main">
-        <div class="w_1200">
-          <el-col :span="6" class="mainLeft">
-            <el-calendar v-model="value"> </el-calendar>
-          </el-col>
-          <el-col :span="18" class="mainRight">
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-              <el-tab-pane label="宣讲会" name="first">
-                <el-row>
-                  <el-col class="job" :span="12" v-for="(item, index) in talk" :key="index">
-                    <el-col :span="4" class="date">
-                      <span>
-                        {{ item.date }}
-                      </span>
-                    </el-col>
-                    <el-col :span="17" class="text">
-                      <el-col :span="24" class="title overText">{{ item.title }}</el-col>
-                      <el-col :span="24" class="textInfo overText">主办方：{{ item.organizer }}</el-col>
-                      <el-col :span="24" class="textInfo overText">地址：{{ item.address }}</el-col>
-                      <el-col :span="24" class="textInfo overText">时间：{{ item.time }}</el-col>
-                    </el-col>
-                    <el-col :span="3" class="num"> <i class="el-icon-view"></i>{{ item.num }} </el-col>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-              <el-tab-pane label="双选会" name="second">
-                <el-row>
-                  <el-col class="job" :span="12" v-for="(item, index) in fair" :key="index">
-                    <el-col :span="4" class="date">
-                      <span style="background:#F78D37;">
-                        {{ item.date }}
-                      </span>
-                    </el-col>
-                    <el-col :span="17" class="text">
-                      <el-col :span="24" class="title overText">{{ item.title }}</el-col>
-                      <el-col :span="24" class="textInfo overText">主办方：{{ item.organizer }}</el-col>
-                      <el-col :span="24" class="textInfo overText">地址：{{ item.address }}</el-col>
-                      <el-col :span="24" class="textInfo overText">时间：{{ item.time }}</el-col>
-                    </el-col>
-                    <el-col :span="3" class="num"> <i class="el-icon-view"></i>{{ item.num }} </el-col>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-              <el-tab-pane label="就业活动" name="third">
-                <el-row>
-                  <el-col class="job" :span="12" v-for="(item, index) in huodong" :key="index">
-                    <el-col :span="4" class="date">
-                      <span style="background:#7030B0;">
-                        {{ item.date }}
-                      </span>
-                    </el-col>
-                    <el-col :span="17" class="text">
-                      <el-col :span="24" class="title overText">{{ item.title }}</el-col>
-                      <el-col :span="24" class="textInfo overText">主办方：{{ item.organizer }}</el-col>
-                      <el-col :span="24" class="textInfo overText">地址：{{ item.address }}</el-col>
-                      <el-col :span="24" class="textInfo overText">时间：{{ item.time }}</el-col>
-                    </el-col>
-                    <el-col :span="3" class="num"> <i class="el-icon-view"></i>{{ item.num }} </el-col>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-              <el-tab-pane label="在线招聘" name="fourth">
-                <el-row>
-                  <el-col class="job" :span="12" v-for="(item, index) in info" :key="index">
-                    <el-col :span="4" class="date">
-                      <span style="background:#f6c808;">
-                        {{ item.date }}
-                      </span>
-                    </el-col>
-                    <el-col :span="17" class="text">
-                      <el-col :span="24" class="title overText">{{ item.title }}</el-col>
-                      <el-col :span="24" class="textInfo overText">主办方：{{ item.organizer }}</el-col>
-                      <el-col :span="24" class="textInfo overText">地址：{{ item.address }}</el-col>
-                      <el-col :span="24" class="textInfo overText">时间：{{ item.time }}</el-col>
-                    </el-col>
-                    <el-col :span="3" class="num"> <i class="el-icon-view"></i>{{ item.num }} </el-col>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-              <el-tab-pane label="招聘信息" name="fifth">
-                <el-row>
-                  <el-col class="job" :span="12" v-for="(item, index) in infos" :key="index">
-                    <el-col :span="4" class="new"><span>new</span></el-col>
-                    <el-col :span="20" class="overText">{{ item.title }}</el-col>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-              <el-tab-pane label="国际组织/联合国" name="sixth">
-                <el-row>
-                  <el-col class="job" :span="12" v-for="(item, index) in internal" :key="index">
-                    <el-col :span="24" class="titleEng overText">{{ item.title }}</el-col>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-            </el-tabs>
-            <a href="" class="tabsMore" target="_blank" title="更多">MORE</a>
-          </el-col>
-        </div>
-      </el-col>
-      <el-col :span="24">
-        <div class="w_1200">
-          <h3 style="color: #333;font-size: 16px;font-weight: normal;">
-            专题网站
-          </h3>
-          <el-col :span="24">
-            <el-col class="listImg" :span="4" v-for="(item, index) in listZhuan" :key="index">
-              <el-image style="width: 100%; height: 60px" :src="item.url"></el-image>
-              <p class="imgText overText">{{ item.name }}</p>
-            </el-col>
-          </el-col>
-        </div>
-      </el-col>
-      <el-col :span="24">
-        <div class="w_1200">
-          <h3 style="color: #333;font-size: 16px;font-weight: normal;">
-            友情链接
-          </h3>
-          <el-col :span="24" class="link">
-            <el-link :underline="false" target="_blank">中华人民共和国教育部</el-link>
-            <el-link :underline="false" target="_blank">人力资源和社会保障部</el-link>
-            <el-link :underline="false" target="_blank">深圳市人力资源和社会保障局</el-link>
-            <el-link :underline="false" target="_blank">广东省人力资源和社会保障厅</el-link>
-            <el-link :underline="false" target="_blank">广州市人事网</el-link>
-            <el-link :underline="false" target="_blank">中国留学网</el-link>
-            <el-link :underline="false" target="_blank">创业教育网</el-link>
-            <el-link :underline="false" target="_blank">深圳人才网</el-link>
-            <el-link :underline="false" target="_blank">中华英才网</el-link>
-            <el-link :underline="false" target="_blank">前程无忧</el-link>
-          </el-col>
-        </div>
-      </el-col>
-      <el-col :span="24" class="down">
-        <el-col :span="24" class="downBei">
-          <div class="w_1200">
-            <el-col :span="24" class="downText">
-              <el-col :span="6" style="padding:50px 0;"><el-image style="width: 290px; height: 70px" :src="downLogo"></el-image></el-col>
-              <el-col :span="12" class="address">
-                <p class="overText">办公地址：广东省深圳市南山区学苑大道1088号南方科技大学</p>
-                <p class="overText">就业邮箱：jobs@sustech.edu.cn</p>
-                <p class="overText">开放时间（节假日除外）：</p>
-                <p class="overText">上午：8:30—12:00</p>
-                <p class="overText">下午：14:00—17:30</p>
-              </el-col>
-              <el-col :span="6" style="text-align:center;padding:10px 0;"><el-image style="width: 120px; height: 120px" :src="urlerweima"></el-image></el-col>
-            </el-col>
-            <el-col :span="24" class="downTit">
-              <el-col :span="24"><span>南方科技大学版权所有</span><span>|</span><span>域名备案信息：粤ICP备14051456号</span></el-col>
-              <el-col :span="24">
-                <span class="footer-label">可信网站验证</span>
-                <span class="footer-label">安全联盟</span>
-                <span class="footer-label">可信网站验证</span>
-                <span class="footer-label">浏览量：今日851 / 共计583307</span>
-                <span class="footer-label">技术支持：云研科技</span>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-      </el-col>
-    </el-row>
-    <el-backtop target=""><i class="el-icon-upload2"></i></el-backtop>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'index',
-  props: {},
-  components: {},
-  data: () => ({
-    urllogo: require('@/assets/logo.png'),
-    urlerweima: require('@/assets/erweima.png'),
-    downLogo: require('@/assets/downlogo.png'),
-    activeIndex: '1',
-    imgList: [
-      { url: require('@/assets/lun1.jpg') },
-      { url: require('@/assets/lun2.jpg') },
-      { url: require('@/assets/lun3.jpg') },
-      { url: require('@/assets/lun4.jpg') },
-      { url: require('@/assets/lun5.jpg') },
-      { url: require('@/assets/lun6.jpg') },
-    ],
-    value: new Date(),
-    activeName: 'first',
-    listZhuan: [
-      { url: require('@/assets/zhuanti1.jpg'), name: '国际组织实习任职服务平台' },
-      { url: require('@/assets/zhuanti2.jpg'), name: '新职业网' },
-      { url: require('@/assets/zhuanti3.jpg'), name: '学信网' },
-      { url: require('@/assets/zhuanti4.jpg'), name: '中国留学网' },
-      { url: require('@/assets/zhuanti5.jpg'), name: '全国大学生就业一站式服务系统' },
-      { url: require('@/assets/zhuanti6.jpg'), name: '广东省就业指导中心' },
-    ],
-    talk: [
-      { date: '09月03日', title: '宣讲会', organizer: '南方科技大学', address: '力旺广场B座16楼会议室', time: '13:00', num: '1200' },
-      { date: '09月03日', title: '宣讲会', organizer: '南方科技大学', address: '力旺广场B座16楼会议室', time: '13:00', num: '1200' },
-    ],
-    fair: [{ date: '09月03日', title: '双选会', organizer: '南方科技大学', address: '力旺广场B座16楼会议室', time: '13:00', num: '1200' }],
-    huodong: [{ date: '09月03日', title: '就业活动', organizer: '南方科技大学', address: '力旺广场B座16楼会议室', time: '13:00', num: '1200' }],
-    info: [{ date: '09月03日', title: '在线招聘', organizer: '南方科技大学', address: '力旺广场B座16楼会议室', time: '13:00', num: '1200' }],
-    infos: [
-      { title: '2019广东广州市白云区直属机关单位第一次招聘政府雇员公告（42人）' },
-      { title: '2019广东广州市白云区直属机关单位第一次招聘政府雇员公告（42人）' },
-    ],
-    internal: [{ title: 'Intern - Environment Affairs, I (Temporary Job Ope' }, { title: 'Intern - Environment Affairs, I (Temporary Job Ope' }],
-  }),
-  created() {},
-  computed: {},
-  methods: {
-    handleSelect(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.w_1200 {
-  margin: 0 auto;
-  width: 1200px;
-}
-p {
-  margin: 0;
-  padding: 0;
-}
-.overText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.top {
-  background-color: #008bd5;
-  padding: 40px 0;
-}
-.topRight {
-  text-align: center;
-  color: #fff;
-}
-/deep/.topRight .el-link {
-  color: #fff;
-  font-size: 15px;
-}
-/deep/.topRight i {
-  font-size: 24px;
-}
-/deep/.el-menu.el-menu--horizontal {
-  border-bottom: none;
-}
-/deep/.el-submenu__title {
-  padding: 0 59px;
-}
-/deep/.el-menu-item {
-  padding: 0 59px;
-}
-/deep/.el-carousel__container {
-  height: 350px;
-}
-.imgList {
-  width: 100%;
-  height: 100%;
-}
-.main {
-  height: 397px;
-  margin-top: 20px;
-}
-.mainLeft {
-  background: #e5e5e5;
-  height: 397px;
-}
-/deep/.el-calendar {
-  background-color: #e5e5e5;
-}
-/deep/.el-calendar__body {
-  padding: 0;
-}
-/deep/.el-calendar-table .el-calendar-day {
-  height: 49px;
-}
-/deep/.el-button--mini {
-  padding: 7px 9px;
-}
-.mainRight {
-  position: relative;
-  background: url(../../../assets/c_bj4.png) repeat;
-  height: 397px;
-}
-/deep/.el-tabs__item {
-  padding: 0 35px;
-  font-size: 15px;
-}
-/deep/.el-tabs__header {
-  margin: 0;
-}
-.tabsMore {
-  position: absolute;
-  top: 12px;
-  float: right;
-  right: 10px;
-  color: #858585;
-  font-size: 12px;
-  text-decoration: none;
-}
-.job {
-  padding: 10px;
-  border-bottom: 1px dashed #ddd;
-  box-sizing: border-box;
-}
-.job:hover {
-  cursor: pointer;
-}
-.job:hover .text .title {
-  color: #09aaff;
-}
-.job:hover .text .textInfo {
-  color: #09aaff;
-}
-.job:hover .num {
-  color: #09aaff;
-}
-.job .date {
-  text-align: center;
-  padding: 15px 0;
-}
-.job .date span {
-  display: inline-block;
-  width: 55px;
-  height: 55px;
-  text-align: center;
-  border: 1px solid #ccc;
-  background: #0070c0;
-  color: #fff;
-}
-.job .text {
-  color: #333;
-}
-.job .text .title {
-  padding: 5px 0 5px 0;
-  font-size: 16px;
-}
-.job .text .textInfo {
-  font-size: 13px;
-  color: #858585;
-}
-.job .num {
-  text-align: right;
-  font-size: 15px;
-  color: #333;
-}
-.job .new {
-  text-align: center;
-  color: #fff;
-}
-.job .new span {
-  display: inline-block;
-  padding: 0px 5px;
-  background: #ff4400;
-  border-radius: 4px;
-}
-.job .titleEng {
-  padding: 0 20px;
-}
-.listImg {
-  width: 178px;
-  margin: 0 22px 0 0;
-  border: 1px solid #ccc;
-}
-.imgText {
-  font-size: 14px;
-  text-align: center;
-  color: #858585;
-  border-top: 1px solid #ccc;
-}
-.down {
-  height: 326px;
-  position: relative;
-  background: url(../../../assets/downImg.png) center no-repeat;
-  opacity: 0.9;
-  background-size: cover;
-}
-.downBei {
-  content: '';
-  z-index: -1;
-  width: 100%;
-  height: 326px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: #008bd5;
-  opacity: 0.8;
-}
-.link {
-  margin: 0 0 15px 0;
-}
-.link .el-link {
-  margin: 0 15px 15px 0;
-  padding: 0 18px 0 0;
-}
-.downText {
-  padding: 45px 0;
-  border-bottom: 1px solid #fff;
-}
-.downTit {
-  text-align: center;
-}
-.downTit .el-col {
-  margin: 0 0 5px 0;
-}
-.downTit span {
-  color: #f6f6f6;
-  font-size: 14px;
-}
-.address {
-  border-right: 1px solid #fff;
-  border-left: 1px solid #fff;
-}
-.address p {
-  padding: 8px 30px;
-  color: #f6f6f6;
-  font-size: 14px;
-}
-</style>