山东大学项目实训（二十三）：Mbti求职推荐系统UI界面与沉浸式面试问答按钮功能实现

这一篇博客主要是对求职推荐系统UI的优化

首先是设置背景图片

.RecommendationPage{

  background-image: url('面试模拟.png'); /* 设置背景图片 */

  background-size: cover; /* 背景图片覆盖整个容器 */

  background-position: center; /* 背景图片居中 */

  background-repeat: no-repeat; /* 背景图片不重复 */

编辑

 最上面按钮

.introduction-button{

    border-radius: 5px;

    padding: 10px 20px;

    background-color: #007bff;

    color: white;

    border: none;

    cursor: pointer;

    margin-top: 10px;

    justify-content: center;

  }

回答区域设置

  .response-area {

    margin-top: 20px;

  }

  .response-area h3 {

    font-size: 1.2em;

    font-weight: bold;

  }

  .response-area p {

    margin-bottom: 5px;

  }

标题设置

 .title {

    border: 1px solid #ccc;

    padding: 10px;

    background-color: #f0f0f0;

    max-width: 400px;

    margin: 20px auto;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    text-align: center; /* 让.title组件内的文本居中 */

  }

  .title p {

    font-size: 2rem;

    text-align: center; /* 修改为居中对齐 */

    font-weight: bold; /* 加粗 */

  }

提示设置（包括其中按钮设置）

.tip {

    border: 1px solid #ccc;

    padding: 20px;

    background-color: #f0f0f0;

    max-width: 1000px;

    margin: 5px auto;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  }

  .tip h2 {

    font-size: 1.5rem;

  }

  .tip p {

    line-height: 1.6;

  }

  .tip button {

    padding: 10px 20px;

    background-color: #007bff;

    color: white;

    border: none;

    cursor: pointer;

    margin-top: 10px;

    margin-right: 10px;

  }

  .tip button:hover {

    background-color: #0056b3;

  }

输入设置

#userInput {

    position: fixed;

    bottom: 5%;

    left: 5%;

    width: calc(80% - 30px);

    height: 10%;

    padding: 8px;

  

    font-size: 15px;

    border: 1px solid #ccc;

    border-radius: 3px;

  

    /* 将输入框内文本左上对齐 */

    text-align: left; /* 左对齐 */

    vertical-align: top; /* 顶部对齐 */

  }

  .clearDialog-button{

    position: fixed;

    bottom: 14%;

    right: 5%;

    padding: 10px 20px;

    background-color: #007bff;

    color: white;

    border: none;

    cursor: pointer;

  }

  .inputDialog-button {

    position: fixed;

    bottom: 4%;

    right: 5%;

    padding: 10px 20px;

    background-color: #007bff;

    color: white;

    border: none;

    cursor: pointer;

  }

  .clearDialog-button:hover,

  .inputDialog-button:hover {

    background-color: #0056b3;

  }

最终效果：

​

​