xujingtown_irflcmp_ui/src/components/cards/CardTitle.vue

<template>
  <div class="cardTitle">
    <div class="cardTitle_f"></div>
    {{ title }}
  </div>
</template>

<script>
/**
 * card标题
 * @author LiuMengxiang
 * @Date 2024/09/09
 */
export default {
  name: "CardTitle",
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.cardTitle {
  position: relative;
  height: 50px;
  border-left: 3px solid #1b7ef2;
  background-image: --webkit-linear-gradient(to right, #1b7ef264, #1b7ef200);
  background-image: --moz-linear-gradient(to right, #1b7ef264, #1b7ef200);
  background-image: linear-gradient(to right, #1b7ef264, #1b7ef200);
  display: flex;
  align-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  &_f {
    margin: 0 10px;
    width: 10px;
    height: 14px;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
    background: #29f1fa;
  }
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 40px;
    top: 5px;
    left: 0;
    background: linear-gradient(to right, #ffffff64 50%, #00000000 0);
    background-size: 40px 100%;
    transform: skew(30deg, 0);
    z-index: -1;
  }
}
</style>