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

一时失言乱红尘 2024-04-07 11:44 75阅读 0赞

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

![8d073a2e859f482c8287a29229971935.png][]

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>

[8d073a2e859f482c8287a29229971935.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e92b779dc53543e899e07552ad1216d8.png