【山东大学项目实训】第五周进度汇报

本周我们继续学习前端的相关内容，并根据之前小组讨论后设计的项目前端页面进行前端页面和功能的进一步实现和完善。

利用UI组件对页面的功能进行了进一步的完善，并加入了背景图片等。

页面展示

核心代码

back.css 添加背景图片

/* src/styles/global.css */

body {

    background-image: url('@/assets/background.jpg'); /* 修改路径以适应你的项目结构 */

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    margin: 0;

    padding: 0;

  }

button按钮组件的修改

.button1 {  

    font-family: 'Avenir', Helvetica, Arial, sans-serif;

    color: #333;

    background-color: #f4f4f9;

    width: 80%;

   background-color: #fff;

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

    color: #333;

    margin-top: 10px;

    padding: 30px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.3s ease;

  }  

   

  .button1:hover {  

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

  }  



  .button2 {  

    font-family: 'Avenir', Helvetica, Arial, sans-serif;

    color: #333;

    background-color: #f4f4f9;

    width: 80%;

   background-color: #fff;

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

   

    color: #333;

    margin-top: 10px;

    padding: 30px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.3s ease;

  }  

   

  .button2:hover {  

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

  }  

返回按钮组件的修改

 .back-button {

  cursor: pointer;

  font-size: 20px;

  color: #000000;

  /*margin: 0px;*/

  display: flex;  

  /*flex-direction: column; */

  position: absolute; /* 使用绝对定位 */  

  top: 20px; /* 距离顶部的位置 */  

  left: 20px; /* 距离左侧的位置 */  

 }



 .back-button:hover {  

    background-color: #ffffff;  

  }