web_sh_audit/src/components/layout/MenuCard.vue

<template>
  <!-- 外边框 -->
  <div
    :class="$ifLeftMenu(menuData.index) ? 'menuMainBoxA' : 'menuMainBox'"
    :style="{
      width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
      height: menuData.boxHeight ? menuData.boxHeight + 'px' : 'auto',
      border: menuData.type !== 'chart' ? '' : '1px solid #2FB8FF',
      background: menuData.boxBackground ? menuData.boxBackground : ''
    }"
    @click="changeLeftMenuIndex()"
  >
    <!-- 头部 -->
    <div class="menuMainBox_top" v-if="menuData.type !== 'chart'">
      <!-- 头部左侧 -->
      <div class="menuMainBox_top_left" :style="{ width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%' }">
        <!-- 左侧箭头图标 -->
        <div class="menuMainBox_top_left_iconS" v-if="menuData.type !== 'imageMenu'"></div>
        <div class="menuMainBox_top_left_iconR" v-if="menuData.type === 'imageMenu'">
          <div class="menuMainBox_top_left_iconR_active" v-if="$ifLeftMenu(menuData.index)"></div>
        </div>
        <!-- 标题 -->
        <div class="menuMainBox_top_left_title">{{ menuData.title }}</div>
        <!-- 右侧倾斜图标1 -->
        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
        <!-- 右侧倾斜图标2 -->
        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
      </div>
      <!-- 头部右侧 -->
      <div class="menuMainBox_top_right" :style="{ width: menuData.titleWidth ? 110 - menuData.titleWidth + '%' : '60%' }">
        <!-- 方块1 -->
        <div class="menuMainBox_top_right_d1"></div>
        <!-- 方块2 -->
        <div class="menuMainBox_top_right_d2"></div>
      </div>
      <!-- 右上角三个点 -->
      <div class="menuMainBox_top_topRight">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- 折线 -->
    <div
      class="menuMainBox_topBottom"
      v-if="menuData.type !== 'chart'"
      :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }"
    >
      <!-- 圆球 -->
      <div></div>
    </div>
    <div class="menuMainBox_topChart" v-if="menuData.type === 'chart'">
      <div class="menuMainBox_topChart_title">
        {{ menuData.title }}
      </div>
    </div>
    <!-- 主题 -->
    <div class="menuMainBox_main" v-if="menuData.type === 'card'">
      <!-- 上部 -->
      <div class="menuMainBox_main_top">
        <slot name="top"></slot>
      </div>
      <!-- 下部 -->
      <div class="menuMainBox_main_bottom">
        <slot name="bottom"></slot>
      </div>
    </div>
    <div class="menuMainBox_main" v-if="menuData.type === 'chart'">
      <div class="menuMainBox_main_all">
        <slot></slot>
      </div>
    </div>
    <div class="menuMainBox_main_image" v-if="menuData.type === 'imageMenu'">
      <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuCard",
  components: {},
  data() {
    return {};
  },
  mounted() {},
  /**
   * menuData =>
   * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
   * index: 子菜单index（当type为imageMenu时有效）
   * imageUrl: 菜单图片地址（当type为imageMenu时有效）
   * title: 标题（必填）
   * boxWidth: 宽，默认为410px（非必填）
   * boxHeight: 高，默认为auto（非必填）
   * boxBackground: 背景色，默认为渐变蓝色（非必填）
   * titleWidth: 标题宽度，默认为50（非必填）
   */
  props: ["menuData"],
  methods: {
    changeLeftMenuIndex() {
      if (this.menuData.index != undefined) {
        this.$store.commit("changeLeftMenuIndex", this.menuData.index);
      }
    },
    returnImageUrl(imageUrl, boxHeight) {
      let returnStyle = "";
      if (boxHeight) {
        returnStyle += "heihgt:" + (boxHeight - 36) + "px;";
      }
      returnStyle += "background-image: url('" + imageUrl + "');";
      return returnStyle;
    }
  },
  watch: {}
};
</script>

<style lang="less" scoped>
@borderColor: #00aaff;
@borderColor32: #00aaff32;
@borderColor64: #00aaff64;
@topTitleBgLeft: #00244d;
@topTitleMinLeft: #002f56;
@lightColor: #74ffff;
.menuMainBox {
  position: relative;
  z-index: 999;
  margin: 10px 5px;
  min-height: 60px;
  border: 2px solid transparent;
  border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
  border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
  border-image: linear-gradient(to top, @borderColor, transparent) 1;
  opacity: 0.9;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  //   type !== chart
  &_top {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    background-color: @topTitleMinLeft;
    &_left {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      height: 100%;
      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      border-bottom: 2px solid @borderColor;
      &_iconS {
        margin: 10px;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0071b2, #1deef5);
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
      }
      &_iconR {
        position: relative;
        margin: 15px;
        width: 10px;
        height: 10px;
        background-image: transparent;
        border: 1px solid #1deef5;
        border-radius: 20px;
        &_active {
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          background-color: #1deef5;
          border-radius: 20px;
        }
      }
      &_title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      &_iconE {
        position: absolute;
        margin-left: 10px;
        width: 15px;
        height: 30px;
        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
        transform: skew(-45deg);
      }
      &_iconE1 {
        right: 27px;
      }
      &_iconE2 {
        right: 7px;
      }
    }
    &_right {
      position: absolute;
      right: -10%;
      height: 100%;
      border-top: 2px solid @borderColor;
      border-left: 2px solid @borderColor;
      transform: skew(-45deg);
      background-color: @topTitleBgLeft;
      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
      border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
      border-image: linear-gradient(to right, @borderColor, transparent) 1;
      &_d1 {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 20px;
        background-color: @borderColor64;
      }
      &_d2 {
        position: absolute;
        left: 70px;
        width: 80px;
        height: 10px;
        background-color: @borderColor32;
      }
    }
    &_topRight {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      div:nth-child(1) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
      div:nth-child(2) {
        margin: 0 1px;
        width: 5px;
        height: 2px;
        background-color: #f19b56;
      }
      div:nth-child(3) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
    }
  }
}
// 选中后的样式
.menuMainBoxA {
  position: relative;
  z-index: 999;
  margin: 10px 5px;
  min-height: 60px;
  border: 2px solid transparent;
  border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
  border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
  border-image: linear-gradient(to top, @lightColor, transparent) 1;
  opacity: 0.9;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  //   type !== chart
  .menuMainBox_top {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    background-color: @lightColor;
    &_left {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      height: 100%;
      border-bottom: 2px solid @borderColor;
      background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
      background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
      background-image: linear-gradient(to left, @lightColor, #007dff);
      &_iconS {
        margin: 10px;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0071b2, #1deef5);
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
      }
      &_iconR {
        position: relative;
        margin: 15px;
        width: 10px;
        height: 10px;
        background-image: transparent;
        border: 1px solid #1deef5;
        border-radius: 20px;
        &_active {
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          background-color: #1deef5;
          border-radius: 20px;
        }
      }
      &_title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      &_iconE {
        position: absolute;
        margin-left: 10px;
        width: 15px;
        height: 30px;
        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
        transform: skew(-45deg);
      }
      &_iconE1 {
        right: 27px;
      }
      &_iconE2 {
        right: 7px;
      }
    }
    &_right {
      position: absolute;
      right: -10%;
      height: 100%;
      border-top: 2px solid @borderColor;
      border-left: 2px solid @borderColor;
      transform: skew(-45deg);
      background-color: @topTitleBgLeft;
      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
      border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
      border-image: linear-gradient(to right, @borderColor, transparent) 1;
      &_d1 {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 20px;
        background-color: @borderColor64;
      }
      &_d2 {
        position: absolute;
        left: 70px;
        width: 80px;
        height: 10px;
        background-color: @borderColor32;
      }
    }
    &_topRight {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      div:nth-child(1) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
      div:nth-child(2) {
        margin: 0 1px;
        width: 5px;
        height: 2px;
        background-color: #f19b56;
      }
      div:nth-child(3) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
    }
  }
}
// 公共样式
.menuMainBox_topBottom {
  position: absolute;
  top: 20px;
  width: 38%;
  height: 20px;
  border-bottom: 2px solid @borderColor;
  border-right: 2px solid @borderColor;
  transform: skew(-45deg);
  border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
  border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
  border-image: linear-gradient(to left, @borderColor, transparent) 1;
  z-index: 9999;
  div {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: @borderColor;
    transform: skew(45deg);
  }
}
//   type === chart
.menuMainBox_topChart {
  width: 100%;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  &_title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 300;
    color: #e6e6e6;
    line-height: 60px;
  }
}
// 卡片主题
.menuMainBox_main {
  position: relative;
  padding-top: 10px;
  width: 100%;
  height: calc(100% - 30px);
  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  &_top {
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  &_bottom {
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  &_all {
    margin: 0 10px;
    width: calc(100% - 20px);
    height: calc(100% - 10px);
  }
  &_image {
    margin: 0px 10px;
    width: calc(100% - 20px);
    height: 210px;
    background-size: 100% 200px;
    background-repeat: no-repeat;
  }
}

// 卡片主题
.menuMainBox_main_image {
  position: relative;
  margin: 0;
  width: 100%;
  height: calc(100% - 30px);
  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  &_box {
    width: 100%;
    height: 200px;
    background-size: 100% 200px;
    background-repeat: no-repeat;
  }
}
</style>