在上周制定了前端美化需求之后,我们希望整个前端界面是丝滑的、对用户操作友好的。
于是,我先从头部样式设计开始,确定整个项目的整体基调。
代码如下:
<!-- 头部 -->
<div style="position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;display: flex; height: 60px; line-height: 60px; border-bottom: 1px solid rgb(53, 46, 46);background-color: rgb(43, 121, 170); border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;">
<div style="width: 200px; text-align: center;"><h1 style="color:rgb(255, 255, 255)">DrugLLM</h1> </div>
<div style="flex: 1;">
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" router style="background-color:rgb(43, 121, 170);display: flex; justify-content: center;" >
<el-menu-item index="/front/home" style="font-weight: bold;font-size: larger; color:rgb(255, 255, 255)">
<i class="el-icon-s-home"></i>
Home
</el-menu-item>
<el-menu-item index="/front/consult" style="font-weight: bold;font-size: larger; color:rgb(255, 255, 255)">
<i class="el-icon-s-opportunity"></i>
Consult
</el-menu-item>
<el-menu-item index="/front/trans" style="font-weight: bold;font-size: larger;color:rgb(255, 255, 255) " >
<i class="el-icon-thumb"></i>
Transform
</el-menu-item>
<el-menu-item index="/front/analysis" style="font-weight: bold;font-size: larger;color:rgb(255, 255, 255) " >
<i class="el-icon-s-data"></i>
Anaslyse
</el-menu-item>
</el-menu>
</div>
效果如下: