从零开始打造云端AI管理调度平台(五)如何设计主页_2

最近闲来无事，想着把自己工作正在做的一个项目做一个简单的分享与实战教程，该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容涉及Python、HTML5、JavaScript、云计算、AI等。

在本教程完成更新后会放出源码哦~

如果有大佬发现问题，也非常欢迎指教

上期回顾

上期我们设计了主页的第1、2部分，这期我们完成剩下的部分。

第3、4部分

    <div class="row my-3 flex-wrap mx-3 h-25 bg-opacity-100" style="font-family: pinfang;">
    <div id="echarts_pie_1" class="shadow col-3 ms px-3"></div>
    <div class="shadow px-3 col-9">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">任务ID</th>
                    <th scope="col">开始时间</th>
                    <th scope="col" style="min-width: 120px;">任务类型</th>
                    <th scope="col" style="min-width: 120px;">执行机ID</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>4</th>
                    <td>2022-01-19 1:50</td>
                    <td>智能拆条</td>
                    <td>22201</td>
                    <td><i class="fas fa-check-circle" style="color:lawngreen;"></i></td>
                    <td><a href="#">查看详情</a></td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>2022-01-18 11:30</td>
                    <td>智能拆条</td>
                    <td>22201</td>
                    <td><i class="fas fa-check-circle" style="color:lawngreen;"></i></td>
                    <td><a href="#">查看详情</a></td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>2022-01-10 21:50</td>
                    <td>智能标签</td>
                    <td>22203</td>
                    <td><i class="fas fa-check-circle" style="color:lawngreen;"></i></td>
                    <td><a href="#">查看详情</a></td>
                </tr>
                <tr>
                    <th>1</th>
                    <td>2022-01-9 3:50</td>
                    <td>人脸检测</td>
                    <td>22205</td>
                    <td><i class="fas fa-check-circle" style="color:lawngreen;"></i></td>
                    <td><a href="#">查看详情</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

以上这部分代码请紧跟在第2部分后面。

注意：显示的饼状图采用了echarts，需要引入相应的文件，代码在文章末尾

呈现效果如下：

第5部分

<div class="shadow row justify-content-around mt-2 flex-wrap bg-white p-3 mx-3"style="font-family: pinfang;">
    <div class="card col-3 p-0" style="width: 18rem;">
        <img src="/statics/images/img2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">智能标签</h5>
            <p class="card-text">通过对视频中视觉、文字、语音、行为等信息进行分析，结合多模态信息融合及对齐技术，实现高准确率内容识别</p>
            <a href="#" class="btn btn-primary">开始使用</a>
        </div>
    </div>
    <div class="card col-3 p-0" style="width: 18rem;">
        <img src="/statics/images/img3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">智能拆条</h5>
            <p class="card-text">将视频按一定逻辑切分成多段短视频，并自动套用流行短视频模板快速生成成片</p><br />
            <a href="/ai_cut/" class="btn btn-primary">开始使用</a>
        </div>
    </div>
    <div class="card col-3 p-0" style="width: 18rem;">
        <img src="/statics/images/img4.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">智能唱词</h5>
            <p class="card-text">支持多语种字幕文稿制作、字幕时码一键生成、音频文本联动编辑，准确率超过97.5%</p><br />
            <a href="#" class="btn btn-primary">开始使用</a>
        </div>
    </div>
    <div class="card col-3 p-0" style="width: 18rem;">
        <img src="/statics/images/img1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">人脸检测</h5>
            <p class="card-text">基于图像或视频中的人脸检测、分析和比对技术，提供人脸检测定位、人脸属性识别和人脸比对等独立服务模块。</p>
            <a href="#" class="btn btn-primary">开始使用</a>
        </div>
    </div>
</div>

呈现效果如下：

至此，我们的主页设计就完成了，以下是需要引入的CSS、JS文件：

CSS

    <link href="/statics/css/bootstrap.min.css" rel="stylesheet">
    <link href="/statics/css/all.css" rel="stylesheet">
    <link href="/statics/css/myfont.css" rel="stylesheet">


    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        
        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
</style>




    <!-- Custom styles for this template -->
    <link href="/statics/css/sidebars.css" rel="stylesheet">

JS

    <script src="/statics/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="/statics/js/echarts.min.js"></script>
    <script type="text/javascript" src="/statics/js/westeros.js"></script>
    <script src="/statics/js/sidebars.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("echarts_pie_1");
        var myChart = echarts.init(dom, 'westeros');
        var app = {};
        var option;
        option = {
            title: {
                text: '进程数情况',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [{
                name: '进程数情况',
                type: 'pie',
                radius: '50%',
                data: [{
                    value: 1,
                    name: '已占用进程数'
                }, {
                    value: 9,
                    name: '未占用进程数'
                }, ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
</script>

总结

其实如果是光看代码，可能很难去做到自己设计一个好看的主页，这里我总结了几个主页设计的要点：

• 字体不能用默认字体，可以用微软雅黑、苹方、思源黑体等比较大气的字体，同时要注意需要把字体传到客户端上，因为每个人看某个网页默认还是用的他们自己的字体。
• 每个板块之间有一定的间隔，同时添加一定的阴影会更加有层次感。
• 整个排列不能太空旷，字间隔、行间隔、段间隔不能太窄。
• 善用icon、图片

如果文章帮助到了您，可否给一个点赞关注收藏呢~

如果遇到编程上的问题，欢迎留言哦~