web/apps/bigmember_pc/src/components/home/FloatSide.vue

<template>
  <div class="float-side-group">
    <div
      class="column-side"
      v-if="floatSide.showType"
      @click="toggleType(floatSide)"
      key="column"
    >
      <div :class="'type-icon--' + floatSide.colorClass">
        {{ floatSide.title.substr(0, 1) }}
      </div>
      <div class="type-title">{{ floatSide.title }}</div>
      <i class="el-icon-jy-caret-left"></i>
    </div>
    <div class="row-side" key="row" v-else>
      <div class="flex-r-c center sb top-group">
        <div
          class="flex-r-c center type-title"
          @click="floatSide.showType = true"
        >
          <div>{{ floatSide.title }}</div>
          <div class="flex-c-c center icon-caret-bottom">
            <i class="el-icon-jy-caret-bottom"></i>
          </div>
        </div>
        <div
          class="flex-r-c center more-text"
          v-if="floatSide.list && floatSide.list.length"
          @click="$emit('more', floatSide)"
        >
          <span>更多</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="content-group flex-c-c center">
        <div
          class="flex-w-100 info-card-group"
          v-if="floatSide.list && floatSide.list.length"
        >
          <div
            class="flex-c-c info-card-item"
            v-for="(item, index) in getList"
            :key="index"
            @click="$emit('info', item, floatSide)"
          >
            <div class="p-t-b-8 border-bottom-line flex-r-c center sb">
              <div class="flex-r-c center">
                <div :class="'type-icon--' + floatSide.colorClass">
                  {{ item.index || floatSide.title.substr(0, 1) }}
                </div>
                <div class="text--title ellipsis">{{ item.title }}</div>
                <i class="icon-badge-red" v-if="!item.read"></i>
              </div>
              <div class="flex-r-c text--time">{{ item.date }}</div>
            </div>
            <div class="p-t-b-10 flex-r-c">
              <span class="text--time">{{ item.tip || '情报历史记录' }}</span>
              <div class="flex-r-c center">
                <span class="text--title">{{ item.total }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
        <span v-else class="empty-text">暂无{{ floatSide.title }}数据</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  props: {
    floatSide: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    toggleType(floatSide) {
      this.$emit('toggle', floatSide.showType)
      floatSide.showType = false
    }
  },
  computed: {
    getList() {
      return this.floatSide.list.slice(0, this.floatSide.maxLength)
    }
  },
  created() {}
}
</script>
<style lang="scss" scoped>
.float-side-group {
  .type-icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    &--month {
      @extend .type-icon;
      background: #2abed1;
    }
    &--week {
      @extend .type-icon;
      background: #ff9f40;
    }
    &--ent {
      @extend .type-icon;
      background: #05a6f3;
    }
  }
  .column-side {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 5px;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
    padding: 12px 8px;
    box-sizing: border-box;
    cursor: pointer;
    .type-icon {
      & + * {
        margin-top: 8px;
      }
    }
    .type-title {
      width: 1em;
      color: #1d1d1d;
      font-size: 12px;
      font-weight: 400;
      line-height: 15px;
      & + * {
        margin-top: 4px;
      }
    }
    ::v-deep i.el-icon-caret-left {
      color: #9e9ea3;
    }
  }

  @include diy-icon('caret-left', 10, 10);
  @include diy-icon('caret-bottom', 6, 6);

  .row-side {
    border-radius: 4px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fff;

    .icon-caret-bottom {
      width: 12px;
      height: 12px;
      background: #b4b4bf;
      border-radius: 50%;
      margin-left: 8px;
      ::before {
        content: '' !important;
      }
    }

    .top-group {
      min-width: 280px;
      background: #f2f2f4;
      padding: 12px;
      padding-right: 8px;
      box-sizing: border-box;
      color: #1d1d1d;
      font-weight: 400;

      .type-title {
        font-size: 16px;
        line-height: 24px;
        cursor: pointer;
      }
      .more-text {
        font-size: 13px;
        line-height: 20px;
        cursor: pointer;
      }
    }
    .content-group {
      .empty-text {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 118px;
      }
    }
    .icon-badge-red {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #fb483d;
      border: 1px solid #ffffff;
      border-radius: 50%;
      margin-left: 4px;
      ::before {
        content: '' !important;
      }
    }
    .color {
      &--gray {
        color: #c0c4cc;
      }
    }
    .text {
      &--title {
        font-size: 13px;
        font-weight: 400;
        color: #1d1d1d;
        line-height: 20px;
      }
      &--time {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }
    }
    .p-t-b-8 {
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .p-t-b-10 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .border-bottom-line {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .info-card-group {
      background: #f2f2f4;
      cursor: pointer;
    }
    .info-card-item {
      background-color: #fff;
      width: 100%;
      padding: 0 12px;
      box-sizing: border-box;
      & + .info-card-item {
        margin-top: 4px;
      }
      .el-icon-arrow-right {
        margin-left: 12px;
        font-size: 13px;
        color: #c0c4cc;
      }
      .text--title {
        margin-left: 8px;
        max-width: 127px;
      }
    }
  }
}
</style>