hb_sis_zhfx/src/views/Home/components/map.vue

<template>
    <div class="map">
        <div class="back"></div>
        <div class="security-days">
            <div class="text">安全天数:</div>
            <div class="num">
                <span class="font-num">1,945</span>
                <span class="unit">天</span>
            </div>
        </div>
        <div class="tab-box">
            <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{'active': activeTab == index}"
                @click="selectTab(index)">
                <span class="svg-icon svg-icon-sm" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
                    <SvgIcon :svgid="tab.icon"></SvgIcon>
                </span>
                <span>{{tab.text}}</span>
            </div>
        </div>
        <div class="map-img">
            <SvgMap></SvgMap>
        </div>
    </div>
</template>

<script>
    import SvgIcon from '@com/coms/icon/svg-icon.vue';
    import SvgMap from "./map/svg-map.vue";
    export default {
        // 名称
        name: "Map",
        // 使用组件
        components: {
            SvgIcon,
            SvgMap,
        },
        // 数据
        data() {
            return {
                tabs: [{
                        icon: 'svg-all',
                        text: '全部'
                    },
                    {
                        icon: 'svg-wind-site',
                        text: '风场'
                    },
                    {
                        icon: 'svg-photovoltaic',
                        text: '电站'
                    },
                ],
                activeTab: 0,
                img: require("@assets/map/map-nx.png"),
                nxSvgFile: require("@assets/map/map-nx.svg"),
            }
        },
        // 函数
        methods: {
            selectTab: function(index) {
                this.activeTab = index;
            }
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less" scoped>
    .map {
        position: relative;
        width: 100%;
        height: 100%;

        .back {
            position: fixed;
            z-index: -1;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            background: url(../../../assets/background-home.png) no-repeat;
            background-size: 100% 100%;
        }

        .security-days {
            margin: 1.852vh;

            .text {
                font-size: 2.222vh;
                color: @write;
            }

            .num {
                color: @green;
                font-size: 3.704vh;

                .unit {
                    font-size: 2.222vh;
                    position: relative;
                    margin-left: 0.556vh;
                    top: -0.185vh;
                }
            }
        }

        .tab-box {
            margin: 1.852vh 2.778vh;

            .tab-item {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: @fontsize-l;
                cursor: pointer;
                width: 6.481vh;
                padding: 0.741vh 0;

                &.active {
                    color: @green;
                    position: relative;
                    background-image: @greenLinearTop;

                    &::after {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 0.463vh;
                        border: 0.093vh solid @green;
                        border-top: 0;
                        left: 0;
                        bottom: 0;
                        box-sizing: border-box;
                    }
                }

                .svg-icon {
                    margin-right: 0.556vh;
                }
            }
        }
    
        .map-img {
            width: calc(100% - 14.815vh);
            height: calc(100% - 14.815vh);
            margin: 7.407vh;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            
            @keyframes rotate
            {
                from {transform: rotateX(70deg);}
                to {transform: rotateX(0deg);}
            }
            
            img {
                width: 100%;
                animation: rotate 3s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
            }
        }
        
    }
</style>