html,
body {
  height: 100%;
}
.mini-index {
  position: relative;
  height: 100%;
  width: 7.5rem;
  margin: 0 auto;
  background: url('/template/huabang/pc/img/mobile_index/bg.png') no-repeat;
  background-size: 100% 100%;
}
.mini-index .item {

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
  width: 2.96rem;
  height: 2.77rem;
  
  	outline:none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.mini-index .item img {
  width: .55rem;
  height: .49rem;
  margin-bottom: .2rem;
}
.mini-index .item span {
  font-size: .3rem ;
}
.mini-index .item:nth-of-type(1) {
  background-image: url('/template/huabang/pc/img/mobile_index/blue_bg.png');
  color: #3c92ff;
  top: .7rem;
  left: .6rem;
}
.mini-index .item:nth-of-type(2) {
  background-image: url('/template/huabang/pc/img/mobile_index/green_bg.png');
  color: #67b86b;
  top: 1.81rem;
  left: 2.55rem;
}
.mini-index .item:nth-of-type(3) {
  background-image: url('/template/huabang/pc/img/mobile_index/yellow_bg.png');
  color: #ffa133;
  top: 2.95rem;
  left: .6rem;
}
.mini-index .item:nth-of-type(4) {
  background-image: url('/template/huabang/pc/img/mobile_index/darkblue_bg.png');
  color: #5663cd;
  top: 4.04rem;
  left: 2.55rem;
}
.mini-index .item:nth-of-type(5) {
  background-image: url('/template/huabang/pc/img/mobile_index/darkgreen_bg.png');
  color: #56b3a7;
  top: 2.95rem;
  left: 4.51rem;
}
.mini-index .item:nth-of-type(6) {
  background-image: url('/template/huabang/pc/img/mobile_index/darkblue_bg.png');
  color: #5663cd;
  top: 6.25rem;
  left: 2.55rem;
}
.mini-index .item:nth-of-type(7) {
  background-image: url('/template/huabang/pc/img/mobile_index/yellow_bg.png');
  color: #ffa133;
  top: 7.4rem;
  left: .6rem;
}
.mini-index .item:nth-of-type(8) {
  background-image: url('/template/huabang/pc/img/mobile_index/green_bg.png');
  color: #67b86b;
  top: 8.5rem;
  left: 2.55rem;
}
.mini-index .item:nth-of-type(9) {
  background-image: url('/template/huabang/pc/img/mobile_index/red_bg.png');
  color: #dd5151;
  top: 7.4rem;
  left: 4.51rem;
}
.mini-index .item:nth-of-type(10) {
  background-image: url('/template/huabang/pc/img/mobile_index/red_bg.png');
  color: #dd5151;
  top: 9.61rem;
  left: 4.51rem;
}
<!--8.7976455688477E-5-->