<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;
/* 显示省略号 */
}
}
}
}
网友评论