#uniapp#实战#购物车框架

最新推荐文章于 2024-06-28 11:52:57 发布

.Passion

最新推荐文章于 2024-06-28 11:52:57 发布

阅读量553

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/107271888

版权

移动端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

上下栏

在这里插入图片描述

<template>
	<view>
		<view class="operate">
			<view>
				<checkbox-group @change="changeAll">
					<checkbox :checked="checked" :class="checked==true?'checked':''  " class="round  "></checkbox>
					<text style="font-size: 110%;margin-left: 10upx;">全选</text>
				</checkbox-group>
			</view>
			
			<view>
				<view class="cu-btn sm round"> <text class="cuIcon-delete"></text>删除</view>
			</view>
		</view>
		<view id="total" class="flex justify-between align-center">
			<view style="font-size: 110%;">合计 <text class="text-orange">110元</text> </view>  
			<view>
				<view class="cu-btn bg-gradual-red round">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false
			}
		},
		methods: {
			changeAll(e) {
				this.checked = !this.checked;
				// console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.operate{
		position: fixed;
		background-color: white;
		display: flex;
		justify-content: space-between;
		height: 100upx;
		align-items: center;
		width: 750upx;
		padding: 0 30upx 0 30upx;
		
	}
	#total{
		position: fixed;
		bottom: 0upx;
		width: 750upx;
		height: 100upx;
		position: fixed;
		background-color: white;
		bottom: 100upx;
		padding: 0 30upx 0 30upx;
		
	}

</style>