uniapp 学习笔记二十二 购物车页面结构搭建
cart.vue
<template>
<view>
<view class="flex padding" v-for="(item,index) in 10">
<view class="flex align-center">
<text class="iconfont icon-youxiajiaogouxuan margin-right"></text>
<image class="poster margin-right" src="../../static/logo.png" mode=""></image>
</view>
<view class="flex justify-between info">
<view class="">
草莓蛋糕
<view class="margin-tb-xs"> Caomei </view>
Y147.0
</view>
<view class="flex flex-direction align-end">
<view class="edit margin-bottom-xs">
<text class="iconfont icon-bianjishuru"></text>
</view>
1磅(450g) X 1
</view>
</view>
</view>
<view class="fixed bg-fff flex">
<view class="flex flex-sub padding align-center">
<text class="iconfont icon-youxiajiaogouxuan margin-right-xs"></text>
全选
<view class="margin-left">
共计:189
</view>
</view>
<view class="bg-yellow padding text-center color-fff">
立即结算
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
page{
padding-bottom: 100upx;
}
.poster{
width: 180upx;
height: 180upx;
background-color: #d8d8d8;
}
.info{
width: 60%;
.edit{
width: 80upx;
height: 80upx;
text-align: center;
line-height: 80upx;
background-color: #e6e6e6;
border-radius: 50%;
}
}
.icon-youxiajiaogouxuan{
width: 50upx;
height: 50upx;
text-align: center;
line-height: 50upx;
background-color: #e6e6e6;
border-radius: 20%;
}
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
</style>