1. 云期刊首页
  2. 建站教程

萤火小程序商城给前端和商品组件增加“购买”按钮的方法

萤火小程序商城的商品组件没有“去购买”按钮,前端页面看起来左端重右端轻,整体不太协调。但是萤火小程序商城是一款开源的小程序源码,可以自己修改代码添加去购买按钮,具体方法如下:

小程序前端添加“去购买”按钮

1、修改小程序前端页面样式文件

小程序前端页面样式文件,路径为components/diy/goods/goods.wxss,打开页面样式文件,在末尾添加“去购买”按钮样式代码。

/* 去购买按钮 */

.goods-item .btn-settlement {
position: absolute;
right: 0;
bottom: 0;
padding: 0 28rpx;
border-radius: 40rpx;
background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
box-shadow: 0 4rpx 20rpx -4rpx rgb(235, 53, 107);
font-size: 28rpx;
line-height: 54rpx;
text-align: center;
color: #fff;
}

2、修改小程序前端页面文件

小程序前端页面文件,路径为components/diy/goods/goods.wxml,打开页面文件,在第35行添加下面的代码。

<view class="btn-settlement">去购买</view>

小程序后台的商品组件添加“去购买”按钮

1、修改商品组件文件

后端商品组件编辑文件路径为/source/application/store/view/wxapp/page/edit.php,在第410行加入下面的代码:

<div class="btn-settlement">去购买</div>

2、修改商品组件样式文件

商品组件样式文件路径为/assets/store/css/diy.css,为了保证代码的规范,在第447行加入下面的代码:

.work-diy .diy-phone .phone-main .diy-goods .goods-item .btn-settlement {
position: absolute;
right: 0;
bottom: 0;
padding: 0 14px;
border-radius: 20px;
background: linear-gradient(to right, #eb356b 0%, #f03c3c 100%);
box-shadow: 0 2px 10px -2px #eb356b;
font-size: 12px;
line-height: 27px;
text-align: center;
color: #fff;

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:云期刊,转载请注明出处:https://www.yunqikan.cn/5526.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

问答社区 在线客服
联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部