288 lines
11 KiB
HTML
288 lines
11 KiB
HTML
{% load static %}
|
||
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>Simple Drawing</title>
|
||
<link rel="stylesheet" href="{% static '/css/layui.css' %}">
|
||
<link rel="stylesheet" href="{% static '/css/mycss.css' %}">
|
||
|
||
</head>
|
||
<body>
|
||
<div class="layui-layout layui-layout-admin">
|
||
|
||
|
||
<!-- 头部 -->
|
||
<div class="layui-header">
|
||
<div class="layui-logo layui-hide-xs layui-bg-black">Simple Drawing</div>
|
||
<ul class="layui-nav layui-layout-left">
|
||
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a style="font-size: 30px;" href="{{ url }}">Home</a></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><a style="font-size: 30px;"
|
||
href="tools.html">Tools</a></li>
|
||
<li class="layui-nav-item layui-hide-xs layui-this" style="margin-left: 200px"><a style="font-size: 30px;" href="about.html">About
|
||
us</a></li>
|
||
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 200px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart-fill"></i></li>
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-left: 20px"><i
|
||
class="layui-icon layui-icon-heart"></i></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-hide-xs" style="margin-top: 20px;" onclick="select_1()" id="brief_introduction"><a style="font-size: 25px;">brief
|
||
introduction</a>
|
||
</li>
|
||
<hr class="layui-border-black">
|
||
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-top: 10px;" onclick="select_2()" id="Leaving_a_message"><a style="font-size: 25px;">Leaving
|
||
a message</a>
|
||
</li>
|
||
<hr class="layui-border-black">
|
||
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-top: 10px;" onclick="select_3()" id="Declare"><a style="font-size: 25px;">Declare</a>
|
||
</li>
|
||
<hr class="layui-border-black">
|
||
|
||
<li class="layui-nav-item layui-hide-xs" style="margin-top: 10px;" onclick="select_4()" id="Timeline"><a style="font-size: 25px;">Timeline</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-body" style="background-color: rgb(242, 242, 242);">
|
||
|
||
|
||
{# // 介绍#}
|
||
<div class="BriefIntroduction_box" id="BriefIntroduction_box">
|
||
|
||
|
||
</div>
|
||
|
||
|
||
{# // 留言#}
|
||
<div class="LeavingAessage_box" id="LeavingAessage_box">
|
||
<div class="input_text">
|
||
<textarea name="desc" placeholder="input" class="layui-textarea" id="message"></textarea>
|
||
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="send()">立即提交</button>
|
||
</div>
|
||
<br/>
|
||
<br/>
|
||
<br/>
|
||
<br/>
|
||
<br/>
|
||
|
||
<div class="message_box" id="message_box" style="overflow:auto;height: 55%;">
|
||
<div id="message_text">
|
||
<hr>
|
||
<br>
|
||
<div id="icon">
|
||
<i class="layui-icon layui-icon-form"></i> 
|
||
</div>
|
||
|
||
<div id="text">This is a message to celebrate the completion of the front page
|
||
</div>
|
||
<br>
|
||
<h4>2020-06-27</h4>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
{# 时间线#}
|
||
<div class="timeline_box" id='timeline_box'>
|
||
<div class="line_box">
|
||
|
||
<ul class="layui-timeline">
|
||
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">2021-6-28</h3>
|
||
<p>
|
||
前端页面制作完成
|
||
</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">2021-5</h3>
|
||
<p> 确定项目开始设计制作
|
||
</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">2020-10</h3>
|
||
<p>
|
||
产生想法开始搜集学习相关内容
|
||
</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<div class="layui-timeline-title">过去</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{# // 开源协议#}
|
||
<div class="declare_box" id="declare_box">
|
||
<blockquote class="layui-elem-quote" style="margin: 40px 50px 0 50px">
|
||
1. <a href="https://gitee.com/sentsin/layui">使用layUI组件</a>
|
||
</blockquote>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<div class="layui-footer">
|
||
<!-- 底部固定区域 -->
|
||
底部固定区域
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<script src="{% static 'layui.js' %}"></script>
|
||
|
||
|
||
<script>
|
||
var $ = layui.jquery;
|
||
|
||
// 加载框
|
||
function lodeing() {
|
||
layer.load(1);
|
||
setTimeout(function () {
|
||
});
|
||
}
|
||
|
||
|
||
// 留言发送与获取
|
||
function send() {
|
||
var data = document.getElementById("message").value
|
||
lodeing()
|
||
$.ajax({
|
||
url: "http://127.0.0.1:8000/message",
|
||
data: {
|
||
"message": data
|
||
},
|
||
success: function (res) {
|
||
layer.closeAll('loading'); // 关闭加载
|
||
|
||
var L = '<div id="message_text"><hr><br><div id="icon"><i class="layui-icon ' + res.icon + '"></i> </div><div id="text">' + res.data + '</div><br><h4>' + res.time + '</h4></div>';
|
||
$("#message_box").prepend(L);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
$.ajax({
|
||
url: "http://127.0.0.1:8000/message",
|
||
data: {
|
||
get_break: 1
|
||
},
|
||
success: function (res) {
|
||
|
||
layui.each(res.data, function (index, item) {
|
||
var L = '<div id="message_text"><hr><br><div id="icon"><i class="layui-icon ' + item.icon + '"></i> </div><div id="text">' + item.data + '</div><br><h4>' + item.time + '</h4></div>';
|
||
$("#message_box").prepend(L);
|
||
});
|
||
|
||
}
|
||
})
|
||
;
|
||
</script>
|
||
|
||
|
||
<script>
|
||
function select_1() {
|
||
|
||
document.getElementById("BriefIntroduction_box").className = "BriefIntroduction_box";
|
||
document.getElementById("LeavingAessage_box").className = "hide";
|
||
document.getElementById("declare_box").className = "hide";
|
||
document.getElementById("timeline_box").className = "hide";
|
||
|
||
|
||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs ";
|
||
document.getElementById("brief_introduction").className = "layui-nav-item layui-hide-xs layui-this";
|
||
document.getElementById("Declare").className = "layui-nav-item layui-hide-xs";
|
||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs";
|
||
|
||
|
||
}
|
||
|
||
function select_2() {
|
||
document.getElementById("BriefIntroduction_box").className = "hide";
|
||
document.getElementById("LeavingAessage_box").className = "LeavingAessage_box";
|
||
document.getElementById("declare_box").className = "hide";
|
||
document.getElementById("timeline_box").className = "hide";
|
||
|
||
document.getElementById("brief_introduction").className = "layui-nav-item layui-hide-xs ";
|
||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs layui-this";
|
||
document.getElementById("Declare").className = "layui-nav-item layui-hide-xs";
|
||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs";
|
||
}
|
||
|
||
function select_3() {
|
||
document.getElementById("BriefIntroduction_box").className = "hide";
|
||
document.getElementById("LeavingAessage_box").className = "hide";
|
||
document.getElementById("declare_box").className = "declare_box";
|
||
document.getElementById("timeline_box").className = "hide";
|
||
|
||
document.getElementById("declare").className = "layui-nav-item layui-hide-xs layui-this";
|
||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs";
|
||
document.getElementById("Drief_introduction").className = "layui-nav-item layui-hide-xs";
|
||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs";
|
||
}
|
||
|
||
function select_4() {
|
||
document.getElementById("BriefIntroduction_box").className = "hide";
|
||
document.getElementById("LeavingAessage_box").className = "hide";
|
||
document.getElementById("declare_box").className = "hide";
|
||
document.getElementById("timeline_box").className = "timeline_box";
|
||
|
||
document.getElementById("declare").className = "layui-nav-item layui-hide-xs ";
|
||
document.getElementById("Leaving_a_message").className = "layui-nav-item layui-hide-xs";
|
||
document.getElementById("Drief_introduction").className = "layui-nav-item layui-hide-xs";
|
||
document.getElementById("Timeline").className = "layui-nav-item layui-hide-xs layui-this";
|
||
}
|
||
|
||
|
||
select_1()
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |