flamingo-ui/es/square-nine/index.css

火烈鸟UI组件库

.fmg-square-nine{height:357px;width:100%;flex-shrink:0;overflow:auto;display:flex;flex-wrap:wrap;justify-content:space-between;padding:12px;box-sizing:border-box;perspective:1000}.fmg-square-nine .nine-ninegrid__item{position:relative;width:103px;height:103px;transition:all .3s ease}.fmg-square-nine .nine-ninegrid__item:nth-child(5){z-index:11}.fmg-square-nine .nine-ninegrid__item .front,.fmg-square-nine .nine-ninegrid__item .back{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;padding:9px 8px 0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-image:linear-gradient(#ffefd1,#ffc8a4);transition:1s;transform-style:preserve-3d;display:flex;flex-direction:column;align-items:center}.fmg-square-nine .nine-ninegrid__item .front>p,.fmg-square-nine .nine-ninegrid__item .back>p{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:PingFangSC-Medium;text-align:center;font-size:13px;height:15px;margin-bottom:3px;color:#2e2d2d;flex-shrink:0}.fmg-square-nine .nine-ninegrid__item .front>img,.fmg-square-nine .nine-ninegrid__item .back>img{width:71px;height:71px;flex-shrink:0}.fmg-square-nine .nine-ninegrid__item .front{z-index:2;padding:0;justify-content:center;transform:rotateY(0)}.fmg-square-nine .nine-ninegrid__item .back{transform:rotateY(-180deg)}.fmg-square-nine .nine-ninegrid__item .prize__container{width:71px;height:71px;flex-shrink:0;display:flex;justify-content:center;align-items:center}.fmg-square-nine .nine-ninegrid__item .prize__container img{width:auto;height:auto}.fmg-square-nine .nine-ninegrid__item.active .front{transform:rotateY(180deg)}.fmg-square-nine .nine-ninegrid__item.active .back{transform:rotateY(0)}.fmg-square-nine .nine-ninegrid__item .nine-ninegrid__item__center{border-radius:8px;overflow:hidden;background-image:linear-gradient(#ff733e,#ff4e57);border:1px solid #ffa07c;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.fmg-square-nine .nine-ninegrid__item .nine-ninegrid__item__center>img{width:15px;height:16px}.fmg-square-nine .nine-ninegrid__item .nine-ninegrid__item__center>img.rotate{animation-name:box-rotate;animation-duration:1s}.fmg-square-nine .nine-ninegrid__item .nine-ninegrid__item__center>span{font-family:PingFangSC-Medium;font-size:16px;color:#ffd4a7}.fmg-square-nine .nine-ninegrid__item .nine-ninegrid__item__center>p{font-family:PingFangSC-Medium;font-size:12px;color:#ffd4a7}@keyframes box-rotate{0%{transform:translate(0) rotate(0)}to{transform:translate(0) rotate(360deg)}}