veterans_client_web/src/views/PersonalCenter/Evaluate/EvaluateIndex.vue

<!--
 * @Description: 我的评价
 * @Author: 空白格
 * @Date: 2022-08-24 10:00:07
 * @LastEditors: wangcc
 * @LastEditTime: 2022-08-25 14:33:46
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\Evaluate\EvaluateIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div>
    <banner title="我的评价" :breadcrumb="false"></banner>
    <div class="breadcrumb">
      <div class="_container">
        <div class="banner-breadcrumb-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/personalcenter'}">我的</el-breadcrumb-item>
            <el-breadcrumb-item>我的评价</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="deliverBox">
      <div class="_container">
        <div class="box-list">
          <h1>全部评价</h1>
          <div style="display:table">
            <div class="deliverList-box">
              <div class="line"></div>
              <h3 class="title-h3">电子技术课程</h3>
              <div class="deliver">
                <div class="log">
                  <img src="@/assets/images/log.png" alt />
                </div>
                <div class="center">
                  <h3>王珊珊</h3>
                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
                </div>
                <div class="right-box">
                  <span class="time">2020.8.24</span>
                </div>
              </div>
            </div>
            <div class="deliverList-box">
              <div class="line"></div>
              <h3 class="title-h3">电子技术课程</h3>
              <div class="deliver">
                <div class="log">
                  <img src="@/assets/images/log.png" alt />
                </div>
                <div class="center">
                  <h3>王珊珊</h3>
                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
                </div>
                <div class="right-box">
                  <span class="time">2020.8.24</span>
                </div>
              </div>
            </div>
            <div class="deliverList-box">
              <div class="line"></div>
              <h3 class="title-h3">电子技术课程</h3>
              <div class="deliver">
                <div class="log">
                  <img src="@/assets/images/log.png" alt />
                </div>
                <div class="center">
                  <h3>王珊珊</h3>
                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
                </div>
                <div class="right-box">
                  <span class="time">2020.8.24</span>
                </div>
              </div>
            </div>
            <div class="deliverList-box">
              <div class="line"></div>
              <h3 class="title-h3">电子技术课程</h3>
              <div class="deliver">
                <div class="log">
                  <img src="@/assets/images/log.png" alt />
                </div>
                <div class="center">
                  <h3>王珊珊</h3>
                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
                </div>
                <div class="right-box">
                  <span class="time">2020.8.24</span>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination" v-if="total">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="queryParams.pageSize"
              :total="total"
              @current-change="currentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner from '@/components/BannerBreadcrumb/index.vue';
export default {
  name: 'EvaluateIndex',
  components: { banner },
  data() {
    return {
      value: 3,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolName: undefined
      },
      total: 0,
      loading: false,
    };
  },
  methods: {
    /**
     * 分页切换触发
     * @date 2022-08-16
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    /**
     * 获取列表
     * @date 2022-08-11
     * @returns {any}
     */
    getList() {
      this.loading = true;
      // myInterviewList(this.queryParams).then((res) => {
      //   this.deliverList = res.rows;
      //   this.total = Number(res.total);
      //   this.loading = false;
      // });
    }
  }
};
</script>

<style  lang='scss' scoped>
._container {
  width: 1200px !important;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  max-width: none !important;
}
._container:after,
._container:before {
  display: table;
  content: ' ';
  clear: both;
}
.breadcrumb {
  background-color: #f5f7fa;
  height: 70px;
  display: flex;
  align-items: center;
}
.banner-breadcrumb-breadcrumb {
  .el-breadcrumb {
    font-size: 18px;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    color: #7e7e7e;
    font-weight: normal;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #ff0000;
  }
}
.box-list {
  background-color: #fff;
  padding: 10px 0 80px 0;
  display: table;
  width: 100%;
  h1 {
    color: #222222;
    font-size: 26px;
    margin: 19px 20px;
  }
  .deliver {
    cursor: pointer;
    width: 100%;
    height: 93px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    .log {
      width: 60px;
      height: 60px;
      background: #ffffff;
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .center {
      width: 340px;
      h3 {
        color: #1a1a1a;
        margin-bottom: 10px;
        font-size: 20px;
        font-family: 'SourceHanSansCN';
      }
      p {
        color: #666666;
        font-size: 14px;
        line-height: 20px;
        .meta_cell {
          display: inline-block;
          margin-right: 5px;
        }
        .meta_cell:after {
          padding: 0 1px 0 4px;
          display: inline-block;
          color: #919090;
          content: '|';
        }
        .meta_cell:last-child:after {
          content: '';
        }
      }
      .comment {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .right-box {
      display: flex;
      flex-direction: column;
      justify-content: right;
      span {
        text-align: right;
      }
      .pir {
        color: #ef651f;
        font-size: 20px;
      }
      .time {
        color: #999999;
        font-size: 14px;
        margin-top: 56px;
      }
      .postStatus {
        line-height: 40px;
        color: #0f0f0f;
      }
    }
  }
}
.pagination {
  text-align: center;
  margin-top: 20px;
  :deep(.el-pager .active) {
    background-color: #ff3939;
  }
  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #ff3939;
  }
}
.deliverList-box {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.11);
  padding: 10px 20px;
  margin: 10px 20px;
  transition: 0.5s;
  border-radius: 3px;
  width: 518px;
  position: relative;
  float: left;
  .title-h3 {
    color: #222222;
    line-height: 40px;
    font-size: 20px;
  }
  .line {
    width: 4px;
    height: 30px;
    position: absolute;
    background-color: #ef651f;
    left: 0;
    top: 16px;
  }
}
.deliverList-box:hover {
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
}
.interview-state {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #ccc;
  line-height: 50px;
  font-size: 22px;
  color: #3ca7fe;
  .grey {
    color: #999999;
  }
  .green {
    color: #709078;
  }
  .red {
    color: #ff3939;
  }
}
.button-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.video {
  width: 200px;
}
</style>