订单页面布局
html
<view class="consignee">
<view class="consignee-title">
收件信息
</view>
<view class="consignee-address">
<image class="right-arrow" src="/images/order/sub/you.png" />
<image class="bottom-stripe" src="/images/order/sub/xiushi.png" />
<view class="line-one">
<view class="name">
动感超人
</view>
<view class="tel">
185****9875
</view>
</view>
<view class="line-two">
北京朝阳区四环到五环之间878东区12层
</view>
</view>
</view>
<!-- <view class="consignee">
<view class="consignee-title">
收件信息
</view>
<view class="consignee-address">
<image class="right-arrow" src="/images/order/sub/you.png" />
<image class="bottom-stripe" src="/images/order/sub/xiushi.png" />
<view class="line-one">
<view class="name">
请选择收货地址
</view>
</view>
<view class="line-two">
请选择收货地址
</view>
</view>
</view> -->
<view class="product">
<view class="product-title">
商品信息
</view>
<view class="product-content">
<!-- <view class="product-item">
<view class="item-left">
<image src="/images/index/cake.png" />
</view>
<view class="item-right">
<view class="item-line-one">
<view class="title">经典防水</view>
<view class="count">x1</view>
</view>
<view class="item-line-two">
颜色:白色 尺寸:42码
</view>
<view class="item-line-three">
￥18.80
</view>
</view>
<view class="border-bottom">
</view>
</view> -->
<!-- <view class="product-item">
<view class="item-left">
<image src="/images/index/cake.png" />
</view>
<view class="item-right">
<view class="item-line-one">
<view class="title">经典防水</view>
<view class="count">x1</view>
</view>
<view class="item-line-two">
颜色:白色 尺寸:42码
</view>
<view class="item-line-three">
￥18.80
</view>
</view>
<view class="border-bottom">
</view>
</view> -->
<view class="product-item">
<view class="item-left">
<image src="/images/index/cake.png" />
</view>
<view class="item-right">
<view class="item-line-one">
<view class="title">经典防水</view>
<view class="count">x1</view>
</view>
<view class="item-line-two">
颜色:白色 尺寸:42码
</view>
<view class="item-line-three">
￥18.80
</view>
</view>
<view class="border-bottom">
</view>
</view>
</view>
<view class="summary">
<view class="item-one">共2件商品</view>
<view class="item-two">小计:<view class="price">￥580.00</view></view>
</view>
</view>
<view class="payment">
<view class="payment-title">
付款方式
</view>
<view class="payment-container">
<view class="payment-item">
<view class="payment-content">
<image class="payment-icon" src="/images/order/sub/yu.png" />
<view class="payment-text">余额支付 <view class="balance">(余额￥24.00)</view></view>
<!-- <image class="check" src="/images/order/sub/weixuan.png" /> -->
<view class="uncheck"></view>
</view>
</view>
<view class="payment-item">
<view class="payment-content">
<image class="payment-icon" src="/images/order/sub/wx.png" />
<view class="payment-text">微信支付</view>
<!-- <image class="check" src="/images/order/sub/xuan.png" /> -->
<view class="check"></view>
</view>
</view>
</view>
<view class="remark">
<view class="remark-content">
<view class="label">备注：</view>
<input class="remark-input" placeholder="小主有什么特殊的要告诉我吗？"/>
</view>
</view>
</view>
<view class="bottom">
<view class="bottom-left">
合计金额：￥580.00
</view>
<view class="bottom-right">去付款(3)</view>
</view>
css
.consignee {
.consignee-title {
height: 83rpx;
background-color:#F7F7F7;
font-size: 28rpx;
color:#959595;
padding-left: 20rpx;
line-height: 83rpx;
}
.consignee-address {
height: 178rpx;
background-color: #FFFFFF;
// border:1px solid red;
position: relative;
.bottom-stripe {
position: absolute;
bottom:0;
left:0;
width: 750rpx;
height: 12rpx;
// border:1px solid blue;
}
.right-arrow {
position: absolute;
top:64rpx;
right:10rpx;
width: 17rpx;
height: 30rpx;
// border:1px solid blue;
}
.line-one { /* 命名比较好记 */
margin-left:49rpx;
margin-top:36rpx;
// border:1px solid blue;
display: inline-flex; /* 宽度更加灵活 */
height: 32rpx;
line-height: 32rpx;
.name {
font-size: 32rpx;
color:#313131;
height: 32rpx;
}
.tel {
margin-left:30rpx;
font-size: 32rpx;
color:#313131;
}
}
.line-two {
margin-left:49rpx;
margin-right:49rpx;
margin-top:30rpx;
font-size: 26rpx;
height: 26rpx;
line-height: 26rpx;
color:#313131;
// border:1px solid blue;
}
}
}
.product {
.product-title {
height: 87rpx;
background-color:#F7F7F7;
font-size: 28rpx;
color:#959595;
padding-left: 20rpx;
line-height: 87rpx;
}
.product-item {
height: 240rpx;
position: relative;
padding-top:30rpx;
.border-bottom {
position: absolute;
bottom: 1rpx;
height:1rpx;
background-color: #e2e2e2;
width: 714rpx;
}
display: flex;
.item-left {
margin-left:20rpx;
width: 180rpx;
height: 180rpx;
border:1px solid #E2E2E2;
image {
width: 180rpx;
height: 180rpx;
}
}
.item-right {
margin-left:20rpx;
width: 492rpx;
height: 180rpx;
// border:1px solid blue;
.item-line-one {
display: flex;
justify-content: space-between;
color:#313131;
font-size: 26rpx;
height: 26rpx;
line-height: 26rpx;
}
.item-line-two {
font-size: 20rpx;
color:#AAAAAA;
height: 20rpx;
line-height: 20rpx;
margin-top:30rpx;
}
.item-line-three {
color:#fd274b;
font-size: 28rpx;
height: 28rpx;
line-height: 28rpx;
margin-top:70rpx;
}
}
}
.product-item:last-child { /* 最后一行特殊处理，在一个容器里才有效 */
.border-bottom {
width: 750rpx;
}
}
.summary {
height:80rpx;
line-height: 80rpx;
font-size: 28rpx;
display: flex;
justify-content: flex-end;
.item-two {
display: inline-flex;
margin-left:50rpx;
margin-right:30rpx;
.price {
color:#fd274b;
margin-left:10rpx;
}
}
}
}
.payment {
margin-bottom: 103rpx;
.payment-title {
height: 87rpx;
background-color:#F7F7F7;
font-size: 28rpx;
color:#959595;
padding-left: 20rpx;
line-height: 87rpx;
}
.payment-item {
height: 100rpx;
background-color: #FFFFFF;
border-bottom:1px solid #E2E2E2;
overflow: hidden; /* 有时候会导致子类的top上移 */
.payment-content {
position: relative;
// border:1px solid red;
margin-left:20rpx;
margin-right:40rpx;
margin-top:34rpx;
display: flex;
color:#313131;
.payment-icon {
width: 40rpx;
height: 40rpx;
}
.payment-text {
display: inline-flex;
height: 40rpx;
font-size: 28rpx;
line-height: 40rpx;
margin-left:20rpx;
.balance {
margin-left:15rpx;
}
}
.check {
position: absolute;
right: 0rpx;
top:4rpx;
// border: 1px solid blue;
width: 33rpx;
height: 33rpx;
/*小程序只支持base64或者cdn图片*/
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAdCAYAAABSZrcyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OTdDN0RBMkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU5OTdDN0RCMkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTk5N0M3RDgyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTk5N0M3RDkyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42KVTvAAACV0lEQVR42rSXzUtUURjGz4yTm8iITDQJwqCvjdQmF2VaRJEVGfQliO3CP6BF/QMt2rhzmWAZ2aIsF0FfVkRZVBgUitWuD5wKsggqP/q98Cg6Xe89d2buAz8Y5r73fc7MOed9z0m55i7nqfWwH+phIyyHpfAdvsIbeAA3YNgnYcrD/ACchjrnrydwFq6HBaVDntXAPeiLaewU36f3a+KaN8FLaHCFqUF5mnzNWzTqMlcclSlfS5T5DjgPJa64snxdyh9oXg6XoNQlo0XKvyLI/BxUuGRVIZ955uugNQGzSbgC43O+a5XfrHl7AvNsxifgCDzLmer2mQ8pBRRTf+A4XIQO2Jnz/Kj5ZlQ2q4psfFhlthNOBsRUmq+Z14YkmoKJGDvgFxyC29qybSGxtfa3rwwJOKPF8dbD+CfsgztwIcLYVJ2O+FWW4Ddsj+hU1tn2wCPohWMegy1Na44W0gYYgIwG8Cog5hvsgudwFZp914aZf4wIWgv3YbHK44s5z7Jaya+hH/bGWJgfzHzII3C1BlCuATyGT+pa7+BmwHaK0lBac/nZI3iVpqAadsNW/Wu3YFtMY/MbNvNpuOz5UqUGsEaLzFb2ljxqgflNz5TXTu1pH1lXegqjsDkP4yn5zdb2EeiO2R6X5VkBu+U3r6WegrGEW+qYfP7r51k1g78JGU/oKJVd6Bh1V21wMoH22qYFGnqA7IGDOQeAQjSufD2+R2erVpu0rQrRgHZEf9xLw3toVK0ejGk6qPcaVQEDlfFIdE3k3tVsvy+BH/BF9f2hrkhed7V/AgwAfOd9kXML8wkAAAAASUVORK5CYII=');
background-size: 30rpx 30rpx;
background-repeat: no-repeat;
}
.uncheck {
position: absolute;
right: 0rpx;
top:4rpx;
// border: 1px solid blue;
width: 33rpx;
height: 33rpx;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAdCAYAAABSZrcyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OTdDN0Q2MkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU5OTdDN0Q3MkUzNzExRUFBNEVFQzJDQjMxM0Y4Rjk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTk5N0M3RDQyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTk5N0M3RDUyRTM3MTFFQUE0RUVDMkNCMzEzRjhGOTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7JQlDXAAACX0lEQVR42rSXy0tVURSHjzdzEimRiSaBGPSaSE1ykKVFJFlRQVmC2Cz8AxrUPxDYpJlDA80oB/ZwEJReK6IsKgwKo8esB94KshAqX9+Cn6LXc8/Z5957FnxwOXud9dv37LXX2rsgmUx6jrYFDsNu2AZroQR+wQ94Cw/hDoy5BCx08DkC56E2w3iJqIZD0AFP4SLcDgqcCBizYPZZbgUIZ7JavZdUnEjiTfAK6r3crF5xmlzFWzTrYi8/Vqx4LWHie6ELVnj5NYt3RfF9xUvhGhR58dhKxV/nJ34Jyrx4rUw6S8Q3Q2sMYtPQBxOLnrVKb0G8PYZ1NuEzcBKepy11+/yPAjnk0/7BabgKl2Ff2niz6RaqbFbkWfiEymwnnPXxKTddE68JCDQDUxF2wCQch/vasm0BvjX22dcHOFxQcnxwEP6j2j4IPSHCZpWJkH9lAf7CnpBOZZ2tER7DDTjlMNmihNYok22FYXU/m8BrH5+fsB9eQD8cc80NE/8S4rQJHsAqlceXi8ZSyuQ3MAAHIyTmZxMfdXCs0gRKNYEn8FVd6yPc9dlOYTaa0Fp+c3DeoCWohAOwS1/tHtRFFDa9MROfheuOL5VrAhuVZJbZO7OoBaY3O19eO7WnXcy60jN4DzuyEJ6R3kJtfwfdEdvjmiwrYLf0lrTUczAec0sdl86yfp5SM/gfk/CUjlKpTMeoIbXB6Rjaa5sSNPAA2QtH0w4AudiE4vW6Hp2tWm3XtsrFhrUjBqJeGj5Bg2r1SETREb3XoAqY9XXppki/q9l+Xw2/4bvq+yNdkZzuanMCDACnVX8FD8+BfwAAAABJRU5ErkJggg==');
background-size: 30rpx 30rpx;
background-repeat: no-repeat;
}
}
}
.remark {
height: 100rpx;
background-color: #f7f7f7;
overflow: hidden;
.remark-content {
height: 100rpx;
margin-left:20rpx;
// border:1px solid red;
font-size: 28rpx;
line-height: 100rpx; /* 只对文字有效 */
display: flex;
.remark-input {
font-size: 28rpx;
// border: 1px solid blue;
width: 600rpx;
margin-top: 27rpx;
}
}
}
}
.bottom {
background:rgba(255,254,252,1);
border:1px solid rgba(226, 226, 226, 1);
z-index: 10000; /* 防止input显示在上面 */
position: fixed;
bottom: 0;
height: 103rpx;
display: flex;
.bottom-left {
width: 496rpx;
font-size: 30rpx;
line-height: 103rpx;
padding-left:25rpx;
color:#fd274b;
background-color: #FFFFFF;
}
.bottom-right {
width: 253rpx;
font-size: 32rpx;
line-height: 103rpx;
background-color: #004EA0;
text-align: center;
color:#FFFFFF;
}
}
