Web项目

落日与晚风，

已于 2023-10-11 11:46:48 修改

阅读量37

点赞数

文章标签：前端 css javascript html java

于 2023-10-11 11:45:46 首次发布

本文链接：https://blog.csdn.net/lLlLlL__lL/article/details/133764714

版权

天猫商城：订单页面

CSS部分

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}

ul,li{
	list-style: none;
}
.lf{
	float: left;  /* 左浮动 */
}
.rf{
	float: right;  /* 右浮动 */
}
.cleafix::after{  /* 清除浮动 */
	content: "";
	display: block;
	clear: both;
}

/*页头部分  */

.tmall_header{
	width: 100%;
	height: 30px;
	background-color: rgb(242, 242, 242);
}
.h_left{
	height: 30px;
}
.h_left ul{
	width: 300px;
	height: 30px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.h_left ul li a,
.h_welcome{
	font-size: 12px;
	color: #8f8f8f;
}
.h_left ul li a:hover{
	text-decoration: underline;  /* 下划线 */
}

/* 右边 */

.h_right{
	height: 30px;
}
.h_right ul{
	width: 200px;
	height: 30px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.h_right ul li{
	font-size: 12px;
	color: #8f8f8f;
}

/* 内容部分 */

.tmall_boby{
	width: 80%;
	min-height: 300px;
	margin: 0 auto;
	/* background-color: aqua; */ /* 背景颜色 */
}
.b_search{
	height: 170px;
	padding: 20px;
	box-sizing: border-box;
}
.search_box{
	margin-left: 200px;
	margin-top: 50px;
	height: 70px;
	width: 400px;
	/* background-color: aquamarine; *//* 背景颜色 */
}
.search_content{
	widows: 100%;
	height: 40px;
	background-color:rgb(196, 0, 0);
	/* padding-top: 2px; */
	padding-left: 2px;
}
.search_content input{
	width: 250px;
	height: 37px;
	outline: none;
	border: none;
	padding-left: 5px;
}
.search_content button{
	width: 128px;
	height: 35px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	border: none;
	cursor: pointer;
	background-color: rgb(196, 0, 0);
}
.search_nav{
	width: 400px;
	height: 30px;
	display: flex;
	justify-content: space-around;
	color: #8f8f8f;
	/* font-size: 12px; */
}

/* 订单列表部分 */
.boby_content{
	widows: 100%;
	min-height: 100px;
	/* background-color: antiquewhite; *//* 背景 */
}

/* 导航部分 */
.order_nav{
	width: 600px;
	height: 50px;
	/* line-height: 60px; */
	display: flex;  /* 文字间距相等*/
	/* justify-content: space-around; */
	align-items: center;
	/* box-sizing: border-box; */
	/* border-bottom: 3px solid #bdbdbd; */
}
.order_nav p{  /* p标签不生效 */
	height: 50px;
	display: flex;
	/* display: contents; 使 div 不产生任何框 */
	box-sizing: border-box;	
	border-bottom: 3px solid #bdbdbd;
}
.order_nav a{
	display: inline-block;
	height: 30px;
	color: #000;
	font-size: 18px;
	font-weight: 900;
	border-right: 1px solid #d1d1d1;
	padding-right: 30px;
	padding-left: 30px;
	
}
.order_nav p:last-child a{
	border: none;
}
.order_nav p:hover{
	color: red;
	border-bottom: 3px solid red;
}
.order_nav p:hover a{
	color: red;
}

/* 订单内容部分 */
.order_table_titile{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #eeeeee;
	margin-top: 20px;
	border: 1px solid #bdbdbd;
	margin-bottom: 20px;
}
.order_table_titile table{
	width: 100%;
}
.order_table_titile td{
	font-size: 12px;
	text-align: center;
}
/* table{
	width: 100%;
	padding-top: 20px;
}
.order_table thead tr{
	background-color: #eaeaea;
	width: 100%;
	height: 40px;
	border: 1px solid #bdbdbd; */
	/* margin-top: 20px; */
/* }
.order_table thead tr td{
	text-align: center;
	border: none;
} */

/* 订单详情 部分*/
/* .order_table tbody{
	width: 100%;
	height: 100px;
	background-color: antiquewhite; 
	border: 2px solid #8f8f8f;
} */

.order_list{
	width: 100%;
	
}
.order_list table{
	width: 100%;
	display: block;
	border: 1px solid #bdbdbd;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.order_list table tbody{
	display: block;
	width: 100%;
}
.order_list table:hover{
	border: 3px solid #9c9c9c;
}
/* 第一行第一个tr */
.order_table tbody tr:first-child{
	width: 100%;
	display: block;
	background-color: #eaeaea;
	height: 50px;
	padding-top: 10px;
	box-sizing: border-box;
}
.order_time{
	font-size: 12px;
}
.order_time+td{
	font-size: 12px;
}
.order_table tbody tr:first-child .bg_img{
	width: 70px;
	height: 20px;
	margin: 0 auto;
	background-image:url("../img/site/wangwang.gif");
	background-repeat: no-repeat;
}
.order_table tbody tr:first-child .delete{
	display: block;
	margin: 0 auto;
}
.order_table tbody tr:last-child{
	display: block;
	width: 100%;
	height: 100px;

}
.order_table tbody tr:last-child td:first-child{
	
	/* width: 550px; */
	height: 100px;
	/* background-color: antiquewhite; */
	/* display: flex; */
	/* justify-content: space-between; */
	padding: 10px;
	padding-right: 100px;
	box-sizing: border-box;
}
.order_name{
	margin-bottom: 40px;
	font-size: 12px;
	color: #6f6f6f;
}
.order_name:hover{
	color: #c1383a;
	cursor: pointer;
}
.order_price p:first-child{
	color: #949494;
	text-decoration: line-through;
}
.order_count,.order_total{
	text-align: center;
}
.order_total p:first-child{
	font-family: 500;
}
.order_say button{
	padding: 5px 10px;
	background-color: #fff;
	border: 1px solid #8f8f8f;
	border-radius: 5px;
	display: block;
	margin: 0 auto;
	cursor: pointer;
}
.order_say button:hover{
	color: firebrick;
	border: 1px solid firebrick;
}
.order_wait{
	text-align: center;
}
.order_wait button{
	padding: 5px 10px;
	background-color: #9ccbfd;
	border: none;
	color: #fff;
	border-radius: 5px;
	display: block;
	margin: 0 auto;
	cursor: pointer;
}

/* 页脚部分 */
.tmall_footer{
	width: 100%;
	height: 480px;
	border-top: 1px solid #9c9c9c;
}
.footer_up{
	width: 100%;
	height: 280px;
	border-bottom: 1px solid #9c9c9c;
}
.up_img{
	width: 1000px;
	margin: 20px auto;
}
.up_info{
	display: flex;
	justify-content: space-around;
	width: 95%;
	margin: 0 auto;
	padding-top: 30px;
	border-top: 1px solid #c7c7cc;
}
.up_info h2{
	font-size: 18px;
	color: #5b5b5b;
}
.up_info p{
	font-size: 12px;
	color: #707070;
	line-height: 25px;
}
.up_info p:hover{
	color: #c1383a;
	cursor: pointer;
}

/* 页脚下半部分 */
.footer_down{
	width: 100%;
	height: 200px;
}
.footer_logo{
	margin-left: 50px;
}
.footer_logo img{
	transform: translateY(4px);
}
.down_info{
	background-color: #000;
	height: 100%;
	color: #fff;
	font-size: 12px;
	border-top: 2px solid #c1383a;
	
}
.down_info p{
	line-height: 30px;
	
}

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
		<link rel="stylesheet" href="css/订单页面.css">
	</head>
	<body>
		
		<!-- 页头 -->
		<div class="tmall_header">
			<div class="clearfix">
				<div class="h_left lf">
					<ul>
						<li><img src="img/首页.png" width="16px"></li>
						<li><a href="##">天猫首页</a></li>
						<li class="h_welcome">喵，欢迎来天猫</li>
						<li><a href="##">请登录</a></li>
						<li><a href="##">免费注册</a></li>
					</ul>
				</div>
				<div class="h_right rf">
					<ul>
						<li>我的订单</li>
						<li><img src="img/购物车-fill.png" width="16px"></li>
						<li>购物车<span>0</span>件</li>
					</ul>
				</div>
			</div>
			
		</div>
		<!-- 内容 -->
		<div class="tmall_boby">
			<!-- 搜索框部分 -->
			<div class="b_search">
				<div class="b_logo lf">
					<img src="img/site/logo.gif" alt="">
				</div>
				<div class="search_box lf">
					<div class="search_content">
						<input type="text" placeholder="时尚男鞋 太阳镜">
						<button>搜索</button>
					</div>
				<div class="search_nav">
					<span>平衡车</span>
					<span>|</span>
					<span>扫地机器人</span>
					<span>|</span>
					<span>原汁机</span>
					<span>|</span>
					<span>冰箱</span>
					
				</div>
			</div>
			</div>
			<!-- 订单列表部分 -->
			<div class="boby_content">
				<!-- 订单导航 -->
				<div class="order_nav">
					<p>
						<a class="orderstatus" href="##" orderstatus = "all">所有订单</a>
					</p>
					<p>
						<a class="orderstatus" href="##" orderstatus = "waitpay">待付款</a>
					</p>
					<p>
						<a class="orderstatus" href="##" orderstatus = "waitsend">待发货</a>
					</p>
					<p>
						<a class="orderstatus" href="##" orderstatus = "waitconfirm">待收货</a>
					</p>
					<p>
						<a class="orderstatus" href="##" orderstatus = "waitsay">待评价</a>
					</p>
				</div>
				<div class="order_table_titile">
					<table>
						<tr>
							<td width="33%">宝贝</td>
							<td width="14%">单价</td>
							<td width="7%">数量</td>
							<td width="14%">实付款</td>
							<td width="10%">交易操作</td>
						</tr>
					</table>
				</div>
				<!-- 订单内容部分 -->
				<div class="order_list">
					<table class="order_table" orderstatus = "waitsay">
						<tbody>
							<tr>
								<td width="600px" class="order_time">
									<b>
										2016-11-22 14:31:03
									</b> 
									<span>
										订单号:
									</span>
									<span>
										 201611221431032827483
									</span>
									</td>
								<td width="130px">
									<img width="20px" src="img/site/orderItemTmall.png" alt="">
									天猫商场
								</td>
								<td width="150px"> </td>
								<td width="200px">
									<div class="bg_img"></div>
								</td>
								<td width="13%"><img class="delete" width="20px" src="img/删除.png" ></td>
							</tr>
							<tr>
								
									<td width = "650px">
										<div class="lf">
											<img src="img/1917.jpg" width="80px" alt="">
										</div>
										<div class="rf">
											<p class="order_name">依然美佳欧式布艺沙发组合可拆洗新款实木雕花大户型奢华别墅家具</p>
											<img src="img/site/renzheng.png" alt="">
										</div>
									</td>
									<td width = "150px" class="order_price">
										<p>￥10,012.00</p>
										<p>￥7,008.40</p>
									</td>
									<td width = "150px" class="order_count">
										1
									</td>
									<td width = "200px" class="order_total">
										<p>￥7,008.40</p>
										<p>(含运费:￥0.00)</p>
									</td>
									<td width = "200px" class="order_say">
										<button>评价</button>
									</td>
							</tr>
						</tbody>
					</table>
					<table class="order_table" orderstatus = "waitconfirm">
						<tbody>
							<tr>
								<td width="600px" class="order_time">
									<b>
										2016-11-22 14:31:03
									</b> 
									<span>
										订单号:
									</span>
									<span>
										 201611221431032827483
									</span>
									</td>
								<td width="130px">
									<img width="20px" src="img/site/orderItemTmall.png" alt="">
									天猫商场
								</td>
								<td width="150px"> </td>
								<td width="200px">
									<div class="bg_img"></div>
								</td>
								<td width="13%"><img class="delete" width="20px" src="img/删除.png" ></td>
							</tr>
							<tr>
								
									<td width = "650px">
										<div class="lf">
											<img src="img/1917.jpg" width="80px" alt="">
										</div>
										<div class="rf">
											<p class="order_name">依然美佳欧式布艺沙发组合可拆洗新款实木雕花大户型奢华别墅家具</p>
											<img src="img/site/renzheng.png" alt="">
										</div>
									</td>
									<td width = "150px" class="order_price">
										<p>￥10,012.00</p>
										<p>￥7,008.40</p>
									</td>
									<td width = "150px" class="order_count">
										1
									</td>
									<td width = "200px" class="order_total">
										<p>￥7,008.40</p>
										<p>(含运费:￥0.00)</p>
									</td>
									<td width = "200px" class="order_wait">
										<p>待发货</p>
										<button>催卖家发货</button>
									</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!-- 页脚 -->
		<div class="tmall_footer">
			<div class="footer_up">
				<div class="up_img">
					<img src="img/site/ensure.png" alt="">
				</div>
			<div class="up_info">
				<div>
					<h2>购物指南</h2>
					<p>免费注册</p>
					<p>开通支付宝</p>
					<p>支付宝充值</p>
				</div>
				<div>
					<h2>购物指南</h2>
					<p>免费注册</p>
					<p>开通支付宝</p>
					<p>支付宝充值</p>
				</div>
				<div>
					<h2>购物指南</h2>
					<p>免费注册</p>
					<p>开通支付宝</p>
					<p>支付宝充值</p>
				</div>
				<div>
					<h2>购物指南</h2>
					<p>免费注册</p>
					<p>开通支付宝</p>
					<p>支付宝充值</p>
				</div>
				<div>
					<h2>手机天猫</h2>
					<p>
						<img width="100px" src="img/site/canvas.png" alt="">
					</p>
				</div>
			</div>
			</div>
			<div class="footer_down">
				<div class="footer_logo">
					<img src="img/site/cateye.png" alt="">
				</div>
				<div class="down_info">
					<p>关于天猫 帮助中心 开放平台 诚聘英才 联系我们 网站合作 法律声明 只是产权 廉政举报</p>
					<p>阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | 阿里通信 | YunOS | 阿里旅行·去啊 | 万网 | 高德 | 优视 | 友盟 | 虾米 | 天天动听 | 来往 | 钉钉 | 支付宝 |</p>
					<p>增值电信业务经营许可证： 浙B2-20110446 网络文化经营许可证：浙网文[2015]0295-065号 互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</p>
					<p>© 2003-2016 TMALL.COM 版权所有 </p>
					<img src="img/site/copyRight1.jpg" alt="">
					<img src="img/site/copyRight2.jpg" alt="">
				</div>
			</div>
			
		</div>
		<script>
			window.onload  =function(){
				var orderstatusEle = document.getElementsByClassName("orderstatus");
				console.log(orderstatusEle);
				//给所有导航添加事件
				for (var i = 0; i < orderstatusEle.length; i++) {
					orderstatusEle[i].onclick = clickNav;
				}
				
				function clickNav(){
					// console.log(123);
					//获取你点击的那个按钮的 订单状态 的值
					var orderstatusValue = this.getAttribute("orderstatus");
					// console.log(orederstatusValue);
					var orderTable = document.getElementsByClassName("order_table");
					// console.log(orderTable);
					// console.log(orderstatusValue);
					if(orderstatusValue == "all"){
						//全部显示
						for (var i = 0; i < orderTable.length; i++) {
							orderTable[i].style.display = "block";
						}
					}else{
						//全部隐藏
							for (var i = 0; i < orderTable.length; i++) {
								orderTable[i].style.display = "none";
								var tableorderstatusValue = orderTable[i].getAttribute("orderstatus");
								//如果当前订单状态值，和上面点击的按钮订单状态值相同，就显示
								if(orderstatusValue == tableorderstatusValue ){
									orderTable[i].style.display = "block";
								}
							}
						}
				}
			}
		</script>
	</body>
</html>