标签：九宫格 transition top 元素 0.5 height width 选中 font

@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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。