You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
6.9 KiB
181 lines
6.9 KiB
4 years ago
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<title>订单详情</title>
|
||
|
<link rel="stylesheet" href="css/3D旋转图.css">
|
||
|
<link rel="stylesheet" href="css/订单文字设置.css">
|
||
|
<link rel="stylesheet" href="js/超链接字体改变.js">
|
||
|
<link rel="stylesheet" href="css/index.css">
|
||
|
<link rel="stylesheet" href="css/common.css">
|
||
|
<link rel="stylesheet" href="iconfont/iconfont.css">
|
||
|
<!-- <link href="car.css" rel="stylesheet" type="text/css">-->
|
||
|
<style>
|
||
|
.demo1{
|
||
|
width: 100%;
|
||
|
height: 100px;
|
||
|
background-color: #bbffaa;
|
||
|
display: flex;
|
||
|
}
|
||
|
.demo2{
|
||
|
width: 100%;
|
||
|
height: 2048px;
|
||
|
margin: 0px;
|
||
|
display: flex;
|
||
|
position: relative;
|
||
|
/*flex-direction: column;*/
|
||
|
}
|
||
|
.demo1{
|
||
|
height: 100%;
|
||
|
width: 1200px;
|
||
|
opacity: 0.5;
|
||
|
position: absolute;
|
||
|
}
|
||
|
.tableMyOrder{
|
||
|
position: absolute;
|
||
|
left: 200px;
|
||
|
top: 500px;
|
||
|
right: 200px;
|
||
|
}
|
||
|
|
||
|
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<header>
|
||
|
<div class="header_mask">
|
||
|
<div class="header_container">
|
||
|
<div class="navbar_left">
|
||
|
<a class="navbar_brand">SummerTime</a>
|
||
|
<div style="clear: both;display: inline-block"></div>
|
||
|
</div>
|
||
|
<div class="navbar_right">
|
||
|
<ul>
|
||
|
<li><a href="./index.html"> Index</a></li>
|
||
|
<li><a href=""><span class="iconfont icon-cha " style="font-size: 24px!important;"></span>Popular drinks</a></li>
|
||
|
<li><a href="">Services</a></li>
|
||
|
<li><a href="">MessageBoard</a></li>
|
||
|
|
||
|
</ul>
|
||
|
</div>
|
||
|
<div class="navbar_icon">
|
||
|
<ul >
|
||
|
<li><a href="./order.html"><span class="iconfont icon-dingdan1 " style="font-size: 30px!important;"></span></a></li>
|
||
|
<li><a href="./cart.html"><span class="iconfont icon-goumaihongbao " style="font-size: 30px!important;"></span></a></li>
|
||
|
<li><a href="./login.html"><span class="iconfont icon-shouyewode" style="font-size: 30px!important;"></span></a></li>
|
||
|
<li><a href="./register.html"><span class="iconfont icon-zhuce " style="font-size: 30px!important;"></span></a></li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</header>
|
||
|
<div class="Demo" style="width: 1200px;margin-left: auto;margin-right: auto">
|
||
|
|
||
|
<img class="demo1" src="img/order.jpg"></img>
|
||
|
<div class="demo2" style="width: 1200px;margin-left: auto;margin-right: auto">
|
||
|
<div class="cube">
|
||
|
<div class="box1">
|
||
|
<img src="img/1.jpg" style="height: 100px;width: 100px">
|
||
|
</div>
|
||
|
<div class="box2" >
|
||
|
<img src="img/2.jpg" style="height: 100px;width: 100px">
|
||
|
</div>
|
||
|
<div class="box3">
|
||
|
<img src="img/3.jpg" style="height: 100px;width: 100px">
|
||
|
</div>
|
||
|
<div class="box4">
|
||
|
<img src="img/4.jpg" style="height: 100px;width: 100px" >
|
||
|
</div>
|
||
|
<div class="box5">
|
||
|
<img src="img/5.jpg" style="height: 100px;width: 100px">
|
||
|
</div>
|
||
|
<div class="box6">
|
||
|
<img src="img/6.jpg" style="height: 100px;width: 100px">
|
||
|
</div>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p name="MyOrder">我的订单</p>
|
||
|
<hr style="width : 900px">
|
||
|
<ul class="orderContentUl">
|
||
|
<li><a href="javascript:HideOrShowFont('a1')" id="a1" >全部订单</a></li>
|
||
|
<li><a href="javascript:HideOrShowFont('a2')" id="a2" >待支付</a></li>
|
||
|
<li><a href="javascript:HideOrShowFont('a3')" id="a3" >待收货</a></li>
|
||
|
<li><a href="javascript:HideOrShowFont('a4')" id="a4" >已完成</a></li>
|
||
|
<li><a href="javascript:HideOrShowFont('a5')" id="a5" >待评价</a></li>
|
||
|
<li><a href="javascript:HideOrShowFont('a6')" id="a6" >已取消</a></li>
|
||
|
</ul>
|
||
|
<script src="js/超链接字体改变.js"></script>
|
||
|
</div>
|
||
|
<div>
|
||
|
<form action="post">
|
||
|
<input type="text" value="请输入订单号">
|
||
|
<a href="javascript:SearchOrder()" ><img src="img/搜索图标.png" alt="搜索图标" class="imgSearch" style="width: 45px;height: 45px"></a>
|
||
|
<script>
|
||
|
function SearchOrder() {
|
||
|
alert("请输入正确订单号!");
|
||
|
}
|
||
|
</script>
|
||
|
</form>
|
||
|
</div>
|
||
|
<div class="list-group-title">
|
||
|
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||
|
<therd>
|
||
|
<tr>
|
||
|
<th width="500px" style="text-align: center">商品</th>
|
||
|
<th>单价/元</th>
|
||
|
<th>数量</th>
|
||
|
<th>状态</th>
|
||
|
<th>实付款/元</th>
|
||
|
<th>订单状态及操作</th>
|
||
|
</tr>
|
||
|
</therd>
|
||
|
</table>
|
||
|
</div>
|
||
|
<div class="list-group-goods1">
|
||
|
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||
|
<therd>
|
||
|
<tr>
|
||
|
<th width="500px" style="text-align: center"><img src="img/饮品1.jpg" width="180px"></th>
|
||
|
<th>20/元</th>
|
||
|
<th>1</th>
|
||
|
<th>已支付</th>
|
||
|
<th>20/元</th>
|
||
|
<th>已完成</th>
|
||
|
</tr>
|
||
|
</therd>
|
||
|
</table>
|
||
|
</div>
|
||
|
<div class="list-group-goods2">
|
||
|
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||
|
<therd>
|
||
|
<tr>
|
||
|
<th width="500px" style="text-align: center"><img src="img/饮品3.jpg" width="180px"></th>
|
||
|
<th>20/元</th>
|
||
|
<th>1</th>
|
||
|
<th>已支付</th>
|
||
|
<th>20/元</th>
|
||
|
<th>已完成</th>
|
||
|
</tr>
|
||
|
</therd>
|
||
|
</table>
|
||
|
</div>
|
||
|
<div class="list-group-goods3">
|
||
|
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||
|
<therd>
|
||
|
<tr>
|
||
|
<th width="500px" style="text-align: center"><img src="img/饮品2.jpg" width="180px"></th>
|
||
|
<th>20/元</th>
|
||
|
<th>1</th>
|
||
|
<th>已支付</th>
|
||
|
<th>20/元</th>
|
||
|
<th>已完成</th>
|
||
|
</tr>
|
||
|
</therd>
|
||
|
</table>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</body>
|
||
|
</html>
|