022_Vue购物车

自由与束缚JavaJavaScript

于 2022-02-12 18:29:53 发布

阅读量188

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122900215

版权

1. 项目目录

2. img目录

3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>

		<style type="text/css">
		    .container {
		    }
		    .container .cart {
		      	width: 300px;
		      	margin: auto;
		    }
		    .container .title {
		      	background-color: #1E9FFF;
		      	height: 40px;
		      	line-height: 40px;
		      	text-align: center;
		      	/*color: #fff;*/  
		    }
		    .container .total {
		      	background-color: #FFB800;
		      	height: 50px;
		      	line-height: 50px;
		      	text-align: right;
		    }
		    .container .total button {
		      	background-color: #FF5722;
		      	height: 50px;
		      	width: 150px;
		      	border: 0;
		    }
		    .container .total span {
		      	color: red;
		      	font-weight: bold;
		      	margin-right: 10px;
		    }
		    .container .item {
		      	height: 55px;
		      	line-height: 55px;
		      	position: relative;
		      	border-top: 1px solid #ADD8E6;
		    }
		    .container .item img {
		      	width: 45px;
		      	height: 45px;
		      	margin: 5px;
		    }
		    .container .item .name {
		      	position: absolute;
		      	width: 90px;
		      	top: 0;
		      	left: 55px;
		      	font-size: 16px;
		    }

		    .container .item .change {
		      	width: 100px;
		      	position: absolute;
		      	top: 0;
		      	right: 50px