sist_web/src/views/index/components/undergraduate_and_graduate.vue

<template>
  <div class="undergraduate_and_graduate">
    <el-row type="flex" justify="center">
      <el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="14">
        <el-row class="undergraduate_and_graduate_bgc">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="undergraduate headline">
              <img class="undergraduate_img" src="../../../assets/index/undergraduate_and_graduate/benka.png" alt=""/>
              <span>{{ $t("message.undergraduate_education") }}</span>
            </div>
            <div class="vline">
              <div class="undergraduate_content" v-for="(item,index) in undergraduateData" :key="index"
                   @click="getArticle(item)">
                <div class="undergraduate_content_time">
                  {{ getMonthTime(item.publishTime) }}
                </div>
                <div class="undergraduate_content_text">
                  {{ item.title }}
                </div>
              </div>
              <div class="more" @click="lookMore('KW_T7dJ2lt5sC-RJZSnPtk0')">
                <span class="more_text">更多</span>
                <img src="../../../assets/index/news_center/gd_icon.png" alt="">
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="graduate headline">
              <img class="graduate_img" src="../../../assets/index/undergraduate_and_graduate/boshimaobeifen.png"
                   alt=""/>
              <span>{{ $t("message.postgraduate_education") }}</span>
            </div>
            <div class="undergraduate_content" v-for="(item,index) in graduateData" :key="index"
                 @click="getArticle(item)">
              <div class="undergraduate_content_time">
                {{ getMonthTime(item.publishTime) }}
              </div>
              <div class="undergraduate_content_text">
                {{ item.title }}
              </div>
            </div>
            <div class="more" @click="lookMore('1yaM_T4qiBsFULvLXHbMflQ')">
              <span class="more_text">更多</span>
              <img src="../../../assets/index/news_center/gd_icon.png" alt="">
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getArticleList} from "@/api";
import {toArticle} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";

export default {
  name: "undergraduate_and_graduate",
  data() {
    return {
      undergraduateData: [],
      graduateData: [],
      width: document.documentElement.clientWidth > 992
    }
  },

  created() {
    this.getUndergraduateList();
    this.getGraduateList();
  },
  methods: {
    clickTo(link) {
      //console.log(link)
      window.location.href = link;//当前标签页
    },
    getArticle(news) {
      console.log(news)
      toArticle(news, this.width);
    },
    lookMore(str) {
      lookMoreFixedComment(str, this.width);
    },
    getUndergraduateList() {
      getArticleList({
        navId: "KW_T7dJ2lt5sC-RJZSnPtk0",
        pageNum: 1,
        pageSize: 5
      }).then(res => {
        this.undergraduateData = res.rows;
      });
    },
    getGraduateList() {
      getArticleList({
        navId: "1yaM_T4qiBsFULvLXHbMflQ",
        pageNum: 1,
        pageSize: 5
      }).then(res => {
        this.graduateData = res.rows;
      });
    },

    getMonthTime(date) {
      let time = new Date(date);
      let month = time.getMonth() + 1
      if (month < 10) {
        month = "0" + month
      }
      let day = time.getDate();
      if (day < 10) {
        day = "0" + day
      }
      return month + "-" + day;
    },
  },
};
</script>

<style scoped lang="scss">


.undergraduate_content {
  cursor: pointer;
}

@media screen and (max-width: 960px) {
  .undergraduate {
    border-radius: 36px 36px 0 0 !important;
  }
  .graduate {
    border-radius: 36px 36px 0 0 !important;
  }
  .more {
    justify-content: center !important;
  }
  .vline {
    border-right: none !important;
  }
}

@media screen and (max-width: 768px) {
  .undergraduate {
    border-radius: 36px 36px 0 0 !important;
  }
  .graduate {
    border-radius: 36px 36px 0 0 !important;
  }
  .more {
    justify-content: center !important;
  }

  .vline {
    border-right: none !important;
  }
}

.undergraduate_and_graduate {
  background-image: url("../../../assets/index/announcements/sy_bj3.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  //height: 54.2rem;

  &_bgc {
    background-color: #fff;
    //height: 33.8rem;
    margin-top: 8.1rem;
    margin-bottom: 5rem;
    border-radius: 36px;
  }

  .headline {
    display: flex;
    background: #004AAF;
    height: 5.6rem;
    margin-bottom: 3.1rem;

    img {
      margin: 1.2rem 1.5rem 1.2rem 4.4rem;
    }

    span {
      //width: 129px;
      //height: 44px;
      font-size: 3.1rem;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 5.4rem;
      letter-spacing: .1rem;
    }
  }

  .vline {
    border-right: 1px solid #CCCCCC;
  }

  .undergraduate {
    border-radius: 36px 0 0 0;

    &_img {
      width: 3.1rem;
      height: 3.3rem;
    }

    &_content {
      display: flex;
      margin-bottom: 1.5rem;

      &_time {
        //width: 38px;
        //height: 18px;
        font-size: 1.3rem;
        font-weight: 500;
        color: #0D52B3;
        line-height: 2.3rem;
        margin-right: 1.5rem;
        margin-left: 2.1rem;
      }

      &_text {
        &:hover {
          color: #0D52B3;
        }

        width: 83%;
        //height: 23px;
        font-size: 1.6rem;
        font-weight: 500;
        color: #000000;
        line-height: 2.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp: 1; //显示的行
      }
    }

  }

  .more {
    width: 100%;
    display: flex;
    height: 2.3rem;
    margin-top: 3.1rem;
    margin-left: 2.1rem;
    cursor: pointer;
    margin-bottom: 3rem;

    .more_text {
      font-size: 1.6rem;
      font-weight: 500;
      color: #8B8B8B;
      letter-spacing: .2rem;
    }

    img {
      width: 2.9rem;
      height: 1.4rem;
      margin-left: 0.8rem;
      margin-top: .5rem;
    }
  }

  .graduate {
    border-radius: 0 36px 0 0;

    &_img {
      width: 4.3rem;
      height: 3.3rem;
    }
  }
}
</style>