uniapp 学习笔记二十二购物车页面结构搭建

最新推荐文章于 2024-04-30 15:30:40 发布

ggome

最新推荐文章于 2024-04-30 15:30:40 发布

阅读量396

点赞数

分类专栏： uni-app 文章标签： uni-app 学习前端

本文链接：https://blog.csdn.net/gixome/article/details/126635554

版权

uni-app 专栏收录该内容

109 篇文章 40 订阅

订阅专栏

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>