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

<template>
  <div>
    <!-- 教师赋能 -->
    <div class="xindex-content" style="padding: 0">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="modules-list" style="margin-top: 0;">
            <div class="bgc">
              <div class="title">重要通知</div>
            </div>
            <div style="padding:0 20px;">
              <!--内容列表内容-->
              <div v-for="(item, ccidx) in 5" :key="'cc' + ccidx" class="toolEvery" @click="noticeDetail(item)">
                <div class="contnet">教师节活动通知</div>
                <div class="case-info-date portal-time">
                  <i class="el-icon-time"></i>
                  <time-show time="2023-08-04"></time-show>
                </div>
              </div>
              <pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
                layout="total, prev, pager, next, jumper" @change-size="changePageSize" @change-page="loadData">
              </pagination>
            </div>

          </div>
        </div>
        <div class="xcontent2-minor" style="margin-left: 25px;">
          <div class="portal-ranking ranking-bg">
            <p class="ranking-title">教师赋能排行榜</p>
            <ul class="xindex-ranking-course">
              <li class="xindex-ranking-li" v-for="(item, cindex) in 10" :key="'cc' + cindex">
                <a style="display: inherit">
                  <span class="portal-right-text blue-one">
                    <img :src="getPic(cindex)" alt="" />
                  </span>
                  <span class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
                    style="font-size: 14px; color: #04243c">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import timeShow from "@/components/Portal/datetimeShow.vue";
export default {
  data: () => {
    return {
      courseList: {
        list: [],
        count: 0,
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  components: { timeShow },
  methods: {
    noticeDetail(detailInfo) {
      console.log(detailInfo);
      this.$router.push({
        path: '/grateful/noticeDetail',
      })

    },
    getPic(index) {
      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
    },
    changePageSize(pageSize) {
      this.courseList.pageSize = pageSize;
    },
    loadData(pindex) {
      console.log(pindex);
    },
  },
};
</script>
<style scoped lang='scss'>
.modules-list {
  min-height: 555px;
  background: #ffffff;
  border-radius: 8px;

  .bgc {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    height: 80px;
    background: linear-gradient(180deg,
        rgba(56, 125, 247, 0.2) 0%,
        rgba(166, 168, 255, 0) 100%);
    border-radius: 8px 8px 0 0;

    .title {
      padding: 20px 20px 0 20px;
      display: flex;
      justify-content: space-between;
    }
  }

  .toolEvery {
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
    display: flex;
    justify-content: space-between;
    cursor: pointer;

    .contnet {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>