组件杠杠结构

效果图：

<view class="content-four"><view class="content-text">订单信息</view><view  class="content-textBot" style="border-top: 1px solid #F2F2F2;" ><view class="content-textBot-l">订单编号：2020454585859687458965<br/>下单时间：2019-02-16&nbsp;&nbsp;15:36:25<br/>报价时间：2019-02-16&nbsp;&nbsp;15:36:27</view></view>			</view> 

.content-four{width: 702rpx;/* height: 200rpx; */// background: #096;// background: #FFFFFF;margin: 0 auto;margin-top: 24rpx;border-radius: 24rpx 24rpx 24rpx 24rpx;border: 1rpx solid #F2F2F2;.content-text{/* width: 654rpx; */height: 100rpx;line-height: 100rpx;border-radius: 0rpx 0rpx 0rpx 0rpx;border: 1rpx solid #ffffff;// background-color: #555;margin-left: 14rpx;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 30rpx;color: #333333;text-align: left;font-style: normal;text-transform: none;}.content-textBot{width: 702rpx;height: 178rpx;background: #FFFFFF;border-radius: 0rpx 0rpx 0rpx 0rpx;.content-textBot-l{//  background-color: #096;width: 510rpx;height: 130rpx;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #999999;line-height: 42rpx;margin-top: 24rpx;margin-left: 12rpx;text-align: left;font-style: normal;text-transform: none;}}
}

简单结构

效果图

<view class="content-one">

            <view class="content-inp">

               

            </view>

            <view style="border-top: 1px solid #F2F2F2;" >

               

            </view>        

      </view>  

css部分：

.content-one{

    width: 702rpx;

    height: 200rpx;

    // background: #096;

    // background: #FFFFFF;

    margin: 0 auto;

    margin-top: 24rpx;

    border-radius: 24rpx 24rpx 24rpx 24rpx;

    border: 1rpx solid #F2F2F2;

}

.content-inp{

    width: 654rpx;

    height: 100rpx;

    border-radius: 0rpx 0rpx 0rpx 0rpx;

    border: 1rpx solid #ffffff;

    // background-color: #555;

    margin-left: 24rpx;

}