左右可滑动的奖品栏（组件）

左右可滑动的div，一开始开发的时候以为十分简单，便直接在网上找了组件去引用，发现都存在了少许的问题，与需求不符，所以自己写了一个。直接引用即可。

<template>

<div class="rankingReward">

    <div class="ranking-title"></div>

    <div class="ranking">

        <div class="rankingSlider">

            <img src="../../../assets/act_greenHat/第1名奖励.png" alt="">

            <img src="../../../assets/act_greenHat/第2名奖励.png" alt="">

            <img src="../../../assets/act_greenHat/第3名奖励.png" alt="">

            <img src="../../../assets/act_greenHat/第4名奖励.png" alt="">

            <img src="../../../assets/act_greenHat/第5-10名奖励.png" alt="">

        </div>

        </div>

    </div>

</template>

<script>

export default {

    name: "rankingReward",

    props: {

        msg: String

    },

    data() {

        return {

        };

    }

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>

.ranking-title {

    width: 100%;

    height: 28px;

    background: url("../../../assets/act_greenHat/标题-排行榜前十奖励.png") no-repeat;

    background-size: 240px 100%;

    background-position: 50%;

    margin-bottom: 46px;

    border-radius: none;

}

    .ranking {

        // width: 1000px;

        width: 100%;

        overflow: scroll;

        .rankingSlider {

            width: 1000px;

            height: 250px;

            overflow: hidden;

            img {

                width: 180px;

                display: inline-block;

                height: 248px;

                margin: 0 5px;

                &:nth-child(1) {

                    margin-left: 30px;

                }

            }

        }

    }

</style>

注

-确保最内存的div是不可以滑动的，即overflow为hidden，最重要的是最内层的div的宽度要足够容纳所有的图片，各种奖品的样式就不做细说

-确保倒数第二层的div是可以滑动的，即overflow为scorll，宽度设定为足够的即可。