hb_sis_zhfx/src/components/other/fj/index.vue

<template>
  <svg
    :id="fjId"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 93.5 96.5"
    enable-background="new 0 0 93.5 96.5"
    xml:space="preserve"
    :width="fjWidth"
    :height="fjHeight"
  >
    <defs>
      <rect
        id="SVGID_1_"
        x="-260.14"
        y="-365.945"
        width="595.28"
        height="841.89"
      />
      <rect
        id="SVGID_3_"
        x="-260.14"
        y="-365.945"
        width="595.28"
        height="841.89"
      />
    </defs>
    <clipPath id="SVGID_2_">
      <use xlink:href="#SVGID_1_" overflow="visible" />
    </clipPath>
    <clipPath id="SVGID_4_">
      <use xlink:href="#SVGID_3_" overflow="visible" />
    </clipPath>
    <g>
      <path
        fill="#D8D8D8"
        d="M45.96,39.183l-2.22,50.288c0,0,1.916,0.747,3.605,0.747c1.738,0,3.752-0.747,3.752-0.747l-2.181-50.288
        H45.96z"
      />
    </g>
    <g>
      <g>
        <path
          :fill="background"
          d="M45.427,37.35l3.854,1.471c0,0,10.131-21.287,10.834-32.815C52.61,15.16,45.427,37.35,45.427,37.35"
        />
        <path
          :fill="background"
          d="M49.088,38.821l-3.163,2.647c0,0,13.648,19.221,23.373,25.454C64.962,55.908,49.088,38.821,49.088,38.821"
        />
        <path
          :fill="background"
          d="M45.749,41.592l0.022-4.125c0,0-23.489-2-34.528,1.396C22.452,42.669,45.749,41.592,45.749,41.592"
        />
      </g>
      <g>
        <path
          fill="#D8D8D8"
          d="M49.095,38.328l11.02-32.752c0,0-0.102,2.009-0.186,2.674c-0.068,0.56-0.282,1.67-0.402,2.222
        c-0.1,0.454-0.421,1.81-0.421,1.81s-0.583,2.35-0.815,3.123c-0.767,2.562-2.484,7.63-3.438,10.129
        c-0.805,2.119-2.529,6.314-3.434,8.393c-0.492,1.132-2.029,4.5-2.029,4.5"
        />
        <path
          fill="#D8D8D8"
          d="M46.446,41.545l23.227,25.585c0,0-1.705-1.066-2.244-1.465c-0.457-0.334-1.32-1.061-1.744-1.436
        c-0.348-0.307-1.375-1.248-1.375-1.248s-1.769-1.656-2.33-2.234c-1.863-1.918-5.451-5.889-7.17-7.938
        c-1.456-1.737-4.28-5.287-5.654-7.091c-0.748-0.98-2.939-3.965-2.939-3.965"
        />
        <path
          fill="#D8D8D8"
          d="M45.376,37.815l-34.535,1.201c0,0,1.915-0.614,2.569-0.768c0.548-0.131,1.662-0.324,2.22-0.406
        c0.459-0.066,1.843-0.241,1.843-0.241s2.405-0.28,3.211-0.335c2.667-0.181,8.015-0.356,10.691-0.345
        c2.267,0.01,6.798,0.149,9.064,0.265c1.231,0.064,4.926,0.318,4.926,0.318"
        />
      </g>
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 46.75 39.182"
        to="359 46.75 39.182"
        :dur="rotate"
        repeatCount="indefinite"
      />
    </g>
    <g>
      <path
        fill="#60BFD6"
        d="M42.686,39.182c0,2.504,2.117,4.545,4.732,4.545s4.733-2.041,4.733-4.545c0-2.512-2.118-4.544-4.733-4.544
        S42.686,36.67,42.686,39.182"
      />
    </g>
    <g>
      <path
        fill="#B1E1EB"
        d="M44.4,39.182c0,1.561,1.353,2.831,3.017,2.831c1.663,0,3.02-1.27,3.02-2.831c0-1.56-1.356-2.829-3.02-2.829
        C45.753,36.353,44.4,37.622,44.4,39.182"
      />
    </g>
  </svg>
</template>

<script>
export default {
  // 名称
  name: "fj",

  props: {
    id: {
      type: String,
      default: "fj-1",
    },
    speed: {
      type: Number || String,
      default: "0.5s",
    },
    color: {
      type: String,
      default: "#4b55ae",
    },
    width:{
      type: String,
      default: "43px",
    },
    height:{
      type: String,
      default: "46px",
    }
  },

  // 数据
  data() {
    return {
      fjId: "",
      rotate: "",
      background: "",
      fjWidth:"",
      fjHeight:""
    };
  },

  // 函数
  methods: {},

  created() {
    this.fjId = this.id;
    this.rotate = this.speed;
    this.background = this.color;
    this.fjWidth = this.width;
    this.fjHeight = this.height;
  },

  mounted() {},

  unmounted() {},

  watch: {
    id(res) {
      this.fjId = res;
    },
    speed(res) {
      this.rotate = res;
    },
    color(res) {
      this.background = res;
    },
    width(res) {
      this.fjWidth = res;
    },
    height(res) {
      this.fjHeight = res;
    },
  },
};
</script>

<style lang="less" scoped>
</style>