measure/src/views/login/components/pic.vue

<template>
    <div v-if="isBody" class="left-pic-content">
        <div class="dt small-logo">
            <div class="cons">
                <img src="../../../assets/login/bim.png" alt="" class="logos">
                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
            </div>
        </div>
        <div class="ds small-logo">
            <div class="cons">
                <img src="../../../assets/login/gis.png" alt="" class="logos">
                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
            </div>
        </div>
        <div class="cc small-logo">
            <div class="cons">
                <img src="../../../assets/login/bd.png" alt="" class="logos">
                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
            </div>
        </div>
        <div class="rp small-logo">
            <div class="cons">
                <img src="../../../assets/login/ca.png" alt="" class="logos">
                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
            </div>
        </div>
        <div class="cube1">
            <div class="cons">
                <img src="../../../assets/login/cube1.png" alt="" class="cubes">
                <img src="../../../assets/login/s2.png" alt="" class="shadow2">
            </div>
        </div>
        <div class="cube2">
            <div class="cons">
                <img src="../../../assets/login/cube2.png" alt="" class="cubes">
                <img src="../../../assets/login/s3.png" alt="" class="shadow3">
            </div>
        </div>
        <div class="logo">
            <a href="http://hczc.hcxxy.com/" target="_blank">
                <div class="a-cons" />
            </a>
        </div>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'

const isBody = ref(false)

//渲染完成
nextTick(()=> {
    isBody.value = true
})
</script>

<style lang="scss" scoped>
.left-pic-content {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(/src/assets/login/bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    .small-logo {
        width: 110px;
        position: absolute;
        .cons {
            height: 160px;
            overflow: hidden;
        }
        .logos {
            width: 100%;
            margin-top: 30px;
        }
        .shadow1 {
            width: 64px;
            position: absolute;
            left: 44%;
            transform: translateX(-50%);
            bottom: -16px;
        }
    }
    .cons {
        position: relative;
    }
    .dt {
        left: 166px;
        top: 86px;
        .logos {
            animation: logoAnimate 4s 0.2s infinite alternate forwards;
        }
        .shadow1 {
            animation: logoShadowAnimate 4s 0.2s infinite alternate forwards;
        }
    }
    .ds {
        right: 176px;
        top: 54px;
        .logos {
            animation: logoAnimate 2.2s infinite alternate;
        }
        .shadow1 {
            animation: logoShadowAnimate 2.2s infinite alternate;
        }
    }
    .cc {
        right: 72px;
        bottom: 160px;
        .logos {
            animation: logoAnimate 2.5s 0.5s infinite alternate;
        }
        .shadow1 {
            animation: logoShadowAnimate 2.5s 0.5s infinite alternate;
        }
    }
    .rp {
        left: 290px;
        bottom: 76px;
        .logos {
            animation: logoAnimate 3s 0.9s infinite alternate;
        }
        .shadow1 {
            animation: logoShadowAnimate 3s 0.9s infinite alternate;
        }
    }
    .cubes {
        display: block;
        width: 100%;
    }
    .cube1 {
        width: 48px;
        right: 60px;
        top: 180px;
        position: absolute;
        .cons {
            height: 108px;
            position: relative;
            overflow: hidden;
            .cubes {
                animation: cube1LogoAnimate 2s infinite alternate;
            }
            .shadow2 {
                position: absolute;
                width: 56px;
                left: 48%;
                transform: translateX(-50%);
                bottom: -16px;
                animation: cube1ShadowAnimate 2s infinite alternate;
            }
        }
    }
    .cube2 {
        position: absolute;
        width: 56px;
        left: 130px;
        bottom: 190px;
        .cons {
            position: relative;
            height: 126px;
            overflow: hidden;
            .cubes {
                animation: cube2LogoAnimate 2s 0.3s infinite alternate;
            }
            .shadow3 {
                position: absolute;
                width: 64px;
                left: 48%;
                transform: translateX(-50%);
                bottom: -16px;
                animation: cube2ShadowAnimate 2s 0.3s infinite alternate;
            }
        }
    }
    .logo {
        right: 260px;
        top: 190px;
        width: 150px;
        position: absolute;
        height: 160px;
        cursor: pointer;
        .a-cons {
            width: 100%;
            height: 100%;
        }
    }
}

//动画效果
@keyframes logoAnimate {
    25% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}
@keyframes logoShadowAnimate {
    25% {
        width: 64px;
        margin-bottom: 0;
    }
    100% {
        width: 30px;
        margin-bottom: 20px;
    }
}
@keyframes cube1LogoAnimate {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }
}
@keyframes cube1ShadowAnimate {
    0% {
        width: 20px;
        margin-bottom: 20px;
    }
    100% {
        width: 56px;
    }
}
@keyframes cube2LogoAnimate {
    0% {
        margin-top: 30px;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes cube2ShadowAnimate {
    0% {
        width: 64px;
    }
    100% {
        width: 30px;
        margin-bottom: 20px;
    }
}
</style>