296 lines
8.4 KiB
HTML
296 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" style=" font-size: 20px;">
|
|||
|
|
|
|||
|
|
<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="./DOMClass.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body,
|
|||
|
|
html {
|
|||
|
|
margin: 0;
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#app {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#app p {
|
|||
|
|
font-size: 10rem;
|
|||
|
|
width: 750rem;
|
|||
|
|
background-color: salmon;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 10rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content h3 {
|
|||
|
|
padding-left: 20rem;
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 43rem;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 15rem;
|
|||
|
|
background-color: sandybrown;
|
|||
|
|
padding: 10rem 20rem;
|
|||
|
|
position: relative;
|
|||
|
|
top: -30rem;
|
|||
|
|
left: -20rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 700rem;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rem;
|
|||
|
|
padding: 20px 30px 0;
|
|||
|
|
margin: 15rem 0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1,
|
|||
|
|
.t2,
|
|||
|
|
.t3 {
|
|||
|
|
font-size: 30rem;
|
|||
|
|
color: #707070;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-bottom: 20rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1 b {
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t1 span {
|
|||
|
|
color: #F66A4B;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t2 b {
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="app">
|
|||
|
|
<header>瞎几把写</header>
|
|||
|
|
<div class="content">
|
|||
|
|
<!-- <div class="item">
|
|||
|
|
<h3>1月</h3>
|
|||
|
|
<div class="t1"><b>快捷</b> <span>￥0.8</span> </div>
|
|||
|
|
<div class="t2"><b>订单号：xxxxx</b> <span>收款￥200</span> </div>
|
|||
|
|
<div class="t3">2022.01.14</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// rem 做移动端布局
|
|||
|
|
// 1rem = 750/1
|
|||
|
|
// 750rem = 1
|
|||
|
|
window.onresize = () => {
|
|||
|
|
let html = document.documentElement;
|
|||
|
|
// 活学活用
|
|||
|
|
html.style.fontSize = `${document.body.clientWidth / 750}px`;
|
|||
|
|
console.log(document.body.clientWidth);
|
|||
|
|
}
|
|||
|
|
window.onresize();
|
|||
|
|
|
|||
|
|
// 创造数据
|
|||
|
|
class creatData {
|
|||
|
|
constructor(num) {
|
|||
|
|
this.data = [];
|
|||
|
|
for (let index = 0; index < num; index++) {
|
|||
|
|
let o = {
|
|||
|
|
title: "快捷" + this.random(1, 20),
|
|||
|
|
yinli: this.random(0, 10, true),
|
|||
|
|
order: this.random(1111111, 9999999), shoukuan: this.random(99, 9999),
|
|||
|
|
tiem: this.chulitime(new Date(`2022.${this.random(1, 12)}.14`))
|
|||
|
|
};
|
|||
|
|
this.data.push(o);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 随机整型
|
|||
|
|
random = (min, max, boo) => {
|
|||
|
|
if (boo) return Math.random() * (max - min) + min;
|
|||
|
|
return Math.round(Math.random() * (max - min) + min);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理时间
|
|||
|
|
chulitime = function (date) {
|
|||
|
|
let n = date.getFullYear();
|
|||
|
|
let m = date.getMonth() + 1;
|
|||
|
|
let d = date.getDate();
|
|||
|
|
return `${this.twoNumber(n)}-${this.twoNumber(m)}-${this.twoNumber(d)}`
|
|||
|
|
}
|
|||
|
|
// 处理0
|
|||
|
|
twoNumber = function (num) {
|
|||
|
|
return num >= 10 ? num : `0${num}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 生成数据
|
|||
|
|
let cdata = new creatData(55);
|
|||
|
|
console.log(cdata);
|
|||
|
|
|
|||
|
|
// 方便使用
|
|||
|
|
data = cdata.data;
|
|||
|
|
|
|||
|
|
function paixu(arr) {
|
|||
|
|
let o = JSON.parse(JSON.stringify(arr));
|
|||
|
|
// 排序每一个
|
|||
|
|
for (let j = 0; j < arr.length; j++) {
|
|||
|
|
// 排了一个序
|
|||
|
|
// (arr.length - j) 优化 不需要重复的对比
|
|||
|
|
for (let i = 0; i < (arr.length - j); i++) {
|
|||
|
|
if (i == arr.length - 1) continue;
|
|||
|
|
let el0 = new Date(o[i].tiem).getTime();
|
|||
|
|
let el1 = new Date(o[i + 1].tiem).getTime();
|
|||
|
|
// 当前项 大于 当前前项
|
|||
|
|
if (el0 > el1) {
|
|||
|
|
// 我就将 当前项 与当前前项 互换位置
|
|||
|
|
let cy0 = JSON.parse(JSON.stringify(o[i])); // 注意复杂数据类型
|
|||
|
|
let cy1 = JSON.parse(JSON.stringify(o[i + 1])); // 注意复杂数据类型
|
|||
|
|
o[i + 1] = cy0;
|
|||
|
|
o[i] = cy1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return o;
|
|||
|
|
}
|
|||
|
|
data = paixu(data);
|
|||
|
|
|
|||
|
|
// 争对时间排序ok的情况
|
|||
|
|
// 如何去算
|
|||
|
|
function fenge(de) {
|
|||
|
|
let o = JSON.parse(JSON.stringify(de));
|
|||
|
|
let yue = [];
|
|||
|
|
for (let i = 0; i < de.length; i++) {
|
|||
|
|
const element = o[i];
|
|||
|
|
let date = new Date(element.tiem);
|
|||
|
|
let m = date.getMonth() + 1;
|
|||
|
|
o[i].m = m;
|
|||
|
|
// 控制显示
|
|||
|
|
if (yue.includes(m)) {
|
|||
|
|
o[i].show = 'none'
|
|||
|
|
} else {
|
|||
|
|
yue.push(m);
|
|||
|
|
o[i].show = 'inline-block'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return o;
|
|||
|
|
}
|
|||
|
|
data = fenge(data);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// console.log(cdata.data);
|
|||
|
|
// data = paixu(cdata.data);
|
|||
|
|
// console.log(data);
|
|||
|
|
|
|||
|
|
// 渲染
|
|||
|
|
function view(data) {
|
|||
|
|
console.log(data);
|
|||
|
|
for (let index = 0; index < data.length; index++) {
|
|||
|
|
const elet = data[index];
|
|||
|
|
new DOMClass({
|
|||
|
|
el: "div",
|
|||
|
|
className: "item",
|
|||
|
|
elChildren: [
|
|||
|
|
{
|
|||
|
|
el: "h3", innerText: `${elet.m}月`, style: {
|
|||
|
|
display: elet.show
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "div",
|
|||
|
|
className: "t1",
|
|||
|
|
elChildren: [
|
|||
|
|
{
|
|||
|
|
el: "b",
|
|||
|
|
innerText: elet.title
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "span",
|
|||
|
|
innerText: elet.yinli.toFixed(2)
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "div",
|
|||
|
|
className: "t2",
|
|||
|
|
elChildren: [
|
|||
|
|
{
|
|||
|
|
el: "b",
|
|||
|
|
innerText: `订单号：${elet.order}`
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "span",
|
|||
|
|
innerText: `收款￥${elet.shoukuan}`
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
el: "div",
|
|||
|
|
className: "t3",
|
|||
|
|
innerText: elet.tiem
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}, document.querySelector("#app .content"));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
view(data);
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- 750 / 750 1px -->
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
<!-- 介绍 常规的一些布局单位
|
|||
|
|
px vh vw % em rem
|
|||
|
|
|
|||
|
|
em 1em
|
|||
|
|
它本身大小
|
|||
|
|
em 说白了就是根据父盒子的字体大小, 的比例单位
|
|||
|
|
公式: 父盒子字体大小 * (n)em
|
|||
|
|
|
|||
|
|
rem
|
|||
|
|
公式: html字体大小 * (n)rem
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 移动端
|
|||
|
|
像素: 显示像素 物理像素
|
|||
|
|
|
|||
|
|
显示像素: 你显示的图片
|
|||
|
|
物理像素: 你买的显示器的分辨率
|
|||
|
|
|
|||
|
|
物理像素 显示像素
|
|||
|
|
1 : 1 // 1倍显示 正常的
|
|||
|
|
1 : 2 //
|
|||
|
|
2 : 1 // 2倍屏 2倍图
|
|||
|
|
|
|||
|
|
设计稿 -> 2倍图 设计稿 -> W: 750
|
|||
|
|
设计稿 -> 1倍图 设计稿 -> W: 375
|
|||
|
|
|
|||
|
|
|
|||
|
|
-->
|