介绍

经常可以在很多小程序内看到左右两个小卡片，我自己也经常写到，记录一下，后面用到直接复制粘贴即可

演示

代码

        <view class="two-box">
            <view class="one">
                <view class="content-left">
                    <view class="hdjh">
                        活动计划
                    </view>
                    <view class="hdjh-btn">
                        点击进入
                    </view>
                </view>
                <view class="content-right">
                    <tui-icon name="member-fill" color="rgb(77, 137, 134)" size="35"></tui-icon>
                </view>
            </view>
            <view class="two">
                <view class="content-left">
                    <view class="gzzd">
                        活动计划
                    </view>
                    <view class="gzzd-btn">
                        点击进入
                    </view>
                </view>
                <view class="content-right">
                    <tui-icon name="order" color="rgb(65, 154, 253)" size="35"></tui-icon>
                </view>
            </view>
        </view>

注意上面有用到tui的图标，直接换成图片或别的图标即可，网页使用可直接将view替换成div

.two-box{
        width: 96%;
        display: flex;
        justify-content: space-between;
        margin: 10px 2%;
    }
    .one{
        background-color: rgb(234, 248, 245);
        width: 40%;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        padding: 15px;
    }
    .content-left .hdjh{
        font-weight: 700;
        color: rgb(77, 137, 134);
    }
    .content-left .hdjh-btn{
        font-size: 11px;
        display: initial;
        color: #fff;
        font-weight: 500;
        border-radius: 10px;
        padding: 1px 3px;
        background-color: rgb(77, 137, 134);
    }
    .two{
        background-color: rgb(236, 242, 255);
        width: 40%;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        padding: 15px;
    }
    .content-left .gzzd{
        font-weight: 700;
        color: rgb(65, 154, 253);
    }
    .content-left .gzzd-btn{
        font-size: 11px;
        display: initial;
        color: #fff;
        font-weight: 500;
        border-radius: 10px;
        padding: 1px 3px;
        background-color: rgb(65, 154, 253);
    }