|
@@ -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>
|