前端vue3 巧妙的checkbox 选中框样式

我们 做前端页面交互效果的时候 

我们会使用到 checkbox 复选框 做一些交互的效果

我是用的是 nut-ui 组件库中的 checkbox 组件

类似于这样的选中效果

假如 二选一的那种 可以 这样写 交互好看 而不是单纯的 checkbox 框

这里我就不使用 gif 图片了 

大家应该都可以看懂的

我把代码 和样式放在下面

大家可以看看 都应该能看懂的

<template>
    <div class="order-detail-type-container">
        <nut-cell-group title="购票方式">
            <nut-cell>
                <div class="purchase-type-container">
                    <div class="item" :class="{ active: !isSpeedTicket }" @click="() => {
                        isSpeedTicket = false;
                    }
                        ">
                        <div class="content">
                            <div class="title">
                                <div class="icon">
                                    <IconFont font-class-name="iconfont" class-prefix="icon" name="tuipiao" />