yihuo/pages/award_detail/official.vue

<template>
    <view class="wrapper" :class="[animation ? 'animation' : 'animation2']" :style="{top: (statusBarHeight * 2 + 72) + 'rpx'}">
        <view class="content">
            <image :src="resource.award_bg_detail_official" class="image-1" />
            <image :src="resource.award_bg_detail_official" class="image-2" />
        </view>
    </view>
</template>
<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            animation: true
        }
    },
    computed: {
        statusBarHeight() {
            if (this.$store.state.systemInfo) {
                return this.$store.state.systemInfo.statusBarHeight
            }
            return 20
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    position: fixed;
    left: 0;
    width: 100%;
    height: 374rpx;
    z-index: -1;
    .content {
        width: 100%;
        height: 100%;
        position: relative;
        .image-1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 840rpx;
            height: 100rpx;
        }
        .image-2 {
            position: absolute;
            bottom: 0;
            left: 100%;
            width: 840rpx;
            height: 100rpx;
        }
    }
}

@keyframes moveLeft {
    0% {
        left: 0;
    }
    50% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}

@keyframes moveLeft2 {
    0% {
        left: 100%;
    }
    50% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

.animation {
    animation: moveLeft 15s linear infinite;
}
.animation2 {
    animation: moveLeft2 15s linear infinite;
}
</style>