1：动态获取数据根据数据的不同改变对应行颜色（JavaScript）
done: function (res, curr, count) {console.log(res);// 检查返回的数据是否包含code字段，并且code为0if (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为0if (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;});}效果：
