列表更新

src/components/list.vue

@@ -12,7 +12,17 @@
       </el-col>
       <el-col :sapn="24" class="main">
         <div class="w_1270">
-          主体
+          <el-col :span="5" class="mainLeft">
+            <el-col :span="24" class="listMenu">
+              <listMenu></listMenu>
+            </el-col>
+            <el-col :span="24" class="listLogin">
+              <kuaisu></kuaisu>
+            </el-col>
+          </el-col>
+          <el-col :span="19" class="mainRight">
+            <mainRight :rightList="rightList"></mainRight>
+          </el-col>
         </div>
       </el-col>
       <el-col :sapn="24" class="down">
@@ -26,16 +36,23 @@
 import top from '@/layout/index/top.vue';
 import banner from '@/layout/index/banner.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
+import listMenu from '@/layout/list/listMenu.vue';
+import kuaisu from '@/layout/index/kuaisu.vue';
+import mainRight from '@/layout/list/mainRight.vue';
 import down from '@/layout/index/down.vue';
 export default {
   name: 'list',
   props: {
     info: null, //站点信息
+    rightList: null, //右侧列表
   },
   components: {
     top, //头部
     banner, //banner
     menuInfo, //菜单
+    listMenu, //列表左侧导航
+    kuaisu, //快速通道
+    mainRight, //列表页右侧列表
     down, //底部
   },
   data: () => ({}),
@@ -64,9 +81,28 @@ export default {
   border-bottom: 1px solid #ccc;
 }
 .main {
-  min-height: 1000px;
+  min-height: 680px;
   background: #f6f6f6;
 }
+.mainLeft {
+  width: 246px;
+  min-height: 600px;
+  margin: 40px 18px 0 0;
+  border: 1px solid #e6e6e6;
+}
+.listMenu {
+  min-height: 56px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #ccc;
+  margin: 0 0 10px 0;
+}
+.listLogin {
+  min-height: 300px;
+}
+.mainRight {
+  min-height: 600px;
+  margin: 40px 0 0 0;
+}
 .down {
   height: 135px;
   overflow: hidden;

src/layout/list/listMenu.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="listMenu">
+    <el-row>
+      <el-col :span="24" class="menu">
+        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+          <el-menu-item index="1">
+            <i class="el-icon-menu"></i>
+            <span slot="title">就业动态</span>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <i class="el-icon-menu"></i>
+            <span slot="title">通知公告</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <i class="el-icon-menu"></i>
+            <span slot="title">下载专区</span>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <i class="el-icon-menu"></i>
+            <span slot="title">户籍管理</span>
+          </el-menu-item>
+          <el-menu-item index="5">
+            <i class="el-icon-menu"></i>
+            <span slot="title">档案服务</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'listMenu',
+  props: {},
+  components: {},
+  data: () => ({
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-icon-document {
+  font-size: 20px;
+}
+/deep/.el-menu-item {
+  font-size: 18px;
+}
+</style>

src/layout/list/mainRight.vue

@@ -0,0 +1,116 @@
+<template>
+  <div id="mainRight">
+    <el-row style="border:1px solid #e6e6e6;">
+      <el-col :span="24" class="top">
+        <span>{{ title }}</span>
+      </el-col>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="list" v-for="(item, index) in rightList" :key="index">
+          <el-col :span="21" class="title">
+            <p class="textOver"><i class="el-icon-caret-right icon"></i>{{ item.title }}</p>
+          </el-col>
+          <el-col :span="3" class="date">
+            {{ item.date }}
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="page">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="100"
+            layout="total, prev, pager, next, jumper"
+            :total="1"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainRight',
+  props: {
+    rightList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '就业动态',
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.top {
+  height: 40px;
+  line-height: 40px;
+}
+.top span {
+  display: inline-block;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 18px;
+  color: #fff;
+  background-color: #176ebb;
+}
+.info {
+  min-height: 560px;
+  background-color: #fff;
+  padding: 10px;
+}
+.list {
+  padding: 8px 10px;
+}
+.list .title {
+  font-size: 16px;
+  color: #333;
+}
+.list .title .icon {
+  padding: 0 5px 0 0;
+}
+.list .date {
+  font-size: 16px;
+  color: #333;
+  text-align: center;
+}
+.list:hover {
+  cursor: pointer;
+}
+.list:hover .title {
+  color: #a32324;
+}
+.list:hover .date {
+  color: #a32324;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+  height: 100px;
+  text-align: center;
+  padding: 35px 0;
+}
+</style>

src/views/list.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="list">
-    <list-detail :info="info"></list-detail>
+    <list-detail :info="info" :rightList="rightList"></list-detail>
   </div>
 </template>
 
@@ -20,6 +20,16 @@ export default {
       logo: require('@/assets/logo.png'),
       copyright: '吉ICP备09006292号-1 Copyright 2019 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved',
     },
+    rightList: [
+      {
+        title: '省教育厅成功举办吉林省高校服务地方经济发展“双对接”专项行动推进会暨 “生根吉林 ”应用型人才招聘会',
+        date: '2019-12-11',
+      },
+      {
+        title: '十二条数据显示',
+        date: '2019-12-11',
+      },
+    ],
   }),
   created() {},
   computed: {},