更新就业派遣

src/App.vue

@@ -8,6 +8,6 @@
 body {
   margin: 0;
   padding: 0;
-  overflow-y: auto;
+  overflow-y: auto !important;
 }
 </style>

src/components/index.vue

@@ -33,7 +33,7 @@
               <law :lawList="lawList"></law>
             </el-col>
             <el-col :span="4" class="daohang">
-              <daohang></daohang>
+              <daohang :list="list" v-on="$listeners"></daohang>
             </el-col>
           </el-col>
           <el-col :span="24" class="main_3">
@@ -104,6 +104,7 @@ export default {
     recruitList: null, //最新招聘
     zixunList: null, //就业咨询
     nativeList: null, //网站导航
+    list: null,
   },
   components: {
     top, //头部

src/components/quietDetail.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="quietDetail">
+    <el-row>
+      <el-col :sapn="24" class="top">
+        <div class="w_1200">
+          <top :info="info"></top>
+        </div>
+      </el-col>
+      <el-col :sapn="24" class="banner">
+        <banner :info="info"></banner>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <menuInfo :menuList="menuList" :backColor="backColor"></menuInfo>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <jiuyeInfo :jiuyelist="jiuyelist"></jiuyeInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <down :info="info" :backColor="backColor"></down>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import banner from '@/layout/index/banner.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import jiuyeInfo from '@/layout/quiet/jiuyeInfo.vue';
+import down from '@/layout/index/down.vue';
+export default {
+  name: 'quietDetail',
+  props: {
+    info: null, //头部信息
+    backColor: null, //导航菜单背景颜色
+    menuList: null, //菜单列表
+    jiuyelist: null, //就业派遣
+  },
+  components: {
+    top, //头部
+    banner, //logo
+    menuInfo, //导航
+    jiuyeInfo, //
+    down, //底部信息
+  },
+  data: () => ({}),
+  created() {},
+  computed: {
+    title() {
+      return this.$route.query.title;
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1000px;
+  height: 450px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: #f5f5f54f;
+}
+.banner {
+  height: 300px;
+  overflow: hidden;
+}
+.menu {
+  height: 50px;
+  overflow: hidden;
+}
+.main {
+  height: 1060px;
+  margin: 50px 0 0 0;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+.foot {
+  height: 133px;
+  background-color: #0457c7;
+  overflow: hidden;
+}
+</style>

src/layout/index/daohang.vue

@@ -13,7 +13,7 @@
         </el-col>
         <el-col :span="24" class="btn">
           <el-col :span="8" class="list" v-for="(item, index) in list" :key="index">
-            <el-link :underline="false" :href="item.url" target="_blank">
+            <el-link :underline="false" target="_blank" @click="clickUrl(item.title)">
               <el-image style="width:55px;height:55px;border-radius: 10px;" :src="item.pic"></el-image>
               <P>{{ item.title }}</P>
             </el-link>
@@ -27,50 +27,20 @@
 <script>
 export default {
   name: 'daohang',
-  props: {},
+  props: {
+    list: null,
+  },
   components: {},
   data: () => ({
     title: '快速导航',
-    list: [
-      {
-        pic: require('@/assets/kuaisu1.jpg'),
-        title: '就业派遣',
-        url: 'http://www.jilinjobs.cn/JobSending.htm',
-      },
-      {
-        pic: require('@/assets/kuaisu2.jpg'),
-        title: '档案管理',
-        url: 'http://www.jilinjobs.cn/FileManagement.htm',
-      },
-      {
-        pic: require('@/assets/kuaisu3.jpg'),
-        title: '流动党员',
-        url: 'http://www.jilinjobs.cn/CaucusRelation.htm',
-      },
-      {
-        pic: require('@/assets/kuaisu4.jpg'),
-        title: '户籍管理',
-        url: 'http://www.jilinjobs.cn/RegisterManagement.htm',
-      },
-      {
-        pic: require('@/assets/kuaisu5.jpg'),
-        title: '学历认证',
-        url: 'http://www.jilinjobs.cn/EducationCertify.htm',
-      },
-      {
-        pic: require('@/assets/kuaisu6.jpg'),
-        title: '常见问题',
-        url:
-          'https://mp.weixin.qq.com/s?__biz=MzAxMzg2ODE0NA==&mid=100000727&idx=1&' +
-          'sn=c2a38aca7482a930ceeff01779827faa&chksm=' +
-          '1b9d4ec82ceac7dee8cf6f89701e9af1fdedeed6c7e5ecba20356b1584d6ee76b069649f5cd9&' +
-          'mpshare=1&scene=23&srcid=0917J2IHeM4fxs3dHnJBhis4#rd',
-      },
-    ],
   }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    clickUrl(title) {
+      this.$emit('onsave', { title });
+    },
+  },
 };
 </script>
 

src/layout/quiet/jiuyeInfo.vue

@@ -0,0 +1,111 @@
+<template>
+  <div id="jiuyeInfo">
+    <el-row>
+      <span v-if="title === '就业派遣'">
+        <el-col :span="24">
+          <el-col :span="24" class="top">
+            <span class="topTitle">就业派遣</span>
+          </el-col>
+          <el-col :span="24">
+            <el-collapse v-model="activeName" accordion>
+              <el-collapse-item :name="index" v-for="(item, index) in jiuyelist" :key="index">
+                <template slot="title">
+                  <span class="tubiao"><i class="el-icon-video-play"></i></span>
+                  <span class="title">{{ item.title }}</span>
+                </template>
+                <el-col :span="24" class="content">
+                  <p>{{ item.content }}</p>
+                </el-col>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-col>
+      </span>
+      <span v-else-if="title === '档案管理'">
+        <el-col :span="24">
+          档案管理
+        </el-col>
+      </span>
+      <span v-else-if="title === '流动党员'">
+        <el-col :span="24">
+          流动党员
+        </el-col>
+      </span>
+      <span v-else-if="title === '户籍管理'">
+        <el-col :span="24">
+          户籍管理
+        </el-col>
+      </span>
+      <span v-else>
+        <el-col :span="24">
+          学历认证
+        </el-col>
+      </span>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'jiuyeInfo',
+  props: {
+    jiuyelist: null,
+  },
+  components: {},
+  data: () => ({
+    activeName: 0,
+  }),
+  created() {},
+  computed: {
+    title() {
+      return this.$route.query.title;
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.top {
+  background-color: #ccc;
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 34px 0;
+}
+.topTitle {
+  padding: 0 0 0 30px;
+  display: inline-block;
+  width: 100px;
+  height: 28px;
+  line-height: 28px;
+  margin-left: 30px;
+  padding-left: 14px;
+  background-color: #0099cc;
+  border-radius: 10px;
+}
+.tubiao {
+  padding: 0 0 0 10px;
+}
+.title {
+  padding: 0 0 0 20px;
+  font-size: 15px;
+}
+/deep/.el-collapse-item__header {
+  color: #fff;
+  background-color: #0099cc;
+}
+/deep/.is-active .el-collapse-item__header {
+  background-color: green;
+}
+.content p {
+  font-size: 14px;
+  color: #000;
+  font-family: 宋体;
+  line-height: 32px;
+  text-indent: 4em;
+}
+</style>

src/router/index.js

@@ -82,5 +82,10 @@ export default new Router({
       name: 'corp',
       component: () => import('../views/recruit/corp.vue'),
     },
+    {
+      path: '/quiet',
+      name: 'quiet',
+      component: () => import('../views/quiet.vue'),
+    },
   ],
 });

src/views/index.vue

@@ -15,6 +15,8 @@
       :zixunList="zixunList"
       :nativeList="nativeList"
       :backColor="backColor"
+      :list="list"
+      @onsave="onsaveClick"
     ></index-detail>
   </div>
 </template>
@@ -60,6 +62,42 @@ export default {
     jobinfoList: [], //招聘信息
     nativeList: urlList, //网站导航
     memberList: [], //党员之家
+    list: [
+      {
+        pic: require('@/assets/kuaisu1.jpg'),
+        title: '就业派遣',
+        // url: 'http://www.jilinjobs.cn/JobSending.htm',
+      },
+      {
+        pic: require('@/assets/kuaisu2.jpg'),
+        title: '档案管理',
+        // url: 'http://www.jilinjobs.cn/FileManagement.htm',
+      },
+      {
+        pic: require('@/assets/kuaisu3.jpg'),
+        title: '流动党员',
+        // url: 'http://www.jilinjobs.cn/CaucusRelation.htm',
+      },
+      {
+        pic: require('@/assets/kuaisu4.jpg'),
+        title: '户籍管理',
+        // url: 'http://www.jilinjobs.cn/RegisterManagement.htm',
+      },
+      {
+        pic: require('@/assets/kuaisu5.jpg'),
+        title: '学历认证',
+        // url: 'http://www.jilinjobs.cn/EducationCertify.htm',
+      },
+      {
+        pic: require('@/assets/kuaisu6.jpg'),
+        title: '常见问题',
+        url:
+          'https://mp.weixin.qq.com/s?__biz=MzAxMzg2ODE0NA==&mid=100000727&idx=1&' +
+          'sn=c2a38aca7482a930ceeff01779827faa&chksm=' +
+          '1b9d4ec82ceac7dee8cf6f89701e9af1fdedeed6c7e5ecba20356b1584d6ee76b069649f5cd9&' +
+          'mpshare=1&scene=23&srcid=0917J2IHeM4fxs3dHnJBhis4#rd',
+      },
+    ],
     backColor: '#0457c7',
   }),
   async created() {
@@ -260,6 +298,9 @@ export default {
         });
       }
     },
+    async onsaveClick({ title }) {
+      this.$router.push({ path: '/quiet', query: { title: title } });
+    },
   },
 };
 </script>