詳情更新

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.13.0",
     "eslint": "^6.7.2",
     "naf-core": "^0.1.2",
+    "vshare": "^2.0.0",
     "vue": "^2.6.10",
     "vue-meta": "^2.3.1",
     "vue-router": "^3.1.3",

src/components/detail.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :sapn="24" class="top">
+        <top :info="info"></top>
+      </el-col>
+      <el-col :sapn="24" class="banner">
+        <banner :info="info"></banner>
+      </el-col>
+      <el-col :sapn="24" class="menu">
+        <menuInfo></menuInfo>
+      </el-col>
+      <el-col :sapn="24" class="main">
+        <div class="w_1270">
+          <contInfo :contInfos="contInfos"></contInfo>
+        </div>
+      </el-col>
+      <el-col :sapn="24" class="down">
+        <down :info="info"></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 contInfo from '@/layout/detail/contInfo.vue';
+import down from '@/layout/index/down.vue';
+export default {
+  name: 'detail',
+  props: {
+    info: null, //站点信息
+    contInfos: null, //信息详细
+  },
+  components: {
+    top, //头部
+    banner, //banner
+    menuInfo, //菜单
+    contInfo, //内容
+    down, //底部
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1270 {
+  width: 1270px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+}
+.banner {
+  height: 300px;
+  overflow: hidden;
+}
+.menu {
+  height: 50px;
+  overflow: hidden;
+  border-bottom: 1px solid #ccc;
+}
+.main {
+  min-height: 900px;
+  background: #f6f6f6;
+}
+.down {
+  height: 135px;
+  overflow: hidden;
+}
+</style>

src/layout/detail/contInfo.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="contInfo">
+    <el-row>
+      <el-col :span="24" class="contInfo">
+        <el-col :span="24" class="top">
+          <el-col :span="20" class="topTitle">
+            <span>{{ title }}</span>
+          </el-col>
+          <el-col :span="4" class="topBread">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item>当前位置:</el-breadcrumb-item>
+              <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="info">
+          <el-col :span="24" class="title">
+            <span>{{ contInfos.title }}</span>
+          </el-col>
+          <el-col :span="24" class="fenTime">
+            <el-col :span="12" class="fenxiang">
+              <share></share>
+            </el-col>
+            <el-col :span="12" class="date"> 发布时间：{{ contInfos.date }} </el-col>
+          </el-col>
+          <el-col :span="24" class="images">
+            <el-image style="width:800px;height:370px;" :src="contInfos.url"></el-image>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p>{{ contInfos.content }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import share from '@/layout/share.vue';
+export default {
+  name: 'contInfo',
+  props: {
+    contInfos: null,
+  },
+  components: {
+    share,
+  },
+  data: () => ({
+    title: '就业动态',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.contInfo {
+  min-height: 820px;
+  margin: 40px 0 40px 0;
+  border: 1px solid #e6e6e6;
+  background-color: #ffffff;
+}
+.top {
+  height: 40px;
+  background-color: #f5f5f8;
+  margin: 2px 2px 0 2px;
+  border-bottom: 1px solid #ccc;
+  width: 1264px;
+}
+.top .topTitle span {
+  display: inline-block;
+  width: 100px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  font-size: 18px;
+  border-bottom: 2px solid #176ebb;
+}
+.top .topBread {
+  padding: 12px 0;
+}
+.info .title {
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+}
+.info .title span {
+  font-size: 18px;
+  color: #444444;
+}
+.info .fenTime {
+  height: 38px;
+  line-height: 38px;
+  background-color: #eeeeee;
+  margin: 0 0 15px 0;
+}
+.info .fenTime .fenxiang {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 20px;
+}
+.date {
+  text-align: right;
+  padding: 0 20px;
+}
+.images {
+  text-align: center;
+}
+.content {
+  padding: 10px 30px;
+}
+.content p {
+  font-size: 16px;
+  text-indent: 2rem;
+  color: #333;
+  line-height: 35px;
+}
+</style>

src/layout/share.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="share">
+    <el-row>
+      <el-col :span="24" class="vshare"><vshare :vshareConfig="config"></vshare></el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import vshare from 'vshare';
+export default {
+  name: 'share',
+  props: {},
+  components: {
+    vshare,
+  },
+  data: () => ({
+    config: {
+      common: {
+        bdUrl: window.location.href.replace('/www', '/mobile'),
+      },
+    },
+  }),
+  created() {
+    let scheme = window.location.protocol;
+    // console.log(scheme);
+    let host = window.location.host;
+    // console.log(host);
+    let uri = window.location.pathname;
+    let type;
+    if (uri.includes('jobfair')) type = 'jobfair.html#/';
+    else if (uri.includes('talk')) type = 'talk.html#/';
+    else if (uri.includes('jobinfo')) type = 'jobinfo.html#/';
+    else if (uri.includes('jobs')) type = 'jobs.html#/';
+    else type = 'news.html#/';
+    // console.log(uri);
+    let query = window.location.search;
+    // console.log(query);
+    let url = `${scheme}//${host}/mobile/${type}${query}`;
+    // console.log(url);
+    this.$set(this.config.common, `bdUrl`, url);
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.vshare {
+  height: 30px;
+  line-height: 30px;
+}
+.bdshare-button-style0-24 {
+  height: 30px;
+}
+</style>

src/router/index.js

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