构建渐变样式：同色系变浅(十六进制颜色转为RGB)

本文链接：https://blog.csdn.net/weixin_58034343/article/details/141562451

dynamicColor为十六进制颜色，#cccccc

  // 辅助函数：构建渐变样式
    buildGradientStyle(dynamicColor) {
      // 这里我们创建一个从左到右的渐变，从baseColor到透明
      const gradient = `linear-gradient(to top,rgba(${this.hexToRgb(dynamicColor)}, 0),  rgba(${this.hexToRgb(dynamicColor)}, 0.2),rgba(${this.hexToRgb(dynamicColor)}, 0.5), ${dynamicColor})`;
      const circleStyle = `linear-gradient(to left top, ${dynamicColor}, rgba(${this.hexToRgb(dynamicColor)}, 0.6), rgba(${this.hexToRgb(dynamicColor)}, 0.2),rgba(${this.hexToRgb(dynamicColor)}, 0))`;
      // this.cardBg =`background-color: rgba(${this.hexToRgb(dynamicColor)}, 0.2);`
      // 将渐变字符串设置为背景样式
      this.gradientStyle.background = gradient;
      this.gradientCircle.background = circleStyle
    },
    // 辅助函数，用于将十六进制颜色转换为RGB
    hexToRgb(hex) {
      let r = 0, g = 0, b = 0;
      // 3位的十六进制颜色
      if (hex.length == 4) {
        r = parseInt(hex[1] + hex[1], 16);
        g = parseInt(hex[2] + hex[2], 16);
        b = parseInt(hex[3] + hex[3], 16);
      }
      // 6位的十六进制颜色
      else if (hex.length == 7) {
        r = parseInt(hex.substring(1, 3), 16);
        g = parseInt(hex.substring(3, 5), 16);
        b = parseInt(hex.substring(5, 7), 16);
      }
      return r + ', ' + g + ', ' + b;
    },