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

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;

top: 4px;

width: 317px;

height: 317px;

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

background-size: 317px 317px;

}

.start {

position: relative;

padding-top: 70px;

width: 86px;

height: 86px;

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

background-size: 86px 86px;

p {

text-align: center;

font-size: 12px;

font-weight: 400;

color: rgba(255, 255, 255, 1);

}

}

ul {

li {

position: absolute;

width: 86px;

height: 86px;

background: rgba(255, 255, 255, 1);

border: 2px solid rgba(227, 161, 0, 1);

border-radius: 8px;

.img1 {

margin: 15px auto 3px;

width: 35px;

height: 35px;

img {

width:100%;

height: auto;

}

}

p {

text-align: center;

font-size: 13px;

font-weight: 500;

color: rgba(153, 153, 153, 1);

}

}

.item1 {left: 25px;top: 25px;}

.item2 {left: 120px;top: 25px;}

.item3 {left: 215px;top: 25px;}

.item4 {left: 215px;top: 120px;}

.item5 {left: 215px;top: 215px;}

.item6 {left: 120px;top: 215px;}

.item7 {left: 25px;top: 215px;}

.item8 {left: 25px;top: 120px;}

.active {background: #FFF2B1;}

}

}