列表更新

package-lock.json

@@ -1854,7 +1854,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz",
       "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -2275,6 +2274,34 @@
       "integrity": "sha1-33DjArRx10c0iazyapPWO1P4dN4=",
       "dev": true
     },
+    "bmaplib.curveline": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
+      "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q=="
+    },
+    "bmaplib.heatmap": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
+      "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q=="
+    },
+    "bmaplib.lushu": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz",
+      "integrity": "sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w=="
+    },
+    "bmaplib.markerclusterer": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
+      "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
+      "requires": {
+        "bmaplib.texticonoverlay": "^1.0.2"
+      }
+    },
+    "bmaplib.texticonoverlay": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
+      "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg=="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz",
@@ -5691,6 +5718,14 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "ginkgo-map": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ginkgo-map/-/ginkgo-map-1.0.2.tgz",
+      "integrity": "sha512-j+Iq5lmUEUI4aOTg/0fQJ9M1pOnbozHeLoc9QTfHLsj2pyRhzsAucEJn/TGZFrj65D/hBX7iip9vsFyC2gDhFg==",
+      "requires": {
+        "vue": "^2.5.11"
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz",
@@ -6912,6 +6947,14 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "loader-fs-cache": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.2.tgz",
@@ -7121,6 +7164,25 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -7138,6 +7200,11 @@
       "integrity": "sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz",
@@ -9999,8 +10066,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -10598,6 +10664,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz",
@@ -10929,6 +11000,18 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-baidu-map": {
+      "version": "0.21.22",
+      "resolved": "https://registry.npmjs.org/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz",
+      "integrity": "sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==",
+      "requires": {
+        "bmaplib.curveline": "^1.0.0",
+        "bmaplib.heatmap": "^1.0.4",
+        "bmaplib.lushu": "^1.0.7",
+        "bmaplib.markerclusterer": "^1.0.13",
+        "markdown-it": "^8.4.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz",

package.json

@@ -11,9 +11,11 @@
     "axios": "^0.19.0",
     "core-js": "^3.3.2",
     "element-ui": "^2.12.0",
+    "ginkgo-map": "^1.0.2",
     "lodash": "^4.17.15",
     "naf-core": "^0.1.2",
     "vue": "^2.6.10",
+    "vue-baidu-map": "^0.21.22",
     "vue-meta": "^2.3.1",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"

src/components/list.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="list">
+    <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="main">
+        <div class="w_1200">
+          <el-col :span="5" class="mainNav">
+            <listLeft></listLeft>
+          </el-col>
+          <el-col :span="18" class="mainList">
+            <listRight :rightList="rightList"></listRight>
+          </el-col>
+        </div>
+      </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 listLeft from '@/layout/list/listLeft.vue';
+import listRight from '@/layout/list/listRight.vue';
+
+import foot from '@/layout/index/foot.vue';
+export default {
+  name: 'list',
+  props: {
+    info: null, //头部信息
+    rightList: null, //列表信息
+  },
+  components: {
+    top, //头部
+    menuInfo, //导航
+    listLeft, //二级左侧导航
+    listRight, //二级右侧列表
+    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;
+}
+.main {
+  height: 1060px;
+  margin: 50px 0 0 0;
+  overflow: hidden;
+}
+.mainList {
+  width: 746px;
+  margin: 0 0 0 20px;
+}
+.foot {
+  height: 133px;
+  background-color: #0457c7;
+  overflow: hidden;
+}
+</style>

src/layout/list/listLeft.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="listLeft">
+    <el-row>
+      <el-col :span="24" class="listLeft">
+        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+          <el-menu-item index="1">
+            <span slot="title">就业动态</span>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <span slot="title">学校动态</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <span slot="title">文化动态</span>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <span slot="title">招生动态</span>
+          </el-menu-item>
+          <el-menu-item index="5">
+            <span slot="title">考试动态</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'listLeft',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-menu {
+  border-right: none;
+}
+/deep/.el-menu-item {
+  color: #415285;
+  font-size: 24px;
+  height: 60px;
+  line-height: 60px;
+  border-right: 2px solid transparent;
+}
+/deep/.el-menu-item.is-active {
+  color: #415285;
+  background: #b9c1d7;
+  border-left: 5px solid #0457c7;
+}
+</style>

src/layout/list/listRight.vue

@@ -0,0 +1,149 @@
+<template>
+  <div id="listRight">
+    <el-row>
+      <el-col :span="24" class="listRight">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="12" class="top">
+            <p><i class="el-icon-document"></i>{{ title }}</p>
+          </el-col>
+          <el-col :span="12" class="bread">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
+              <el-breadcrumb-item>信息列表</el-breadcrumb-item>
+            </el-breadcrumb>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <el-col :span="24" class="rightList" v-for="(item, index) in rightList" :key="index">
+            <el-col :span="24">
+              <el-col :span="20" class="title">
+                <p class="textOver"><span class="dian"></span>{{ item.title }}</p>
+              </el-col>
+              <el-col :span="4" class="date">{{ item.date }}</el-col>
+            </el-col>
+            <el-col :span="20" class="content">
+              <p>{{ item.content }}</p>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage4"
+          :page-size="8"
+          layout="total, prev, pager, next, jumper"
+          :total="1"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'listRight',
+  props: {
+    rightList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '就业动态',
+    currentPage4: 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;
+}
+.listRight {
+  height: 930px;
+  border-left: 1px solid #0457c7;
+}
+.topInfo {
+  height: 47px;
+  line-height: 47px;
+}
+.top {
+  padding: 0 10px;
+}
+.top p {
+  font-size: 24px;
+  color: #0874ee;
+}
+.bread {
+  padding: 16px 0px 16px 220px;
+}
+.dian {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background-color: #4f4f4f;
+  border-radius: 90px;
+  margin: 5px 8px;
+}
+.list {
+  padding: 0 10px;
+  height: 883px;
+  overflow: hidden;
+}
+.rightList {
+  height: 110px;
+  border-bottom: 1px dashed #ccc;
+}
+.rightList .title {
+  padding: 10px 0;
+}
+.rightList .title p {
+  font-size: 16px;
+  color: #4f4f4f;
+}
+.rightList .date {
+  font-size: 14px;
+  color: #323131;
+  text-align: right;
+  padding: 10px 0;
+}
+.content {
+  padding: 0 20px;
+}
+.content p {
+  font-size: 14px;
+  color: #323131;
+  line-height: 25px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.rightList:hover .title p {
+  color: #0874ee;
+  cursor: pointer;
+}
+.page {
+  padding: 51px 0px;
+  text-align: center;
+}
+</style>

src/router/index.js

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

src/views/list.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="list">
+    <list-detail :info="info" :rightList="rightList"></list-detail>
+  </div>
+</template>
+
+<script>
+import listDetail from '@/components/list.vue';
+export default {
+  name: 'list',
+  props: {},
+  components: {
+    listDetail,
+  },
+  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',
+    },
+    rightList: [
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+      {
+        title: '我省成功举办“创业有我•就在吉林',
+        date: '2019-12-03',
+        content: '我省成功举办“创业有我•就在吉林我省成功举办“创业有我•就在吉林',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>