learning-system-portal/src/views/grateful/TeacherOpinion.vue

<template>
  <div>
    <div class="opinionBanner">
    </div>
    <div class="xindex-content" style="padding: 0">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="navTop">
            <div>
              <router-link to="/grateful" class="nav">首页</router-link>&nbsp;>&nbsp;
              <span style="cursor: pointer;" class="nav">认证讲师库</span>
            </div>
            <div style="position: relative;">
              <el-input class="portal-input" placeholder="请输入课程名称" style="border-radius: 20px !important; "
                @keyup.enter.native="searchJump()" clearable maxlength="50" v-model="params.courseName">
              </el-input>
              <el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教师赋能 -->
    <div class="xindex-content" style="padding: 0">
      <div class="modules xcontent2">
        <div class="xcontent2-main" style="width: 100%;">
          <div class="modules-list" style="margin-top: 0;">
            <div class="content">
              <div style="min-height: 485px;width: 100%;">
                <el-table style="width: 100%;" :data="list" stripe border>
                  <el-table-column label="课程名称" prop="courseName" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column label="课程价值" prop="meaning" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column label="教师名称" prop="teacherName" align="center" min-width="50"></el-table-column>
                  <el-table-column label="教师工号" prop="teacherNo" align="center" min-width="50" fixed="right"></el-table-column>
                </el-table>
              </div>
              <div v-if="list.length > 0" style="text-align: center;margin-top: 50px;">
                <pagination style="background-color: rgba(0, 0, 0, 0);" :size="params.pageSize" :total="total"
                  :page="params.pageNo" @change-size="changePageSize" @change-page="loadData" :autoScroll="false">
                </pagination>
              </div>
              <div v-if="list.length == 0" class="pagination-div">
                <span class="notcoures">
                  <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
                  <h5>暂无数据～</h5>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import timeShow from "@/components/Portal/datetimeShow.vue";
import { teachersList } from "../../api/modules/grateful";
export default {
  data: () => {
    return {
      total: 0,
      list: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        courseName: '',
      }
    };
  },
  components: { timeShow },
  mounted() {
    this.getTeachersList()
  },
  methods: {
    getTeachersList() {
      teachersList(this.params).then((result) => {
        console.log(result);
        const { total, records } = result.data
        this.total = total;
        this.list = records;
      })
    },
    searchJump() {
      this.params.pageNo = 1
      this.getTeachersList()
    },
    loadData(pageNo) {
      this.params.pageNo = pageNo
      this.getTeachersList()
    },
    getPic(index) {
      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
    },
    changePageSize(pageSize) {
      this.params.pageSize = pageSize;
      this.getTeachersList()
    },
  },
};
</script>
<style scoped lang='scss'>
.nav:hover {
  color: #387DF7;
}

.opinionBanner {
  width: 100%;
  height: 180px;
  position: relative;
  background: url('../../assets/images/grateful/opinionBanner.png') center center no-repeat;
  background-size: cover;

  &::before {
    content: url(../../assets/images//grateful/logo.png);
    position: absolute;
    top: 20px;
    left: 40px;
  }

  &::after {
    content: '认证讲师库';
    position: absolute;
    bottom: 25px;
    left: 180px;
    color: #ffffff;
    font-weight: 600;
    font-size: 40px;
  }

  img {
    width: 100%;
    height: 240px;
  }
}

.navTop {
  color: #666;
  display: flex;
  justify-content: space-between;

  .sear-but {
    position: absolute;
    bottom: 10%;
    right: 5px;
  }
}

.modules-list {
  min-height: 667px;
  background: #ffffff;
  border-radius: 8px;

  .content {
    padding: 40px 70px;
    background: linear-gradient(180deg,
        rgba(56, 125, 247, 0.2) 0%,
        rgba(166, 168, 255, 0) 100%) no-repeat;
    background-size: 100% 166px;
    border-radius: 8px;

    .pagination-div {
      text-align: center;
      padding: 70px 0;
    }

  }

  .pagination-div {
    text-align: center;
    padding: 70px 0;
  }


  .sear-but {
    position: absolute;
    bottom: 10%;
    right: 5px;
  }
}
</style>