山东大学软件学院创新项目实训DrugLLM-基于大语言模型的药物分子性质分析平台（五）

米米饭lll

已于 2024-05-31 00:27:24 修改

阅读量218

点赞数 1

分类专栏：项目实训文章标签：语言模型人工智能自然语言处理

于 2024-05-31 00:00:09 首次发布

本文链接：https://blog.csdn.net/m0_63482308/article/details/139336720

版权

项目实训专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在上周制定了前端美化需求之后，我们希望整个前端界面是丝滑的、对用户操作友好的。

于是，我先从头部样式设计开始，确定整个项目的整体基调。

代码如下：

<!-- 头部 -->
<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>

效果如下：