详情

src/components/detail.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="detail">
+    <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">
+            <detailInfo :detailInfo="detailInfo"></detailInfo>
+          </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 detailInfo from '@/layout/detail/detail.vue';
+
+import foot from '@/layout/index/foot.vue';
+export default {
+  name: 'detail',
+  props: {
+    info: null, //头部信息
+    detailInfo: null, //详情信息
+  },
+  components: {
+    top, //头部
+    menuInfo, //导航
+    listLeft, //二级左侧导航
+    foot, //底部信息
+    detailInfo, //詳情
+  },
+  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 {
+  min-height: 1060px;
+  margin: 50px 0 0 0;
+  overflow: hiddenpx;
+}
+.mainList {
+  float: right;
+  width: 930px;
+}
+.foot {
+  height: 133px;
+  background-color: #0457c7;
+  overflow: hidden;
+}
+</style>

src/layout/detail/detail.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="detail">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="8" class="top">
+            <p>{{ title }}</p>
+          </el-col>
+          <el-col :span="16" class="bread">
+            <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-item>信息详细</el-breadcrumb-item>
+            </el-breadcrumb>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="image">
+            <el-image style="width:769px;height:443px;" :src="detailInfo.url"></el-image>
+          </el-col>
+          <el-col :span="24" class="title">
+            <p>{{ detailInfo.title }}</p>
+          </el-col>
+          <el-col :span="24" class="date"> 发布时间：{{ detailInfo.date }} </el-col>
+          <el-col :span="24" class="content">
+            <p>{{ detailInfo.content }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detail',
+  props: {
+    detailInfo: null,
+  },
+  components: {},
+  data: () => ({
+    title: '就业动态',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.detail {
+  border-left: 1px solid #0874ee;
+  min-height: 1020px;
+  padding: 0 15px;
+}
+.topInfo {
+  height: 47px;
+  line-height: 47px;
+  border-bottom: 2px solid #0874ee;
+}
+.top {
+  padding: 0 10px;
+}
+.top p {
+  font-size: 24px;
+  color: #0874ee;
+}
+.bread {
+  padding: 16px 0px 16px 220px;
+}
+.info {
+  text-align: center;
+}
+.info .image {
+  margin: 20px 0;
+}
+.info .title {
+  padding: 10px 0;
+}
+.info .title p {
+  font-size: 24px;
+  color: #333;
+}
+.info .date {
+  font-size: 14px;
+  color: #666666;
+  padding: 20px 0;
+}
+.info .content p {
+  font-size: 14px;
+  color: #5b5b5b;
+  text-indent: 2rem;
+  text-align: left;
+  line-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'),
+    },
   ],
 });

src/views/list.vue

@@ -30,52 +30,6 @@ export default {
         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() {},