美文网首页
2023-12-18 备份

2023-12-18 备份

作者: 风中凌乱的男子 | 来源:发表于2023-12-17 22:02 被阅读0次
    <view class="weekList">
                    <view class="time-line">
                        <!-- 此处自定义了左边内容,用一个图标替代 -->
                        <view>
                            <view class="u-order-desc">
                                <view class="u-order-tip"></view>
                                <view class="u-order-status">
                                    <image src="https://pcsys.admin.ybc365.com/b12b625d-ddad-4373-be23-c912fc9d0c91.png"
                                        mode="widthFix"></image>
                                </view>
                                <view class="u-order-type org">
                                    2023-12-19
                                </view>
                                <view class="u-order-type">
                                    <text>一对一</text>
                                    初级感统课
                                </view>
                                <view class="u-order-time">
                                    <view class="l">
                                        <u-icon name="clock" size="30"></u-icon>
                                        <view class="time">2023-12-19 09:30-09:15
                                        </view>
                                    </view>
                                    <view class="r">
                                        <u-icon name="calendar" size='30'></u-icon>
                                        <text class="name">1课时</text>
                                    </view>
                                </view>
                                <view class="u-order-time">
                                    <view class="l">
                                        <u-icon name="heart" size="30"></u-icon>
                                        <text class="time name">陈妍希</text>
                                    </view>
                                    <view class="r">
                                        <u-icon name="account-fill" size="30"></u-icon>
                                        <text class="name">陈瑞生</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
    
    .weekList {
                    margin-top: 0upx;
    
                    
                    
                    
    
    
                            .u-order-title {
                                font-size: 30upx;
                                margin-bottom: 10upx;
                                padding-left: 20upx;
                            }
    
                            .u-order-desc {
                                margin-top: 20upx;
                                background: #fff;
                                padding: 20upx 20upx 20upx 30upx;
                                border-radius: 10upx;
                                position: relative;
                            }
    
                            .u-order-tip {
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                top: 0;
                                width: 13upx;
                                background: #448ef7;
                                border-radius: 10upx 0 0 10upx;
                            }
    
                            .u-order-status {
                                position: absolute;
                                top: -40upx;
                                right: -10upx;
    
                                image {
                                    width: 110upx;
                                    height: 100upx;
                                }
                            }
    
                            .org {
                                margin-bottom: 20upx;
                                font-weight: bold;
                                font-size: 32upx !important;
                            }
    
                            .u-order-type {
                                display: flex;
                                align-items: center;
                                font-size: 28upx;
    
                                text {
                                    background-color: #448ef7;
                                    padding: 2upx 16upx;
                                    color: #fff;
                                    border-radius: 60upx;
                                    font-size: 24upx;
                                    margin-right: 20upx;
                                }
                            }
    
                            .u-order-time {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                font-size: 26upx;
                                margin: 20upx 0 0 0;
                                color: #6c7c92;
    
                                .time {
                                    margin-left: 5upx;
    
                                }
    
                                .l {
                                    display: flex;
                                    align-items: center;
                                }
    
                                .name {
                                    font-size: 26upx;
                                }
    
                                .r {
                                    font-size: 26upx;
                                    display: flex;
                                    align-items: center;
    
                                    text.name {
                                        width: 80upx;
                                        margin-left: 8upx;
                                        flex: 1;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        /* 显示省略号 */
                                }
                            }
                    }
                }
    
    
            
    

    相关文章

      网友评论

          本文标题:2023-12-18 备份

          本文链接:https://www.haomeiwen.com/subject/ntwogdtx.html