2024.6.22 山东大学项目实训纪实

整体修改项目纰漏

1.调整宽度与屏幕不兼容问题

.container {
  max-width: 100vw;
  margin: auto;

}

2.调整图片路径导致图片无法正常显示的问题

<!--      图标-->
      <el-col :span="6" class="col-center">
<!--        <img src="../../assets/img/database/drugbank.jpg">-->
<!--        <img :src="message.img">-->
<!--        <img :src="getImagePath(message.img)">-->
        <img :src="require(`@/assets/img/database/${message.img}`)" class="image-size">
      </el-col>

3.增加页面布局，把登录的按钮css应用到其他的按钮，保证页面整体统一

 <div class="header" style="margin: 0 auto;  width: 1000px;">
        <div class="left">
        </div>
        <p style="color:#2d2b2b; font-size: 30px">Molecular transformation</p>
        <div class="right">
        </div>
      </div>

.header {
  padding: 20px;
  text-align: center;

}

.left {

  border-top: 2px solid darkgreen; /* 控制横线的粗细、颜色和样式 */
  width: 15%; /* 控制横线的长度 */
  margin: 10px 340px auto; /* 控制横线的上下间距及水平居中 */
}

.right {

  border-top: 2px solid darkgreen; /* 控制横线的粗细、颜色和样式 */
  width: 15%; /* 控制横线的长度 */
  margin: 10px 490px auto; /* 控制横线的上下间距及水平居中 */

}

.button-33 {
  background-color: #397C65;
  border-radius: 10px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-33:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}
.button-22 {
  background-color: #397C65;
  border-radius: 10px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-22:hover {
  box-shadow: rgba(156, 187, 44, 0.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

.........

除此以外，修改了各种前后端传数据的问题，提供了训练出的更高精度的checkpoints，保证模型的正确性。