SteelfurnitureWeb/src/views/info/index.vue

<template>
  <div class="bg-F5">
    <div class="container">
      <el-row class="mt2rem" :gutter="20">
        <el-col :span="4">
          <mymenu></mymenu>
        </el-col>
        <el-col :span="20">
          <div class="infoTabDiv">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="求购信息" name="first">
                <ul class="listUl">
                  <li v-for="item in 10" :key="item">
                    <router-link to="/info/buyDetail">
                      <span class="name">信息信息信信息信息信息息11111</span
                      ><span class="date">2010-01-01发布</span></router-link
                    >
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="供应信息" name="second">
                <ul class="listUl">
                  <li v-for="item in 10" :key="item">
                    <router-link to="/info/supplyDetail">
                      <span class="name">信息信息信信息信息信息息11111</span
                      ><span class="date">2010-01-01发布</span></router-link
                    >
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
            <div class="btnDiv">
              <router-link to="/info/buy">
                <el-button class="buyBtn" size="mini">我要买</el-button>
              </router-link>
              <el-button class="buyBtn" size="mini">我要卖</el-button>
            </div>
          </div>
          <el-pagination
            class="pageDiv"
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :current-page="currentPage"
            layout="prev, pager, next,total, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { Component, Vue, Watch } from "vue-property-decorator";
import mymenu from "@/components/menu.vue";
export default {
  name: "app",
  components: {
    mymenu
  },
  data() {
    return {
      activeName: "first",
      currentPage: 1,
      pageSize: 10,
      total: 20
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestData();
    }
  }
};
</script>
<style lang="scss" scoped>
.infoTabDiv {
  position: relative;
  background: #fff;
  border-radius: 0.4rem;
  .btnDiv {
    height: 5rem;
    line-height: 5rem;
    position: absolute;
    right: 1.6rem;
    top: 0;
    .buyBtn {
      background: #fd5522;
      color: #fff;
      margin-left: 2rem;
      border: 0;
      border-radius: 0.4rem;
    }
  }
  .listUl {
    list-style: none;
    width: 100%;
    padding: 0 1.6rem 1.6rem;
    box-sizing: border-box;
    li {
      height: 3.6rem;
      line-height: 3.6rem;
      overflow: hidden;
      font-size: 1.4rem;
      .name {
        display: block;
        width: 80%;
        float: left;
        overflow: hidden;
        color: #333;
      }
      .date {
        display: block;
        width: 20%;
        float: left;
        text-align: right;
        color: #666;
      }
    }
  }
}
.pageDiv {
  text-align: right;
  margin-top: 0.5rem;
  padding: 2rem 0;
}
.mt2rem {
  margin-top: 2rem;
}
</style>
<style lang="scss">
.infoTabDiv {
  .el-tabs__nav-scroll {
    padding: 0 1.6rem;
    box-sizing: border-box;
  }
  .el-tabs__item {
    height: 5rem;
    line-height: 5rem;
  }
  .el-tabs__item:hover {
    color: #fd5522;
  }
  .el-tabs__item.is-active {
    color: #fd5522;
  }
  .el-tabs__active-bar {
    background-color: #fd5522;
  }
}
.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #fd5522;
}
.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #fd5522;
}
</style>