<template>
<view class="steps">
<view class="list" v-for="(item,index) in listArr":key="index">
<view class="left-time">
<text class="data-da">
12-12
</text>
<view class="weeks">
12:03
</view>
<view class="round"></view>
<view class="line-line"></view>
</view>
<view class="right">
<view class="zheng-result">
<image class="linit-wh" v-if="item.imageBz" :src="item.imageBz"></image>
</view>
<view class="cont-modeule">
<view class="top-box">
<txet class="name-name">{{item.userName}}</txet>
<text class="name-leave-finsh">
完成
</text>
</view>
<view class="class-hygiene">
<view class="contentText">
{{item.fullMessage }}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
listArr:[
{
fullMessage: "啊倒萨说的阿松大阿松大阿阿松大暗时",
imageBz: "https://img01.yzcdn.cn/vant/cat.jpeg",
userName: "老师",
},
{
fullMessage: '啊倒萨说的阿松大阿松大1',
imageBz: "https://img01.yzcdn.cn/vant/cat.jpeg",
taskDefName: "家长",
userId: "577275925884964864",
userName: "教导主任",
},
{
fullMessage: '啊倒萨说的阿松大阿',
imageBz: "https://img01.yzcdn.cn/vant/cat.jpeg",
taskDefName: "班主任",
userId: "598488801660243968",
userName: "校长",
}
]
}
}
}
</script>
<style lang="scss">
page{
height: 100%;
background-color: #F7F7F7;
padding-top: 50rpx;
}
.list{
display: flex;
.left-time{
display: flex;
flex-direction: column;
align-items: center;
156rpx;
padding-top: 24rpx;
position: relative;
.data-da{
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
color:#909399;
}
.weeks{
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
color: #909399;
}
.round{
28rpx;
height: 28rpx;
background-color: #4A80F6;
position: absolute;
top: 60rpx;
right: -14rpx;
border: 4rpx solid #4A80F6;
border-radius: 50%;
z-index: 10;
}
.line-line{
position: absolute;
top: 60rpx;
right: 3rpx;
height: 100%;
1rpx;
border: 1rpx solid #4A80F6;
}
}
// 右边的部分哈
.right{
518rpx;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
margin-left: 32rpx;
margin-bottom: 32rpx;
display: flex;
padding: 33rpx 24rpx 31rpx;
.zheng-result{
56rpx;
height: 56rpx;
margin-right: 25rpx;
.linit-wh{
56rpx;
height: 56rpx;
border-radius: 50%;
}
}
.cont-modeule{
// 换行显示
word-break:break-all;
word-wrap:break-word;
.top-box{
.name-name{
font-size: 28rpx;
font-family: PingFang SC Medium, PingFang SC Medium-Medium;
font-weight: 500;
color: #303133;
margin-right: 10rpx;
}
.name-leave-finsh{
font-size: 28rpx;
font-family: PingFang SC Medium, PingFang SC Medium-Medium;
font-weight: 500;
color: #909399;
}
}
.class-hygiene{
.contentText{
font-size: 24rpx;
font-family: PingFang SC Medium, PingFang SC Medium-Medium;
font-weight: 500;
color: #909399;
}
}
}
}
&:last-child .line-line{
border: none !important;
}
}
</style>