使用的是colorui的小程序UI框架。
colorui地址：https://www.color-ui.com/
index.wxml
<view class="cu-custom" style="height:{{CustomBar}}px;"> <view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"> <view class="head-title">购物车</view> </view></view><view class="box" style="top:{{CustomBar}}px;"> <view class="canui-kong"> <view class="bg-gradual-orange padding radius text-center shadow-blur canui-kong-icon"> <text class="icon-cart"></text> </view> <view class="text-lg padding text-center"> <text class="text-grey"> 购物车竟然是空的 </text> </view> <view class="padding flex flex-wrap justify-between align-center"> <button class='cu-btn bg-gradual-green shadow-blur round'>去逛逛</button> </view> </view> <view class="cu-list menu menu-avatar goods-list" style="display: none;"> <view class="cu-item"> <view class='action-checkbox'> <checkbox class='round orange' checked></checkbox> </view> <view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view> <view class='content'> <view> 喵星人互动群 </view> <view class='goods-price-btn'> <view class='text-red text-sm text-price'>100.00</view> <view class='action-btn-sum'> <button class='cu-btn'>-</button> <input class='ca-sum' name='input' value="1"></input> <button class='cu-btn'>+</button> </view> </view> </view> </view> <view class="cu-item"> <view class='action-checkbox'> <checkbox class='round orange' checked></checkbox> </view> <view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view> <view class='content'> <view> 喵星人互动群 </view> <view class='goods-price-btn'> <view class='text-red text-sm text-price'>100.00</view> <view class='action-btn-sum'> <button class='cu-btn'>-</button> <input class='ca-sum' name='input' value="1"></input> <button class='cu-btn'>+</button> </view> </view> </view> </view> </view> <view class="cu-bar bg-white solid-bottom canui-foor-fixed" style="display: none;"> <view class="action canui-checked"> <checkbox class='round orange' checked></checkbox> </view> <view class="action canui-delete"> <button class='cu-btn icon-delete'></button> </view> <view class='submit canui-price'>合计 <text class="text-red text-price">200.00</text></view> <view class='bg-red submit canui-submit'>结算(2)</view> </view></view>index.wxss
page { padding-top: 50px; padding-bottom:20rpx;}.cu-custom{ position: absolute; width:100%;}.head-title{ margin: 0 auto;}.cu-custom .cu-bar{ padding-right:inherit; background-image:linear-gradient(45deg, #ff9700, #ed1c24);}.bg-gradual-green { background-image:linear-gradient(45deg, #ff9700, #ed1c24);}.text-green, .line-green, .lines-green { color:#e45c5c;}.box{ position:absolute; width:100%;}.canui-kong{ padding-top:100rpx;}.canui-kong-icon{ width:260rpx; height:260rpx; line-height:220rpx; margin:0 auto; border-radius:200rpx; margin-bottom:30rpx;}.canui-kong-icon text{ font-size:160rpx;}.canui-kong .bg-gradual-green{ margin:0 auto;}.cu-list.menu-avatar>.cu-item{ padding-left:220rpx;}.goods-list .cu-item .action-checkbox{ left:30rpx; position:absolute;}.cu-list.menu-avatar>.cu-item>.cu-avatar{ left:100rpx;}.goods-list .cu-item .goods-price-btn{ position:relative;}.goods-list .cu-item .text-price{ padding-right:260rpx;}.goods-list .cu-item .action-btn-sum{ position:absolute; right:0px; top:0px; text-align:right; border:1px solid #D9D9D9; border-radius:2px;}.goods-list .cu-item .cu-btn{ float:left; width:24px; height:24px; line-height:24px; border-radius:0px; font-size:18px; padding:0px; background-color: #F7F6F6;}.goods-list .cu-item .ca-sum{ float:left; width:32px; height:24px; text-align:center; font-size:12px; line-height:24px; background-color: #fbfbfb; border-left:1px solid #D9D9D9; border-right:1px solid #D9D9D9; min-height:24px;}.canui-foor-fixed{ position: fixed; bottom: 0; width: 100%; min-height:85rpx;}.canui-checked{ width:75rpx;}.canui-delete{ width:100rpx;}.canui-delete .cu-btn{ background-color:#fff; font-size:35rpx;}.canui-price{ width:400rpx; text-align:right; align-self:stretch; line-height:85rpx; padding-right:20px; font-size:13px;}.canui-submit{ width:200rpx; align-self:stretch; align-items:center; display:flex; text-align:center; justify-content:center; font-size:13px;}
index.js
const app = getApp();Page({data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,hidden: true,},onLoad: function (option) {}});
由于没有写功能，所以，js代码很少。
