修改

src/layout/list/noLeft.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="noLeft">
+    <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="search">
+          <el-col :span="8" class="input">
+            <el-input v-model="input" placeholder="请输入文章标题"></el-input>
+          </el-col>
+          <el-col :span="2" class="button">
+            <el-button icon="el-icon-search"></el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="mainRightList" v-for="(item, index) in mainRightList" :key="index"
+                  :type="item.type">
+            <el-col :span="24" class="bigTitle">{{item.title}}</el-col>
+            <span v-if="item.children.length >0">
+              <el-row v-for="child in item.children" :key="child.id">
+                <el-col :span="20" class="title" @click.native="$router.push({ name: 'detail', params:{id:child.id} })">
+                  <p class="textOver">{{ child && child.title }}</p>
+                </el-col>
+                <el-col :span="4" class="time">
+                  {{child && child.publish_time ? child.publish_time : ''}}
+                </el-col>
+              </el-row>
+            </span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'noLeft',
+  props: {
+    mainRightList: null,
+  },
+  components: {},
+  data: () => ({
+    input: '',
+  }),
+  created() { },
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`当前页: ${val}`);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search {
+  padding: 10px 0;
+}
+/deep/.search .input .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  border-radius: 0;
+  border: 2px solid #336699;
+}
+/deep/.search .button .el-button {
+  padding: 7px 20px;
+  border: 2px solid #336699;
+  border-radius: 0;
+  background: #336699;
+  color: #fff;
+}
+.main {
+  min-height: 400px;
+}
+.mainRightList {
+  padding: 10px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.mainRightList .title p {
+  color: #666;
+}
+.mainRightList .title p:hover {
+  color: #336699;
+}
+.mainRightList .time {
+  text-align: right;
+  font-size: 14px;
+  color: #999;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+}
+.bigTitle {
+  font-size: 22px;
+  color: #000;
+  margin: 5px 0;
+}
+</style>

src/views/list/list.vue

@@ -11,13 +11,14 @@
           <native></native>
         </div>
       </el-col>
-      <el-col :span="24" class="main">
+      <el-col :span="24" :class="type ?'main__needLeft':'main'">
         <div class="w_1200">
-          <el-col :span="6" class="mainLeft">
+          <el-col :span="6" class="mainLeft" v-if="type">
             <mainLeft></mainLeft>
           </el-col>
-          <el-col :span="17" class="mainRight">
-            <mainRight :mainRightList="mainRightList" :total="total"></mainRight>
+          <el-col :span="17" :class="type ? 'needLeft__right':'mainRight'">
+            <mainRight :mainRightList="mainRightList" :total="total" v-if="type"></mainRight>
+            <noLeft v-else :mainRightList="mainRightList"></noLeft>
           </el-col>
         </div>
       </el-col>
@@ -33,6 +34,7 @@ import top from '../../layout/index/top.vue';
 import native from '../../layout/index/native.vue';
 import mainLeft from '../../layout/list/mainLeft.vue';
 import mainRight from '../../layout/list/mainRight.vue';
+import noLeft from '../../layout/list/noLeft.vue';
 import footinfo from '../../layout/index/foot.vue';
 export default {
   name: 'list',
@@ -41,6 +43,7 @@ export default {
     topInfo: null,
     mainRightList: null,
     total: null,
+    type: {type: Boolean, default: false}
   },
   components: {
     top,
@@ -48,6 +51,7 @@ export default {
     footinfo,
     mainLeft,
     mainRight,
+    noLeft,
   },
   data: () => ({}),
   created() { },
@@ -68,8 +72,10 @@ export default {
   height: 60px;
 }
 .main {
+  width: 100%;
   min-height: 500px;
-  margin: 20px 0;
+  margin: 20px 0px;
+  padding: 0 230px;
 }
 .main .mainLeft {
   min-height: 500px;
@@ -79,8 +85,7 @@ export default {
 }
 .main .mainRight {
   padding: 20px;
-  float: right;
-  width: 880px;
+  // width: 880px;
   min-height: 500px;
   background-color: rgba(255, 255, 255, 0.8);
   box-shadow: 0 0 5px #ccc;
@@ -89,5 +94,13 @@ export default {
 .down {
   min-height: 100px;
 }
+.main__needLeft {
+  min-height: 500px;
+  margin: 20px 0;
+}
+.needLeft__right {
+  &:extend(.main .mainRight);
+  margin-left: 40px;
+}
 </style>