vue 图片宫格_微信小程序多宫格/九宫格抽奖 基于vue来写

/*整体布局采用定位实现

gameBox:父盒子，最外层背景图

bg1:灰色灯

bg2:点击开始按钮后，白色灯出现，同时要每个500s同bg1做切换隐藏显示

start：按钮样式

item1-8:通过定位方式将dom元素顺时针排列

active：点击开始开妞后，从1位置开始高亮，类似跑马灯*/.gameBox {

display: flex;

align-items: center;

justify-content: center;

width: 326px;

height: 326px;

margin: 150px auto0;

border-radius: 8px;

background: url(../../static/images/activity/shop.png)no-repeat left top;

background-size: 326px 326px;

position: relative;

.bg1 {

position: absolute;

left:4.5px;

top: 4px;

width: 317px;

height: 317px;

background: url(../../static/images/activity/shop.png)no-repeat center;

background-size: 317px 317px;

}

.bg2 {

position: absolute;

left:4.5px;