<view class="stuMsgBox" v-for="(item,index) in records" :key="index" @click="lookDetial(item)">
  <view class="flex">
    <view>{{item.staffName}}</view>
    <view>{{dateCurrentStr}}</view>
  </view>
  <view style="margin: 20rpx 0;">{{item.projectName}}</view>
  <view style="color: #AAAAAA;">{{item.time}}</view>
  <view :class="item.type == 'IN_SCH'?'selected-in':'selected-out'"></view>
</view>

    .stuMsgBox {
        box-sizing: border-box;
        padding: 20rpx 40rpx;
        background-color: white;
        border-radius: 20rpx;
        color: #444444;
        font-size: 32rpx;
        margin: 30rpx 10rpx;
        position: relative;
    }
    .selected-in:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        border-bottom: 60px solid #40C997;
        border-left: 60px solid transparent;
        border-bottom-right-radius: 10rpx;
    }

    .selected-in:before {
        content: '进校';
        position: absolute;
        background: transparent;
        bottom: 20rpx;
        right: 10rpx;
        color: white;
        font-size: 30rpx;
        -webkit-transform: rotate(-50deg);
        -ms-transform: rotate(-50deg);
        transform: rotate(-50deg);
        z-index: 9;
    }
    .selected-out:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        border-bottom: 60px solid #F0573E;
        border-left: 60px solid transparent;
        border-bottom-right-radius: 10rpx;
    }

    .selected-out:before {
        content: '离校';
        position: absolute;
        background: transparent;
        bottom: 20rpx;
        right: 10rpx;
        color: white;
        font-size: 30rpx;
        -webkit-transform: rotate(-50deg);
        -ms-transform: rotate(-50deg);
        transform: rotate(-50deg);
        z-index: 9;
    }

demo.png