web_sh_audit/src/components/common/ChartCard.vue

<template>
  <!-- 组合chart外边框 -->
  <div>
    <!-- 上部倾斜方块、标题和分割线 -->
    <div class="displayFlex">
      <div class="borders2"></div>
      <div class="chartTitle">
        {{ title }}
        <div class="chartTitleBorder"></div>
      </div>
    </div>
    <!-- chart主题 -->
    <div style="height: 75px">
      <LineChart :categoryData="['2020年', '2021年', '2022年']" :valueData="[1024, 1026, 1025]" />
    </div>
  </div>
</template>

<script>
/**
 * 标题chart组合组件（首页MenuCard中的下部经常用到）
 * @author: LiuMengxiang
 * @Date: 2022年11月14-18日
 */
import LineChart from "@/components/chart/LineChart.vue";
export default {
  name: "ChartCard",
  components: { LineChart },
  data() {
    return {};
  },
  mounted() {},
  props: [],
  methods: {},
  watch: {}
};
</script>

<style lang="less" scoped>
.displayFlex {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
  .borders {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 110px;
    height: 100px;
    background: linear-gradient(to left, #00aaff, #00aaff) left top no-repeat,
      linear-gradient(to bottom, #00aaff, #00aaff) left top no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) right top no-repeat,
      linear-gradient(to bottom, #00aaff, #00aaff) right top no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) left bottom no-repeat,
      linear-gradient(to bottom, #00aaff, #00aaff) left bottom no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
  }
}
.borders2 {
  width: 10px;
  height: 10px;
  background-color: #74ffff;
  transform: rotate(45deg);
}
.chartTitle {
  position: relative;
  width: 100%;
  font-size: 18px;
  font-family: pingfangSC;
  font-weight: bold;
  color: #74ffff;
  margin-left: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #33eeff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1px solid transparent;
  border-image: --webkit-linear-gradient(to right, #33eeff, transparent) 1;
  border-image: --moz-linear-gradient(to right, #33eeff, transparent) 1;
  border-image: linear-gradient(to right, #33eeff, transparent) 1;
}
.chartTitleBorder {
  position: absolute;
  right: 0;
  bottom: -2px;
  width: 10px;
  height: 3px;
  background: #00a8ff;
  border-radius: 2px;
}
</style>