Taro页面布局

jsx

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import './index.scss'
@connect(({ myInvite }) => ({
  ...myInvite,
}))
class MyInvite extends Component {
  config = {
    navigationBarTitleText: '入职邀请',
  }

  componentDidShow = () => {
    
  }
  onReachBottom() {
    
  }
  render() {
    return (
      <View className='invite-page'>
        <View className='invite-item'>
            <View className='left'>
              <View className='title'>普工</View>
              <View className='company'>江苏XX科技</View>
              <View className='address'>中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX</View>
              <View className='date'>邀请时间:2020-05-05 15:15</View>
            </View>
            <View className='right'>
              <View className='status'>入职邀请</View>
              <View className='info'>查看入职信息</View>
            </View>
          </View>

          <View className='invite-item'>
            <View className='left'>
              <View className='title'>普工</View>
              <View className='company'>江苏XX科技</View>
              <View className='address'>中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX中国电子商务产业园XX</View>
              <View className='date'>邀请时间:2020-05-05 15:15</View>
            </View>
            <View className='right'>
              <View className='status-failure'>已失效</View>
              <View className='info'>查看入职信息</View>
            </View>
          </View>
      </View>
    )
  }
}

scss

@import "../../assets/scss/common";

page {
  background-color: $color_7;
}

.invite-page {
  .invite-item {
    margin: 0 30px;
    height: 250px;
    border-bottom: solid 1px #E3E3E3;
    display: flex;
    .left {
      width: 450px;
      .title {
        margin-top: 40px;
        font-size: 32px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }

      .company {
        margin-top: 25px;
        font-size: 24px;
        height: 24px;
        line-height: 24px;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }

      .address {
        margin-top: 20px;
        font-size: 24px;
        height: 24px;
        line-height: 24px;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }

      .date {
        margin-top: 25px;
        font-size: 26px;
        height: 26px;
        line-height: 26px;
        font-weight: 500;
        color: rgba(55, 124, 243, 1);
      }
    }

    .right {
      width: 240px;
      .status {
        margin-top: 40px;
        text-align: right;
        font-size:28px;
        height: 28px;
        line-height: 28px;
        font-weight:bold;
        color:rgba(55,124,243,1);
      }
      .status-failure {
        @extend .status;
        color:#999999;
      }
      .info {
        margin-left:50px;
        margin-top: 50px;
        text-align: center;
        width:190px;
        height:56px;
        background:rgba(55,124,243,1);
        border-radius:4px;
        font-size:26px;
        line-height: 56px;
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
    }
  }
}

来源：oschina

链接：https://my.oschina.net/u/4352934/blog/4269163