<template>
    <view v-if="show" class="components-widgets-loading">
        <image class="icon" :src="require('./loading.png')" mode="scaleToFill" />
        <text class="text">{{ title }}</text>
    </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "components-widgets-loading",
    data() {
        return {};
    },
    computed: {
        ...mapState({
            show: (state) => state.loading.show,
            title: (state) => state.loading.title,
        }),
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {},
};
</script>

<style lang="less" scoped>
@keyframes Loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.components-widgets-loading {
    z-index: 25;
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    width: 270rpx;
    margin: 0 auto;
    transform: translateY(-50%);
    background-color: #4e4e4e;
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 10rpx;
    opacity: 0.9;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
        width: 90rpx;
        height: 90rpx;
        flex-shrink: 0;
        animation: Loading 1s infinite linear;
    }
    .text {
        color: #ffffff;
        font-size: 28rpx;
        margin-top: 20rpx;
    }
}
</style>