首页
   /       /   
经常用到的小程序左右卡片
12月
2
经常用到的小程序左右卡片
作者:大彭Sir    分类: 教学教程

介绍

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

演示

代码

        <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);
    }
本文标签:标签: css HTML uniapp
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录