美文网首页
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