Web布局入门案例

其他 2021-04-05 12:03:02 阅读次数: 0

引言

最近，我在开发一个汽车轮胎检测报告 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 属性，望大家明白。

如果大家需要图片资源，评论区留下邮箱，我发你。

猜你喜欢

转载自blog.csdn.net/qq_41885673/article/details/114370999
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022