接口修改

zhongshujie

6 天以前 d8a16c78958755bf12b4c05580b64d5cc7561705

 src/views/honors/index.vue

@@ -1,16 +1,321 @@
<template>
    <div class="honors">
        <div></div>
        <div></div>
  <div class="honors">
    <div class="honors-title">
      <p>
        <span>王永炎院士荣誉奖项</span>
      </p>
    </div>
    <div class="page-main-father">
      <div class="honors-main">
        <div class="honors-main-box">
          <!-- 左边标题 -->
          <div class="honors-main-title">荣<br />誉<br />奖<br />项</div>
          <!-- 右边内容 -->
          <div class="honors-text" v-loading="loading">
            <div style="min-height: 646px;">
              <ul>
                <li v-for="(item, index) in honorList" :key="index">
                  <img class="main-img" :src="item.icon ? item.icon : defaultImg" alt="" />
                  <div>
                    <p class="main-time">{{ item.year }}</p>
                    <p class="main-text" :title="item.txt">{{ item.honor }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
                :background="isBackground" layout="prev, pager, next" :total="total">
              </el-pagination>
            </div>
            <!-- “山”图片 -->
            <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js'
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/honors/honorImg.png"),
      isBackground: true,
      honorList: [],
      total: 0,
      currentPage: 1,
      loading: false,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 获取数据
    initChart() {
      this.loading = true;
      MG.resource.getItem({
        path: "WYY_honor",
        fields: {
          Link: "",
          honor: "",
          'year': '',
        },
        paging: {
          start: (this.currentPage - 1) * 10,
          size: 10,
        },
        // coverSize: {
        //   height: 70
        // }
      }).then((res) => {
        console.log(res, "res");
        if (res.datas && res.datas.length) {
          this.honorList = res.datas.map(item => {
            // 将 year 字段格式化为 "2017年9月" 这种格式
            const date = new Date(item.year);
            const year = date.getFullYear();
            const month = date.getMonth() + 1; // 月份从0开始，需要加1
            return {
              ...item,
              year: `${year}年${month}月`
            };
          });
          this.total = res.total;
          this.loading = false;
        }
      }).catch((error) => {
        console.error('获取荣誉失败:', error);
      });
    },
    // 处理页码变化
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.initChart(); // 重新获取数据
    },
  },

};
</script>

<style>
    .honors{
        
<style lang="less" scoped>
.honors {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #e9e1d4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.honors-title {
  padding: 8px 0;
  height: 9.4%;
  width: 100%;
  text-align: left;
  border-bottom: 2px solid #937950;
  background-color: #e9e1d4;
  position: sticky;
  top: 0;
  z-index: 100;

  p {
    height: 100%;
    font-family: Alimama DongFangDaKai;
    font-size: 30px;
    text-indent: 1em;
    border-bottom: 1px solid #937950;
    display: flex;
    align-items: center;
  }
}

.page-main-father {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 2%;
  padding-bottom: 2%;
}

.honors-main {
  width: 77.3%;
  margin: 0 auto;

}

.honors-main-box {
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 3.2% 6% 0% 4%;
  border: 1px solid #e4dace;
  background: rgba(255, 253, 248, 0.9);
}

.honors-main-title {
  padding: 0 30px 0 0;
  font-family: Alimama DongFangDaKai;
  font-size: 36px;
  border-right: 1px solid #b9a587;
}

.honors-text {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 0 0 0 5.8%;
  display: flex;
  flex-direction: column;
  min-height: 646px;

  ul {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  li {
    height: calc(20% - 20px);
    width: 45%;
    display: flex;
    margin-right: 0.9%;
    margin-bottom: 25px;

    img {
      margin: 9px 30px 9px 0;
      width: 24%;
      height: 100%;
    }
</style>

    .main-time {
      margin-top: 7px;
      font-size: 18px;
      color: #937950;
      margin-bottom: 5px;
      overflow: hidden;
    }

    .main-text {
      font-family: Alibaba PuHuiTi 3;
      font-size: 14px;
      line-height: 20px;
      overflow: hidden;
      cursor: pointer;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }

  .honor-Bg {
    width: 70.5%;
    height: auto;
    margin-left: -33%;
    margin-bottom: -1%;

  }

  .pagination {
    // position: absolute;
    // bottom: 0;
    // right: 0;
    height: 10%;
    padding-right: 47px;
    padding-top: 30px;
    text-align: end;
  }
}

@font-face {
  font-family: "Alimama DongFangDaKai";
  src: url("../../assets/font/阿里妈妈东方大楷.ttf");
}

// @media screen and (min-width: 1920px) {
//   .honors-main-box {
//     display: flex;
//     justify-content: center;
//     padding: 3.2% 6% 11% 4%;
//     border: 1px solid #e4dace;
//     background: rgba(255, 253, 248, 0.9);
//   }
//   .honor-Bg {
//     position: absolute;
//     width: 70.5%;
//     height: auto;
//     bottom: -20%;
//     left: -26.5%;
//   }
// }

@media screen and (min-width: 2560px) {
  .honors-main {
    width: 77.3%;
    min-width: 1600px;
  }

  .honors-title p {
    font-size: 44px;
  }

  .honors-main-title {
    font-size: 54px;
  }

  .honors-text {
    li {
      .main-time {
        font-size: 24px;
      }

      .main-text {
        font-size: 20px;
        line-height: 28px;
      }
    }
  }
}



:deep .msg-pagination-container.is-background .el-pager li {
  /*对页数的样式进行修改*/
  background-color: transparent;
  color: #333333;
  border-radius: 5px;
  border: 1px solid #cccccc;
}

:deep.msg-pagination-container.is-background .btn-next {
  /*对下一页的按钮样式进行修改*/
  background-color: transparent;
  color: #333333;
  border-radius: 5px;
  border: 1px solid #cccccc;
}

:deep.msg-pagination-container.is-background .btn-prev {
  /*对上一页的按钮样式进行修改*/
  background-color: transparent;
  color: #333333;
  border-radius: 5px;
  border: 1px solid #cccccc;
}

:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #937950;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #cccccc;
}
</style>