<!DOCTYPE html>
<html lang="en" style="font-size:50px;">
<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,maximum-scale=1,user-scalable=no">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(./imgs/blurcolor@2x.png) no-repeat no-repeat;
background-size: cover;
}
.header {
width: 100%;
position: fixed;
top: 0;
height: 2rem;
background: #FFFFFF;
}
.header h2 {
height: 1.1rem;
text-align: center;
line-height: 1.1rem;
font-size: .37rem;
}
.header .title {
line-height: .9rem;
height: .9rem;
display: flex;
justify-content: space-around;
}
.header .div {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.header .title p {
padding-left: .28rem;
padding-right: .28rem;
text-align: center;
font-size: .28rem;
font-weight: 600;
}
.header .title .active {
border-bottom: solid .06rem #3642FF;
color: #3642FF;
}
.content {
padding-top: 2rem;
}
.content .box .item {
margin: .32rem;
height: 1.4rem;
justify-content: space-between;
display: flex;
padding: .32rem;
background-color: #FFFFFF;
}
.content .box .item .picture .img {
/* padding-right: 7.815px; */
width: 1.4rem;
height: 1.4rem;
}
.content .box .item .itemName {
width: 3.6rem;
padding-top: .42rem;
}
.content .box .item .itemName .name{
font-size: .3rem;
font-weight: 600;
}
.content .box .item .itemName .scored {
font-size: .28rem;
color: rgb(54, 67, 254)
}
.content .box .item .state {
font-size: .26rem;
width: 1rem;
padding-top: .52rem;
}
.content .box .item .state .pay {
padding: .04rem;
color: rgb(255, 99, 100);
background-color: rgb(255, 240, 238);
border: solid .04rem rgb(255, 99, 100);
}
.content .box .item .state .sended {
padding: .06rem;
color: rgb(103, 205, 51);
background-color: rgb(247, 255, 239);
border: solid .04rem rgb(103, 205, 51);
}
.content .box .item .state .after {
padding: .06rem;
color: rgb(252, 184, 43);
background-color: rgb(255, 251, 231);
border: solid .04rem rgb(252, 184, 43);
}
.content .box .item .state .waited {
padding: .06rem;
color: rgb(111, 110, 110);
background-color: rgb(246, 246, 246);
border: solid .04rem rgb(111, 110, 110);
}
@media screen and(-webkit-min-device-pixel-ratio：2),
screen and (min--moz-device-pixel-ratio: 2) {
.content .box .item .picture{
border: .01rem solid rgba(0, 0, 0, 0.1);
}
}
@media screen and(-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
.content .box .item .picture{
border: .0067rem solid rgba(0, 0, 0, 0.1);
}
}
</style>
<script>
(function (doc, win) {
const docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 如果小于320不在缩小
clientWidth = clientWidth < 320 ? 320 : clientWidth
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
</script>
</head>
<body>
<header class="header">
<h2>我的订单</h2>
<div class="title">
<div class="active">
<p>全部</p>
</div>
<div class="unit">
<p>待付款</p>
</div>
<div class="unit">
<p>待发货</p>
</div>
<div class="unit">
<p>已完成</p>
</div>
<div class="unit">
<p>退款/售后</p>
</div>
</div>
</header>
<main class="content">
<div class="box">
<div class="item">
<div class="picture">
<img src="./imgs/back20@2x.png" class="img">
</div>
<div class="itemName">
<p class="name">Galaxy Z系列 5折券</p>
<p class="scored">50积分</p>
</div>
<div class="state">
<p class="pay">待付款</p>
</div>
</div>
<div class="item">
<div class="picture">
<img src="./imgs/phone@2x.png" class="img">
</div>
<div class="itemName">
<p class="name">Galaxy Note20系列手机</p>
<p class="scored">50积分</p>
</div>
<div class="state">
<p class="sended">已发货</p>
</div>
</div>
<div class="item">
<div class="picture">
<img src="./imgs/back20@2x.png" class="img">
</div>
<div class="itemName">
<p class="name">Galaxy Z系列 5折券</p>
<p class="scored">50积分</p>
</div>
<div class="state">
<p class="waited">待发货</p>
</div>
</div>
<div class="item">
<div class="picture">
<img src="./imgs/back20@2x.png" class="img">
</div>
<div class="itemName">
<p class="name">Galaxy Z系列 5折券</p>
<p class="scored">50积分</p>
</div>
<div class="state">
<p class="after">售后中</p>
</div>
</div>
<div class="item">
<div class="picture">
<img src="./imgs/back20@2x.png" class="img">
</div>
<div class="itemName">
<p class="name">Galaxy Z系列 5折券</p>
<p class="scored">50积分</p>
</div>
<div class="state">
<p class="waited">待发货</p>
</div>
</div>
<div class="item">
<div class="picture">
<img src="./imgs/back20@2x.png" class="img">
</div>
<div class="itemName">
<p class="name">Galaxy Z系列 5折券</p>
<p class="scored">50积分</p>
</div>
<div class="state">
<p class="waited">待发货</p>
</div>
</div>
<div class="item
基于HTML的信用卡积分兑换商城源码.zip
版权申诉
195 浏览量
2023-08-26
10:54:01
上传
评论
收藏 1.72MB ZIP 举报
基于HTML的信用卡积分兑换商城源码.zip （57个子文件） 
介绍.md 35B
index.html 8KB
imgs 
blurcolor@2x.png 110KB back20@2x.png 70KB my@3x.png 2KB battery@3x.png 102KB car@2x.png 4KB goods@2x.png 3KB banner@2x.png 160KB unique@3x.png 6KB banner.png 48KB blurcolor.png 35KB back20.png 20KB backz.png 20KB digital.png 1KB unique.png 1KB my@2x.png 989B sport@2x.png 4KB photo@2x.png 3KB kindof.png 162B bag@3x.png 6KB digital@2x.png 4KB battery.png 17KB backz@3x.png 123KB goods.png 1KB photo.png 1KB home.png 408B home@3x.png 1KB phone.png 24KB battery@2x.png 54KB kindof@3x.png 356B my.png 510B sport.png 2KB phone@3x.png 155KB kindof@2x.png 262B card@2x.png 3KB car@3x.png 7KB unique@2x.png 3KB home@2x.png 681B car.png 2KB goods@3x.png 6KB phone@2x.png 79KB digital@3x.png 7KB blurcolor@3x.png 204KB order.png 169B photo@3x.png 6KB bag.png 1KB order@2x.png 281B back20@3x.png 123KB backz@2x.png 70KB card@3x.png 6KB order@3x.png 383B banner@3x.png 289KB bag@2x.png 3KB sport@3x.png 8KB card.png 1KB order.html 8KB资源评论
