快安排你的盆友抽新年红包啦！

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

迎新年 红包当然是少不了的啦，这里的红包开出来不一定是money哦，也可以是小礼品。改变contentList中的内容即可，这里reset方法会对contentList进行一次打乱，这样子抽出来的就是随机的了

        var contentList = [{
                    content: "恭喜获得 红包66.66",
                },{
                    content: "恭喜获得 红包88.88",
                },{
                    content: "恭喜获得 红包168.88",
                },{
                    content: "恭喜获得 牛奶一箱",
                },{
                    content: "恭喜获得 30秒零食购物一次",
                }]
     
        function reset(){
            contentList.sort(function() {
                return (0.5-Math.random());
            });
            alert("已打乱")
        }
        reset()
        let vm = new Vue({
            el: "#app",
            data: {
                contentList
            }
        })

不要忘记引用vue 的js文件哦

<script src="./static/vue-2.4.0.js"></script>

使用for循环将contentList数组遍历出来，添加css样式，就会变成一个一个小红包的样式了，这里是用的红包封面图片是需要自己设置路径的./static/img/huhu.jpg，就是那只小老虎，是在网上找的图

    <div class="reset" onclick="reset()">打乱顺序</div>

    <div id="app">
        <ul v-for="(item,index) in contentList">
            <li>
                <div class="box">
                    <div class="imgBox"> 
                        <img src="./static/img/huhu.jpg" alt="">  
                        <div class="btn">开</div>
                    </div>
                </div>
                <p> {{item.content}}</p>              
            </li>
        </ul>
    </div>

接下来就是css样式啦，在外层 #app 开启弹性盒模型 , 解决contentList显示间距问题，使用space-between两端对齐，项目之间的间隔都相等

    <style>
        *{
            margin: 0 ;
            padding: 0 ;
        }
        
        #app{
            width: 1200px;
            height: 300px;
            margin: 50px auto ;
            display: flex ;
            justify-content: space-between;
        }
        .reset{
            background-color:#A53D3C;
            color: white;
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 50px auto;
            text-align: center;
            cursor: pointer;
        }
        #app ul{
            width: 1000px;
            height: 300px;
            list-style-type: none ;
        }
        #app li{
            width: 200px;
            height: 300px;
            position: relative;
        }
        .box{
            width: 200px;
            height: 320px;
            background-color: #A53D3C;
        }
        .btn{
            width: 70px;
            height: 70px;
            background-color: #FFA841;
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            margin-top: 20px;
        }

改变 显示奖励的 p 的位置绝对定位，使得和红包封面在同样大小和位置，当鼠标没有浮动到红包上时，默认就是img翻转为0度，也就是正面显示， p则翻转为90度，被遮挡消失。当浮动的时候则翻转改变形式，也就是两者同一时间有一个正面，一个侧面

        img{
            width: 200px;
            height: 200px;
            transform: rotateY( 0deg );  /* 显示 */
            transition: 1s ;
            border-radius: 45%;
        }
        p{
            position: absolute;
            left: 0 ;  top: 0 ;
            width: 200px;
            height: 220px;
            background-color: rgba(0,0,0,0.8);
            color: #fff;
            text-align: center;
            padding-top: 100px;

            transform: rotateY( 90deg ); /* 消时不见 */
            transition: 1s ;
        }
        #app ul li:hover p {
            transform: rotateY( 0deg );
        }
        #app ul li:hover img {
            transform: rotateY( -90deg );
            
        }
    </style>

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

变换 ： 旋转（角度）

rotateY(angle)	定义沿着 Y 轴的 3D 旋转。

祝大家新年快乐呀 虎年大吉 🐅🍊