当前博客：UI实战过程详解 - 仿美团优惠券样式(3)

190 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：前端看我

接下来再写中间部分的右边

右边就比左边简单的多了.直接看代码

.红包数值{
        字体-大小: 60rpx;
        文本颜色: 颜色值-红色;
    }
    .红包数值-下方提示{
        文本颜色: 颜色值-红色;
        字体-大小: 20rpx;
    }

毕竟只有文字,给上字体大小,文本颜色就行

中间基本完成,看一下底部的

 .底部部分{
        显示模式: 弹性布局;
        内容对齐: 两极间隔; 
    }

经典两行组合~看下效果,

.底部提示{
        上边距: 10rpx;
       文本颜色: 颜色值-灰色;
       高度: 18rpx;
       字体-大小: 18rpx;
       行高: 18rpx;
    }
    .使用按钮{
        背景-颜色: 颜色值-红色;
        内边距:8rpx;
        边框-圆角: 8rpx;
        文本颜色: 颜色值-白色;
        右边距: 20rpx;
    }

还是一些基本设置, 写样式我的建议~1.观察 2.大体写上 3.查漏补缺

接下来就要处理细节了.要高频率的对比设计稿,(我写的也不一定就是完全对的,样式这个东西,全凭个人审美,自己也可以优化,尽情发挥~)

今日到期这里,似乎超出了上面的加量惊喜抵扣券

我们给他加一点边距看看

.红包提示{
        背景-颜色: #FFE1B5;
        文本颜色: #DB5D34;
        宽度: 35%;
        左边距: 2%;
        下边距: 4%;
        边框-圆角: 10rpx;
        字体-粗细: 粗体;
        字体-大小: 20rpx;
        文本-对齐: 居中;
    }

处理下一个地方.中间右边部分似乎有点偏右了,显得右边有点挤.同样给他加一点边距

.红包数值{
        字体-大小: 60rpx;
        文本颜色: 颜色值-红色;
        右内边距: 20rpx;
    }

这样看起来就顺眼多了吧

下面的小字没跟上面对齐居中,再加上一行~ 文本-对齐:居中;

.红包数值-下方提示{
        文本颜色: 颜色值-红色;
        字体-大小: 20rpx;
        文本-对齐: 居中;
    }

就剩下面了.

下面跟中间部分有点挤,加一点上边距,都是凭感觉,给个20rpx吧

.底部部分{
        上边距: 20rpx;
        显示模式: 弹性布局;
        内容对齐: 两极间隔; 
    }

基本上就是这样了 ,我们再扣扣细节.例如按钮的内边距,似乎有点方了,

现在是内边距的上下左右都一样,我们让他长一点,上下边距少给一些,左右的多给一些

细心的兄弟还发现了按钮的背景色.他不是纯色!

是带一点渐变色的.

.使用按钮{
        背景-图像: 线性渐变(to 右侧,#FC720d, #FF415B);
        内边距:4rpx  8rpx;
        边框-圆角: 8rpx;
        文本颜色: 颜色值-白色;
        右边距: 20rpx;
    }

最后基本上这个样子就跟设计稿的大差不差了.

这样就完成了一个精美的组件.

我们在写自己的组件的时候,不是要完全抄,要针对自己的功能进行修改,以借鉴为主.

想起我小学同桌抄我英文作业把我名字也抄过去了....

好了本篇文章到此结束.欢迎投稿~

附上代码~1680158723854948.zip

评论信息

默认排序 

当前博客：UI实战过程详解 - 仿美团优惠券样式(3)

测试账号

热门博客

最新博客

UI实战过程详解 - 仿美团优惠券样式(3)