I have nothing to do recently, and I want to share and practice tutorials on a project I am working on. The project is not difficult, but it is more complicated because it involves too many elements. So it is also shared here to help novice novice learn python knowledge quickly in actual combat. The main contents include Python, , JavaScript, cloud computing, AI, etc.
After this tutorial is updated, the source code will be released~
If a big shot finds a problem, you are also welcome to advise
Review of the previous issue
Last issue we designed the 1st and 2nd parts of the homepage, and we completed the rest of this issue.
Part 3 and 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"/divdiv class="shadow px-3 col-9"table class="table"theadtrth scope="col" Task ID/th scope="col" start time/th scope="col" style="min-width: 120px;"Task Type/th scope="col" style="min-width: 120px;"Executor ID/th scope="col" status/th scope="col" operation/th/tr/headtbodytrth4/thtd2022-01-19 1:50/tdtd Intelligent Splitter/tdtd22201/tdtdi class="fas fa-check-circle" style="color:lawgreen;"/i/tdtda href="#"View details/a/td/trtrth3/thtd2022-01-18 11:30/tdtd Intelligent Splitter/tdtd22201/tdtdi class="fas fa-check-circle" style="color:lawgreen;"/i/tdtda href="#"View details/a/td/trtrth2/thtd2022-01-10 21:50/tdtd smart tag/tdtd22203/tdtdi class="fas fa-check-circle" style="color:lawgreen;"/i/tdtda href="#"View details/a/td/trtrth1/thtd2022-01-9 3:50/tdtd face detection/tdtd22205/tdtdi class="fas fa-check-circle" style="color:lawgreen;"/i/tdtda href="#"View details /a/td/tr/tbody/table/div/divPlease follow the above part of the code immediately after part 2.
Note: The displayed pie chart uses echarts, and the corresponding file needs to be introduced. The code at the end of the article
Part 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"intelligent tag/h5p class="card-text" By analyzing the visual, text, voice, behavior and other information in the video, combined with multimodal information fusion and alignment technology, high-accuracy content recognition/pa href="#" class="btn btn-primary" Begin using /a/div/divdiv 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"intelligently split the strip/h5p class="card-text" divides the video into multiple short videos according to a certain logic, and automatically uses popular short video templates to quickly generate the movie/pbr /a href="/ai_cut/" class="btn btn-primary"start using /a/div/divdiv 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" intelligent lyrics/h5p class="card-text" supports multilingual subtitle manuscript production, one-click subtitle time code generation, and audio text linkage editing, with an accuracy rate of more than 97.5%/pbr /a href="#" class="btn btn-primary" Start using /a/div/divdiv 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" face detection/h5p class="card-text" is based on face detection, analysis and comparison technology in images or videos, and provides independent service modules such as face detection and positioning, face attribute recognition and face comparison./pa href="#" class="btn btn-primary"Start using /a/div/div/div/divThe effect is as follows:
At this point, our homepage design is completed. The following are the CSS and JS files that need to be introduced:
CSS
link href="/statics/css/bootstrap.min.css" rel="stylesheet"link href="/statics/css/all.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"/scriptscript type="text/javascript" src="/statics/js/echarts.min.js"/scriptscript type="text/javascript" src="/statics/js/westeros.js"/scriptscript src="/statics/js/sidebars.js"/scriptscript src="/statics/js/sidebars.js"/scriptscript src="/statics/js/sidebars.js"/scriptscript src="/statics/js/sidebars.js"/scriptscript type="text/javascript"var dom = document.getElementById("echarts_pie_1");var myChart = echarts.init(dom, 'westeros');var app = {};var option;option = {title: {text: 'Process number situation',left: 'center'},tooltip: {trigger: 'item'},series: [{name: 'Process number situation',type: 'pie',radius: '50%',data: [{value: 1,name: 'Number of occupied processes'}, {value: 9,name: 'Number of unoccupied processes'}, ],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};if (option && typeof option === 'object') {myChart.setOption(option);}/scriptSummary
In fact, if you just look at the code, it may be difficult to design a good-looking homepage by yourself. Here I have summarized several key points of homepage design:
- fonts cannot be used with default fonts, you can use relatively atmospheric fonts such as Microsoft Yahei, Apple, Siyuan bold, etc. At the same time, you should pay attention to the need to upload the font to the client, because everyone still uses their own fonts when looking at a certain web page.
- There is a certain interval between each section, and adding a certain shadow will make it more layered.
- The entire arrangement cannot be too empty, and the word intervals, line intervals, and segment intervals cannot be too narrow.
- Make good use of icons, pictures
If the article helps you, can you like, follow and collect it~
If you encounter programming problems, please leave a message~
