landaiqing/GuestBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
landaiqing
2023-06-09 01:59:08 +08:00
commit 23b265e957
37 changed files with 2087 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
web/System/index.jsp Normal file
View File

@@ -0,0 +1,140 @@
<%--
Created by IntelliJ IDEA.
User: LDQ
Date: 2023/6/8
Time: 19:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>留言本管理</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 11</a></dd>
<dd><a href="javascript:;">menu 22</a></dd>
<dd><a href="javascript:;">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">menu group 1</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 1</a></dd>
<dd><a href="javascript:;">menu 2</a></dd>
<dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="javascript:;">the links</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">menu group 2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="javascript:;">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
<li class="layui-nav-item"><a href="javascript:;">the links</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<blockquote class="layui-elem-quote layui-text">
Layui 框体布局内容主体区域
</blockquote>
<div class="layui-card layui-panel">
<div class="layui-card-header">
下面是充数内容，为的是出现滚动条
</div>
<div class="layui-card-body">
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
</div>
</div>
<br><br>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1
,title: '更多'
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 'slideLeft'
,shadeClose: true
,scrollbar: false
});
}
});
});
</script>
</body>
</html>

6
web/WEB-INF/web.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
</web-app>

16
web/error.jsp Normal file
View File

@@ -0,0 +1,16 @@
<%--
Created by IntelliJ IDEA.
User: LDQ
Date: 2023/6/9
Time: 1:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
${errorMsg}
</body>
</html>

450
web/index.jsp Normal file
View File

@@ -0,0 +1,450 @@
<%--
Created by IntelliJ IDEA.
User: landaiqing
Date: 2023/6/8
Time: 19:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
<title>留言本</title>
<%-- Lay-ui组件库--%>
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
<%-- &lt;%&ndash; Lay-ui样式&ndash;%&gt;--%>
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js">
// <link rel="stylesheet" href="./static/css/index.css" type="text/css">
// <script language=JavaScript type="text/javascript" src="static/js/index.js"></script>
<style type="text/css">
@IMPORT url("./static/css/index.css");
</style>
</head>
<body>
<div class="main">
<div class="header">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
<div style="width: 570px;height: 45px;">
<span style="font-size: 2rem;font-weight: 700;font-family: FZShuTi;color:coral;">留 &nbsp;&nbsp;言&nbsp;&nbsp; 本</span>
</div>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-on="wrap">
<i class="layui-icon layui-icon-edit"></i>
发布留言
</button>
<!-- <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
<i class="layui-icon layui-icon-set-fill"></i>
管理
</button> -->
<div>
<ul class="layui-nav" style="background: transparent;">
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">
<img src="./static/img/touxiang.png" class="layui-nav-img">
</a>
<dl class="layui-nav-child">
<button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
<i class="layui-icon layui-icon-set-fill"></i>
管理
</button>
</dl>
</li>
</ul>
</div>
</div>
</div>
<blockquote class="layui-elem-quote layui-text">
留言列表
</blockquote>
<!-- 管理员登陆 -->
<div class="layui-form" id="adminform" lay-filter="filter-test-layer" style="margin: 16px;display: none;">
<form action="/Guestbook_war_exploded/login" method="post">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码"
lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src=VerifycodeServlet
onclick="this.src='VerifycodeServlet?'+ new Date().getTime();">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
</div>
<%-- <div class="layui-form-item">--%>
<%-- <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>--%>
<%-- </div>--%>
<input type="submit" value="注册"/>
</div>
</form>
</div>
<!-- 发布留言的主体 -->
<div class="wrap" id="warp" style="display: none;">
<div class="userIfo">
<div class="layui-panel">
<div style="padding: 32px;" class="panel">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" placeholder="昵称" class="layui-input">
</div>
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-login-qq"></i>
</div>
<input type="text" placeholder="QQ" class="layui-input">
</div>
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-email"></i>
</div>
<input type="text" placeholder="Email" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-panel">
<div class="wrap-head">
<div class="head-logo">
<img src="./static/img/留言.png" style="height: 20px;width: 20px;" />
</div>
<div class="head-txt">
<a class="title-txt"
href="javascript:void(0)">111111111111111111111111111&nbsp;&nbsp;&nbsp;热门</a>
</div>
</div>
<div class="main-txt">
<textarea name="" rows="" cols="" class="main-area"></textarea>
</div>
<div class="warp-footer">
<div class="warp-icon-cont">
<ul>
<li><img src="./static/img/发表情.png" alt="" />
<a href="javascript:void(0)">表情</a>
</li>
<li><img src="./static/img/图片_填充.png" alt="" />
<a href="javascript:void(0)">图片</a>
</li>
<li><img src="./static/img/视频_填充.png" alt="" />
<a href="javascript:void(0)">视频</a>
</li>
<li><img src="./static/img/话题选中.png" alt="" />
<a href="javascript:void(0)">话题</a>
</li>
<li><img src="./static/img/文章.png" alt="" />
<a href="javascript:void(0)">文章</a>
</li>
</ul>
</div>
<div class="warp-footer-btns">
<div class="release-btn">
<a href="javascript:void(0)">发布</a>
</div>
</div>
</div>
</div>
</div>
<!-- 显示留言的主体 -->
<div class="show">
<div class="show-content">
<div class="show-name">
<div class="avtors"><img src="./static/img/touxiang.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;"></div>
<span style="margin-left: 10px;font-size: 1rem;">Xx</span>
</div>
<div class="show-txt">
<p class="">这是内容111111111111111111111111111111111111111111111111111111111</p>
</div>
<div class="show-time">2018年10月24日</div>
<!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
<i class="layui-icon layui-icon-release"></i> 回复
</button> -->
<div class="layui-panel">
<div class="comments">
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div>
</div>
<div class="comment-block">
<form action="">
<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..." style="resize:none"></textarea>
<button type="button" class="layui-btn layui-btn-xs">
<i class="layui-icon layui-icon-release"></i> 回复
</button>
</form>
</div>
</div>
<div class="comment-wrap">
<div class="photo">
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div>
</div>
<div class="comment-block">
<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit
quasi sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
<div class="bottom-comment">
<div class="comment-date">23.5 2014</div>
<ul class="comment-actions">
<li class="complain">Complain</li>
<li class="reply">Reply</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="show-close">x</div>
</div>
</div>
</div>
<script>
layui.use(function () {
var $ = layui.$;
var layer = layui.layer;
var util = layui.util;
var form = layui.form;
util.on('lay-on', {
'wrap': function () {
layer.open({
type: 1,
resize: true,
title: '发表留言',
shade: false, // 不显示遮罩
content: $('#warp'), // 捕获的元素
end: function () {
// layer.msg('关闭后的回调', {icon:6});
}
});
},
'admin': function () {
layer.open({
type: 1,
area: '350px',
resize: false,
shadeClose: true,
title: '管理员登录',
content: $('#adminform'),
}, )
}
})
})
// 匿名函数包裹，防止外界操作的修改
$(function () {
// 还能输入的字得个数
var able_count = 140;
// 是否可以发布留言
var release_able = false;
// 右上角文字
var $title_txt = $('.title-txt');
// 留言框
var $main_area = $('.main-area');
// 发布按钮
var $release_btn = $('.release-btn');
// 输入框获取焦点
$main_area.focus(function () {
console.log("获取焦点");
$(this).parent().addClass('outline');
$title_txt.addClass('title');
if (able_count >= 0) {
$title_txt.html("还可以输入" + able_count + "个字");
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
}
})
// 输入框失去焦点
$main_area.blur(function () {
console.log("失去焦点");
$(this).parent().removeClass('outline');
$title_txt.removeClass('title');
$title_txt.html("111");
})
// 输入框文本修改
$main_area.on('input', function () {
console.log("文本修改");
// 剩余可输入的字个数
able_count = 140 - $main_area.val().length;
// console.log(able_count);
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
if (able_count >= 0 && able_count <= 140) {
$title_txt.html("还可以输入" + able_count + "个字");
if (able_count != 140) {
release_able = true;
} else {
release_able = false;
}
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
release_able = false;
}
// 根据发布状态决定发布按钮的样式
if (release_able) {
$release_btn.css({
backgroundColor: "orange",
borderColor: "orange"
})
} else {
$release_btn.css({
backgroundColor: "#ffc09f",
borderColor: "#ffc09f"
})
}
})
// 发布事件
$release_btn.click(function () {
console.log("发布");
if (release_able) {
console.log('可以发布');
// 创建show对象的各个部位
var $showContent = $('<div class="show-content"></div>'),
$showName = $('<div class="show-name"></div>'),
$showTxt = $('<div class="show-txt"></div>'),
$showTime = $('<div class="show-time"></div>'),
$showClose = $('<div class="show-close"></div>'),
$showP = $('<p class=""></p>');
var date = new Date();
// 设置，对象结构内内容
$showName.text("XxXx");
$showP.text($main_area.val());
$showTime.text(date);
$showClose.text("x");
// 添加进入主结构
$showTxt.append($showP);
$showContent.append($showName);
$showContent.append($showTxt);
$showContent.append($showTime);
$showContent.append($showClose);
// 向所有匹配元素内部的开始处插入内容
$('.show').prepend($showContent);
// 添加动画
// 位置从输入框处下移
$showContent.css({
top: '-150px'
})
$showContent.animate({
top: 0
}, 200)
// 删除事件
$showClose.click(function () {
// 显示插入的索引位置
// console.log($(this).parent().index());
// console.log($showContent.index());
// 删除操作为顺便
// $showContent.remove();
// 使用删除动画，创建效果
$showContent.animate({
height: 0
}, 200, function () {
// 动画结束后将自身从dom中移除
$showContent.remove();
})
})
// 发布成功后收尾工作
$main_area.val(""); //输入框清空
able_count = 140; //输入框可输入内容数重置
release_able = false;
$release_btn.css({
backgroundColor: '#ffc09f',
borderColor: '#ffc09f'
}) //按钮点击事件重置
}
})
})
</script>
</body>
</html>

351
web/static/css/index.css Normal file
View File

@@ -0,0 +1,351 @@
body, ul {
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
ul {
list-style: none;
}
/* main */
.main {
width: 800px;
height: 100%;
/* background-color: #eb7350; */
display: flex;
flex-direction: column;
}
/* header */
.header{
width: 100%;
height: 50px;
/* background-color: #ddd; */
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
/* align-items: center; */
/* justify-content: flex-end; */
}
.userIfo {
display: flex;
margin-top: 20px;
}
.panel{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.layui-panel {
background:transparent;
}
.admin {
width: 350px;
height: 500px;
}
/* 管理员登陆 */
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
/*最外层*/
.wrap {
width: 700px;
height: 325px;
margin: 20px auto;
border-radius: 4px;
/* border: 1px solid #ddd; */
padding: 0 10px;
}
.wrap-head {
width: 100%;
height: 24px;
padding-top: 4px;
overflow: hidden;
}
.head-logo {
width: 40%;
float: left;
}
.head-logo img {
width: 30px;
height: 30px;
}
.head-txt {
padding: 4px 0;
width: 60%;
float: right;
}
.head-txt a {
font-size: 12px;
color: #eb7350;
text-decoration: none;
}
.title-txt.title {
text-align: right;
color: black;
display: block;
width: 100%;
}
/*内层设计，输入框*/
.main-txt {
border: 1px solid #ccc;
width: 98%;
height: 68px;
margin: 4px 0 0;
padding: 5px;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15) inset;
}
.main-txt textarea {
border: none;
width: 100%;
height: 66px;
outline: none;
resize: none;
color: #333;
}
.main-txt.outline {
outline: 2px orange solid;
}
/*下层设计*/
.warp-footer {
width: 100%;
height: 40px;
margin: 6px 0;
overflow: hidden;
}
.warp-icon-cont {
width: 65%;
float: left;
margin-top: 10px;
}
.warp-icon-cont ul li {
display: inline-block;
margin-right: 15px;
cursor: pointer;
}
.warp-icon-cont a {
font-size: 12px;
color: #333;
text-decoration: none;
height: 20px;
margin-left: 5px;
display: block;
width: 25px;
float: right;
line-height: 20px;
}
.warp-icon-cont a:hover {
color: #eb7350;
}
.warp-icon-cont img {
width: 20px;
height: 20px;
}
.warp-footer-btns {
width: 35%;
float: right;
overflow: hidden;
margin-top: 3px;
}
.release-btn {
width: 80px;
height: 28px;
float: right;
background-color: #ffc09f;
border: 4px solid #fbbd9e;
cursor: pointer;
border-radius: 2px;
}
.release-btn a {
display: block;
color: #fff;
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
text-decoration: none;
font-size: 15px;
}
/*后期添加的留言框*/
.show {
width: 800px;
/* margin: 20px auto; */
}
.show-content {
width: 775px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
padding: 10px;
position: relative;
overflow: hidden;
}
.show-name {
width: 100%;
text-align: left;
font-size: 14px;
color: #333;
font-weight: bold;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.show-txt {
width: 100%;
color: #444;
font-size: 14px;
margin-top: 10px;
}
.show-txt p {
width: 100%;
word-wrap: break-word;
}
.show-time {
font-size: 12px;
color: #808080;
margin-top: 10px;
}
.show-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 12px;
color: #ccc;
cursor: pointer;
transition: .5s;
}
.show-close:hover {
color: red;
}
/* html,
body {
background-color: #f0f2fa;
font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
color: #555f77;
-webkit-font-smoothing: antialiased;
} */
input,
textarea {
outline: none;
border: none;
display: block;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 1rem;
color: #555f77;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #ced2db;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #ced2db;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #ced2db;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #ced2db;
}
p {
line-height: 1.3125rem;
}
.comments {
margin: 2.5rem auto 0;
max-width: 60.75rem;
padding: 0 1.25rem;
}
.comment-wrap {
margin-bottom: 1.25rem;
display: table;
width: 100%;
min-height: 5.3125rem;
}
.photo {
padding-top: 0.625rem;
display: table-cell;
width: 3.5rem;
}
.photo .avatar {
height: 2.25rem;
width: 2.25rem;
border-radius: 50%;
background-size: contain;
}
.comment-block {
padding: 1rem;
background-color: #fff;
display: table-cell;
vertical-align: top;
border-radius: 0.1875rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
width: 100%;
max-width: 100%;
}
.comment-text {
margin-bottom: 1.25rem;
}
.bottom-comment {
color: #acb4c2;
font-size: 0.875rem;
}
.comment-date {
float: left;
}
.comment-actions {
float: right;
}
.comment-actions li {
display: inline;
}
.comment-actions li.complain {
padding-right: 0.625rem;
border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
padding-left: 0.625rem;
}

BIN
web/static/img/touxiang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
web/static/img/发表情.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
web/static/img/图片_填充.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
web/static/img/文章.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
web/static/img/留言.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
web/static/img/视频_填充.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
web/static/img/话题选中.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

142
web/static/js/index.js Normal file
View File

@@ -0,0 +1,142 @@
// 匿名函数包裹，防止外界操作的修改
$(function () {
// 还能输入的字得个数
var able_count = 140;
// 是否可以发布留言
var release_able = false;
// 右上角文字
var $title_txt = $('.title-txt');
// 留言框
var $main_area = $('.main-area');
// 发布按钮
var $release_btn = $('.release-btn');
// 输入框获取焦点
$main_area.focus(function () {
console.log("获取焦点");
$(this).parent().addClass('outline');
$title_txt.addClass('title');
if (able_count >= 0) {
$title_txt.html("还可以输入" + able_count + "个字");
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
}
})
// 输入框失去焦点
$main_area.blur(function () {
console.log("失去焦点");
$(this).parent().removeClass('outline');
$title_txt.removeClass('title');
$title_txt.html("111");
})
// 输入框文本修改
$main_area.on('input', function () {
console.log("文本修改");
// 剩余可输入的字个数
able_count = 140 - $main_area.val().length;
// console.log(able_count);
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
if (able_count >= 0 && able_count <= 140) {
$title_txt.html("还可以输入" + able_count + "个字");
if (able_count != 140) {
release_able = true;
} else {
release_able = false;
}
} else {
$title_txt.html("你以超出" + (-able_count) + "个字");
release_able = false;
}
// 根据发布状态决定发布按钮的样式
if (release_able) {
$release_btn.css({
backgroundColor: "orange",
borderColor: "orange"
})
} else {
$release_btn.css({
backgroundColor: "#ffc09f",
borderColor: "#ffc09f"
})
}
})
// 发布事件
$release_btn.click(function () {
console.log("发布");
if (release_able) {
console.log('可以发布');
// 创建show对象的各个部位
var $showContent = $('<div class="show-content"></div>'),
$showName = $('<div class="show-name"></div>'),
$showTxt = $('<div class="show-txt"></div>'),
$showTime = $('<div class="show-time"></div>'),
$showClose = $('<div class="show-close"></div>'),
$showP = $('<p class=""></p>');
var date = new Date();
// 设置，对象结构内内容
$showName.text("XxXx");
$showP.text($main_area.val());
$showTime.text(date);
$showClose.text("x");
// 添加进入主结构
$showTxt.append($showP);
$showContent.append($showName);
$showContent.append($showTxt);
$showContent.append($showTime);
$showContent.append($showClose);
// 向所有匹配元素内部的开始处插入内容
$('.show').prepend($showContent);
// 添加动画
// 位置从输入框处下移
$showContent.css({
top: '-150px'
})
$showContent.animate({
top: 0
}, 200)
// 删除事件
$showClose.click(function () {
// 显示插入的索引位置
// console.log($(this).parent().index());
// console.log($showContent.index());
// 删除操作为顺便
// $showContent.remove();
// 使用删除动画，创建效果
$showContent.animate({
height: 0
}, 200, function () {
// 动画结束后将自身从dom中移除
$showContent.remove();
})
})
// 发布成功后收尾工作
$main_area.val(""); //输入框清空
able_count = 140; //输入框可输入内容数重置
release_able = false;
$release_btn.css({
backgroundColor: '#ffc09f',
borderColor: '#ffc09f'
}) //按钮点击事件重置
}
})
})

1
web/static/layui/css/layui.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
web/static/layui/font/iconfont.eot Normal file
View File

Binary file not shown.

405
web/static/layui/font/iconfont.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

BIN
web/static/layui/font/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
web/static/layui/font/iconfont.woff Normal file
View File

Binary file not shown.

BIN
web/static/layui/font/iconfont.woff2 Normal file
View File

Binary file not shown.

1
web/static/layui/layui.js Normal file
View File

File diff suppressed because one or more lines are too long