1 Star 0 Fork 14

seenlan/Light Year Admin Using v5 For Example

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
lyear_layout_message.html 10.35 KB
一键复制 编辑 原始数据 按行查看 历史
笔下光年 提交于 2022-12-10 17:27 +08:00 . feat:代码上传
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>留言样式 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
.lyear-message-list {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(77, 82, 89, 0.05);
}
.lyear-message-list > li {
border-bottom: 1px solid rgba(77, 82, 89, 0.05);
margin-bottom: 10px;
}
.lyear-message-list .lyear-message-item .lyear-message-item {
padding-top: 10px;
padding-bottom: 10px;
}
.lyear-message-list li:last-child .lyear-message-item {
padding-bottom: 0px;
}
.lyear-message-form {
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
padding-top: 10px;
}
.lyear-message-list .lyear-message-form {
padding-bottom: 10px;
}
.lyear-message-form .form-control {
margin: 0px 10px;
}
.lyear-message-form .form-control:focus {
box-shadow: none;
}
.lyear-message-form .mdi {
font-size: 20px;
color: #4d5259;
}
.message-btn-close {
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<header class="card-header">
<div class="card-title">留言样式</div>
</header>
<div class="card-body">
<p>比如这里是文章内容</p>
<ul class="list-unstyled lyear-message-list">
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-7.png" class="avatar-box avatar-md rounded-circle" alt="七娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>七娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='5'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">3 分钟前</time>
</p>
<p>再吵全给你们收进葫芦里面去。</p>
</div>
</div>
</li>
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-1.png" class="avatar-box avatar-md rounded-circle" alt="大娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>大娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='2'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">26 分钟前</time>
</p>
<p>您个瓜娃子,谁让你这么弱的,要力量没力量啊。</p>
<ul class="list-unstyled">
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-2.png" class="avatar-box avatar-md rounded-circle" alt="二娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>二娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='7'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">刚刚</time>
</p>
<p>谢大哥。</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-3.png" class="avatar-box avatar-md rounded-circle" alt="三娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>三娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='2'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">2 小时前</time>
</p>
<p>像我一样,钢筋铁骨,怕过谁。</p>
<ul class="list-unstyled">
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-4.png" class="avatar-box avatar-md rounded-circle" alt="四娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>四娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='3'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">5 分钟前</time>
</p>
<p>三哥,你甭吹牛了,饶痒痒你怕不怕。</p>
<ul class="list-unstyled">
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-3.png" class="avatar-box avatar-md rounded-circle" alt="三娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>三娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='4'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">刚刚</time>
</p>
<p>我看你的皮是痒痒了。</p>
</div>
</div>
</li>
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-5.png" class="avatar-box avatar-md rounded-circle" alt="五娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>五娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='6'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">刚刚</time>
</p>
<p>哈哈。</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="d-flex lyear-message-item">
<a href="#!"><img src="images/users/avatar-6.png" class="avatar-box avatar-md rounded-circle" alt="六娃"></a>
<div class="flex-grow-1 ms-2">
<p>
<a href="#!"><strong>六娃</strong></a>
<a href="#!" class="text-muted ms-1 reply-btn" data-id='1'>回复</a>
<time class="text-muted" datetime="2018-07-14 20:00">3 小时前</time>
</p>
<p>哎,我也一样啊,隐身能干些啥。</p>
</div>
</div>
</li>
</ul>
<form class="lyear-message-form" id="respond-form">
<img src="images/users/avatar.jpg" alt="笔下光年" class="avatar-box avatar-md rounded-circle" />
<input class="form-control" type="text" placeholder="输入您想说的话">
<a class="message-btn-close me-2" href="#!"><i class="mdi mdi-close"></i></a>
<a class="message-btn-send" href="#!"><i class="mdi mdi-near-me"></i></a>
<input type='hidden' name='comment_arc_id' value='1' id='comment_arc_id' /> <!--当前文章ID-->
<input type='hidden' name='comment_parent' id='comment_parent_id' value='0' /> <!--当前回复的评论ID-->
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 回复评论
$(document).on('click', '.reply-btn', function() {
var parentLi = $(this).parents('.lyear-message-item').first(),
parentID = $(this).data('id'),
respond = $('#respond-form'),
respondHtml = respond.prop("outerHTML");
$("#respond-form").remove();
parentLi.after(respondHtml);
$("#comment_parent_id").val(parentID);
$('#respond-form').find('.form-control').focus();
$('.message-btn-close').show();
});
$(document).on('click', '.message-btn-close', function() {
var respond = $('#respond-form'),
respondHtml = respond.prop("outerHTML");
respond.remove();
$('.lyear-message-list').after(respondHtml);
$("#comment_parent_id").val('0');
$('.message-btn-close').hide();
});
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/answer-miniprogram/light-year-admin-using-v5-for-example.git
git@gitee.com:answer-miniprogram/light-year-admin-using-v5-for-example.git
answer-miniprogram
light-year-admin-using-v5-for-example
Light Year Admin Using v5 For Example
master

搜索帮助

371d5123 14472233 46e8bd33 14472233