web_sh_audit/src/components/layout/MenuCard.vue

<template>
  <!-- 外边框 -->
  <div
    class="menuMainBox"
    :style="{
      width: boxWidth ? boxWidth + 'px' : '410px',
      height: boxHeight + 'px',
      border: type !== 'chart' ? '' : '1px solid #2FB8FF',
      background: boxBackground ? boxBackground : ''
    }"
  >
    <!-- 头部 -->
    <div class="menuMainBox_top" v-if="type !== 'chart'">
      <!-- 头部左侧 -->
      <div class="menuMainBox_top_left" :style="{ width: titleWidth ? titleWidth + '%' : '50%' }">
        <!-- 左侧箭头图标 -->
        <div class="menuMainBox_top_left_iconS"></div>
        <!-- 标题 -->
        <div class="menuMainBox_top_left_title">{{ 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: titleWidth ? 110 - 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="type !== 'chart'" :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }">
      <!-- 圆球 -->
      <div></div>
    </div>
    <div class="menuMainBox_topChart" v-if="type === 'chart'">
      <div class="menuMainBox_topChart_title">
        {{ title }}
      </div>
    </div>
    <!-- 主题 -->
    <div class="menuMainBox_main" v-if="type !== 'chart'">
      <!-- 上部 -->
      <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="type === 'chart'">
      <!-- 上部 -->
      <div class="menuMainBox_main_all">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuCard",
  components: {},
  data() {
    return {};
  },
  mounted() {},
  /**
   * type: 类型【card:卡片;chart:echart组件】,默认为card（非必填）
   * title: 标题（必填）
   * boxWidth: 宽，默认为410px（非必填）
   * boxHeight: 高，默认为auto（非必填）
   * boxBackground: 背景色，默认为渐变蓝色（非必填）
   * titleWidth: 标题宽度，默认为50（非必填）
   */
  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground", "titleWidth"],
  methods: {},
  watch: {}
};
</script>

<style lang="less" scoped>
@borderColor: #00aaff;
@borderColor32: #00aaff32;
@borderColor64: #00aaff64;
@topTitleBgLeft: #00244d;
@topTitleMinLeft: #002f56;
@lightColor: #74ffff;
.menuMainBox {
  position: relative;
  margin: 5px 0;
  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;
  //   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);
      }
      &_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;
      }
    }
  }
  &_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
  &_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;
    }
  }
  // 卡片主题
  &_main {
    position: relative;
    padding-top: 10px;
    width: 100%;
    height: calc(100% - 40px);
    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);
    &_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);
    }
  }
}
</style>