p43281075
/
pjr4z27u5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: 结算页面 header

Browse Source
master
Haoyu Chen 5 years ago
parent 316462b249
commit fd25c5156f
4 changed files with 414 additions and 1 deletions
Show Stats Download Patch File Download Diff File

307
新版闲书网主页/.idea/前端/css/order.css
Unescape View File

@ -0,0 +1,307 @@
#header {
height: 122px;
margin-top: -26px !important;
width: auto !important;
position: relative;
z-index: 1000;
margin-bottom: 0;
min-width: 990px;
background: #fff;
}
#content, #footer, #header, #page {
margin-left: auto;
margin-right: auto;
}
.headerLayout {
width: 990px;
padding-top: 26px;
margin: 0 auto;
}
.headerCon {
position: relative;
}
#mallLogo {
float: left;
z-index: 9;
padding-top: 28px;
width: 400px;
height: 64px;
line-height: 64px;
position: relative;
}
h1, h2 {
font-weight: 500;
}
#mallLogo .mlogo {
float: left;
margin-right: 10px;
padding: 0;
}
#mallLogo .mlogo a {
height: 30px;
font-size: 22px;
width: 190px;
overflow: hidden;
}
.header-extra {
overflow: visible;
}
.tmall-stepbar {
padding-top: 25px;
width: 710px;
}
.next-step {
width: 100%;
position: relative;
border: none;
}
.next-step-circle.next-step-horizontal {
text-align: center;
white-space: nowrap;
}
.next-step-circle.next-step-horizontal {
text-align: center;
white-space: nowrap;
}
.next-step-horizontal>.next-step-item {
display: inline-block;
text-align: left;
}
.next-step-item {
position: relative;
vertical-align: middle;
outline: 0;
height: 100%;
}
.next-step-circle .next-step-item-container {
display: inline-block;
vertical-align: middle;
position: relative;
padding: 0 8px;
}
.next-step-circle>.next-step-item-process .next-step-item-node-placeholder {
width: 32px;
height: 32px;
position: relative;
}
.next-step-circle .next-step-item-container .next-step-item-node-placeholder {
display: inline-block;
}
.next-step-circle>.next-step-item-process .next-step-item-node {
position: relative;
display: inline-block;
text-align: center;
cursor: pointer;
}
.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle {
background: #ff0036;
border-color: #ff0036;
}
.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle, .next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-dot {
background: #f50;
border-color: #f50;
}
.next-step-circle>.next-step-item-process .next-step-item-node-circle {
display: block;
width: 32px;
height: 32px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
text-align: center;
border: 1px solid;
border-radius: 50%;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
}
.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body {
width: 100px;
left: -26px;
text-align: center;
position: absolute;
}
.next-step-item-body {
outline: 0;
}
.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title {
white-space: nowrap;
}
.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title {
font-size: 16px;
line-height: 20px;
margin-top: 8px;
font-weight: 700;
}
.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content, .next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title {
white-space: normal;
}
.next-step-circle>.next-step-item-process .next-step-item-title {
color: #333;
word-break: break-word;
}
.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content {
margin-top: 4px;
}
.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content, .next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title {
white-space: normal;
}
.next-step-circle>.next-step-item-process .next-step-item-content {
color: #333;
font-size: 14px;
word-break: break-word;
}
.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail {
display: inline-block;
clear: both;
width: calc(100% - 48px);
vertical-align: middle;
}
.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay {
display: block;
height: 1px;
position: relative;
}
.next-step-circle>.next-step-item-process .next-step-item-tail-underlay {
background: #e6e7eb;
}
.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay {
position: absolute;
top: 0;
height: 1px;
-webkit-transition: all .1s linear;
transition: all .1s linear;
width: 100%;
}
.next-step-circle>.next-step-item-process .next-step-item-tail-overlay {
background: #c4c6cf;
}
.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail {
display: inline-block;
clear: both;
width: calc(100% - 48px);
vertical-align: middle;
}
.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay {
display: block;
height: 1px;
position: relative;
}
.next-step-circle>.next-step-item-wait .next-step-item-tail-underlay {
background: #e6e7eb;
}
.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay {
position: absolute;
top: 0;
height: 1px;
-webkit-transition: all .1s linear;
transition: all .1s linear;
width: 100%;
}
.next-step-circle>.next-step-item-wait .next-step-item-tail-overlay {
background: #c4c6cf;
}
.next-step-circle>.next-step-item-wait .next-step-item-node-placeholder {
width: 32px;
height: 32px;
position: relative;
}
.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node {
color: #666;
}
.next-step-circle>.next-step-item-wait .next-step-item-node {
position: relative;
display: inline-block;
text-align: center;
cursor: pointer;
}
.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle, .next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot {
background: #fff;
border-color: #a0a2ad;
}
.next-step-circle>.next-step-item-wait .next-step-item-node-circle {
display: block;
width: 32px;
height: 32px;
font-size: 14px;
font-weight: 400;
line-height: 30px;
text-align: center;
border: 1px solid;
border-radius: 50%;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
}
.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body {
width: 100px;
left: -26px;
text-align: center;
position: absolute;
}
.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title {
font-size: 16px;
line-height: 20px;
margin-top: 8px;
font-weight: 700;
}
.next-step-circle>.next-step-item-wait .next-step-item-title {
color: #666;
word-break: break-word;
}
.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content {
margin-top: 4px;
}
.next-step-circle>.next-step-item-wait .next-step-item-content {
color: #666;
font-size: 14px;
word-break: break-word;
}

2
新版闲书网主页/.idea/前端/html/cart.html
Unescape View File

@ -429,5 +429,5 @@
</div>
</div>
<script></script>
<script>appendBooks</script>
</html>

53
新版闲书网主页/.idea/前端/html/order.html
Unescape View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>订单结算</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<link href="../css/reset.css" rel="stylesheet">
<link rel="stylesheet" href="../css/order.css">
<script type="text/javascript" src="../js/order.js"></script>
</head>
<body>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<div class="top-nav">
<div class="container clear-float">
<div class="fl">
<a class="item" href="#">首页</a>
</div>
<div class="fr">
<a class="item" href="#">购物车</a>
<a class="item" href="#">我的订单</a>
<a class="item" href="#">收藏夹</a>
<a class="item" href="#">登录</a>
<a class="item" href="#">注册</a>
</div>
</div>
</div>
<div id="header" class="header-order-app">
<div class="headerLayout">
<div class="headerCon">
<h1 id="mallLogo">
<span class="mlogo">
<a href="#">
<img src="../img/logo.png" alt="" class="logoPic">
</a>
</span>
</h1>
<div class="header-extra">
<div class="stepbar-box">
<div class="tmall-stepbar" style="padding-top: 25px;width: 710px;">
<ol id="next-step" prefix="next-" direction="hoz" class="next-step next-step-circle next-step-horizontal next-step-label-vertical" style="width: auto; overflow: visible; height: 64px;">
<script>createNextStepList()</script>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

53
新版闲书网主页/.idea/前端/js/order.js
Unescape View File

@ -0,0 +1,53 @@
function createNextStepList() {
let parentNode = document.getElementById("next-step")
for (i in [0,1,2,3,4]) {
let node = document.createElement("li")
if (i==0) {
node.classList.add("next-step-item", "next-step-item-process", "next-step-item-first")
} else if (i==4) {
node.classList.add("next-step-item", "next-step-item-wait")
} else {
node.classList.add("next-step-item", "next-step-item-wait", "next-step-item-last")
}
node.style.width = "20%"
parentNode.appendChild(node)
let container = document.createElement("div")
container.classList.add("next-step-item-container")
node.appendChild(container)
let placeholder = document.createElement("div")
placeholder.classList.add("next-step-item-node-placeholder")
container.appendChild(placeholder)
let itemNode = document.createElement("div")
itemNode.classList.add("next-step-item-node")
placeholder.appendChild(itemNode)
let circle = document.createElement("div")
circle.classList.add("next-step-item-node-circle")
circle.innerText = (Number(i)+1).toString()
itemNode.appendChild(circle)
let itemBody = document.createElement("div")
itemBody.classList.add("next-step-item-body")
itemBody.setAttribute("tabindex", "0")
itemBody.setAttribute("aria-current", "step")
node.appendChild(itemBody)
let itemtitle = document.createElement("div")
itemtitle.classList.add("next-step-item-title")
itemBody.innerText = "查看购物车"
itemBody.appendChild(itemtitle)
let itemContent = document.createElement("div")
itemContent.classList.add("next-step-item-content")
itemBody.appendChild(itemContent)
let itemTail = document.createElement("div")
itemTail.classList.add("next-step-item-tail")
node.appendChild(itemTail)
let tailUnderlay = document.createElement("div")
tailUnderlay.classList.add("next-step-item-tail-underlay")
itemTail.appendChild(tailUnderlay)
let tailOverlay = document.createElement("div")
tailOverlay.classList.add("next-step-item-tail-overlay")
tailUnderlay.appendChild(tailOverlay)
}
}
Write Preview
Loading…
Cancel
Save