yihuo/pages/award_detail/top.vue

<template>
    <view class="wrapper-1">
        <view class="titleBox">
            <view class="title" :style="{width:data.name.length*60+'rpx',transform: 'translateX('+data.name.length*60+'rpx'+')'}">{{ data.name }}</view>
        </view>

        <view class="overflow-hidden">
            <barrage ref="barrage" animal-id="barrage3" />
        </view>
    </view>
</template>

<script>
    import resource from '@/utils/resource'
    import barrage from './../award/barrage.vue'

    export default {
        components: { barrage },
        props: {
            data: Object,
            horse: Array,
            type: [Number,String]
        },
        data() {
            return {
                resource
            }
        },
        watch: {
            horse(newValue) {
                this.$refs.barrage.start(newValue)
            }
        },
        mounted() {
            this.$refs.barrage.start(this.horse)
        },
        computed: {
            hide() {
                return !this.$store.state.hide
            }
        },
        methods: {
            showRecord() {
                this.$emit('onShowRecord', true)
            },
            showRule() {
                this.$router.push('playing_method', { type: this.type })
            },
            showUpdate() {
                this.$emit('onShowUpdate', true)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .wrapper-1 {
        margin: 20rpx 24rpx;
        padding: 0 28rpx;
        .titleBox {
            // transform: translate(-50%, -50%);
            margin: auto;
            width: 540rpx;
            overflow: hidden;
            margin-bottom: 34rpx;
        }
        .title {
            margin: auto;
            white-space:nowrap;
            min-width: 540rpx;
            width: auto;
            font-size: 59rpx;
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: 700;
            line-height: 58rpx;
            background: linear-gradient(357deg, #000 0%, #333 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: roll 10s infinite linear;
        }
    }

    @keyframes roll {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
</style>