代码拉取完成，页面将自动刷新
主要更改了pro_list.html文件样式(很喜欢这个mrdoc)：
1 解决简介过长排版絮乱问题
2 增加了个鼠标悬停，显示简介内容
更改后代码如下：
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>MrDoc - 一个简单的文档写作系统</title>
<link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
<link href="{% static 'style.css' %}" rel="stylesheet">
</head>
<style>
.layui-card-body{
height: 44px;
overflow: hidden;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
max-width: 170px;
padding: 10px 10px;
}
</style>
<body class="layui-layout-body">
<div class="layui-header">
<div class="layui-main">
<a class="logo" href="{% url 'pro_list' %}">
{# <img src="/media/logo.png" />#}
<h1><strong>MrDoc</strong></h1>
</a>
{# <div class="component">#}
{# <div class="layui-input-inline">#}
{# <input class="layui-input" placeholder="搜索文集"/>#}
{# </div>#}
{# </div>#}
<ul class="layui-nav layui-layout-right">
{% if request.user.is_authenticated %}
<li class="layui-nav-item">
<a href="javascript:void(0);">
<i class="layui-icon layui-icon-username"></i> {{request.user.username}}
</a>
<dl class="layui-nav-child">
<!-- <dd><a href="">基本资料</a></dd> -->
{% if request.user.is_superuser %}
<dd><a href="{% url 'user_manage' %}">进入后台</a></dd>
{% endif %}
<dd><a href="{% url 'manage_doc' %}">管理文档</a></dd>
<dd><a href="javascript:void(0);" onclick="changePwd('{{ request.user.id }}','{{ request.user.username }}' )">修改密码</a></dd>
<dd><a href="{% url 'logout' %}">退出登录</a></dd>
</dl>
</li>
{% else %}
<li class="layui-nav-item">
<a href="javascript:void(0);">
<i class="layui-icon layui-icon-username"></i> 游客
</a>
<dl class="layui-nav-child">
<!-- <dd><a href="">基本资料</a></dd> -->
<dd><a href="{% url 'register' %}">注册</a></dd>
<dd><a href="{% url 'login' %}">登录</a></dd>
</dl>
</li>
{% endif %}
</ul>
</div>
</div>
<div class="layui-main">
{% for p in project_list %}
<div class="project-item">
<a href="{% url 'pro_index' p.id %}">
<div class="layui-card">
<div class="layui-card-header"><strong><i class="layui-icon layui-icon-read"></i> {{ p.name }}</strong>
</div>
<div class="layui-card-body">
<p>作者：{{p.create_user}}</p>
<p class="tooltip" title="{{ p.intro }}">简介：{{ p.intro }}</p>
<p></p>
</div>
</div>
</a>
</div>
{% endfor %}
{# <div class="project-item">#}
{# <a href="javascript:void(0);" onclick="createPro();">#}
{# <div class="layui-card">#}
{# <div class="layui-card-header"><i class="layui-icon layui-icon-add-1"></i> 创建文集</div>#}
{# <div class="layui-card-body">#}
{# 新建一个文集，开始愉快的写作……#}
{# </div>#}
{# </div>#}
{# </a>#}
{# </div>#}
<div class="project-item">
<a href="{% url 'create_doc' %}" target="_blank">
<div class="layui-card">
<div class="layui-card-header"><i class="layui-icon layui-icon-add-1"></i> 创建文档</div>
<div class="layui-card-body">
新建一个文档，马上开始写作……
</div>
</div>
</a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
{% block custom_script %}
<script>
var x = 10;
var y = 20;
var newtitle = '';
$('p.tooltip').mouseover(function(e) {
newtitle = this.title;
this.title = '';
$('body').append('<div id="tooltip">' + newtitle + '</div>');
$('#tooltip').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y + 'px')
}).show();
}).mouseout(function() {
this.title = newtitle;
$('#tooltip').remove();
}).mousemove(function(e) {
$('#tooltip').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y + 'px')
}).show();
})
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
var layer = layui.layer;
//创建新文集
createPro = function () {
layer.open({
type:1,
title:'新建文集',
area:'300px;',
id:'createPro',//配置ID
content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介" class="layui-textarea"></textarea></div>',
btn:['确定','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
data = {
'pname':$("#pname").val(),
'desc':$("#desc").val(),
}
$.post("{% url 'create_project' %}",data,function(r){
if(r.status){
//创建成功，刷新页面
window.location.reload();
}else{
//创建失败，提示
console.log(r)
}
})
},
});
};
//修改文集
modifyPro = function(pro_id){
layer.open({
type:1,
title:'修改文集',
area:'300px;',
id:'createPro',//配置ID
content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介" class="layui-textarea"></textarea></div>',
btn:['确定','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
data = {
'pro_id':pro_id,
'name':$("#pname").val(),
'desc':$("#desc").val(),
}
$.post("{% url 'modify_project' %}",data,function(r){
if(r.status){
//修改成功，刷新页面
window.location.reload();
}else{
//修改失败，提示
console.log(r)
}
})
},
});
};
//修改用户密码
changePwd = function(uid,username){
layer.open({
type:1,
title:'修改密码',
area:'300px;',
id:'changePwd',
content:'<div style="padding:10px 0 0 20px;">修改用户[' + username + ']的密码：</div><div style="padding: 20px;"><input class="layui-input" type="password" id="newPwd1" style="margin-bottom:10px;" placeholder="输入新密码" required lay-verify="required"><input class="layui-input" type="password" id="newPwd2" placeholder="再次确认新密码" required lay-verify="required"></div>',
btn:['确认修改','取消'],
yes:function (index,layero) {
data = {
'password':$("#newPwd1").val(),
'password2':$("#newPwd2").val(),
}
$.post("{% url 'modify_pwd' %}",data,function(r){
if(r.status){
//修改成功
window.location.reload();
//layer.close(index)
}else{
//修改失败，提示
//console.log(r)
layer.msg(r.data)
}
})
},
})
};
</script>
{% endblock %}
</body>
</html>
