hb_sis_zhfx/src/views/WindSite/components/Windmill.vue

<template>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="220px" height="392px" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve"
        class="windmill">
        <image width="47" height="345" class="pillar" x="68" y="50"
            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAABYCAYAAAATOhxeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFQUM3N0QzOUM5QzAxMUVCQTkxNUE0MEIzMkEzODJGNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFQUM3N0QzQUM5QzAxMUVCQTkxNUE0MEIzMkEzODJGNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVBQzc3RDM3QzlDMDExRUJBOTE1QTQwQjMyQTM4MkY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVBQzc3RDM4QzlDMDExRUJBOTE1QTQwQjMyQTM4MkY2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dzYXLwAAD5tJREFUeNqEWFusXNdZ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">
        </image>
        <image width="200" height="165" class="fan"
            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAqCAYAAAAeeGN5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNzQzMDNEM0M5QzAxMUVCODM2ODk1RTE0MzQyQjlCNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNzQzMDNENEM5QzAxMUVCODM2ODk1RTE0MzQyQjlCNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY3NDMwM0QxQzlDMDExRUI4MzY4OTVFMTQzNDJCOUI1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY3NDMwM0QyQzlDMDExRUI4MzY4OTVFMTQzNDJCOUI1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kW9rGAAABZ1JREFUeNrcmVuoFVUYx9estWZmby9Hs6PHkxKU3TPShC4vp0IypJdMsKQEBckKeimoJFIxsZcIeoistwjSMFN7kEKpyMKSjCwhUV+iyCDx0rFz9p6ZNavfN3u2SVGaNuk4h/9Zl5m19vp/t/WtmcB7ryq+BsBR8E3VPxRUTKYJfgI7wd1Vk9EVz98HXElqRN3JXAxiMAaMrjuZcaBxwZDBIy3ooT6y7mTGluXoC4mMvRACQO/f1GtHJvgTgf6qydiqJs593mQ/7u1uykEQ9AXQ04GuIZk8b+be91J2TEDrPg0bbWpIxuWuAcadIOPNeKO1sca6+pFxrpm5bFyWu8J5rPG9yhujQlVLMnGapmOzPCvaPodMGOhaBgBMbEySJRbtdMiQBRhrR1Ft1Y5M5lx/kqUqA0WUDoIospFk0Ydqt89gXv2ZSxXaUalLIJfGLs/66mlmLpuYohVBICFZ6xA/mlDPTdPlE1i8+A5GFkhAMPT11pOMYuG+iGKdxMaXfXUkg1lNlN3e5KZjZtTpG19LMkSutBE1lNGmMLMojFRow7SWZBpRcwskBiQDkCs0NmuEja1VkqnsVVOr3ZpGeN6R517eAShj9H6r7Yw4igdrp5kwDPdbH+4kAgx0xKbfx3UGz6lmOJdIWFWSljgyYHlednVpe/7knkSr2MZCwEZhPNIYc43VxnVimJpaltvBD4y/jXD9K+P2tdN2O0mTPGVzFb8iQBTnHTJrZW3YkTa5qZG27gSSyjXDj1wE6cVskNNpTglVdLkJ9BD9d9J+46RHZ3PGWYcgBiGyL8uyHyG3DSLruJecUzMTaSLz21nYypZrDaARFYdxoQcjErZ2Kc88XGpmNAtfTlrT006SnuHW8KQkayvn8wVEvFlEv1U8s/cckCkSxx4Ws4RFPYGpTHTeSegtzFDCMUSkPBrowP9x+MyPiHkmaVsNJy3VSoYkIcWE7INZlE1rNBqrYxOv59n0fyPDTn4FCeSyodbQvFbSil3mCt8qEkybibRp+3ch9sKJQV79Rvtxott6fGZakYSmaeFzLnAy5/U+8K/oWF+H77zEiMOVZc3ie55FYuf3JEl7YztpLaAey7FYAoE4Zxec9T9GH0sgeLgbYIQs9QNMsxAn/75MPguH7wYSOcwhnGfbabIWDd4oYjuFz5/xEWAyi3mZbHgDkp0qixSfET8Rk5Ldvhk1f2EfeQ3zWsitv5xbStK7GTOH5zc14+ZxyQxKk+zkbxI982wW5LbSfpJho/7L0KyZ+C7C5wokdyv+UZxRxERyX+zuDunuw+632NC+Rf0r8R0hJ6WEWdGCaFD8RY4Ew+1hyaY1fTNpz2dznYlZXirCkRAcQlBIRoynvoHsYRVkvz7b0NxUPngUuiKhSwpViiZ82H3/tYMEcj2L2EZ2vCeXFDn4F66n1FZIb/eBugkTnu1dPpfN9VrR9omFezUXeV9FbSV450w1cyV3VnB/PlIM8I/ibJLnLsGJd3mVv4rNv0c0OobpFZKXucQPTlMzRZ8IRQQkZkbK00/fQ/QsIgpeDSlkZYs5mPc4vriGda0GR06XjIj8AbCKO5eVMVXM7RDm9gWmtY5D1mZC8aBmAe2kLQTPkowcD2SPiopAwJhJ9M3j3hz6Z0BpRFdT/P+MYhn48FRkpoCn6VlcviuW6yCq3oQmNmPbnzvRBKFY9pUKyShjRVOm3wRmIAj0fZI9qPKDFQs7RvEiWHPyC5KTfWYWeB7cXA44SCEb2Os09rLOyl7e/cN1EH98m7VspH4LeAzcozpf4mStM8BzYE+XjHwEegQsL5nvZvAWyrXgW3V+XEmZqH4K7gD3l8K/F9wAloLNQmYyeAZ8B94EH4D96vy8xCc+Ap+A6aXpLQJPSWQUMgdU5xu9fK//WdXjEpP/EuwqLSgCx34XYACY8yIT37sHYgAAAABJRU5ErkJggg==">
        </image>
    </svg>
</template>

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

<style lang="less" scoped>
    .windmill {

        // transform: rotateY(60deg);
        .pillar {}

        .fan {
            transform-origin: 46% 29%;
            transform: rotateY(45deg);
            animation: rotate 5s linear infinite;
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>