feat(projectList): 添加风险检查动画效果和样式优化

hejianhao

2026-01-15 f4d482e74ae32903b05f031604e02c7e6578b701

feat(projectList): 添加风险检查动画效果和样式优化

- 为"本月检查风险"列添加水波动画效果
- 新增多个背景颜色样式类
- 优化表格边框和悬停效果
- 移除按钮固定字体设置

 screen/src/view/projectList/index.vue

@@ -153,7 +153,7 @@
            >
            </el-option>
          </el-select>
          <div class="btn">搜索</div>
          <div class="btn SHSR">搜索</div>
        </div>
      </div>
      <!-- 表格 -->
@@ -179,7 +179,18 @@
        <el-table-column label="项目地址" prop="projectName" />
        <el-table-column label="本月检查情况" prop="projectName" />
        <el-table-column label="最后一次检查时间" prop="projectName" />
        <el-table-column label="本月检查风险" prop="projectName" />
        <el-table-column label="本月检查风险" prop="projectName">
          <template #default="scope">
            <div class="flex a-center j-center">
              <div class="ripple">
                <div class="ripple-wave wave-1"></div>
                <div class="ripple-wave wave-2"></div>
                <div class="ripple-wave wave-3"></div>
              </div>
              <div class="ml--6 SHSR">已检查</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" class="btnColor">详情</el-button>
@@ -270,7 +281,23 @@
  background: rgba(24, 69, 135, 0.9);
}

.bgColor3 {
  background: rgba(67, 221, 189, 1) !important;
}

.bgColor4 {
  background: rgba(67, 221, 189, 0.6) !important;
}

.bgColor5 {
  background: rgba(67, 221, 189, 0.4) !important;
}

::v-deep .el-table {
  &::before {
    background-color: transparent;
  }
  
  border: 2px solid #3d7fff;
  background: #071166;
  .el-table__body tr:hover > td {
@@ -353,7 +380,6 @@
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    font-family: "Source Han Sans CN Medium";
    padding: 0 26px;
    border: 1px solid #307ad9;
    box-sizing: border-box;
@@ -467,4 +493,53 @@
.btnColor {
  color: #00ebfc;
}

.ripple {
  position: relative;
  width: 14px;
  height: 14px;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wave-1 {
  width: 14px;
  height: 14px;
  background-color: rgba(255, 55, 95, 1);
}

.wave-2 {
  width: 20px;
  height: 20px;
  background-color: rgba(255, 55, 95, 0.6);
  animation: ripple-effect 2s ease-out infinite;
}

.wave-3 {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 55, 95, 0.4);
  animation: ripple-effect 2s ease-out infinite 1s;
}

@keyframes ripple-effect {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 1;
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}
</style>