九宫格布局，选中占4个元素位置

@import "../../../../styles/variables.scss";

.modelPage{
  .small_big {
    margin-top: 30px;
    position: relative;
    //  width: 750px;
    height: 250px;
    width: 100%;
    &:first-of-type{
      margin-top: 0;
    }
    &.big {
      height: 500px;
    }
  }
  
  .small {
    width: 210px;
    height: 240px;
    position: absolute;
    transition: all 0.5s;
    background-color: #fff;
    .icon-name{
      border-radius: 50%;
      border: 2px solid $textborderColor;
      color: $textborderColor;
      font-size: 22px;
      width: 72px;
      height: 72px;
      transition: all 0.5s;
      text-align: center;
      line-height: 72px;
    }
    .operationNameBar{
      height: 90px;
    }
    .operationName{
      font-size: 26px;
      // margin-top: 30px;
      color: $textborderColor;
      // font-weight: 600;
    }
    .operationiconImg {
      width: 72px;
      height: 72px;
      transition: all 0.5s;
  
    }
  
    .iconSize {
      width: 100%;
      height: 100%;
      transition: all 0.5s;
    }
    
    &.small_Left {
      left: 0;
      top: 0;
      transition: all 0.5s;
    }
  
    &.small_center {
      left: 230px;
      top: 0;
      transition: all 0.5s;
    }
  
    &.small_right {
      left: 460px;
      top: 0;
      transition: all 0.5s;
    }
  
    &.small_big_left {
      width: 440px;
      z-index: 2;
      height: 500px;
      left: 0;
      top: 0;
      transition: all 0.5s;
      color: #12A5FF;
  
      .operationiconImg {
        width: 202px;
        height: 202px;
        transition: all 0.5s;
        .iconSize{
  
        }
  
      }
      .icon-name{
        border-radius: 50%;
        // border: 4px solid $activeColor;
        border-color: $activeColor;
        border-width: 4px;
        color: $activeColor;
        font-size: 40px;
        width: 202px;
        font-weight: 600;
        height: 202px;
        transition: all 0.5s;
        text-align: center;
        line-height: 202px;
       
      }
      .operationName{
        margin-top: 20px;
        font-size: 36px;
        font-weight: 600;
        color: $activeColor;
        transition: all 0.5s;
      }
      .operationNameBar{
        height: 180px;
        .edit{
          width: 106px;
          height: 40px;
          line-height: 40px;
          font-size: 28px;
          border-radius: 40px;
        }
        view{
          padding: 5px 0;
        }
      }
      .text2{
        margin-top: 12px;
        color: #686868;
        font-size: 26px;
      }
    }
  
    &.small_big_top {
      left: 460px;
      top: 0;
      transition: all 0.5s;
    }
  
    &.small_big_bottom {
      left: 460px;
      top: 260px;
      transition: all 0.5s;
    }
  
  }
}
.edit{
  width: 90px;
  height: 36px;
  line-height: 36px;
  font-size: 22px;
  color: #999;
  border-radius: 36px;
  border: 2px solid #999;
  text-align: center;
  margin-top: 12px;
 
}

 render() {
    let row = [], 
    rowPage = [],
     activeScene=this.activeScene,
     imgList = modelimage
    let pageContent = this.props.modelList.map((item, i) => {
      let itemContent = (
        <View className={'shadow small flexCenter columnFlex ' + classNameByIndex(activeScene, i)} onClick={() => this.changeSence(i, item)} key={i}>
          <View className="operationiconImg">
            {
              imgList[item.code]||imgList[item.name]? <Image className={`iconSize ${activeScene == i ? 'brightness1' : 'brightness0'}`} src={imgList[item.code]||imgList[item.name]}></Image>:<View className="icon-name">{showName_two(item.name)}</View>
            }
          </View>
          <View className="flexCenter columnFlex operationNameBar">
            <View className="operationName">{item.name}</View>
            <View className="text2" style={activeScene != i && 'display: none;' }>当前选中场景</View>
            {
              (item.code == '0xC1'||item.sceneCode == '999' ||item.name=='自定义模式')&& <View className="edit" onClick={(e) => this.toEdit(e)}>编辑</View> 
            }
          </View>
        </View>
      )

      row.push(itemContent)
      if (row.length >= 3 || i == this.props.modelList.length - 1) {
        rowPage.push(
          <View className={' small_big ' + `${activeScene >= 0 && Math.floor(activeScene / 3) == Math.floor(i / 3) && 'big' }`}>
            {row}
          </View>
        )
        row = []
      }
      if (i == this.props.modelList.length - 1) {
        return rowPage
      }

    })
    return (
      <View className="modelPage">
        {pageContent}
      </View>
    )



  }

标签：九宫格,transition,top,元素,0.5,height,width,选中,font
来源： https://blog.csdn.net/xue_nahan/article/details/120419626