<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,[encoded data, 6536 characters]">
        </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>
