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 details.hot">
              <div>{{ i.biaoti }}</div>
              <div>{{ $moment(new Date(i.created_at)).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 details.last">
              <div>{{ i.biaoti }}</div>
              <div>{{ $moment(new Date(i.created_at)).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>
import {home} from '@/api/reception';

export default {
  data() {
    return {
      labels: [
        "学籍管理",
        "人才",
        "补助",
        "培养方案",
        "综合科技",
        "党建工作创新奖",
        "处置",
        "党建工作创新奖",
        "处置",
        "党建工作创新奖",
        "处置",
      ],
      labelGroup: [],
      details: { hot: [], last: [] }
    };
  },
  methods: {
    async getInfo () {
      this.details = await home()
    },

    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.getInfo();
    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 0.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 0.2s;
        }
      }
      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background: #cad8e4;
        transition: all 0.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 0.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;
      transition: all 0.4s;

      &:hover {
        transform: scale(1.1, 1.1);
      }
    }
    &__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>