web-portal/src/views/info/list.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="1"><i class="el-icon-s-home"></i></el-col>
      <el-col :span="23" style="margin-top:0.3rem">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }"><span style="color:#666666">网站首页</span></el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/"><span style="color:#666666">创业案例</span></a>
          </el-breadcrumb-item>
          <el-breadcrumb-item><span style="color:#999999">文章列表</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="margin-top: 1rem; width:50%">
        <el-input size="mini" placeholder="请输入文章标题" v-model="input3">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row
      style="border-bottom-style:dashed; border-width:1px;border-color:#666666;font-size: small; padding: 0.5rem 0;"
      v-for="(item, index) in 10"
      :key="index"
    >
      <el-col style="padding-top: 0.5rem;" :span="21">
        <el-link @click="$router.push({ path: '/info/detail', query: { id: 'none' } })">学有所成，扎根农村，做新时代的“现代农民”</el-link>
      </el-col>
      <el-col :span="3" style="color:#999999; padding-top: 0.7rem;"><span style="padding: 0.5rem 0;">2016-11-25</span></el-col>
    </el-row>
    <el-row style="margin-top:1rem;">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="15" layout="total, prev, pager, next, jumper" :total="100">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    test(val) {
      this.$set(this, `activeMenu`, val);
    },
  },
  name: 'index',
  props: {},

  components: {},
  data: () => ({
    input3: '',
    currentPage4: 1,
    activeMenu: '1',
  }),
  created() {},
  computed: {},
};
</script>

<style lang="less" scoped></style>