更新

src/layout/list/mainLeft.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="mainLeft">
+    <el-row>
+      <el-col :span="24" class="mainLeft">
+        <el-col :span="24" class="info" v-for="(item, index) in mainLeftList" :key="index" :type="item.type">
+          <el-link :underline="false">
+            <span class="title">{{item.title}}</span>
+          </el-link>
+        </el-col>
+      </el-col>
+      <!-- <el-col :span="24">
+        <el-menu default-active="2" class="el-menu-vertical-demo">
+          <el-menu-item index="2">
+            <i class="el-icon-menu"></i>
+            <span slot="title">导航二</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <i class="el-icon-document"></i>
+            <span slot="title">导航三</span>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <i class="el-icon-setting"></i>
+            <span slot="title">导航四</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col> -->
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainLeft',
+  props: {
+    mainLeftList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  height: 44px;
+  line-height: 44px;
+  padding: 0 15px;
+}
+.info .title {
+  border-bottom: 1px dashed #ccc;
+  display: inline-block;
+  height: 40px;
+  width: 260px;
+  padding: 0 0px;
+}
+</style>

src/layout/list/mainRight.vue

@@ -0,0 +1,106 @@
+<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="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="20" class="title">
+              <el-link :underline="false">{{item.title}}</el-link>
+            </el-col>
+            <el-col :span="4" class="time">
+              {{item.time}}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="page">
+            <div class="block">
+              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="currentPage" layout="total,prev, pager, next, jumper" :total="1">
+              </el-pagination>
+            </div>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainRight',
+  props: {
+    mainRightList: null,
+  },
+  components: {},
+  data: () => ({
+    input: '',
+    currentPage: 1,
+  }),
+  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>
+.search {
+  padding: 10px 0;
+}
+/deep/.search .input .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  border-radius: 0;
+  border: 2px solid #850000;
+}
+/deep/.search .button .el-button {
+  padding: 7px 20px;
+  border: 2px solid #850000;
+  border-radius: 0;
+  background: #850000;
+  color: #fff;
+}
+.main {
+  min-height: 400px;
+}
+.mainRightList {
+  padding: 10px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.mainRightList .title .el-link--inner {
+  font-size: 15px;
+  color: #333;
+}
+.mainRightList .time {
+  text-align: right;
+  font-size: 14px;
+  color: #999;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/layout/list/top.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="top">
+        <el-col :span="2">
+          <el-image style="width:100px;height:100px" :src="topInfo.logo || ''"></el-image>
+        </el-col>
+        <el-col :span="22" class="topTit">
+          <el-link :underline="false">
+            {{ topInfo.title }}
+          </el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'top',
+  props: {
+    topInfo:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top .topTit{
+  height: 104px;
+  line-height: 104px;
+  padding: 0 10px;
+}
+.top .topTit .el-link.el-link--default {
+  font-size: 3em;
+  font-family: cursive;
+  color: #850000;
+  text-shadow: 2px 2px 0 #fff;
+}
+</style>

src/views/list/list.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="list">
+    <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">
+              <mainRight :mainRightList="mainRightList"></mainRight>
+            </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 mainRight from '../../layout/list/mainRight.vue';
+import footDown from '../../layout/index/foot.vue';
+export default {
+  name: 'list',
+  props: {
+    topInfo: null,
+    mainLeftList: null,
+    mainRightList: null,
+    downList: null,
+  },
+  components: {
+    top,
+    native,
+    mainLeft,
+    mainRight,
+    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>