weiyuan-document-web/src/views/reception/home/index.vue

<template>
  <div>
    <div class="news">
      <el-row :gutter="38">
        <el-col :span="12">
          <div class="news__header">
            <div class="news__header--diamond">热点资料</div>
            <div class="news__header--line"></div>
          </div>

          <ul class="news__list">
            <li class="news__list--item" v-for="i in 5">
              <div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
              <div>{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
            </li>
          </ul>
        </el-col>

        <el-col :span="12">
          <div class="news__header">
            <div class="news__header--diamond">最新资料</div>
            <div class="news__header--line"></div>
          </div>

          <ul class="news__list">
            <li class="news__list--item" v-for="i in 5">
              <div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
              <div>{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <div class="department">
      <div class="department__title">
        <div class="department__title--linear"></div>
        <div class="department__title--center">
          <div>部门</div>
          <div>Department</div>
        </div>
        <div class="department__title--linear"></div>
      </div>

      <div class="department__list">
        <div v-for="item in 14" class="department__list--item">
          <div>{{item}}</div>
        </div>
        <div class="department__list--item">
          <div @click="$router.push('/index/department')">更多...</div>
        </div>
      </div>
    </div>

    <div class="label">
      <div class="label__first" @click="$router.push('/index/label')">
        <el-image style="width: 49px;height: 49px;margin-bottom: 29px;"
                  :src="require('@/assets/reception/icon-light.png')"></el-image>
        <div>标签</div>
      </div>

      <div class="label-group"
           v-for="(group, index) in labelGroup">
        <div :class="index % 2 ? 'label-group__left--single' : 'label-group__left--complex'">
          <div v-for="(item, index2) in group.left"
               :style="{ 'background': labelColor(index2) }"
               :class="index % 2 ? 'single-item label-item' : 'complex-item label-item'">
            <p>{{ item }}</p>
          </div>
        </div>

        <div class="label-group__right label-item"
             :style="{ 'background': labelColor(index + 3) }"
             v-if="group.right">
          <p>{{ group.right }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labels: ['学籍管理','人才','补助','培养方案','综合科技','党建工作创新奖','处置','党建工作创新奖','处置','党建工作创新奖','处置'],
      labelGroup: []
    }
  },
  methods: {
    labelsHandler() {
      let groups = Math.ceil(this.labels.length / 4)
      for(let i = 0; i < groups; i++) {
        let group = this.labels.slice(i * 4,i * 4 + 4)
        this.labelGroup.push({
          left: group.slice(0, 3),
          right: group[3] ? group[3] : false
        })
      }
      console.log(this.labelGroup)
    }
  },
  computed: {
    labelColor () {
      let color = ["#85CBC8", "#67BCE6", "#5F97CA", "#7792C4"]

      return function (index) {
        return color[index % 4]
      }
    }
  },
  created() {
    this.labelsHandler()
  }
}
</script>

<style scoped lang="scss">
.news {

  padding: 33px 18.75% 38px 18.75%;

  &__header {
    display: flex;
    align-items: flex-end;

    &--diamond {
      width: 108px;
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      text-align: center;

      z-index: 1;
      position: relative;
      &::before {
        content: "";
        width: 100%;
        height: 100%;
        background: #cad8e4;
        transform: skewX(20deg);

        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
      }
      &::after {
        content: "";
        width: 100%;
        height: 100%;
        background: #3c7ac0;
        transform: skewX(-20deg);

        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    &--line {
      flex: 1;
      height: 1px;
      background: #C7D9E5;

      margin-left: 10px;
    }
  }


  &__list {

    padding: 34px 0 0 26px;

    &--item {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all .2ms;

      position: relative;

      &:hover {
        color: #3c7ac0;

        & > div:nth-child(2) {
          color: #333;
        }
        &::before {
          background: #3c7ac0;
        }
      }
      & > div {
        font-size: 13px;

        &:nth-child(2) {
          color: #999999;
          transition: all .2s;
        }
      }
      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background: #cad8e4;
        transition: all .2s;

        position: absolute;
        top: calc(50% - 3px);
        left: -12px;
      }

      & + li {

        margin-top: 20px;
      }
    }
  }
}

.department {
  background: url("../../../assets/reception/department-bkg.png")  no-repeat center;
  background-size: cover;

  margin-top: 37px;
  padding: 32px 18.7% 19px 18.7%;

  &__title {
    display: flex;
    align-items: center;


    &--linear {
      background: #fff;
      height: 2px;
      flex: 1;
    }
    &--center {
      font-weight: 500;
      font-size: 21px;
      line-height: 21px;
      color: #fff;
      text-align: center;
      width: 144px;

      margin: 0 14px;
      position: relative;
      & > div:nth-child(1) {
        padding: 2px 0 7px 0;
      }
      & > div:nth-child(2) {
        font-size: 13px;
        line-height: 13px;
        color: #B6CEF0;

      }

      &::before {
        content: "";
        width: 20px;
        height: 24px;
        border-top: 3px solid #fff;
        border-left: 3px solid #fff;

        position: absolute;
        top: -3px;
        left: -3px;
      }
      &::after {
        content: "";
        width: 20px;
        height: 24px;
        border-bottom: 3px solid #fff;
        border-right: 3px solid #fff;

        position: absolute;
        bottom: -3px;
        right: -3px;
      }
    }
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    margin-top: 41px;

    &--item {
      background: #fff;
      width: 176px;
      height: 80px;
      color: #1A5CA3;
      font-size: 16px;
      line-height: 80px;
      text-align: center;
      font-weight: 500;
      cursor: pointer;
      transition: all .2ms;

      margin-bottom: 20px;

      &:hover {
        color: #fff;
        background: url("../../../assets/reception/department-item1.png") no-repeat 0 0;
        background-size: cover;
      }
    }
  }
}

.label {
  display: flex;
  justify-content: space-between;

  padding: 42px 18.7% 39px 18.7%;

  & > div:nth-child(1) {
    height: 161px;
    width: 140px;
    background: #F29D5B;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    & > div {
      color: #fff;
      font-size: 16px;
      font-weight: 500;

    }
  }

  &-group {
    flex: 1;
    display: flex;

    .label-item {
      flex: 1;
      color: #fff;
      font-size: 16px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    &__left--single {
      flex: 2.2;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      .single-item {
        height: calc(50% - 6px);

        margin-left: 12px;
      }
      & > div:only-child {
        height: 100%;
      }
      & > div:nth-last-child(1) {
        flex-basis: 100%;

      }
    }
    &__left--complex {
      flex: 2.2;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      .complex-item {
        height: calc(50% - 6px);

        margin-left: 12px;
      }
      & > div:only-child {
        height: 100%;
      }
      & > div:nth-child(1) {
        flex-basis: 100%;

      }
    }


    &__right {

      margin-left: 12px;
    }
  }
}

@media screen and (max-width: 900px) {
  .label-item > p {
    font-size: 12px;
    width: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>