主页（六）-租房小组——sass环境-样式是嵌套关系-&代表父级选择器-一动全动 & Grid 宫格-布局

主页（六）-租房小组——sass环境-样式是嵌套关系-&代表父级选择器-一动全动 & Grid 宫格-布局

• 基本布局-标题布局
  • 安装sass环境-样式是嵌套关系
    • yarn add node-sass
    • 新建.scss文件

<div className="group">
  <Flex className="group-title" justify="between">
    <h3>租房小组</h3>
    <span>更多</span>
  </Flex>
</div>

.group {
    overflow: hidden;
    padding: 0 10px;
    background-color: #f6f5f6;
    &-title {
        margin: 15px 0 15px 0;
        h3 {
            font-size: 15px;
        }
        span {
            font-size: 14px;
            color: #787d82;
        }
    }
}

• 获取租房小组数据

loadGroup = async () => {
  // 加载租房小组数据
  let res = await axios.get('home/groups')
  this.setState({
    groups: res.data.body
  })
}

network查看租房小组数据

Grid 宫格：https://mobile.ant.design/components/grid-cn/

• 基本布局-宫格布局
  • data表示空格需要的数据
  • columnNum表示空格的列数
  • square是否为正方形
  • renderItem用于渲染单个空格的布局

<Grid
  data={this.state.groups}
  columnNum={2}
  square={false}
  renderItem={this.renderGridItem}
/>
//-----------------------------------------------------
renderGridItem = (item) => {
  return (
    <Flex className="grid-item" justify="between">
      <div className="desc">
        <h3>{item.title}</h3>
        <p>{item.desc}</p>
      </div>
      <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
    </Flex>
  )
}

index.scss文件

.group {
    // 宫格
    .am-flexbox {
        margin-bottom: 10px;
        background-color: transparent;
        .am-grid-item {
            margin-right: 0;
            background-color: #fff;
            &:first-child {
                margin-left: 10px;
            }
        }
    }
    .grid-item {
        padding: 0 13px;
        .desc {
            h3 {
                margin-bottom: 5px;
                font-size: 13px;
            }
            p {
                color: #999;
                font-size: 12px;
            }
        }
        img {
            width: 55px;
        }
    }
}

租房小组效果