引言
最近,我在开发一个汽车轮胎检测报告 Web 页面,里面的布局和样式都是自己纯手工打造,但是,都是一些比较基础的 重复的属性编写。在此,我将源码 + 资源 附上,感兴趣的朋友可以自己复现一遍
效果展示
源码展示
为了大家方便观看,我把 HTML 和 CSS放在了同一个文件里面,大家可以自行分离
<html>
<head>
<title>武科汽检中心</title>
<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<style>
.title {
height: 50px;
text-align: center;
line-height: 50px;
font-size: 24px;
font-weight: bold;
}
.border {
border-bottom: 2px dotted #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
.flexStyle {
display: flex;
align-items: center;
justify-content: center;
}
.content {
vertical-align: middle;
display: table-cell;
}
</style>
</head>
//这一段是我们工作室后端 语法 ,与后面 {carnum}等语法结合使用,大家可以忽略,
<script class="var ds">
var mId = id;
var result = data.query("/admin/mobile_lun_tai/test_history", "id='" + mId + "'", 1, 0, {
"created": -1
}, ["$_value"]);
r.data = result.rows[0]._value;
return r;
</script>
<body>
<!-- <file value="=data"> -->
<!-- <div>车牌号:{carnum}</div>
<div>汽车车型:{cartype}</div>
<div>查车技师:{checker}</div>
<div>里程:{mile} (km)</div>
<div>客户手机:{phonenumber}</div>
<div>到店目的:{purpose}</div>
<div>基本参数:{rparam}</div>
<div>左前轮:{leftfront}</div>
<div>右前轮:{rightfront}</div>
<div>左后轮:{leftback}</div>
<div>右后轮:{rightback}</div>
<div>创建时间:{created}</div> -->
<!-- </file> -->
<div style="display: flex;align-items: center;justify-content: center;">
<div style="display: inline-block;display: flex;align-items: center;justify-content: center;background-color: #fff;z-index:999;">
<!-- <div style="display:file;flex-direction:column;height: 50px;width:2px;">
<div style="flex:1;width:2px;height:24px;"></div>
<div style="flex:1;width:2px;height:26px;"></div>
</div> -->
<!-- <span style="display: inline-block;height:2px;width:60px;"></span> -->
<img src="./imgs/logoTire.png" style="margin-right:20px;width:18px;">
<span class="title">轮胎检测报告</span>
<img src="./imgs/logoTire.png" style="margin-left:20px;width:18px">
<!-- <span style="display: inline-block;height:2px;width:60px;"></span> -->
<!-- <div style="display:file;flex-direction:column;height: 50px;width:2px;">
<div style="flex:1;width:2px;height:24px;"></div>
<div style="flex:1;width:2px;height:26px;"></div>
</div> -->
</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;height:100px;">
<div style="flex-direction:column;width:340px;height:100px;border-top: 2px solid #000;padding-top:46px;" class="border flexStyle">
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:50%;left:5%;transform: translate(0, -50%);">
<img src="./imgs/shop.png" style="width:18px;vertical-align: middle;margin-right:10px">
<span>服务门店:第壹感知</span>
</div>
</div>
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:5%">
<img src="./imgs/address.png" style="width:18px;vertical-align: middle;margin-right:10px">
<span>门店地址:武汉科技大学黄家湖校区</span>
</div>
</div>
</div>
</div>
<file value="=data">
<div style="display: flex;align-items: center;justify-content: center;height:100px;">
<div style="flex-direction:row;width:340px;height:100px;" class="border flexStyle">
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">车牌号码</span>
<span style="display:block;color:#adadad">{carnum}</span>
</div>
</div>
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">车型</span>
<span style="display:block;color:#adadad">{cartype}</span>
</div>
</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;height:100px;">
<div style="flex-direction:row;width:340px;height:100px" class="border flexStyle">
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">检测时间</span>
<span style="display:block;color:#adadad">{created}</span>
</div>
</div>
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">里程(km)</span>
<span style="display:block;color:#adadad">{mile}</span>
</div>
</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;height:100px;">
<div style="flex-direction:row;width:340px;height:100px" class="border flexStyle">
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">检测设备</span>
<span style="display:block;color:#adadad">手持式轮胎检测仪</span>
</div>
</div>
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">技师</span>
<span style="display:block;color:#adadad">{checker}</span>
</div>
</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;height:100px;">
<div style="flex-direction:row;width:340px;height:100px;border-bottom: 2px solid #000;" class="border flexStyle">
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">到店目的</span>
<span style="display:block;color:#adadad">{purpose}</span>
</div>
</div>
<div style="flex:1;width:100%;height:40px;position: relative;">
<div style="position: absolute;top:10%;left:10%">
<span style="display:block">备注</span>
<span style="display:block;color:#adadad">{purpose}</span>
</div>
</div>
</div>
</div>
<!-- 评估建议 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:30px;">
<div style="width:344px;height:360px;display: flex;flex-direction: column;" class="">
<div>
<div style="font-size: 24px;font-weight: bold;display:inline-block;">评估建议</div>
<img src="./imgs/suggestShop.png" height="26px" style="vertical-align:baseline;margin-left:10px;" />
</div>
<div style="margin-top:25px;display:flex;align-items:center;">
<img src="./imgs/wrong.png" height="18px" style="vertical-align:middle;" />
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;width:100px;">
整体磨损:
</div>
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;">
[左前轮]轮胎严重磨损,建议更换轮胎
</div>
</div>
<div style="margin-top:25px;display:flex;align-items:center;">
<img src="./imgs/wrong.png" height="18px" style="vertical-align:middle;" />
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;width:110px;">
异常磨损:
</div>
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;">
[左前轮]轮胎中间磨损异常,建议检查胎压
</div>
</div>
<div style="margin-top:25px;display:flex;align-items:center;">
<img src="./imgs/wrong.png" height="18px" style="vertical-align:middle;" />
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;width:110px;">
轮胎年限:
</div>
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;">
[左前轮]轮胎中间磨损异常,建议检查胎压
</div>
</div>
<div style="margin-top:25px;display:flex;align-items:center;">
<img src="./imgs/correct.png" height="18px" style="vertical-align:middle;" />
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;width:110px;">
轮胎外观:
</div>
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;">
[左前轮]轮胎中间磨损异常,建议检查胎压
</div>
</div>
<div style="margin-top:25px;display:flex;align-items:center;">
<img src="./imgs/correct.png" height="18px" style="vertical-align:middle;" />
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;width:110px;">
安装检测:
</div>
<div style="font-size: 16px;display:inline-block;margin-left:10px;line-height:26.4px;height:28px;">
[左前轮]轮胎中间磨损异常,建议检查胎压
</div>
</div>
</div>
</div>
<!-- 整体磨损 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:30px;">
<div style="width:344px;height:700px;display: flex;flex-direction: column;" class="">
<div style="display:flex;flex-direction:column;align-items:center;">
<div style="height:30px;font-size:24px;font-weight:400;text-align:center;line-height:30px;">整体磨损</div>
<img src="./imgs/circleRect.png" width="25px" style="margin-top:10px;">
</div>
<div style="display:flex;flex-direction:column;align-items:center;">
<img src="./imgs/classRange.png" width="320px" style="margin-top:25px;">
</div>
<div style="display:flex;flex-direction:column;align-items:center;position:relative;">
<div style="position:absolute;top:30px;left:10px;width:150px;height:150px;border:1px solid #ccc;display:flex;flex-direction:column;">
<div style="flex:1;"></div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">左前轮:</div>
<div style="flex:1;color:#ff5e5e;">严重</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">品牌:</div>
<div style="flex:1;"></div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">规格/R:</div>
<div style="flex:1;">{rparam}</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">DOT:</div>
<div style="flex:1;">{dot}</div>
</div>
<div style="flex:1;"></div>
</div>
<div style="position:absolute;top:30px;right:10px;width:150px;height:150px;border:1px solid #ccc;display:flex;flex-direction:column;">
<div style="flex:1;"></div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">左前轮:</div>
<div style="flex:1;color:#f59555">中度</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">品牌:</div>
<div style="flex:1;"></div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">规格/R:</div>
<div style="flex:1;">{rparam}</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">DOT:</div>
<div style="flex:1;">{dot}</div>
</div>
<div style="flex:1;"></div>
</div>
<div style="position:absolute;bottom:-140px;left:10px;width:150px;height:150px;border:1px solid #ccc;display:flex;flex-direction:column;">
<div style="flex:1;"></div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">左前轮:</div>
<div style="flex:1;color:#ffc74f">一般</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">品牌:</div>
<div style="flex:1;"></div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">规格/R:</div>
<div style="flex:1;">{rparam}</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">DOT:</div>
<div style="flex:1;">{dot}</div>
</div>
<div style="flex:1;"></div>
</div>
<div style="position:absolute;bottom:-140px;right:10px;width:150px;height:150px;border:1px solid #ccc;display:flex;flex-direction:column;">
<div style="flex:1;"></div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">左前轮:</div>
<div style="flex:1;color:#46ce50">良好</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">品牌:</div>
<div style="flex:1;"></div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">规格/R:</div>
<div style="flex:1;">{rparam}</div>
</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;text-align:center;">DOT:</div>
<div style="flex:1;">{dot}</div>
</div>
<div style="flex:1;"></div>
</div>
<div style="position:absolute;bottom:11px;right:50px;width:50px;height:40px;border:1px solid #ccc;border-left:0px;border-bottom:0px;"></div>
<div style="position:absolute;bottom:11px;left:55px;width:50px;height:40px;border:1px solid #ccc;border-right:0px;border-bottom:0px;"></div>
<div style="position:absolute;top:182px;right:55px;width:50px;height:29px;border:1px solid #ccc;border-left:0px;border-top:0px;"></div>
<div style="position:absolute;top:181px;left:55px;width:50px;height:29px;border:1px solid #ccc;border-right:0px;border-top:0px;"></div>
<img src="./imgs/carOne.png" height="320px" style="margin-top:90px;">
</div>
</div>
</div>
<!-- 异常磨损 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:30px;">
<div style="width:344px;height:800px;display: flex;flex-direction: column;" class="">
<div style="display:flex;flex-direction:column;align-items:center;">
<div style="height:30px;font-size:24px;font-weight:400;text-align:center;line-height:30px;">异常磨损</div>
<img src="./imgs/circleRect.png" width="25px" style="margin-top:10px;">
</div>
<!-- <div style="display:flex;flex-direction:column;align-items:center;">
<img src="./imgs/classRange.png" width="320px" style="margin-top:25px;">
</div> -->
<div style="display:flex;flex-direction:column;align-items:center;position:relative;">
<div style="position:absolute;top:30px;left:10px;width:150px;height:210px;display:flex;flex-direction:column;">
<div style="height:25px;text-align:center">左前轮:</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#f36856;margin:2px;border-radius:5px;">4.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#f36856;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#f36856;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#f36856;margin:2px;border-radius:5px;">4.3</div>
</div>
<div style="height:40px;display:flex;justify-content:center;align-items:center;">中间比两侧磨损严重</div>
</div>
<div style="position:absolute;top:30px;right:10px;width:150px;height:210px;display:flex;flex-direction:column;">
<div style="height:25px;text-align:center">右前轮:</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">4.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">4.3</div>
</div>
<div style="height:40px;display:flex;justify-content:center;align-items:center;">花纹磨损均匀</div>
</div>
<div style="position:absolute;top:430px;left:10px;width:150px;height:210px;display:flex;flex-direction:column;">
<div style="height:25px;text-align:center">左后轮:</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">4.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">4.3</div>
</div>
<div style="height:40px;display:flex;justify-content:center;align-items:center;">花纹磨损均匀</div>
</div>
<div style="position:absolute;top:430px;right:10px;width:150px;height:210px;display:flex;flex-direction:column;">
<div style="height:25px;text-align:center">右后轮:</div>
<div style="flex:1;display:flex;flex-direction:row;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">4.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">3.3</div>
<div style="flex:1;display:flex;justify-content:center;align-items:center;background-color:#46ce50;margin:2px;border-radius:5px;">4.3</div>
</div>
<div style="height:40px;display:flex;justify-content:center;align-items:center;">花纹磨损均匀</div>
</div>
<div style="position:absolute;bottom:-4px;right:75px;width:50px;height:40px;border:1px solid #ccc;border-left:0px;border-bottom:0px;"></div>
<div style="position:absolute;bottom:-4px;left:75px;width:50px;height:40px;border:1px solid #ccc;border-right:0px;border-bottom:0px;"></div>
<div style="position:absolute;top:252px;right:75px;width:50px;height:29px;border:1px solid #ccc;border-left:0px;border-top:0px;"></div>
<div style="position:absolute;top:252px;left:75px;width:50px;height:29px;border:1px solid #ccc;border-right:0px;border-top:0px;"></div>
<div style="position:absolute;top:660px;left:0px;;width:340px;">
<div style="height:20px;border:1px solid #ccc;border-top:0px;"></div>
<div style="height:40px;display:flex;justify-content:center;align-items:center;">
<img src="./imgs/triangle.png" width="15px;" />
</div>
<div style="height:40px;display:flex;justify-content:center;">
<span>结论:轮胎出现偏磨,建议做进一步检查</span>
</div>
</div>
<img src="./imgs/carOne.png" height="220px" style="margin-top:200px;">
</div>
</div>
</div>
<!-- 轮胎安装 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:50px;">
<div style="width:344px;height:520px;display: flex;flex-direction: column;" class="">
<div style="display:flex;flex-direction:column;align-items:center;">
<div style="height:30px;font-size:24px;font-weight:400;text-align:center;line-height:30px;">轮胎安装</div>
<img src="./imgs/circleRect.png" width="25px" style="margin-top:10px;">
</div>
<!-- <div style="display:flex;flex-direction:column;align-items:center;">
<img src="./imgs/classRange.png" width="320px" style="margin-top:25px;">
</div> -->
<div style="display:flex;flex-direction:column;align-items:center;position:relative;">
<div style="position:absolute;top:300px;left:10px;width:150px;height:60px;display:flex;flex-direction:row;border:1px solid #ccc;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;">左前轮:</div>
<div style="flex:1;display:flex;align-items:center;color:#46ce50">正常</div>
</div>
<div style="position:absolute;top:300px;right:10px;width:150px;height:60px;display:flex;flex-direction:row;border:1px solid #ccc;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;">右前轮:</div>
<div style="flex:1;display:flex;align-items:center;color:#46ce50">正常</div>
</div>
<div style="position:absolute;top:390px;left:10px;width:150px;height:60px;display:flex;flex-direction:row;border:1px solid #ccc;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;">左后轮:</div>
<div style="flex:1;display:flex;align-items:center;color:#46ce50">正常</div>
</div>
<div style="position:absolute;top:390px;right:10px;width:150px;height:60px;display:flex;flex-direction:row;border:1px solid #ccc;">
<div style="flex:1;display:flex;justify-content:center;align-items:center;">右后轮:</div>
<div style="flex:1;display:flex;align-items:center;color:#f36856">异常</div>
</div>
<div style="position:absolute;bottom:-4px;right:20px;width:50px;height:40px;">
<img src="./imgs/wrongTwo.png" width="25px;" />
</div>
<div style="position:absolute;bottom:-4px;left:45px;width:50px;height:40px;">
<img src="./imgs/correctTwo.png" width="25px;" />
</div>
<div style="position:absolute;top:120px;right:20px;width:50px;height:29px;">
<img src="./imgs/correctTwo.png" width="25px;" />
</div>
<div style="position:absolute;top:120px;left:45px;width:50px;height:29px;">
<img src="./imgs/correctTwo.png" width="25px;" />
</div>
<img src="./imgs/carSecond.png" height="220px" style="margin-top:40px;">
</div>
</div>
</div>
<!-- 续航估算 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:50px;">
<div style="width:344px;height:470px;display: flex;flex-direction: column;" class="">
<div style="display:flex;flex-direction:column;align-items:center;">
<div style="height:30px;font-size:24px;font-weight:400;text-align:center;line-height:30px;">续航估算</div>
<img src="./imgs/circleRect.png" width="25px" style="margin-top:10px;">
</div>
<div style="display:flex;flex-direction:column;justify-content:center;margin-top:20px;">
建议:轮胎续航时间不要超过50000km
</div>
<div style="display:flex;flex-direction:column;align-items:center;position:relative;">
<div style="position:absolute;top:35px;left:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">左前轮:</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#f36856">60000KM</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#f36856">轮胎续航里程较长</div>
</div>
<div style="position:absolute;top:35px;right:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">右前轮:</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">30000KM</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">里程:30000KM</div>
</div>
<div style="position:absolute;top:210px;left:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">右前轮:</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">30000KM</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">里程:30000KM</div>
</div>
<div style="position:absolute;top:210px;right:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">右前轮:</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">30000KM</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">里程:30000KM</div>
</div>
</div>
</div>
</div>
<!-- 使用年限提醒 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:50px;">
<div style="width:344px;height:520px;display: flex;flex-direction: column;" class="">
<div style="display:flex;flex-direction:column;align-items:center;">
<div style="height:30px;font-size:24px;font-weight:400;text-align:center;line-height:30px;">使用年限提醒</div>
<img src="./imgs/circleRect.png" width="25px" style="margin-top:10px;">
</div>
<div style="display:flex;flex-direction:row;align-items:center;margin-top:20px;">
<div style="width:6px;height:21px;background-color:#000;"></div>
<div style="flex:1;margin-left:10px;height:21px;line-height:21px;font-weight:550;">轮胎使用年限</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;">
<img src="./imgs/yearLimited.png" width="320px" style="margin-top:20px;">
</div>
<div style="display:flex;flex-direction:column;justify-content:center;margin-top:20px;margin-left:20px;">
官方建议:轮胎的使用生产年限不要超过8年
</div>
<div style="display:flex;flex-direction:column;align-items:center;position:relative;">
<div style="position:absolute;top:35px;left:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">左前轮:</div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ccc">
<div style="height:18px;font-size:14px;">已使用</div>
<div style="flex:1;font-size:20px;">3年</div>
</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">生产时间2017年</div>
</div>
<div style="position:absolute;top:35px;right:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">左前轮:</div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ccc">
<div style="height:18px;font-size:14px;">已使用</div>
<div style="flex:1;font-size:20px;">6年</div>
</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">生产时间2014年</div>
</div>
<div style="position:absolute;top:210px;left:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">左前轮:</div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ccc">
<div style="height:18px;font-size:14px;">已使用</div>
<div style="flex:1;font-size:20px;">3年</div>
</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#ccc">生产时间2017年</div>
</div>
<div style="position:absolute;top:210px;right:10px;width:150px;height:150px;display:flex;flex-direction:column;border:1px solid #ccc;">
<div style="flex:1;margin: 10px 0 0 10px;">左前轮:</div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f36856">
<div style="height:18px;font-size:14px;">已使用</div>
<div style="flex:1;font-size:20px;">9年</div>
</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:#f36856">生产时间2011年</div>
</div>
</div>
</div>
</div>
<!-- 制动距离隐患预估 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:105px;">
<div style="width:344px;height:240px;display: flex;flex-direction: column;" class="">
<div style="display:flex;flex-direction:column;align-items:center;">
<div style="height:30px;font-size:24px;font-weight:400;text-align:center;line-height:30px;">制动距离隐患预估</div>
<img src="./imgs/circleRect.png" width="25px" style="margin-top:10px;">
</div>
<!-- <div style="display:flex;flex-direction:row;align-items:center;margin-top:20px;">
<div style="width:6px;height:21px;background-color:#000;"></div>
<div style="flex:1;margin-left:10px;height:21px;line-height:21px;font-weight:550;">轮胎使用年限</div>
</div> -->
<div style="display:flex;flex-direction:column;align-items:center;">
<img src="./imgs/distanceEstimation.png" width="320px" style="margin-top:20px;">
</div>
<div style="display:flex;flex-direction:column;justify-content:center;margin-top:20px;margin-left:20px;">
根据轮胎磨损情况,当前制动距离增加15%
</div>
</div>
</div>
<!-- 底部 -->
<div style="display: flex;align-items: center;justify-content: center;margin-top:30px;">
<div id="qrcode" style="width:100px; height:100px;"></div>
</div>
<div style="display: flex;align-items: center;justify-content: center;margin-top:30px;">
<img src="./imgs/thanks.png" width="80px">
</div>
<div style="display: flex;align-items: center;justify-content: center;margin-top:30px;margin-bottom:30px;">
<img src="./imgs/logo.png" width="250px">
</div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 100,
height: 100
});
qrcode.makeCode("http://up.wustcloud.cn/admin/mobile_lun_tai/report.html?id={id}");
</script>
</file>
</body>
</html>
总结
里面用到最多的就是 flex 属性,望大家明白。
如果大家需要图片资源,评论区留下邮箱,我发你。