前端（layui表单对应行颜色、登陆页面、轮播）

1：动态获取数据根据数据的不同改变对应行颜色（JavaScript）
 

done: function (res, curr, count) {
    console.log(res);
    // 检查返回的数据是否包含code字段，并且code为0
    if (res.code === "0") {
        // 数据加载成功
        console.log('数据加载成功');

        // 遍历表格数据
        $.each(res.data, function (index, item) {
            var tr = $('tr[data-index="' + index + '"]');
            var hasEndDate = item.endDate;
            var hasUse = item.use;

            if (hasEndDate) {
                // 结束日期不为空变成浅灰色
                tr.css('background-color', 'lightgray');
            } else if (hasUse) {
                // 备注不为空变成粉色
                tr.css('background-color', 'pink');
            } else {
                // 其余变成白色
                tr.css('background-color', 'whit');
            }
        });
    } else {
        // 数据加载失败，可以在这里处理错误
        console.error('数据加载失败，错误码：' + res.code);
    }
}

在上面的基础上鼠标悬停时弹出提示框
 

  //表格渲染
  table.render({
      elem: '#currentTableId',
      url: '/SCOTT/YiZhu/GetYiZhuList',
      where: {
          query: result1
      },
      toolbar: '#toolbarDemo',
      defaultToolbar: ['exports', 'print'],
      cols: [[
          { field: 'patId', width: 250, title: '患者编号', align: "center", sort: true },
          { field: 'startDate', width: 250, title: '开始时间', templet: function (d) { return util.toDateString(d.startDate, "yyyy-MM-dd"); }, align: "center", sort: true },
          { field: 'endDate', width: 250, title: '结束时间', templet: function (d) { return util.toDateString(d.endDate, "yyyy-MM-dd"); }, align: "center", sort: true },
          { field: 'advice', width: 250, title: '医嘱', align: "center", sort: true },
          { field: 'adviceType', width: 250, title: '医嘱类型', align: "center", sort: true },
          { field: 'deptName', width: 250, title: '执行科室', align: "center", sort: true },
          { field: 'adviceUse', width: 250, title: '备注', align: "center", sort: true }
      ]],
      limits: [10, 15, 20, 25],
      limit: 10,
      page: true,
      skin: 'line',
      done: function (res, curr, count) {
          console.log(res);
          // 检查返回的数据是否包含code字段，并且code为0
          if (res.code === "0") {
              // 数据加载成功
              console.log('数据加载成功');
              // 遍历表格数据
              $.each(res.data, function (index, item) {
                  var tr = $('tr[data-index="' + index + '"]');
                  if (item.endDate) {
                      // 结束日期为空时显示白色
                      tr.css('background-color', 'whit');
                  } else if (item.adviceUse) {
                      // 备注不为空时显示粉色
                      tr.css('background-color', 'lightpink');
                  } else {
                      // 两者都为空时显示浅黄色
                      tr.css('background-color', 'lightyellow');
                  }

                  // 添加鼠标悬停事件
                  tr.hover(function () {
                      layer.tips(item.advice, tr, {
                          tips: [1, '#3595CC'], // 提示框的形状和颜色
                          time: 0 // 鼠标移开后提示框不消失
                      });
                  }, function () {
                      layer.closeAll('tips'); // 鼠标移开时关闭提示框
                  });
              });
          } else {
              // 数据加载失败，可以在这里处理错误
              console.error('数据加载失败，错误码：' + res.code);
          }
      }
  });

效果：

2：css登陆界面浅色登录框，登录按钮渐变
 

 <style>
     /* 页面的整体样式定义 */
     html {
         height: 100%;
     }

     body {
         background-image: url(@Href("~/css/Images/44.png"));
         position: static;
         background-repeat: no-repeat;
         background-size: 100% 100%;
         background-position: center;
     }

     /* 主体部分的样式定义 */
     .main-body {
         top: 50%;
         left: 50%;
         position: absolute;
         -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         overflow: hidden;
     }

     /* 登录界面的主要样式 */
     .login-main {
         width: 400px;
         position: relative;
         float: left;
     }

         /* 登录框顶部样式 */
         .login-main .login-top {
             height: 117px;
             background: rgba(0, 0, 0, 0.3);
             border-radius: 12px 12px 0 0;
             font-family: SourceHanSansCN-Regular;
             font-size: 30px;
             font-weight: 400;
             font-stretch: normal;
             letter-spacing: 0;
             color: #fff;
             line-height: 117px;
             text-align: center;
             overflow: hidden;
         }

         /* 登录框底部样式 */
         .login-main .login-bottom {
             width: 400px;
             background: rgba(0, 0, 0, 0.3);
             border-radius: 0 0 12px 12px;
             padding-bottom: 53px;
         }

     /* 页脚样式 */
     .footer {
         left: 0;
         bottom: 0;
         color: #fff;
         width: 100%;
         position: absolute;
         text-align: center;
         line-height: 30px;
         padding-bottom: 10px;
         text-shadow: #000 0.1em 0.1em 0.1em;
         font-size: 14px;
     }

     .validateImg {
         position: absolute;
         left: 1px;
         cursor: pointer;
         height: 36px;
         border: 1px solid #e6e6e6;
         border-radius: 4px;
         border-color: #ccc;
     }

     /* 登录按钮样式 */
     .layui-btn {
         background: linear-gradient(to right, #4a90e2, #9013fe);
         border: none;
         border-radius: 5px;
         color: #fff;
         font-weight: bold;
     }
 </style>

效果：

后面动态的浅蓝色部分需要js文件

3:轮播：

css

 <!-- 轮播图 -->
 <div class="carousel">
     <img src=@Href("~/css/Images/YI.jpg") alt="Image 1" class="active">
     <img src=@Href("~/css/Images/ER.jpg") alt="Image 2">
     <img src=@Href("~/css/Images/san.jpg") alt="Image 3">
     <img src=@Href("~/css/Images/si.jpg") alt="Image 4">
     <div class="carousel-buttons">
         <div class="carousel-button active"></div>
         <div class="carousel-button"></div>
         <div class="carousel-button"></div>
         <div class="carousel-button"></div>
     </div>
 </div>

JavaScript

   function initCarousel() {
       var images = $('.carousel img');
       var buttons = $('.carousel-button');
       var currentIndex = 0;

       function showImage(index) {
           images.removeClass('active');
           buttons.removeClass('active');
           images.eq(index).addClass('active');
           buttons.eq(index).addClass('active');
       }

       function nextImage() {
           currentIndex = (currentIndex + 1) % images.length;
           showImage(currentIndex);
       }

       setInterval(nextImage, 3000); // 每 3 秒切换一次图片

       buttons.click(function () {
           var index = buttons.index(this);
           showImage(index);
           currentIndex = index;
       });
   }

效果：