從零開始打造雲端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、圖片

如果文章幫助到了您，可否給一個點贊關注收藏呢~

如果遇到編程上的問題，歡迎留言哦~