zoukankan      html  css  js  c++  java
  • 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 {
           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 {
           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;
            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);
          }
        }
      }
    }
    
    
  • 相关阅读:
    CentOS6下OpenLDAP+PhpLdapAdmin基本安装及主从/主主高可用模式部署记录
    Curl运维命令
    kafka 基础知识梳理及集群环境部署记录
    RocketMQ 简单梳理 及 集群部署笔记
    Redis哨兵模式(sentinel)学习总结及部署记录(主从复制、读写分离、主从切换)
    Redis+Keepalived高可用环境部署记录
    Centos下Nodejs+npm环境-部署记录
    基于Ping和Telnet/NC的监控脚本案例分析
    linux dig 命令使用方法
    dnsjava usage
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12838037.html
Copyright © 2011-2022 走看看