325 lines
6.1 KiB
HTML
325 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<script src="./rem.js"></script>
|
||
<link rel="stylesheet" href="./clear.css">
|
||
|
||
<style>
|
||
.pa {
|
||
margin-left: 0.32rem;
|
||
}
|
||
|
||
.header {
|
||
height: 1rem;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: fixed;
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
|
||
}
|
||
|
||
.header img {
|
||
width: 0.2rem;
|
||
height: 0.35rem;
|
||
margin-right: 0.48rem;
|
||
}
|
||
|
||
.text {
|
||
|
||
width: 6.31rem;
|
||
height: 0.6rem;
|
||
background-color: #f2f2f2;
|
||
border-radius: 0.3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.text img {
|
||
width: 0.32rem;
|
||
height: 0.34rem;
|
||
position: absolute;
|
||
left: 0.24rem;
|
||
}
|
||
|
||
.text input {
|
||
position: absolute;
|
||
left: 0.74rem;
|
||
background-color: #f2f2f2;
|
||
font-size: 0.26rem;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 1rem;
|
||
|
||
}
|
||
|
||
ul {
|
||
height: 0.94rem;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-left: 0.36rem;
|
||
overflow-x: scroll;
|
||
|
||
|
||
}
|
||
|
||
ul li {
|
||
font-size: 0.3rem;
|
||
color: #424242;
|
||
|
||
}
|
||
|
||
ul li:nth-child(6) {
|
||
padding-right: 0.4rem;
|
||
}
|
||
|
||
ul .active {
|
||
border-bottom: solid 0.04rem #5697f4;
|
||
color: #5697f4;
|
||
}
|
||
|
||
.theme_top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.theme_top .title {
|
||
height: 0.73rem;
|
||
margin-top: 0.14rem;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.3rem;
|
||
|
||
|
||
}
|
||
|
||
.theme_top .title .house {
|
||
width: 0.24rem;
|
||
height: 0.25rem;
|
||
border: solid 0.01rem #9a9da3;
|
||
margin-right: 0.18rem;
|
||
}
|
||
|
||
|
||
.theme_top .title span {
|
||
|
||
font-size: 0.26rem;
|
||
color: #333333;
|
||
margin-right: 0.18rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
|
||
.theme_top .title .inter {
|
||
width: 0.1rem;
|
||
height: 0.18rem;
|
||
border: solid 0.01rem #c7c7c7;
|
||
}
|
||
|
||
|
||
.theme_top .sh {
|
||
font-size: 0.26rem;
|
||
color: #5697f4;
|
||
margin-right: 0.36rem;
|
||
margin-top: 0.22 rem;
|
||
}
|
||
|
||
|
||
.det {}
|
||
|
||
.det .introduce {
|
||
height: 1.8rem;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.det .introduce img {
|
||
width: 1.36rem;
|
||
height: 1.37rem;
|
||
margin-left: 0.35rem;
|
||
|
||
|
||
}
|
||
|
||
.det .introduce .det_text {
|
||
margin-left: 0.24rem;
|
||
}
|
||
|
||
.det .det_text .det_name {
|
||
font-size: 0.3rem;
|
||
color: #444444;
|
||
margin-bottom: 0.3rem;
|
||
|
||
}
|
||
|
||
.det .det_text .det_flavor {
|
||
font-size: 0.24rem;
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.det .det_text .det_ooo {
|
||
position: relative;
|
||
}
|
||
|
||
.det .det_ooo .det_Price {
|
||
font-size: 0.3rem;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
margin-bottom: 0.17rem;
|
||
margin-left: 0.29rem;
|
||
|
||
}
|
||
|
||
|
||
.det .det_ooo .det_quan {
|
||
font-size: 0.24rem;
|
||
color: #aaaaaa;
|
||
position: absolute;
|
||
right: 0.4rem;
|
||
}
|
||
|
||
.det .det_ooo .det_but {
|
||
font-size: 0.3rem;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
margin-bottom: 0.17rem;
|
||
margin-left: 0.59rem;
|
||
}
|
||
|
||
.det p {
|
||
font-size: 0.24rem;
|
||
color: #000000;
|
||
text-align: right;
|
||
margin-right: 0.28rem;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
.det .aaa{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
margin-right: 0.26rem;
|
||
|
||
}
|
||
|
||
|
||
.det .aaa .sqth {
|
||
width: 1.28rem;
|
||
height: 0.46rem;
|
||
border-radius: 0.23rem;
|
||
border: solid 0.01rem #dddddd;
|
||
font-size: 0.24rem;
|
||
color: #888888;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 0.12rem;
|
||
|
||
}
|
||
|
||
|
||
|
||
.det .aaa .qrsh {
|
||
width: 1.28rem;
|
||
height: 0.46rem;
|
||
border-radius: 0.23rem;
|
||
border: solid 0.01rem #5697f4;
|
||
font-size: 0.24rem;
|
||
color: #5697f4;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="header">
|
||
<img src="./img/arrow.png" alt="">
|
||
<div class="text">
|
||
<img src="./img/sousuo.png" alt="">
|
||
<input type="text" placeholder="搜索我的订单">
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<ul class="pa">
|
||
<li>全部</li>
|
||
<li>待付款</li>
|
||
<li>待发货</li>
|
||
<li class="active">待收货</li>
|
||
<li>待评价</li>
|
||
<li>已完成</li>
|
||
|
||
<li>售后</li>
|
||
</ul>
|
||
|
||
<div class="theme_top pa">
|
||
<div class="title">
|
||
<img class="house" src="./img/house.png" alt="">
|
||
<span>面包自营</span>
|
||
<img class="inter" src="./img/interface-.png" alt="">
|
||
</div>
|
||
<span class="sh">待收货</span>
|
||
</div>
|
||
|
||
<div class="det">
|
||
<div class="introduce">
|
||
<img src="./img/bread.png" alt="">
|
||
<div class="det_text">
|
||
<div class="det_name">包子芝麻小蛋糕美味香脆新品
|
||
<br>正品包邮
|
||
</div>
|
||
<div class="det_flavor">独立包装+原味</div>
|
||
</div>
|
||
<div class="det_ooo">
|
||
<div class="det_Price">￥38.8</div>
|
||
<div class="det_quan">x1</div>
|
||
</div>
|
||
</div>
|
||
<div class="introduce">
|
||
<img src="./img/bread.png" alt="">
|
||
<div class="det_text">
|
||
<div class="det_name">包子奶酪蛋糕美味新品正品
|
||
<br>包邮发货
|
||
</div>
|
||
<div class="det_flavor">整箱x24+奶酪</div>
|
||
</div>
|
||
<div class="det_ooo">
|
||
<div class="det_but">￥61.2</div>
|
||
<div class="det_quan ">x1</div>
|
||
</div>
|
||
</div>
|
||
<p>共2件商品，合计：￥100.00 (含运费￥0.00)</p>
|
||
<div class="aaa">
|
||
<div class="sqth">申请退换</div>
|
||
<div class="qrsh">确认收货</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |