山东大学软件学院项目实训-基于大模型的模拟面试系统-前端美化滚动条问题

模拟面试界面左侧底部

通过检查工具定位到其所在的位置：

直接对该组件进行美化：

css 复制代码

  <!-- AI面试官列表 -->
  <div class="ai-interviewer-section" v-show="activeTab === 'interviewer'">
    <el-scrollbar class="no-horizontal-scroll" style="height:100%">
      <div class="interviewer-list">
        <div
          class="interviewer-list"
          v-for="interviewer in aiList"
          :key="interviewer.interviewerId"
          :class="['interviewer-item', { 'active': activeInterviewer === interviewer.interviewerId }]"
          @click="handleInterviewerSelect(interviewer.interviewerId)"
        >
          <div class="interviewer-avatar">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="interviewer-name">{{ interviewer.name }}</div>
        </div>
      </div>
    </el-scrollbar>
  </div>

使用类选择器实现了隐藏水平滚动条和确保内容不会溢出触发水平滚动两个功能。

css 复制代码

/* 隐藏水平滚动条 */
.no-horizontal-scroll ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

/* 确保内容不会溢出触发水平滚动 */
.interviewer-list {
  white-space: nowrap;
  /* 如果不需要横向排列则移除 */
  width: 100%;
  box-sizing: border-box;
}

最终效果如下：

我的面试官界面

该界面有两处滚动条需要去除，一处在左侧底部，这个和上面差不多，还有一处和最右侧，这个需要重新定位去除。

左侧底部

因为和之前差不多，就在这里直接上代码。

css 复制代码

<el-scrollbar class="vertical-only-scrollbar" style="height:100%">
//...
</el-scrollbar>

css 复制代码

 /* 使用深度选择器隐藏水平滚动条 */
 :deep(.vertical-only-scrollbar .el-scrollbar__wrap) {
   overflow-x: hidden !important;
   padding-bottom: 0 !important;
 }

右侧

定位到对应的div之后，直接加一个隐藏垂直滚动条的选择器就行。

css 复制代码

.right-panel.no-vertical-scroll {
  overflow-y: hidden !important;
}

最终效果：

知识库管理页面

同样是有两个滚动条需要隐藏。

这部分不再进行说明都和之前一模一样。

最终效果（因为有些滚动条需要缩放才能看到，所以页面进行了部分缩放）：