HTML
<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>订单详情</title>
<link rel="stylesheet" href="dist/Order-details.css">
<link rel="stylesheet" href="source/base.css">
<link rel="stylesheet" href="source/config.css">
<link rel="stylesheet" href="source/index.css">
<script src="js/flexible.js"></script>
</head>
<body>
<!-- 顶部导航条 -->
<div class="navbar-top">
<a href="#" class="back"></a>
<h2>订单列表</h2>
<a href="" class="home"></a>
</div>
<!-- 订单搜素 -->
<div class="order-search">
<form action="#">
<i></i>
<input type="text" placeholder="搜素所有订单">
</form>
</div>
<section class="container">
<div class="deal-over comment">
<div class="deal-top com-top">
<span></span>
<h4>农夫果院水果超市</h4>
<span>交易完成</span>
</div>
<div class="order-item">
<div class="item clearfix">
<a href="" class="item-pic"><img src="images/sp-01.jpg" alt=""></a>
<p class="item-conten">
<a href="" class="item-title">[海报畅销]草原情休闲奶酪酸奶条150g/袋</a>
<span class="item-color">颜色: 米黄 (香甜型)</span>
<span class="item-num">X1</span>
</p>
<span class="item-price">¥6.80</span>
</div>
<div class="item clearfix">
<a href="" class="item-pic"><img src="images/sp-02.jpg" alt=""></a>
<p class="item-conten">
<a href="" class="item-title">[最新上架]进口甜橙,新鲜上市 500克</a>
<span class="item-color">颜色: 米黄 (香甜型)</span>
<span class="item-num">X1</span>
</p>
<span class="item-price">¥6.80</span>
</div>
</div>
<div class="com-total">
<p>共计3件商品 合计: <span>¥42.80</span></p>
</div>
<div class="com-btn">
<p><a href="" class="again-buy">再次购买</a><a href="" class="evaluate-now">立即评价</a></p>
</div>
</div>
<div class="wait-buy comment">
<div class="deal-top com-top">
<span></span>
<h4>青年菜君半成品蔬菜</h4>
<span>等待买家付款</span>
</div>
<div class="order-item">
<div class="item clearfix">
<a href="" class="item-pic"><img src="images/sp-03.jpg" alt=""></a>
<p class="item-conten">
<a href="" class="item-title">[海报畅销]四川智力蔬菜柿子椒</a>
<span class="item-color">颜色: 红色,黄色</span>
<span class="item-num">X1</span>
<i class="return-shop">七天退货</i>
</p>
<span class="item-price">¥6.80</span>
</div>
</div>
<div class="com-total">
<p>共计2件商品 合计: <span>¥13.60</span></p>
</div>
<div class="com-btn">
<p><a href="" class="again-buy">取消订单</a><a href="" class="evaluate-now">付款</a></p>
</div>
</div>
<div class="deal-close comment">
<div class="deal-top com-top">
<span></span>
<h4>凯吉利鲜花</h4>
<span>交易关闭</span>
</div>
<div class="order-item">
<div class="item clearfix">
<a href="" class="item-pic"><img src="images/sp-04.jpg" alt=""></a>
<p class="item-conten">
<a href="" class="item-title">香水百合加康乃馨花(精美花篮和礼盒装)</a>
<span class="item-color">颜色: 粉色</span>
<span class="item-num">X1</span>
<i class="return-shop">七天退货</i>
</p>
<span class="item-price">¥168.00</span>
</div>
</div>
<div class="com-total">
<p>共计1件商品 合计: <span>¥168.00</span></p>
</div>
<div class="com-btn">
<p><a href="" class="again-buy">再次购买</a><a href="" class="evaluate-now">删除订单</a></p>
</div>
</div>
</section>
</body>
</html>
CSS
config.css
.hd-top{
position: relative;
width: 750/200rem;
height: 88/200rem;
background-color: #e6071b;
border-bottom: 1px solid #A50010;
span{
display: block;
font-size: 30/200rem;
color: #fff;
line-height: 88/200rem;
text-align: center;
}
i{
position: absolute;
&.arrow-l{
left: 24/200rem;
width: 20/200rem;
height: 88/200rem;
font-size: 50/200rem;
color: #fff;
line-height: 88/200rem;
}
&.hd-home{
position: absolute;
right: 24/200rem;
top: 25/200rem;
width: 40/200rem;
height: 40/200rem;
background-image: url(../img/home.png);
background-size: 40/200rem 40/200rem;
}
}
}
.comment{
width: 750/200rem;
margin-top: 20/200rem;
.com-top{
position: relative;
width: 750/200rem;
height: 99/200rem;
background-color: #fff;
border-bottom: 1px solid #DADADA;
>span{
font-size: 24/200rem;
position: absolute;
&:nth-of-type(1){
top: 29/200rem;
left: 25/200rem;
width: 36/200rem;
height: 36/200rem;
background-image: url(../img/shop.jpg);
background-size: 36/200rem 36/200rem;
background-repeat: no-repeat;
}
&:nth-of-type(2){
right: 25/200rem;
top: 40/200rem;
color: #e6071b;
}
}
h4{
line-height: 99/200rem;
font-size: 26/200rem;
padding-left: 92/200rem;
}
}
.order-item{
.item{
padding: 20/200rem 24/200rem;
border-bottom: 1px solid #ccc;
.item-pic{
width: 186/200rem;
height: 186/200rem;
float: left;
img{
display: block;
width: 100%;
}
}
.item-conten{
float: left;
width: 310/200rem;
margin-left: 22/200rem;
margin-top: 12/200rem;
.item-title{
font-size: 28/200rem;
display: block;
color: #666;
/* line-height: 38/200rem; */
}
.item-color{
font-size: 26/200rem;
display: block;
color: #a6a6a6;
margin-top: 15/200rem;
}
.item-num{
font-size: 18/200rem;
display: block;
margin-top: 12/200rem;
color: #919191;
}
.return-shop{
display: block;
width: 108/200rem;
height: 30/200rem;
background-color: #dd2727;
color: #fff;
font-size: 22/200rem;
text-align: center;
line-height: 30/200rem;
}
}
.item-price{
float: right;
font-size: 20/200rem;
color: #666;
margin-top: 12/200rem;
}
}
}
.com-total{
height: 86/200rem;
background-color: #fff;
line-height: 86/200rem;
p{
text-align: right;
font-size: 24/200rem;
padding-right: 25/200rem;
}
}
.com-btn{
height: 109/200rem;
background-color: #fff;
border-top: 1px solid #ccc;
line-height: 109/200rem;
p{
font-size: 25/200rem;
text-align: right;
padding-right: 25/200rem;
a{
display: inline-block;
height: 48/200rem;
width: 148/200rem;
border: 1px solid #d7d7d7;
line-height: 48/200rem;
text-align: center;
border-radius: 8/200rem;
&:nth-of-type(1){
margin-right: 19/200rem;
}
&:hover{
color: #E5071E;
border: 1px solid #E5071E;
}
}
}
}
}
.you-like{
width: 750/200rem;
padding-left: 25/200rem;/*
padding-right: 24/200rem; */
margin-top: 20/200rem;
padding-bottom: 25/200rem;
background-color: #fff;
h4{
font-size: 32/200rem;
color: #666666;
padding-top: 30/200rem;
}
.like-item{
.item{
float: left;
width: 220/200rem;
margin-top: 28/200rem;
margin-right: 20/200rem;
a{
display: block;
img{
display: block;
width: 100%;
}
}
p{
padding-left: 10/200rem;
}
.like-i-title{
margin-top: 26/200rem;
font-size: 30/200rem;
}
.like-i-price{
font-size: 25/200rem;
margin-top: 26/200rem;
color: #e6071b;
span{
font-size: 18/200rem;
}
}
}
}
}
base.css
/*CSS Document*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,body{
font: 20px Helvetica Neue, tahoma, Arial, Verdana,Helvetica,Tahoma,sans-serif "Microsoft YaHei", "Hiragino Sans GB", "\5b8b\4f53";
background-color: #eee;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
fieldset,
textarea,
blockquote,
p {
padding: 0;
margin: 0;
}
table,
td,
tr,
th {
font-size: 12px;
}
li {
list-style: none;
}
img {
vertical-align: top;
border: 0;
}
ol,
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 12px;
font-weight: normal;
}
address,
cite,
code,
em,
th,
i {
font-weight: normal;
font-style: normal;
}
*:focus {
outline: none;
}
.fB {
font-weight: bold;
}
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
a {
color: #2b2b2b;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #ff3c3c;
text-decoration: none;
}
a:active {
color: #ba2636;
}
i,
u {
font-style: normal;
}
Order-details.css
@base:200rem;
//导入样式重置
@import url(resize.less);
//导入头部导航条
@import url(../dist/navbar-top.css);
//订单搜素
.order-search{
height: 82 / @base;
width: 750 / @base;
form{
position: relative;
width: 700 / @base;
margin: 7/@base auto;
height: 65 / @base;
border:1px solid #ccc;
border-radius: 5px;
overflow: hidden;
font-size: 24 / @base;
input{
width: 100%;
border:0;
padding: 18/@base 10/@base;
padding-left: 62 / @base;
}
i{
position: absolute;
top:15/ @base;
left:20/@base;
width: 30 / @base;
height: 31/@base;
background: url(../images/search.png) no-repeat;
background-size: 30/@base 31/@base;
}
}
}