css实现订单类似右下角√钩选中

<div class="receiverInfo">
            <div class="receiverInfo-box" v-for="(item, index) in receiverInfo" :key="index"
                @click="toggleSelection(index)" :class="{ 'selected-box': selectedItem === index }">
                <span class="item">{{ item.name }}</span><br>
                <span class="item">{{ item.phone }}</span> <span class="address-button"><el-button size="mini"
                        @click="EditAddress">修改</el-button></span><br>
                <div class="item address-detail">{{ item.addressDetail }}</div>
            </div>
        </div>

.receiverInfo {
    width: 100%;
    height: 170px;
    /* background-color: pink; */
    text-align: start;
    display: flex;
}

.receiverInfo-box {
    width: 230px;
    height: 120px;
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    margin-top: 20px;
    margin-left: 15px;
    padding: 10px;
    font-size: 14px;
}

.address-detail {
    margin-top: 25px;
}

.address-button {
    float: right;
}

/* 选中盒子样式 */
.selected-box {
    border: 1px solid #20a0ff;
    /* 设置选中时的边框样式 */
    /* 可以添加其他样式 */
    color: #20a0ff;
    position: relative;
    transition: all 0.5s ease;
}

.selected-box ::after {
    content: '✔';
    display: block;
    height: 0px;
    width: 0px;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    /**对号大小*/
    font-size: 10px;
    line-height: 8px;
    border: 10px solid;
    border-color: transparent #4884ff #4884ff transparent;
}

export default {
    data() {
        return {
            // 收货人信息
            receiverInfo: [{
                id: 1,
                name: '江小白',
                phone: '12256235623',
                address: '浙江省 杭州市 萧山区',
                addressDetail: '杭州市萧山区区西湖博览园',
            }, {
                id: 1,
                name: '江小白',
                phone: '12256235623',
                address: '浙江省 杭州市 萧山区',
                addressDetail: '杭州市萧山区区西湖博览园',
            }],
            selectedItem: null,
            dialogVisible: false,//编辑地址的弹窗
            form: {
                name: ''
            }
        }
    },
    methods: {
        toggleSelection(index) {
            console.log(index, '我选中box')
            // 切换选中状态
            this.selectedItem = this.selectedItem === index ? null : index;
        },
        // 修改地址
        EditAddress() {

        }
    }
}