更新

src/layout/detail/content.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="mainRight">
+    <el-row>
+      <el-col :span="24" class="mainRight">
+        <el-col :span="24" class="top">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
+            <el-breadcrumb-item>导航一</el-breadcrumb-item>
+            <el-breadcrumb-item>数据详情</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+        <el-col :span="24" class="fenxiang">
+          分享
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24">
+            <el-col :span="24" class="title">
+              {{contentList.title}}
+            </el-col>
+            <el-col :span="24" class="time">
+              {{contentList.time}}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="content">
+            {{contentList.content}}
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-backtop target=""><i class="el-icon-upload2"></i></el-backtop>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainRight',
+  props: {
+    contentList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.fenxiang {
+  height: 18px;
+  margin: 10px 0;
+}
+.info .title {
+  text-align: center;
+  font-size: 29px;
+  color: red;
+  padding: 15px 0;
+}
+.info .time {
+  text-align: center;
+  color: #999;
+  padding: 0 0 15px 0;
+}
+.info .content {
+  font-size: 21px;
+  color: #333;
+  text-indent: 2rem;
+  line-height: 40px;
+}
+</style>

src/views/detail/detail.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :topInfo="topInfo"></top>
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <el-col :span="24" class="menu" :style="`background:${backColor}`">
+          <div class="w_1200">
+            <native></native>
+          </div>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="mainInfo">
+            <el-col :span="6" class="mainLeft">
+              <mainLeft :mainLeftList="mainLeftList"></mainLeft>
+            </el-col>
+            <el-col :span="17" class="mainRight">
+              <contentInfo :contentList="contentList"></contentInfo>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="down">
+        <div class="w_1200">
+          <footDown :downList="downList"></footDown>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/list/top.vue';
+import native from '../../layout/index/native.vue';
+import mainLeft from '../../layout/list/mainLeft.vue';
+import contentInfo from '../../layout/detail/content.vue';
+import footDown from '../../layout/index/foot.vue';
+export default {
+  name: 'detial',
+  props: {
+    topInfo: null,
+    mainLeftList: null,
+    contentList:null,
+    downList: null,
+  },
+  components: {
+    top,
+    native,
+    mainLeft,
+    contentInfo,
+    footDown,
+  },
+  data: () => ({
+    backColor: '#850000',
+  }),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  padding: 15px 0;
+  border: 1px solid #ccc;
+}
+.menu {
+  height: 40px;
+}
+.main {
+  min-height: 500px;
+  background-color: #f0f0f0;
+}
+.mainInfo {
+  margin: 20px 0;
+}
+.mainLeft {
+  min-height: 44px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+}
+.mainRight {
+  float: right;
+  width: 880px;
+  background-color: #fff;
+  padding: 20px 30px;
+  min-height: 460px;
+}
+.down {
+  height: 100px;
+  background-color: #333;
+}
+</style>