jn_sis_zhfx/src/views/SandTable/component/st-back.vue

<template>
    <div class="st-back">
        <svg viewBox="0 0 872 872" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
            <defs>
                <polygon id="sjx-svg-def" points="13 0 26 22 0 22" fill="#F4DF6A"></polygon>
                <rect id="cjx-svg-def" x="0" y="0" width="94" height="12" fill="#F4DF6A"></rect>
            </defs>
            <circle cx="436" cy="436" r="430" stroke="#2F3647" stroke-width="2" fill="none" stroke-dasharray="15,10">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="359 436 436"
                    to="0 436 436"
                    dur="100s"
                    repeatCount="indefinite"
                />
            </circle>
            <circle cx="436" cy="436" r="270" stroke="#2F3647" stroke-width="70" fill="none" stroke-dasharray="500,50">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="0 436 436"
                    to="359 436 436"
                    dur="50s"
                    repeatCount="indefinite"
                />
            </circle>
            <circle cx="436" cy="436" r="350" stroke="#2F3647" stroke-width="2" fill="none"></circle>
            <use xlink:href="#sjx-svg-def" x="424" y="815">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="0 436 436"
                    to="359 436 436"
                    dur="30s"
                    repeatCount="indefinite"
                />
            </use>
            <use xlink:href="#sjx-svg-def" x="75" y="245">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="0 436 436"
                    to="359 436 436"
                    dur="30s"
                    repeatCount="indefinite"
                />
            </use>
            <use xlink:href="#sjx-svg-def" x="775" y="245">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="0 436 436"
                    to="359 436 436"
                    dur="30s"
                    repeatCount="indefinite"
                />
            </use>
            <use xlink:href="#cjx-svg-def" x="390" y="778">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="359 436 436"
                    to="0 436 436"
                    dur="30s"
                    repeatCount="indefinite"
                />
            </use>
            <use xlink:href="#cjx-svg-def" x="390" y="778">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="135 436 436"
                    to="-224 436 436"
                    dur="30s"
                    repeatCount="indefinite"
                />
            </use>
            <use xlink:href="#cjx-svg-def" x="390" y="778">
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="225 436 436"
                    to="-134 436 436"
                    dur="30s"
                    repeatCount="indefinite"
                />
            </use>
        </svg>
    </div>
</template>

<script>
export default {
    // 名称
    name: "st-back",
    // 使用组件
    components: {},
    // 数据
    data() {
        return {};
    },
    // 函数
    methods: {},
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less">
.st-back {
    width: 872px;
    height: 872px;
    position: fixed;
    z-index: 0;
    // left: calc(50% - 436px - 112px);
    left: calc(50% - 436px);
    top: calc(50% - 436px);
    transform: rotateX(45deg);

    svg {
        width: 872px;
        height: 872px;
    }
}
</style>